link to image in gallery

camp/static/js/gallery.js

@@ -1,4 +1,17 @@
+function parseGalleryHash() {
+    let parts = document.location.hash.slice(1).split('/')
+    if (parts[0] == 'g') {
+        return {
+            "gallery": parseInt(parts[1], 10),
+            "image": parseInt(parts[2], 10),
+        }
+    }
+    return {}
+}
+
 function loadGalleries() {
+    let current = parseGalleryHash()
+    let galleryIdx = 1
     document.querySelectorAll('.gallery').forEach(gallery => {
         var photos = [], dialog
         gallery.querySelectorAll(".photo").forEach(img => {
@@ -15,12 +28,16 @@ function loadGalleries() {
                 dialog.open(src)
             })
         })
-        dialog = loadGallery(photos)
+        dialog = loadGallery(photos, galleryIdx)
         gallery.appendChild(dialog.element)
+        if (current.gallery == galleryIdx) {
+            dialog.open(undefined, current.image)
+        }
+        galleryIdx += 1
     })
 }
 
-function loadGallery(images) {
+function loadGallery(images, idx) {
     var gallery = document.createElement("dialog")
     gallery.classList.add("gallery-dialog")
     gallery.innerHTML = `
@@ -41,6 +58,7 @@ function loadGallery(images) {
 
     gallery.addEventListener("click", event => {
         if (event.target.className == "close") {
+            document.location.hash = ''
             gallery.close();
             return
         }
@@ -48,6 +66,7 @@ function loadGallery(images) {
         var isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height &&
             rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
         if (!isInDialog) {
+            document.location.hash = ''
             gallery.close();
         }
     })
@@ -60,7 +79,7 @@ function loadGallery(images) {
     const thumbnailsContainer = gallery.querySelector(".thumbnails");
     const download = gallery.querySelector(".download");
 
-    function updateSlideshow(index) {
+    function updateGallery(index) {
         mainImage.src = images[index].src.replace('_display', '_thumbnail');
         setTimeout(() => {
             mainImage.src = images[index].src;
@@ -78,6 +97,7 @@ function loadGallery(images) {
         }
         prevBtn.disabled = index === 0;
         nextBtn.disabled = index === images.length - 1;
+        document.location.hash = `#g/${idx}/${index}`
     }
 
     function createThumbnails() {
@@ -87,13 +107,13 @@ function loadGallery(images) {
             thumb.classList.add("thumbnail");
             thumb.onclick = () => {
                 currentIndex = index;
-                updateSlideshow(index);
+                updateGallery(index);
             };
             thumbnailsContainer.appendChild(thumb);
         });
     }
 
-    function showSlideshow() {
+    function showGallery() {
         window.dialog = gallery
         gallery.showModal()
     }
@@ -101,27 +121,31 @@ function loadGallery(images) {
     prevBtn.onclick = () => {
         if (currentIndex > 0) {
             currentIndex--;
-            updateSlideshow(currentIndex);
+            updateGallery(currentIndex);
         }
     };
 
     nextBtn.onclick = () => {
         if (currentIndex < images.length - 1) {
             currentIndex++;
-            updateSlideshow(currentIndex);
+            updateGallery(currentIndex);
         }
     };
 
     createThumbnails();
-    updateSlideshow(currentIndex);
+    updateGallery(currentIndex);
 
     const imagesIndex = images.map(img => img.src);
     return {
         element: gallery,
-        open: function(src) {
-            currentIndex = imagesIndex.indexOf(src)
-            updateSlideshow(currentIndex)
-            showSlideshow()
+        open: function(src, idx=-1) {
+            if (idx != -1) {
+                currentIndex = idx
+            } else {
+                currentIndex = imagesIndex.indexOf(src)
+            }
+            updateGallery(currentIndex)
+            showGallery()
         }
     }
 }