do some more HTML and JS cleanup

static/js/bin.js

@@ -7,7 +7,10 @@ function init() {
     var editA = document.createElement('a');
 
     editA.setAttribute("href", "#");
-    editA.setAttribute("onclick", "edit();return false;");
+    editA.addEventListener('click', function(ev) {
+        edit();
+        return false;
+    });
     editA.innerHTML = "edit";
 
     var separator = document.createTextNode(" | ");

static/js/upload.js

@@ -5,33 +5,36 @@ Dropzone.options.dropzone = {
 		var upload = document.createElement("div");
 		upload.className = "upload";
 
-		var left = document.createElement("span");
+		var fileLabel = document.createElement("span");
-		left.innerHTML = file.name;
+		fileLabel.innerHTML = file.name;
-		file.leftElement = left;
+		file.fileLabel = fileLabel;
-		upload.appendChild(left);
+		upload.appendChild(fileLabel);
 
-		var right = document.createElement("div");
+		var fileActions = document.createElement("div");
-		right.className = "right";
+		fileActions.className = "right";
-		var rightleft = document.createElement("span");
+		file.fileActions = fileActions;
-		rightleft.className = "cancel";
+		upload.appendChild(fileActions);
-		rightleft.innerHTML = "Cancel";
+
-		rightleft.onclick = function(ev) {
+		var cancelAction = document.createElement("span");
-			this.removeFile(file);
+		cancelAction.className = "cancel";
-		}.bind(this);
+		cancelAction.innerHTML = "Cancel";
+		cancelAction.addEventListener('click', function(ev) {
+		    this.removeFile(file);
+		}.bind(this));
+		file.cancelActionElement = cancelAction;
+		fileActions.appendChild(cancelAction);
+
+		var progress = document.createElement("span");
+		file.progressElement = progress;
+		fileActions.appendChild(progress);
 
-		var rightright = document.createElement("span");
-		right.appendChild(rightleft);
-		file.rightLeftElement = rightleft;
-		right.appendChild(rightright);
-		file.rightRightElement = rightright;
-		file.rightElement = right;
-		upload.appendChild(right);
 		file.uploadElement = upload;
+
 		document.getElementById("uploads").appendChild(upload);
 	},
 	uploadprogress: function(file, p, bytesSent) {
 		p = parseInt(p);
-		file.rightRightElement.innerHTML = p + "%";
+		file.progressElement.innerHTML = p + "%";
 		file.uploadElement.setAttribute("style", 'background-image: -webkit-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -moz-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -ms-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: -o-linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%); background-image: linear-gradient(left, #F2F4F7 ' + p + '%, #E2E2E2 ' + p + '%)');
 	},
 	sending: function(file, xhr, formData) {
@@ -39,36 +42,48 @@ Dropzone.options.dropzone = {
 		formData.append("expires", document.getElementById("expires").selectedOptions[0].value);
 	},
 	success: function(file, resp) {
-		file.rightLeftElement.innerHTML = "";
+        file.fileActions.removeChild(file.progressElement);
-		file.leftElement.innerHTML = '<a target="_blank" href="' + resp.url + '">' + resp.url + '</a>';
+
-		file.rightRightElement.innerHTML = "Delete";
+        var fileLabelLink = document.createElement("a");
-		file.rightRightElement.className = "cancel";
+        fileLabelLink.href = resp.url;
-		file.rightRightElement.onclick = function(ev) {
+        fileLabelLink.target = "_blank";
+        fileLabelLink.innerHTML = resp.url;
+        file.fileLabel.innerHTML = "";
+        file.fileLabelLink = fileLabelLink;
+        file.fileLabel.appendChild(fileLabelLink);
+
+        var deleteAction = document.createElement("span");
+        deleteAction.innerHTML = "Delete";
+        deleteAction.className = "cancel";
+		deleteAction.addEventListener('click', function(ev) {
 		    xhr = new XMLHttpRequest();
 			xhr.open("DELETE", resp.url, true);
 			xhr.setRequestHeader("X-Delete-Key", resp.delete_key);
 			xhr.onreadystatechange = function(file) {
-				if (xhr.status === 200) {
+				if (xhr.readyState == 4 && xhr.status === 200) {
-					file.leftElement.innerHTML = 'Deleted <a target="_blank" href="' + resp.url + '">' + resp.url + '</a>';
+				    var text = document.createTextNode("Deleted ");
-					file.leftElement.className = "deleted";
+				    file.fileLabel.insertBefore(text, file.fileLabelLink);
-					file.rightRightElement.onclick = null;
+					file.fileLabel.className = "deleted";
-					file.rightRightElement.innerHTML = "";					
+					file.fileActions.removeChild(file.cancelActionElement);
 				}
 			}.bind(this, file);
 			xhr.send();
-		}.bind(this);
+		});
+		file.fileActions.removeChild(file.cancelActionElement);
+		file.cancelActionElement = deleteAction;
+		file.fileActions.appendChild(deleteAction);
 	},
 	error: function(file, errMsg, xhrO) {
-		file.rightLeftElement.onclick = null;
+        file.fileActions.removeChild(file.cancelActionElement);
-		file.rightLeftElement.innerHTML = "";
+        file.fileActions.removeChild(file.progressElement);
-		file.rightRightElement.innerHTML = "";
+
 		if (file.status === "canceled") {
-			file.leftElement.innerHTML = "Canceled " + file.name;			
+			file.fileLabel.innerHTML = "Canceled " + file.name;			
 		}
 		else {
-			file.leftElement.innerHTML = "Could not upload " + file.name;
+			file.fileLabel.innerHTML = "Could not upload " + file.name;
 		}
-		file.leftElement.className = "error";
+		file.fileLabel.className = "error";
 	},
 
     maxFilesize: 4096,

templates/index.html

@@ -20,7 +20,6 @@
             <div id="expiry">
                 <label>File expiry: 
                 <select name="expires" id="expires">
-                </label>
                     <option value="0">never</option>
                     <option value="60">a minute</option>
                     <option value="300">5 minutes</option>
@@ -30,6 +29,7 @@
                     <option value="2419200">a month</option>
                     <option value="29030400">a year</option>
                 </select>
+                </label>
             </div>
             <label><input name="randomize" id="randomize" type="checkbox" checked /> Randomize filename</label>
         </div>
@@ -41,4 +41,4 @@
 
 <script src="/static/js/dropzone.js"></script>
 <script src="/static/js/upload.js"></script>
-{% endblock %}
+{% endblock %}