diff options
| -rw-r--r-- | index.html | 11 | ||||
| -rw-r--r-- | js/app.js | 2 | ||||
| -rw-r--r-- | js/clipboard.js | 28 | ||||
| -rw-r--r-- | js/upload.js | 92 | ||||
| -rw-r--r-- | js/user.js | 7 |
5 files changed, 102 insertions, 38 deletions
@@ -60,7 +60,10 @@ <button id="import_button">import colorcode</button> <button id="import_html">import sally</button> </span> - <button id="export_button">export</button><br> + <input type="text" id="username"> + <button id="export_button">export</button> + <button id="save_button">save</button> + <button id="upload_button">upload</button><br> <textarea id="import_textarea"></textarea> </div> @@ -85,11 +88,17 @@ lex.char = " " lex.opacity = 1 </script> +<script src="js/vendor/colorcode.js"></script> +<script src="js/vendor/dataUriToBlob.js"></script> +<script src="js/vendor/FileSaver.js"></script> + <script src="js/util.js"></script> <script src="js/unicode.js"></script> <script src="js/color.js"></script> <script src="js/parse.js"></script> <script src="js/clipboard.js"></script> +<script src="js/upload.js"></script> +<script src="js/user.js"></script> <script src="js/lex.js"></script> <script src="js/matrix.js"></script> @@ -51,7 +51,7 @@ function bind () { var ae = document.activeElement - if (ae !== shader_textarea && ae !== import_textarea) { + if (ae !== shader_textarea && ae !== import_textarea && ae !== username_input) { cursor_input.focus() } diff --git a/js/clipboard.js b/js/clipboard.js index b8b583e..131f40b 100644 --- a/js/clipboard.js +++ b/js/clipboard.js @@ -4,7 +4,8 @@ var clipboard = (function () { format: "irssi", importing: false, visible: false, - + canvas: document.createElement("canvas"), + bind: function () { import_ascii.addEventListener("change", exports.setFormat("ascii")) import_irssi.addEventListener("change", exports.setFormat("irssi")) @@ -12,6 +13,8 @@ var clipboard = (function () { import_button.addEventListener("click", exports.import_colorcode) import_html.addEventListener("click", exports.import_html) export_button.addEventListener("click", exports.export_data) + save_button.addEventListener("click", exports.save_png) + upload_button.addEventListener("click", exports.upload_png) import_textarea.addEventListener("focus", exports.focus) import_textarea.addEventListener("blur", exports.blur) import_textarea.addEventListener('paste', exports.paste) @@ -211,10 +214,29 @@ var clipboard = (function () { var font = 'fixedsys' var start = Date.now(); - colorcode.to_canvas(in_text.value, {canvas:canvas, palette:palette, font:font}) + colorcode.to_canvas(canvas.mirc(), {canvas:clipboard.canvas, palette:palette, font:font}) var total = Date.now() - start; console.log("took " + total) - } + }, + + filename: function () { + return [ +new Date, "ascii", user.username ].join("-") + ".png" + }, + + save_png: function () { + clipboard.export_png() + var filename = clipboard.filename() + var blob = dataUriToBlob(clipboard.canvas.toDataURL()) + saveAs(blob, filename); + }, + + upload_png: function () { + clipboard.export_png() + var uri = clipboard.canvas.toDataURL() + var filename = clipboard.filename() + var tag = 'ascii' + upload(uri, filename, tag) + }, } diff --git a/js/upload.js b/js/upload.js index 917d1b8..ec786d5 100644 --- a/js/upload.js +++ b/js/upload.js @@ -1,34 +1,66 @@ -function upload(uri, filename, tag){ - filename = filename || get_filename() - uri = (uri && ! uri.target) ? uri : lastGif - tag = tag || "shader" +var upload = (function(){ + var el = document.getElementById("upload_value") + + function upload(uri, filename, tag){ + filename = filename || get_filename() + uri = (uri && ! uri.target) ? uri : lastGif + tag = tag || "shader" - var blob = dataUriToBlob(uri) - uploadImage({ - blob: blob, - filename: filename, - username: user.username, - tag: tag, - success: function(data){ + var blob = dataUriToBlob(uri) + uploadImage({ + blob: blob, + filename: filename, + username: user.username, + tag: tag, + success: function(data){ - // data.url - // data.filesize - // data.success + // data.url + // data.filesize + // data.success - console.log(data); - $("#uploaded-url").show().focus().val(data.url) - $("#uploaded-url + br").show() - status && status("uploaded"); - }, - error: function(data){ - console.log(data) - status("error uploading: " + data.error) - } - }); -} + console.log(data); + el.style.display = "block" + el.value = data.url + el.focus() + }, + error: function(data){ + console.log(data) + console.log("error uploading: " + data.error) + } + }); + } -function save (){ - var filename = get_filename() - var blob = dataUriToBlob(lastGif) - saveAs(blob, filename); -} + function uploadImage(opt){ + if (! opt.blob || ! opt.filename) return; + + opt.username = opt.username || ""; + opt.success = opt.success || noop; + opt.error = opt.error || noop; + + var form = new FormData(); + + form.append("username", opt.username); + form.append("filename", opt.filename); + form.append("qqfile", opt.blob); + form.append("tag", opt.tag); + + var req = new XMLHttpRequest(); + req.open("POST", "/cgi-bin/im/shader/upload"); + req.onload = function(event) { + if (req.status == 200) { + var res = JSON.parse(req.responseText); + if (res.success) { + opt.success(res); + } + else { + opt.error(res); + } + } else { + opt.error({ success: false, error: req.status }); + } + }; + req.send(form); + } + + return upload +})() @@ -1,17 +1,18 @@ var user = (function(){ var user = {} + var el = document.getElementById("username") user.init = function(){ user.load() user.bind() } user.bind = function(){ - $("#username").on("input", user.save) + el.addEventListener("input", user.save) } user.load = function(){ user.username = user.getCookie() - $("#username").val(user.username) + el.value = user.username } user.prefs = new function(){} user.prefs.get = function (key){ @@ -21,7 +22,7 @@ var user = (function(){ return localStorage.setItem("im.prefs." + key, value) } user.sanitize = function(){ - return $("#username").val().replace(/[^-_ a-zA-Z0-9]/g,"") + return el.value.replace(/[^-_ a-zA-Z0-9]/g,"") } user.getCookie = function () { var username = localStorage.getItem("im.name") || ""; |