{"version":3,"file":"product-media.js","sources":["../../dev/js/product-media.js"],"sourcesContent":[";(async () => {\n  if (!customElements.get('product-media')) {\n    const { default: Swiper, Navigation } = await import('swiper')\n    const { Fancybox } = await import('@fancyapps/ui')\n    await import('sweet-scroll')\n\n    Swiper.use([Navigation])\n\n    class ProductMedia extends HTMLElement {\n      constructor() {\n        super()\n\n        // Options\n        this.options = {\n          closeBtnString: 'Close',\n        }\n\n        // Get options from element data and combine with this.options\n        if (this?.dataset?.options) {\n          const dataOptions = JSON.parse(this.dataset.options)\n          this.options = {\n            ...this.options,\n            ...dataOptions,\n          }\n        }\n\n        this.productMediaItems = this.querySelectorAll('.product-media__item')\n\n        this.productMediaSummary = this.querySelector('.product-media__summary')\n        this.productFormWrapper = document.querySelector('.product__form-wrapper')\n        this.productInfo = document.querySelector('[data-product-info]')\n        this.headerNav = document.querySelector('#header')\n        this.productMediaSummaryButton = this.productMediaSummary.querySelector('.product__atc-trigger')\n        this.productMediaSummaryHiddenClass = 'product-media__summary--hidden'\n        this.productFormElement = document.querySelector('.product__form-wrapper')\n\n        this.swiperElement = this.querySelector('[data-swiper-product-media]')\n        this.swiperOptions = {\n          loop: false,\n          autoplay: false,\n          threshold: 5,\n          touchAngle: 25,\n          navigation: {\n            nextEl: '.swiper-button-next',\n            prevEl: '.swiper-button-prev',\n          },\n          slidesPerView: 1,\n          direction: 'horizontal',\n        }\n\n        // Initialize swiper\n        this.swiperInstance = new Swiper(this.swiperElement, this.swiperOptions)\n\n        // Re-init swiper when Theme Editor is active\n        if (Shopify.designMode && this.swiperInstance) {\n          window.addEventListener('shopify:section:load', () => {\n            this.swiperInstance.update()\n          })\n        }\n\n        // Initialize fancybox\n        this.fancybox()\n\n        // Add scroll event listener to the element\n        window.addEventListener('scroll', this.handleScroll.bind(this))\n\n        // Add events to elements\n        this.productMediaSummaryButton.addEventListener('touchstart', this.scrollToProductInfo.bind(this))\n        this.productMediaSummaryButton.addEventListener('click', this.scrollToProductInfo.bind(this))\n\n        // Check if media summary items should be hidden on first load\n        this.toggleMediaSummaryVisibility()\n      }\n\n      /*\n       * Create fancybox\n       */\n      fancybox() {\n        // Check if Fancybox exists\n        if (typeof Fancybox == 'undefined') {\n          return false\n        }\n\n        const closeBtnInnerHtml = `\n          <span>${this.options.closeBtnString}</span>\n          <svg class=\"icon icon-close icon--lg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <title>${this.options.closeBtnString}</title>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.34338 6.34315C6.7339 5.95262 7.36707 5.95262 7.75759 6.34315L12.0002 10.5858L16.2429 6.34315C16.6334 5.95262 17.2666 5.95262 17.6571 6.34315C18.0476 6.73367 18.0476 7.36683 17.6571 7.75736L13.4144 12L17.6571 16.2426C18.0476 16.6332 18.0476 17.2663 17.6571 17.6569C17.2666 18.0474 16.6334 18.0474 16.2429 17.6569L12.0002 13.4142L7.75759 17.6569C7.36707 18.0474 6.7339 18.0474 6.34338 17.6569C5.95285 17.2663 5.95285 16.6332 6.34338 16.2426L10.586 12L6.34338 7.75736C5.95285 7.36684 5.95285 6.73367 6.34338 6.34315Z\" fill=\"currentColor\"></path>\n          </svg>\n        `\n\n        // Scope change for fancybox events\n        const self = this\n\n        const fancyboxOptions = {\n          animated: false,\n          showClass: false,\n          mainClass: 'product-media-fancybox',\n          autoFocus: false,\n          placeFocusBack: false,\n          Toolbar: {\n            items: {\n              counter: {\n                type: 'div',\n                class: 'fancybox__counter',\n                html: '<span data-fancybox-index=\"\"></span>&nbsp;/&nbsp;<span data-fancybox-count=\"\"></span>',\n                tabindex: -1,\n                position: 'left',\n              },\n              close: {\n                type: 'button',\n                label: 'CLOSE',\n                class: 'button button--outline product-media-fancybox__toolbar-close-btn',\n                html: closeBtnInnerHtml,\n                tabindex: 1,\n                click: function (event) {\n                  event.stopPropagation()\n                  event.preventDefault()\n                  this.fancybox.close()\n                },\n              },\n            },\n          },\n          Carousel: {\n            on: {\n              change: (carousel, slide) => {\n                // Swipe slide to same slide as in fancybox\n                if (slide >= 0) {\n                  self.swiperInstance.slideTo(slide)\n                }\n              },\n            },\n          },\n          on: {\n            ready: (fancybox) => {\n              const toolbarCloseBtn = fancybox.$container.querySelector('.product-media-fancybox__toolbar-close-btn')\n\n              if (!toolbarCloseBtn) return\n\n              toolbarCloseBtn.classList.remove('carousel__button')\n              toolbarCloseBtn.classList.add('hidden')\n            },\n            done: (fancybox) => {\n              const toolbarCloseBtn = fancybox.$container.querySelector('.product-media-fancybox__toolbar-close-btn')\n\n              if (!toolbarCloseBtn) return\n\n              toolbarCloseBtn.blur()\n              toolbarCloseBtn.classList.remove('hidden')\n            },\n          },\n        }\n\n        Fancybox.bind('[data-fancybox]', fancyboxOptions)\n      }\n\n      /**\n       * Check if media summary items should be hidden\n       */\n      toggleMediaSummaryVisibility() {\n        const scrollOffset = window.innerHeight - this.productMediaSummary.offsetHeight\n        this.productMediaSummary.classList.toggle(this.productMediaSummaryHiddenClass, this.productFormElement.getBoundingClientRect().top <= scrollOffset)\n      }\n\n      /**\n       * Handle scroll on element\n       */\n      handleScroll() {\n        // Scope it\n        const self = this\n\n        // Check if media summary items should be hidden\n        this.toggleMediaSummaryVisibility()\n\n        // Check if the add to cart part should be sticky\n        const fixedClass = 'product__form-wrapper--fixed'\n        let boundaryOffset = self.productInfo.getBoundingClientRect().top\n        let checkScrollOffset = 0 - self.headerNav.getBoundingClientRect().height\n\n        self.productFormWrapper.classList.toggle(fixedClass, boundaryOffset < checkScrollOffset)\n      }\n\n      /**\n       * Bind event for scrolling\n       * @return void\n       */\n      bindScrollToReviews() {\n        this.indicationElements.forEach((elem) => {\n          if (elem.hasAttribute('data-product-reviews-indication-link')) {\n            const reviewScroller = new SweetScroll()\n\n            elem.addEventListener('click', (event) => {\n              event.preventDefault()\n              const headerHeight = document.getElementById('shopify-section-header').offsetHeight\n\n              reviewScroller.to('product-reviews', {\n                offset: -(headerHeight + 32),\n                duration: 1200,\n                easing: 'easeOutExpo',\n              })\n            })\n          }\n        })\n      }\n\n      /**\n       * Scroll to product form\n       */\n      scrollToProductInfo() {\n        const productInfoScroller = new SweetScroll()\n        const productInfoSelector = '.product__form-wrapper'\n        const productInfoElement = document.querySelector(productInfoSelector)\n        const headerHeight = document.getElementById('shopify-section-header').offsetHeight - 1\n\n        // Check if product info element exists\n        if (productInfoElement) {\n          productInfoScroller.to(productInfoSelector, {\n            offset: -headerHeight,\n            duration: 1200,\n            easing: 'easeOutExpo',\n          })\n        }\n      }\n    }\n\n    customElements.define('product-media', ProductMedia)\n  }\n})()\n"],"names":["customElements","get","default","Swiper","Navigation","import","Fancybox","use","ProductMedia","HTMLElement","constructor","super","this","options","closeBtnString","dataset","dataOptions","JSON","parse","productMediaItems","querySelectorAll","productMediaSummary","querySelector","productFormWrapper","document","productInfo","headerNav","productMediaSummaryButton","productMediaSummaryHiddenClass","productFormElement","swiperElement","swiperOptions","loop","autoplay","threshold","touchAngle","navigation","nextEl","prevEl","slidesPerView","direction","swiperInstance","Shopify","designMode","window","addEventListener","update","fancybox","handleScroll","bind","scrollToProductInfo","toggleMediaSummaryVisibility","closeBtnInnerHtml","self","fancyboxOptions","animated","showClass","mainClass","autoFocus","placeFocusBack","Toolbar","items","counter","type","class","html","tabindex","position","close","label","click","event","stopPropagation","preventDefault","Carousel","on","change","carousel","slide","slideTo","ready","toolbarCloseBtn","$container","classList","remove","add","done","blur","scrollOffset","innerHeight","offsetHeight","toggle","getBoundingClientRect","top","fixedClass","boundaryOffset","checkScrollOffset","height","bindScrollToReviews","indicationElements","forEach","elem","hasAttribute","reviewScroller","SweetScroll","headerHeight","getElementById","to","offset","duration","easing","productInfoScroller","productInfoSelector","productInfoElement","define"],"mappings":"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"}