refactor: restructure fancybox invocation functions and revamp implementation methods

Refactored the way fancybox functions are called and rewritten the implementation methods. Additionally, added compatibility with the <picture> tag to provide responsive images and/or multiple image formats.

Author: inkss

_config.yml

@@ -23,7 +23,7 @@ default:
 
 cdn_system:
   # CDN 优先级 从高到低排序 写入 priority 列表即表示启用(enable)
-  priority: [custom, local, cdnjs, npm, static]
+  priority: [custom, local, npm, static, cdnjs]
   # ========================================================================
   # cdn数据配置文件见 "theme/_cdn.yml", 可以在 source/_data/cdn.yml 覆盖 theme/_cdn.yml
   # 变量说明：

layout/_plugins/comments/artalk/script.ejs

@@ -51,16 +51,8 @@
       },
       <% } %>
     }));
-
-    if (typeof VolantisFancyBox === "undefined"){
-      const checkFancyBox = setInterval(() => {
-        if(typeof VolantisFancyBox === "undefined") return;
-        clearInterval(checkFancyBox);
-        VolantisFancyBox.bind('.atk-content img:not([atk-emoticon])');
-      })
-    } else {
-      VolantisFancyBox.bind('.atk-content img:not([atk-emoticon])');
-    }
+    const fancyBoxInstance = new VolantisFancyBox();
+    fancyBoxInstance.bind('.atk-content img:not([atk-emoticon])');
   }
 
   load_artalk();

layout/_plugins/comments/twikoo/script.ejs

@@ -17,15 +17,8 @@
       path: path,
       placeholder: placeholder,
       onCommentLoaded: function() {
-        if(typeof VolantisFancyBox === "undefined") {
-          const checkFancyBox = setInterval(() => {
-            if(typeof VolantisFancyBox === "undefined") return;
-            clearInterval(checkFancyBox);
-            VolantisFancyBox.groupBind('.tk-content img:not([class*="emo"])', 'Comments');
-          })
-        } else {
-          VolantisFancyBox.groupBind('.tk-content img:not([class*="emo"])', 'Comments');
-        }
+        const fancyBoxInstance = new VolantisFancyBox();
+        fancyBoxInstance.groupBind('.tk-content img:not([class*="emo"])', 'Comments');
       }
     }),pdata.commentConfig))
   }

layout/_plugins/comments/vssue/script.ejs

@@ -4,15 +4,8 @@
 <script>
   volantis.css("<%- theme.cdn.vssue_css %>");
   function fancybox_vssue() {
-    if(typeof VolantisFancyBox === "undefined") {
-      const checkFancyBox = setInterval(() => {
-        if(typeof VolantisFancyBox === "undefined") return;
-        clearInterval(checkFancyBox);
-        VolantisFancyBox.bind('#vssue .vssue-comment-main img');
-      })
-    } else {
-      VolantisFancyBox.bind('#vssue .vssue-comment-main img');
-    }
+    const fancyBoxInstance = new VolantisFancyBox();
+    fancyBoxInstance.bind('#vssue .vssue-comment-main img');
   }
 </script>
 <script>

layout/_plugins/comments/waline/script.ejs

@@ -48,15 +48,8 @@
   }
 
   function fancybox_waline() {
-    if (typeof VolantisFancyBox === "undefined") {
-      const checkFancyBox = setInterval(() => {
-        if (typeof VolantisFancyBox === "undefined") return;
-        clearInterval(checkFancyBox);
-        VolantisFancyBox.bind('#waline .wl-content img:not(.wl-emoji)');
-      });
-    } else {
-      VolantisFancyBox.bind('#waline .wl-content img:not(.wl-emoji)');
-    }
+    const fancyBoxInstance = new VolantisFancyBox();
+    fancyBoxInstance.bind('#waline .wl-content img:not(.wl-emoji)');
   }
 
   volantis.css('<%= theme.cdn.waline_css %>');

source/css/_style/_plugins/fancybox.styl

@@ -0,0 +1,9 @@
+.fancybox__container
+  padding 10px !important
+.fancybox__slide
+  padding 2.5rem !important
+.f-button
+  &:first-child
+    border-radius 12px 0 0 12px
+  &:last-child
+    border-radius 0 12px 12px 0

source/css/_style/_plugins/index.styl

@@ -17,6 +17,7 @@ if hexo-config('custom_css.cursor.enable')
 if hexo-config('rightmenus.enable')
   @import '_rightmenu/*'
 
+@import 'fancybox'
 
 // 暗黑模式样式放到最后加载
 if hexo-config('plugins.darkmode.enable')

source/js/app.js

@@ -2,7 +2,7 @@ document.addEventListener("DOMContentLoaded", function () {
   volantis.requestAnimationFrame(() => {
     VolantisApp.init();
     VolantisApp.subscribe();
-    VolantisFancyBox.init();
+    new VolantisFancyBox();
     highlightKeyWords.startFromURL();
     locationHash();
   });
@@ -670,118 +670,117 @@ const VolantisApp = (() => {
 Object.freeze(VolantisApp);
 
 /* FancyBox */
-const VolantisFancyBox = (() => {
-  const fn = {};
-
-  fn.loadFancyBox = (done) => {
-    volantis.css(volantis.GLOBAL_CONFIG.cdn.fancybox_css);
-    volantis.js(volantis.GLOBAL_CONFIG.cdn.fancybox_js).then(() => {
-      if (done) done();
-    })
+class VolantisFancyBox {
+  constructor(checkMain = true) {
+    this.option = {
+      Hash: false,
+      groupAll: true,
+      caption: (fancybox, slide) => slide.thumbEl?.alt || "",
+      wheel: "slide",
+      contentClick: 'iterateZoom',
+      Thumbs: {
+        showOnStart: false
+      },
+      Images: {
+        content: (_ref, slide) => {
+          const imgElement = slide.thumbEl;
+          const pictureElement = imgElement.closest('picture');
+          if (imgElement.hasAttribute('data-src')) {
+            imgElement.setAttribute('src', imgElement.getAttribute('data-src'));
+          }
+          if (pictureElement) {
+            pictureElement.classList.remove("lazy");
+            let sources = pictureElement.getElementsByTagName('source');
+            for (let source of sources) {
+              if (source.hasAttribute('data-srcset')) {
+                source.setAttribute('srcset', source.getAttribute('data-srcset'));
+              }
+            }
+            return pictureElement.outerHTML;
+          } else {
+            return imgElement.outerHTML;
+          }
+        },
+        Panzoom: {
+          maxScale: 1.5,
+          panMode: "mousemove",
+          mouseMoveFactor: 1.1,
+          mouseMoveFriction: 0.12,
+        }
+      },
+      Toolbar: {
+        display: {
+          left: ["infobar"],
+          middle: [
+            "zoomIn",
+            "zoomOut",
+            "toggle1to1",
+            "rotateCCW",
+            "rotateCW",
+            "flipX",
+            "flipY",
+          ],
+          right: ["slideshow", "download", "thumbs", "close"],
+        },
+      }
+    };
+    this.#init(checkMain);
   }
 
-  /**
-   * 加载及处理
-   * 
-   * @param {*} checkMain 是否只处理文章区域的文章
-   * @param {*} done      FancyBox 加载完成后的动作，默认执行分组绑定
-   * @returns 
-   */
-  fn.init = (checkMain = true, done = fn.groupBind) => {
+  #init(checkMain) {
     if (!document.querySelector(".md .gallery img, .fancybox") && checkMain) return;
+    this.groupBind();
+  }
+
+  async #checkFancybox(done) {
     if (typeof Fancybox === "undefined") {
-      fn.loadFancyBox(done);
+      await volantis.css(volantis.GLOBAL_CONFIG.cdn.fancybox_css);
+      await volantis.js(volantis.GLOBAL_CONFIG.cdn.fancybox_js);
+      done.call(this);
     } else {
-      done();
+      done.call(this);
     }
   }
 
-  /**
-   * 图片元素预处理
-   * 
-   * @param {*} selectors 选择器
-   * @param {*} name      分组
-   */
-  fn.elementHandling = (selectors, name) => {
-    const nodeList = document.querySelectorAll(selectors);
-    nodeList.forEach($item => {
+  #elementHandling(selectors, groupName) {
+    if (!selectors) return;
+    document.querySelectorAll(selectors).forEach($item => {
       if ($item.hasAttribute('fancybox')) return;
       $item.setAttribute('fancybox', '');
       const $link = document.createElement('a');
-      $link.setAttribute('href', $item.src);
-      $link.setAttribute('data-caption', $item.alt);
-      $link.setAttribute('data-fancybox', name);
+      $link.setAttribute('href', $item.src || $item.dataset?.src);
+      $link.setAttribute('data-caption', $item.alt || '');
+      $link.setAttribute('data-fancybox', groupName);
       $link.classList.add('fancybox');
       $link.append($item.cloneNode());
       $item.replaceWith($link);
-    })
+    });
   }
 
-  /**
-   * 原生绑定
-   * 
-   * @param {*} selectors 选择器
-   */
-  fn.bind = (selectors) => {
-    fn.init(false, () => {
-      Fancybox.bind(selectors, {
-        groupAll: true,
-        Hash: false,
-        hideScrollbar: false,
-        Thumbs: {
-          autoStart: false,
-        },
-        caption: function (fancybox, slide) {
-          return slide.thumbEl?.alt || "";
-        }
-      });
+  bind(selectors) {
+    this.#checkFancybox(() => {
+      Fancybox?.unbind(selectors);
+      Fancybox?.bind(selectors, this.option);
     });
   }
 
-  /**
-   * 分组绑定
-   * 
-   * @param {*} groupName 分组名称
-   */
-  fn.groupBind = (groupName = null) => {
-    const group = new Set();
-
-    document.querySelectorAll(".gallery").forEach(ele => {
-      if (ele.querySelector("img")) {
-        group.add(ele.getAttribute('data-group') || 'default');
-      }
-    })
-
-    if (!!groupName) group.add(groupName);
-
-    for (const iterator of group) {
-      Fancybox.unbind('[data-fancybox="' + iterator + '"]');
-      Fancybox.bind('[data-fancybox="' + iterator + '"]', {
-        Hash: false,
-        hideScrollbar: false,
-        Thumbs: {
-          autoStart: false,
+  groupBind(selectors, groupName = 'default') {
+    this.#checkFancybox(() => {
+      this.#elementHandling(selectors, groupName);
+      const group = new Set();
+      document.querySelectorAll('.gallery').forEach(ele => {
+        if (ele.querySelector("img")) {
+          group.add(ele.getAttribute('data-group') || 'default');
         }
       });
-    }
-  }
-
-  return {
-    init: fn.init,
-    bind: fn.bind,
-    groupBind: (selectors, groupName = 'default') => {
-      try {
-        fn.elementHandling(selectors, groupName);
-        fn.init(false, () => {
-          fn.groupBind(groupName)
-        });
-      } catch (error) {
-        console.error(error)
-      }
-    }
+      if (groupName) group.add(groupName);
+      group.forEach(name => {
+        Fancybox?.unbind(`[data-fancybox="${name}"]`);
+        Fancybox?.bind(`[data-fancybox="${name}"]`, this.option);
+      });
+    });
   }
-})()
-Object.freeze(VolantisFancyBox);
+}
 
 // highlightKeyWords 与 搜索功能搭配 https://github.com/next-theme/hexo-theme-next/blob/eb194a7258058302baf59f02d4b80b6655338b01/source/js/third-party/search/local-search.js
 // Question: 锚点稳定性未知