Add preloading to javascript, comments, update CSS/JS

4 years ago · 5410642aca
parent 125b4dc4da
commit 5410642aca
3 changed files with 41 additions and 9 deletions
--- a/web/fastgallery.css
+++ b/web/fastgallery.css
@ -1,6 +1,6 @@
 #modalPicture {
-    max-width: 40%;
-    max-height: 20%;
+    max-width: 90%;
+    max-height: 80%;
 }

 .modalControl:hover,
--- a/web/fastgallery.js
+++ b/web/fastgallery.js
@ -3,7 +3,10 @@ if (typeof pictures == 'undefined') {
    throw new Error("pictures array not defined")
 }

-// global variable maintains currently shown picture
+// Hard-coded configuration
+const videoExtension = "mp4"
+
+// global variable maintains currently shown picture number (pictures[] array)
 var currentPicture

 // create hover effect shadow for all box elements
@ -48,14 +51,31 @@ const displayModal = (display) => {
 // TODO add arrow key navigation support

 // modal previous and next picture button logic
+const preload = (number) => {
+    var preloadLink = document.createElement("link")
+    preloadLink.rel = "prefetch"
+    preloadLink.href = pictures[number].fullsize
+    const fileExtension = preloadLink.href.split("\.").pop()
+    if (fileExtension == videoExtension) {
+        preloadLink.as = "video"
+    } else {
+        preloadLink.as = "image"
+    }
+    document.head.appendChild(preloadLink)
+}
 const prevPicture = () => {
+    changePicture(getPrevPicture())
+    preload(getPrevPicture())
+}
+
+const getPrevPicture = () => {
    if (!isNaN(currentPicture)) {
        if (currentPicture === 0) {
-            changePicture(pictures.length - 1)
+            return (pictures.length - 1)
        } else if (currentPicture < 0 || currentPicture >= pictures.length) {
            console.error("Invalid currentPicture, 0.." + pictures.length - 1 + ": " + currentPicture)
        } else {
-            changePicture(currentPicture - 1)
+            return (currentPicture - 1)
        }
    } else {
        console.error("Invalid currentPicture, NaN: " + currentPicture)
@ -63,13 +83,18 @@ const prevPicture = () => {
 }

 const nextPicture = () => {
+    changePicture(getNextPicture())
+    preload(getNextPicture())
+}
+
+const getNextPicture = () => {
    if (!isNaN(currentPicture)) {
        if (currentPicture === pictures.length - 1) {
-            changePicture(0)
+            return (0)
        } else if (currentPicture < 0 || currentPicture >= pictures.length) {
            console.error("Invalid currentPicture, 0.." + pictures.length - 1 + ": " + currentPicture)
        } else {
-            changePicture(currentPicture + 1)
+            return (currentPicture + 1)
        }
    } else {
        console.error("Invalid currentPicture, NaN: " + currentPicture)
@ -82,9 +107,9 @@ const changePicture = (number) => {
    window.location.hash = thumbnailFilename.substring(thumbnailFilename.indexOf("/") + 1)
    document.getElementById("modalPicture").src = pictures[number].fullsize
    document.getElementById("modalPicture").alt = pictures[number].fullsize.substring(pictures[number].fullsize.indexOf("/") + 1)
-    currentPicture = number
    document.getElementById("modalDescription").innerHTML = pictures[number].fullsize.substring(pictures[number].fullsize.indexOf("/") + 1)
    document.getElementById("modalDownload").href = pictures[number].original
+    currentPicture = number
 }

 // if URL links directly to thumbnail via hash link, open modal for that pic on page load
--- a/web/template.html
+++ b/web/template.html
@ -12,6 +12,7 @@
 <body class="bg-gray">
    <h1>%%TITLE%%</h1>

+    <!-- Thumbnail view. First subfolders, then media. -->
    <div class="container-xl">
        <div class="col-2 d-inline-block box border border-gray box-shadow m-3 p-0">
            <a href="temp2">
@ -69,10 +70,15 @@
        </div>
    </div>

+    <!-- Modal which shows individual pictures full-screen.
+         Covers thumbnail view. Hidden by default, unless URL contains
+         hashtag and thumbnail name. -->
+    <!-- TODO stick header and footer to top and bottom of screen, picture to fit in between
+         make header and footer look better -->
    <div class="position-fixed top-0 left-0 width-full height-full d-flex flex-column flex-justify-center flex-items-center box border border-gray box-shadow p-0 bg-gray" id="modal" hidden>
        <div>
            <div class="modalControl d-inline-block">
-                <a href="#" id="modalDownload">
+                <a href="#" id="modalDownload" download>
                    <svg width="100" height="100">
                        <polygon points="10,10 20,20 50,40 75,85 85,25 60,50 85,75 75,85 50,60 25,85 15,75 40,50"
                            style="fill:gray;" />
@ -102,6 +108,7 @@
        </div>
    </div>

+    <!-- Statically generated javascript array of pictures on this page -->
    <script>
        const pictures = [{
            thumbnail: "_thumbnails/2018-03-31 16.48.28.jpg",