diff --git a/res/static/script/DetailsWindow.js b/res/static/script/DetailsWindow.js deleted file mode 100644 index 85de62c..0000000 --- a/res/static/script/DetailsWindow.js +++ /dev/null @@ -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( - "" - + "" - + "" - + "" - + "" - + "" - + "" - + "" - + "
Name" + escapeHTML(data.name) + "
Url/u/" + data.id + "
Mime Type" + escapeHTML(data.mime_type) + "
IS" + data.id + "
Size" + data.size + "
Upload Date" + data.date_upload + "
Description" + escapeHTML(file.description) + "
" - ); - } - }); - } else { - $("#info_file_details").html( - "" - + "" - + "" - + "" - + "" - + "" - + "
Name" + escapeHTML(file.name) + "
Mime Type" + escapeHTML(file.mime_type) + "
ID" + file.id + "
Size" + file.size + "
Upload Date" + file.date_upload + "
" - ); - } - } -}; diff --git a/res/static/script/ListNavigator.js b/res/static/script/ListNavigator.js index e905e72..ee02360 100644 --- a/res/static/script/ListNavigator.js +++ b/res/static/script/ListNavigator.js @@ -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 = "
" + escapeHTML(filename) + "
" - // + "\""" + "
"; - - $("#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); } }; diff --git a/res/static/script/Sharebar.js b/res/static/script/Sharebar.js deleted file mode 100644 index 8dcd8b5..0000000 --- a/res/static/script/Sharebar.js +++ /dev/null @@ -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; - } - } -}; \ No newline at end of file diff --git a/res/static/script/Toolbar.js b/res/static/script/Toolbar.js index 6802ff8..ed2f71d 100644 --- a/res/static/script/Toolbar.js +++ b/res/static/script/Toolbar.js @@ -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( + "" + + "" + + "" + + "" + + "" + + "" + + "" + + "" + + "
Name" + escapeHTML(data.name) + "
Url/u/" + data.id + "
Mime Type" + escapeHTML(data.mime_type) + "
IS" + data.id + "
Size" + data.size + "
Upload Date" + data.date_upload + "
Description" + escapeHTML(file.description) + "
" + ); + } + }); + } else { + $("#info_file_details").html( + "" + + "" + + "" + + "" + + "" + + "" + + "
Name" + escapeHTML(file.name) + "
Mime Type" + escapeHTML(file.mime_type) + "
ID" + file.id + "
Size" + file.size + "
Upload Date" + file.date_upload + "
" + ); + } } }; diff --git a/res/static/script/compiled/home.js b/res/static/script/compiled/home.js index 3150e4a..7083bd6 100644 --- a/res/static/script/compiled/home.js +++ b/res/static/script/compiled/home.js @@ -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('' + this.file.name + '' - + this.file.name + '
' - + '' + window.location.hostname + '/u/' + id + ''); + 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 + '
' - + 'Upload failed after three tries!
' - + "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("
").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 diff --git a/res/static/style/layout.css b/res/static/style/layout.css index c91debd..90ee469 100644 --- a/res/static/style/layout.css +++ b/res/static/style/layout.css @@ -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; diff --git a/res/static/style/listview.css b/res/static/style/listview.css deleted file mode 100644 index 8b9e36c..0000000 --- a/res/static/style/listview.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/res/static/style/viewer.css b/res/static/style/viewer.css index 50fdd9e..af30858 100644 --- a/res/static/style/viewer.css +++ b/res/static/style/viewer.css @@ -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; +} diff --git a/res/static/typescript/home/home.ts b/res/static/typescript/home/home.ts index 41272d5..57c6dab 100644 --- a/res/static/typescript/home/home.ts +++ b/res/static/typescript/home/home.ts @@ -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 = new Array() var totalUploads: number = 0 +var queueDiv = document.getElementById("uploads_queue") class UploadProgressBar implements FileUpload { - private uploadDiv: HTMLAnchorElement - private uploadDivJQ: JQuery - 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( - ''+this.file.name+'' - + this.file.name+'
' - + ''+window.location.hostname+'/u/'+id+'' - ) + 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+'
' - + 'Upload failed after three tries!
' - + "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((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("").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() diff --git a/res/template/file_viewer.html b/res/template/file_viewer.html index 7818d88..3a6b162 100644 --- a/res/template/file_viewer.html +++ b/res/template/file_viewer.html @@ -6,9 +6,8 @@ {{template "user_style" .}} - - - + + @@ -78,9 +77,8 @@ scrolling='no' allowtransparency='true' seamless="seamless"> - - + + @@ -170,8 +168,6 @@ - - diff --git a/res/template/home.html b/res/template/home.html index aafb4f2..8b3ac04 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -5,6 +5,16 @@ {{template "meta_tags" "Free file sharing service"}} {{template "user_style" .}} + @@ -19,7 +29,7 @@ By uploading files to Pixeldrain you accept that a cookie will be placed in your web browser. More information below. -
+