From 92ae4d0d6ba7d8b0df3078ede6f7420d184c15c9 Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Sun, 17 Feb 2019 22:44:37 +0100 Subject: [PATCH] Add buttons to copy links and bbcode --- res/static/script/Toolbar.js | 2 +- res/static/script/compiled/home.js | 158 ++++++++++++++++++++++- res/static/script/listmaker.js | 82 ------------ res/static/typescript/home/home.ts | 173 +++++++++++++++++++++++++- res/static/typescript/lib/uploader.ts | 13 +- res/template/fragments/api/file.html | 13 +- res/template/fragments/api/list.html | 3 +- res/template/home.html | 3 +- 8 files changed, 350 insertions(+), 97 deletions(-) delete mode 100644 res/static/script/listmaker.js diff --git a/res/static/script/Toolbar.js b/res/static/script/Toolbar.js index 40c17bf..d1ef902 100644 --- a/res/static/script/Toolbar.js +++ b/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); diff --git a/res/static/script/compiled/home.js b/res/static/script/compiled/home.js index 7f8571f..9ae98e0 100644 --- a/res/static/script/compiled/home.js +++ b/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))); } } -/* - * Form upload handlers - */ +// List creation +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 = "
" + + '' + + "List creation finished!
" + + title + "
" + + "" + window.location.hostname + "/l/" + response.id + "" + + "
"; + $('#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 = "
List creation failed
" + + "The server responded with this:
" + + xhr.responseJSON.message + + "
"; + $('#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(); diff --git a/res/static/script/listmaker.js b/res/static/script/listmaker.js deleted file mode 100644 index 048c0ae..0000000 --- a/res/static/script/listmaker.js +++ /dev/null @@ -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 = "
List creation finished!
" - + "Your List URL:
" - + ""+window.location.hostname+"/l/" + response.id + "" - + "
"; - - $('#uploads_queue').prepend( - $(resultString).hide().fadeIn('slow').css("display", "") - ); - window.open('/l/'+response.id, '_blank'); - }else{ - resultString = "
List creation failed
" - + "The server responded with this:
" - + response.type + ": " + response.value - + "
"; - - $('#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 + "
Description:
" + fileDesc + "

"); -// -// $("#txtListId").val(""); -// $("#txtListDesc").val(""); -//}); diff --git a/res/static/typescript/home/home.ts b/res/static/typescript/home/home.ts index 8b0a060..41272d5 100644 --- a/res/static/typescript/home/home.ts +++ b/res/static/typescript/home/home.ts @@ -1,7 +1,13 @@ declare var apiEndpoint: string; + +class FinishedUpload { + public id: string; + public name: string; +} + var uploader: UploadManager|null = null; -var finishedUploads: Array = new Array() -var totalUploads: number = 0 +var finishedUploads: Array = new Array() +var totalUploads: number = 0 class UploadProgressBar implements FileUpload { private uploadDiv: HTMLAnchorElement @@ -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) { } } -/* - * Form upload handlers - */ +// List creation +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 = "
" + + '' + + "List creation finished!
" + + title + "
" + + ""+window.location.hostname+"/l/" + response.id + "" + + "
"; + $('#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 = "
List creation failed
" + + "The server responded with this:
" + + xhr.responseJSON.message + + "
"; + $('#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); + } +}); diff --git a/res/static/typescript/lib/uploader.ts b/res/static/typescript/lib/uploader.ts index eb56d06..ddc35d6 100644 --- a/res/static/typescript/lib/uploader.ts +++ b/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 diff --git a/res/template/fragments/api/file.html b/res/template/fragments/api/file.html index 6d747dc..fb01f68 100644 --- a/res/template/fragments/api/file.html +++ b/res/template/fragments/api/file.html @@ -11,6 +11,7 @@ + @@ -18,15 +19,25 @@ + + + + + + + + + + - + diff --git a/res/template/fragments/api/list.html b/res/template/fragments/api/list.html index 0bef4bb..4156599 100644 --- a/res/template/fragments/api/list.html +++ b/res/template/fragments/api/list.html @@ -15,7 +15,8 @@

Example

 {
-	"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",
diff --git a/res/template/home.html b/res/template/home.html
index 1358ae8..56bd868 100644
--- a/res/template/home.html
+++ b/res/template/home.html
@@ -23,6 +23,8 @@
 			
 			

 				
+				
+				
 			

 
 			
What is Pixeldrain?

@@ -138,7 +140,6 @@
 		
 
 		
-		
 		
 		{{template "analytics"}}
ParamType Required Maximum Size Default
namestring false 255 Characters Multipart file name Name of the file to upload
anonymousbooleanfalseN/AfalseIf the file should be uploaded anonymously
filemultipart file true5 000 000 000 Bytes10 000 000 000 Bytes none Multipart file to upload