update url on mobile too

camp/static/js/gallery.js

@@ -6,6 +6,18 @@ function isMobile() {
     return getComputedStyle(document.querySelector('.special-column')).paddingRight == '0px'
 }
 
+function isInView(el) {
+    var rect = el.getBoundingClientRect();
+    var elemTop = rect.top;
+    var elemBottom = rect.bottom;
+
+    // Only completely visible elements return true:
+    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
+    // Partially visible elements return true:
+    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
+    return isVisible;
+}
+
 function parseGalleryHash() {
     let parts = document.location.hash.slice(1).split('/')
     if (parts.lengh == 1 && isNumber(parts[0])) {
@@ -86,6 +98,29 @@ function loadInlineGallery(images, idx, main, thumbnails) {
         img.replaceWith(container)
     })
 
+    function scroll(event) {
+        let found = false
+        let index = 0
+        thumbnails.querySelectorAll('.photo').forEach(img => {
+            if (!found) {
+                if (isInView(img)) {
+                    found = true
+                    const hash = `#${idx + 1}/${index + 1}`
+                    if (document.location.hash != hash) {
+                        document.location.hash = hash
+                    }
+                }
+            }
+            index += 1
+        })
+        /*
+        // fixme this jumps don't do it
+        if (!found && document.location.hash.slice(1).length) {
+            document.location.hash = ''
+        }
+        */
+    }
+
     return {
         element: null,
         open: function(src, newIdx=-1, event=null) {
@@ -99,6 +134,7 @@ function loadInlineGallery(images, idx, main, thumbnails) {
                     img.src = img.src.replace('_display', '_thumbnail')
                 })
                 thumbnails.previousElementSibling.scrollIntoView()
+                window.removeEventListener("scroll", scroll)
             } else {
                 thumbnails.classList.add("inline");
                 thumbnails.querySelectorAll('.photo').forEach(img => {
@@ -111,6 +147,7 @@ function loadInlineGallery(images, idx, main, thumbnails) {
                         event.target.scrollIntoView()
                     }
                 }, 20)
+                window.addEventListener("scroll", scroll)
             }
         }
     }
@@ -281,5 +318,3 @@ function loadGallery(images, idx, main, thumbnails) {
     }
 }
 window.addEventListener("load", loadGalleries)
-
-