From 84f38026eb8fd1cad99a76b4ee88ff149c4dc379 Mon Sep 17 00:00:00 2001 From: mutantmonkey Date: Sun, 4 Oct 2015 00:14:21 -0700 Subject: [PATCH] do some more HTML and JS cleanup --- static/js/bin.js | 5 ++- static/js/upload.js | 89 ++++++++++++++++++++++++++------------------ templates/index.html | 4 +- 3 files changed, 58 insertions(+), 40 deletions(-) diff --git a/static/js/bin.js b/static/js/bin.js index b610083..4e86edf 100644 --- a/static/js/bin.js +++ b/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(" | "); diff --git a/static/js/upload.js b/static/js/upload.js index 44afffc..cba6324 100644 --- a/static/js/upload.js +++ b/static/js/upload.js @@ -5,33 +5,36 @@ Dropzone.options.dropzone = { var upload = document.createElement("div"); upload.className = "upload"; - var left = document.createElement("span"); - left.innerHTML = file.name; - file.leftElement = left; - upload.appendChild(left); + var fileLabel = document.createElement("span"); + fileLabel.innerHTML = file.name; + file.fileLabel = fileLabel; + upload.appendChild(fileLabel); - var right = document.createElement("div"); - right.className = "right"; - var rightleft = document.createElement("span"); - rightleft.className = "cancel"; - rightleft.innerHTML = "Cancel"; - rightleft.onclick = function(ev) { - this.removeFile(file); - }.bind(this); + var fileActions = document.createElement("div"); + fileActions.className = "right"; + file.fileActions = fileActions; + upload.appendChild(fileActions); + + var cancelAction = document.createElement("span"); + cancelAction.className = "cancel"; + 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.leftElement.innerHTML = '' + resp.url + ''; - file.rightRightElement.innerHTML = "Delete"; - file.rightRightElement.className = "cancel"; - file.rightRightElement.onclick = function(ev) { + file.fileActions.removeChild(file.progressElement); + + var fileLabelLink = document.createElement("a"); + fileLabelLink.href = resp.url; + 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) { - file.leftElement.innerHTML = 'Deleted ' + resp.url + ''; - file.leftElement.className = "deleted"; - file.rightRightElement.onclick = null; - file.rightRightElement.innerHTML = ""; + if (xhr.readyState == 4 && xhr.status === 200) { + var text = document.createTextNode("Deleted "); + file.fileLabel.insertBefore(text, file.fileLabelLink); + file.fileLabel.className = "deleted"; + 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.rightLeftElement.innerHTML = ""; - file.rightRightElement.innerHTML = ""; + file.fileActions.removeChild(file.cancelActionElement); + file.fileActions.removeChild(file.progressElement); + 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, diff --git a/templates/index.html b/templates/index.html index 8195f6e..36bbc99 100644 --- a/templates/index.html +++ b/templates/index.html @@ -20,7 +20,6 @@
@@ -41,4 +41,4 @@ -{% endblock %} \ No newline at end of file +{% endblock %}