{"version":3,"sources":["webpack:///./src/components/Hotspot/Hotspot.vue?8704","webpack:///src/components/Hotspot/Hotspot.vue","webpack:///./src/components/Hotspot/Hotspot.vue?8a6c","webpack:///./src/components/Hotspot/Hotspot.vue","webpack:///./src/components/Hotspot/MgnlHotspot.vue?ef21","webpack:///src/components/Hotspot/MgnlHotspot.vue","webpack:///./src/components/Hotspot/MgnlHotspot.vue?28ac","webpack:///./src/components/Hotspot/MgnlHotspot.vue","webpack:///./src/components/Modal/Modal.vue?de0a","webpack:///src/components/Modal/Modal.vue","webpack:///./src/components/Modal/Modal.vue?e38b","webpack:///./src/components/Modal/Modal.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","$attrs","_v","_s","title","_f","mainImage","image","_l","item","index","$config","editMode","directives","name","rawName","value","expression","staticStyle","style","btnStyle","top","left","uuid","class","isNewItem","showLabel","nativeOn","$event","handleClick","scopedSlots","_u","key","fn","proxy","domProps","text","modal","content","model","callback","$$v","$set","_e","colorName","colorCode","active","activeEl","on","swapImage","productColor","staticRenderFns","component","_b","_t","showModal","mixins","data","props","show","type","Boolean","required","mounted","console","log","$root","$on","watch","val"],"mappings":"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","file":"js/chunk-1d82b74c-8fde910c9ca822485a1c.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:\"section-hotspot\",attrs:{\"id\":(\"uuid-\" + (_vm.$attrs.uuid))}},[_c('div',{staticClass:\"section\"},[_c('div',{staticClass:\"section__container\"},[_c('h2',{staticClass:\"show-for-sr-visible\"},[_vm._v(_vm._s(_vm.title))]),_c('div',{staticClass:\"hotspot\"},[_c('div',{staticClass:\"hotspot__content\"},[_c('pg-image',{attrs:{\"lazy-src\":_vm._f(\"mgnlMedia\")(_vm.mainImage,'url'),\"width\":_vm._f(\"mgnlMedia\")(_vm.image,'width', 0),\"height\":_vm._f(\"mgnlMedia\")(_vm.image,'height', 0)}}),_vm._l((_vm.hotspotItem),function(item,index){return [(!_vm.$config.editMode)?_c('pg-button',{staticClass:\"hotspot__button-more\",style:(_vm.btnStyle(item.top,item.left)),attrs:{\"styleType\":\"icon\",\"icon\":\"icon-plus-fill\"},nativeOn:{\"click\":function($event){return _vm.handleClick(item)}},scopedSlots:_vm._u([(item.showLabel)?{key:\"visibleContent\",fn:function(){return [_c('span',{staticClass:\"hotspot__button-label\"},[_vm._v(\" \"+_vm._s(item.title)+\" \")])]},proxy:true}:null],null,true)},[_c('msg',{attrs:{\"id\":'common.hotspot.open.aria',\"bare\":true}}),_c('div',{staticClass:\"hide\",attrs:{\"aria-hidden\":\"true\"},domProps:{\"innerHTML\":_vm._s(item.text)}})],1):_c('div',[_c('div',{directives:[{name:\"dragged\",rawName:\"v-dragged\",value:(_vm.onDragged),expression:\"onDragged\"}],staticClass:\"hotspot__button-more button button--icon\",staticStyle:{\"cursor\":\"grab\"},style:(_vm.btnStyle(item.top,item.left)),attrs:{\"data-uuid\":item.uuid}},[_c('i',{staticClass:\"icon-plus-fill\",class:_vm.isNewItem(item.top,item.left)},[_c('span',{staticClass:\"show-for-sr\"},[_c('msg',{attrs:{\"id\":'common.hotspot.open.aria',\"bare\":true}})],1)]),_c('span',{staticClass:\"hotspot__button-label\",class:item.showLabel ? 'hotspot__button-label--show' : ''},[_vm._v(\" \"+_vm._s(item.title)+\" \")])])])]}),(_vm.modal.show)?_c('b-modal',{attrs:{\"title\":_vm.modal.content.title,\"size\":\"sm\",\"hide-footer\":\"\",\"scrollable\":\"\",\"centered\":\"\",\"modal-class\":\"modal--dialog\",\"dialog-class\":\"hotspot__modal-dialog\",\"header-class\":\"modal-header--visually-hidden\",\"body-class\":\"modal-body--no-padding\"},scopedSlots:_vm._u([{key:\"modal-header-close\",fn:function(){return [_c('i',{staticClass:\"close__icon icon-close\",attrs:{\"aria-hidden\":\"true\"}}),_c('span',{staticClass:\"close__label\"},[_c('msg',{attrs:{\"id\":'common.modal.close.text'}})],1)]},proxy:true}],null,false,3354491698),model:{value:(_vm.modal.show),callback:function ($$v) {_vm.$set(_vm.modal, \"show\", $$v)},expression:\"modal.show\"}},[(_vm.modal.content.image)?_c('pg-image',{staticClass:\"modal-hero\",attrs:{\"lazy-src\":_vm._f(\"mgnlMedia\")(_vm.modal.content.image,'url'),\"width\":656,\"height\":480}}):_vm._e(),_c('div',{staticClass:\"modal-body hotspot__modal-content\"},[_c('h3',{staticClass:\"hotspot__modal-title\"},[_vm._v(_vm._s(_vm.modal.content.title))]),_c('div',{staticClass:\"hotspot__modal-text\",domProps:{\"innerHTML\":_vm._s(_vm.modal.content.text)}})])],1):_vm._e()],2),(_vm.colorName && _vm.colorCode)?_c('div',{staticClass:\"hotspot__choose-color\"},[_c('msg',{attrs:{\"id\":\"common.hotspot.choose-color.text\"}}),_c('button',{staticClass:\"hotspot__choose-color-button\",class:{ active : _vm.activeEl === 0 },attrs:{\"type\":\"button\"},on:{\"click\":function($event){return _vm.swapImage(_vm.image, 0)}}},[_c('pg-swatch',{staticClass:\"swatches-color--l\",attrs:{\"label\":_vm.colorName,\"code\":_vm.colorCode}})],1),_vm._l((_vm.productColors),function(item,index){return [_c('button',{staticClass:\"hotspot__choose-color-button\",class:{ active : _vm.activeEl === (index + 1) },attrs:{\"type\":\"button\"},on:{\"click\":function($event){_vm.swapImage(item.productColor, (index + 1))}}},[_c('pg-swatch',{staticClass:\"swatches-color--l\",attrs:{\"label\":item.colorName,\"code\":item.colorCode}})],1)]})],2):_vm._e()])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <section class=\"section-hotspot\" :id=\"`uuid-${$attrs.uuid}`\">\n    <div class=\"section\">\n      <div class=\"section__container\">\n      <h2 class=\"show-for-sr-visible\">{{title}}</h2>\n      <div class=\"hotspot\">\n        <div class=\"hotspot__content\">\n          <pg-image\n              :lazy-src=\"mainImage | mgnlMedia('url')\"\n              :width=\"image | mgnlMedia('width', 0)\"\n              :height=\"image | mgnlMedia('height', 0)\"\n          ></pg-image>\n          <template v-for=\"(item, index) in hotspotItem\">\n            <pg-button v-if=\"!$config.editMode\"\n                       class=\"hotspot__button-more\"\n                       :style=\"btnStyle(item.top,item.left)\"\n                       styleType=\"icon\"\n                       icon=\"icon-plus-fill\"\n                       @click.native=\"handleClick(item)\"\n            >\n              <msg :id=\"'common.hotspot.open.aria'\" :bare=\"true\"/>\n\n              <div v-html=\"item.text\" aria-hidden=\"true\" class=\"hide\"><!-- 4 seo --></div>\n\n              <template v-if=\"item.showLabel\" v-slot:visibleContent>\n                <span class=\"hotspot__button-label\">\n                   {{item.title}}\n                </span>\n\n              </template>\n            </pg-button>\n\n            <div v-else>\n              <div v-dragged=\"onDragged\"\n                   class=\"hotspot__button-more button button--icon\"\n                   :data-uuid=\"item.uuid\"\n                   :style=\"btnStyle(item.top,item.left)\"\n                   style=\"cursor: grab;\"\n              >\n                <i class=\"icon-plus-fill\" :class=\"isNewItem(item.top,item.left)\">\n                <span class=\"show-for-sr\">\n                  <msg :id=\"'common.hotspot.open.aria'\" :bare=\"true\"/>\n                </span>\n                </i>\n                <span class=\"hotspot__button-label\"\n                      :class=\"item.showLabel ? 'hotspot__button-label--show' : ''\"\n                >\n                   {{item.title}}\n                </span>\n              </div>\n            </div>\n          </template>\n          <b-modal\n              v-if=\"modal.show\"\n              v-model=\"modal.show\"\n              :title=\"modal.content.title\"\n              size=\"sm\"\n              hide-footer\n              scrollable\n              centered\n              modal-class=\"modal--dialog\"\n              dialog-class=\"hotspot__modal-dialog\"\n              header-class=\"modal-header--visually-hidden\"\n              body-class=\"modal-body--no-padding\"\n          >\n            <template v-slot:modal-header-close>\n              <i class=\"close__icon icon-close\" aria-hidden=\"true\"></i>\n              <span class=\"close__label\">\n                <msg :id=\"'common.modal.close.text'\"/>\n              </span>\n            </template>\n\n            <pg-image\n                v-if=\"modal.content.image\"\n                :lazy-src=\"modal.content.image | mgnlMedia('url')\"\n                :width=\"656\"\n                :height=\"480\"\n                class=\"modal-hero\"\n            ></pg-image>\n            <div class=\"modal-body hotspot__modal-content\">\n              <h3 class=\"hotspot__modal-title\">{{modal.content.title}}</h3>\n              <div class=\"hotspot__modal-text\" v-html=\"modal.content.text\"></div>\n            </div>\n          </b-modal>\n        </div>\n\n        <div v-if=\"colorName && colorCode\"\n             class=\"hotspot__choose-color\">\n          <msg id=\"common.hotspot.choose-color.text\" />\n\n          <button @click=\"swapImage(image, 0)\"\n                  class=\"hotspot__choose-color-button\"\n                  :class=\"{ active : activeEl === 0 }\"\n                  type=\"button\"\n          >\n            <pg-swatch class=\"swatches-color--l\" :label=\"colorName\" :code=\"colorCode\" />\n          </button>\n\n          <template v-for=\"(item, index) in productColors\">\n            <button @click=\"swapImage(item.productColor, (index + 1))\"\n                    class=\"hotspot__choose-color-button\"\n                    :class=\"{ active : activeEl === (index + 1) }\"\n                    type=\"button\"\n            >\n              <pg-swatch class=\"swatches-color--l\" :label=\"item.colorName\" :code=\"item.colorCode\"/>\n            </button>\n\n          </template>\n        </div>\n      </div>\n    </div>\n    </div>\n  </section>\n</template>\n<script>\n  import PgButton from \"../Button/Button.vue\";\n  import PgImage from \"../Image/Image.vue\";\n  import PgModal from \"../Modal/Modal.vue\";\n  import PgSwatch from \"../Swatch/Swatch.vue\"\n  export default {\n    name: \"Hotspot\",\n    components: {\n      PgButton,\n      PgImage,\n      PgModal,\n      PgSwatch\n    },\n    props: {\n      title: {\n        type: String,\n        require: false\n      },\n      image: {\n        type: Object,\n        default: () => {\n        }\n      },\n      colorName: {\n        type: String,\n        require: false\n      },\n      colorCode: {\n        type: String,\n        require: false\n      },\n      productColors: {\n        type: Array,\n        require: false,\n        default: () => []\n      },\n      hotspotItem: {\n        type: Object,\n        default: () => {\n        }\n      }\n    },\n    inheritAttrs: false,\n    data: () => {\n      return {\n        mainImage: null,\n        selectedHotspot: 0,\n        modal: {\n          show: false,\n          content: null\n        },\n        isDragging: false,\n        showLabel: false,\n        activeEl: 0,\n        active: false\n      };\n    },\n\n    methods: {\n      swapImage(src, el) {\n        if (!src) return;\n        this.activeEl = el;\n        this.mainImage = src;\n      },\n      isNewItem: function(top, left) {\n        if (parseInt(top) === 0 && parseInt(left) === 0) {\n          return 'isNewItem';\n        }\n        return;\n      },\n      btnStyle(top, left) {\n        const imgWidth = this.image | this.$options.filters.mgnlMedia('width', 0) || 860;\n        const imgHeight= this.image | this.$options.filters.mgnlMedia('height', 0) || 600 ;\n        let topPos = (100 * parseFloat(top)) / imgHeight;\n        let leftPos = (100 * parseFloat(left)) / imgWidth;\n\n        return {\n          top: `${topPos}%`,\n          left: `${leftPos}%`\n        };\n      },\n      handleClick(data) {\n        this.modal.content = data;\n        this.modal.show = true;\n      },\n      onDragged({el, deltaX, deltaY, offsetX, offsetY, clientX, clientY, first, last}) {\n\n        const ctx = this;\n        if (first) {\n          this.dragged = true;\n          if (el.firstElementChild.classList.contains('isNewItem')) {\n            el.firstElementChild.classList.remove('isNewItem');\n          }\n          return\n        }\n\n        let l = +window.getComputedStyle(el)['left'].slice(0, -2) || 0\n        let t = +window.getComputedStyle(el)['top'].slice(0, -2) || 0\n\n        el.style.left = l + deltaX + 'px'\n        el.style.top = t + deltaY + 'px'\n        el.style.cursor =  \"grabbing\";\n\n        if (last) {\n          let uuid = el.dataset.uuid;\n          const url = `/action/hotspot/${uuid}`;\n\n          let left = window.getComputedStyle(el)['left'].slice(0, -2);\n          let top = window.getComputedStyle(el)['top'].slice(0, -2);\n\n          ctx.$http.post(\n            url, {\"x\": top, \"y\": left}).then((response) => {\n            if (response.status >= 200 && response.status < 300) {\n              // ok\n              console.info('Hot spot pin saved ');\n            } else {\n              // error\n              console.error('Hot spot: ', response.status);\n            }\n          });\n\n          this.dragged = false;\n          el.style.cursor =  \"grab\";\n          return\n        }\n      }\n\n    },\n    mounted() {\n      setTimeout(function(scope) {\n        scope.mainImage = scope.image;\n      }, 1000, this);\n    }\n  };\n</script>\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!./Hotspot.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!./Hotspot.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Hotspot.vue?vue&type=template&id=24e45d12&\"\nimport script from \"./Hotspot.vue?vue&type=script&lang=js&\"\nexport * from \"./Hotspot.vue?vue&type=script&lang=js&\"\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","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('hotspot',_vm._b({},'hotspot',_vm.model,false))}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <hotspot v-bind=\"model\"></hotspot>\n</template>\n<script>\n  import {mgnlComponentMixin} from \"@wl-vue-mixins/mixins.js\";\n  import Hotspot              from \"../Hotspot/Hotspot\";\n\n  export default {\n    mixins: [mgnlComponentMixin], // !!! all the mgnl components must be configured with mgnlComponentMixin !!!\n\n    name: \"MgnlHotspot\",\n\n    components: {\n      Hotspot\n    }\n  };\n</script>","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!./MgnlHotspot.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!./MgnlHotspot.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./MgnlHotspot.vue?vue&type=template&id=0805e48d&\"\nimport script from \"./MgnlHotspot.vue?vue&type=script&lang=js&\"\nexport * from \"./MgnlHotspot.vue?vue&type=script&lang=js&\"\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","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',_vm._b({scopedSlots:_vm._u([{key:\"modal-header-close\",fn:function(){return [_vm._t(\"modal-header-close\")]},proxy:true}],null,true),model:{value:(_vm.showModal),callback:function ($$v) {_vm.showModal=$$v},expression:\"showModal\"}},'b-modal',_vm.$attrs,false),[_vm._t(\"default\")],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <b-modal v-bind=\"$attrs\" v-model=\"showModal\">\n    <template v-slot:modal-header-close>\n      <slot name=\"modal-header-close\" />\n    </template>\n    <slot />\n  </b-modal>\n</template>\n<script>\nimport { mgnlComponentMixin } from \"@wl-vue-mixins/mixins.js\";\n\nexport default {\n  //!! NOT USED\n  mixins: [mgnlComponentMixin], // !!! all the mgnl components must be configured with mgnlComponentMixin !!!\n  name: \"PgModal\",\n  data: () => ({\n    showModal: false\n  }),\n  props: {\n    show: {\n      type: Boolean,\n      required: true\n    }\n  },\n  mounted() {\n    this.showModal = this.show;\n    console.log(\"Modal \", this.show, this.showModal);\n\n    this.$root.$on(\"bv::modal::hidden\", (bvEvent, modalId) => {\n      this.showModal = false;\n    });\n  },\n  watch: {\n    show(val) {\n      console.log(val);\n      this.showModal = val;\n    }\n  }\n};\n</script>\n\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!./Modal.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!./Modal.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Modal.vue?vue&type=template&id=3f8c9373&\"\nimport script from \"./Modal.vue?vue&type=script&lang=js&\"\nexport * from \"./Modal.vue?vue&type=script&lang=js&\"\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"],"sourceRoot":""}