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

Add buttons to copy links and bbcode

Browse Source
This commit is contained in:
Wim Brand
2019-02-17 22:44:37 +01:00
parent 6fa16218f6
commit 92ae4d0d6b
8 changed files with 350 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/static/script/Toolbar.js
View File

@@ -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);

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

@@ -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 = "<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();

82
res/static/script/listmaker.js
View File

@@ -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("");
//});

173
res/static/typescript/home/home.ts
View File

@@ -1,7 +1,13 @@
declare var apiEndpoint: string;
class FinishedUpload {
public id: string;
public name: string;
}
var uploader: UploadManager|null = null;
var finishedUploads: Array<string> = new Array()
var totalUploads: number = 0
var finishedUploads: Array<FinishedUpload> = 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 = "<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);
}
});

13
res/static/typescript/lib/uploader.ts
View File

@@ -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

13
res/template/fragments/api/file.html
View File

@@ -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>

3
res/template/fragments/api/list.html
View File

@@ -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",

3
res/template/home.html
View File

@@ -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>