{"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":""}