{"version":3,"file":"block-carousels.js","names":[],"sources":["../resources/javascript/block-carousels.js"],"sourcesContent":["import { handleFragmentInit } from './pdp/fragments';\nimport { replaceElementHTML } from './pdp/replace';\n\nlet swiperModule;\n\n/**\n * Does this carousel need Swiper at the current viewport\n *\n * @param {HTMLElement} carousel\n * @returns {boolean}\n */\nconst needsSwiper = carousel => {\n    const media = carousel.dataset.carouselMedia;\n\n    if (media && !window.matchMedia(media).matches) {\n        return false;\n    }\n\n    return carousel.querySelectorAll('.swiper-slide').length > 1;\n};\n\n/**\n * Load Swiper only once a carousel on the page needs it\n *\n * @returns {Promise<Function>} initialiseSwiper\n */\nconst loadSwiper = async () => {\n    swiperModule ??= import('./swiper/swiper.js');\n\n    return (await swiperModule).initialiseSwiper;\n};\n\nconst getActiveExploreFabricsSlide = carousel =>\n    carousel.querySelector('.swiper-slide-active') ??\n    carousel.querySelector('.swiper-slide:not(.swiper-slide-duplicate)') ??\n    carousel.querySelector('.swiper-slide');\n\nconst updateApplyFabricButton = (applyBtn, activeSlide) => {\n    if (applyBtn && activeSlide?.dataset.variantUrl) {\n        applyBtn.setAttribute('lp-get', activeSlide.dataset.variantUrl);\n    }\n};\n\nconst initExploreFabricsCarousel = async carousel => {\n    if (carousel.swiper) {\n        carousel.swiper.destroy(true, true);\n    }\n\n    const initialiseSwiper = await loadSwiper();\n    const thumbsSwiper = initialiseSwiper(carousel);\n\n    if (!thumbsSwiper) {\n        return;\n    }\n\n    const updateActiveFabric = () => {\n        const block = carousel.closest('.block') ?? document;\n        const activeSlide = getActiveExploreFabricsSlide(carousel);\n\n        const updates = [\n            { selector: '[data-insert-fabric-name]', key: 'fabricName' },\n            {\n                selector: '[data-insert-fabric-description]',\n                key: 'fabricDescription',\n            },\n            { selector: '[data-insert-fabric-price]', key: 'fabricPrice' },\n            { selector: '[data-insert-cylindo-image]', key: 'cylindoUrl' },\n        ];\n\n        updates.forEach(({ selector, key }) => {\n            block.querySelectorAll(selector).forEach(element => {\n                if (element.tagName === 'IMG') {\n                    element.src = activeSlide?.dataset[key] ?? '';\n                } else {\n                    element.textContent = activeSlide?.dataset[key] ?? '';\n                }\n            });\n        });\n\n        updateApplyFabricButton(\n            block.querySelector('[data-apply-fabric-btn]'),\n            activeSlide\n        );\n    };\n\n    thumbsSwiper.on('slideChangeTransitionEnd', updateActiveFabric);\n};\n\ndocument.addEventListener(\n    'click',\n    e => {\n        if (!(e.target instanceof Element)) {\n            return;\n        }\n\n        const applyBtn = e.target.closest('[data-apply-fabric-btn]');\n        if (!applyBtn) {\n            return;\n        }\n\n        const block = applyBtn.closest('.block') ?? document;\n        const carousel = block.querySelector(\n            '.swiper[data-carousel-type=\"exploreFabrics\"]'\n        );\n        const activeSlide = carousel\n            ? getActiveExploreFabricsSlide(carousel)\n            : null;\n        updateApplyFabricButton(applyBtn, activeSlide);\n    },\n    true\n);\n\nhandleFragmentInit(async ({ replace }) => {\n    if (replace?.range) {\n        replaceElementHTML('.block--range', replace.range);\n    }\n\n    const carousels = [...document.querySelectorAll('.block .swiper')].filter(\n        needsSwiper\n    );\n\n    if (!carousels.length) {\n        return;\n    }\n\n    const initialiseSwiper = await loadSwiper();\n\n    for (const carousel of carousels) {\n        if (carousel.dataset.carouselType === 'exploreFabrics') {\n            initExploreFabricsCarousel(carousel);\n            continue;\n        }\n\n        initialiseSwiper(carousel);\n    }\n});\n\ndocument.addEventListener('d3r.live.replaced', () => {\n    for (const carousel of document.querySelectorAll(\n        '.block .swiper[data-carousel-type=\"exploreFabrics\"]'\n    )) {\n        initExploreFabricsCarousel(carousel);\n    }\n});\n"],"mappings":"kDAGA,IAAI,EAQJ,MAAM,EAAc,GAAY,CAC5B,IAAM,EAAQ,EAAS,QAAQ,cAM/B,OAJI,GAAS,CAAC,OAAO,WAAW,CAAK,CAAC,CAAC,QAC5B,GAGJ,EAAS,iBAAiB,eAAe,CAAC,CAAC,OAAS,CAC/D,EAOM,EAAa,UACf,AAAA,IAAiB,OAAO,6BAAqB,CAAA,KAAA,GAAA,EAAA,CAAA,GAErC,MAAM,EAAA,CAAc,kBAG1B,EAA+B,GACjC,EAAS,cAAc,sBAAsB,GAC7C,EAAS,cAAc,4CAA4C,GACnE,EAAS,cAAc,eAAe,EAEpC,GAA2B,EAAU,IAAgB,CACnD,GAAY,GAAA,MAAA,EAAa,QAAQ,YACjC,EAAS,aAAa,SAAU,EAAY,QAAQ,UAAU,CAEtE,EAEM,EAA6B,KAAM,IAAY,CAC7C,EAAS,QACT,EAAS,OAAO,QAAQ,GAAM,EAAI,EAItC,IAAM,GAAe,MADU,EAAW,EAAA,CACJ,CAAQ,EAEzC,GAkCL,EAAa,GAAG,+BA9BiB,CAC7B,IAAM,EAAQ,EAAS,QAAQ,QAAQ,GAAK,SACtC,EAAc,EAA6B,CAAQ,EAYzD,CATI,CAAE,SAAU,4BAA6B,IAAK,YAAa,EAC3D,CACI,SAAU,mCACV,IAAK,mBACT,EACA,CAAE,SAAU,6BAA8B,IAAK,aAAc,EAC7D,CAAE,SAAU,8BAA+B,IAAK,YAAa,CAAA,CAG1D,CAAC,SAAS,CAAE,WAAU,SAAU,CACnC,EAAM,iBAAiB,CAAQ,CAAC,CAAC,QAAQ,GAAW,CAC5C,EAAQ,UAAY,MACpB,EAAQ,IAAM,GAAa,QAAQ,IAAQ,GAE3C,EAAQ,YAAc,GAAa,QAAQ,IAAQ,EAE3D,CAAC,CACL,CAAC,EAED,EACI,EAAM,cAAc,yBAAyB,EAC7C,CACJ,CACJ,CAE8D,CAClE,EAEA,SAAS,iBACL,QACA,GAAK,CACD,GAAI,EAAE,EAAE,kBAAkB,SACtB,OAGJ,IAAM,EAAW,EAAE,OAAO,QAAQ,yBAAyB,EAC3D,GAAI,CAAC,EACD,OAIJ,IAAM,GADQ,EAAS,QAAQ,QAAQ,GAAK,SAAA,CACrB,cACnB,8CACJ,EACM,EAAc,EACd,EAA6B,CAAQ,EACrC,KACN,EAAwB,EAAU,CAAW,CACjD,EACA,EACJ,EAEA,EAAmB,MAAO,CAAE,aAAc,CAClC,GAAA,MAAA,EAAS,OACT,EAAmB,gBAAiB,EAAQ,KAAK,EAGrD,IAAM,EAAY,CAAC,GAAG,SAAS,iBAAiB,gBAAgB,CAAC,CAAC,CAAC,OAC/D,CACJ,EAEA,GAAI,CAAC,EAAU,OACX,OAGJ,IAAM,EAAmB,MAAM,EAAW,EAE1C,IAAK,IAAM,KAAY,EAAW,CAC9B,GAAI,EAAS,QAAQ,eAAiB,iBAAkB,CACpD,EAA2B,CAAQ,EACnC,QACJ,CAEA,EAAiB,CAAQ,CAC7B,CACJ,CAAC,EAED,SAAS,iBAAiB,wBAA2B,CACjD,IAAK,IAAM,KAAY,SAAS,iBAC5B,qDACJ,EACI,EAA2B,CAAQ,CAE3C,CAAC"}