编辑文件 - project-media-swiper.js

✏️ 正在编辑: project-media-swiper.js

路径: /home/h359620/public_html/wp-content/themes/datis/assets/js/project-media-swiper.js
提示: 您可以编辑任何文件（包括二进制文件），但请注意不当修改可能导致文件损坏。

(function () {
    function isDirectVideo(url) {
        return /\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(url || "");
    }

function makeIframe(src) {
        const iframe = document.createElement("iframe");
        iframe.className = "datis-project-media-iframe";
        iframe.src = src;
        iframe.setAttribute("allow", "autoplay; fullscreen; picture-in-picture");
        iframe.setAttribute("allowfullscreen", "allowfullscreen");
        iframe.setAttribute("frameborder", "0");
        return iframe;
    }

function makeVideo(src, poster) {
        const video = document.createElement("video");
        video.className = "datis-project-media-video";
        video.controls = true;
        video.playsInline = true;
        video.preload = "metadata";
        if (poster) video.poster = poster;

const source = document.createElement("source");
        source.src = src;
        video.appendChild(source);

return video;
    }

function cleanupSlideMedia(slideEl) {
        if (!slideEl) return;

const v = slideEl.querySelector("video");
        if (v) {
            try { v.pause(); } catch (e) { }
            v.remove();
        }

const ifr = slideEl.querySelector("iframe");
        if (ifr) ifr.remove();

const posterImg = slideEl.querySelector(".datis-project-media-poster");
        if (posterImg) posterImg.style.display = "";

const playBtn = slideEl.querySelector("[data-datis-play]");
        if (playBtn) playBtn.style.display = "";
    }

function playSlide(slideEl) {
        if (!slideEl) return;
        const type = slideEl.getAttribute("data-type");
        if (type !== "video") return;

const videoSrc = slideEl.getAttribute("data-video-src") || "";
        const poster = slideEl.getAttribute("data-video-poster") || "";
        if (!videoSrc) return;

const posterImg = slideEl.querySelector(".datis-project-media-poster");
        if (posterImg) posterImg.style.display = "none";

const playBtn = slideEl.querySelector("[data-datis-play]");
        if (playBtn) playBtn.style.display = "none";

if (isDirectVideo(videoSrc)) {
            const video = makeVideo(videoSrc, poster);
            slideEl.appendChild(video);
            setTimeout(() => {
                try { video.play(); } catch (e) { }
            }, 0);
            return;
        }

const yt = buildYoutubeEmbed(videoSrc);
        const vm = buildVimeoEmbed(videoSrc);
        const embed = yt || vm || videoSrc;

slideEl.appendChild(makeIframe(embed));
    }

function initOne(root) {
        const mainEl = root.querySelector("[data-datis-main-swiper]");
        const thumbsEl = root.querySelector("[data-datis-thumbs-swiper]");
        const prevEl = root.querySelector("[data-datis-prev]");
        const nextEl = root.querySelector("[data-datis-next]");

if (!mainEl || !thumbsEl || typeof Swiper === "undefined") return;

// ✅ Thumbs: enforce EXACT slidesPerView=4 on desktop
        const thumbs = new Swiper(thumbsEl, {
            // defaults (desktop)
            direction: "vertical",
            slidesPerView: 4,
            spaceBetween: 20,

// thumbs doesn't need freeMode; it can cause "extra visible" feeling on some layouts
            freeMode: false,

// important for thumbs sync
            watchSlidesProgress: true,

// ✅ prevent desktop resize loop
            breakpointsBase: "window",
            resizeObserver: false,

// keep updates on resize/layout changes
            // observer: true,
            // observeParents: true,
            // updateOnWindowResize: true,

// ✅ responsive behavior
            breakpoints: {
                0: {
                    direction: "horizontal",
                    slidesPerView: 4,
                },
                769: {
                    direction: "vertical",
                    slidesPerView: 4,
                }
            }
        });

const main = new Swiper(mainEl, {
            slidesPerView: 1,
            spaceBetween: 16,
            navigation: {
                prevEl,
                nextEl,
            },
            thumbs: {
                swiper: thumbs,
            },
            on: {
                slideChangeTransitionStart: function () {
                    mainEl.querySelectorAll(".swiper-slide").forEach(cleanupSlideMedia);
                }
            }
        });

root.addEventListener("click", function (e) {
            const btn = e.target.closest("[data-datis-play]");
            if (!btn) return;

const slide = btn.closest(".swiper-slide");
            if (!slide) return;

playSlide(slide);
        });
    }

document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".datis-project-media").forEach(initOne);
    });
})();

← 返回文件管理器