refactor(gallery): rewrite gallery (#79)

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/70

assets/ts/gallery.ts

@@ -1,287 +1,132 @@
-import { loadScript, loadStyle } from './utils';
+declare global {
-
+    interface Window {
-/**
+        PhotoSwipe: any;
- * Init PhotoSwipe
+        PhotoSwipeUI_Default: any
- * From: https://photoswipe.com/documentation/getting-started.html
+    }
- * @param gallerySelector 
- */
-var initPhotoSwipeFromDOM = function (gallerySelector) {
-
-    // parse slide data (url, title, size ...) from DOM elements 
-    // (children of gallerySelector)
-    var parseThumbnailElements = function (el) {
-        var thumbElements = el.childNodes,
-            numNodes = thumbElements.length,
-            items = [],
-            figureEl,
-            linkEl,
-            size,
-            item;
-
-        for (var i = 0; i < numNodes; i++) {
-
-            figureEl = thumbElements[i]; // <figure> element
-
-            // include only element nodes 
-            if (figureEl.nodeType !== 1) {
-                continue;
 }
 
-            linkEl = figureEl.children[0]; // <a> element
+interface PhotoSwipeItem {
-
+    w: number;
-            size = linkEl.getAttribute('data-size').split('x');
+    h: number;
-
+    src: string;
-            // create slide object
+    msrc: string;
-            item = {
+    title?: string;
-                src: linkEl.getAttribute('href'),
+    el: HTMLElement;
-                w: parseInt(size[0], 10),
-                h: parseInt(size[1], 10)
-            };
-
-
-
-            if (figureEl.children.length > 1) {
-                // <figcaption> content
-                item.title = figureEl.children[1].innerHTML;
 }
 
-            if (linkEl.children.length > 0) {
+class StackGallery {
-                // <img> thumbnail element, retrieving thumbnail url
+    private galleryUID: number;
-                item.msrc = linkEl.children[0].getAttribute('src');
+    private items: PhotoSwipeItem[] = [];
-            }
 
-            item.el = figureEl; // save link to element for getThumbBoundsFn
+    constructor(container: HTMLElement, galleryUID = 1) {
-            items.push(item);
+        if (window.PhotoSwipe == undefined || window.PhotoSwipeUI_Default == undefined) {
-        }
+            console.error("PhotoSwipe lib not loaded.");
-
-        return items;
-    };
-
-    // find nearest parent element
-    var closest = function closest(el, fn) {
-        return el && (fn(el) ? el : closest(el.parentNode, fn));
-    };
-
-    // triggers when user clicks on thumbnail
-    var onThumbnailsClick = function (e) {
-        e = e || window.event;
-        e.preventDefault ? e.preventDefault() : e.returnValue = false;
-
-        var eTarget = e.target || e.srcElement;
-
-        // find root element of slide
-        var clickedListItem = closest(eTarget, function (el) {
-            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
-        });
-
-        if (!clickedListItem) {
             return;
         }
 
-        // find index of clicked item by looping through all child nodes
+        this.galleryUID = galleryUID;
-        // alternatively, you may define index via data- attribute
-        var clickedGallery = clickedListItem.parentNode,
-            childNodes = clickedListItem.parentNode.childNodes,
-            numChildNodes = childNodes.length,
-            nodeIndex = 0,
-            index;
 
-        for (var i = 0; i < numChildNodes; i++) {
+        StackGallery.createGallery(container);
-            if (childNodes[i].nodeType !== 1) {
+        this.loadItems(container);
-                continue;
+        this.bindClick();
     }
 
-            if (childNodes[i] === clickedListItem) {
+    private loadItems(container: HTMLElement) {
-                index = nodeIndex;
+        this.items = [];
-                break;
+
-            }
+        const figures = container.querySelectorAll('figure');
-            nodeIndex++;
+
+        for (const el of figures) {
+            const figcaption = el.querySelector('figcaption'),
+                img = el.querySelector('img');
+
+            let aux: PhotoSwipeItem = {
+                w: parseInt(img.getAttribute('width')),
+                h: parseInt(img.getAttribute('height')),
+                src: img.src,
+                msrc: img.getAttribute('data-thumb') || img.src,
+                el: el
             }
 
-        if (index >= 0) {
+            if (figcaption) {
-            // open PhotoSwipe if valid index found
+                aux.title = figcaption.innerHTML;
-            openPhotoSwipe(index, clickedGallery);
-        }
-        return false;
-    };
-
-    // parse picture index and gallery index from URL (#&pid=1&gid=2)
-    var photoswipeParseHash = function () {
-        var hash = window.location.hash.substring(1),
-            params = {};
-
-        if (hash.length < 5) {
-            return params;
             }
 
-        var vars = hash.split('&');
+            this.items.push(aux);
-        for (var i = 0; i < vars.length; i++) {
-            if (!vars[i]) {
-                continue;
         }
-            var pair = vars[i].split('=');
-            if (pair.length < 2) {
-                continue;
-            }
-            params[pair[0]] = pair[1];
     }
 
-        if (params.gid) {
+    public static createGallery(container: HTMLElement) {
-            params.gid = parseInt(params.gid, 10);
+        const figuresEl = container.querySelectorAll('figure');
+
+        let currentGallery = [];
+
+        for (const figure of figuresEl) {
+            if (!currentGallery.length) {
+                /// First iteration
+                currentGallery = [figure];
+            }
+            else if (figure.previousElementSibling === currentGallery[currentGallery.length - 1]) {
+                /// Adjacent figures
+                currentGallery.push(figure);
+            }
+            else if (currentGallery.length) {
+                /// End gallery
+                StackGallery.wrap(currentGallery);
+                currentGallery = [figure];
+            }
         }
 
-        return params;
+        if (currentGallery.length > 0) {
-    };
+            StackGallery.wrap(currentGallery);
+        }
+    }
 
-    var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
+    /**
-        var pswpElement = document.querySelectorAll('.pswp')[0],
+     * Wrap adjacent figure tags with div.gallery
-            gallery,
+     * @param figures 
-            options,
+     */
-            items;
+    public static wrap(figures: HTMLElement[]) {
+        const galleryContainer = document.createElement('div');
+        galleryContainer.className = 'gallery';
 
-        items = parseThumbnailElements(galleryElement);
+        const parentNode = figures[0].parentNode,
+            first = figures[0];
 
-        // define options (if needed)
+        parentNode.insertBefore(galleryContainer, first)
-        options = {
 
-            // define gallery index (for URL)
+        for (const figure of figures) {
-            galleryUID: galleryElement.getAttribute('data-pswp-uid'),
+            galleryContainer.appendChild(figure);
+        }
+    }
 
-            getThumbBoundsFn: function (index) {
+    public open(index: number) {
-                // See Options -> getThumbBoundsFn section of documentation for more info
+        const pswp = document.querySelector('.pswp') as HTMLDivElement;
-                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
+        const ps = new window.PhotoSwipe(pswp, window.PhotoSwipeUI_Default, this.items, {
+            index: index,
+            galleryUID: this.galleryUID,
+            getThumbBoundsFn: (index) => {
+                const thumbnail = this.items[index].el.getElementsByTagName('img')[0],
                     pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                     rect = thumbnail.getBoundingClientRect();
 
                 return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
             }
+        });
 
-        };
+        ps.init();
-
-        // PhotoSwipe opened from URL
-        if (fromURL) {
-            if (options.galleryPIDs) {
-                // parse real index when custom PIDs are used 
-                // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
-                for (var j = 0; j < items.length; j++) {
-                    if (items[j].pid == index) {
-                        options.index = j;
-                        break;
-                    }
-                }
-            } else {
-                // in URL indexes start from 1
-                options.index = parseInt(index, 10) - 1;
-            }
-        } else {
-            options.index = parseInt(index, 10);
     }
 
-        // exit if index not found
+    private bindClick() {
-        if (isNaN(options.index)) {
+        for (const [index, item] of this.items.entries()) {
-            return;
+            const a = item.el.querySelector('a');
-        }
 
-        if (disableAnimation) {
+            a.addEventListener('click', (e) => {
-            options.showAnimationDuration = 0;
+                e.preventDefault();
-        }
+                this.open(index);
-
-        // Pass data to PhotoSwipe and initialize it
-        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
-        gallery.init();
-    };
-
-    // loop through all gallery elements and bind events
-    var galleryElements = document.querySelectorAll(gallerySelector);
-
-    for (var i = 0, l = galleryElements.length; i < l; i++) {
-        galleryElements[i].setAttribute('data-pswp-uid', i + 1);
-        galleryElements[i].onclick = onThumbnailsClick;
-    }
-
-    // Parse URL and open gallery if it contains #&pid=3&gid=1
-    var hashData = photoswipeParseHash();
-    if (hashData.pid && hashData.gid) {
-        openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
-    }
-};
-
-/**
- * Wrap adjacent figure tags with div.gallery, and append style
- * Reference: https://github.com/xieranmaya/blog/issues/6
- * @param gallery 
- */
-function wrap(gallery: HTMLElement[]) {
-    let galleryContainer = document.createElement('div');
-    galleryContainer.className = 'gallery';
-
-    let parentNode = gallery[0].parentNode,
-        first = gallery[0];
-
-    parentNode.insertBefore(galleryContainer, first)
-
-    for (let j = 0; j < gallery.length; ++j) {
-        const width = gallery[j].querySelector('img').width,
-            height = gallery[j].querySelector('img').height;
-
-        gallery[j].style.flexGrow = `${width * 100 / height}`;
-        gallery[j].style.flexBasis = `${width * 240 / height}px`;
-
-        galleryContainer.appendChild(gallery[j]);
-    }
-}
-
-/**
- * Load PhotoSwipe library dynamically
- */
-function loadPhotoSwipe() {
-    const tasks = [
-        loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"),
-        loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"),
-        loadStyle("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css"),
-        loadStyle("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css")
-    ];
-
-    return Promise.all(tasks);
-}
-
-/**
- * Create gallery
- * @param selector 
- */
-function createGallery(selector: string) {
-    const figures = document.querySelector(selector).querySelectorAll('figure');
-
-    if (figures.length) {
-        let currentGallery = [figures[0]];
-        for (let i = 1; i < figures.length; ++i) {
-            if (figures[i].previousElementSibling === currentGallery[currentGallery.length - 1]) {
-                /* Adjacent */
-                currentGallery.push(figures[i]);
-            }
-            else {
-                /* End gallery */
-                wrap(currentGallery);
-                currentGallery = [figures[i]];
-            }
-        }
-
-        if (currentGallery.length > 0) {
-            wrap(currentGallery);
-        }
-
-        /**
-         * Load PhotoSwipe library, and then initialize
-         */
-        loadPhotoSwipe().then(() => {
-            const pswp = document.querySelector('.pswp') as HTMLDivElement;
-            pswp.style.removeProperty('display');
-
-            initPhotoSwipeFromDOM(`${selector} .gallery`);
             })
         }
     }
-
-export {
-    createGallery
 }
+
+export default StackGallery;

assets/ts/main.ts

@@ -5,8 +5,7 @@
 *   @website: https://jimmycai.com
 *   @link: https://github.com/CaiJimmy/hugo-theme-stack
 */
-
+import StackGallery from "ts/gallery";
-import { createGallery } from "ts/gallery"
 import { getColor } from 'ts/color';
 import menu from 'ts/menu';
 import createElement from 'ts/createElement';
@@ -18,8 +17,9 @@ let Stack = {
          */
         menu();
 
-        if (document.querySelector('.article-content')) {
+        const articleContent = document.querySelector('.article-content') as HTMLElement;
-            createGallery('.article-content');
+        if (articleContent) {
+            new StackGallery(articleContent);
         }
 
         /**

assets/ts/utils.ts

@@ -1,43 +0,0 @@
-/**
- * Load script asynchronous
- * @return {Promise}
- * @param url 
- */
-const loadScript = function (url) {
-    return new Promise(resolve => {
-        var scriptTag = document.createElement('script');
-        scriptTag.src = url;
-
-        scriptTag.onload = () => {
-            resolve();
-        };
-
-        document.head.appendChild(scriptTag);
-    })
-};
-
-/**
- * Load style asynchronous
- * @return {Promise}
- * @param url 
- */
-const loadStyle = function (url) {
-    return new Promise(resolve => {
-        var link = document.createElement('link');
-        link.href = url;
-
-        link.type = "text/css";
-        link.rel = "stylesheet";
-
-        link.onload = () => {
-            resolve();
-        };
-
-        document.head.appendChild(link);
-    });
-};
-
-export {
-    loadScript,
-    loadStyle
-}

layouts/_default/_markup/render-image.html

@@ -7,7 +7,7 @@
 	{{- with $alt -}}
 	{{- $caption = . | safeHTML -}}
 	{{- end -}}
-	<figure>
+	<figure style="flex-grow: {{ div (mul $image.Width 100) $image.Height }}; flex-basis: {{ div (mul $image.Width 240) $image.Height }}px">
 		<a href="{{ $image.RelPermalink }}" data-size="{{ $image.Width }}x{{ $image.Height }}">
 			<img srcset="{{ $small.RelPermalink }} 480w, {{ $big.RelPermalink }} 1024w"
 				src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" loading="lazy"

layouts/partials/article/components/photoswipe.html

@@ -1,5 +1,5 @@
 <!-- Root element of PhotoSwipe. Must have class pswp. -->
-<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" style="display:none">
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
 
     <!-- Background of PhotoSwipe. 
          It's a separate element as animating opacity is faster than rgba(). -->
@@ -64,3 +64,9 @@
     </div>
 
 </div>
+
+<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.css">