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

lots and lots of transitions

Browse Source
This commit is contained in:
Wim Brand
2019-02-20 22:46:35 +01:00
parent d27e48fefc
commit 19067a5616
11 changed files with 344 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
res/static/script/DetailsWindow.js
View File

@@ -1,48 +0,0 @@
var DetailsWindow = {
visible: false,
toggle: function () {
if (this.visible) {
$("#info_popup").fadeOut(500);
$("#btnDetails").removeClass("button_highlight");
this.visible = false;
} else {
$("#info_popup").fadeIn(500);
$("#btnDetails").addClass("button_highlight");
this.visible = true;
}
},
setDetails: function (file) {
if (Viewer.isList) {
// Lists give incomplete file information, so we have to request
// more details in the background. File descriptions only exist in
// lists, so for that we use the data provided in the page source
$.ajax({
dataType: "json",
url: apiEndpoint + "/file/" + file.id + "/info",
success: function(data){
$("#info_file_details").html(
"<table>"
+ "<tr><td>Name<td><td>" + escapeHTML(data.name) + "</td></tr>"
+ "<tr><td>Url<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
+ "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>"
+ "<tr><td>IS<td><td>" + data.id + "</td></tr>"
+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.size + "</td></tr>"
+ "<tr><td>Upload Date<td><td>" + data.date_upload + "</td></tr>"
+ "<tr><td>Description<td><td>" + escapeHTML(file.description) + "</td></tr>"
+ "</table>"
);
}
});
} else {
$("#info_file_details").html(
"<table>"
+ "<tr><td>Name<td><td>" + escapeHTML(file.name) + "</td></tr>"
+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
+ "<tr><td>ID<td><td>" + file.id + "</td></tr>"
+ "<tr><td>Size<td><td class=\"bytecounter\">" + file.size + "</td></tr>"
+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
+ "</table>"
);
}
}
};

39
res/static/script/ListNavigator.js
View File

@@ -123,7 +123,7 @@ var ListNavigator = {
}
console.log(endPos);
var navigatorItems = $("#listNavigatorItems").children().toArray();
var navigatorItems = document.getElementById("listNavigatorItems").children
for (i = startPos; i <= endPos; i++){
var thumb = "/api/file/" + this.data[i].id + "/thumbnail";
@@ -142,7 +142,8 @@ var ListNavigator = {
this.data = data;
this.length = data.length;
$.each(data, function(i, item){
var listHTML = "";
data.forEach(function(item, i){
var filename;
if(item.name !== "null"){
filename = item.name;
@@ -150,16 +151,12 @@ var ListNavigator = {
filename = "Removed File";
}
var itemHtml = "<div class=\"listItem\" "
listHTML += "<div class=\"listItem\" "
+ "onClick=\"ListNavigator.setItem('" + i + "')\">"
+ escapeHTML(filename) + "<br>"
// + "<img src=\"/api/thumbnail/" + item.id + "\" " // Lazy Loading
// + "class=\"listItemThumbnail lazy\" alt=\"" + filename + "\"/>"
+ "</div>";
$("#listNavigatorItems").append(itemHtml);
});
document.getElementById("listNavigatorItems").innerHTML = listHTML;
// Skip to this file if the parameter is set
if(Number.isInteger(parseInt(hashPos))){
@@ -183,7 +180,7 @@ var ListNavigator = {
btnDownloadList.appendChild(btnDownloadListImg);
btnDownloadList.appendChild(btnDownloadListText);
$("#btnDownload").after(btnDownloadList);
document.getElementById("btnDownload").after(btnDownloadList);
// Add the shuffle button to the toolbar
var btnShuffle = document.createElement("button");
@@ -200,19 +197,25 @@ var ListNavigator = {
btnShuffle.appendChild(btnShuffleImg);
btnShuffle.appendChild(btnShuffleText);
$("#btnShare").after(btnShuffle);
document.getElementById("btnShare").after(btnShuffle);
// We need to adjust the height of some elements to make the navigation bar fit
var navHeight = $("#listNavigator").height() + 2;
window.setTimeout(function(){
$("#listNavigator").animate( {top: 0}, {"duration": 1500, "queue": false});
$("#filepreview").animate( {top: navHeight},{"duration": 1500, "queue": false});
$("#toolbar").animate( {top: navHeight},{"duration": 1500, "queue": false});
$("#button-expand-toolbar").animate({top: navHeight},{"duration": 1500, "queue": false});
$("#sharebar").animate( {top: navHeight},{"duration": 1500, "queue": false});
$("#info_popup").css("top", "120px");
}, 100);
document.getElementById("listNavigator").style.top = "0px";
document.getElementById("filepreview").style.top = navHeight+"px";
document.getElementById("toolbar").style.top = navHeight+"px";
document.getElementById("button-expand-toolbar").style.top = navHeight+"px";
document.getElementById("sharebar").style.top = navHeight+"px";
document.getElementById("info_popup").style.top = (navHeight+20)+"px";
// $("#listNavigator").animate( {top: 0}, {"duration": 1500, "queue": false});
// $("#filepreview").animate( {top: navHeight},{"duration": 1500, "queue": false});
// $("#toolbar").animate( {top: navHeight},{"duration": 1500, "queue": false});
// $("#button-expand-toolbar").animate({top: navHeight},{"duration": 1500, "queue": false});
// $("#sharebar").animate( {top: navHeight},{"duration": 1500, "queue": false});
// $("#info_popup").css("top", "120px");
}, 200);
}
};

21
res/static/script/Sharebar.js
View File

@@ -1,21 +0,0 @@
var Sharebar = {
visible: false,
toggle: function(){
if (!Toolbar.visible){
Toolbar.toggle();
}
if(this.visible){
$("#sharebar").animate({left: "-112"}, 600);
$("#btnShare").removeClass("button_highlight");
this.visible = false;
}else{
$("#sharebar").animate({left: "120"}, 400);
$("#btnShare").addClass("button_highlight");
this.visible = true;
}
}
};

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

@@ -6,7 +6,7 @@
* Made by Fornax
*/
/* global Sharebar, Viewer */
/* global Viewer */
var Toolbar = {
visible: true,
@@ -16,47 +16,34 @@ var Toolbar = {
Sharebar.toggle();
}
$("#toolbar").animate( {left: "-132"}, 400);
$("#filepreview").animate({left: "0"}, 400);
$("#info_popup").animate( {left: "20"}, 400);
$("#button-expand-toolbar").css("visibility", "visible");
document.getElementById("toolbar").style.left = "-132px";
document.getElementById("filepreview").style.left = "0px";
document.getElementById("info_popup").style.left = "20px";
this.visible = false;
} else {
$("#toolbar").animate( {left: "0"}, 400);
$("#filepreview").animate({left: "122"}, 400);
$("#info_popup").animate( {left: "142"}, 400);
setTimeout(function(){
if(this.visible){
$("#button-expand-toolbar").css("visibility", "hidden");
}
}, 1000)
document.getElementById("toolbar").style.left = "0px";
document.getElementById("filepreview").style.left = "122px";
document.getElementById("info_popup").style.left = "142px";
this.visible = true;
}
},
download: function () {
$("#frmDownload").attr("src", "/api/file/" + Viewer.currentFile + "?download");
document.getElementById("download_frame").src = "/api/file/" + Viewer.currentFile + "?download";
},
downloadList: function(){
if(!Viewer.isList){
return;
}
$("#frmDownload").attr("src", "/api/list/" + Viewer.listId + "/zip");
document.getElementById("download_frame").src = "/api/list/" + Viewer.listId + "/zip";
},
copyUrl: function () {
$("#copy-text").val(window.location.href);
$("#copy-text").select();
try {
var success = document.execCommand('copy');
if(copyText(window.location.href)) {
console.log('Text copied');
$("#btnCopy>span").text("Copied!");
$("#btnCopy").addClass("button_highlight");
} catch (err) {
document.getElementById("btnCopy").classList.add("button_highlight")
} else {
console.log('Copying not supported');
$("#btnCopy>span").text("Error!");
alert("Your browser does not support copying text.");
@@ -65,10 +52,99 @@ var Toolbar = {
// Return to normal
setTimeout(function(){
$("#btnCopy>span").text("Copy");
$("#btnCopy").removeClass("button_highlight");
document.getElementById("btnCopy").classList.remove("button_highlight")
}, 60000);
},
setViews: function(amount){
$("#views").html("Views: "+amount);
document.getElementById("views").innerText = "Views: "+amount;
}
};
var Sharebar = {
visible: false,
toggle: function(){
if (!Toolbar.visible){
Toolbar.toggle();
}
if(this.visible){
document.getElementById("sharebar").style.left = "-112px";
document.getElementById("btnShare").classList.remove("button_highlight")
this.visible = false;
}else{
document.getElementById("sharebar").style.left = "120px";
document.getElementById("btnShare").classList.add("button_highlight")
this.visible = true;
}
}
};
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;
}
var DetailsWindow = {
visible: false,
popupDiv: document.getElementById("info_popup"),
detailsButton: document.getElementById("btnDetails"),
toggle: function () {
if (this.visible) {
this.popupDiv.style.opacity = "0"
this.popupDiv.style.visibility = "hidden"
this.detailsButton.classList.remove("button_highlight")
this.visible = false;
} else {
this.popupDiv.style.opacity = "1"
this.popupDiv.style.visibility = "visible"
this.detailsButton.classList.add("button_highlight")
this.visible = true;
}
},
setDetails: function (file) {
if (Viewer.isList) {
// Lists give incomplete file information, so we have to request
// more details in the background. File descriptions only exist in
// lists, so for that we use the data provided in the page source
$.ajax({
dataType: "json",
url: apiEndpoint + "/file/" + file.id + "/info",
success: function(data){
$("#info_file_details").html(
"<table>"
+ "<tr><td>Name<td><td>" + escapeHTML(data.name) + "</td></tr>"
+ "<tr><td>Url<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
+ "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>"
+ "<tr><td>IS<td><td>" + data.id + "</td></tr>"
+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.size + "</td></tr>"
+ "<tr><td>Upload Date<td><td>" + data.date_upload + "</td></tr>"
+ "<tr><td>Description<td><td>" + escapeHTML(file.description) + "</td></tr>"
+ "</table>"
);
}
});
} else {
$("#info_file_details").html(
"<table>"
+ "<tr><td>Name<td><td>" + escapeHTML(file.name) + "</td></tr>"
+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
+ "<tr><td>ID<td><td>" + file.id + "</td></tr>"
+ "<tr><td>Size<td><td class=\"bytecounter\">" + file.size + "</td></tr>"
+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
+ "</table>"
);
}
}
};

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

@@ -6,50 +6,66 @@ var FinishedUpload = /** @class */ (function () {
var uploader = null;
var finishedUploads = new Array();
var totalUploads = 0;
var queueDiv = document.getElementById("uploads_queue");
var UploadProgressBar = /** @class */ (function () {
function UploadProgressBar(file) {
this.file = file;
this.name = file.name;
this.queueNum = totalUploads;
totalUploads++;
this.uploadDiv = document.createElement("a");
this.uploadDiv.setAttribute("class", "file_button");
totalUploads++;
this.uploadDiv.classList.add("file_button");
this.uploadDiv.style.opacity = "0";
this.uploadDiv.innerText = "Queued\n" + this.file.name;
this.uploadDivJQ = $(this.uploadDiv);
$("#uploads_queue").append(this.uploadDivJQ.hide().fadeIn('slow').css("display", ""));
queueDiv.appendChild(this.uploadDiv);
// Browsers don't render the transition if the opacity is set and
// updated in the same frame. So we have to wait a frame (or more)
// before changing the opacity to make sure the transition triggers
var d = this.uploadDiv; // `this` stops working after constructor ends
window.setTimeout(function () { d.style.opacity = "1"; }, 100);
}
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('
this.uploadDiv.style.background = 'linear-gradient('
+ 'to right, '
+ 'var(--file_background_color) 0%, '
+ 'var(--highlight_color) ' + ((progress * 100)) + '%, '
+ 'var(--file_background_color) ' + ((progress * 100) + 1) + '%)');
+ 'var(--file_background_color) ' + ((progress * 100) + 1) + '%)';
};
UploadProgressBar.prototype.onFinished = function (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");
this.uploadDivJQ.html('<img src="' + apiEndpoint + '/file/' + id + '/thumbnail" alt="' + this.file.name + '"/>'
+ this.file.name + '<br/>'
+ '<span style="color: var(--highlight_color);">' + window.location.hostname + '/u/' + id + '</span>');
this.uploadDiv.style.background = 'var(--file_background_color)';
this.uploadDiv.href = '/u/' + id;
this.uploadDiv.target = "_blank";
var fileImg = document.createElement("img");
fileImg.src = apiEndpoint + '/file/' + id + '/thumbnail';
fileImg.alt = this.file.name;
var linkSpan = document.createElement("span");
linkSpan.style.color = "var(--highlight_color)";
linkSpan.innerText = window.location.hostname + "/u/" + id;
this.uploadDiv.innerHTML = ""; // Remove uploading progress
this.uploadDiv.appendChild(fileImg);
this.uploadDiv.appendChild(document.createTextNode(this.file.name));
this.uploadDiv.appendChild(document.createElement("br"));
this.uploadDiv.appendChild(linkSpan);
};
UploadProgressBar.prototype.onFailure = function (response, error) {
this.uploadDiv.setAttribute('style', 'background: var(--danger_color)');
this.uploadDivJQ.html(this.file.name + '<br/>'
+ 'Upload failed after three tries!<br/>'
+ "Message: " + error);
this.uploadDiv.style.background = 'var(--danger_color)';
this.uploadDiv.appendChild(document.createTextNode(this.file.name));
this.uploadDiv.appendChild(document.createElement("br"));
this.uploadDiv.appendChild(document.createTextNode("Upload failed after three tries:"));
this.uploadDiv.appendChild(document.createElement("br"));
this.uploadDiv.appendChild(document.createTextNode(error));
};
return UploadProgressBar;
}());
function handleUploads(files) {
if (uploader === null) {
uploader = new UploadManager();
$("#uploads_queue").animate({ "height": "340px" }, { "duration": 2000, queue: false });
queueDiv.style.height = "340px";
}
for (var i = 0; i < files.length; i++) {
uploader.uploadFile(new UploadProgressBar(files.item(i)));
@@ -110,27 +126,25 @@ function createList(title, anonymous) {
}
// 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) {
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
// 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();
});
document.getElementById("file_input_field").nodeValue = "";
};
/*
* Drag 'n Drop upload handlers
*/
$(document).on('dragover', function (e) {
document.ondragover = function (e) {
e.preventDefault();
e.stopPropagation();
});
$(document).on('dragenter', function (e) {
};
document.ondragenter = function (e) {
e.preventDefault();
e.stopPropagation();
});
};
document.addEventListener('drop', function (e) {
if (e.dataTransfer && e.dataTransfer.files.length > 0) {
e.preventDefault();
@@ -300,7 +314,7 @@ var UploadWorker = /** @class */ (function () {
};
UploadWorker.prototype.newFile = function () {
var file = this.manager.grabFile();
if (file === undefined) { // No more files in the queue. We're finished
if (file === undefined) {
this.uploading = false;
console.debug("No files left in queue");
return; // Stop the thread