ldc-agis/resources/ts/fo/base/common.ts

import Swiper from "swiper";
import { Navigation } from "swiper/modules";

document.addEventListener("DOMContentLoaded", function () {
    // * Video frames.
    const videoFrameList = document.querySelectorAll(
        ".video-frame"
    ) as NodeListOf<HTMLLinkElement>;
    for (const videoLink of videoFrameList) {
        if (!videoLink.dataset.type) {
            throw new Error("Missing dataset type");
        }
        if (!videoLink.dataset.frame) {
            throw new Error("Missing dataset frame");
        }
        // @ts-ignore
        window.__CN_VIDEO = window.__CN_VIDEO ?? {};

        const newIframe = document.createElement("iframe");
        newIframe.frameBorder = "0";
        newIframe.allow = "fullscreen";
        newIframe.width = "1920px";
        newIframe.height = "1080px";
        newIframe.setAttribute("allowfullscreen", "allowfullscreen");

        // @ts-ignore
        const instance = new FsLightbox();
        instance.props.sources = [newIframe];

        setTimeout(() => {
            videoLink.addEventListener("click", (e) => {
                e.preventDefault();

                // * This comes fslightbox lib
                // @ts-ignore
                instance.open();
                setTimeout(function () {
                    // @ts-ignore
                    newIframe.src = window.__CN_VIDEO[videoLink.dataset.type]
                        ? String(videoLink.href)
                        : String(videoLink.dataset.frame);
                }, 50);
                return false;
            });
        }, 300);
    }
    // * Video inlaid.
    const videoInlaidList = document.querySelectorAll(
        ".video-inlaid"
    ) as NodeListOf<HTMLLinkElement>;
    for (const videoLink of videoInlaidList) {
        if (!videoLink.getAttribute("type")) {
            throw new Error("Missing attribute type");
        }
        if (!videoLink.getAttribute("href")) {
            throw new Error("Missing attribute href");
        }
        // @ts-ignore
        if (window.__CN_VIDEO[videoLink.getAttribute("type")]) {
            videoLink.innerHTML = "";
            const newIframe = document.createElement("iframe");
            newIframe.frameBorder = "0";
            newIframe.allow = "fullscreen";
            newIframe.width = "1920px";
            newIframe.height = "1080px";
            newIframe.classList.add("w-100");
            newIframe.classList.add("h-100");
            newIframe.setAttribute("allowfullscreen", "allowfullscreen");
            newIframe.src = String(videoLink.getAttribute("href"));
            videoLink.appendChild(newIframe);
        }
    }
    // SWIPER
    const swiperConfig = {
        "swiper-homepage-news": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                1200: {
                    slidesPerView: 3,
                },
            },
        },
        "swiper-news": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            keyboard: {
                enabled: true
            },
            // Navigation arrows
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                // when window width is >= 1200px
                1200: {
                    slidesPerView: 3,
                },
            },
        },
        "swiper-ranges": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                1200: {
                    slidesPerView: 3,
                    spaceBetween: 0,
                },
            },
        },
        "swiper-joinus": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        },
        "swiper-product-pictures": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            // Navigation arrows
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            }
        },
        "swiper-other-products": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            // Navigation arrows
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                // when window width is >= 576px
                576: {
                    slidesPerView: 2,
                    spaceBetween: 0,
                },
            },
        },
    };
    type SwiperSlider = {
        element: HTMLElement;
        swiper: Swiper;
    };
    const swiperVol = document.getElementsByClassName("swiper") as HTMLCollectionOf<HTMLElement>,
        sliders: SwiperSlider[] = [];

    for (const htmlElt of swiperVol) {
        if (!swiperConfig[htmlElt.id as keyof typeof swiperConfig]) {
            throw new Error(`Undefined swiper id ${htmlElt.id}`);
        }

        sliders.push({
            element: htmlElt,
            swiper: new Swiper(
                htmlElt,
                // @ts-ignore
                swiperConfig[htmlElt.id as keyof typeof swiperConfig]
            ),
        });
    }
});