summaryrefslogtreecommitdiff
path: root/js/oekaki.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/oekaki.js')
-rw-r--r--js/oekaki.js278
1 files changed, 0 insertions, 278 deletions
diff --git a/js/oekaki.js b/js/oekaki.js
deleted file mode 100644
index cb7aff39..00000000
--- a/js/oekaki.js
+++ /dev/null
@@ -1,278 +0,0 @@
-/*
- * oekaki.js
- * https://github.com/vichan-devel/Tinyboard/blob/master/js/oekaki.js
- *
- * Warning: this script is unsupported and staged for deletion/replacement
- * Please consult this bug report:
- * https://github.com/vichan-devel/Tinyboard/issues/20
- *
- * Released under the MIT license
- * Copyright (c) 2013 copypaste <wizardchan@hush.com>
- * Copyright (c) 2013-2014 Marcin Ɓabanowski <marcin@6irc.net>
- *
- * Usage: (it wouldn't work when mixed with ajax.js)
- * $config['additional_javascript'][] = 'js/jquery.min.js';
- * $config['additional_javascript'][] = 'js/oekaki.js';
- * $config['additional_javascript'][] = 'js/jscolor/jscolor.js';
- * //$config['additional_javascript'][] = 'js/upload-selection.js';
- */
-
-$(function() {
-// Init
-var oekaki_form = '\
- <tr id="oekaki">\
- <th>\
- Oekaki\
- </th>\
- <td>\
- <canvas width="'+oekaki_options.width+'" height="'+oekaki_options.height+'" id="oekaki_canvas" style="border:1px solid black;-webkit-user-select: none;-moz-user-select: none;"></canvas>\
- <p><button type="button" id="brushsize">'+_('Brush size')+'</button><input class="color" id="color" value="000000" placeholder="Color"/><button type="button" id="text">'+_('Set text')+'</button><button type="button" id="clear">'+_('Clear')+'</button><button type="button" id="save">'+_('Save')+'</button><button type="button" id="load">'+_('Load')+'</button><br/>\
- <button type="button" id="eraser">'+_('Toggle eraser')+'</button><button type="button" id="getcolor">'+_('Get color')+'</button><button type="button" id="fill">'+_('Fill')+'</button>\
- </p><p><textarea id="savebox"></textarea><label id="confirm_oekaki_label"><input id="confirm_oekaki" type="checkbox"/> '+_('Use oekaki instead of file?')+'</label></p>\
- <img id="saved" style="display:none">\
- </td>\
- </tr>'
-
-function init_oekaki() {
- // Add oekaki after the file input
- $('form[name="post"]:not(#quick-reply) input[type="file"]').parent().parent().after(oekaki_form);
- // Add "edit in oekaki" links
- $(".fileinfo .unimportant").append(' <a href="javascript:void(0)" class="edit_in_oekaki">['+_('Edit in oekaki')+']</a>');
- // Init oekaki vars
- canvas = $("#oekaki_canvas");
- context = canvas[0].getContext("2d");
- is_drawing = false;
- text = "";
- eraser = getcolor = fill = false;
- context.strokeStyle = context.fillStyle = "black";
- // Attach canvas events
- attach_events();
-}
-
-if (active_page == 'index' || active_page == 'thread') {
- init_oekaki();
-}
-
-//http://stackoverflow.com/a/5624139/1901658
-function hexToRgb(hex) {
- var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
- return result ? {
- r: parseInt(result[1], 16),
- g: parseInt(result[2], 16),
- b: parseInt(result[3], 16)
- } : null;
-}
-
-//http://stackoverflow.com/a/4025958/1901658
-function arraysEqual(arr1, arr2) {
- if(arr1.length !== arr2.length)
- return false;
- for(var i = arr1.length; i--;) {
- if(arr1[i] !== arr2[i])
- return false;
- }
-
- return true;
-}
-
-function getmousepos(e){
- var r = canvas[0].getBoundingClientRect();
- mouseX = Math.round(e.clientX - r.left);
- mouseY = Math.round(e.clientY - r.top);
-}
-
-function setcolor(){
- context.strokeStyle = context.fillStyle = "#"+$(".color").val();
-}
-
-function flood_fill(x, y, target){
- var pixel = context.createImageData(1,1);
- var color = hexToRgb("#"+$(".color").val());
- pixel.data[0] = color.r; pixel.data[1] = color.g; pixel.data[2] = color.b; pixel.data[3] = 255;
- var queue = [];
- var node = [x, y];
- queue.push(node);
- //var iters = 0;
- while (queue.length > 0) {
- var n = queue.pop();
- var data = context.getImageData(n[0], n[1], 1, 1).data;
- var d = [data[0], data[1], data[2], data[3]];
- var t = [target[0], target[1], target[2], target[3]];
- if (arraysEqual(d, t) && n[0] < canvas.width() && n[1] < canvas.height() && n[0] > -1 && n[1] > -1){
- context.putImageData(pixel, n[0], n[1]);
- queue.push([n[0], n[1]-1]);
- queue.push([n[0], n[1]+1]);
- queue.push([n[0]-1, n[1]]);
- queue.push([n[0]+1, n[1]]);
- //iters++;
- }
- //if (iters%100===0){console.log(n[0]);console.log(n[1])}
-
- }
- return;
-}
-
-function color_under_pixel(x, y){
- return context.getImageData(x, y, 1, 1).data;
-}
-
-function attach_events(){
-
-canvas.on("mousedown", function(e){
- getmousepos(e);
- $(this).css("cursor","none");
- if (getcolor) {
- var imagedata = color_under_pixel(mouseX, mouseY);
- $("#color")[0].color.fromRGB(imagedata[0], imagedata[1], imagedata[2]);
- getcolor = false;
- setcolor();
- }
- else if (fill && !eraser) {
- flood_fill(mouseX, mouseY, color_under_pixel(mouseX, mouseY));
- fill = false;
- }
- else {
- is_drawing = true;
- context.beginPath();
- context.moveTo(mouseX,mouseY);
- context.fillText(text,mouseX,mouseY);
- $("#confirm_oekaki").attr("checked",true);
- }
-
-});
-
-canvas.on("mousemove", function(e){
- getmousepos(e);
- if (is_drawing) {
- context.lineTo(mouseX,mouseY);
- context.stroke()
- }
-});
-
-canvas.on("mouseup mouseout", function(e){
- context.stroke()
- $(this).css("cursor","auto");
- is_drawing = false;
-});
-
-$("#brushsize").on("click",function(){
- var size = prompt("Enter brush size");
- if (parseInt(size) == NaN) {
- return
- }
- else {
- context.lineWidth = size;
- }
-});
-
-$(".color").on("change", setcolor);
-
-$("#text").on("click", function(e){
- text = prompt(_("Enter some text")) || "";
- context.font = prompt(_("Enter font or leave empty"), context.font)
-});
-
-function clear(){
- context.beginPath();
- context.clearRect(0,0,canvas.width(),canvas.height());
- $("#confirm_oekaki").attr("checked",false)
- canvas[0].height = oekaki_options.height; canvas[0].width = oekaki_options.width;
-};
-
-$("#clear").on("click", clear);
-
-$("#save").on("click",function(){
- $("#savebox").val(canvas[0].toDataURL());
-});
-
-$("#load").on("click", function(){
- clear();
- var img = new Image();
- img.src = $("#savebox").val();
- img.onload = function(){context.drawImage(img,0,0);};
- $("#confirm_oekaki").attr("checked",true)
-});
-
-$("#eraser").on("click", function(){
- if (eraser) {
- eraser = false;
- context.strokeStyle = context.fillStyle = "#"+$(".color").val();
- context.globalCompositeOperation = old_gco;
- }
- else {
- eraser = true;
- old_gco = context.globalCompositeOperation;
- context.globalCompositeOperation = "destination-out";
- context.strokeStyle = "rgba(0,0,0,1)";
- }
-});
-
-$("#getcolor").on("click", function(){
- getcolor = true;
-});
-
-$("#fill").on("click", function(){
- fill = true;
-});
-
-$(".edit_in_oekaki").on("click", function(){
- var img_link = $(this).parent().parent().parent().find("a>img.post-image").parent()[0]
- var img = new Image();
- img.onload = function() {
- canvas[0].width = img.width; canvas[0].height = img.height;
- context.drawImage(img, 0, 0);
- }
- img.src = $(img_link).attr("href");
-
- if (typeof enable_oekaki === 'function') { // for upload-selection.js
- enable_oekaki();
- }
- return false;
-});
-}
-
-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'});
-}
-
-$("form[name='post']").on("submit", function(e){
- if ($("#confirm_oekaki").is(":checked")) {
- e.preventDefault();
- $("input[type='file']").remove();
- var dataURL = canvas[0].toDataURL();
- var blob = dataURItoBlob(dataURL);
- var fd = new FormData(document.forms[0]);
- fd.append("file", blob, "Oekaki.png");
- fd.append("post", $("input[name='post']").val());
- $.ajax({
- type: "POST",
- url: oekaki_options.root+"post.php",
- data: fd,
- processData: false,
- contentType: false,
- success: function(data) {
- location.reload();
- },
- error: function(jq, data, et) {
-if (jq.responseText == '' && data == 'error') {
-//probably jquery bug, ignore
-location.reload();
-}
-else
-{
- alert($('h2',jq.responseText).text());
-}
-}
- });
- }
-
- else {
- return true;
- };
-});
-});