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

21
res/static/style/layout.css
View File

@@ -57,7 +57,6 @@ html{height: 100%;}
body{
background-color: var(--background_color);
background-repeat: repeat;
font-size: 16px;
font-family: 'Ubuntu';
margin: 0;
text-align: center; /* Center the header and body */
@@ -103,7 +102,7 @@ body{
text-decoration: none;
font-family: "Lato Thin", sans-serif;
font-weight: bold;
font-size: 26px;
font-size: 1.8em;
transition: box-shadow 0.5s;
}
.navigation a:hover {
@@ -214,13 +213,13 @@ pre{
}
.big_button{
height: 40px;
height: 1.3em;
width: 40%;
min-width: 200px;
max-width: 400px;
margin: 10px !important;
border-radius: 10px;
font-size: 30px;
font-size: 1.9em;
font-weight: normal;
line-height: 8px;
}
@@ -252,14 +251,6 @@ pre{
white-space: nowrap;
}
.uploads_queue{
position: relative;
width: 100%;
height: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.file_button{
position: relative;
box-sizing: border-box;
@@ -276,7 +267,7 @@ pre{
text-align: left;
line-height: 120%;
display: inline-block;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, opacity 2s;
}
.file_button:hover{
box-shadow: 0px 0px 10px 3px var(--highlight_color), inset 0px 0px 6px 1px var(--highlight_color);
@@ -344,7 +335,7 @@ input[type="button"]:active,
input[type="color"]:active,
select:active{
background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 3px 3px 6px var(--shadow_color);
box-shadow: inset 5px 5px 10px var(--shadow_color);
padding: 11px 3px 1px 13px; /* Exactly 5px offset compared to the inactive padding to give a depth effect */
}
.button_full_width {width: calc(100% - 4px);}
@@ -371,8 +362,8 @@ input[type="number"]{
padding: 3px 5px;
color: var(--input_text_color);
height: 26px;
font-size: 18px;
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
vertical-align: bottom;
outline: 0;
transition: box-shadow 0.3s;

90
res/static/style/listview.css
View File

@@ -1,90 +0,0 @@
/*
Created on : Jul 30, 2015, 12:46:39 PM
Author : Fornax
*/
.file-container{
position: absolute;
top: 100px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
overflow: hidden;
border: none;
}
.file-container-frame{
position: absolute;
width: 100%;
height: 100%;
border: none;
}
#listNavigator{
position: absolute;
left: 0;
right: 0;
top: -100px;
height: 98px;
background-color: #000;
box-shadow: 2px 2px 8px #000000;
border-bottom: 2px ridge var(--highlight_color);
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
z-index: 50;
}
#listNavigatorItems{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
border: none;
padding: 0 40px;
}
.listItem{
display: inline-block;
position: relative;
height: 95%;
width: 100px;
margin-right: 5px;
text-align: center;
border: #333 solid 2px;
font-size: 12px;
overflow: hidden;
cursor: pointer;
}
.listItemThumbnail{
position: relative;
max-width: 100%;
max-height: 84%;
margin: 0;
}
#arrow-left,
#arrow-right{
position: absolute;
display: block;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
height: 0;
width: 0;
top: 20px;
cursor: pointer;
}
#arrow-left{
border-right: 40px solid var(--highlight_color);
left: 10px;
}
#arrow-right{
border-left: 40px solid var(--highlight_color);
right: 10px;
}

114
res/static/style/viewer.css
View File

@@ -18,6 +18,7 @@ body{
min-width: 100px;
text-align: center;
vertical-align: middle;
transition: left 1s, top 1.5s;
}
/* =====================
@@ -107,6 +108,7 @@ body{
text-align: left;
border-right: 2px ridge var(--highlight_color);
box-shadow: 2px 2px 8px var(--shadow_color);
transition: left 1s, top 1.5s;
}
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
@@ -129,7 +131,6 @@ body{
#button-expand-toolbar{
position: absolute;
visibility: hidden;
left: 0;
top: 0;
cursor: pointer;
@@ -175,6 +176,7 @@ body{
border-right: 2px ridge var(--highlight_color);
z-index: 50;
overflow: hidden;
transition: left 1s, top 1.5s;
}
.sharebar-button {text-align: center;}
@@ -184,7 +186,9 @@ body{
.full_popup{
position: fixed;
display: none;
visibility: hidden;
opacity: 0;
transition: visibility 1s, opacity 1s, left 1s;
background-color: var(--background_color);
left: 142px;
right: 20px;
@@ -215,20 +219,6 @@ table > tbody > tr {border: none !important;}
z-index: 200;
}
#frmDownload{
display: none;
width: 1px;
height: 0px;
position: relative;
}
#copy-text{
left: -100px;
width: 0px;
height: 0px;
position: fixed;
}
.bytecounter{
color: var(--text_color);
font-size: 16px;
@@ -237,10 +227,100 @@ table > tbody > tr {border: none !important;}
text-align: right;
display: inline-block;
background-image: url("/res/img/bytecounter.png");
/*background-attachment: fixed;*/
background-position: top right;
width: 108px;
height: 36px;
padding: 0;
padding-right: 1px;
}
/* ====================
|| LIST NAVIGATOR ||
==================== */
.file-container{
position: absolute;
top: 100px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
overflow: hidden;
border: none;
}
.file-container-frame{
position: absolute;
width: 100%;
height: 100%;
border: none;
}
#listNavigator{
position: absolute;
left: 0;
right: 0;
top: -100px;
height: 98px;
background-color: #000;
box-shadow: 2px 2px 8px #000000;
border-bottom: 2px ridge var(--highlight_color);
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
z-index: 50;
transition: top 1.5s;
}
#listNavigatorItems{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
border: none;
padding: 0 40px;
}
.listItem{
display: inline-block;
position: relative;
height: 95%;
width: 100px;
margin-right: 5px;
text-align: center;
border: #333 solid 2px;
font-size: 12px;
overflow: hidden;
cursor: pointer;
}
.listItemThumbnail{
position: relative;
max-width: 100%;
max-height: 84%;
margin: 0;
}
#arrow-left,
#arrow-right{
position: absolute;
display: block;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
height: 0;
width: 0;
top: 20px;
cursor: pointer;
}
#arrow-left{
border-right: 40px solid var(--highlight_color);
left: 10px;
}
#arrow-right{
border-left: 40px solid var(--highlight_color);
right: 10px;
}

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

@@ -1,48 +1,47 @@
declare var apiEndpoint: string;
declare var apiEndpoint: string
class FinishedUpload {
public id: string;
public name: string;
public id: string
public name: string
}
var uploader: UploadManager|null = null;
var uploader: UploadManager|null = null
var finishedUploads: Array<FinishedUpload> = new Array()
var totalUploads: number = 0
var queueDiv = document.getElementById("uploads_queue")
class UploadProgressBar implements FileUpload {
private uploadDiv: HTMLAnchorElement
private uploadDivJQ: JQuery<HTMLElement>
private queueNum: number
public file: File
public name: string
private queueNum: number
private uploadDiv: HTMLAnchorElement
constructor(file: File){
this.file = file
this.name = file.name
this.queueNum = totalUploads
this.uploadDiv = document.createElement("a")
totalUploads++
this.uploadDiv = document.createElement("a")
this.uploadDiv.setAttribute("class", "file_button")
this.uploadDiv.classList.add("file_button")
this.uploadDiv.style.opacity = "0";
this.uploadDiv.innerText = "Queued\n" + this.file.name
this.uploadDivJQ = $(this.uploadDiv)
queueDiv.appendChild(this.uploadDiv)
$("#uploads_queue").append(
this.uploadDivJQ.hide().fadeIn('slow').css("display", "")
)
// 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)
}
// Interface stuff
public file: File
public name: string
public onProgress(progress: number){
this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.file.name
this.uploadDiv.setAttribute(
'style',
'background: linear-gradient('
+'to right, '
+'var(--file_background_color) 0%, '
+'var(--highlight_color) '+ ((progress*100)) +'%, '
+'var(--file_background_color) '+ ((progress*100)+1) +'%)'
)
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) +'%)'
}
public onFinished(id: string){
finishedUploads[this.queueNum] = {
@@ -50,33 +49,38 @@ class UploadProgressBar implements FileUpload {
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)
}
public onFailure(response: JQuery.Ajax.ErrorTextStatus, error: string) {
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))
}
}
function handleUploads(files: FileList) {
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++) {
@@ -148,30 +152,29 @@ function createList(title: string, anonymous: boolean){
// Form upload handlers
// Relay click event to hidden file field
$("#select_file_button").click(function(){$("#file_input_field").click()})
document.getElementById("select_file_button").onclick = function(){
document.getElementById("file_input_field").click()
}
$("#file_input_field").change(function(evt){
document.getElementById("file_input_field").onchange = function(evt){
handleUploads((<HTMLInputElement>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");
(<HTMLFormElement>$("#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: DragEvent){
if (e.dataTransfer && e.dataTransfer.files.length > 0) {
e.preventDefault()