{"version":3,"sources":["webpack:///./assets/javascripts/modules/components/ShopCategoryComponent.js"],"names":["ShopCategoryComponent","Component","_this2","this","Promise","resolve","reject","moduleLoader","loadCarouselAndExecute","module","error","main","$component","querySelector","SELECTORS","prevArrow","nextArrow","navDots","cards","Array","from","querySelectorAll","card","content","_this3","_get","prototype","__proto__","Object","getPrototypeOf","call","slickInstance","dom","readDOM","importLibrary","then","initCarousel","hasContent","hasFourCards","length","classList","toggle","CSS","fourthCase","opts","dots","arrows","autoplay","swipeToSlide","centerMode","slidesToScroll","infinite","slidesToShow","centerPadding","appendDots","draggable","rows","responsive","breakpoint","settings","$","slick","on","evt","curSlide","nextSlide","options","which","enable","_this4","elem","hidden","toggleElem","prev","next"],"mappings":"oXAEqBA,grBAA8BC,mDAuBjC,IAAAC,EAAAC,KACd,OAAO,IAAIC,QAAQ,SAACC,EAASC,GAC3BJ,EAAKK,aAAaC,uBAChB,SAAAC,GAAYJ,EAAQI,IACpB,SAAAC,GAAWJ,EAAOI,yCAMtB,OACEC,KAAMR,KAAKS,WAAWC,cAAcV,KAAKW,UAAUH,MACnDI,UAAWZ,KAAKS,WAAWC,cAAcV,KAAKW,UAAUC,WACxDC,UAAWb,KAAKS,WAAWC,cAAcV,KAAKW,UAAUE,WACxDC,QAASd,KAAKS,WAAWC,cAAcV,KAAKW,UAAUG,SACtDC,MAAOC,MAAMC,KAAKjB,KAAKS,WAAWS,iBAAiBlB,KAAKW,UAAUQ,OAClEC,QAASpB,KAAKS,WAAWC,cAAcV,KAAKW,UAAUS,2CAIjD,IAAAC,EAAArB,gQACPsB,CAAAzB,EAAA0B,UAAAC,WAAAC,OAAAC,eAAA7B,EAAA0B,WAAA,SAAAvB,MAAA2B,KAAA3B,MAEAA,KAAK4B,cAAgB,KACrB5B,KAAK6B,IAAM7B,KAAK8B,UAEX9B,KAAK6B,IAAIrB,MAEdR,KAAK+B,gBAAgBC,KAAK,WACxBX,EAAKY,wDAKP,IAAMC,EAAkC,OAArBlC,KAAK6B,IAAIT,QACtBe,EAAyC,IAA1BnC,KAAK6B,IAAId,MAAMqB,OACpCpC,KAAKS,WAAW4B,UAAUC,OAAOtC,KAAKuC,IAAIC,WAAYL,GACtD,IAAMM,GACJC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,cAAeV,GAAgBD,EAC/BY,YAAaZ,IAAeC,EAC5BY,eAAgB,EAChBC,UAAWd,EACXe,aAAcf,EAAa,KAAOA,GAAcC,EAAe,EAAI,EACnEe,cAAgBhB,GAAeC,EAAuB,IAAR,MAC9CvB,UAAWZ,KAAK6B,IAAIjB,UACpBC,UAAWb,KAAK6B,IAAIhB,UACpBsC,WAAYnD,KAAK6B,IAAIf,QACrBsC,WAAYjB,GAAgBD,EAC5BmB,KAAM,EACNC,aAEIC,WAAY,IACZC,UACEP,aAAc,EACdD,UAAU,EACVF,YAAY,EACZI,cAAe,SAIjBK,WAAY,IACZC,UACEP,aAAcd,EAAe,EAAI,EACjCa,UAAWb,EACXW,YAAaX,EACbe,cAAgBf,EAAuB,IAAR,UAKvCnC,KAAK4B,cAAgB6B,EAAEzD,KAAK6B,IAAIrB,MAAMkD,MAAMjB,GAExCP,GACFlC,KAAK4B,cAAc+B,GAAG,eAAgB,SAACC,EAAKF,EAAOG,EAAUC,GACvDJ,EAAMK,QAAQf,+CAiBZgB,EAAOC,GAAQ,IAAAC,EAAAlE,MACN,SAAAmE,GACjBA,EAAK9B,UAAUC,OAAO4B,EAAK3B,IAAI6B,QAASH,GAQ1CI,EAJEC,KAAMtE,KAAK6B,IAAIjB,UACf2D,KAAMvE,KAAK6B,IAAIhB,WAGCmD,0CA7HhB,MAAO,0DAIT,OACExD,KAAM,iDACNI,UAAW,oBACXC,UAAW,oBACXC,QAAS,kBACTK,KAAM,cACNC,QAAS,8CAKX,OACEgD,OAAQ,WACR5B,WAAY,8BAnBG3C","file":"component-ShopCategoryComponent.chunks.js","sourcesContent":["import Component from \"../abstracts/Component\";\n\nexport default class ShopCategoryComponent extends Component {\n  get COMPONENTNAME() {\n      return 'ShopCategoryComponent';\n  }\n\n  get SELECTORS() {\n    return {\n      main: '[data-carousel=\"true\"]:not(.slick-initialized)',\n      prevArrow: '[data-prev-arrow]',\n      nextArrow: '[data-next-arrow]',\n      navDots: '[data-nav-dots]',\n      card: '[data-card]',\n      content: '[data-content]',\n    };\n  }\n\n  get CSS() {\n    return {\n      hidden: '--hidden',\n      fourthCase: '--four-cards-case',\n    }\n  }\n\n  importLibrary() {\n    return new Promise((resolve, reject) => {\n      this.moduleLoader.loadCarouselAndExecute(\n        module => { resolve(module) },\n        error => { reject(error) }\n      );\n    })\n  }\n\n  readDOM() {\n    return {\n      main: this.$component.querySelector(this.SELECTORS.main),\n      prevArrow: this.$component.querySelector(this.SELECTORS.prevArrow),\n      nextArrow: this.$component.querySelector(this.SELECTORS.nextArrow),\n      navDots: this.$component.querySelector(this.SELECTORS.navDots),\n      cards: Array.from(this.$component.querySelectorAll(this.SELECTORS.card)),\n      content: this.$component.querySelector(this.SELECTORS.content),\n    }\n  }\n\n  render() {\n    super.render();\n\n    this.slickInstance = null;\n    this.dom = this.readDOM();\n\n    if (!this.dom.main) return;\n\n    this.importLibrary().then(() => {\n      this.initCarousel();\n    });\n  }\n\n  initCarousel() {\n    const hasContent = this.dom.content !== null;\n    const hasFourCards = this.dom.cards.length === 4;\n    this.$component.classList.toggle(this.CSS.fourthCase, hasFourCards);\n    const opts = {\n      dots: true,\n      arrows: true,\n      autoplay: false,\n      swipeToSlide: !hasFourCards && hasContent,\n      centerMode: !hasContent && !hasFourCards,\n      slidesToScroll: 1,\n      infinite: !hasContent,\n      slidesToShow: hasContent ? 2.7 : !hasContent && hasFourCards ? 4 : 3,\n      centerPadding: !hasContent && !hasFourCards ? '15%' : '0',\n      prevArrow: this.dom.prevArrow,\n      nextArrow: this.dom.nextArrow,\n      appendDots: this.dom.navDots,\n      draggable: !hasFourCards || hasContent,\n      rows: 0,\n      responsive: [\n        {\n          breakpoint: 767,\n          settings: {\n            slidesToShow: 1,\n            infinite: true,\n            centerMode: true,\n            centerPadding: '15%',\n          },\n        },\n        {\n          breakpoint: 991,\n          settings: {\n            slidesToShow: hasFourCards ? 4 : 3,\n            infinite: !hasFourCards,\n            centerMode: !hasFourCards,\n            centerPadding: !hasFourCards ? '15%' : '0',\n          },\n        },\n      ],\n    };\n    this.slickInstance = $(this.dom.main).slick(opts);\n\n    if (hasContent) {\n      this.slickInstance.on('beforeChange', (evt, slick, curSlide, nextSlide) => {\n        if (slick.options.infinite) return;\n\n        // phantom slide, so we start from one\n        /*if (nextSlide === 1) {\n          this.toggleArrow('prev', false);\n        } else if (nextSlide === this.dom.cards.length - 1) {\n          this.toggleArrow('next', false);\n        } else {\n          this.toggleArrow('prev', true);\n          this.toggleArrow('next', true);\n        }*/\n      });\n    }\n\n//    this.slickInstance.slick('slickGoTo', 1);\n  }\n\n  toggleArrow(which, enable) {\n    const toggleElem = elem => {\n      elem.classList.toggle(this.CSS.hidden, !enable);\n    }\n\n    const arrows = {\n      prev: this.dom.prevArrow,\n      next: this.dom.nextArrow,\n    };\n\n    toggleElem(arrows[which]);\n  }\n}\n"],"sourceRoot":""}