forked from leftypol/leftypol
full, working wPaint oekaki implementation; fixes vichan-devel#20
This commit is contained in:
parent
e4c3bba0f5
commit
1a9e4eaef6
4 changed files with 107 additions and 10 deletions
111
js/wpaint.js
111
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 = window.oekaki = {};
|
||||
var oekaki = {};
|
||||
|
||||
oekaki.settings = new script_settings('wpaint');
|
||||
oekaki.height = oekaki.settings.get("height", 250);
|
||||
oekaki.width = oekaki.settings.get("width", 500);
|
||||
|
||||
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;
|
||||
})();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue