{"version":3,"sources":["webpack:///./resources/js/src/app/components/item/ItemImageCarousel.vue","webpack:///./resources/js/src/app/components/item/ItemImageCarousel.vue?df97","webpack:///resources/js/src/app/components/item/ItemImageCarousel.vue","webpack:///./resources/js/src/app/components/item/ItemImageCarousel.vue?f260"],"names":["render","_vm","this","_c","_self","attrs","itemscope","itemtype","ref","staticClass","_l","singleImages","image","index","key","href","url","_uid","alt","getAltText","title","getImageName","width","getImageWidth","height","getImageHeight","_v","showThumbs","id","carouselImages","imagePreview","on","click","$event","goTo","class","active","currentItem","_e","initialized","_withStripped","name","props","maxQuantity","type","default","imageUrlAccessor","showDots","animationStyle","pluginPath","inject","itemId","data","computed","currentVariation","watch","handler","setTimeout","deep","mounted","catch","console","methods","getImageCount","reInitialize","$owl","$thumbs","initCarousel","autoHeight","dots","items","lazyLoad","rewind","margin","mouseDrag","nav","navClass","navContainerClass","navText","smartSpeed","onChanged","$thumb","event","onInitialized","carouselSettings","$","lightbox","wrapAround","albumLabel","initThumbCarousel","loop","center","loadLightbox","script","document","resolve","component"],"mappings":"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","file":"chunks/ceres-client-34.min.js","sourcesContent":["var render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"div\",\n    { attrs: { itemscope: \"\", itemtype: \"https://schema.org/Thing\" } },\n    [\n      _c(\n        \"div\",\n        {\n          ref: \"single\",\n          staticClass:\n            \"single-carousel owl-carousel owl-theme owl-single-item mt-0\",\n        },\n        _vm._l(_vm.singleImages, function (image, index) {\n          return _c(\"div\", { key: index, staticClass: \"prop-1-1\" }, [\n            _c(\n              \"a\",\n              {\n                attrs: {\n                  href: image.url,\n                  \"data-lightbox\": `single-item-image${_vm._uid}`,\n                },\n              },\n              [\n                _c(\"lazy-img\", {\n                  attrs: {\n                    alt: _vm.getAltText(image),\n                    \"image-url\": image.url,\n                    title: _vm.getImageName(image),\n                    width: _vm.getImageWidth(image),\n                    height: _vm.getImageHeight(image),\n                  },\n                }),\n              ],\n              1\n            ),\n          ])\n        }),\n        0\n      ),\n      _vm._v(\" \"),\n      _vm.showThumbs\n        ? _c(\n            \"div\",\n            {\n              ref: \"thumbs\",\n              staticClass: \"owl-thumbs owl-carousel owl-theme owl-single-item\",\n              attrs: { id: \"thumb-carousel\" },\n            },\n            _vm._l(_vm.carouselImages, function (imagePreview, index) {\n              return _c(\"div\", { key: index, staticClass: \"prop-1-1\" }, [\n                _c(\n                  \"div\",\n                  {\n                    staticClass: \"image-container\",\n                    on: {\n                      click: function ($event) {\n                        return _vm.goTo(index)\n                      },\n                    },\n                  },\n                  [\n                    _c(\"lazy-img\", {\n                      class: { active: _vm.currentItem === index },\n                      attrs: {\n                        alt: _vm.getAltText(imagePreview),\n                        \"image-url\": imagePreview.url,\n                        title: _vm.getImageName(imagePreview),\n                        width: _vm.getImageWidth(imagePreview),\n                        height: _vm.getImageHeight(imagePreview),\n                        \"picture-class\": \"owl-thumb border-appearance\",\n                      },\n                    }),\n                  ],\n                  1\n                ),\n              ])\n            }),\n            0\n          )\n        : _vm._e(),\n      _vm._v(\" \"),\n      !_vm.initialized\n        ? _c(\n            \"div\",\n            {\n              staticClass:\n                \"single-carousel owl-carousel owl-loaded owl-theme owl-single-item mt-0\",\n            },\n            [\n              _c(\n                \"div\",\n                { staticClass: \"prop-1-1\" },\n                [\n                  _c(\"lazy-img\", {\n                    attrs: {\n                      alt: _vm.getAltText(_vm.singleImages[0].url),\n                      \"image-url\": _vm.singleImages[0].url,\n                      title: _vm.getImageName(_vm.singleImages[0].url),\n                      width: _vm.getImageWidth(_vm.singleImages[0]),\n                      height: _vm.getImageHeight(_vm.singleImages[0]),\n                      \"picture-class\": \"owl-placeholder\",\n                    },\n                  }),\n                ],\n                1\n              ),\n            ]\n          )\n        : _vm._e(),\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!./ItemImageCarousel.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!./ItemImageCarousel.vue?vue&type=script&lang=js&\"","<template>\n    <div itemscope itemtype=\"https://schema.org/Thing\">\n        <div ref=\"single\" class=\"single-carousel owl-carousel owl-theme owl-single-item mt-0\">\n            <div v-for=\"(image, index) in singleImages\" :key=\"index\" class=\"prop-1-1\">\n                <a :href=\"image.url\" :data-lightbox=\"`single-item-image${_uid}`\">\n                    <lazy-img :alt=\"getAltText(image)\" :image-url=\"image.url\" :title=\"getImageName(image)\" :width=\"getImageWidth(image)\" :height=\"getImageHeight(image)\" />\n                </a>\n            </div>\n        </div>\n\n        <div v-if=\"showThumbs\" id=\"thumb-carousel\" ref=\"thumbs\" class=\"owl-thumbs owl-carousel owl-theme owl-single-item\">\n            <div v-for=\"(imagePreview, index) in carouselImages\" :key=\"index\" class=\"prop-1-1\">\n                <div @click=\"goTo(index)\" class=\"image-container\">\n                    <lazy-img\n                        :alt=\"getAltText(imagePreview)\"\n                        :image-url=\"imagePreview.url\"\n                        :title=\"getImageName(imagePreview)\"\n                        :width=\"getImageWidth(imagePreview)\"\n                        :height=\"getImageHeight(imagePreview)\"\n                        picture-class=\"owl-thumb border-appearance\"\n                        v-bind:class=\"{ 'active': currentItem === index}\" />\n                </div>\n            </div>\n        </div>\n\n        <div v-if=\"!initialized\" class=\"single-carousel owl-carousel owl-loaded owl-theme owl-single-item mt-0\">\n            <div class=\"prop-1-1\">\n                <lazy-img\n                    :alt=\"getAltText(singleImages[0].url)\"\n                    :image-url=\"singleImages[0].url\"\n                    :title=\"getImageName(singleImages[0].url)\"\n                    :width=\"getImageWidth(singleImages[0])\"\n                    :height=\"getImageHeight(singleImages[0])\"\n                    picture-class=\"owl-placeholder\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { isNullOrUndefined } from \"../../helper/utils\";\n\nexport default {\n    name: \"item-image-carousel\",\n\n    props: {\n        maxQuantity:\n        {\n            type: Number,\n            default: 10\n        },\n        imageUrlAccessor:\n        {\n            type: String,\n            default: \"url\"\n        },\n        showThumbs:\n        {\n            type: Boolean,\n            default: true\n        },\n        showDots:\n        {\n            type: Boolean,\n            default: true\n        },\n        animationStyle:\n        {\n            type: String,\n            default: \"standard\"\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            initialized: false,\n        };\n    },\n\n    computed:\n    {\n        currentVariation()\n        {\n            return this.$store.getters[`${this.itemId}/currentItemVariation`]\n        },\n\n        carouselImages()\n        {\n            return this.$options.filters.itemImages(\n                    this.currentVariation.images,\n                    \"urlPreview\"\n                ).slice(0, this.maxQuantity);\n        },\n\n        singleImages()\n        {\n            return this.$options.filters.itemImages(\n                    this.currentVariation.images,\n                    this.imageUrlAccessor\n            ).slice(0, this.maxQuantity);\n        }\n    },\n\n    watch: {\n        currentVariation:\n        {\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    mounted()\n    {\n        this.$nextTick(() =>\n        {\n            this.loadLightbox().then(() =>\n                {\n                    this.initCarousel();\n                    this.initThumbCarousel();\n                })\n                .catch(event =>\n                {\n                    console.log(\"error while loading lightbox\", event);\n                });\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 $owl = $(this.$refs.single);\n\n            $owl.trigger(\"destroy.owl.carousel\");\n            $owl.html($owl.find(\".owl-stage-outer\").html()).removeClass(\"owl-loaded\");\n            $owl.find(\".owl-item\").remove();\n\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.initCarousel();\n            this.initThumbCarousel();\n        },\n\n        initCarousel()\n        {\n            const imageCount = this.getImageCount();\n            const carouselSettings = {\n                autoHeight       : true,\n                dots             : this.showDots,\n                items            : 1,\n                lazyLoad         : true,\n                rewind           : true,\n                margin           : 10,\n                mouseDrag        : imageCount > 1,\n                nav              : imageCount > 1,\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                onChanged: event =>\n                {\n                    const $thumb = $(this.$refs.thumbs);\n\n                    $thumb.trigger(\"to.owl.carousel\", [\n                        event.page.index,\n                        350\n                    ]);\n                },\n                onInitialized: event =>\n                {\n                    this.initialized = true;\n                }\n            };\n\n            if (this.animationStyle !== \"standard\")\n            {\n                carouselSettings.animateOut = this.animationStyle;\n            }\n\n            $(this.$refs.single).owlCarousel(carouselSettings);\n\n            if (!isNullOrUndefined(window.lightbox))\n            {\n                lightbox.option({\n                    wrapAround: true,\n                    albumLabel: this.$translate(\"Ceres::Template.singleItemLightboxImageShown\")\n                });\n            }\n\n            $(this.$refs.single).on(\"changed.owl.carousel\", event =>\n            {\n                this.currentItem = event.page.index;\n            });\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           : 10,\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        goTo(index)\n        {\n            const $owl = $(this.$refs.single);\n\n            $owl.trigger(\"to.owl.carousel\", [\n                index,\n                350\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        getImageWidth(image)\n        {\n          return image && image.width ? image.width : this.$options.filters.itemImageWidth(this.carouselImages);\n        },\n\n        getImageHeight(image)\n        {\n          return image && image.height ? image.height : this.$options.filters.itemImageHeight(this.carouselImages);\n        },\n\n        loadLightbox()\n        {\n            return new Promise((resolve, reject) =>\n            {\n                const script = document.querySelector(\"script#lightboxscript\");\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 = \"lightboxscript\";\n                    script.src = `${ this.pluginPath }/js/dist/lightbox.min.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 \"./ItemImageCarousel.vue?vue&type=template&id=1f4e1cbe&\"\nimport script from \"./ItemImageCarousel.vue?vue&type=script&lang=js&\"\nexport * from \"./ItemImageCarousel.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":""}