diff options
| -rw-r--r-- | js/oekaki.js | 62 | ||||
| -rw-r--r-- | 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 = '\ + <tr id="oekaki">\ + <th>\ + Oekaki\ + </th>\ + <td>\ + <canvas width="500" height="250" id="cvs" style="border:1px solid black;-webkit-user-select: none;-moz-user-select: none;">lol what you looking at the source for nerd</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><input id="confirm_oekaki" type="checkbox"/> Use oekaki instead of file?</label></p>\ + <img id="saved" style="display:none">\ + </td>\ + </tr>' + +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 id="oekaki-status" style="text-align:right"><a class="unimportant" href="javascript:void(0)">-</a></div>'); +$('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() }} </td> </tr> - {% if config.oekaki %} - <tr id="oekaki"> - <th> - {% trans %}Oekaki{% endtrans %} - </th> - <td> - <canvas width="500" height="250" id="cvs" style="border:1px solid black;-webkit-user-select: none;-moz-user-select: none;">lol what you looking at the source for nerd</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><input id="confirm_oekaki" type="checkbox"/> Use oekaki instead of file?</label></p> - <img id="saved" style="display:none"> - </td> - </tr> - {% endif %} {% if config.enable_embedding %} <tr> <th> |