feat(photo-swipe): rebuild photoswipe

vuepress-theme-hope · Jun 2, 2022 · 18bf3c3 · 18bf3c3
1 parent 756eb26
commit 18bf3c3
Show file tree

Hide file tree

Showing 10 changed files with 207 additions and 71 deletions.
diff --git a/...ages/photo-swipe/src/client/PhotoSwipe.ts → ...swipe/src/client/components/PhotoSwipe.ts b/...ages/photo-swipe/src/client/PhotoSwipe.ts → ...swipe/src/client/components/PhotoSwipe.ts
@@ -1,7 +1,6 @@
 import Vue from "vue";
-import PhotoSwipe from "photoswipe";
+import { getImages } from "../utils";
 
-let images: NodeListOf<HTMLImageElement>;
 const locales = PHOTO_SWIPE_LOCALES;
 
 export default Vue.extend({
@@ -36,13 +35,13 @@ export default Vue.extend({
           setTimeout(() => resolve(), PHOTO_SWIPE_DELAY)
         ),
       ]).then(([photoSwipe, PhotoSwipeDefault]) => {
-        void this.getImages().then((imageConfig) => {
-          images.forEach((image, index) => {
+        void getImages(PHOTO_SWIPE_SELECTOR).then(({ elements, infos }) => {
+          elements.forEach((image, index) => {
             image.onclick = (): void => {
               const gallery = new photoSwipe.default(
                 pswp,
                 PhotoSwipeDefault.default,
-                imageConfig,
+                infos,
                 {
                   shareButtons: this.locales.buttons,
                   ...PHOTO_SWIPE_OPTIONS,
@@ -56,34 +55,5 @@ export default Vue.extend({
         });
       });
     },
-
-    getImageInfo(image: HTMLImageElement): PhotoSwipe.Item & { title: string } {
-      return {
-        src: image.src,
-        // eslint-disable-next-line id-length
-        w: image.naturalWidth,
-        h: image.naturalHeight,
-        title: image.alt,
-      };
-    },
-
-    getImages(): Promise<PhotoSwipe.Item[]> {
-      const promises: Promise<PhotoSwipe.Item & { title: string }>[] = [];
-
-      images =
-        document.querySelectorAll<HTMLImageElement>(PHOTO_SWIPE_SELECTOR);
-
-      images.forEach((image, index) => {
-        promises[index] = new Promise((resolve, reject) => {
-          if (image.complete) resolve(this.getImageInfo(image));
-          else {
-            image.onload = (): void => resolve(this.getImageInfo(image));
-            image.onerror = (err): void => reject(err);
-          }
-        });
-      });
-
-      return Promise.all(promises);
-    },
   },
 });
diff --git a/...ges/photo-swipe/src/client/PhotoSwipe.vue → ...wipe/src/client/components/PhotoSwipe.vue b/...ges/photo-swipe/src/client/PhotoSwipe.vue → ...wipe/src/client/components/PhotoSwipe.vue
diff --git a/packages/photo-swipe/src/client/enhanceAppFile.ts b/packages/photo-swipe/src/client/enhanceAppFile.ts
@@ -1,4 +1,4 @@
-import PhotoSwipe from "./PhotoSwipe.vue";
+import PhotoSwipe from "./components/PhotoSwipe.vue";
 
 import type { EnhanceApp } from "@mr-hope/vuepress-types";
 

diff --git a/packages/photo-swipe/src/client/utils/index.ts b/packages/photo-swipe/src/client/utils/index.ts
@@ -0,0 +1,34 @@
+import type { Item } from "photoswipe";
+
+export const getImageInfo = (
+  image: HTMLImageElement
+): Item & { title: string } => ({
+  src: image.src,
+  w: image.naturalWidth,
+  h: image.naturalHeight,
+  title: image.alt,
+});
+
+export interface PhotoSwipeImages {
+  elements: HTMLImageElement[];
+  infos: Item[];
+}
+
+export const getImages = (selector: string): Promise<PhotoSwipeImages> => {
+  const images = Array.from(
+    document.querySelectorAll<HTMLImageElement>(selector)
+  );
+
+  return Promise.all(
+    images.map(
+      (image) =>
+        new Promise<Item>((resolve, reject) => {
+          if (image.complete) resolve(getImageInfo(image));
+          else {
+            image.onload = (): void => resolve(getImageInfo(image));
+            image.onerror = (err): void => reject(err);
+          }
+        })
+    )
+  ).then((infos) => ({ elements: images, infos }));
+};
diff --git a/packages/photo-swipe/src/node/index.ts b/packages/photo-swipe/src/node/index.ts
@@ -1,30 +1,3 @@
-import { getLocales } from "@mr-hope/vuepress-shared";
-import { resolve } from "path";
-import { photoSwipeLocales } from "./locales";
-
-import type { Plugin } from "@mr-hope/vuepress-types";
-import type { PhotoSwipeOptions } from "../types";
-
-const photoSwipePlugin: Plugin<PhotoSwipeOptions> = (options, context) => {
-  return {
-    name: "photo-swipe",
-
-    define: (): Record<string, unknown> => ({
-      PHOTO_SWIPE_SELECTOR:
-        options.selector || ".theme-default-content :not(a) > img",
-      PHOTO_SWIPE_DELAY: options.delay || 500,
-      PHOTO_SWIPE_OPTIONS: options.options || {},
-      PHOTO_SWIPE_LOCALES: getLocales(
-        context,
-        photoSwipeLocales,
-        options.locales
-      ),
-    }),
-
-    enhanceAppFiles: resolve(__dirname, "../client/enhanceAppFile.js"),
-
-    globalUIComponents: "PhotoSwipe",
-  };
-};
+import { photoSwipePlugin } from "./plugin";
 
 export = photoSwipePlugin;
diff --git a/packages/photo-swipe/src/node/locales.ts b/packages/photo-swipe/src/node/locales.ts
@@ -1,6 +1,6 @@
-import type { PhowoSwipeLocaleConfig } from "../types";
+import type { PhotoSwipeLocaleConfig } from "../types";
 
-export const photoSwipeLocales: PhowoSwipeLocaleConfig = {
+export const photoSwipeLocales: PhotoSwipeLocaleConfig = {
   "/en/": {
     close: "Close",
     fullscreen: "Switch to full screen",
@@ -256,4 +256,132 @@ export const photoSwipeLocales: PhowoSwipeLocaleConfig = {
       },
     ],
   },
+
+  "/pl/": {
+    close: "Zamknij",
+    fullscreen: "Przełącz na pełny ekran",
+    share: "Share",
+    zoom: "Powiększ/pomniejsz",
+    prev: "Poprzedni (strzałka w lewo)",
+    next: "Następny (strzałka w prawo)",
+    buttons: [
+      {
+        id: "facebook",
+        label: "Share on Facebook",
+        url: "https://www.facebook.com/sharer/sharer.php?u={{url}}",
+      },
+      {
+        id: "twitter",
+        label: "Tweet",
+        url: "https://twitter.com/intent/tweet?text={{text}}&url={{url}}",
+      },
+      {
+        id: "pinterest",
+        label: "Pin it",
+        url: "http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}",
+      },
+      {
+        id: "download",
+        label: "Download image",
+        url: "{{raw_image_url}}",
+        download: true,
+      },
+    ],
+  },
+
+  "/sk/": {
+    close: "Zatvor",
+    fullscreen: "Prepni na celú obrazovku",
+    share: "Share",
+    zoom: "Priblíž/Oddial",
+    prev: "Predošlí (šípka doľava)",
+    next: "Nasledujúci (šípka doprava)",
+    buttons: [
+      {
+        id: "facebook",
+        label: "Share on Facebook",
+        url: "https://www.facebook.com/sharer/sharer.php?u={{url}}",
+      },
+      {
+        id: "twitter",
+        label: "Tweet",
+        url: "https://twitter.com/intent/tweet?text={{text}}&url={{url}}",
+      },
+      {
+        id: "pinterest",
+        label: "Pin it",
+        url: "http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}",
+      },
+      {
+        id: "download",
+        label: "Download image",
+        url: "{{raw_image_url}}",
+        download: true,
+      },
+    ],
+  },
+
+  "/fr/": {
+    close: "Fermer",
+    fullscreen: "Basculer en plein écran",
+    share: "Share",
+    zoom: "Zoom avant/arrière",
+    prev: "Précédent (Flèche gauche)",
+    next: "Suivant (Flèche droite)",
+    buttons: [
+      {
+        id: "facebook",
+        label: "Share on Facebook",
+        url: "https://www.facebook.com/sharer/sharer.php?u={{url}}",
+      },
+      {
+        id: "twitter",
+        label: "Tweet",
+        url: "https://twitter.com/intent/tweet?text={{text}}&url={{url}}",
+      },
+      {
+        id: "pinterest",
+        label: "Pin it",
+        url: "http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}",
+      },
+      {
+        id: "download",
+        label: "Download image",
+        url: "{{raw_image_url}}",
+        download: true,
+      },
+    ],
+  },
+
+  "/es/": {
+    close: "Cerrar",
+    fullscreen: "Cambiar a pantalla completa",
+    share: "Share",
+    zoom: "Acercar/Alejar",
+    prev: "Anterior (Flecha izquierda)",
+    next: "Siguiente (Flecha derecha)",
+    buttons: [
+      {
+        id: "facebook",
+        label: "Share on Facebook",
+        url: "https://www.facebook.com/sharer/sharer.php?u={{url}}",
+      },
+      {
+        id: "twitter",
+        label: "Tweet",
+        url: "https://twitter.com/intent/tweet?text={{text}}&url={{url}}",
+      },
+      {
+        id: "pinterest",
+        label: "Pin it",
+        url: "http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}",
+      },
+      {
+        id: "download",
+        label: "Download image",
+        url: "{{raw_image_url}}",
+        download: true,
+      },
+    ],
+  },
 };
diff --git a/packages/photo-swipe/src/node/plugin.ts b/packages/photo-swipe/src/node/plugin.ts
@@ -0,0 +1,31 @@
+import { getLocales } from "@mr-hope/vuepress-shared";
+import { resolve } from "path";
+import { photoSwipeLocales } from "./locales";
+
+import type { Plugin } from "@mr-hope/vuepress-types";
+import type { PhotoSwipeOptions } from "../types";
+
+export const photoSwipePlugin: Plugin<PhotoSwipeOptions> = (
+  options,
+  context
+) => {
+  return {
+    name: "vuepress-plugin-photo-swipe",
+
+    define: (): Record<string, unknown> => ({
+      PHOTO_SWIPE_SELECTOR:
+        options.selector || ".theme-default-content :not(a) > img",
+      PHOTO_SWIPE_DELAY: options.delay || 500,
+      PHOTO_SWIPE_OPTIONS: options.options || {},
+      PHOTO_SWIPE_LOCALES: getLocales(
+        context,
+        photoSwipeLocales,
+        options.locales
+      ),
+    }),
+
+    enhanceAppFiles: resolve(__dirname, "../client/enhanceAppFile.js"),
+
+    globalUIComponents: "PhotoSwipe",
+  };
+};
diff --git a/packages/photo-swipe/src/types/index.d.ts b/packages/photo-swipe/src/types/index.d.ts
@@ -1,5 +1,5 @@
 import PhotoSwipe = require("photoswipe");
-import type { PhowoSwipeLocaleConfig } from "./locales";
+import type { PhotoSwipeLocaleConfig } from "./locales";
 
 export * from "./locales";
 export * from "./options";
@@ -8,5 +8,5 @@ declare global {
   const PHOTO_SWIPE_DELAY: number;
   const PHOTO_SWIPE_SELECTOR: string;
   const PHOTO_SWIPE_OPTIONS: PhotoSwipe.Options;
-  const PHOTO_SWIPE_LOCALES: PhowoSwipeLocaleConfig;
+  const PHOTO_SWIPE_LOCALES: PhotoSwipeLocaleConfig;
 }
diff --git a/packages/photo-swipe/src/types/locales.d.ts b/packages/photo-swipe/src/types/locales.d.ts
@@ -1,7 +1,7 @@
 import type { ConvertLocaleConfig } from "@mr-hope/vuepress-shared";
 import type PhotoSwipeDefaultUI from "photoswipe/dist/photoswipe-ui-default";
 
-export interface PhowoSwipeLocaleData {
+export interface PhotoSwipeLocaleData {
   /**
    * Close button label text
    *
@@ -52,4 +52,4 @@ export interface PhowoSwipeLocaleData {
   buttons: PhotoSwipeDefaultUI.ShareButtonData[];
 }
 
-export type PhowoSwipeLocaleConfig = ConvertLocaleConfig<PhowoSwipeLocaleData>;
+export type PhotoSwipeLocaleConfig = ConvertLocaleConfig<PhotoSwipeLocaleData>;
diff --git a/packages/photo-swipe/src/types/options.d.ts b/packages/photo-swipe/src/types/options.d.ts
@@ -1,6 +1,6 @@
 import type { LocaleConfig } from "@mr-hope/vuepress-shared";
 import type PhotoSwipe from "photoswipe";
-import type { PhowoSwipeLocaleData } from "./locales";
+import type { PhotoSwipeLocaleData } from "./locales";
 
 export interface PhotoSwipeOptions {
   /**
@@ -37,5 +37,5 @@ export interface PhotoSwipeOptions {
    *
    * 国际化配置
    */
-  locales?: LocaleConfig<PhowoSwipeLocaleData>;
+  locales?: LocaleConfig<PhotoSwipeLocaleData>;
 }