{"version":3,"file":"js/app.f79af6f468a9c7541f82.js","mappings":"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","sources":["webpack:///./resources/area/web/default/js/components/catalog/product/ProductMedia.vue?460f","webpack:///./resources/area/web/default/js/components/catalog/product/ProductMedia.vue?421d","webpack:///./resources/area/web/default/js/components/catalog/product/ProductMedia.vue?d532","webpack:///./resources/area/web/default/js/components/catalog/product/ProductMedia.vue?d29e"],"sourcesContent":["\nimport {Component, Prop, Vue} from 'vue-property-decorator';\nimport Swiper from 'swiper';\nimport {Navigation} from 'swiper/modules';\nimport ServiceContainer from '@flashpointbv/solar-service-container';\n\n@Component({\n  name: 'catalog-product-media',\n  components: {\n    ...ServiceContainer().getComponents(),\n    Swiper,\n    Navigation,\n  },\n})\n\nexport default class extends Vue {\n  @Prop({default: []}) private readonly mediaGallery: Array<Array<object>>;\n  @Prop() private readonly productData: object;\n\n  private showFullScreen: boolean = false;\n\n  private mediaSwiper: Swiper | null = null;\n  private thumbsSwiper: Swiper | null = null;\n\n  private activeMediaGallery: Array<object> = [];\n\n  private defaultPlaceholder: string = '/area/web/default/assets/images/media-gallery-placeholder.png';\n\n  private imageSrc(value: string, size: number): string {\n    if (typeof value === 'undefined' || value === null || value === undefined) {\n      return this.defaultPlaceholder;\n    }\n\n    return `${this.$solarCdnBaseUrl}/cdn/resize-extended/rs:fill/w:${size}/extend:true/bl:10.0/q:40/path/media/catalog/product${value}`;\n  }\n\n  private imageDataSrc(value: string, size: number): string {\n    return `${this.$solarCdnBaseUrl}/cdn/resize-extended/rs:fill/w:${size}/extend:true/path/media/catalog/product${value} 1x,\n    ${this.$solarCdnBaseUrl}/cdn/resize-extended/rs:fill/w:${size * 2}/extend:true/path/media/catalog/product${value} 2x`;\n  }\n\n  private created(): void {\n    this.$nextTick(() => {\n      this.mediaSwiper = new Swiper(`.product__media-container .--images .swiper`, {\n        slidesPerView: 1,\n        roundLengths: true,\n      });\n\n      this.thumbsSwiper = new Swiper(`.product__media-container .--thumbnails .swiper`, {\n        modules: [Navigation],\n        slidesPerView: 4,\n        spaceBetween: 10,\n        roundLengths: true,\n        direction: 'vertical',\n        navigation: {\n          nextEl: `.product__media-container .--thumbnails .swiper__button.--next`,\n          prevEl: `.product__media-container .--thumbnails .swiper__button.--prev`,\n        },\n      });\n\n      this.mediaSwiper?.on('slideChange', () => {\n        this.$eventBus.$emit('parseActiveIndex', this.mediaSwiper?.activeIndex);\n      });\n    });\n\n    this.activeMediaGallery = this.mediaGallery.flat();\n\n    this.$eventBus.$on('updateProductImage', (index: number) => {\n      this.activeMediaGallery = this.mediaGallery[index];\n      this.$nextTick(() => {\n        this.mediaSwiper?.update();\n        this.thumbsSwiper?.update();\n        const images = document.querySelectorAll('.product__media-container .swiper-slide img');\n        images.forEach((image) => {\n          image.classList.add('lazyload');\n        });\n      });\n    });\n\n    this.$eventBus.$on('parseFullscreenActiveIndex', (index: number) => {\n      this.slideTo(index);\n    });\n  }\n\n  private slideTo(index: number): void {\n    this.mediaSwiper.slideTo(index);\n  }\n\n  private closeFullscreen(): void {\n    this.showFullScreen = false;\n    document.body.classList.remove('no-scroll');\n  }\n\n  private showFullscreen(): void {\n    this.showFullScreen = true;\n    document.body.classList.add('no-scroll');\n  }\n\n  private mounted(): void {\n    window.addEventListener('keyup', (e) => {\n      if (e.key === 'Escape') {\n        this.closeFullscreen();\n      }\n    });\n\n    const placeholder = document.getElementById('mediaGalleryPlaceholder');\n    if (placeholder) {\n      placeholder.style.visibility = 'hidden';\n    }\n  }\n}\n","import { render, staticRenderFns } from \"./ProductMedia.vue?vue&type=template&id=397726da&scoped=true&\"\nimport script from \"./ProductMedia.vue?vue&type=script&lang=ts&\"\nexport * from \"./ProductMedia.vue?vue&type=script&lang=ts&\"\nimport style0 from \"./ProductMedia.vue?vue&type=style&index=0&id=397726da&prod&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"397726da\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../../../../../../node_modules/ts-loader/index.js??clonedRuleSet-26.use[0]!../../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductMedia.vue?vue&type=script&lang=ts&\"; export default mod; export * from \"-!../../../../../../../../node_modules/ts-loader/index.js??clonedRuleSet-26.use[0]!../../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductMedia.vue?vue&type=script&lang=ts&\"","var render = function render(){var _vm=this,_c=_vm._self._c,_setup=_vm._self._setupProxy;return _c('section',[_c('div',{staticClass:\"product__media-container --absolute\"},[_c('div',{staticClass:\"--thumbnails hide-for-small-only\"},[_c('button',{staticClass:\"swiper__button --prev\"}),_vm._v(\" \"),_c('div',{ref:\"thumbSlider\",staticClass:\"swiper\"},[_c('div',{staticClass:\"swiper-wrapper\"},_vm._l((_vm.activeMediaGallery),function(image,i){return _c('div',{staticClass:\"swiper-slide image-container\"},[_c('span',{on:{\"click\":function($event){return _vm.slideTo(i)}}},[_c('img',{staticClass:\"lazyload\",attrs:{\"alt\":image['version_id'],\"src\":_vm.imageSrc(image['image_url'] || image['url'], 100),\"data-srcset\":_vm.imageDataSrc(image['image_url'] || image['url'], 100),\"width\":\"100\",\"height\":\"100\"}})])])}),0)]),_vm._v(\" \"),_c('button',{staticClass:\"swiper__button --next\"})]),_vm._v(\" \"),_c('div',{staticClass:\"--images\"},[_c('div',{ref:\"gallerySlider\",staticClass:\"swiper\"},[_c('div',{staticClass:\"swiper-wrapper\"},_vm._l((_vm.activeMediaGallery),function(image){return _c('div',{staticClass:\"swiper-slide image-container\"},[_c('img',{staticClass:\"lazyload\",attrs:{\"alt\":image['version_id'],\"src\":_vm.imageSrc(image['image_url'] || image['url'], 610),\"data-srcset\":_vm.imageDataSrc(image['image_url'] || image['url'], 610),\"width\":\"610\",\"height\":\"610\"},on:{\"click\":function($event){return _vm.showFullscreen()}}})])}),0)])])]),_vm._v(\" \"),_c('transition',{attrs:{\"name\":\"fade\"}},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.showFullScreen),expression:\"showFullScreen\"}],staticClass:\"fullscreen__container\"},[_c('div',{staticClass:\"--header\"},[_c('h2',[_vm._v(_vm._s(_vm.productData['name']))]),_vm._v(\" \"),_c('button',{on:{\"click\":function($event){return _vm.closeFullscreen()}}})]),_vm._v(\" \"),_c('catalog-product-media-fullscreen',{attrs:{\"media-gallery\":_vm.mediaGallery,\"product-data\":_vm.productData}})],1)])],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }"],"names":["Vue","showFullScreen","mediaSwiper","thumbsSwiper","activeMediaGallery","defaultPlaceholder","imageSrc","value","size","undefined","this","$solarCdnBaseUrl","imageDataSrc","created","$nextTick","slidesPerView","roundLengths","modules","Navigation","spaceBetween","direction","navigation","nextEl","prevEl","on","$eventBus","$emit","activeIndex","mediaGallery","flat","$on","index","update","document","querySelectorAll","forEach","image","classList","add","slideTo","closeFullscreen","body","remove","showFullscreen","mounted","window","addEventListener","e","key","placeholder","getElementById","style","visibility","Prop","default","Array","Component","name","components","getComponents","Swiper","render","_vm","_c","_self","_setupProxy","staticClass","_v","ref","_l","i","$event","attrs","directives","rawName","expression","_s","productData","staticRenderFns"],"sourceRoot":""}