{"version":3,"sources":["webpack:///./resources/js/src/app/components/itemList/LoadMoreItems.vue?1e3a","webpack:///./resources/js/src/app/components/itemList/LoadMoreItems.vue?c768","webpack:///resources/js/src/app/components/itemList/LoadMoreItems.vue","webpack:///./resources/js/src/app/components/itemList/LoadMoreItems.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","ref","staticClass","class","mounted","_l","visibleItems","item","key","id","attrs","data","_v","lastPage","is404","_e","disabled","loading","on","click","$event","updateVisibleItems","_s","$translate","stroke","_withStripped","component","options","__file"],"mappings":"kGAAA,IAAIA,EAAS,WACX,IAAIC,EAAMC,KACNC,EAAKF,EAAIG,eACTC,EAAKJ,EAAIK,MAAMD,IAAMF,EACzB,OAAOE,EAAG,MAAO,CACfA,EACE,MACA,CACEE,IAAK,cACLC,YAAa,wBACbC,MAAO,CAAE,6BAA8BR,EAAIS,UAE7CT,EAAIU,GAAGV,EAAIW,cAAc,SAASC,GAChC,OAAOR,EACL,MACA,CAAEG,YAAa,2BACf,CACEH,EAAG,gBAAiB,CAClBS,IAAKD,EAAKE,GACVC,MAAO,CAAE,YAAaH,EAAKI,SAG/B,MAGJ,GAEFhB,EAAIiB,GAAG,KACNjB,EAAIkB,UAAalB,EAAImB,MA4ClBnB,EAAIoB,KA3CJhB,EAAG,MAAO,CAAEG,YAAa,iCAAmC,CAC1DH,EACE,SACA,CACEG,YAAa,4BACbQ,MAAO,CAAEM,SAAUrB,EAAIsB,SACvBC,GAAI,CACFC,MAAO,SAASC,GACd,OAAOzB,EAAI0B,oBAAmB,MAIpC,CACE1B,EAAIsB,QACA,CACEtB,EAAIiB,GACF,yBACEjB,EAAI2B,GACF3B,EAAI4B,WACF,gDAGJ,uBAGN,CACE5B,EAAIiB,GACF,yBACEjB,EAAI2B,GACF3B,EAAI4B,WACF,8CAGJ,kBAEJxB,EAAG,MAAO,CAAEW,MAAO,CAAEc,OAAQ,iBAAoB,CAC/CzB,EAAG,MAAO,CAAEW,MAAO,CAAE,aAAc,uBAI7C,QAOZhB,EAAO+B,eAAgB,E,+CC5E8L,EC6BrN,CACE,MAAF,CACI,WAAJ,CACM,UAAN,EACM,KAAN,QAEI,MAAJ,CACM,KAAN,MACM,UAAN,GAEI,QAAJ,CACM,KAAN,OACM,QAAN,IAEI,aAAJ,CACM,KAAN,OACM,QAAN,KAGE,KAnBF,WAoBI,MAAJ,CACM,SAAN,GACM,aAAN,GACM,SAAN,EACM,YAAN,EACM,UAAN,EACM,SAAN,EACA,gBACA,aACA,WAGE,QAhCF,WAiCI,KAAJ,oBACI,KAAJ,yBAEE,QApCF,WAqCI,KAAJ,sBAEE,QAAF,CACI,mBADJ,SACA,GAAM,IAAN,OACA,yBAEA,kGACA,IAEA,kCAEA,uCACA,mCAEA,wFAGA,QA0BM,GAxBN,gDAGA,EADA,WACA,GAGA,GAKA,kDACA,MAYA,aASQ,OAPA,KAAR,sCACQ,KAAR,0BAEQ,KAAR,sBACU,EAAV,cAMQ,KAAR,WAGM,KAAN,+BAEQ,EAAR,8BACQ,EAAR,0DAEQ,EAAR,qBAEA,mDAKA,uBACA,sCAEA,uBACA,iCAEA,oCAEA,KAEA,gBAEA,mBACQ,QAAR,SACQ,EAAR,eAGI,UArFJ,SAqFA,GAAM,IAAN,OAEM,OAAN,2BAEA,iCAEU,EAAV,YACA,6EACA,iEACA,kBAEA,iCACc,EAAd,aAGY,EAAZ,yBAEA,kBACY,EAAZ,MAIU,EAAV,U,OCxKIC,EAAY,YACd,EACAhC,EHkEoB,IGhEpB,EACA,KACA,KACA,MAuBFgC,EAAUC,QAAQC,OAAS,6DACZ,UAAAF,E","file":"chunks/ceres-client-43.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(\"div\", [\n    _c(\n      \"div\",\n      {\n        ref: \"productList\",\n        staticClass: \"product-list row grid\",\n        class: { \"home-cat-list__more--load\": !_vm.mounted }\n      },\n      _vm._l(_vm.visibleItems, function(item) {\n        return _c(\n          \"div\",\n          { staticClass: \"col-6 col-md-4 col-lg-3\" },\n          [\n            _c(\"category-item\", {\n              key: item.id,\n              attrs: { \"item-data\": item.data }\n            })\n          ],\n          1\n        )\n      }),\n      0\n    ),\n    _vm._v(\" \"),\n    !_vm.lastPage && !_vm.is404\n      ? _c(\"div\", { staticClass: \"d-flex justify-content-center\" }, [\n          _c(\n            \"button\",\n            {\n              staticClass: \"home-highlight-items__btn\",\n              attrs: { disabled: _vm.loading },\n              on: {\n                click: function($event) {\n                  return _vm.updateVisibleItems(true)\n                }\n              }\n            },\n            [\n              _vm.loading\n                ? [\n                    _vm._v(\n                      \"\\n                    \" +\n                        _vm._s(\n                          _vm.$translate(\n                            \"HoferAntikschmuck::Template.loadMoreLoading\"\n                          )\n                        ) +\n                        \"\\n                \"\n                    )\n                  ]\n                : [\n                    _vm._v(\n                      \"\\n                    \" +\n                        _vm._s(\n                          _vm.$translate(\n                            \"HoferAntikschmuck::Template.loadMoreItems\"\n                          )\n                        ) +\n                        \"\\n\\n\\t\\t\\t\\t\\t\"\n                    ),\n                    _c(\"svg\", { attrs: { stroke: \"currentColor\" } }, [\n                      _c(\"use\", { attrs: { \"xlink:href\": \"#chevron-down\" } })\n                    ])\n                  ]\n            ],\n            2\n          )\n        ])\n      : _vm._e()\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!./LoadMoreItems.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!./LoadMoreItems.vue?vue&type=script&lang=js&\"","<template>\n    <div>\n        <div class=\"product-list row grid\" :class=\"{'home-cat-list__more--load': !mounted}\" ref=\"productList\">\n            <div v-for=\"item in visibleItems\" class=\"col-6 col-md-4 col-lg-3\">\n                <category-item :item-data=\"item.data\" :key=\"item.id\" />\n            </div>\n        </div>\n        <div v-if=\"!lastPage && !is404\" class=\"d-flex justify-content-center\">\n            <button class=\"home-highlight-items__btn\"\n                    :disabled=\"loading\"\n                    @click=\"updateVisibleItems(true)\">\n                <template v-if=\"loading\">\n                    {{ $translate('HoferAntikschmuck::Template.loadMoreLoading') }}\n                </template>\n                <template v-else>\n                    {{ $translate('HoferAntikschmuck::Template.loadMoreItems') }}\n\n\t\t\t\t\t<svg stroke=\"currentColor\">\n\t\t\t\t\t\t<use xlink:href=\"#chevron-down\" />\n\t\t\t\t\t</svg>\n                </template>\n            </button>\n        </div>\n    </div>\n</template>\n\n<script>\nimport ApiService from 'ceres/app/services/ApiService';\n\nexport default {\n    props: {\n        categoryId: {\n            required: true,\n            type: Number\n        },\n        items: {\n            type: Array,\n            required: true\n        },\n        sorting: {\n            type: String,\n            default: ''\n        },\n        itemsPerPage: {\n            type: Number,\n            default: 15\n        }\n    },\n    data() {\n        return {\n            itemList: [],\n            visibleItems: [],\n            loading: false,\n            currentPage: 1,\n            lastPage: false,\n            mounted: false,\n\t\t\twrapperHeight: 0,\n\t\t\titemHeight: 0,\n\t\t\tis404: false,\n        };\n    },\n    created() {\n        this.itemList     = this.items;\n        this.visibleItems = this.items;\n    },\n    mounted() {\n        this.updateVisibleItems();\n    },\n    methods: {\n        updateVisibleItems(clicked) {\n\t\t\tlet productList = this.$refs.productList\n\n\t\t\tthis.is404 = document.getElementsByTagName(\"body\")[0].classList.contains(\"category-page-not-found\")\n\t\t\tif(clicked){\n\n\t\t\t\tthis.wrapperHeight = productList.clientHeight\n\n\t\t\t\tproductList.style.height = this.wrapperHeight + \"px\"\n\t\t\t\tproductList.classList.add(\"overflow-hidden\")\n\n\t\t\t\tthis.itemHeight = this.$refs.productList.getElementsByTagName(\"article\")[0].clientHeight\n\t\t\t}\n\n\t\t\t\tlet amount = 6;\n\n\t\t\t\tif(window.matchMedia('(min-width: 992px)').matches) {\n\n\t\t\t\t\tif(this.is404) {\n\t\t\t\t\t\tamount = 12;\n\t\t\t\t\t}\n\t\t\t\t\telse {\n\t\t\t\t\t\tamount = 15;\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t\telse if(window.matchMedia('(min-width: 768px)').matches) {\n\t\t\t\t\tamount = 9;\n\t\t\t\t}\n\n\n            /**\n             * SSR CLS optimization\n             *\n             * All items are rendered on created and the responsive visibility is done with CSS max-height and\n             * overflow hidden (CSS class \"product-list__more--load\"). On the server the document is not available.\n             * When the component is mounted the correct amount is calculated with the viewPort and\n             * set in visibleItems. The load class is removed in the template.\n             */\n            if(!this.mounted) {\n\n                this.visibleItems = this.itemList.slice(0, amount);\n                this.itemList.splice(0, amount);\n\n                this.$nextTick(() => {\n                    this.mounted = true;\n                })\n\n                return;\n\n            }else {\n                this.loading = true;\n            }\n\n            this.loadItems(amount).then((data) => {\n\n                this.itemList     = this.itemList.concat(data);\n                this.visibleItems = this.visibleItems.concat(this.itemList.slice(0, amount));\n\n                this.itemList.splice(0, amount);\n\n\t\t\t\tproductList.style.height = this.wrapperHeight + (this.itemHeight * 3) + \"px\"\n\n\n\n\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\tproductList.classList.remove(\"overflow-hidden\")\n\n\t\t\t\t\tif (productList.style.removeProperty) {\n\t\t\t\t\t\tproductList.style.removeProperty('height');\n\t\t\t\t\t} else {\n\t\t\t\t\t\tproductList.style.removeAttribute('height');\n\t\t\t\t\t}\n\t\t\t\t}, 600);\n\n\t\t\t\tthis.loading = false;\n\n            }).catch(err => {\n                console.error(err);\n                this.loading = false;\n            });\n        },\n        loadItems(amount) {\n\n            return new Promise((resolve, reject) => {\n\n                if(this.itemList.length < amount && !this.lastPage) {\n\n                    ApiService.get(\n                        window.location.origin + '/rest/io/category?items=' + this.itemsPerPage + '&sorting=' +\n                        this.sorting + '&page=' + (++this.currentPage) + '&categoryId=' + this.categoryId\n                    ).done(response => {\n\n                        if(response.itemList.documents.length < 15) {\n                            this.lastPage = true;\n                        }\n\n                        resolve(response.itemList.documents);\n\n                    }).fail(error => {\n                        reject(error);\n                    });\n\n                }else {\n                    resolve([]);\n                }\n            });\n        }\n    },\n};\n</script>\n","import { render, staticRenderFns } from \"./LoadMoreItems.vue?vue&type=template&id=2516eb0e&\"\nimport script from \"./LoadMoreItems.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadMoreItems.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/mironpingel/DEV/devtool/12735/113/HoferAntikschmuck/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('2516eb0e')) {\n      api.createRecord('2516eb0e', component.options)\n    } else {\n      api.reload('2516eb0e', component.options)\n    }\n    module.hot.accept(\"./LoadMoreItems.vue?vue&type=template&id=2516eb0e&\", function () {\n      api.rerender('2516eb0e', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"resources/js/src/app/components/itemList/LoadMoreItems.vue\"\nexport default component.exports"],"sourceRoot":""}