{"version":3,"sources":["webpack:///./src/Feature/ProductGallery/code/Scripts/components/ProductGallery/ProductGallery.vue?a421","webpack:///src/Feature/ProductGallery/code/Scripts/components/ProductGallery/ProductGallery.vue","webpack:///./src/Feature/ProductGallery/code/Scripts/components/ProductGallery/ProductGallery.vue?28c8","webpack:///./src/Feature/ProductGallery/code/Scripts/components/ProductGallery/ProductGallery.vue","webpack:///./src/Feature/ProductGallery/index.js","webpack:///./src/Feature/ProductGallery/code/Scripts/components/ProductGallery/ProductGallery.scss"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","directives","name","rawName","value","shouldDisplayArrows","firstThumbInView","expression","attrs","upArrowAlt","on","$event","displayPrevThumbnail","ref","_t","hasMoreThumbnails","downArrowAlt","displayNextThumbnail","staticRenderFns","component","VueModule","components","ProductGallery"],"mappings":"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","file":"ProductGallery.js?v=466b824b","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"product-gallery\"},[_c('div',{staticClass:\"product-gallery__desktop\"},[_c('div',[_c('div',{staticClass:\"btn-container\"},[_c('button',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.shouldDisplayArrows && _vm.firstThumbInView > 0),expression:\"shouldDisplayArrows && firstThumbInView > 0\"}],staticClass:\"product-gallery--button product-gallery--button-prev\",attrs:{\"aria-label\":_vm.upArrowAlt},on:{\"click\":function($event){return _vm.displayPrevThumbnail()}}},[_c('svg',{staticClass:\"icon\"},[_c('use',{attrs:{\"xlink:href\":\"#chevron-right\"}})])])]),_c('div',{ref:\"thumbnails\",staticClass:\"thumbnails\"},[_vm._t(\"thumbnails\")],2),_c('div',{staticClass:\"btn-container\"},[_c('button',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.shouldDisplayArrows && _vm.hasMoreThumbnails),expression:\"shouldDisplayArrows && hasMoreThumbnails\"}],staticClass:\"product-gallery--button product-gallery--button-next\",attrs:{\"aria-label\":_vm.downArrowAlt},on:{\"click\":function($event){return _vm.displayNextThumbnail()}}},[_c('svg',{staticClass:\"icon\"},[_c('use',{attrs:{\"xlink:href\":\"#chevron-right\"}})])])])]),_c('div',{ref:\"gallery\",staticClass:\"gallery\"},[_vm._t(\"default\")],2)]),_c('div',{staticClass:\"product-gallery__mobile\"},[_vm._t(\"mobile\")],2)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"product-gallery\">\r\n    <div class=\"product-gallery__desktop\">\r\n      <div>\r\n        <div class=\"btn-container\">\r\n          <button\r\n            v-show=\"shouldDisplayArrows && firstThumbInView > 0\"\r\n            :aria-label=\"upArrowAlt\"\r\n            class=\"product-gallery--button product-gallery--button-prev\"\r\n            @click=\"displayPrevThumbnail()\"\r\n          >\r\n            <svg class=\"icon\">\r\n              <use xlink:href=\"#chevron-right\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <div\r\n          ref=\"thumbnails\"\r\n          class=\"thumbnails\"\r\n        >\r\n          <slot name=\"thumbnails\" />\r\n        </div>\r\n\r\n        <div class=\"btn-container\">\r\n          <button\r\n            v-show=\"shouldDisplayArrows && hasMoreThumbnails\"\r\n            :aria-label=\"downArrowAlt\"\r\n            class=\"product-gallery--button product-gallery--button-next\"\r\n            @click=\"displayNextThumbnail()\"\r\n          >\r\n            <svg class=\"icon\">\r\n              <use xlink:href=\"#chevron-right\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div\r\n        ref=\"gallery\"\r\n        class=\"gallery\"\r\n      >\r\n        <slot />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"product-gallery__mobile\">\r\n      <slot name=\"mobile\" />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    name: 'ProductGallery',\r\n    props: {\r\n      upArrowAlt: {\r\n        type: String,\r\n        required: false,\r\n        default: 'Up Arrow'\r\n      },\r\n      downArrowAlt: {\r\n        type: String,\r\n        required: false,\r\n        default: 'Down Arrow'\r\n      },\r\n      maxDisplayedThumbnails: {\r\n        type: Number,\r\n        required: false,\r\n        default: 6\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        thumbnailList: null,\r\n        bigMediaList: null,\r\n        activeIndex: null,\r\n        firstThumbInView: 0,\r\n        thumbnailHeight: 0,\r\n        thumbnailCount: 0,\r\n      };\r\n    },\r\n    computed: {\r\n      firstThumbInViewTop() {\r\n        return this.thumbnailList[this.firstThumbInView].offsetTop - this.thumbnailList[0].offsetTop;\r\n      },\r\n      hasMoreThumbnails() {\r\n        return this.thumbnailCount > this.maxDisplayedThumbnails + this.firstThumbInView;\r\n      },\r\n      shouldDisplayArrows() {\r\n        return this.thumbnailCount > this.maxDisplayedThumbnails;\r\n      }\r\n    },\r\n    watch: {\r\n      activeIndex(newActive) {\r\n        this.removeActiveClassFromGallery();\r\n        this.bigMediaList[newActive].classList.add('active');\r\n      }\r\n    },\r\n    mounted() {\r\n      if (document.getElementById('main-container')) {\r\n        document.getElementById('main-container').style.overflow = 'inherit';\r\n      }\r\n      window.addEventListener('resize', this.setDisplayedThumbnails);\r\n\r\n      this.$nextTick().then(() => {\r\n        this.thumbnailList = this.$refs.thumbnails.children[0].children;\r\n        this.thumbnailCount = this.thumbnailList.length;\r\n        this.bigMediaList = this.$refs.gallery.children[0].children;\r\n        this.setGalleryIds();\r\n        this.addEventListenersToThumbnails();\r\n        this.thumbnailList[0].classList.add('active');\r\n        this.activeIndex = 0;\r\n        this.setDisplayedThumbnails();\r\n      });\r\n    },\r\n    methods: {\r\n      addEventListenersToThumbnails() {\r\n        for (let i = 0; i < this.thumbnailList.length; i++) {\r\n          const element = this.thumbnailList[i];\r\n          element.addEventListener('click', this.clickEvent);\r\n          element.setAttribute('aria-controls', `product-gallery--${i}`);\r\n          element.setAttribute('aria-expanded', i ? 'false' : 'true');\r\n        }\r\n      },\r\n      setGalleryIds() {\r\n        for (let i = 0; i < this.bigMediaList.length; i++) {\r\n          const element = this.bigMediaList[i];\r\n          element.setAttribute('id', `product-gallery--${i}`);\r\n        }\r\n      },\r\n      clickEvent(e) {\r\n        this.removeActiveClassFromThumbnails();\r\n        e.target.classList.add('active');\r\n        e.target.setAttribute('aria-expanded', 'true');\r\n        this.$emit('pauseVideo');\r\n        this.activeIndex = this.getActiveThumbnail();\r\n      },\r\n      setDisplayedThumbnails() {\r\n        this.thumbnailHeight = this.thumbnailList[0] ? this.thumbnailList[0].offsetHeight : null;\r\n        const maxHeight = (this.thumbnailList[this.maxDisplayedThumbnails] && this.$refs.thumbnails) ? `${this.thumbnailList[this.maxDisplayedThumbnails].offsetTop - this.$refs.thumbnails.offsetTop}px` : 'none';\r\n        this.$refs.thumbnails.style.maxHeight = maxHeight;\r\n      },\r\n      removeActiveClassFromThumbnails() {\r\n        for (let i = 0; i < this.thumbnailList.length; i++) {\r\n          const element = this.thumbnailList[i];\r\n          element.classList.remove('active');\r\n          element.setAttribute('aria-expanded', 'false');\r\n        }\r\n      },\r\n      removeActiveClassFromGallery() {\r\n        for (let i = 0; i < this.bigMediaList.length; i++) {\r\n          const element = this.bigMediaList[i];\r\n          element.classList.remove('active');\r\n        }\r\n      },\r\n      getActiveThumbnail() {\r\n        for (let i = 0; i < this.thumbnailList.length; i++) {\r\n          const element = this.thumbnailList[i];\r\n          if (element.classList.contains('active')) {\r\n            return i;\r\n          }\r\n        }\r\n        return 0;\r\n      },\r\n      displayNextThumbnail() {\r\n        if (!this.hasMoreThumbnails) {\r\n          return;\r\n        }\r\n\r\n        this.firstThumbInView++;\r\n        for (let i = 0; i < this.thumbnailList.length; i++) {\r\n          const element = this.thumbnailList[i];\r\n          element.style.transform = `translateY(-${this.firstThumbInViewTop}px)`;\r\n        }\r\n      },\r\n      displayPrevThumbnail() {\r\n        this.firstThumbInView--;\r\n        for (let i = 0; i < this.thumbnailList.length; i++) {\r\n          const element = this.thumbnailList[i];\r\n          element.style.transform = `translateY(${-this.firstThumbInViewTop}px)`;\r\n        }\r\n      }\r\n    }\r\n  };\r\n</script>\r\n\r\n<style src=\"./ProductGallery.scss\" lang=\"scss\">\r\n","import mod from \"-!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductGallery.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductGallery.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ProductGallery.vue?vue&type=template&id=518a2b6e&\"\nimport script from \"./ProductGallery.vue?vue&type=script&lang=js&\"\nexport * from \"./ProductGallery.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ProductGallery.scss?vue&type=style&index=0&lang=scss&\"\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  null,\n  null\n  \n)\n\nexport default component.exports","import { VueModule } from '@Foundation/utilities';\r\nimport ProductGallery from './code/Scripts/components/ProductGallery/ProductGallery.vue';\r\nexport default VueModule({\r\n  components: {\r\n    ProductGallery  }\r\n});\r\n","import mod from \"-!../../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./ProductGallery.scss?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./ProductGallery.scss?vue&type=style&index=0&lang=scss&\""],"sourceRoot":""}