revamp upload process

res/include/img/icons/close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
+</svg>

res/include/img/icons/copy.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/>
+</svg>

res/include/img/icons/email.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M22 4H2v16h20V4zm-2 4l-8 5-8-5V6l8 5 8-5v2z"/>
+</svg>

res/include/img/icons/facebook.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" />
+</svg>

res/include/img/icons/help.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
+</svg>

res/include/img/icons/open_in_new.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
+</svg>

res/include/img/icons/reddit.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z" />
+</svg>

res/include/img/icons/save.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
+</svg>

res/include/img/icons/share.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
+</svg>

res/include/img/icons/shuffle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/>
+</svg>

res/include/img/icons/tumblr.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17" />
+</svg>

res/include/img/icons/twitter.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="#{{.Style.InputTextColor.RGB}}" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
+</svg>

res/include/img/icons/upload.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path fill="#{{.Style.InputTextColor.RGB}}" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
+</svg>

res/include/script/ListNavigator.js

@@ -99,10 +99,10 @@ var ListNavigator = {
 		this.shuffle = !this.shuffle; // :P
 
 		if(this.shuffle){
-			$("#btnShuffle > span").html(" Shuffle ☑"); // Check icon
+			$("#btnShuffle > span").html("Shuffle ☑"); // Check icon
 			$("#btnShuffle").addClass("button_highlight");
 		}else{
-			$("#btnShuffle > span").html(" Shuffle ☐"); // Empty checkbox
+			$("#btnShuffle > span").html("Shuffle ☐"); // Empty checkbox
 			$("#btnShuffle").removeClass("button_highlight");
 		}
 	},
@@ -159,55 +159,8 @@ var ListNavigator = {
 		});
 		document.getElementById("list_navigator").innerHTML = listHTML;
 
-		var btnLastItem = document.createElement("button");
-		btnLastItem.innerText = "◀";
-		btnLastItem.setAttribute("id", "button_last_item");
-		btnLastItem.setAttribute("class", "button_highlight");
-		btnLastItem.setAttribute("onClick", "ListNavigator.previousItem();");
-
-		var btnNextItem = document.createElement("button");
-		btnNextItem.innerText = "▶";
-		btnNextItem.setAttribute("id", "button_next_item");
-		btnNextItem.setAttribute("class", "button_highlight");
-		btnNextItem.setAttribute("onClick", "ListNavigator.nextItem();");
-
-		var headerbar = document.getElementById("list_navigator_buttons");
-		headerbar.appendChild(btnLastItem);
-		headerbar.appendChild(btnNextItem);
-
-		// Add the list download button to the toolbar
-		var btnDownloadList = document.createElement("button");
-		btnDownloadList.setAttribute("id", "btnDownloadList");
-		btnDownloadList.setAttribute("class", "toolbar_button button_full_width");
-		btnDownloadList.setAttribute("onClick", "Toolbar.downloadList();");
-
-		var btnDownloadListImg = document.createElement("img");
-		btnDownloadListImg.setAttribute("src", "{{template `floppy_small.png`}}");
-		btnDownloadListImg.setAttribute("alt", "Download List");
-
-		var btnDownloadListText = document.createElement("span");
-		btnDownloadListText.innerHTML = " All Files";
-
-		btnDownloadList.appendChild(btnDownloadListImg);
-		btnDownloadList.appendChild(btnDownloadListText);
-		document.getElementById("btnDownload").after(btnDownloadList);
-
-		// Add the shuffle button to the toolbar
-		var btnShuffle = document.createElement("button");
-		btnShuffle.setAttribute("id", "btnShuffle");
-		btnShuffle.setAttribute("class", "toolbar_button button_full_width");
-		btnShuffle.setAttribute("onClick", "ListNavigator.toggleShuffle();");
-
-		var btnShuffleImg = document.createElement("img");
-		btnShuffleImg.setAttribute("src", "{{template `shuffle_small.png`}}");
-		btnShuffleImg.setAttribute("alt", "Shuffle playback order");
-
-		var btnShuffleText = document.createElement("span");
-		btnShuffleText.innerHTML = " Shuffle ☐";
-
-		btnShuffle.appendChild(btnShuffleImg);
-		btnShuffle.appendChild(btnShuffleText);
-		document.getElementById("btnShare").after(btnShuffle);
+		document.getElementById("btnDownloadList").style.display = "";
+		document.getElementById("btnShuffle").style.display = "";
 
 		// Make the navigator visible
 		document.getElementById("list_navigator").style.display = "inline-block";

res/include/script/compiled/home.js

@@ -37,6 +37,7 @@ var UploadProgressBar = /** @class */ (function () {
             id: id,
             name: this.file.name
         };
+        console.log("Upload finished: " + this.file.name + " " + id);
         this.uploadDiv.style.background = 'var(--file_background_color)';
         this.uploadDiv.href = '/u/' + id;
         this.uploadDiv.target = "_blank";
@@ -63,16 +64,8 @@ var UploadProgressBar = /** @class */ (function () {
     };
     return UploadProgressBar;
 }());
-function handleUploads(files) {
-    if (uploader === null) {
-        uploader = new UploadManager();
-    }
-    for (var i = 0; i < files.length; i++) {
-        uploader.uploadFile(new UploadProgressBar(files.item(i)));
-    }
-}
 // List creation
-function createList(title, anonymous) {
+function createListFull(title, anonymous) {
     if (uploader.uploading()) {
         var cont = confirm("Some files have not finished uploading yet. Creating a list now " +
             "will exclude those files.\n\nContinue?");
@@ -86,6 +79,9 @@ function createList(title, anonymous) {
         "files": new Array()
     };
     for (var i = 0; i < finishedUploads.length; i++) {
+        if (finishedUploads[i].id == "") {
+            continue;
+        }
         postData.files.push({
             "id": finishedUploads[i].id
         });
@@ -106,7 +102,7 @@ function createList(title, anonymous) {
                 + "List creation finished!<br/>"
                 + title + "<br/>"
                 + '<a href="/l/' + resp.id + '" target="_blank">' + window.location.hostname + '/l/' + resp.id + '</a>';
-            document.getElementById("uploads_queue").appendChild(div);
+            document.getElementById("created_lists").appendChild(div);
             window.open('/l/' + resp.id, '_blank');
         }
         else {
@@ -116,39 +112,11 @@ function createList(title, anonymous) {
             div.innerHTML = "List creation failed<br/>"
                 + "The server responded with:<br/>"
                 + resp.message;
-            document.getElementById("uploads_queue").append(div);
+            document.getElementById("created_lists").append(div);
         }
     };
     xhr.send(JSON.stringify(postData));
 }
-// Form upload handlers
-// Relay click event to hidden file field
-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
-    document.getElementById("file_input_field").nodeValue = "";
-};
-/*
- * Drag 'n Drop upload handlers
- */
-document.ondragover = function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-};
-document.ondragenter = 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);
-    }
-});
 function copyText(text) {
     // Create a textarea to copy the text from
     var ta = document.createElement("textarea");
@@ -170,7 +138,7 @@ document.getElementById("btn_create_list").addEventListener("click", function (e
     if (title === null) {
         return;
     }
-    createList(title, false);
+    createListFull(title, false);
 });
 var btnCopyLinks = document.getElementById("btn_copy_links");
 btnCopyLinks.addEventListener("click", function () {
@@ -258,6 +226,7 @@ var UploadManager = /** @class */ (function () {
         this.uploadQueue = new Array();
         this.uploadThreads = new Array();
         this.maxThreads = 3;
+        this.finishCallback = null;
     }
     UploadManager.prototype.uploadFile = function (file) {
         console.debug("Adding upload to queue");
@@ -287,6 +256,9 @@ var UploadManager = /** @class */ (function () {
             return this.uploadQueue.shift();
         }
         else {
+            if (!this.uploading() && this.finishCallback !== null) {
+                this.finishCallback();
+            }
             return undefined;
         }
     };
@@ -305,9 +277,9 @@ var UploadWorker = /** @class */ (function () {
         }
     };
     UploadWorker.prototype.newFile = function () {
+        this.uploading = false;
         var file = this.manager.grabFile();
         if (file === undefined) { // No more files in the queue. We're finished
-            this.uploading = false;
             console.debug("No files left in queue");
             return; // Stop the thread
         }
@@ -334,7 +306,6 @@ var UploadWorker = /** @class */ (function () {
             if (xhr.readyState !== 4) {
                 return;
             }
-            console.log("status: " + xhr.status);
             if (xhr.status >= 100 && xhr.status < 400) {
                 var resp = JSON.parse(xhr.response);
                 // Request is a success

res/include/script/home_plain.js

@@ -0,0 +1,142 @@
+// Form upload handlers
+
+// Relay click event to hidden file field
+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
+	document.getElementById("file_input_field").nodeValue = "";
+}
+
+/*
+ * Drag 'n Drop upload handlers
+ */
+document.ondragover = function (e) {
+	e.preventDefault()
+	e.stopPropagation()
+}
+document.ondragenter = 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)
+	}
+})
+
+function handleUploads(files) {
+	if (uploader === null){
+		uploader = new UploadManager();
+		uploader.finishCallback = uploadsFinished;
+	}
+
+	for (var i = 0; i < files.length; i++) {
+		uploader.uploadFile(new UploadProgressBar(files.item(i)))
+	}
+
+	document.getElementById("instruction_2").style.display = "";
+	document.getElementById("instruction_3").style.display = "none";
+	document.getElementById("instruction_3_after").style.display = "none";
+}
+
+var shareLink = "";
+var shareTitle = "";
+
+async function uploadsFinished() {
+	let url = window.location.protocol+"//"+window.location.hostname;
+	if (window.location.port != "") {
+		url = window.location.protocol+"//"+window.location.hostname+":"+window.location.port;
+	}
+
+	if (finishedUploads.length === 0) {
+		return;
+	} else if (finishedUploads.length === 1) {
+		shareLink = url+"/u/"+finishedUploads[0].id;
+		shareTitle = "Download "+finishedUploads[0].name+" here";
+	} else {
+		let id = await createList(totalUploads+" files", true);
+		console.log("Automatic list ID "+id);
+
+		if (id != "") {
+			shareLink = url+"/l/"+id;
+			shareTitle = "View "+totalUploads+" files here";
+		} else {
+			alert("Failed to group files. Please create list manually");
+		}
+	}
+
+	document.getElementById("instruction_3").style.display = "";
+	document.getElementById("instruction_3_after").style.display = "";
+
+	if (window.navigator && window.navigator.share) {
+		document.getElementById("social_buttons").style.display = "none";
+	} else {
+		document.getElementById("navigator_share_button").style.display = "none";
+	}
+}
+
+function shareButton() {
+	window.navigator.share({
+		title: "Pixeldrain",
+		text: shareTitle,
+		url: shareLink
+	});
+}
+
+function copyLink() {
+	if(copyText(shareLink)) {
+		console.log('Text copied');
+		document.querySelector("#btn_copy_link>span").textContent = "Copied!";
+		document.getElementById("btn_copy_link").classList.add("button_highlight");
+	} else {
+		console.log('Copying not supported');
+		alert("Your browser does not support copying text.");
+	}
+}
+
+function openLink() {
+	window.open(shareLink, '_blank');
+}
+
+function createList(title, anonymous) {
+	var postData = {
+		"title": title,
+		"anonymous": anonymous,
+		"files": new Array()
+	};
+	for (var i = 0; i < finishedUploads.length; i++) {
+		if (finishedUploads[i] == undefined) {
+			continue
+		}
+		postData.files.push({
+			"id": finishedUploads[i].id
+		});
+	}
+
+	return fetch(
+		apiEndpoint+"/list",
+		{
+			method: "POST",
+			headers: {"Content-Type": "application/json"},
+			body: JSON.stringify(postData)
+		}
+	).then(response => {
+		if (!response.ok) {
+			throw new Error("HTTP error "+response.status);
+		}
+		return response.json();
+	}).then(function (response) {
+		return response.id;
+	}).catch(function(error) {
+		console.log(error);
+	});
+}

res/include/style/layout.css

@@ -127,7 +127,7 @@ body{
 	box-sizing: border-box;
 	clear: both;
 }
-.page_body > .page_content > .limit_width {
+.limit_width {
 	position: relative;
 	display: inline-block;
 	max-width: 1000px;

res/include/style/viewer.css

@@ -52,9 +52,6 @@
 	.file_viewer > .file_viewer_headerbar > .button_home::after {
 		content: "pd";
 	}
-	.file_viewer > .file_viewer_headerbar > .list_navigator_buttons {
-		display: none;
-	}
 }
 .file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title > span {
 	flex-grow: 0;
@@ -146,7 +143,7 @@
 	overflow-x: hidden;
 	float: left;
 	background-color: var(--layer_1_color);
-	/* box-shadow: 2px 2px 8px var(--shadow_color); */
+	box-shadow: inset 1px 1px 6px var(--shadow_color);
 	text-align: center;
 	z-index: 48;
 	overflow: hidden;
@@ -264,6 +261,11 @@
    ========================= */
 
 .sharebar-button {text-align: center;}
+.sharebar-button > svg,
+.sharebar-button > img {
+	width: 40px;
+	height: 40px;
+}
 
 /* =====================
    || MISC COMPONENTS ||