From 18bf3c3372d6e80ff186581173bd287f99fe1825 Mon Sep 17 00:00:00 2001 From: "Mr.Hope" Date: Thu, 2 Jun 2022 23:27:13 +0800 Subject: [PATCH] feat(photo-swipe): rebuild photoswipe --- .../src/client/{ => components}/PhotoSwipe.ts | 38 +---- .../client/{ => components}/PhotoSwipe.vue | 0 .../photo-swipe/src/client/enhanceAppFile.ts | 2 +- .../photo-swipe/src/client/utils/index.ts | 34 +++++ packages/photo-swipe/src/node/index.ts | 29 +--- packages/photo-swipe/src/node/locales.ts | 132 +++++++++++++++++- packages/photo-swipe/src/node/plugin.ts | 31 ++++ packages/photo-swipe/src/types/index.d.ts | 4 +- packages/photo-swipe/src/types/locales.d.ts | 4 +- packages/photo-swipe/src/types/options.d.ts | 4 +- 10 files changed, 207 insertions(+), 71 deletions(-) rename packages/photo-swipe/src/client/{ => components}/PhotoSwipe.ts (53%) rename packages/photo-swipe/src/client/{ => components}/PhotoSwipe.vue (100%) create mode 100644 packages/photo-swipe/src/client/utils/index.ts create mode 100644 packages/photo-swipe/src/node/plugin.ts diff --git a/packages/photo-swipe/src/client/PhotoSwipe.ts b/packages/photo-swipe/src/client/components/PhotoSwipe.ts similarity index 53% rename from packages/photo-swipe/src/client/PhotoSwipe.ts rename to packages/photo-swipe/src/client/components/PhotoSwipe.ts index 2081c4dfb..c23125767 100644 --- a/packages/photo-swipe/src/client/PhotoSwipe.ts +++ b/packages/photo-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; 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 { - const promises: Promise[] = []; - - images = - document.querySelectorAll(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/packages/photo-swipe/src/client/PhotoSwipe.vue b/packages/photo-swipe/src/client/components/PhotoSwipe.vue similarity index 100% rename from packages/photo-swipe/src/client/PhotoSwipe.vue rename to packages/photo-swipe/src/client/components/PhotoSwipe.vue diff --git a/packages/photo-swipe/src/client/enhanceAppFile.ts b/packages/photo-swipe/src/client/enhanceAppFile.ts index 4997156ea..08ba6922e 100644 --- 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 new file mode 100644 index 000000000..48302f101 --- /dev/null +++ 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 => { + const images = Array.from( + document.querySelectorAll(selector) + ); + + return Promise.all( + images.map( + (image) => + new Promise((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 index 926d323c0..da0967e60 100644 --- 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 = (options, context) => { - return { - name: "photo-swipe", - - define: (): Record => ({ - 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 index bf5530389..0bd1e47fc 100644 --- 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 new file mode 100644 index 000000000..3a16e6d06 --- /dev/null +++ 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 = ( + options, + context +) => { + return { + name: "vuepress-plugin-photo-swipe", + + define: (): Record => ({ + 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 index 8e6ef0033..0123f63a7 100644 --- 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 index d79f544d6..b8581d4b5 100644 --- 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; +export type PhotoSwipeLocaleConfig = ConvertLocaleConfig; diff --git a/packages/photo-swipe/src/types/options.d.ts b/packages/photo-swipe/src/types/options.d.ts index e287c61de..9ed5a9b62 100644 --- 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; + locales?: LocaleConfig; }