{"version":3,"sources":["webpack:////Users/owenli/Documents/workspace/awi-wool-fe/src/views/blocks/carouselBlock/js/carouselBlock.js"],"names":["CLS","CarouselBlock","element","_this","this","_classCallCheck","$element","$","layouts","Default","FullContainerWidth","selectedLayout","$sliderContainer","find","concat","$carouselItems","$carouselSlider","$carouselImg","sliderNum","data","autoSlide","css","slick","dots","dotsClass","slidesToShow","autoplay","autoplaySpeed","appendArrows","appendDots","nextArrow","prevArrow","infinite","cssEase","useTransform","adaptiveHeight","responsive","breakpoint","settings","centerPadding","carouselArrowButton","setSelectedLayout","adjustCarouselItems","visibility","window","resize","_","debounce","$images","totalImages","length","imagesLoaded","each","index","imgSrc","attr","objImg","Image","src","onload","key","value","layout","addClass","adjustArrowVisibility","assignImageRatio","adjustArrowPosition","item","$image","$padder","width","height","removeClass","paddingTop","imgContainerHeight","_index","$arrow","top","$arrows","previousArrow","display","Math","floor","offset","left","ceil","getContainerWidth"],"mappings":"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","file":"block-2.430117f348aedc9992ce.js","sourcesContent":["const NS = 'CarouselBlock';\nconst CLS = 'carouselBlock';\n\nexport class CarouselBlock {\n\tconstructor(element) {\n\t\tthis.element = element;\n\t\tthis.$element = $(element);\n\t\tthis.layouts = {\n\t\t\tDefault: '',\n\t\t\tFullContainerWidth: 'fullContainerWidth'\n\t\t};\n\t\tthis.selectedLayout = this.layouts.Default;\n\n\t\tthis.$sliderContainer = this.$element.find(`.${CLS}-sliderContainer`);\n\t\tthis.$carouselItems = this.$element.find(`.${CLS}-item`);\n\t\tthis.$carouselSlider = this.$element.find(`.${CLS}-slider`);\n\t\tthis.$carouselImg = this.$element.find(`.${CLS}-item-img`);\n\t\tthis.sliderNum = this.$element.data(`sliderNum`);\n\t\tthis.autoSlide = this.$element.data(`autoSlide`);\n\t\tif(!this.sliderNum){\n\t\t\tthis.sliderNum = 1;\n\t\t}\n\n\t\tif(this.sliderNum < 2){\n\t\t\tthis.$carouselImg.css('height', 'auto');\n\t\t}\n\t\tif(this.autoSlide === \"False\"){\n\t\t\tthis.autoSlide = false;\n\t\t}\n\t\telse{\n\t\t\tthis.autoSlide = true;\n\t\t}\n\t\t// init slider\n\t\tthis.$carouselSlider.slick({\n\t\t\tdots: true,\n\t\t\tdotsClass: `slick-dots`,\n\t\t\tslidesToShow: this.sliderNum,\n\t\t\tautoplay: this.autoSlide,\n  \t\t\tautoplaySpeed: 5000,\n\t\t\tappendArrows: this.$sliderContainer,\n\t\t\tappendDots: this.$sliderContainer,\n\t\t\tnextArrow: `<button type=\"button\" class=\"slick-arrow slick-arrow--next\"><i class=\"slick-arrow-icon icon icon--chevron-lg-right\"></i></button>`,\n\t\t\tprevArrow: `<button type=\"button\" class=\"slick-arrow slick-arrow--previous\"><i class=\"slick-arrow-icon icon icon--chevron-lg-left\"></i></button>`,\n\t\t\tinfinite: false,\n\t\t\tcssEase: 'ease-in-out',\n\t\t\tuseTransform: true,\n\t\t\tadaptiveHeight: true,\n\t\t\tresponsive: [\n\t\t\t\t{\n\t\t\t\t  breakpoint: 768,\n\t\t\t\t  settings: {\n\t\t\t\t\tcenterPadding: '50px',\n\t\t\t\t\tslidesToShow: 1\n\t\t\t\t  }\n\t\t\t\t}\n\t\t\t  ]\n\t\t});\n\n\t\tthis.carouselArrowButton = this.$element.find(`.slick-arrow`);\n\n\t\t// Set the particular layout\n\t\tthis.setSelectedLayout();\n\n\t\t// Set the positioning of the carousel elements\n\t\tthis.adjustCarouselItems();\n\n\t\t// Display the carousel\n\t\tthis.$carouselItems.css({ visibility: 'visible' });\n\t\t$(window).resize(_.debounce(() => {\n\t\t\tthis.adjustCarouselItems();\n\t\t}, 50));\n\n\t\tthis.$images = this.$element.find('img');\n\t\tthis.totalImages = this.$images.length || 0;\n\t\tthis.imagesLoaded = 0;\n\n\t\tif(this.totalImages > 0) {\n\t\t\tthis.$images.each((index, element) => {\n\t\t\t\tlet imgSrc = $(element).attr('src');\n\t\t\t\tlet objImg = new Image();\n\t\t\t\tobjImg.src = imgSrc;\n\n\t\t\t\tobjImg.onload = () => {\n\t\t\t\t\tthis.imagesLoaded++;\n\t\t\t\t\tif(this.imagesLoaded === this.totalImages) {\n\t\t\t\t\t\tthis.adjustCarouselItems();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t});\n\t\t}\n\t}\n\n\tsetSelectedLayout() {\n\t\tlet selectedLayout = this.$element.data('layout');\n\t\tlet isFound = _.find(this.layouts, (layout) => {\n\t\t\treturn layout === selectedLayout;\n\t\t});\n\n\t\tif(isFound) {\n\t\t\tthis.selectedLayout = selectedLayout;\n\n\t\t\tif(this.selectedLayout === this.layouts.FullContainerWidth) {\n\t\t\t\tthis.$element.addClass(`${CLS}--fullContainerWidth`);\n\t\t\t}\n\t\t}\n\t}\n\n\tadjustCarouselItems() {\n\t\tthis.adjustArrowVisibility();\n\t\tthis.assignImageRatio();\n\t\tthis.adjustArrowPosition();\n\t}\n\n\tassignImageRatio() {\n\t\tif(this.sliderNum < 2){\n\t\tthis.$carouselItems.each((index, item) => {\n\t\t\tlet $image = $(item).find(`.${CLS}-item-img`);\n\t\t\tlet $padder = $(item).find(`.${CLS}-item-imgContainer-padder`);\n\n\t\t\tif($image.width() >= $image.height()) {\n\t\t\t\t$image.addClass(`${CLS}-item-img--horizontal`);\n\t\t\t\t$image.removeClass(`${CLS}-item-img--vertical`);\n\n\t\t\t\t$padder.css({\n\t\t\t\t\tpaddingTop: $image.height() / $image.width() * 100 + '%'\n\t\t\t\t});\n\t\t\t}\n\t\t\telse {\n\t\t\t\t$image.addClass(`${CLS}-item-img--vertical`);\n\t\t\t\t$image.removeClass(`${CLS}-item-img--horizontal`);\n\n\t\t\t\t$padder.css({\n\t\t\t\t\tpaddingTop: '66%'\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t\t}\n\t}\n\n\tadjustArrowPosition() {\n\t\tlet imgContainerHeight = this.$element.find(`.slick-active .${CLS}-item-imgContainer`).height();\n\n\t\tthis.carouselArrowButton.each((_index, element) => {\n\t\t\tlet $arrow = $(element);\n\t\t\t$arrow.css({\n\t\t\t\ttop: `${((imgContainerHeight / 2) - ($arrow.height() / 2))}px`\n\t\t\t});\n\t\t});\n\t}\n\n\tadjustArrowVisibility() {\n\t\tlet $arrows = this.$element.find(`.slick-arrow`);\n\t\tif(!($arrows && $arrows.length > 0)) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet previousArrow = this.$element.find(`.slick-arrow--previous`);\n\t\tlet nextArrow = this.$element.find(`.slick-arrow--next`);\n\n\t\tpreviousArrow.css({\n\t\t\tdisplay: Math.floor(previousArrow.offset().left) < 0 ? 'none' : 'block'\n\t\t});\n\n\t\tnextArrow.css({\n\t\t\tdisplay: (Math.ceil(nextArrow.offset().left + nextArrow.width()) + 1) >= this.getContainerWidth() ? 'none' : 'block'\n\t\t});\n\t}\n\n\tgetContainerWidth() {\n\t\treturn $(window).width();\n\t}\n}\n"],"sourceRoot":""}