Add buttons to copy links and bbcode

res/static/script/Toolbar.js

@@ -64,7 +64,7 @@ var Toolbar = {
 		setTimeout(function(){
 			$("#btnCopy>span").text("Copy");
 			$("#btnCopy").removeClass("button_highlight");
-		}, 10000);
+		}, 60000);
 	},
 	setViews: function(amount){
 		$("#views").html("Views: "+amount);

res/static/script/compiled/home.js

@@ -1,3 +1,8 @@
+var FinishedUpload = /** @class */ (function () {
+    function FinishedUpload() {
+    }
+    return FinishedUpload;
+}());
 var uploader = null;
 var finishedUploads = new Array();
 var totalUploads = 0;
@@ -22,7 +27,10 @@ var UploadProgressBar = /** @class */ (function () {
             + 'var(--file_background_color) ' + ((progress * 100) + 1) + '%)');
     };
     UploadProgressBar.prototype.onFinished = function (id) {
-        finishedUploads[this.queueNum] = 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");
@@ -47,9 +55,60 @@ function handleUploads(files) {
         uploader.uploadFile(new UploadProgressBar(files.item(i)));
     }
 }
-/*
+// List creation
- * Form upload handlers
+function createList(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?");
+        if (!cont) {
+            return;
+        }
+    }
+    var postData = {
+        "title": title,
+        "anonymous": anonymous,
+        "files": new Array()
+    };
+    for (var i = 0; i < finishedUploads.length; i++) {
+        postData.files.push({
+            "id": finishedUploads[i].id
+        });
+    }
+    $.ajax({
+        url: "/api/list",
+        contentType: "application/json",
+        method: "POST",
+        data: JSON.stringify(postData),
+        dataType: "json",
+        success: function (response) {
+            var resultString = "<div class=\"file_button\">"
+                + '<img src="' + apiEndpoint + '/list/' + response.id + '/thumbnail"/>'
+                + "List creation finished!<br/>"
+                + title + "<br/>"
+                + "<a href=\"/l/" + response.id + "\" target=\"_blank\">" + window.location.hostname + "/l/" + response.id + "</a>"
+                + "</div>";
+            $('#uploads_queue').append($(resultString).hide().fadeIn('slow').css("display", ""));
+            $("#uploads_queue").animate({
+                scrollTop: $("#uploads_queue").prop("scrollHeight")
+            }, 1000);
+            window.open('/l/' + response.id, '_blank');
+        },
+        error: function (xhr, status, error) {
+            console.log("xhr:");
+            console.log(xhr);
+            console.log("status:");
+            console.log(status);
+            console.log("error:");
+            console.log(error);
+            var resultString = "<div class=\"file_button\">List creation failed<br/>"
+                + "The server responded with this: <br/>"
+                + xhr.responseJSON.message
+                + "</div>";
+            $('#uploads_queue').append($(resultString).hide().fadeIn('slow').css("display", ""));
+        }
+    });
+}
+// 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) {
@@ -84,6 +143,88 @@ $("input[name=style]").change(function (evt) {
     Cookie.write("style", evt.target.id.substring(6));
     location.reload();
 });
+function copyText(text) {
+    // Create a textarea to copy the text from
+    var ta = document.createElement("textarea");
+    ta.setAttribute("readonly", "readonly");
+    ta.style.position = "absolute";
+    ta.style.left = "-9999px";
+    ta.value = text; // Put the text in the textarea
+    // Add the textarea to the DOM so it can be seleted by the user
+    document.body.appendChild(ta);
+    ta.select(); // Select the contents of the textarea
+    var success = document.execCommand("copy"); // Copy the selected text
+    document.body.removeChild(ta); // Remove the textarea
+    return success;
+}
+// Create list button
+document.getElementById("btn_create_list").addEventListener("click", function (evt) {
+    var title = prompt("You are creating a list containing " + finishedUploads.length + " files.\n"
+        + "What do you want to call it?", "My New Album");
+    if (title === null) {
+        return;
+    }
+    createList(title, false);
+});
+var btnCopyLinks = document.getElementById("btn_copy_links");
+btnCopyLinks.addEventListener("click", function () {
+    var text = "";
+    // Add the text to the textarea
+    for (var i = 0; i < finishedUploads.length; i++) {
+        // Example: https://pixeldrain.com/u/abcd1234: Some_file.png
+        text += window.location.protocol + "//" + window.location.hostname + "/u/" + finishedUploads[i].id +
+            ": " + finishedUploads[i].name + "\n";
+    }
+    var defaultButtonText = btnCopyLinks.innerHTML;
+    // Copy the selected text
+    if (copyText(text)) {
+        btnCopyLinks.classList.add("button_highlight");
+        btnCopyLinks.innerHTML = "Links copied to clipboard!";
+        // Return to normal
+        setTimeout(function () {
+            btnCopyLinks.innerHTML = defaultButtonText;
+            btnCopyLinks.classList.remove("button_highlight");
+        }, 60000);
+    }
+    else {
+        btnCopyLinks.classList.add("button_red");
+        btnCopyLinks.innerHTML = "Copying links failed";
+        setTimeout(function () {
+            btnCopyLinks.innerHTML = defaultButtonText;
+            btnCopyLinks.classList.remove("button_red");
+        }, 60000);
+    }
+});
+var btnCopyBBCode = document.getElementById("btn_copy_bbcode");
+btnCopyBBCode.addEventListener("click", function () {
+    var text = "";
+    // Add the text to the textarea
+    for (var i = 0; i < finishedUploads.length; i++) {
+        // Example: [url=https://pixeldrain.com/u/abcd1234]Some_file.png[/url]
+        text += "[url=" + window.location.protocol + "//" + window.location.hostname +
+            "/u/" + finishedUploads[i].id + "]" +
+            finishedUploads[i].name + "[/url]\n";
+    }
+    var defaultButtonText = btnCopyBBCode.innerHTML;
+    // Copy the selected text
+    if (copyText(text)) {
+        btnCopyBBCode.classList.add("button_highlight");
+        btnCopyBBCode.innerHTML = "BBCode copied to clipboard!";
+        // Return to normal
+        setTimeout(function () {
+            btnCopyBBCode.innerHTML = defaultButtonText;
+            btnCopyBBCode.classList.remove("button_highlight");
+        }, 60000);
+    }
+    else {
+        btnCopyBBCode.classList.add("button_red");
+        btnCopyBBCode.innerHTML = "Copying links failed";
+        setTimeout(function () {
+            btnCopyBBCode.innerHTML = defaultButtonText;
+            btnCopyBBCode.classList.remove("button_red");
+        }, 60000);
+    }
+});
 var Cookie;
 (function (Cookie) {
     function read(name) {
@@ -127,6 +268,14 @@ var UploadManager = /** @class */ (function () {
             }
         }
     };
+    UploadManager.prototype.uploading = function () {
+        for (var i = 0; i < this.uploadThreads.length; i++) {
+            if (this.uploadThreads[i].isUploading()) {
+                return true;
+            }
+        }
+        return false;
+    };
     UploadManager.prototype.grabFile = function () {
         if (this.uploadQueue.length > 0) {
             return this.uploadQueue.shift();
@@ -143,6 +292,7 @@ var UploadWorker = /** @class */ (function () {
         this.uploading = false;
         this.manager = manager;
     }
+    UploadWorker.prototype.isUploading = function () { return this.uploading; };
     UploadWorker.prototype.start = function () {
         if (!this.uploading) {
             this.newFile();

res/static/script/listmaker.js

@@ -1,82 +0,0 @@
-$("#btn_create_list").click(function (evt) {
-	createList();
-});
-
-function createList(){
-	let listfiles = new Array()
-	for (var i = 0; i < finishedUploads.length; i++) {
-		if (finishedUploads[i] === undefined) {
-			continue;
-		}
-		listfiles.push(finishedUploads[i]);
-	}
-
-	var url = "/api/list";
-
-	var postData = {};
-
-	var title = prompt(
-		"You are creating a list containing " + listfiles.length + " files.\n"
-		+ "What do you want to call it?", "My New Album"
-	);
-
-	if(title === null){
-		return;
-	}
-
-	var postData = {
-		"title": title,
-		"description": "yo",
-		"files": new Array()
-	};
-
-	for (var i = 0; i < listfiles.length; i++) {
-		postData.files.push({
-			"id": listfiles[i]
-		});
-	}
-
-	$.ajax({
-		url: url,
-		contentType: "application/json",
-		method: "POST",
-		data: JSON.stringify(postData),
-		dataType: "json",
-		success: listCreated,
-		error: listCreated
-	});
-}
-
-function listCreated(response){
-	if(response.success){
-		resultString = "<div class=\"file_button\">List creation finished!<br/>"
-			+ "Your List URL: <br/>"
-			+ "<a href=\"/l/" + response.id + "\" target=\"_blank\" style=\"font-weight: bold;\">"+window.location.hostname+"/l/" + response.id + "</a>"
-			+ "</div>";
-
-		$('#uploads_queue').prepend(
-			$(resultString).hide().fadeIn('slow').css("display", "")
-		);
-		window.open('/l/'+response.id, '_blank');
-	}else{
-		resultString = "<div class=\"file_button\">List creation failed<br/>"
-			+ "The server responded with this: <br/>"
-			+ response.type + ": " + response.value
-			+ "</div>";
-
-		$('#uploads_queue').prepend(
-			$(resultString).hide().fadeIn('slow').css("display", "")
-		);
-	}
-}
-//$("#btnAddToList").click(function (evt) {
-//	var fileId = $("#txtListId").val();
-//	var fileDesc = $("#txtListDesc").val();
-//
-//	addToList(fileId, fileDesc);
-//
-//	divItems.prepend("ID: " + fileId + "<br>Description:<br>" + fileDesc + "<br><br>");
-//
-//	$("#txtListId").val("");
-//	$("#txtListDesc").val("");
-//});

res/static/typescript/home/home.ts

@@ -1,6 +1,12 @@
 declare var apiEndpoint: string;
+
+class FinishedUpload {
+	public id:   string;
+	public name: string;
+}
+
 var uploader:        UploadManager|null = null;
-var finishedUploads: Array<string>      = new Array()
+var finishedUploads: Array<FinishedUpload> = new Array()
 var totalUploads:    number = 0
 
 class UploadProgressBar implements FileUpload {
@@ -39,7 +45,10 @@ class UploadProgressBar implements FileUpload {
 		)
 	}
 	public onFinished(id: string){
-		finishedUploads[this.queueNum] = 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)
@@ -75,9 +84,68 @@ function handleUploads(files: FileList) {
 	}
 }
 
-/*
+// List creation
- * Form upload handlers
+function createList(title: string, anonymous: boolean){
- */
+	if (uploader.uploading()) {
+		var cont = confirm(
+			"Some files have not finished uploading yet. Creating a list now "+
+				"will exclude those files.\n\nContinue?");
+		if (!cont) {
+			return;
+		}
+	}
+
+	var postData = {
+		"title": title,
+		"anonymous": anonymous,
+		"files": new Array()
+	};
+	for (var i = 0; i < finishedUploads.length; i++) {
+		postData.files.push({
+			"id": finishedUploads[i].id
+		});
+	}
+
+	$.ajax({
+		url: "/api/list",
+		contentType: "application/json",
+		method: "POST",
+		data: JSON.stringify(postData),
+		dataType: "json",
+		success: function(response) {
+			var resultString = "<div class=\"file_button\">"
+				+ '<img src="'+apiEndpoint+'/list/'+response.id+'/thumbnail"/>'
+				+ "List creation finished!<br/>"
+				+ title + "<br/>"
+				+ "<a href=\"/l/" + response.id + "\" target=\"_blank\">"+window.location.hostname+"/l/" + response.id + "</a>"
+				+ "</div>";
+			$('#uploads_queue').append(
+				$(resultString).hide().fadeIn('slow').css("display", "")
+			);
+			$("#uploads_queue").animate({
+				scrollTop: $("#uploads_queue").prop("scrollHeight")
+			}, 1000);
+			window.open('/l/'+response.id, '_blank');
+		},
+		error: function(xhr, status, error) {
+			console.log("xhr:");
+			console.log(xhr);
+			console.log("status:");
+			console.log(status);
+			console.log("error:");
+			console.log(error);
+			var resultString = "<div class=\"file_button\">List creation failed<br/>"
+				+ "The server responded with this: <br/>"
+				+ xhr.responseJSON.message
+				+ "</div>";
+			$('#uploads_queue').append(
+				$(resultString).hide().fadeIn('slow').css("display", "")
+			);
+		}
+	});
+}
+
+// Form upload handlers
 
 // Relay click event to hidden file field
 $("#select_file_button").click(function(){$("#file_input_field").click()})
@@ -118,3 +186,96 @@ $("input[name=style]").change(function(evt){
 	Cookie.write("style", evt.target.id.substring(6))
 	location.reload()
 })
+
+function copyText(text: string) : boolean {
+	// Create a textarea to copy the text from
+	var ta = document.createElement("textarea");
+	ta.setAttribute("readonly", "readonly")
+	ta.style.position = "absolute";
+	ta.style.left = "-9999px";
+	ta.value = text; // Put the text in the textarea
+
+	// Add the textarea to the DOM so it can be seleted by the user
+	document.body.appendChild(ta);
+	ta.select() // Select the contents of the textarea
+	var success = document.execCommand("copy"); // Copy the selected text
+	document.body.removeChild(ta); // Remove the textarea
+	return success;
+}
+
+// Create list button
+document.getElementById("btn_create_list").addEventListener("click", function(evt) {
+	var title = prompt(
+		"You are creating a list containing " + finishedUploads.length + " files.\n"
+		+ "What do you want to call it?", "My New Album"
+	);
+	if(title === null){
+		return;
+	}
+	createList(title, false);
+});
+
+var btnCopyLinks = document.getElementById("btn_copy_links");
+btnCopyLinks.addEventListener("click", function(){
+	var text = "";
+
+	// Add the text to the textarea
+	for (var i = 0; i < finishedUploads.length; i++) {
+		// Example: https://pixeldrain.com/u/abcd1234: Some_file.png
+		text += window.location.protocol + "//" + window.location.hostname + "/u/" + finishedUploads[i].id +
+			": " + finishedUploads[i].name + "\n";
+	}
+
+	var defaultButtonText = btnCopyLinks.innerHTML;
+
+	// Copy the selected text
+	if(copyText(text)){
+		btnCopyLinks.classList.add("button_highlight");
+		btnCopyLinks.innerHTML = "Links copied to clipboard!"
+		// Return to normal
+		setTimeout(function(){
+			btnCopyLinks.innerHTML = defaultButtonText;
+			btnCopyLinks.classList.remove("button_highlight")
+		}, 60000);
+	}else{
+		btnCopyLinks.classList.add("button_red");
+		btnCopyLinks.innerHTML = "Copying links failed"
+		setTimeout(function(){
+			btnCopyLinks.innerHTML = defaultButtonText;
+			btnCopyLinks.classList.remove("button_red")
+		}, 60000);
+	}
+});
+
+var btnCopyBBCode = document.getElementById("btn_copy_bbcode");
+btnCopyBBCode.addEventListener("click", function(){
+	var text = "";
+
+	// Add the text to the textarea
+	for (var i = 0; i < finishedUploads.length; i++) {
+		// Example: [url=https://pixeldrain.com/u/abcd1234]Some_file.png[/url]
+		text += "[url=" + window.location.protocol + "//" + window.location.hostname +
+			"/u/" + finishedUploads[i].id + "]" +
+			finishedUploads[i].name + "[/url]\n";
+	}
+
+	var defaultButtonText = btnCopyBBCode.innerHTML;
+
+	// Copy the selected text
+	if(copyText(text)){
+		btnCopyBBCode.classList.add("button_highlight");
+		btnCopyBBCode.innerHTML = "BBCode copied to clipboard!"
+		// Return to normal
+		setTimeout(function(){
+			btnCopyBBCode.innerHTML = defaultButtonText;
+			btnCopyBBCode.classList.remove("button_highlight")
+		}, 60000);
+	}else{
+		btnCopyBBCode.classList.add("button_red");
+		btnCopyBBCode.innerHTML = "Copying links failed"
+		setTimeout(function(){
+			btnCopyBBCode.innerHTML = defaultButtonText;
+			btnCopyBBCode.classList.remove("button_red")
+		}, 60000);
+	}
+});

res/static/typescript/lib/uploader.ts

@@ -28,6 +28,16 @@ class UploadManager {
 			}
 		}
 	}
+
+	public uploading(): boolean {
+		for (var i = 0; i < this.uploadThreads.length; i++) {
+			if (this.uploadThreads[i].isUploading()) {
+				return true;
+			}
+		}
+		return false;
+	}
+
 	public grabFile(): FileUpload | undefined {
 		if (this.uploadQueue.length > 0) {
 			return this.uploadQueue.shift()
@@ -41,6 +51,7 @@ class UploadWorker {
 	private manager:   UploadManager
 	private tries:     number  = 0
 	private uploading: boolean = false
+	public  isUploading(): boolean {return this.uploading;}
 
 	constructor(manager: UploadManager) {
 		this.manager = manager
@@ -53,7 +64,7 @@ class UploadWorker {
 
 	private newFile() {
 		var file = this.manager.grabFile()
-		if (file === undefined) {
+		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

res/template/fragments/api/file.html

@@ -11,6 +11,7 @@
 		<table>
 			<tr>
 				<td>Param</td>
+				<td>Type</td>
 				<td>Required</td>
 				<td>Maximum Size</td>
 				<td>Default</td>
@@ -18,15 +19,25 @@
 			</tr>
 			<tr>
 				<td>name</td>
+				<td>string</td>
 				<td>false</td>
 				<td>255 Characters</td>
 				<td>Multipart file name</td>
 				<td>Name of the file to upload</td>
 			</tr>
+			<tr>
+				<td>anonymous</td>
+				<td>boolean</td>
+				<td>false</td>
+				<td>N/A</td>
+				<td>false</td>
+				<td>If the file should be uploaded anonymously</td>
+			</tr>
 			<tr>
 				<td>file</td>
+				<td>multipart file</td>
 				<td>true</td>
-				<td>5 000 000 000 Bytes</td>
+				<td>10 000 000 000 Bytes</td>
 				<td>none</td>
 				<td>Multipart file to upload</td>
 			</tr>

res/template/fragments/api/list.html

@@ -15,7 +15,8 @@
 		<h4>Example</h4>
 <pre>
 {
-	"title": "My beautiful photos",
+	"title": "My beautiful photos", // Defaults to "Pixeldrain List"
+	"anonymous": false / true, // If true this list will not be linked to your user account. Defaults to "false"
 	"files": [ // Ordered array of files to add to the list
 		{
 			"id": "abc123",

res/template/home.html

@@ -23,6 +23,8 @@
 			</div>
 			<div class="highlight_dark border_bottom">
 				<button id="btn_create_list">Create list with uploaded files</button>
+				<button id="btn_copy_links">Copy links to clipboard</button>
+				<button id="btn_copy_bbcode">Copy BBCode to clipboard</button>
 			</div>
 
 			<h1>What is Pixeldrain?</h1>
@@ -138,7 +140,6 @@
 		</div>
 
 		<script type="text/javascript">var API_URL = "/api";</script>
-		<script src="/res/script/listmaker.js"></script>
 		<script src="/res/script/compiled/home.js"></script>
 		{{template "analytics"}}
 	</body>