listmaker fixes

res/static/res/script/compiled/home.js

@@ -0,0 +1,207 @@
+var uploader = null;
+var finishedUploads = new Array();
+var totalUploads = 0;
+var UploadProgressBar = /** @class */ (function () {
+    function UploadProgressBar(file) {
+        this.file = file;
+        this.queueNum = totalUploads;
+        totalUploads++;
+        this.uploadDiv = document.createElement("a");
+        this.uploadDiv.setAttribute("class", "uploadItem");
+        this.uploadDiv.innerText = "Queued\n" + this.file.name;
+        this.uploadDivJQ = $(this.uploadDiv);
+        $("#uploads_queue").append(this.uploadDivJQ.hide().fadeIn('slow'));
+    }
+    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('
+            + 'to right, '
+            + '#111 0%, '
+            + 'var(--highlight_color) ' + ((progress * 100)) + '%, '
+            + '#111 ' + ((progress * 100) + 1) + '%)');
+    };
+    UploadProgressBar.prototype.onFinished = function (id) {
+        finishedUploads[this.queueNum] = id;
+        this.uploadDiv.setAttribute('style', 'background: #111');
+        this.uploadDiv.setAttribute('href', '/u/' + id);
+        this.uploadDiv.setAttribute("target", "_blank");
+        this.uploadDivJQ.html('<img src="/api/file/' + id + '/thumbnail" alt="' + this.file.name + '" class="uploadItemImage"/>'
+            + this.file.name + '<br/>'
+            + '<span style="color: var(--highlight_color);">' + window.location.hostname + '/u/' + id + '</span>');
+    };
+    return UploadProgressBar;
+}());
+function handleUploads(files) {
+    if (uploader === null) {
+        uploader = new UploadManager();
+        $("#uploads_queue").animate({ "height": "340px" }, { "duration": 2000, queue: false });
+    }
+    for (var i = 0; i < files.length; i++) {
+        uploader.uploadFile(new UploadProgressBar(files.item(i)));
+    }
+}
+/*
+ * 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) {
+    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();
+});
+/*
+ * Drag 'n Drop upload handlers
+ */
+$(document).on('dragover', function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+});
+$(document).on('dragenter', function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+});
+document.addEventListener('drop', function (e) {
+    if (e.dataTransfer && e.dataTransfer.files.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleUploads(e.dataTransfer.files);
+    }
+});
+var Cookie;
+(function (Cookie) {
+    function read(name) {
+        var result = new RegExp('(?:^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie);
+        return result ? result[1] : null;
+    }
+    Cookie.read = read;
+    function write(name, value, days) {
+        if (!days) {
+            days = 365 * 20;
+        }
+        var date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        var expires = "; expires=" + date.toUTCString();
+        document.cookie = name + "=" + value + expires + "; path=/";
+    }
+    Cookie.write = write;
+    function remove(name) {
+        write(name, "", -1);
+    }
+    Cookie.remove = remove;
+})(Cookie || (Cookie = {}));
+var UploadManager = /** @class */ (function () {
+    function UploadManager() {
+        this.uploadQueue = new Array();
+        this.uploadThreads = new Array();
+        this.maxThreads = 2;
+    }
+    UploadManager.prototype.uploadFile = function (file) {
+        console.debug("Adding upload to queue");
+        this.uploadQueue.push(file);
+        if (this.uploadThreads.length < this.maxThreads) {
+            console.debug("Starting upload thread");
+            var thread = new UploadWorker(this);
+            this.uploadThreads.push(thread);
+            setTimeout(thread.start(), 0); // Start a new upload thread
+        }
+        else {
+            for (var i = 0; i < this.uploadThreads.length; i++) {
+                this.uploadThreads[i].startIfInactive();
+            }
+        }
+    };
+    UploadManager.prototype.grabFile = function () {
+        if (this.uploadQueue.length > 0) {
+            return this.uploadQueue.shift();
+        }
+        else {
+            return undefined;
+        }
+    };
+    return UploadManager;
+}());
+var UploadWorker = /** @class */ (function () {
+    function UploadWorker(manager) {
+        this.tries = 0;
+        this.uploading = false;
+        this.manager = manager;
+    }
+    UploadWorker.prototype.start = function () {
+        var file = this.manager.grabFile();
+        if (file === undefined) {
+            this.uploading = false;
+            console.debug("No files left in queue");
+            return; // Stop the thread
+        }
+        this.uploading = true;
+        this.tries = 0;
+        this.upload(file);
+    };
+    UploadWorker.prototype.startIfInactive = function () {
+        if (!this.uploading) {
+            this.start();
+        }
+    };
+    UploadWorker.prototype.upload = function (file) {
+        console.debug("Starting upload of " + file.file.name);
+        var formData = new FormData();
+        formData.append('file', file.file);
+        formData.append("name", file.file.name);
+        var that = this; // jquery changes the definiton of "this"
+        $.ajax({
+            url: "/api/file",
+            data: formData,
+            cache: false,
+            crossDomain: false,
+            contentType: false,
+            processData: false,
+            type: 'POST',
+            xhr: function () {
+                var xhr = new XMLHttpRequest();
+                xhr.upload.addEventListener("progress", function (evt) {
+                    if (evt.lengthComputable) {
+                        file.onProgress(evt.loaded / evt.total);
+                    }
+                }, false);
+                return xhr;
+            },
+            success: function (data) {
+                file.onFinished(data.id);
+                console.log("Done: " + data.id);
+                that.setHistoryCookie(data.id);
+                that.start(); // Continue uploading on this thread
+            },
+            error: function (xhr, status, error) {
+                console.log(status);
+                console.log(error);
+                if (that.tries === 3) {
+                    alert("Upload failed: " + status);
+                    that.uploading = false;
+                    return; // Upload failed
+                }
+                // Try again
+                that.tries++;
+                that.upload(file);
+            }
+        });
+    };
+    UploadWorker.prototype.setHistoryCookie = function (id) {
+        var uc = Cookie.read("pduploads");
+        // First upload in this browser
+        if (uc === null) {
+            Cookie.write("pduploads", id + ".", undefined);
+            return;
+        }
+        if (uc.length > 2000) {
+            // Cookie is becoming too long, drop the oldest two files
+            uc = uc.substring(uc.indexOf(".") + 1).substring(uc.indexOf(".") + 1);
+        }
+        Cookie.write("pduploads", uc + id + ".", undefined);
+    };
+    return UploadWorker;
+}());

res/static/res/script/listmaker.js

@@ -54,16 +54,17 @@ function listCreated(response){
 			+ "<a href=\"/l/" + response.id + "\" target=\"_blank\" style=\"font-weight: bold;\">"+window.location.hostname+"/l/" + response.id + "</a>"
 			+ "</div>";
 		
-		$('#uploads_completed').prepend(
+		$('#uploads_queue').prepend(
 			$(resultString).hide().fadeIn('slow')
 		);
+		window.open('/l/'+response.id, '_blank');
 	}else{
 		resultString = "<div class=\"uploadItem\">List creation failed<br/>"
 			+ "The server responded with this: <br/>"
 			+ response.type + ": " + response.value
 			+ "</div>";
 		
-		$('#uploads-completed').prepend(
+		$('#uploads_queue').prepend(
 			$(resultString).hide().fadeIn('slow')
 		);
 	}