From 7c5222ffb5621d70a8379ff9aa6948bc121d3d54 Mon Sep 17 00:00:00 2001 From: ctrlcctrlv Date: Sat, 17 Aug 2013 17:36:38 +0000 Subject: [PATCH 1/5] Make it so oekaki can be disabled --- js/oekaki.js | 62 ++++++++++++++++++++++++++++++++++++---- templates/post_form.html | 14 --------- 2 files changed, 56 insertions(+), 20 deletions(-) diff --git a/js/oekaki.js b/js/oekaki.js index 7bea3832..028b8f58 100644 --- a/js/oekaki.js +++ b/js/oekaki.js @@ -1,10 +1,57 @@ $(function() { -var canvas = $("#cvs"); -var context = canvas[0].getContext("2d"); -var is_drawing = false; -var text = ""; -var eraser = getcolor = fill = false; -context.strokeStyle = context.fillStyle = "black"; +// Init +var oekaki_form = '\ + \ + \ + Oekaki\ + \ + \ + lol what you looking at the source for nerd\ +


\ + \ +

\ + \ + \ + ' + +function enable_oekaki() { + // Add oekaki after the file input + $('input[type="file"]').parent().parent().after(oekaki_form); + // Init oekaki vars + canvas = $("#cvs"); + context = canvas[0].getContext("2d"); + is_drawing = false; + text = ""; + eraser = getcolor = fill = false; + context.strokeStyle = context.fillStyle = "black"; + // Attach canvas events + attach_events(); + localStorage['oekaki'] = true; +} + +function disable_oekaki(){ + $("#oekaki").detach() + localStorage['oekaki'] = false; +} + +if (localStorage['oekaki'] === undefined) { localStorage['oekaki'] = true } + +$('hr:first').before('
-
'); +$('div#oekaki-status a').text(_('Oekaki')+' (' + (localStorage['oekaki'] === 'true' ? _('enabled') : _('disabled')) + ')'); + +$('div#oekaki-status a').on('click', function(){ + var enabled = !JSON.parse(localStorage['oekaki']); + + if(enabled){ + enable_oekaki(); + } else { + disable_oekaki(); + } + + $('div#oekaki-status a').text(_('Oekaki')+' (' + (enabled ? _('enabled') : _('disabled')) + ')'); +}); + +if (localStorage['oekaki'] === "true") { enable_oekaki(); } //http://stackoverflow.com/a/5624139/1901658 function hexToRgb(hex) { @@ -69,6 +116,8 @@ 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"); @@ -164,6 +213,7 @@ $("#getcolor").on("click", function(){ $("#fill").on("click", function(){ fill = true; }); +} function dataURItoBlob(dataURI) { var binary = atob(dataURI.split(',')[1]); diff --git a/templates/post_form.html b/templates/post_form.html index 93ca821e..b2e186cc 100644 --- a/templates/post_form.html +++ b/templates/post_form.html @@ -95,20 +95,6 @@ {{ antibot.html() }} - {% if config.oekaki %} - - - {% trans %}Oekaki{% endtrans %} - - - lol what you looking at the source for nerd -


- -

- - - - {% endif %} {% if config.enable_embedding %} From e3600131fc45cb97f27e216aadcfcd69c761014c Mon Sep 17 00:00:00 2001 From: ctrlcctrlv Date: Sat, 17 Aug 2013 18:00:26 +0000 Subject: [PATCH 2/5] Configurable canvas size --- inc/config.php | 13 +++++-------- js/oekaki.js | 6 +++--- templates/main.js | 9 ++++++++- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/inc/config.php b/inc/config.php index 686894d1..7f8f4605 100644 --- a/inc/config.php +++ b/inc/config.php @@ -642,15 +642,12 @@ // Allow unfiltered HTML in board subtitle. This is useful for placing icons and links. $config['allow_subtitle_html'] = false; - /* - * Enable oekaki (お絵描き). This puts a drawing field on your board. You can either - * enable it globally or enable it on a per-board basis. Oekaki's color field - * can be greatly enhanced by installing jscolor from http://jscolor.com/ and installing it in js/ - * If you enable oekaki, please remember to also enable its script with: - * $config['additional_javascript'][] = 'js/oekaki.js'; - */ + // Oekaki - To enable oekaki, just enable its script with: + // $config['additional_javascript'][] = 'js/oekaki.js'; + // $config['oekaki'] holds Oekaki options, which are currently just default canvas size. - $config['oekaki'] = false; + $config['oekaki']['height'] = 250; + $config['oekaki']['width'] = 500; /* * ==================== diff --git a/js/oekaki.js b/js/oekaki.js index 028b8f58..eaf98aec 100644 --- a/js/oekaki.js +++ b/js/oekaki.js @@ -6,7 +6,7 @@ var oekaki_form = '\ Oekaki\ \ \ - lol what you looking at the source for nerd\ + lol what you looking at the source for nerd\


\ \

\ @@ -18,7 +18,7 @@ function enable_oekaki() { // Add oekaki after the file input $('input[type="file"]').parent().parent().after(oekaki_form); // Init oekaki vars - canvas = $("#cvs"); + canvas = $("#oekaki_canvas"); context = canvas[0].getContext("2d"); is_drawing = false; text = ""; @@ -98,7 +98,7 @@ function flood_fill(x, y, target){ 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] < 500 && n[1] < 250 && n[0] > -1 && n[1] > -1){ + 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]); diff --git a/templates/main.js b/templates/main.js index 78054a3b..a9343e4a 100644 --- a/templates/main.js +++ b/templates/main.js @@ -265,7 +265,14 @@ function ready() { onready(init); -{% endraw %}{% if config.google_analytics %}{% raw %} +{% endraw %} + +var oekaki_options = { + width: {{config.oekaki.width}}, + height: {{config.oekaki.height}}, +}; + +{% if config.google_analytics %}{% raw %} var _gaq = _gaq || [];_gaq.push(['_setAccount', '{% endraw %}{{ config.google_analytics }}{% raw %}']);{% endraw %}{% if config.google_analytics_domain %}{% raw %}_gaq.push(['_setDomainName', '{% endraw %}{{ config.google_analytics_domain }}{% raw %}']){% endraw %}{% endif %}{% if not config.google_analytics_domain %}{% raw %}_gaq.push(['_setDomainName', 'none']){% endraw %}{% endif %}{% raw %};_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();{% endraw %}{% endif %} From 6cb863005dff0075b67d3f00fe950640fc153b78 Mon Sep 17 00:00:00 2001 From: ctrlcctrlv Date: Sat, 17 Aug 2013 18:56:16 +0000 Subject: [PATCH 3/5] Edit images in thread/board using Oekaki --- js/oekaki.js | 21 ++++++++++++++++++--- templates/main.js | 1 + 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/js/oekaki.js b/js/oekaki.js index eaf98aec..c610dd6b 100644 --- a/js/oekaki.js +++ b/js/oekaki.js @@ -17,6 +17,8 @@ var oekaki_form = '\ function enable_oekaki() { // Add oekaki after the file input $('input[type="file"]').parent().parent().after(oekaki_form); + // Add "edit in oekaki" links + $(".fileinfo").append(' '+_('Edit in oekaki')+''); // Init oekaki vars canvas = $("#oekaki_canvas"); context = canvas[0].getContext("2d"); @@ -30,7 +32,8 @@ function enable_oekaki() { } function disable_oekaki(){ - $("#oekaki").detach() + $("#oekaki").detach(); + $(".edit_in_oekaki").detach(); localStorage['oekaki'] = false; } @@ -176,6 +179,7 @@ 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); @@ -213,6 +217,16 @@ $("#getcolor").on("click", function(){ $("#fill").on("click", function(){ fill = true; }); + +$(".edit_in_oekaki").on("click", function(){ + var img_link = $(this).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"); +}); } function dataURItoBlob(dataURI) { @@ -235,12 +249,13 @@ $("form[name='post']").on("submit", function(e){ fd.append("post", $("input[name='post']").val()); $.ajax({ type: "POST", - url: "/post.php", + url: oekaki_options.root+"post.php", data: fd, processData: false, contentType: false, success: function(data) { - location.reload(); + //location.reload(); + console.log(data); }, error: function(data) {alert("Something went wrong!"); console.log(data)} }); diff --git a/templates/main.js b/templates/main.js index a9343e4a..05a8fd5f 100644 --- a/templates/main.js +++ b/templates/main.js @@ -270,6 +270,7 @@ onready(init); var oekaki_options = { width: {{config.oekaki.width}}, height: {{config.oekaki.height}}, + root: '{{config.root}}' }; {% if config.google_analytics %}{% raw %} From 979e5754a5ca7601f573957a69971b4e37bf869a Mon Sep 17 00:00:00 2001 From: ctrlcctrlv Date: Sat, 17 Aug 2013 19:08:54 +0000 Subject: [PATCH 4/5] Better error handling --- inc/display.php | 3 +++ js/oekaki.js | 5 ++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/inc/display.php b/inc/display.php index 0f1bc195..9009be9a 100644 --- a/inc/display.php +++ b/inc/display.php @@ -74,6 +74,9 @@ function error($message, $priority = true, $debug_stuff = false) { if ($config['debug'] && isset($db_error)) { $debug_stuff = array_combine(array('SQLSTATE', 'Error code', 'Error message'), $db_error); } + + // Return the bad request header, necessary for AJAX posts + http_response_code(400); die(Element('page.html', array( 'config' => $config, diff --git a/js/oekaki.js b/js/oekaki.js index c610dd6b..2ff17fc7 100644 --- a/js/oekaki.js +++ b/js/oekaki.js @@ -254,10 +254,9 @@ $("form[name='post']").on("submit", function(e){ processData: false, contentType: false, success: function(data) { - //location.reload(); - console.log(data); + location.reload(); }, - error: function(data) {alert("Something went wrong!"); console.log(data)} + error: function(jq, data) {alert($('h2',jq.responseText).text());} }); } From 5c2ec21e139ab6be4dcf5d5a5d548f402594f39d Mon Sep 17 00:00:00 2001 From: ctrlcctrlv Date: Sat, 17 Aug 2013 19:42:00 +0000 Subject: [PATCH 5/5] Bundle jscolor --- inc/config.php | 2 + js/jscolor/arrow.gif | Bin 0 -> 66 bytes js/jscolor/cross.gif | Bin 0 -> 83 bytes js/jscolor/hs.png | Bin 0 -> 2684 bytes js/jscolor/hv.png | Bin 0 -> 2865 bytes js/jscolor/jscolor.js | 995 ++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 997 insertions(+) create mode 100644 js/jscolor/arrow.gif create mode 100644 js/jscolor/cross.gif create mode 100644 js/jscolor/hs.png create mode 100644 js/jscolor/hv.png create mode 100644 js/jscolor/jscolor.js diff --git a/inc/config.php b/inc/config.php index 7f8f4605..e9e52aaf 100644 --- a/inc/config.php +++ b/inc/config.php @@ -644,6 +644,8 @@ // Oekaki - To enable oekaki, just enable its script with: // $config['additional_javascript'][] = 'js/oekaki.js'; + // Color selection in oekaki can be greatly improved by including the bundled jscolor script. + // $config['additional_javascript'][] = 'js/jscolor/jscolor.js'; // $config['oekaki'] holds Oekaki options, which are currently just default canvas size. $config['oekaki']['height'] = 250; diff --git a/js/jscolor/arrow.gif b/js/jscolor/arrow.gif new file mode 100644 index 0000000000000000000000000000000000000000..246478a864f812d93d4cd0e0d0ad1c8e2d09c825 GIT binary patch literal 66 zcmZ?wbhEHbWM|-JSjfb{z`*eT|Nj*>6)S8i6o0ZXaxpM5=zv5)@(fJEJ}nXjJKr?q SYyUH_EM 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 Xaop<7PcCl;1_lOCS3j3^P6-2 literal 0 HcmV?d00001 diff --git a/js/jscolor/hv.png b/js/jscolor/hv.png new file mode 100644 index 0000000000000000000000000000000000000000..1c5e01f8bcecc4cf835e8eeeaa43ef2c06789022 GIT binary patch literal 2865 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 literal 0 HcmV?d00001 diff --git a/js/jscolor/jscolor.js b/js/jscolor/jscolor.js new file mode 100644 index 00000000..712ab9a3 --- /dev/null +++ b/js/jscolor/jscolor.js @@ -0,0 +1,995 @@ +/** + * jscolor, JavaScript Color Picker + * + * @version 1.4.1 + * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html + * @author Jan Odvarko, http://odvarko.cz + * @created 2008-06-15 + * @updated 2013-04-08 + * @link http://jscolor.com + */ + + +var jscolor = { + + + dir : '', // location of jscolor directory (leave empty to autodetect) + bindClass : 'color', // class name + binding : true, // automatic binding via + preloading : true, // use image preloading? + + + install : function() { + jscolor.addEvent(window, 'load', jscolor.init); + }, + + + init : function() { + if(jscolor.binding) { + jscolor.bind(); + } + if(jscolor.preloading) { + jscolor.preload(); + } + }, + + + getDir : function() { + if(!jscolor.dir) { + var detected = jscolor.detectDir(); + jscolor.dir = detected!==false ? detected : 'jscolor/'; + } + return jscolor.dir; + }, + + + detectDir : function() { + var base = location.href; + + var e = document.getElementsByTagName('base'); + for(var i=0; i vs[a] ? + (-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) : + tp[a], + -vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ? + (-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) : + (tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c) + ]; + } + drawPicker(pp[a], pp[b]); + } + }; + + + this.importColor = function() { + if(!valueElement) { + this.exportColor(); + } else { + if(!this.adjust) { + if(!this.fromString(valueElement.value, leaveValue)) { + styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage; + styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor; + styleElement.style.color = styleElement.jscStyle.color; + this.exportColor(leaveValue | leaveStyle); + } + } else if(!this.required && /^\s*$/.test(valueElement.value)) { + valueElement.value = ''; + styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage; + styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor; + styleElement.style.color = styleElement.jscStyle.color; + this.exportColor(leaveValue | leaveStyle); + + } else if(this.fromString(valueElement.value)) { + // OK + } else { + this.exportColor(); + } + } + }; + + + this.exportColor = function(flags) { + if(!(flags & leaveValue) && valueElement) { + var value = this.toString(); + if(this.caps) { value = value.toUpperCase(); } + if(this.hash) { value = '#'+value; } + valueElement.value = value; + } + if(!(flags & leaveStyle) && styleElement) { + styleElement.style.backgroundImage = "none"; + styleElement.style.backgroundColor = + '#'+this.toString(); + styleElement.style.color = + 0.213 * this.rgb[0] + + 0.715 * this.rgb[1] + + 0.072 * this.rgb[2] + < 0.5 ? '#FFF' : '#000'; + } + if(!(flags & leavePad) && isPickerOwner()) { + redrawPad(); + } + if(!(flags & leaveSld) && isPickerOwner()) { + redrawSld(); + } + }; + + + this.fromHSV = function(h, s, v, flags) { // null = don't change + if(h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); } + if(s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); } + if(v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); } + + this.rgb = HSV_RGB( + h===null ? this.hsv[0] : (this.hsv[0]=h), + s===null ? this.hsv[1] : (this.hsv[1]=s), + v===null ? this.hsv[2] : (this.hsv[2]=v) + ); + + this.exportColor(flags); + }; + + + this.fromRGB = function(r, g, b, flags) { // null = don't change + if(r !== null) { r = Math.max(0.0, Math.min(1.0, r)); } + if(g !== null) { g = Math.max(0.0, Math.min(1.0, g)); } + if(b !== null) { b = Math.max(0.0, Math.min(1.0, b)); } + + var hsv = RGB_HSV( + r===null ? this.rgb[0] : r, + g===null ? this.rgb[1] : g, + b===null ? this.rgb[2] : b + ); + if(hsv[0] !== null) { + this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0])); + } + if(hsv[2] !== 0) { + this.hsv[1] = hsv[1]===null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1])); + } + this.hsv[2] = hsv[2]===null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2])); + + // update RGB according to final HSV, as some values might be trimmed + var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]); + this.rgb[0] = rgb[0]; + this.rgb[1] = rgb[1]; + this.rgb[2] = rgb[2]; + + this.exportColor(flags); + }; + + + this.fromString = function(hex, flags) { + var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i); + if(!m) { + return false; + } else { + if(m[1].length === 6) { // 6-char notation + this.fromRGB( + parseInt(m[1].substr(0,2),16) / 255, + parseInt(m[1].substr(2,2),16) / 255, + parseInt(m[1].substr(4,2),16) / 255, + flags + ); + } else { // 3-char notation + this.fromRGB( + parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255, + parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255, + parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255, + flags + ); + } + return true; + } + }; + + + this.toString = function() { + return ( + (0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) + + (0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) + + (0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1) + ); + }; + + + function RGB_HSV(r, g, b) { + var n = Math.min(Math.min(r,g),b); + var v = Math.max(Math.max(r,g),b); + var m = v - n; + if(m === 0) { return [ null, 0, v ]; } + var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m); + return [ h===6?0:h, m/v, v ]; + } + + + function HSV_RGB(h, s, v) { + if(h === null) { return [ v, v, v ]; } + var i = Math.floor(h); + var f = i%2 ? h-i : 1-(h-i); + var m = v * (1 - s); + var n = v * (1 - s*f); + switch(i) { + case 6: + case 0: return [v,n,m]; + case 1: return [n,v,m]; + case 2: return [m,v,n]; + case 3: return [m,n,v]; + case 4: return [n,m,v]; + case 5: return [v,m,n]; + } + } + + + function removePicker() { + delete jscolor.picker.owner; + document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB); + } + + + function drawPicker(x, y) { + if(!jscolor.picker) { + jscolor.picker = { + box : document.createElement('div'), + boxB : document.createElement('div'), + pad : document.createElement('div'), + padB : document.createElement('div'), + padM : document.createElement('div'), + sld : document.createElement('div'), + sldB : document.createElement('div'), + sldM : document.createElement('div'), + btn : document.createElement('div'), + btnS : document.createElement('span'), + btnT : document.createTextNode(THIS.pickerCloseText) + }; + for(var i=0,segSize=4; i