{"version":3,"sources":["webpack:///./resources/js/src/app/components/category/ViewCustomizer.vue","webpack:///resources/js/src/app/components/category/ViewCustomizer.vue","webpack:///./resources/js/src/app/components/category/ViewCustomizer.vue?b5da","webpack:///./resources/src/js/cookies.js","webpack:///./resources/js/src/app/components/category/ViewCustomizer.vue?e085"],"names":["render","_vm","this","_c","_self","staticClass","_l","views","view","index","key","on","click","$event","activeView","class","active","attrs","src","pluginPath","alt","$translate","_v","_s","_withStripped","name","props","mobileViews","type","required","desktopViews","itemClass","containerId","data","mounted","parts","document","cookie","split","length","pop","shift","window","matches","defaultIndex","computed","isMobile","methods","customizeView","value","days","expires","date","Date","setTime","getTime","toUTCString","setCookie","container","items","item","watch","component"],"mappings":"4GAAIA,EAAS,WACX,IAAIC,EAAMC,KACRC,EAAKF,EAAIG,MAAMD,GACjB,OAAOA,EAAG,MAAO,CAAEE,YAAa,2BAA6B,CAC3DF,EACE,MACA,CAAEE,YAAa,oCACfJ,EAAIK,GAAGL,EAAIM,OAAO,SAAUC,EAAMC,GAChC,OAAON,EACL,SACA,CACEO,IAAKF,EAAOC,EACZE,GAAI,CACFC,MAAO,SAAUC,GACfZ,EAAIa,WAAaL,KAIvB,CACEN,EAAG,MAAO,CACRY,MAAO,CAAEC,OAAQf,EAAIa,YAAcL,GACnCQ,MAAO,CACLC,IAAK,GAAF,OAAKjB,EAAIkB,WAAU,uBAAeX,EAAI,QACzCY,IAAKnB,EAAIoB,WACP,yDAOZ,GAEFpB,EAAIqB,GAAG,KACPnB,EAAG,IAAK,CACNF,EAAIqB,GACFrB,EAAIsB,GAAGtB,EAAIoB,WAAW,wDAM9BrB,EAAOwB,eAAgB,E,0lCCfR,IC3BuM,ED2BvM,CACfC,sBAEAC,OACAC,aACAC,WACAC,aAGAC,cACAF,WACAC,aAGAE,WACAH,YACAC,aAGAG,aACAJ,YACAC,aAGAV,YACAS,YACAC,cAIAI,gBAAA,OACAnB,eAGAoB,mBACA,ME9DyB,SAACT,GACtB,IACMU,EADQ,KAAH,OAAQC,SAASC,QACRC,MAAM,KAAD,OAAMb,EAAI,MAEnC,GAAqB,IAAjBU,EAAMI,OAAc,OAAOJ,EAAMK,MAAMF,MAAM,KAAKG,QF0D1D,mBAEA,IAGAC,gEACAC,UAEAC,KAGA,6BAGAC,UACAC,oBACA,wDAGAvC,iBACA,qBAIA,iBAHA,oBAOAwC,SACAC,0BEpFyB,SAACvB,EAAMwB,EAAOC,GACnC,IAAIC,EAAU,GAEd,GAAID,EAAM,CACN,IAAME,EAAO,IAAIC,KACjBD,EAAKE,QAAQF,EAAKG,UAAmB,GAAPL,EAAY,GAAK,GAAK,KACpDC,EAAU,aAAeC,EAAKI,mBAE9BL,EAAU,iDAGdf,SAASC,OACLZ,EACA,KACCwB,GAAS,IACVE,EACA,kCFqERM,8CACA,kCAGA,wDAEA,qBAEA,gDAEA,KACAC,oCACAA,0BAEAA,iCACAA,4BAEA,IAEA,EAFA,IAEAC,GAAA,wCACAC,qEACA,4BAIA,kCAGA,EAHA,IACAxB,0BACA,yCACA,IAFA,2BAEA,KAFAsB,UAGAA,sBACAA,sBACA,iCAIAG,OACA/C,sBACA,wB,OG1HIgD,EAAY,YACd,EACA9D,EJgCoB,II9BpB,EACA,KACA,KACA,MAIa,UAAA8D,E","file":"chunks/ceres-client-21.min.js","sourcesContent":["var render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\"div\", { staticClass: \"viewcustomizer__wrapper\" }, [\n    _c(\n      \"div\",\n      { staticClass: \"viewcustomizer__wrapper--buttons\" },\n      _vm._l(_vm.views, function (view, index) {\n        return _c(\n          \"button\",\n          {\n            key: view + index,\n            on: {\n              click: function ($event) {\n                _vm.activeView = index\n              },\n            },\n          },\n          [\n            _c(\"img\", {\n              class: { active: _vm.activeView == index },\n              attrs: {\n                src: `${_vm.pluginPath}/icons/view/${view}.svg`,\n                alt: _vm.$translate(\n                  \"TatyouTheme::Template.categoriesCustomizeView\"\n                ),\n              },\n            }),\n          ]\n        )\n      }),\n      0\n    ),\n    _vm._v(\" \"),\n    _c(\"p\", [\n      _vm._v(\n        _vm._s(_vm.$translate(\"TatyouTheme::Template.categoriesCustomizeView\"))\n      ),\n    ]),\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","<template>\n    <div class=\"viewcustomizer__wrapper\">\n        <div class=\"viewcustomizer__wrapper--buttons\">\n            <button\n                v-for=\"(view, index) in views\"\n                :key=\"view + index\"\n                @click=\"activeView = index\"\n            >\n                <img\n                    :src=\"`${pluginPath}/icons/view/${view}.svg`\"\n                    :alt=\"\n                        $translate(\n                            'TatyouTheme::Template.categoriesCustomizeView'\n                        )\n                    \"\n                    :class=\"{ active: activeView == index }\"\n                />\n            </button>\n        </div>\n\n        <p>{{ $translate(\"TatyouTheme::Template.categoriesCustomizeView\") }}</p>\n    </div>\n</template>\n\n<script>\nimport { setCookie, getCookie } from \"../../../../../src/js/cookies\";\n\nexport default {\n    name: \"ViewCustomizer\",\n\n    props: {\n        mobileViews: {\n            type: Array,\n            required: true\n        },\n\n        desktopViews: {\n            type: Array,\n            required: true\n        },\n\n        itemClass: {\n            type: String,\n            required: true\n        },\n\n        containerId: {\n            type: String,\n            required: false\n        },\n\n        pluginPath: {\n            type: String,\n            required: true\n        }\n    },\n\n    data: () => ({\n        activeView: 0\n    }),\n\n    mounted() {\n        const userSettings = getCookie(\"articlesperrow\");\n\n        let defaultIndex = 1;\n\n        if (\n            window.matchMedia(\"(min-width: 767px) and (max-width: 1199px)\")\n                .matches\n        ) {\n            defaultIndex = 0;\n        }\n\n        this.activeView = userSettings ?? defaultIndex;\n    },\n\n    computed: {\n        isMobile() {\n            return window.matchMedia(\"(max-width: 767px)\").matches;\n        },\n\n        views() {\n            if (!this.isMobile) {\n                return this.desktopViews;\n            }\n\n            return this.mobileViews;\n        }\n    },\n\n    methods: {\n        customizeView() {\n            setCookie(\"articlesperrow\", this.activeView.toString());\n            const itemsPerRow = this.views[this.activeView];\n\n            // reorder items\n            const items = document.querySelectorAll(`.${this.itemClass}`);\n\n            if (this.containerId) {\n                // container\n                const container = document.getElementById(this.containerId);\n\n                if (itemsPerRow > 4) {\n                    container.classList.remove(\"container-max\");\n                    container.classList.add(\"px-3\");\n                } else {\n                    container.classList.add(\"container-max\");\n                    container.classList.remove(\"px-3\");\n                }\n            }\n\n            for (const item of items) {\n                item.className = `${this.itemClass} per-row-${itemsPerRow} ${\n                    this.isMobile ? \"mobile\" : \"\"\n                }`;\n            }\n\n            // setup image heights\n            for (const container of document.querySelectorAll(\n                \".category__produkt--bilder-container\"\n            )) {\n                container.style.height = \"auto\";\n                container.style.width = \"auto\";\n            }\n        }\n    },\n\n    watch: {\n        activeView() {\n            this.customizeView();\n        }\n    }\n};\n</script>","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ViewCustomizer.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!./ViewCustomizer.vue?vue&type=script&lang=js&\"","export const getCookie = (name) => {\n    const value = `; ${document.cookie}`;\n    const parts = value.split(`; ${name}=`);\n\n    if (parts.length === 2) return parts.pop().split(\";\").shift();\n};\n\nexport const setCookie = (name, value, days) => {\n    let expires = \"\";\n\n    if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = \"; expires=\" + date.toUTCString();\n    } else {\n        expires = \";expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/;\";\n    }\n\n    document.cookie =\n        name +\n        \"=\" +\n        (value || \"\") +\n        expires +\n        \"; path=/; SameSite=None; Secure\";\n};\n\nexport const deleteCookie = (name) => {\n    document.cookie =\n        name + \"=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;\";\n};\n","import { render, staticRenderFns } from \"./ViewCustomizer.vue?vue&type=template&id=6e20909b&\"\nimport script from \"./ViewCustomizer.vue?vue&type=script&lang=js&\"\nexport * from \"./ViewCustomizer.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":""}