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); console.log(endPos);
var navigatorItems = $("#listNavigatorItems").children().toArray(); var navigatorItems = document.getElementById("listNavigatorItems").children
for (i = startPos; i <= endPos; i++){ for (i = startPos; i <= endPos; i++){
var thumb = "/api/file/" + this.data[i].id + "/thumbnail"; var thumb = "/api/file/" + this.data[i].id + "/thumbnail";
@@ -142,7 +142,8 @@ var ListNavigator = {
this.data = data; this.data = data;
this.length = data.length; this.length = data.length;
$.each(data, function(i, item){ var listHTML = "";
data.forEach(function(item, i){
var filename; var filename;
if(item.name !== "null"){ if(item.name !== "null"){
filename = item.name; filename = item.name;
@@ -150,16 +151,12 @@ var ListNavigator = {
filename = "Removed File"; filename = "Removed File";
} }
var itemHtml = "<div class=\"listItem\" " listHTML += "<div class=\"listItem\" "
+ "onClick=\"ListNavigator.setItem('" + i + "')\">" + "onClick=\"ListNavigator.setItem('" + i + "')\">"
+ escapeHTML(filename) + "<br>" + escapeHTML(filename) + "<br>"
// + "<img src=\"/api/thumbnail/" + item.id + "\" " // Lazy Loading
// + "class=\"listItemThumbnail lazy\" alt=\"" + filename + "\"/>"
+ "</div>"; + "</div>";
$("#listNavigatorItems").append(itemHtml);
}); });
document.getElementById("listNavigatorItems").innerHTML = listHTML;
// Skip to this file if the parameter is set // Skip to this file if the parameter is set
if(Number.isInteger(parseInt(hashPos))){ if(Number.isInteger(parseInt(hashPos))){
@@ -183,7 +180,7 @@ var ListNavigator = {
btnDownloadList.appendChild(btnDownloadListImg); btnDownloadList.appendChild(btnDownloadListImg);
btnDownloadList.appendChild(btnDownloadListText); btnDownloadList.appendChild(btnDownloadListText);
$("#btnDownload").after(btnDownloadList); document.getElementById("btnDownload").after(btnDownloadList);
// Add the shuffle button to the toolbar // Add the shuffle button to the toolbar
var btnShuffle = document.createElement("button"); var btnShuffle = document.createElement("button");
@@ -200,19 +197,25 @@ var ListNavigator = {
btnShuffle.appendChild(btnShuffleImg); btnShuffle.appendChild(btnShuffleImg);
btnShuffle.appendChild(btnShuffleText); btnShuffle.appendChild(btnShuffleText);
document.getElementById("btnShare").after(btnShuffle);
$("#btnShare").after(btnShuffle);
// We need to adjust the height of some elements to make the navigation bar fit // We need to adjust the height of some elements to make the navigation bar fit
var navHeight = $("#listNavigator").height() + 2; var navHeight = $("#listNavigator").height() + 2;
window.setTimeout(function(){ window.setTimeout(function(){
$("#listNavigator").animate( {top: 0}, {"duration": 1500, "queue": false}); document.getElementById("listNavigator").style.top = "0px";
$("#filepreview").animate( {top: navHeight},{"duration": 1500, "queue": false}); document.getElementById("filepreview").style.top = navHeight+"px";
$("#toolbar").animate( {top: navHeight},{"duration": 1500, "queue": false}); document.getElementById("toolbar").style.top = navHeight+"px";
$("#button-expand-toolbar").animate({top: navHeight},{"duration": 1500, "queue": false}); document.getElementById("button-expand-toolbar").style.top = navHeight+"px";
$("#sharebar").animate( {top: navHeight},{"duration": 1500, "queue": false}); document.getElementById("sharebar").style.top = navHeight+"px";
$("#info_popup").css("top", "120px"); document.getElementById("info_popup").style.top = (navHeight+20)+"px";
}, 100); // $("#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 * Made by Fornax
*/ */
/* global Sharebar, Viewer */ /* global Viewer */
var Toolbar = { var Toolbar = {
visible: true, visible: true,
@@ -16,47 +16,34 @@ var Toolbar = {
Sharebar.toggle(); Sharebar.toggle();
} }
$("#toolbar").animate( {left: "-132"}, 400); document.getElementById("toolbar").style.left = "-132px";
$("#filepreview").animate({left: "0"}, 400); document.getElementById("filepreview").style.left = "0px";
$("#info_popup").animate( {left: "20"}, 400); document.getElementById("info_popup").style.left = "20px";
$("#button-expand-toolbar").css("visibility", "visible");
this.visible = false; this.visible = false;
} else { } else {
$("#toolbar").animate( {left: "0"}, 400); document.getElementById("toolbar").style.left = "0px";
$("#filepreview").animate({left: "122"}, 400); document.getElementById("filepreview").style.left = "122px";
$("#info_popup").animate( {left: "142"}, 400); document.getElementById("info_popup").style.left = "142px";
setTimeout(function(){
if(this.visible){
$("#button-expand-toolbar").css("visibility", "hidden");
}
}, 1000)
this.visible = true; this.visible = true;
} }
}, },
download: function () { download: function () {
$("#frmDownload").attr("src", "/api/file/" + Viewer.currentFile + "?download"); document.getElementById("download_frame").src = "/api/file/" + Viewer.currentFile + "?download";
}, },
downloadList: function(){ downloadList: function(){
if(!Viewer.isList){ if(!Viewer.isList){
return; return;
} }
document.getElementById("download_frame").src = "/api/list/" + Viewer.listId + "/zip";
$("#frmDownload").attr("src", "/api/list/" + Viewer.listId + "/zip");
}, },
copyUrl: function () { copyUrl: function () {
$("#copy-text").val(window.location.href); if(copyText(window.location.href)) {
$("#copy-text").select();
try {
var success = document.execCommand('copy');
console.log('Text copied'); console.log('Text copied');
$("#btnCopy>span").text("Copied!"); $("#btnCopy>span").text("Copied!");
$("#btnCopy").addClass("button_highlight"); document.getElementById("btnCopy").classList.add("button_highlight")
} catch (err) { } else {
console.log('Copying not supported'); console.log('Copying not supported');
$("#btnCopy>span").text("Error!"); $("#btnCopy>span").text("Error!");
alert("Your browser does not support copying text."); alert("Your browser does not support copying text.");
@@ -65,10 +52,99 @@ var Toolbar = {
// Return to normal // Return to normal
setTimeout(function(){ setTimeout(function(){
$("#btnCopy>span").text("Copy"); $("#btnCopy>span").text("Copy");
$("#btnCopy").removeClass("button_highlight"); document.getElementById("btnCopy").classList.remove("button_highlight")
}, 60000); }, 60000);
}, },
setViews: function(amount){ 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 uploader = null;
var finishedUploads = new Array(); var finishedUploads = new Array();
var totalUploads = 0; var totalUploads = 0;
var queueDiv = document.getElementById("uploads_queue");
var UploadProgressBar = /** @class */ (function () { var UploadProgressBar = /** @class */ (function () {
function UploadProgressBar(file) { function UploadProgressBar(file) {
this.file = file; this.file = file;
this.name = file.name; this.name = file.name;
this.queueNum = totalUploads; this.queueNum = totalUploads;
totalUploads++;
this.uploadDiv = document.createElement("a"); 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.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);
} }
UploadProgressBar.prototype.onProgress = function (progress) { UploadProgressBar.prototype.onProgress = function (progress) {
this.uploadDiv.innerText = "Uploading... " + Math.round(progress * 1000) / 10 + "%\n" + this.file.name; 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, ' + 'to right, '
+ 'var(--file_background_color) 0%, ' + 'var(--file_background_color) 0%, '
+ 'var(--highlight_color) ' + ((progress * 100)) + '%, ' + 'var(--highlight_color) ' + ((progress * 100)) + '%, '
+ 'var(--file_background_color) ' + ((progress * 100) + 1) + '%)'); + 'var(--file_background_color) ' + ((progress * 100) + 1) + '%)';
}; };
UploadProgressBar.prototype.onFinished = function (id) { UploadProgressBar.prototype.onFinished = function (id) {
finishedUploads[this.queueNum] = { finishedUploads[this.queueNum] = {
id: id, id: id,
name: this.file.name name: this.file.name
}; };
this.uploadDiv.setAttribute('style', 'background: var(--file_background_color)'); this.uploadDiv.style.background = 'var(--file_background_color)';
this.uploadDiv.setAttribute('href', '/u/' + id); this.uploadDiv.href = '/u/' + id;
this.uploadDiv.setAttribute("target", "_blank"); this.uploadDiv.target = "_blank";
this.uploadDivJQ.html('<img src="' + apiEndpoint + '/file/' + id + '/thumbnail" alt="' + this.file.name + '"/>' var fileImg = document.createElement("img");
+ this.file.name + '<br/>' fileImg.src = apiEndpoint + '/file/' + id + '/thumbnail';
+ '<span style="color: var(--highlight_color);">' + window.location.hostname + '/u/' + id + '</span>'); 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) { UploadProgressBar.prototype.onFailure = function (response, error) {
this.uploadDiv.setAttribute('style', 'background: var(--danger_color)'); this.uploadDiv.style.background = 'var(--danger_color)';
this.uploadDivJQ.html(this.file.name + '<br/>' this.uploadDiv.appendChild(document.createTextNode(this.file.name));
+ 'Upload failed after three tries!<br/>' this.uploadDiv.appendChild(document.createElement("br"));
+ "Message: " + error); this.uploadDiv.appendChild(document.createTextNode("Upload failed after three tries:"));
this.uploadDiv.appendChild(document.createElement("br"));
this.uploadDiv.appendChild(document.createTextNode(error));
}; };
return UploadProgressBar; return UploadProgressBar;
}()); }());
function handleUploads(files) { function handleUploads(files) {
if (uploader === null) { if (uploader === null) {
uploader = new UploadManager(); uploader = new UploadManager();
$("#uploads_queue").animate({ "height": "340px" }, { "duration": 2000, queue: false }); queueDiv.style.height = "340px";
} }
for (var i = 0; i < files.length; i++) { for (var i = 0; i < files.length; i++) {
uploader.uploadFile(new UploadProgressBar(files.item(i))); uploader.uploadFile(new UploadProgressBar(files.item(i)));
@@ -110,27 +126,25 @@ function createList(title, anonymous) {
} }
// Form upload handlers // Form upload handlers
// Relay click event to hidden file field // Relay click event to hidden file field
$("#select_file_button").click(function () { $("#file_input_field").click(); }); document.getElementById("select_file_button").onclick = function () {
$("#file_input_field").change(function (evt) { document.getElementById("file_input_field").click();
};
document.getElementById("file_input_field").onchange = function (evt) {
handleUploads(evt.target.files); handleUploads(evt.target.files);
// This resets the file input field // This resets the file input field
// http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery document.getElementById("file_input_field").nodeValue = "";
$('#file_name').html(""); };
$("#file_upload_button").css("visibility", "hidden");
$("#file_input_field").wrap("<form>").closest("form").get(0).reset();
$("#file_input_field").unwrap();
});
/* /*
* Drag 'n Drop upload handlers * Drag 'n Drop upload handlers
*/ */
$(document).on('dragover', function (e) { document.ondragover = function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}); };
$(document).on('dragenter', function (e) { document.ondragenter = function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}); };
document.addEventListener('drop', function (e) { document.addEventListener('drop', function (e) {
if (e.dataTransfer && e.dataTransfer.files.length > 0) { if (e.dataTransfer && e.dataTransfer.files.length > 0) {
e.preventDefault(); e.preventDefault();
@@ -300,7 +314,7 @@ var UploadWorker = /** @class */ (function () {
}; };
UploadWorker.prototype.newFile = function () { UploadWorker.prototype.newFile = function () {
var file = this.manager.grabFile(); var file = this.manager.grabFile();
if (file === undefined) { // No more files in the queue. We're finished if (file === undefined) {
this.uploading = false; this.uploading = false;
console.debug("No files left in queue"); console.debug("No files left in queue");
return; // Stop the thread return; // Stop the thread

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

@@ -57,7 +57,6 @@ html{height: 100%;}
body{ body{
background-color: var(--background_color); background-color: var(--background_color);
background-repeat: repeat; background-repeat: repeat;
font-size: 16px;
font-family: 'Ubuntu'; font-family: 'Ubuntu';
margin: 0; margin: 0;
text-align: center; /* Center the header and body */ text-align: center; /* Center the header and body */
@@ -103,7 +102,7 @@ body{
text-decoration: none; text-decoration: none;
font-family: "Lato Thin", sans-serif; font-family: "Lato Thin", sans-serif;
font-weight: bold; font-weight: bold;
font-size: 26px; font-size: 1.8em;
transition: box-shadow 0.5s; transition: box-shadow 0.5s;
} }
.navigation a:hover { .navigation a:hover {
@@ -214,13 +213,13 @@ pre{
} }
.big_button{ .big_button{
height: 40px; height: 1.3em;
width: 40%; width: 40%;
min-width: 200px; min-width: 200px;
max-width: 400px; max-width: 400px;
margin: 10px !important; margin: 10px !important;
border-radius: 10px; border-radius: 10px;
font-size: 30px; font-size: 1.9em;
font-weight: normal; font-weight: normal;
line-height: 8px; line-height: 8px;
} }
@@ -252,14 +251,6 @@ pre{
white-space: nowrap; white-space: nowrap;
} }
.uploads_queue{
position: relative;
width: 100%;
height: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.file_button{ .file_button{
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@@ -276,7 +267,7 @@ pre{
text-align: left; text-align: left;
line-height: 120%; line-height: 120%;
display: inline-block; display: inline-block;
transition: box-shadow 0.3s; transition: box-shadow 0.3s, opacity 2s;
} }
.file_button:hover{ .file_button:hover{
box-shadow: 0px 0px 10px 3px var(--highlight_color), inset 0px 0px 6px 1px var(--highlight_color); 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, input[type="color"]:active,
select:active{ select:active{
background: linear-gradient(var(--input_color_dark), var(--input_color)); 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 */ 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);} .button_full_width {width: calc(100% - 4px);}
@@ -371,8 +362,8 @@ input[type="number"]{
padding: 3px 5px; padding: 3px 5px;
color: var(--input_text_color); color: var(--input_text_color);
height: 26px; height: 26px;
font-size: 18px;
font-family: 'Ubuntu', sans-serif; font-family: 'Ubuntu', sans-serif;
font-size: 1em;
vertical-align: bottom; vertical-align: bottom;
outline: 0; outline: 0;
transition: box-shadow 0.3s; 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; min-width: 100px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
transition: left 1s, top 1.5s;
} }
/* ===================== /* =====================
@@ -107,6 +108,7 @@ body{
text-align: left; text-align: left;
border-right: 2px ridge var(--highlight_color); border-right: 2px ridge var(--highlight_color);
box-shadow: 2px 2px 8px var(--shadow_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' */ /* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
@@ -129,7 +131,6 @@ body{
#button-expand-toolbar{ #button-expand-toolbar{
position: absolute; position: absolute;
visibility: hidden;
left: 0; left: 0;
top: 0; top: 0;
cursor: pointer; cursor: pointer;
@@ -175,6 +176,7 @@ body{
border-right: 2px ridge var(--highlight_color); border-right: 2px ridge var(--highlight_color);
z-index: 50; z-index: 50;
overflow: hidden; overflow: hidden;
transition: left 1s, top 1.5s;
} }
.sharebar-button {text-align: center;} .sharebar-button {text-align: center;}
@@ -184,7 +186,9 @@ body{
.full_popup{ .full_popup{
position: fixed; position: fixed;
display: none; visibility: hidden;
opacity: 0;
transition: visibility 1s, opacity 1s, left 1s;
background-color: var(--background_color); background-color: var(--background_color);
left: 142px; left: 142px;
right: 20px; right: 20px;
@@ -215,20 +219,6 @@ table > tbody > tr {border: none !important;}
z-index: 200; z-index: 200;
} }
#frmDownload{
display: none;
width: 1px;
height: 0px;
position: relative;
}
#copy-text{
left: -100px;
width: 0px;
height: 0px;
position: fixed;
}
.bytecounter{ .bytecounter{
color: var(--text_color); color: var(--text_color);
font-size: 16px; font-size: 16px;
@@ -237,10 +227,100 @@ table > tbody > tr {border: none !important;}
text-align: right; text-align: right;
display: inline-block; display: inline-block;
background-image: url("/res/img/bytecounter.png"); background-image: url("/res/img/bytecounter.png");
/*background-attachment: fixed;*/
background-position: top right; background-position: top right;
width: 108px; width: 108px;
height: 36px; height: 36px;
padding: 0; padding: 0;
padding-right: 1px; 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 { class FinishedUpload {
public id: string; public id: string
public name: string; public name: string
} }
var uploader: UploadManager|null = null; var uploader: UploadManager|null = null
var finishedUploads: Array<FinishedUpload> = new Array() var finishedUploads: Array<FinishedUpload> = new Array()
var totalUploads: number = 0 var totalUploads: number = 0
var queueDiv = document.getElementById("uploads_queue")
class UploadProgressBar implements FileUpload { class UploadProgressBar implements FileUpload {
private uploadDiv: HTMLAnchorElement public file: File
private uploadDivJQ: JQuery<HTMLElement> public name: string
private queueNum: number private queueNum: number
private uploadDiv: HTMLAnchorElement
constructor(file: File){ constructor(file: File){
this.file = file this.file = file
this.name = file.name this.name = file.name
this.queueNum = totalUploads this.queueNum = totalUploads
this.uploadDiv = document.createElement("a")
totalUploads++ totalUploads++
this.uploadDiv = document.createElement("a") this.uploadDiv.classList.add("file_button")
this.uploadDiv.setAttribute("class", "file_button") this.uploadDiv.style.opacity = "0";
this.uploadDiv.innerText = "Queued\n" + this.file.name this.uploadDiv.innerText = "Queued\n" + this.file.name
this.uploadDivJQ = $(this.uploadDiv) queueDiv.appendChild(this.uploadDiv)
$("#uploads_queue").append( // Browsers don't render the transition if the opacity is set and
this.uploadDivJQ.hide().fadeIn('slow').css("display", "") // 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){ public onProgress(progress: number){
this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.file.name this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.file.name
this.uploadDiv.setAttribute( this.uploadDiv.style.background = 'linear-gradient('
'style', +'to right, '
'background: linear-gradient(' +'var(--file_background_color) 0%, '
+'to right, ' +'var(--highlight_color) '+ ((progress*100)) +'%, '
+'var(--file_background_color) 0%, ' +'var(--file_background_color) '+ ((progress*100)+1) +'%)'
+'var(--highlight_color) '+ ((progress*100)) +'%, '
+'var(--file_background_color) '+ ((progress*100)+1) +'%)'
)
} }
public onFinished(id: string){ public onFinished(id: string){
finishedUploads[this.queueNum] = { finishedUploads[this.queueNum] = {
@@ -50,33 +49,38 @@ class UploadProgressBar implements FileUpload {
name: this.file.name name: this.file.name
}; };
this.uploadDiv.setAttribute('style', 'background: var(--file_background_color)') this.uploadDiv.style.background = 'var(--file_background_color)'
this.uploadDiv.setAttribute('href', '/u/'+id) this.uploadDiv.href = '/u/'+id
this.uploadDiv.setAttribute("target", "_blank"); this.uploadDiv.target= "_blank"
this.uploadDivJQ.html(
'<img src="'+apiEndpoint+'/file/'+id+'/thumbnail" alt="'+this.file.name+'"/>' var fileImg = document.createElement("img")
+ this.file.name+'<br/>' fileImg.src = apiEndpoint+'/file/'+id+'/thumbnail'
+ '<span style="color: var(--highlight_color);">'+window.location.hostname+'/u/'+id+'</span>' 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) { public onFailure(response: JQuery.Ajax.ErrorTextStatus, error: string) {
this.uploadDiv.setAttribute('style', 'background: var(--danger_color)') this.uploadDiv.style.background = 'var(--danger_color)'
this.uploadDivJQ.html( this.uploadDiv.appendChild(document.createTextNode(this.file.name))
this.file.name+'<br/>' this.uploadDiv.appendChild(document.createElement("br"))
+ 'Upload failed after three tries!<br/>' this.uploadDiv.appendChild(document.createTextNode("Upload failed after three tries:"))
+ "Message: " + error this.uploadDiv.appendChild(document.createElement("br"))
) this.uploadDiv.appendChild(document.createTextNode(error))
} }
} }
function handleUploads(files: FileList) { function handleUploads(files: FileList) {
if (uploader === null){ if (uploader === null){
uploader = new UploadManager() uploader = new UploadManager()
queueDiv.style.height = "340px"
$("#uploads_queue").animate(
{"height": "340px"},
{"duration": 2000, queue: false}
);
} }
for (var i = 0; i < files.length; i++) { for (var i = 0; i < files.length; i++) {
@@ -148,30 +152,29 @@ function createList(title: string, anonymous: boolean){
// Form upload handlers // Form upload handlers
// Relay click event to hidden file field // 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) handleUploads((<HTMLInputElement>evt.target).files)
// This resets the file input field // This resets the file input field
// http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery document.getElementById("file_input_field").nodeValue = ""
$('#file_name').html("") }
$("#file_upload_button").css("visibility", "hidden");
(<HTMLFormElement>$("#file_input_field").wrap("<form>").closest("form").get(0)).reset()
$("#file_input_field").unwrap()
})
/* /*
* Drag 'n Drop upload handlers * Drag 'n Drop upload handlers
*/ */
$(document).on('dragover', function (e) { document.ondragover = function (e) {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
}) }
$(document).on('dragenter', function (e) { document.ondragenter = function (e) {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
}) }
document.addEventListener('drop', function(e: DragEvent){ document.addEventListener('drop', function(e: DragEvent){
if (e.dataTransfer && e.dataTransfer.files.length > 0) { if (e.dataTransfer && e.dataTransfer.files.length > 0) {
e.preventDefault() e.preventDefault()

12
res/template/file_viewer.html
View File

@@ -6,9 +6,8 @@
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
{{template "user_style" .}} {{template "user_style" .}}
<link rel="stylesheet" href="/res/style/viewer.css"/> <link rel="stylesheet" href="/res/style/viewer.css?v1"/>
<link rel="stylesheet" href="/res/style/layout.css"/> <link rel="stylesheet" href="/res/style/layout.css?v1"/>
<link rel="stylesheet" href="/res/style/listview.css"/>
<link rel="shortcut icon" href="/res/img/tray32.png"/> <link rel="shortcut icon" href="/res/img/tray32.png"/>
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/> <link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/> <link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
@@ -78,9 +77,8 @@
scrolling='no' allowtransparency='true' seamless="seamless"> scrolling='no' allowtransparency='true' seamless="seamless">
</iframe> </iframe>
<iframe id="frmDownload"> <!-- This frame will load the download URL when a download button is pressed -->
</iframe> <iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
<textarea id="copy-text"></textarea>
</div> </div>
</div> </div>
</div> </div>
@@ -170,8 +168,6 @@
<script src="/res/script/jquery.js"></script> <script src="/res/script/jquery.js"></script>
<script src="/res/script/Keyboard.js"></script> <script src="/res/script/Keyboard.js"></script>
<script src="/res/script/Toolbar.js"></script> <script src="/res/script/Toolbar.js"></script>
<script src="/res/script/Sharebar.js"></script>
<script src="/res/script/DetailsWindow.js"></script>
<script src="/res/script/Viewer.js"></script> <script src="/res/script/Viewer.js"></script>
<script src="/res/script/ListNavigator.js"></script> <script src="/res/script/ListNavigator.js"></script>

12
res/template/home.html
View File

@@ -5,6 +5,16 @@
{{template "meta_tags" "Free file sharing service"}} {{template "meta_tags" "Free file sharing service"}}
{{template "user_style" .}} {{template "user_style" .}}
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script> <script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
<style>
#uploads_queue{
position: relative;
width: 100%;
height: 0;
overflow-x: hidden;
overflow-y: scroll;
transition: height 2s;
}
</style>
</head> </head>
<body> <body>
@@ -19,7 +29,7 @@
By uploading files to Pixeldrain you accept that a cookie will By uploading files to Pixeldrain you accept that a cookie will
be placed in your web browser. More information below. be placed in your web browser. More information below.
<div id="uploads_queue" class="uploads_queue"></div> <div id="uploads_queue"></div>
</div> </div>
<div class="highlight_dark border_bottom"> <div class="highlight_dark border_bottom">
<button id="btn_create_list">Create list with uploaded files</button> <button id="btn_create_list">Create list with uploaded files</button>