{"version":3,"sources":["webpack:///./resources/js/src/app/components/item/ItemImageCarousel.vue?55b3","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"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","itemscope","itemtype","ref","_l","carouselImages","imagePreview","index","alt","getAltText","title","getImageName","src","url","_v","singleImages","image","itemprop","_withStripped","component","options","__file"],"mappings":"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","file":"chunks/ceres-44.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: \"item-image-carousel__wrapper\",\n      attrs: { itemscope: \"\", itemtype: \"http://schema.org/Thing\" }\n    },\n    [\n      _c(\n        \"div\",\n        { ref: \"thumbImages\", staticClass: \"d-none\" },\n        _vm._l(_vm.carouselImages, function(imagePreview, index) {\n          return _c(\"div\", { staticClass: \"swiper-slide\" }, [\n            _c(\"img\", {\n              staticClass: \"single-thumb-swiper__image object-fit\",\n              attrs: {\n                alt: _vm.getAltText(imagePreview),\n                title: _vm.getImageName(imagePreview),\n                src: imagePreview.url\n              }\n            })\n          ])\n        }),\n        0\n      ),\n      _vm._v(\" \"),\n      _c(\n        \"div\",\n        {\n          ref: \"thumbs\",\n          staticClass: \"swiper-container single-thumb-swiper d-none d-md-block\"\n        },\n        [_c(\"div\", { staticClass: \"swiper-wrapper\" })]\n      ),\n      _vm._v(\" \"),\n      _c(\"div\", { staticClass: \"single-thumb-swiper-button-next\" }),\n      _vm._v(\" \"),\n      _c(\"div\", { staticClass: \"single-thumb-swiper-button-prev\" }),\n      _vm._v(\" \"),\n      _c(\n        \"div\",\n        { ref: \"singleImages\", staticClass: \"d-none\" },\n        _vm._l(_vm.singleImages, function(image) {\n          return _c(\"div\", { staticClass: \"swiper-slide\" }, [\n            _c(\"img\", {\n              staticClass: \"single-swiper__image\",\n              attrs: {\n                alt: _vm.getAltText(image),\n                title: _vm.getImageName(image),\n                src: image.url,\n                itemprop: \"image\"\n              }\n            })\n          ])\n        }),\n        0\n      ),\n      _vm._v(\" \"),\n      _c(\n        \"div\",\n        { ref: \"single\", staticClass: \"swiper-container single-swiper\" },\n        [\n          _c(\"div\", { staticClass: \"swiper-wrapper\" }),\n          _vm._v(\" \"),\n          _c(\"div\", { staticClass: \"swiper-pagination\" })\n        ]\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!./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 class=\"item-image-carousel__wrapper\"\n         itemscope\n         itemtype=\"http://schema.org/Thing\">\n        <div class=\"d-none\"\n             ref=\"thumbImages\">\n            <div class=\"swiper-slide\" v-for=\"(imagePreview, index) in carouselImages\">\n                <img :alt=\"getAltText(imagePreview)\"\n                     :title=\"getImageName(imagePreview)\"\n                     class=\"single-thumb-swiper__image object-fit\"\n                     :src=\"imagePreview.url\">\n            </div>\n        </div>\n        <div class=\"swiper-container single-thumb-swiper d-none d-md-block\"\n             ref=\"thumbs\">\n            <div class=\"swiper-wrapper\"></div>\n        </div>\n        <div class=\"single-thumb-swiper-button-next\"></div>\n        <div class=\"single-thumb-swiper-button-prev\"></div>\n\n        <div class=\"d-none\" ref=\"singleImages\">\n            <div class=\"swiper-slide\"\n                 v-for=\"image in singleImages\">\n                <img :alt=\"getAltText(image)\"\n                     :title=\"getImageName(image)\"\n                     class=\"single-swiper__image\"\n                     :src=\"image.url\"\n                     itemprop=\"image\">\n            </div>\n        </div>\n        <div class=\"swiper-container single-swiper\" ref=\"single\">\n            <div class=\"swiper-wrapper\"></div>\n            <div class=\"swiper-pagination\"></div>\n        </div>\n    </div>\n</template>\n\n<script>\n    import Swiper from 'swiper';\n    import PhotoSwipe from 'photoswipe/dist/photoswipe.min';\n    import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.min';\n\n    export default {\n\n        props: [\n            'imageUrlAccessor',\n        ],\n\n        inject: {\n            itemId: {\n                default: null\n            }\n        },\n\n        data() {\n            return {\n                currentItem: 0,\n                currentUrl: window.location.href,\n                thumbSwiper: null,\n                singleSwiper: null,\n            };\n        },\n\n        computed: {\n\n            currentVariation() {\n                return this.$store.getters[`${this.itemId}/currentItemVariation`]\n            },\n\n            carouselImages() {\n                return this.orderByPosition(\n                    this.$options.filters.itemImages(\n                        this.currentVariation.images,\n                        \"urlPreview\"\n                    )\n                ).slice(0, this.maxQuantity);\n            },\n\n            singleImages() {\n                return this.orderByPosition(\n                    this.$options.filters.itemImages(\n                        this.currentVariation.images,\n                        this.imageUrlAccessor\n                    )\n                ).slice(0, this.maxQuantity);\n            },\n\n            photoSwipeImages() {\n                return this.orderByPosition(\n                    this.$options.filters.photoSwipeItemImages(\n                        this.currentVariation.images,\n                        this.imageUrlAccessor)\n                );\n            }\n        },\n\n        watch: {\n            currentVariation: {\n                handler(val, oldVal) {\n                    if (val !== oldVal) {\n                        setTimeout(() => {\n                            this.reInitialize();\n                        }, 1);\n                    }\n                },\n                deep: true,\n            },\n        },\n\n        mounted() {\n\n            let that = this;\n\n            $('document').ready(function () {\n                that.initThumbCarousel();\n                that.initCarousel();\n            });\n        },\n\n        methods: {\n\n            getImageCount() {\n                return this.carouselImages.length;\n            },\n\n            reInitialize() {\n\n                this.thumbSwiper.destroy();\n                this.singleSwiper.destroy();\n                this.initThumbCarousel();\n                this.initCarousel();\n            },\n\n            initCarousel() {\n\n                let that = this;\n\n                const $singleImages = $(this.$refs.singleImages);\n                const $singleSwiper = $(this.$refs.single);\n                $singleSwiper.find('.swiper-wrapper').html($singleImages.html());\n                this.singleSwiper = new Swiper($singleSwiper, {\n                    slidesPerView: 1,\n                    spaceBetween: 8,\n                    pagination: {\n                        el: '.swiper-pagination',\n                        clickable: true,\n                    },\n                    thumbs: {\n                        swiper: this.thumbSwiper,\n                    }\n                });\n                $singleSwiper.off('click').on('click', '.single-swiper__image', function () {\n\n                    let index = that.singleSwiper.activeIndex;\n                    let pswpElement = document.querySelectorAll('.pswp')[0];\n\n                    // define options (if needed)\n                    let options = {\n                        // optionName: 'option value'\n                        // for example:\n                        index: index, // start at first slide\n                        hideAnimationDuration: 0,\n                        showAnimationDuration: 0,\n                        history: false,\n\n                    };\n\n                    // Initializes and opens PhotoSwipe\n                    let gallery = new PhotoSwipe(\n                        pswpElement,\n                        PhotoSwipeUI_Default,\n                        that.photoSwipeImages,\n                        options\n                    );\n\n                    gallery.listen('gettingData', function (index, item) {\n                        if (item.w < 1 || item.h < 1) { // unknown size\n\n                            let img = new Image();\n\n                            img.onload = function () { // will get size after load\n\n                                item.w = this.width; // set image width\n                                item.h = this.height; // set image height\n\n                                gallery.invalidateCurrItems(); // reinit Items\n                                gallery.updateSize(true); // reinit Items\n                            };\n                            img.src = item.src; // let's download image\n                        }\n                    });\n                    gallery.init();\n                });\n            },\n\n            initThumbCarousel() {\n\n                const $thumbImages = $(this.$refs.thumbImages);\n                const $thumbSwiper = $(this.$refs.thumbs);\n                $thumbSwiper.find('.swiper-wrapper').html($thumbImages.html());\n                this.thumbSwiper = new Swiper($thumbSwiper, {\n                    slidesPerView: 'auto',\n                    direction: 'vertical',\n                    spaceBetween: 40,\n                    navigation: {\n                        nextEl: '.single-thumb-swiper-button-next',\n                        prevEl: '.single-thumb-swiper-button-prev',\n                    }\n                });\n            },\n\n            orderByPosition(list) {\n                return list.sort(\n                    (entryA, entryB) => {\n                        if (entryA.position > entryB.position) {\n                            return 1;\n                        }\n                        if (entryA.position < entryB.position) {\n                            return -1;\n                        }\n\n                        return 0;\n                    });\n            },\n\n            getAltText(image) {\n                return image && image.alternate ? image.alternate : this.$options.filters.itemName(this.currentVariation);\n            },\n\n            getImageName(image) {\n                return image && image.name ? image.name : this.$options.filters.itemName(this.currentVariation);\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/fhartwig/Sites/DIA-NaPo/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":""}