{"version":3,"sources":["webpack:///./resources/js/src/app/components/item/ItemImageCarousel.vue?55b3","webpack:///./resources/js/src/app/components/item/ItemImageCarousel.vue?a015","webpack:///resources/js/src/app/components/item/ItemImageCarousel.vue","webpack:///./resources/js/src/app/components/item/ItemImageCarousel.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","itemscope","itemtype","class","showGallery","id","_uid","showDots","_l","singleImages","image","index","active","_e","_v","src","urlMiddle","srcset","urlPreview","urlSecondPreview","url","alt","getAltText","width","height","showThumbs","carouselImages","imagePreview","href","title","getImageName","_withStripped","component","options","__file"],"mappings":"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","file":"chunks/ceres-28.min.js","sourcesContent":["var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    {\n      staticClass: \"text-center row flex-column flex-lg-row-reverse mx-n2\",\n      attrs: { itemscope: \"\", itemtype: \"http://schema.org/Thing\" }\n    },\n    [\n      _c(\n        \"div\",\n        {\n          staticClass: \"col-12 px-2\",\n          class: { \"col-lg-11\": _vm.showGallery() }\n        },\n        [\n          _c(\n            \"div\",\n            {\n              staticClass: \"carousel slide\",\n              attrs: { id: \"carousel\" + _vm._uid, \"data-interval\": \"false\" }\n            },\n            [\n              _vm.showDots && _vm.showGallery()\n                ? _c(\n                    \"ol\",\n                    { staticClass: \"carousel-indicators\" },\n                    _vm._l(_vm.singleImages, function(image, index) {\n                      return _c(\"li\", {\n                        class: { active: index === 0 },\n                        attrs: {\n                          \"data-target\": \"#carousel\" + _vm._uid,\n                          \"data-slide-to\": index\n                        }\n                      })\n                    }),\n                    0\n                  )\n                : _vm._e(),\n              _vm._v(\" \"),\n              _c(\n                \"div\",\n                { staticClass: \"carousel-inner text-center\" },\n                _vm._l(_vm.singleImages, function(image, index) {\n                  return _c(\n                    \"div\",\n                    {\n                      staticClass: \"carousel-item prop-1-1\",\n                      class: { active: index === 0 }\n                    },\n                    [\n                      index === 0\n                        ? _c(\"img\", {\n                            staticClass: \"position-absolute w-100 h-100\",\n                            attrs: {\n                              src: image.urlMiddle,\n                              srcset:\n                                image.urlPreview +\n                                \" 270w, \" +\n                                image.urlSecondPreview +\n                                \" 540w, \" +\n                                image.urlMiddle +\n                                \" 1080w, \" +\n                                image.url +\n                                \" 2160w\",\n                              alt: _vm.getAltText(image),\n                              width: \"2160\",\n                              height: \"2160\"\n                            }\n                          })\n                        : _c(\"img\", {\n                            staticClass:\n                              \"position-absolute w-100 h-100 defer-load\",\n                            attrs: {\n                              \"data-src\": image.urlMiddle,\n                              \"data-srcset\":\n                                image.urlPreview +\n                                \" 270w, \" +\n                                image.urlSecondPreview +\n                                \" 540w, \" +\n                                image.urlMiddle +\n                                \" 1080w, \" +\n                                image.url +\n                                \" 2160w\",\n                              alt: _vm.getAltText(image),\n                              width: \"2160\",\n                              height: \"2160\"\n                            }\n                          })\n                    ]\n                  )\n                }),\n                0\n              )\n            ]\n          )\n        ]\n      ),\n      _vm._v(\" \"),\n      _vm.showGallery()\n        ? _c(\"div\", { staticClass: \"col-12 col-lg-1 px-2\" }, [\n            _vm.showThumbs\n              ? _c(\n                  \"div\",\n                  {\n                    staticClass:\n                      \"row flex-row flex-lg-column justify-content-center align-content-center carousel-thumbnails mx-n2\"\n                  },\n                  _vm._l(_vm.carouselImages, function(imagePreview, index) {\n                    return _c(\n                      \"a\",\n                      {\n                        staticClass: \"col px-2 pt-2\",\n                        attrs: {\n                          href: \"#carousel\" + _vm._uid,\n                          \"data-target\": \"#carousel\" + _vm._uid,\n                          \"data-slide-to\": index,\n                          title: _vm.getImageName(imagePreview)\n                        }\n                      },\n                      [\n                        _c(\"div\", { staticClass: \"prop-1-1\" }, [\n                          _c(\"img\", {\n                            staticClass:\n                              \"position-absolute w-100 h-100 defer-load border bg-white rounded\",\n                            attrs: {\n                              \"data-src\": imagePreview.url,\n                              alt: _vm.getAltText(imagePreview),\n                              width: \"135\",\n                              height: \"135\"\n                            }\n                          })\n                        ])\n                      ]\n                    )\n                  }),\n                  0\n                )\n              : _vm._e()\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=\"http://schema.org/Thing\" class=\"text-center row flex-column flex-lg-row-reverse mx-n2\">\n        <div class=\"col-12 px-2\" :class=\"{'col-lg-11': showGallery()}\">\n            <div :id=\"'carousel'+_uid\" class=\"carousel slide\" data-interval=\"false\">\n                <ol class=\"carousel-indicators\" v-if=\"showDots && showGallery()\">\n                    <li v-for=\"(image, index) in singleImages\" :data-target=\"'#carousel'+_uid\" :data-slide-to=\"index\" :class=\"{ active: index === 0 }\"></li>\n                </ol>\n                <div class=\"carousel-inner text-center\">\n                    <div v-for=\"(image, index) in singleImages\" class=\"carousel-item prop-1-1\" :class=\"{ active: index === 0 }\">\n                        <img class=\"position-absolute w-100 h-100\"\n                             :src=\"image.urlMiddle\"\n                             :srcset=\"image.urlPreview+' 270w, '+image.urlSecondPreview+' 540w, '+image.urlMiddle+' 1080w, '+image.url+' 2160w'\"\n                             :alt=\"getAltText(image)\"\n                             width=\"2160\" height=\"2160\" v-if=\"index === 0\">\n                        <img class=\"position-absolute w-100 h-100 defer-load\"\n                            :data-src=\"image.urlMiddle\"\n                            :data-srcset=\"image.urlPreview+' 270w, '+image.urlSecondPreview+' 540w, '+image.urlMiddle+' 1080w, '+image.url+' 2160w'\"\n                            :alt=\"getAltText(image)\"\n                             width=\"2160\" height=\"2160\" v-else>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"col-12 col-lg-1 px-2\" v-if=\"showGallery()\">\n            <div v-if=\"showThumbs\" class=\"row flex-row flex-lg-column justify-content-center align-content-center carousel-thumbnails mx-n2\">\n                <a v-for=\"(imagePreview, index) in carouselImages\" class=\"col px-2 pt-2\" :href=\"'#carousel'+_uid\" :data-target=\"'#carousel'+_uid\" :data-slide-to=\"index\" :title=\"getImageName(imagePreview)\">\n                    <div class=\"prop-1-1\">\n                        <img class=\"position-absolute w-100 h-100 defer-load border bg-white rounded\"\n                            :data-src=\"imagePreview.url\"\n                            :alt=\"getAltText(imagePreview)\"\n                            width=\"135\" height=\"135\">\n                    </div>\n                </a>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\n\nexport default {\n    props: {\n        maxQuantity:\n        {\n            type: Number,\n            default: 10\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    },\n\n    inject: {\n        itemId: {\n            default: null\n        }\n    },\n\n    data()\n    {\n        return {\n            imageObserver: null\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                const imagesAccessor = (this.currentVariation.images.variation && this.currentVariation.images.variation.length) ? 'variation' : 'all';\n                return this.currentVariation.images[imagesAccessor].slice(0, this.maxQuantity);\n            }\n        },\n\n    watch: {\n        currentVariation:\n            {\n                handler(val, oldVal)\n                {\n                    if (val !== oldVal)\n                    {\n                        this.$nextTick(() => {\n                            this.registerElementsForIntersection();\n                        });\n                    }\n                },\n                deep: true\n            }\n    },\n\n    mounted()\n    {\n        this.$nextTick(() =>\n        {\n            this.initCarousel();\n        });\n    },\n\n    methods:\n    {\n        showImages(parentElement)\n        {\n            parentElement.getElementsByClassName('defer-load').forEach((elem) => {\n                const dataSrcSet = elem.getAttribute(\"data-srcset\");\n                const dataSrc = elem.getAttribute(\"data-src\");\n\n                if (dataSrcSet && dataSrcSet !== elem.srcset) {\n                    elem.srcset = dataSrcSet;\n                }\n                if (dataSrc && dataSrc !== elem.src) {\n                    elem.src = dataSrc;\n                }\n            });\n        },\n\n        registerElementsForIntersection()\n        {\n            if (this.showGallery()) {\n                this.$el.getElementsByClassName('carousel-item active').forEach((elem) => {\n                    this.imageObserver.observe(elem);\n                });\n                this.$el.getElementsByClassName('carousel-thumbnails').forEach((elem) => {\n                    this.imageObserver.observe(elem);\n                });\n\n                $(this.$el).on('slide.bs.carousel', () => {\n                    this.showImages(this.$el);\n                });\n            }\n        },\n\n        initCarousel()\n        {\n            if (\"IntersectionObserver\" in window) {\n                this.imageObserver = new IntersectionObserver((entries, imageObserver) => {\n                    entries.forEach((entry) => {\n                        if(entry.isIntersecting)\n                        {\n                            this.showImages(entry.target);\n                            imageObserver.unobserve(entry.target);\n                        }\n                    });\n                });\n                this.registerElementsForIntersection();\n            }\n            else {\n                if (this.showGallery()) {\n                    console.log(\"Your Browser is too old!\");\n                    const images = this.$el.getElementsByClassName('defer-load');\n                    let i;\n                    for (i = 0; i < x.length; i++) {\n                        images[i].src = images[i].getAttribute(\"data-src\");\n                        images[i].removeAttribute(\"data-src\");\n                    }\n                }\n            }\n            $('#carousel'+this._uid).carousel();\n        },\n\n        getImageCount()\n        {\n            return this.carouselImages.length > this.maxQuantity ? this.maxQuantity : this.carouselImages.length;\n        },\n\n        getAltText(image)\n        {\n            let altText = image && image.alternate ? image.alternate : this.currentVariation.item.manufacturer.name + ' ' + this.$options.filters.itemName(this.currentVariation);\n            if (this.currentVariation.attributes.length > 0) {\n                altText = altText + ' ' + this.currentVariation.attributes[0].value.names.name\n            }\n            return altText;\n        },\n\n        getImageName(image)\n        {\n            let imageName =  image && image.name ? image.name : this.currentVariation.item.manufacturer.name + ' ' + this.$options.filters.itemName(this.currentVariation);\n            if (this.currentVariation.attributes.length > 0) {\n                imageName = imageName + ' ' + this.currentVariation.attributes[0].value.names.name\n            }\n            return imageName;\n        },\n\n        showGallery()\n        {\n            return (this.getImageCount() > 1);\n        }\n    }\n}\n</script>\n","import { render, staticRenderFns } from \"./ItemImageCarousel.vue?vue&type=template&id=5285279e&\"\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\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/Users/uweschurmann/PhpstormProjects/19338/15137/51/HydronalinTheme/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('5285279e')) {\n      api.createRecord('5285279e', component.options)\n    } else {\n      api.reload('5285279e', component.options)\n    }\n    module.hot.accept(\"./ItemImageCarousel.vue?vue&type=template&id=5285279e&\", function () {\n      api.rerender('5285279e', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"resources/js/src/app/components/item/ItemImageCarousel.vue\"\nexport default component.exports"],"sourceRoot":""}