some usability fixes

2018-09-11 21:35:44 +02:00
parent 3f8617ee86
commit 7cc7bd6821
7 changed files with 114 additions and 56 deletions
--- a/res/static/res/img/bytecounter.png
+++ b/res/static/res/img/bytecounter.png
--- 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 = "<table>"
-			+ "<tr><td>Name<td><td>" + escapeHTML(file.file_name) + "</td></tr>"
-			+ "<tr><td>Url<td><td><a href=\"/u/" + file.id + "\">Open</a></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.file_size + "</td></tr>"
-			+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
-			+ "<tr><td>Description<td><td>" + escapeHTML(file.desc) + "</td></tr>"
-			+ "</table>";
-		$("#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(
+						"<table>"
+						+ "<tr><td>Name<td><td>" + escapeHTML(data.file_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>Id<td><td>" + data.id + "</td></tr>"
+						+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.file_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.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.file_size + "</td></tr>"
+				+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
+				+ "</table>"
+			);
+		}
 	}
 };
--- a/res/static/res/script/ListNavigator.js
+++ b/res/static/res/script/ListNavigator.js
@@ -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);
 	}
 };
--- 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");
--- a/res/template/file_viewer.html
+++ b/res/template/file_viewer.html
@@ -32,6 +32,8 @@
 		<meta property="og:image:url"   content="{{.OGData.Image}}" />
 		<meta property="article:author" content="Fornax96" />
 		<link rel="image_src"              href="{{.OGData.Image}}" />
+
+		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
 	</head>

 	<body>
@@ -122,15 +124,45 @@
 			</button>
 		</div>

-		<div id="info-popup" class="full-popup">
+		<div id="info_popup" class="full_popup">
 			<img alt="Close" src="/res/img/cross.png"
 			     style="position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; cursor: pointer;"
 			     onclick="DetailsWindow.toggle();"/>
 			Click the help button again to close this overlay.<br/>

 			<h3>File Info</h3>
-			<span id="info-fileDetails"></span>
-			<span id="info-about">{{template "file_info_popup"}}</span>
+			<span id="info_file_details"></span>
+			<span id="info_about">
+				<h3>About</h3>
+				Pixeldrain is a file sharing platform.
+				<a href="/" target="_blank">Visit the home page for more information.</a>
+
+				<h3>Keyboard Controls</h3>
+				<table>
+					<tr><td colspan="2">File Shortcuts</td></tr>
+					<tr><td>c</td><td> = Copy URL of this page</td></tr>
+					<tr><td>i</td><td> = Toggle details window (this window)</td></tr>
+					<tr><td>s</td><td> = Download the file you are currently viewing</td></tr>
+					<tr><td colspan="2">List Shortcuts</td></tr>
+					<tr><td>a or &#8592;</td><td> = View previous item in list</td></tr>
+					<tr><td>d or &#8594;</td><td> = View next item in list</td></tr>
+					<tr><td>r</td><td> = Toggle shuffle (<b><u>r</u></b>andom)</td></tr>
+					<tr><td>SHIFT + s</td><td> = Download all the files in the list as a zip archive</td></tr>
+				</table>
+
+				<h3>Credits</h3>
+				All server side code written by
+				<a target="_blank" href="https://fornaxian.com/">Fornax (me)</a>.
+				<br/>
+				<br/>
+				Code syntax highlighting is by
+				<a target="_blank" href="https://github.com/google/code-prettify">Google Code-prettify</a>.
+				<br/>
+				<br/>
+				Thanks to the Mozilla team for their wonderful PDF viewer
+				<a target="_blank" href="https://github.com/mozilla/pdf.js">pdf.js</a>.
+				<br/>
+			</span>
 		</div>

 		<div id="filepreview">
--- 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 {
--- 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)