save colorcode as png

5 files changed, 102 insertions, 38 deletions

diff --git a/index.html b/index.html
index 81f2639..7f584e2 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/js/app.js b/js/app.js
index f73a447..a802869 100644
--- a/js/app.js
+++ b/js/app.js
@@ -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
+})()
diff --git a/js/user.js b/js/user.js
index 460a937..b26e591 100644
--- a/js/user.js
+++ b/js/user.js
@@ -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") || "";