From 1a9e4eaef623c42fb97e2497334d3fa4c9fbc8e9 Mon Sep 17 00:00:00 2001 From: czaks Date: Fri, 31 Jan 2014 09:39:39 +0100 Subject: [PATCH] full, working wPaint oekaki implementation; fixes vichan-devel#20 --- js/upload-selection.js | 2 - js/wPaint | 2 +- js/wpaint.js | 111 ++++++++++++++++++++++++++++++++++++++--- templates/header.html | 2 +- 4 files changed, 107 insertions(+), 10 deletions(-) diff --git a/js/upload-selection.js b/js/upload-selection.js index 9c4ebd34..20916ba5 100644 --- a/js/upload-selection.js +++ b/js/upload-selection.js @@ -23,7 +23,6 @@ $(function(){ $("#upload_file").hide(); $("#upload_url").hide(); $("#upload_embed").hide(); - $("#oekaki").hide(); if (enabled_oekaki) { if (window.oekaki.initialized) { @@ -53,7 +52,6 @@ $(function(){ enable_oekaki = function() { disable_all(); - $("#oekaki").show(); window.oekaki.init(); }; diff --git a/js/wPaint b/js/wPaint index a20cfb7d..ae151315 160000 --- a/js/wPaint +++ b/js/wPaint @@ -1 +1 @@ -Subproject commit a20cfb7d02631b7afa708fb91365dff165776c04 +Subproject commit ae15131585dd7c40a61d440e5a3740b5fc68780f 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 * + * Contains parts of old oekaki code: + * Copyright (c) 2013 copypaste + * Copyright (c) 2013-2014 Marcin Łabanowski + * * 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 = 'Oekaki
'; + + // Add oekaki after the file input + $('form[name="post"]:not(#quick-reply) input[type="file"]').parent().parent().after(oekaki_form); + + $('').appendTo($("head")); + $('').appendTo($("head")); + $('').appendTo($("head")); + $('').appendTo($("head")); + $('').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; })(); diff --git a/templates/header.html b/templates/header.html index 63725b73..c4861d98 100644 --- a/templates/header.html +++ b/templates/header.html @@ -7,7 +7,7 @@ {% if config.font_awesome %}{% endif %} {% if not nojavascript %}