{"version":3,"file":"default/js/productPageVisuals.js","mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;ACZA,oBAAoB,mBAAO,CAAC,4FAAe;;AAE3C;AACA,cAAc,6CAA6C;AAC3D,cAAc,wDAAwD;AACtE,iBAAiB,wDAAwD;AACzE,eAAe,8CAA8C;AAC7D;;AAEA;AACA;AACA,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,sCAAsC;AACtC;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;;;;;;;UC9CA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;;;;;ACtBA;AACA;AACA;AACA;AACA;;AAEA,eAAe,mBAAO,CAAC,wFAAgB;;AAEvC;AACA;AACA;AACA;;AAEA;AACA,gBAAgB,SAAS;AACzB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB,cAAc;AACd;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA,UAAU;AACV;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,KAAK;;AAEL;AACA,CAAC","sources":["webpack://sfra-startup-kit/./cartridges/app_cwf/cartridge/client/default/js/utils/breakpoints.js","webpack://sfra-startup-kit/./cartridges/app_cwf/cartridge/client/default/js/utils/layout.js","webpack://sfra-startup-kit/webpack/bootstrap","webpack://sfra-startup-kit/./cartridges/app_cwf/cartridge/client/default/js/productPageVisuals.js"],"sourcesContent":["/**\n * Store global breakpoints for use across the whole project.\n */\n const breakpoints = {\n    sm: 375,\n    md: 768,\n    ls: 1024,\n    dp: 1200,\n    lg: 1440,\n    xl: 1600\n};\n\nmodule.exports = breakpoints;\n","const breakpoints = require('./breakpoints');\n\nconst viewportWidth = {\n    mobile: { maxWidth: breakpoints.md - 1, minWidth: 320 },\n    tablet: { maxWidth: breakpoints.ls - 1, minWidth: breakpoints.md },\n    landscape: { maxWidth: breakpoints.dp - 1, minWidth: breakpoints.ls },\n    desktop: { maxWidth: Infinity, minWidth: breakpoints.ls },\n};\n\n/**\n * Get Layout Mode\n * @returns {string} mode\n */\nfunction getLayoutMode() {\n    // to determine layout width should be used window property \"innerWidth\",\n    // because it contains window width including scrollbars, which meets the value of width in mediaqueries in CSS\n    var windowWidth = window.innerWidth;\n    var modeName = '';\n    for (var mode in viewportWidth) { // eslint-disable-line\n        if (windowWidth >= viewportWidth[mode].minWidth && windowWidth <= viewportWidth[mode].maxWidth) {\n            modeName = mode;\n        }\n    }\n\n    return modeName;\n}\n\nconst layout = {\n    viewPorts: viewportWidth,\n    isMobile: function () {\n        return window.matchMedia('(max-width: ' + (viewportWidth.mobile.maxWidth) + 'px)').matches;\n    },\n    isTablet: function () {\n        return window.matchMedia('(max-width: ' + (viewportWidth.tablet.maxWidth) + 'px)').matches\n            && window.matchMedia('(min-width: ' + (viewportWidth.tablet.minWidth) + 'px)').matches;\n    },\n    isDesktop: function () {\n        return window.matchMedia('(min-width: ' + (viewportWidth.desktop.minWidth) + 'px)').matches;\n    },\n    isLandscape: function () {\n        return window.matchMedia('(max-width: ' + (viewportWidth.landscape.maxWidth) + 'px)').matches\n            && window.matchMedia('(min-width: ' + (viewportWidth.landscape.minWidth) + 'px)').matches;\n    },\n    getMode: getLayoutMode\n};\n\nmodule.exports = layout;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// ==============================\n//* PRODUCT PAGE VISUALS\n//\n//? This file manages the product page visuals elements.\n// ==============================\n\nconst layout = require(\"./utils/layout\");\n\n$(() => {\n    const $slider = $(\".product-visuals__container.slider\");\n    const $sliderPager = $(\".slick-pager\");\n    let resizeTimeout = false;\n\n    /**\n     * @return {boolean} Return true if the device is a mobile or a tablet\n     */\n    function isMobileDevice() {\n        return layout.isMobile() || layout.isTablet();\n    }\n\n    /**\n     * Resize Listener\n     */\n    $(window).on(\"resize\", () => {\n        clearTimeout(resizeTimeout);\n        resizeTimeout = setTimeout(initSlider, 300);\n    });\n\n    /**\n     * Listener to update the Slider pager\n     */\n    $slider.on(\"init reInit afterChange\", function (event, slick, currentSlide) {\n        if (isMobileDevice()) {\n            var i = (currentSlide ? currentSlide : 0) + 1;\n            $sliderPager.text(i + \"/\" + slick.slideCount);\n        }\n    });\n\n    /**\n     * Slider initialization according to the device\n     */\n    function initSlider() {\n        if ($slider.children().length > 1) {\n            if (isMobileDevice() && !$slider.hasClass(\"slick-initialized\")) {\n                // Init the slider\n                $slider.slick({\n                    infinite: true,\n                    slidesToShow: 1,\n                    dots: true,\n                    arrows: false\n                });\n            } else if (!isMobileDevice() && $slider.hasClass(\"slick-initialized\")) {\n                $slider.slick(\"unslick\");\n            }\n        }\n    }\n\n    /**\n     * Slider rebuilt\n     */\n    function rebuildSlider() {\n        if ($slider.children().length > 1) {\n            if (isMobileDevice() && $slider.hasClass(\"slick-initialized\")) {\n                $slider.slick(\"unslick\");\n                $slider.find(\"div[id^=\\\"slick-\\\"]\").remove();\n\n                $slider.slick({\n                    infinite: true,\n                    slidesToShow: 1,\n                    dots: true,\n                    arrows: false\n                });\n            }\n        } else {\n            $sliderPager.empty();\n        }\n    }\n\n    const $sizeSelector = $(\".select-size\");\n\n    const productVisualsReady = (callback) => {\n        const sliderVisualsIntervalChecker = setInterval(() => {\n            if ($(\".product-visuals__container > .product-visuals__item\").length) {\n                clearInterval(sliderVisualsIntervalChecker);\n                $(\".product-visuals__container\").css(\"visibility\", \"visible\");\n                callback();\n            }\n        }, 100);\n    };\n\n    $sizeSelector.on(\"change\", () => {\n        if (isMobileDevice()) {\n            $(\".product-visuals__container\").css(\"visibility\", \"hidden\");\n            productVisualsReady(rebuildSlider);\n        }\n    });\n\n    /**\n     * Image Zoom Modal functionality\n     */\n    document.querySelectorAll(\".js-zoom-toggle\").forEach(button => {\n        button.addEventListener(\"click\", function () {\n            const imageUrl = this.getAttribute(\"data-image-url\");\n            document.querySelector(\".js-modal-image\").setAttribute(\"src\", imageUrl);\n        });\n    });\n\n    initSlider();\n});\n"],"names":[],"sourceRoot":""}