{"version":3,"sources":["webpack:///./resources/js/src/app/components/lucx/item/ItemImageZoom.vue","webpack:///./resources/js/src/app/components/lucx/item/ItemImageZoom.vue?84eb","webpack:///resources/js/src/app/components/lucx/item/ItemImageZoom.vue","webpack:///./resources/js/src/app/components/lucx/item/ItemImageZoom.vue?8093"],"names":["render","_vm","this","_c","_self","staticClass","attrs","itemscope","itemtype","hasPlaceholderImage","_e","ref","title","onclick","_v","doubleTabToZoom","id","href","getImage","url","getImageName","src","getPreviewImage","alt","getAltText","itemprop","getPlaceholderImage","getCarouselImages","length","_l","image","urlMiddle","urlPreview","_withStripped","name","props","maxQuantity","type","Number","default","pluginPath","String","inject","itemId","data","currentItem","TranslationService","translate","computed","currentVariation","$store","getters","concat","orderByPosition","$options","filters","itemImages","images","slice","isNullOrUndefined","match","mounted","_this","$nextTick","loadMagiczoomplus","then","initThumbCarousel","MagicZoom","start","catch","event","watch","handler","val","oldVal","_this2","setTimeout","reInitialize","deep","methods","getImageCount","carouselImages","variationPreviewImage","stop","$","attr","$thumbs","$refs","thumbs","trigger","html","find","removeClass","remove","owlCarousel","autoHeight","dots","items","lazyLoad","loop","margin","mouseDrag","center","nav","navClass","navContainerClass","navText","smartSpeed","list","sort","entryA","entryB","position","alternate","itemName","_this3","Promise","resolve","reject","script","document","querySelector","createElement","addEventListener","body","appendChild","component"],"mappings":"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","file":"chunks/ceres-60.min.js","sourcesContent":["var render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"div\",\n    {\n      staticClass: \"single-zoom-wrapper\",\n      attrs: { itemscope: \"\", itemtype: \"http://schema.org/Thing\" },\n    },\n    [\n      !_vm.hasPlaceholderImage\n        ? _c(\"div\", { ref: \"single\" }, [\n            _c(\"span\", {\n              staticClass: \"single-zoom-trigger fa fa-search\",\n              attrs: {\n                title: \"Zoom\",\n                onclick: \"MagicZoom.expand('single-magiczoom-item');\",\n              },\n            }),\n            _vm._v(\" \"),\n            _c(\n              \"a\",\n              {\n                staticClass: \"MagicZoom single-zoom\",\n                attrs: {\n                  \"data-options\":\n                    \"rightClick: true; zoomCaption: bottom; cssClass: mz-show-arrows; lazyZoom: true; hint: off; history: false;\",\n                  \"data-mobile-options\": _vm.doubleTabToZoom,\n                  id: \"single-magiczoom-item\",\n                  href: _vm.getImage.url,\n                  title: _vm.getImageName(_vm.getImage),\n                },\n              },\n              [\n                _c(\"img\", {\n                  attrs: {\n                    id: \"single-magiczoom-item-image\",\n                    src: _vm.getPreviewImage.url,\n                    alt: _vm.getAltText(_vm.getImage),\n                    title: _vm.getImageName(_vm.getImage),\n                    itemprop: \"image\",\n                  },\n                }),\n              ]\n            ),\n          ])\n        : _vm._e(),\n      _vm._v(\" \"),\n      _vm.hasPlaceholderImage\n        ? _c(\"div\", { ref: \"single\" }, [\n            _c(\n              \"span\",\n              {\n                staticClass: \"single-zoom\",\n                attrs: { title: _vm.getImageName(_vm.getImage) },\n              },\n              [\n                _c(\"img\", {\n                  attrs: {\n                    src: _vm.getPlaceholderImage,\n                    alt: _vm.getAltText(_vm.getImage),\n                    title: _vm.getImageName(_vm.getImage),\n                    itemprop: \"image\",\n                  },\n                }),\n              ]\n            ),\n          ])\n        : _vm._e(),\n      _vm._v(\" \"),\n      _c(\"div\", { staticClass: \"magiczoom-thumbs\" }, [\n        _vm.getCarouselImages.length > 1\n          ? _c(\n              \"div\",\n              {\n                ref: \"thumbs\",\n                staticClass:\n                  \"owl-thumbs owl-carousel owl-theme owl-single-item\",\n              },\n              _vm._l(_vm.getCarouselImages, function (image) {\n                return _c(\n                  \"a\",\n                  {\n                    attrs: {\n                      \"data-zoom-id\": \"single-magiczoom-item\",\n                      \"data-image\": image.urlMiddle,\n                      href: image.url,\n                      title: _vm.getImageName(image),\n                    },\n                  },\n                  [\n                    _c(\"img\", {\n                      attrs: {\n                        src: image.urlPreview,\n                        alt: _vm.getAltText(image),\n                        title: _vm.getImageName(image),\n                      },\n                    }),\n                  ]\n                )\n              }),\n              0\n            )\n          : _vm._e(),\n      ]),\n    ]\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","import mod from \"-!../../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ItemImageZoom.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ItemImageZoom.vue?vue&type=script&lang=js\"","<template>\n    <div class=\"single-zoom-wrapper\" itemscope itemtype=\"http://schema.org/Thing\">\n        <div ref=\"single\" v-if=\"!hasPlaceholderImage\">\n            <span class=\"single-zoom-trigger fa fa-search\" title=\"Zoom\"\n                  onclick=\"MagicZoom.expand('single-magiczoom-item');\">\n            </span>\n\n            <a class=\"MagicZoom single-zoom\"\n               data-options=\"rightClick: true; zoomCaption: bottom; cssClass: mz-show-arrows; lazyZoom: true; hint: off; history: false;\"\n               :data-mobile-options=\"doubleTabToZoom\"\n               id=\"single-magiczoom-item\"\n               :href=\"getImage.url\"\n               :title=\"getImageName(getImage)\">\n                <img id=\"single-magiczoom-item-image\" :src=\"getPreviewImage.url\" :alt=\"getAltText(getImage)\" :title=\"getImageName(getImage)\" itemprop=\"image\" />\n            </a>\n        </div>\n\n        <div ref=\"single\" v-if=\"hasPlaceholderImage\">\n            <span class=\"single-zoom\"\n                  :title=\"getImageName(getImage)\">\n                <img :src=\"getPlaceholderImage\" :alt=\"getAltText(getImage)\" :title=\"getImageName(getImage)\" itemprop=\"image\" />\n            </span>\n        </div>\n\n        <div class=\"magiczoom-thumbs\">\n            <div v-if=\"getCarouselImages.length > 1\" class=\"owl-thumbs owl-carousel owl-theme owl-single-item\" ref=\"thumbs\">\n                <a v-for=\"image in getCarouselImages\"\n                   data-zoom-id=\"single-magiczoom-item\"\n                   :data-image=\"image.urlMiddle\"\n                   :href=\"image.url\"\n                   :title=\"getImageName(image)\">\n                    <img :src=\"image.urlPreview\" :alt=\"getAltText(image)\" :title=\"getImageName(image)\">\n                </a>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport TranslationService from \"../../../services/TranslationService\";\nimport { isNullOrUndefined, isDefined } from \"../../../helper/utils\";\n\nexport default {\n    name: \"item-image-zoom\",\n\n    props: {\n        maxQuantity:\n            {\n                type: Number,\n                default: 10\n            },\n        pluginPath:\n            {\n                type: String,\n                default: \"\"\n            }\n    },\n\n    inject: {\n        itemId: {\n            default: null\n        }\n    },\n\n    data()\n    {\n        return {\n            currentItem     : 0,\n            doubleTabToZoom : \"textClickZoomHint: \" + TranslationService.translate(\"LucxCeres::Template.DoubleTabToZoom\")\n        };\n    },\n\n    computed:\n        {\n            currentVariation() {\n                return this.$store.getters[`${this.itemId}/currentItemVariation`]\n            },\n\n            getCarouselImages()\n            {\n                return this.orderByPosition(\n                    this.$options.filters.itemImages(\n                        this.currentVariation.images\n                    )\n                ).slice(0, this.maxQuantity);\n            },\n\n            getImage()\n            {\n                return this.orderByPosition(\n                    this.$options.filters.itemImages(\n                        this.currentVariation.images,\n                        \"url\"\n                    )\n                )[0];\n            },\n\n            hasPlaceholderImage()\n            {\n                return !isNullOrUndefined(this.getPreviewImage.url.match(\"layout/ht/images/noImg400\")) || !isNullOrUndefined(this.getPreviewImage.url.match(\"Bildfolgt2021.jpg\"));\n            },\n\n            getPlaceholderImage()\n            {\n                return \"https://cdn02.plentymarkets.com/psa7bbtzyjbo/frontend/lucx/placeholder.jpg\";\n            },\n\n            getPreviewImage()\n            {\n                return this.orderByPosition(\n                    this.$options.filters.itemImages(\n                        this.currentVariation.images,\n                        \"urlMiddle\"\n                    )\n                )[0];\n            }\n        },\n\n    mounted()\n    {\n        this.$nextTick(() =>\n        {\n            this.loadMagiczoomplus().then(() =>\n            {\n                this.initThumbCarousel();\n                MagicZoom.start(\"single-magiczoom-item\");\n            })\n                .catch(event =>\n                {\n                    // console.log(\"error while loading magiczoom\", event);\n                });\n        });\n    },\n\n    watch: {\n        currentVariation: {\n            handler(val, oldVal)\n            {\n                if (val !== oldVal)\n                {\n                    setTimeout(() =>\n                    {\n                        this.reInitialize();\n                    }, 1);\n                }\n            },\n            deep: true\n        }\n    },\n\n    methods:\n        {\n            getImageCount()\n            {\n                return this.carouselImages.length > this.maxQuantity ? this.maxQuantity : this.carouselImages.length;\n            },\n\n            reInitialize()\n            {\n                const variationPreviewImage = this.orderByPosition(\n                    this.$options.filters.itemImages(\n                        this.currentVariation.images,\n                        \"urlMiddle\"\n                    ))[0];\n\n                // MagicZoom.refresh(node) - Reload Magic Zoom Plus instance by #id or reference to <a>. Without parameters, reload all instances on the page.\n                // MagicZoom.refresh();\n\n                // MagicZoom.stop(node) - Stop Magic Zoom Plus instance by #id or reference to <a> tag. Without parameters, stop all instances on the page.\n                MagicZoom.stop(\"single-magiczoom-item\");\n\n                // fix: show correct image\n                $(\"#single-magiczoom-item-image\").attr(\"src\", variationPreviewImage.url).attr(\"alt\", this.getAltText()).attr(\"title\", this.getImageName(variationPreviewImage));\n\n                // MagicZoom.start(node) - Start Magic Zoom Plus instance by #id or reference to <a> tag. Without parameters, start all instances on the page.\n                MagicZoom.start(\"single-magiczoom-item\");\n\n                // update thumbs\n                const $thumbs = $(this.$refs.thumbs);\n\n                $thumbs.trigger(\"destroy.owl.carousel\");\n                $thumbs.html($thumbs.find(\".owl-stage-outer\").html()).removeClass(\"owl-loaded\");\n                $thumbs.find(\".owl-item\").remove();\n\n                this.initThumbCarousel();\n            },\n\n            initThumbCarousel()\n            {\n                $(this.$refs.thumbs).owlCarousel({\n                    autoHeight       : true,\n                    dots             : false,\n                    items            : 5,\n                    lazyLoad         : true,\n                    loop             : false,\n                    margin           : 7,\n                    mouseDrag        : false,\n                    center           : false,\n                    nav              : true,\n                    navClass         : [\n                        \"owl-single-item-nav left carousel-control\",\n                        \"owl-single-item-nav right carousel-control\"\n                    ],\n                    navContainerClass: \"\",\n                    navText          : [\n                        \"<i class=\\\"owl-single-item-control fa fa-chevron-left\\\" aria-hidden=\\\"true\\\"></i>\",\n                        \"<i class=\\\"owl-single-item-control fa fa-chevron-right\\\" aria-hidden=\\\"true\\\"></i>\"\n                    ],\n                    smartSpeed       : 350\n                });\n            },\n\n            orderByPosition(list)\n            {\n                return list.sort(\n                    (entryA, entryB) =>\n                    {\n                        if (entryA.position > entryB.position)\n                        {\n                            return 1;\n                        }\n                        if (entryA.position < entryB.position)\n                        {\n                            return -1;\n                        }\n\n                        return 0;\n                    });\n            },\n\n            getAltText(image)\n            {\n                return image && image.alternate ? image.alternate : this.$options.filters.itemName(this.currentVariation);\n            },\n\n            getImageName(image)\n            {\n                return image && image.name ? image.name : this.$options.filters.itemName(this.currentVariation);\n            },\n\n            loadMagiczoomplus()\n            {\n                return new Promise((resolve, reject) =>\n                {\n                    const script = document.querySelector(\"script#magiczoomplusscript\");\n\n                    if (!isNullOrUndefined(script))\n                    {\n                        resolve();\n                    }\n                    else\n                    {\n                        const script = document.createElement(\"script\");\n\n                        script.type = \"text/javascript\";\n                        script.id = \"magiczoomplusscript\";\n                        script.src = `${ this.pluginPath }/js/dist/magiczoomplus.js`;\n\n                        script.addEventListener(\"load\", () => resolve(), false);\n                        script.addEventListener(\"error\", event => reject(event), false);\n\n                        document.body.appendChild(script);\n                    }\n                });\n            }\n        }\n}\n</script>\n","import { render, staticRenderFns } from \"./ItemImageZoom.vue?vue&type=template&id=43bc2a3e\"\nimport script from \"./ItemImageZoom.vue?vue&type=script&lang=js\"\nexport * from \"./ItemImageZoom.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":""}