upload style

4 files changed, 35 insertions, 4 deletions

diff --git a/css/sally.css b/css/sally.css
index b1c1098..093971d 100644
--- a/css/sally.css
+++ b/css/sally.css
@@ -178,6 +178,22 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color:
   outline: 0;
   border: 1px solid #0f0;
   color: #0f0;
-  width: 152px;
+  width: 100%;
   display: none;
 }
+#upload_button.uploading {
+  background: transparent;
+  border: 0;
+  font-size: 16px;
+  font-family: 'FixedsysExcelsior301Regular';
+  -webkit-animation: rainbow 1.0s infinite;
+  animation: rainbow 2.0s infinite;
+  padding: 0; margin: 0;
+}
+@keyframes rainbow {
+  0% { color: hsl(0,100%,50%) }
+  33% { color: hsl(90,100%,50%) }
+  50% { color: #fff }
+  66% { color: hsl(320,100%,50%) }
+  100% { color: hsl(360,100%,50%) }
+}
diff --git a/js/app.js b/js/app.js
index a802869..9dd94ee 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 && ae !== username_input) {
+    if (ae !== shader_textarea && ae !== import_textarea && ae !== username_input && ae !== upload_input) {
       cursor_input.focus()
     }
 
diff --git a/js/clipboard.js b/js/clipboard.js
index 131f40b..b440ec9 100644
--- a/js/clipboard.js
+++ b/js/clipboard.js
@@ -220,12 +220,12 @@ var clipboard = (function () {
     },
     
     filename: function () {
-      return [ +new Date, "ascii", user.username ].join("-") + ".png"
+      return [ +new Date, "ascii", user.username ].join("-")
     },
     
     save_png: function () {
       clipboard.export_png()
-      var filename = clipboard.filename()
+      var filename = clipboard.filename() + ".png"
       var blob = dataUriToBlob(clipboard.canvas.toDataURL())
       saveAs(blob, filename);
     },
diff --git a/js/upload.js b/js/upload.js
index 354cee2..b1d2e2e 100644
--- a/js/upload.js
+++ b/js/upload.js
@@ -1,12 +1,21 @@
 var upload = (function(){
   var el = document.getElementById("upload_input")
+  var button = document.getElementById("upload_button")
+  var uploading = false
   
   function upload(uri, filename, tag){
+    if (uploading) return
     filename = filename || get_filename()
     uri = (uri && ! uri.target) ? uri : lastGif
     tag = tag || "shader"
 
     var blob = dataUriToBlob(uri)
+    
+    button.value = "uploading..."
+    button.className = "uploading"
+    
+    uploading = true
+    
     uploadImage({
       blob: blob,
       filename: filename,
@@ -22,10 +31,16 @@ var upload = (function(){
         el.style.display = "block"
         el.value = data.url
         el.focus()
+        button.value = "upload"
+        button.className = ""
+        uploading = false
       },
       error: function(data){
         console.log(data)
         console.log("error uploading: " + data.error)
+        button.value = "upload"
+        button.className = ""
+        uploading = false
       }
     });
   }