AboutMe/src/utils/fancybox.ts

let fancyboxSelectors: string[] = [];
let Fancybox: any;

// 图片灯箱按需加载
export async function initFancybox() {
    if (typeof document === "undefined") return;
    // 相册图片选择器 (只绑定不在 a 标签内的图片，避免与链接绑定冲突)
    const albumImagesSelector = ".custom-md img:not(a *), #post-cover img:not(a *), .moment-images img:not(a *), .photo-gallery img:not(a *)";
    // 相册链接选择器
    const albumLinksSelector = ".moment-images a[data-fancybox], .photo-gallery a[data-fancybox]";
    // 单张图片选择器
    const singleFancyboxSelector = "[data-fancybox]:not(.moment-images a):not(.photo-gallery a)";
    // 检查是否有图片需要绑定
    const hasImages =
        document.querySelector(albumImagesSelector) ||
        document.querySelector(albumLinksSelector) ||
        document.querySelector(singleFancyboxSelector);
    if (!hasImages) return;
    // 检查是否已初始化 Fancybox
    if (!Fancybox) {
        const mod = await import("@fancyapps/ui");
        Fancybox = mod.Fancybox;
        await import("@fancyapps/ui/dist/fancybox/fancybox.css");
    }
    if (fancyboxSelectors.length > 0) {
        return; // 已经初始化，直接返回
    }
    // 公共配置
    const commonConfig = {
        Thumbs: {
            autoStart: true,
            showOnStart: "yes"
        },
        Toolbar: {
            display: {
                left: ["infobar"],
                middle: [
                    "zoomIn",
                    "zoomOut",
                    "toggle1to1",
                    "rotateCCW",
                    "rotateCW",
                    "flipX",
                    "flipY",
                ],
                right: ["slideshow", "thumbs", "close"],
            },
        },
        animated: true,
        dragToClose: true,
        keyboard: {
            Escape: "close",
            Delete: "close",
            Backspace: "close",
            PageUp: "next",
            PageDown: "prev",
            ArrowUp: "next",
            ArrowDown: "prev",
            ArrowRight: "next",
            ArrowLeft: "prev",
        },
        fitToView: true,
        preload: 3,
        infinite: true,
        Panzoom: {
            maxScale: 3,
            minScale: 1
        },
        caption: false,
    };
    // 绑定相册/文章图片
    Fancybox.bind(albumImagesSelector, {
        ...commonConfig,
        groupAll: true,
        Carousel: {
            transition: "slide",
            preload: 2,
        },
    });
    fancyboxSelectors.push(albumImagesSelector);
    // 绑定相册链接
    Fancybox.bind(albumLinksSelector, {
        ...commonConfig,
        source: (el: any) => {
            return el.getAttribute("data-src") || el.getAttribute("href");
        },
    });
    fancyboxSelectors.push(albumLinksSelector);
    // 绑定单独的 fancybox 图片
    Fancybox.bind(singleFancyboxSelector, commonConfig);
    fancyboxSelectors.push(singleFancyboxSelector);
}

// 清理 Fancybox 实例
export function cleanupFancybox() {
    if (!Fancybox) return; // 如果从未加载过，无需清理
    fancyboxSelectors.forEach((selector) => {
        Fancybox.unbind(selector);
    });
    fancyboxSelectors = [];
}