diff --git a/res/static/res/img/bytecounter.png b/res/static/res/img/bytecounter.png index 3e1aec4..ed0dcc1 100644 Binary files a/res/static/res/img/bytecounter.png and b/res/static/res/img/bytecounter.png differ diff --git a/res/static/res/script/DetailsWindow.js b/res/static/res/script/DetailsWindow.js index 0144642..5aceaa9 100644 --- a/res/static/res/script/DetailsWindow.js +++ b/res/static/res/script/DetailsWindow.js @@ -2,25 +2,47 @@ var DetailsWindow = { visible: false, toggle: function () { if (this.visible) { - $("#info-popup").fadeOut(500); + $("#info_popup").fadeOut(500); $("#btnDetails").removeClass("button_highlight"); this.visible = false; } else { - $("#info-popup").fadeIn(500); + $("#info_popup").fadeIn(500); $("#btnDetails").addClass("button_highlight"); this.visible = true; } }, setDetails: function (file) { - var fileInfo = "" - + "" - + "" - + "" - + "" - + "" - + "" - + "" - + "
Name" + escapeHTML(file.file_name) + "
UrlOpen
Mime Type" + escapeHTML(file.mime_type) + "
Id" + file.id + "
Size" + file.file_size + "
Upload Date" + file.date_upload + "
Description" + escapeHTML(file.desc) + "
"; - $("#info-fileDetails").html(fileInfo); + 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.file_name) + "
Url/u/" + data.id + "
Mime Type" + escapeHTML(data.mime_type) + "
Id" + data.id + "
Size" + data.file_size + "
Upload Date" + data.date_upload + "
Description" + escapeHTML(file.description) + "
" + ); + } + }); + } else { + $("#info_file_details").html( + "" + + "" + + "" + + "" + + "" + + "" + + "
Name" + escapeHTML(file.file_name) + "
Mime Type" + escapeHTML(file.mime_type) + "
Id" + file.id + "
Size" + file.file_size + "
Upload Date" + file.date_upload + "
" + ); + } } -}; \ No newline at end of file +}; diff --git a/res/static/res/script/ListNavigator.js b/res/static/res/script/ListNavigator.js index fab42c2..50fd2a2 100644 --- a/res/static/res/script/ListNavigator.js +++ b/res/static/res/script/ListNavigator.js @@ -6,7 +6,7 @@ var ListNavigator = { data: [], history: [], shuffle: false, - + nextItem: function(){ if(!Viewer.isList){ return; @@ -24,7 +24,7 @@ var ListNavigator = { this.setItem(this.position); }, - + previousItem: function(){ if(!Viewer.isList){ return; @@ -38,22 +38,22 @@ var ListNavigator = { this.setItem(this.position); }, - + randItem: function(){ if(!Viewer.isList){ return; } - + // Avoid viewing the same file multiple times var rand; do { rand = Math.round(Math.random() * this.length); console.log("rand is " + rand); } while(this.inHistory(rand)); - + this.setItem(rand); }, - + setItem: function(index){ if(index >= this.length){ this.position = 0; @@ -61,10 +61,10 @@ var ListNavigator = { this.position = index; } - // Set the URL hash + // Set the URL hash location.hash = "item=" + this.position; Viewer.setFile(this.data[this.position]); - + this.addToHistory(index); $("#listNavigatorItems").find("*").css("border-color", "#333"); @@ -79,27 +79,27 @@ var ListNavigator = { queue: false } ); - + this.loadThumbnails(index); }, - + addToHistory: function(index){ if(this.history.length >= (this.length - 6)){ this.history.shift(); } - + this.history.push(index); }, - + inHistory: function(index){ var i = $.inArray(index, this.history); // Returns -1 when the item is not found - + return (i !== -1); // Return false when it's not in the array }, - + toggleShuffle: function(){ this.shuffle = !this.shuffle; // :P - + if(this.shuffle){ $("#btnShuffle > span").html(" Shuffle ☑"); // Check icon $("#btnShuffle").addClass("button_highlight"); @@ -108,40 +108,40 @@ var ListNavigator = { $("#btnShuffle").removeClass("button_highlight"); } }, - + loadThumbnails: function(index){ - var startPos = +index - 30; + var startPos = +index - 30; var endPos = +index + 30; // fyi, the + is to let javascript know it's actually a number instead of a string - + if(startPos < 0){ startPos = 0; } - + if(endPos >= this.length){ endPos = this.length - 1; } console.log(endPos); - + var navigatorItems = $("#listNavigatorItems").children().toArray(); - + for (i = startPos; i <= endPos; i++){ var thumb = "/api/file/" + this.data[i].id + "/thumbnail"; var name = this.data[i].file_name; - + var itemHtml = escapeHTML(name) + "
" + "\"""; - + navigatorItems[i].innerHTML = itemHtml; } }, - + init: function(data){ var hashPos = getHashValue("item"); this.data = data; this.length = data.length; - + $.each(data, function(i, item){ var filename; if(item.file_name !== "null"){ @@ -158,51 +158,51 @@ var ListNavigator = { + ""; $("#listNavigatorItems").append(itemHtml); - + }); - + // Skip to this file if the parameter is set if(Number.isInteger(parseInt(hashPos))){ this.setItem(hashPos); }else{ this.setItem(0); } - + // Add the list download button to the toolbar var btnDownloadList = document.createElement("button"); btnDownloadList.setAttribute("id", "btnDownloadList"); btnDownloadList.setAttribute("class", "toolbar_button button_full_width"); btnDownloadList.setAttribute("onClick", "Toolbar.downloadList();"); - + var btnDownloadListImg = document.createElement("img"); btnDownloadListImg.setAttribute("src", "/res/img/floppy_small.png"); btnDownloadListImg.setAttribute("alt", "Download List"); - + var btnDownloadListText = document.createElement("span"); btnDownloadListText.innerHTML = " All Files"; - + btnDownloadList.appendChild(btnDownloadListImg); btnDownloadList.appendChild(btnDownloadListText); $("#btnDownload").after(btnDownloadList); - + // Add the shuffle button to the toolbar var btnShuffle = document.createElement("button"); btnShuffle.setAttribute("id", "btnShuffle"); btnShuffle.setAttribute("class", "toolbar_button button_full_width"); btnShuffle.setAttribute("onClick", "ListNavigator.toggleShuffle();"); - + var btnShuffleImg = document.createElement("img"); btnShuffleImg.setAttribute("src", "/res/img/shuffle_small.png"); btnShuffleImg.setAttribute("alt", "Shuffle playback order"); - + var btnShuffleText = document.createElement("span"); btnShuffleText.innerHTML = " Shuffle ☐"; - + btnShuffle.appendChild(btnShuffleImg); btnShuffle.appendChild(btnShuffleText); - + $("#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(){ @@ -211,7 +211,7 @@ var ListNavigator = { $("#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"); + $("#info_popup").css("top", "120px"); }, 100); } }; @@ -221,4 +221,4 @@ var ListNavigator = { function getHashValue(key) { var matches = location.hash.match(new RegExp(key + '=([^&]*)')); return matches ? matches[1] : null; -} \ No newline at end of file +} diff --git a/res/static/res/style/viewer.css b/res/static/res/style/viewer.css index 71dfad2..50fdd9e 100644 --- a/res/static/res/style/viewer.css +++ b/res/static/res/style/viewer.css @@ -182,7 +182,7 @@ body{ || MISC COMPONENTS || ===================== */ -.full-popup{ +.full_popup{ position: fixed; display: none; background-color: var(--background_color); @@ -233,6 +233,7 @@ table > tbody > tr {border: none !important;} color: var(--text_color); font-size: 16px; font-family: 'Ubuntu', sans-serif; + line-height: 20px; text-align: right; display: inline-block; background-image: url("/res/img/bytecounter.png"); diff --git a/res/template/file_viewer.html b/res/template/file_viewer.html index 01ccbe6..ba5e012 100644 --- a/res/template/file_viewer.html +++ b/res/template/file_viewer.html @@ -32,6 +32,8 @@ + + @@ -122,15 +124,45 @@ -
+
Close Click the help button again to close this overlay.

File Info

- - {{template "file_info_popup"}} + + +

About

+ Pixeldrain is a file sharing platform. + Visit the home page for more information. + +

Keyboard Controls

+ + + + + + + + + + +
File Shortcuts
c = Copy URL of this page
i = Toggle details window (this window)
s = Download the file you are currently viewing
List Shortcuts
a or ← = View previous item in list
d or → = View next item in list
r = Toggle shuffle (random)
SHIFT + s = Download all the files in the list as a zip archive
+ +

Credits

+ All server side code written by + Fornax (me). +
+
+ Code syntax highlighting is by + Google Code-prettify. +
+
+ Thanks to the Mozilla team for their wonderful PDF viewer + pdf.js. +
+
diff --git a/webcontroller/fileViewer.go b/webcontroller/fileViewer.go index dbc35f6..b53ba44 100644 --- a/webcontroller/fileViewer.go +++ b/webcontroller/fileViewer.go @@ -56,6 +56,7 @@ func (wc *WebController) serveFileViewer(w http.ResponseWriter, r *http.Request, "APIResponse": listdata, "Type": "list", "OGData": ogData.FromFile(*finfo[0]), + "APIEndpoint": wc.conf.APIURLExternal, }) } else { err = wc.templates.Get().ExecuteTemplate(w, "file_viewer", map[string]interface{}{ @@ -63,6 +64,7 @@ func (wc *WebController) serveFileViewer(w http.ResponseWriter, r *http.Request, "APIResponse": finfo[0], "Type": "file", "OGData": ogData.FromFile(*finfo[0]), + "APIEndpoint": wc.conf.APIURLExternal, }) } if err != nil { diff --git a/webcontroller/listViewer.go b/webcontroller/listViewer.go index 9b2f246..456b981 100644 --- a/webcontroller/listViewer.go +++ b/webcontroller/listViewer.go @@ -35,6 +35,7 @@ func (wc *WebController) serveListViewer(w http.ResponseWriter, r *http.Request, "APIResponse": listdata, "Type": "list", "OGData": ogData.FromList(*list), + "APIEndpoint": wc.conf.APIURLExternal, }) if err != nil { log.Error("Error executing template file_viewer: %s", err)