do some more HTML and JS cleanup

This commit is contained in:
mutantmonkey 2015-10-04 00:14:21 -07:00
parent b83f11e80a
commit 84f38026eb
3 changed files with 58 additions and 40 deletions

View file

@ -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(" | ");

View file

@ -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 = '<a target="_blank" href="' + resp.url + '">' + resp.url + '</a>';
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 <a target="_blank" href="' + resp.url + '">' + resp.url + '</a>';
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,

View file

@ -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 %}