pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lots and lots of transitions

Browse Source
This commit is contained in:
Wim Brand
2019-02-20 22:46:35 +01:00
parent d27e48fefc
commit 19067a5616
11 changed files with 344 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
res/static/script/compiled/home.js
View File

@@ -6,50 +6,66 @@ var FinishedUpload = /** @class */ (function () {
var uploader = null;
var finishedUploads = new Array();
var totalUploads = 0;
var queueDiv = document.getElementById("uploads_queue");
var UploadProgressBar = /** @class */ (function () {
function UploadProgressBar(file) {
this.file = file;
this.name = file.name;
this.queueNum = totalUploads;
totalUploads++;
this.uploadDiv = document.createElement("a");
this.uploadDiv.setAttribute("class", "file_button");
totalUploads++;
this.uploadDiv.classList.add("file_button");
this.uploadDiv.style.opacity = "0";
this.uploadDiv.innerText = "Queued\n" + this.file.name;
this.uploadDivJQ = $(this.uploadDiv);
$("#uploads_queue").append(this.uploadDivJQ.hide().fadeIn('slow').css("display", ""));
queueDiv.appendChild(this.uploadDiv);
// Browsers don't render the transition if the opacity is set and
// updated in the same frame. So we have to wait a frame (or more)
// before changing the opacity to make sure the transition triggers
var d = this.uploadDiv; // `this` stops working after constructor ends
window.setTimeout(function () { d.style.opacity = "1"; }, 100);
}
UploadProgressBar.prototype.onProgress = function (progress) {
this.uploadDiv.innerText = "Uploading... " + Math.round(progress * 1000) / 10 + "%\n" + this.file.name;
this.uploadDiv.setAttribute('style', 'background: linear-gradient('
this.uploadDiv.style.background = 'linear-gradient('
+ 'to right, '
+ 'var(--file_background_color) 0%, '
+ 'var(--highlight_color) ' + ((progress * 100)) + '%, '
+ 'var(--file_background_color) ' + ((progress * 100) + 1) + '%)');
+ 'var(--file_background_color) ' + ((progress * 100) + 1) + '%)';
};
UploadProgressBar.prototype.onFinished = function (id) {
finishedUploads[this.queueNum] = {
id: id,
name: this.file.name
};
this.uploadDiv.setAttribute('style', 'background: var(--file_background_color)');
this.uploadDiv.setAttribute('href', '/u/' + id);
this.uploadDiv.setAttribute("target", "_blank");
this.uploadDivJQ.html('<img src="' + apiEndpoint + '/file/' + id + '/thumbnail" alt="' + this.file.name + '"/>'
+ this.file.name + '<br/>'
+ '<span style="color: var(--highlight_color);">' + window.location.hostname + '/u/' + id + '</span>');
this.uploadDiv.style.background = 'var(--file_background_color)';
this.uploadDiv.href = '/u/' + id;
this.uploadDiv.target = "_blank";
var fileImg = document.createElement("img");
fileImg.src = apiEndpoint + '/file/' + id + '/thumbnail';
fileImg.alt = this.file.name;
var linkSpan = document.createElement("span");
linkSpan.style.color = "var(--highlight_color)";
linkSpan.innerText = window.location.hostname + "/u/" + id;
this.uploadDiv.innerHTML = ""; // Remove uploading progress
this.uploadDiv.appendChild(fileImg);
this.uploadDiv.appendChild(document.createTextNode(this.file.name));
this.uploadDiv.appendChild(document.createElement("br"));
this.uploadDiv.appendChild(linkSpan);
};
UploadProgressBar.prototype.onFailure = function (response, error) {
this.uploadDiv.setAttribute('style', 'background: var(--danger_color)');
this.uploadDivJQ.html(this.file.name + '<br/>'
+ 'Upload failed after three tries!<br/>'
+ "Message: " + error);
this.uploadDiv.style.background = 'var(--danger_color)';
this.uploadDiv.appendChild(document.createTextNode(this.file.name));
this.uploadDiv.appendChild(document.createElement("br"));
this.uploadDiv.appendChild(document.createTextNode("Upload failed after three tries:"));
this.uploadDiv.appendChild(document.createElement("br"));
this.uploadDiv.appendChild(document.createTextNode(error));
};
return UploadProgressBar;
}());
function handleUploads(files) {
if (uploader === null) {
uploader = new UploadManager();
$("#uploads_queue").animate({ "height": "340px" }, { "duration": 2000, queue: false });
queueDiv.style.height = "340px";
}
for (var i = 0; i < files.length; i++) {
uploader.uploadFile(new UploadProgressBar(files.item(i)));
@@ -110,27 +126,25 @@ function createList(title, anonymous) {
}
// Form upload handlers
// Relay click event to hidden file field
$("#select_file_button").click(function () { $("#file_input_field").click(); });
$("#file_input_field").change(function (evt) {
document.getElementById("select_file_button").onclick = function () {
document.getElementById("file_input_field").click();
};
document.getElementById("file_input_field").onchange = function (evt) {
handleUploads(evt.target.files);
// This resets the file input field
// http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery
$('#file_name').html("");
$("#file_upload_button").css("visibility", "hidden");
$("#file_input_field").wrap("<form>").closest("form").get(0).reset();
$("#file_input_field").unwrap();
});
document.getElementById("file_input_field").nodeValue = "";
};
/*
* Drag 'n Drop upload handlers
*/
$(document).on('dragover', function (e) {
document.ondragover = function (e) {
e.preventDefault();
e.stopPropagation();
});
$(document).on('dragenter', function (e) {
};
document.ondragenter = function (e) {
e.preventDefault();
e.stopPropagation();
});
};
document.addEventListener('drop', function (e) {
if (e.dataTransfer && e.dataTransfer.files.length > 0) {
e.preventDefault();
@@ -300,7 +314,7 @@ var UploadWorker = /** @class */ (function () {
};
UploadWorker.prototype.newFile = function () {
var file = this.manager.grabFile();
if (file === undefined) { // No more files in the queue. We're finished
if (file === undefined) {
this.uploading = false;
console.debug("No files left in queue");
return; // Stop the thread