fix(lightGallery): 插件lgMediumZoom可能无法加载

Fuukei · Jan 17, 2022 · 6d0e9cc · 6d0e9cc
1 parent 8dc3631
commit 6d0e9cc
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "activate-power-mode": "github:Fuukei/activate-power-mode",
     "aplayer": "github:Fuukei/APlayer",
     "baguettebox.js": "^1.11.1",
+    "change-case": "^4.1.2",
     "clipboard": "^2.0.8",
     "fg-loadcss": "^3.1.0",
     "highlight.js": "^11.4.0",

diff --git a/src/page/article_attach.ts b/src/page/article_attach.ts
@@ -1,14 +1,10 @@
 import { loadCSS } from 'fg-loadcss';
 import { slideToggle } from '../common/util';
-import { LightGallerySettings } from 'lightgallery/lg-settings'
 import { resolvePath, importExternal } from '../common/npmLib';
 declare namespace window {
     let jQuery: Function
     let $: Function
-}
-type LightGalleryOptions = LightGallerySettings & {
-    //TODO:Fix types
-    plugins?: Array<string>
+    let lightGallery: Function
 }
 function collapse() {
     //收缩、展开
@@ -63,20 +59,30 @@ async function lightbox() {
             }
         }
     } else if (mashiro_option.lightGallery) {
-        //@ts-ignore
-        const { default: lightGallery } = await import('lightgallery/lib/index.js')
-        const { plugins, ...opts } = mashiro_option.lightGallery as LightGalleryOptions
-        loadCSS(resolvePath('css/lightgallery-bundle.min.css', 'lightgallery', '2.3.0'))
-        lightGallery(
-            document.querySelector('.entry-content'),
-            {
-                plugins: plugins && (await Promise.allSettled(plugins.map(moduleName =>
-                    import(
-                        /* webpackChunkName: "lg-plugin-" */
-                        `lightgallery/plugins/${moduleName}/lg-${moduleName}.min.js`)
-                ))).map(result => result.status == 'fulfilled' ? result.value.default : console.error('加载lightGallery的插件时出错啦！', result.reason)),
-                ...opts
-            });
+        //lightGallery的umd导入有点问题
+        /*         if (mashiro_option.ext_shared_lib) {
+                    if (!window.lightGallery) {
+                        loadCSS(resolvePath('css/lightgallery-bundle.min.css', 'lightgallery', '2.3.0'))
+                        await importExternal('lightgallery.umd.js', 'lightgallery')
+                    }
+                    const { plugins } = mashiro_option.lightGallery
+                    if (plugins) {
+                        (await Promise
+                            .allSettled(
+                                plugins.map((name: string) => importExternal('plugins/' + solvePluginName(name)+'.umd.js', 'lightgallery'))
+                            ))
+                            .map(handleResult)
+                    }
+                    window.lightGallery(
+                        document.querySelector('.entry-content'),
+                        mashiro_option.lightGallery);
+                } else {
+                    //@ts-ignore
+                    const { default: initLightGallery } = await import('./lightGallery/import')
+                    initLightGallery()
+                } */
+        const { default: initLightGallery } = await import('./lightGallery/import')
+        initLightGallery()
     }
 }
 async function math() {

diff --git a/src/page/lightGallery/import.ts b/src/page/lightGallery/import.ts
@@ -0,0 +1,25 @@
+//@ts-ignore
+import lightGallery from 'lightgallery/lib/index.js'
+import { LightGallerySettings } from 'lightgallery/lg-settings'
+import 'lightgallery/css/lightgallery-bundle.min.css'
+import { handleResult, solvePluginName } from './util'
+export interface LightGalleryOptions extends Omit<LightGallerySettings, 'plugins'> {
+    plugins?: string[]
+};
+export default async function initLightGallery() {
+    const { plugins, ...opts } = mashiro_option.lightGallery as LightGalleryOptions
+
+    lightGallery(
+        document.querySelector('.entry-content'),
+        {
+            plugins: plugins && (await Promise.allSettled(
+                plugins.map(
+                    //moduleNameFormat: lgHash->lg-hash
+                    name => import(
+                        /* webpackChunkName: "lg-" */
+                        'lightgallery/plugins/' + solvePluginName(name)+'.min.js')
+                )))
+                .map(handleResult),
+            ...opts
+        });
+}
diff --git a/src/page/lightGallery/util.ts b/src/page/lightGallery/util.ts
@@ -0,0 +1,8 @@
+import { paramCase, } from 'change-case'
+
+export function solvePluginName(pluginName: string) {
+    const fileName = paramCase(pluginName)
+    const folderName = pluginName[2].toLowerCase() + pluginName.replace(/^lg\w/, '')
+    return `${folderName}/${fileName}`
+}
+export const handleResult = (result: PromiseSettledResult<any>) => result.status == 'fulfilled' ? result.value.default : console.error('加载lightGallery的插件时出错啦！', result.reason)