full, working wPaint oekaki implementation; fixes vichan-devel#20

1 files changed, 105 insertions, 6 deletions

diff --git a/js/wpaint.js b/js/wpaint.js
index 0c8c8be0..3e911bc7 100644
--- a/js/wpaint.js
+++ b/js/wpaint.js
@@ -5,6 +5,10 @@
  * Released under the MIT license
  * Copyright (c) 2014 Marcin Łabanowski <marcin@6irc.net>
  *
+ * Contains parts of old oekaki code:
+ * Copyright (c) 2013 copypaste <wizardchan@hush.com>
+ * Copyright (c) 2013-2014 Marcin Łabanowski <marcin@6irc.net>
+ *
  * Usage:
  *   $config['additional_javascript'][] = 'js/jquery.min.js';
  *   $config['additional_javascript'][] = 'js/jquery-ui.custom.min.js';
@@ -12,24 +16,119 @@
  *   $config['additional_javascript'][] = 'js/wPaint/lib/wColorPicker.min.js';
  *   $config['additional_javascript'][] = 'js/wPaint/wPaint.min.js';
  *   $config['additional_javascript'][] = 'js/wPaint/plugins/main/wPaint.menu.main.min.js';
- *   //$config['additional_javascript'][] = 'js/wPaint/plugins/text/wPaint.menu.text.min.js';
- *   //$config['additional_javascript'][] = 'js/wPaint/plugins/shapes/wPaint.menu.main.shapes.min.js';
- *   //$config['additional_javascript'][] = 'js/wPaint/plugins/file/wPaint.menu.main.file.min.js';
+ *   $config['additional_javascript'][] = 'js/wPaint/plugins/text/wPaint.menu.text.min.js';
+ *   $config['additional_javascript'][] = 'js/wPaint/plugins/shapes/wPaint.menu.main.shapes.min.js';
+ *   $config['additional_javascript'][] = 'js/wPaint/plugins/file/wPaint.menu.main.file.min.js';
  *   $config['additional_javascript'][] = 'js/wpaint.js';
  *   $config['additional_javascript'][] = 'js/upload-selection.js';
  *
  */
 
-(function(){
+window.oekaki = (function(){
+"use strict";
+
+var oekaki = {};
+
+oekaki.settings = new script_settings('wpaint');
+oekaki.height = oekaki.settings.get("height", 250);
+oekaki.width = oekaki.settings.get("width", 500);
 
-var oekaki = window.oekaki = {};
+function dataURItoBlob(dataURI) {
+    var binary = atob(dataURI.split(',')[1]);
+    var array = new Array(binary.length);
+    for(var i = 0; i < binary.length; i++) {
+        array[i] = binary.charCodeAt(i);
+    }
+    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
+}
+
+oekaki.do_css = function() {
+}
 
 oekaki.init = function() {
+  var oekaki_form = '<tr id="oekaki"><th>Oekaki</th><td><div id="wpaintctr"><div id="wpaintdiv"></div></div></td></tr>';
+
+  // Add oekaki after the file input
+  $('form[name="post"]:not(#quick-reply) input[type="file"]').parent().parent().after(oekaki_form);
+
+  $('<link class="wpaintcss" rel="stylesheet" href="'+configRoot+'js/wPaint/wPaint.min.css" />').appendTo($("head"));
+  $('<link class="wpaintcss" rel="stylesheet" href="'+configRoot+'js/wPaint/lib/wColorPicker.min.css" />').appendTo($("head"));
+  $('<link class="wpaintcss" rel="stylesheet" href="'+configRoot+'stylesheets/jquery-ui/core.css" />').appendTo($("head"));
+  $('<link class="wpaintcss" rel="stylesheet" href="'+configRoot+'stylesheets/jquery-ui/resizable.css" />').appendTo($("head"));
+  $('<link class="wpaintcss" rel="stylesheet" href="'+configRoot+'stylesheets/jquery-ui/theme.css" />').appendTo($("head"));
+
+  var initcount = 0;
+  $('.wpaintcss').one('load', function() {
+    initcount++;
+
+    if (initcount == 5) {
+      $.extend($.fn.wPaint.defaults, {
+        mode:        'pencil',  // set mode
+        lineWidth:   '1',       // starting line width
+        fillStyle:   '#FFFFFF', // starting fill style
+        strokeStyle: '#000000',  // start stroke style
+      });
+
+      delete $.fn.wPaint.menus.main.items.save;
+
+      $('#wpaintdiv').wPaint({
+        path: configRoot+'js/wPaint/',
+	menuOffsetTop: -46,
+	bg: "#ffffff",
+	loadImgFg:   oekaki.load_img,
+	loadImgBg:   oekaki.load_img
+      });
+
+      $("#wpaintctr").resizable({
+        stop: function(event,ui) {
+          $("#wpaintdiv").wPaint("resize");
+        },
+        alsoResize: "#wpaintdiv, #wpaintdiv canvas",
+      });
+
+      $('#wpaintctr .ui-resizable-se').css({'height':'12px', 'width':'12px'});
+    }
+  });
+
+  $("#wpaintdiv").width(oekaki.width).height(oekaki.height).css("position", "relative");
+  $("#wpaintctr").width(oekaki.width+5).height(oekaki.height+5).css("padding-top", 48).css("position", "relative");
+
+  $(document).on("ajax_before_post.wpaint", function(e, postData) {
+    var blob = $('#wpaintdiv').wPaint("image");
+    blob = dataURItoBlob(blob);
+    postData.append("file", blob, "Oekaki.png");
+  });
+
+  $(window).on('stylesheet', function() {
+    oekaki.do_css();
+    if ($('link#stylesheet').attr('href')) {
+      $('link#stylesheet')[0].onload = do_css;
+    }
+  });
+
+  oekaki.initialized = true;
+};
+
+oekaki.load_img = function() {
+  alert(_("Click on any image on this site to load it into oekaki applet"));
+  $('img').one('click.loadimg', function(e) {
+    $('img').off('click.loadimg');
+    e.stopImmediatePropagation();
+    e.preventDefault();
+    var url = $(this).prop('src');
+    $('#wpaintdiv').wPaint('setBg', url);
+    return false;
+  });
 };
 
 oekaki.deinit = function() {
+  $('#oekaki, .wpaintcss').remove();
+
+  $(document).off("ajax_before_post.wpaint");
+
+  oekaki.initialized = false;
 };
 
 oekaki.initialized = false;
-
+return oekaki;
 })();