feat(photo-swipe): support frontmatter

vuepress-theme-hope · Nov 7, 2023 · 607bb68 · 607bb68
1 parent 225141b
commit 607bb68
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 50 deletions.
diff --git a/docs/photo-swipe/src/guide.md b/docs/photo-swipe/src/guide.md
@@ -47,6 +47,13 @@ export default defineClientConfig({
 });
 ```
 
+## Page level settings
+
+You can set `photoSwipe` in frontmatter to customize the behavior of the current page:
+
+- String: Image selector for the current page
+- `false`: disable photo-swipe in the current page.
+
 ## Operation Delay
 
 If your theme adds animations when switching pages, you may need to delay when photo-swipe re-finds page images. You can configure this delay via the `delay` option, the default value is `800` (in milliseconds).

diff --git a/docs/photo-swipe/src/zh/guide.md b/docs/photo-swipe/src/zh/guide.md
@@ -29,6 +29,13 @@ icon: lightbulb
 
 插件默认会按照默认主题的选择器选中图片，如果你在使用第三方主题，你可以将一个或多个 CSS 选择器设置给 `selector` 选项。
 
+## 页面级别设置
+
+您可以在 frontmatter 中设置 `photoSwipe` 来定制当前页面的行为:
+
+- 字符串: 当前页面的图片选择器
+- `false`: 在当前页面中禁用 photo-swipe。
+
 ## 自定义 PhotoSwipe 选项
 
 你可以通过在客户端配置文件中导入和调用 `definePhotoSwipeOptions` 来将选项传递给 [`photo-swipe`](http://photoswipe.com/)：

diff --git a/packages/photo-swipe/src/client/composables/setup.ts b/packages/photo-swipe/src/client/composables/setup.ts
@@ -1,8 +1,8 @@
-import { usePageData } from "@vuepress/client";
+import { usePageData, usePageFrontmatter } from "@vuepress/client";
 import { useEventListener, useFullscreen } from "@vueuse/core";
 import type { SlideData } from "photoswipe";
 import PhotoSwipe from "photoswipe";
-import { nextTick, onMounted, watch } from "vue";
+import { computed, nextTick, onMounted, watch } from "vue";
 import { useLocaleConfig } from "vuepress-shared/client";
 
 import { delay, imageSelector, locales, scrollToClose } from "../define.js";
@@ -13,13 +13,22 @@ import "photoswipe/dist/photoswipe.css";
 import "../styles/photo-swipe.scss";
 
 export const setupPhotoSwipe = (): void => {
-  const { isSupported, toggle } = useFullscreen();
-  const photoSwipeOptions = usePhotoSwipeOptions();
   const locale = useLocaleConfig(locales);
+  const frontmatter = usePageFrontmatter<{
+    photoSwipe?: string[] | string | false;
+  }>();
   const page = usePageData();
+  const { isSupported, toggle } = useFullscreen();
+  const photoSwipeOptions = usePhotoSwipeOptions();
 
   let instance: PhotoSwipe;
 
+  const selector = computed(() =>
+    frontmatter.value.photoSwipe === false
+      ? false
+      : frontmatter.value.photoSwipe || imageSelector,
+  );
+
   const registerPhotoswipeUI = (photoSwipe: PhotoSwipe): void => {
     photoSwipe.on("uiRegister", () => {
       if (isSupported)
@@ -93,58 +102,60 @@ export const setupPhotoSwipe = (): void => {
     });
   };
 
-  const initPhotoSwipe = (): Promise<void> =>
-    Promise.all([
-      import(/* webpackChunkName: "photo-swipe" */ "photoswipe"),
-      nextTick().then(() =>
-        new Promise<void>((resolve) => setTimeout(resolve, delay)).then(() =>
-          getImages(imageSelector),
+  const initPhotoSwipe = async (): Promise<void> => {
+    if (selector.value)
+      return Promise.all([
+        import(/* webpackChunkName: "photo-swipe" */ "photoswipe"),
+        nextTick().then(() =>
+          new Promise<void>((resolve) => setTimeout(resolve, delay)).then(() =>
+            getImages(selector.value as string[] | string),
+          ),
         ),
-      ),
-    ]).then(([{ default: PhotoSwipe }, images]) => {
-      const dataSource = images.map<SlideData>((image) => ({
-        html: LOADING_ICON,
-        element: image,
-        msrc: image.src,
-      }));
-
-      images.forEach((image, index) => {
-        const handler = (): void => {
-          instance = new PhotoSwipe({
-            preloaderDelay: 0,
-            showHideAnimationType: "zoom",
-            ...locale.value,
-            ...photoSwipeOptions,
-            dataSource,
-            index,
-            ...(scrollToClose
-              ? { closeOnVerticalDrag: true, wheelToZoom: false }
-              : {}),
+      ]).then(([{ default: PhotoSwipe }, images]) => {
+        const dataSource = images.map<SlideData>((image) => ({
+          html: LOADING_ICON,
+          element: image,
+          msrc: image.src,
+        }));
+
+        images.forEach((image, index) => {
+          const handler = (): void => {
+            instance = new PhotoSwipe({
+              preloaderDelay: 0,
+              showHideAnimationType: "zoom",
+              ...locale.value,
+              ...photoSwipeOptions,
+              dataSource,
+              index,
+              ...(scrollToClose
+                ? { closeOnVerticalDrag: true, wheelToZoom: false }
+                : {}),
+            });
+
+            registerPhotoswipeUI(instance);
+
+            instance.addFilter("thumbEl", () => image);
+            instance.addFilter("placeholderSrc", () => image.src);
+            instance.init();
+          };
+
+          image.style.cursor = "zoom-in";
+          image.addEventListener("click", () => {
+            void handler();
+          });
+          image.addEventListener("keypress", ({ key }) => {
+            if (key === "Enter") void handler();
           });
-
-          registerPhotoswipeUI(instance);
-
-          instance.addFilter("thumbEl", () => image);
-          instance.addFilter("placeholderSrc", () => image.src);
-          instance.init();
-        };
-
-        image.style.cursor = "zoom-in";
-        image.addEventListener("click", () => {
-          void handler();
-        });
-        image.addEventListener("keypress", ({ key }) => {
-          if (key === "Enter") void handler();
         });
-      });
 
-      images.forEach((image, index) => {
-        void getImageInfo(image).then((data) => {
-          dataSource.splice(index, 1, data);
-          instance?.refreshSlideContent(index);
+        images.forEach((image, index) => {
+          void getImageInfo(image).then((data) => {
+            dataSource.splice(index, 1, data);
+            instance?.refreshSlideContent(index);
+          });
         });
       });
-    });
+  };
 
   onMounted(() => {
     if (scrollToClose)