{"version":3,"sources":["webpack:////Users/xingli/Documents/projects/projects/ara-fe/src/views/blocks/featuredCoursesTileBlock/js/featuredCoursesTileBlock.js"],"names":["CLS","FeaturedCoursesTileBlock","element","_this","this","_classCallCheck","$element","$","$sliderContainer","find","$carouselSlider","$carouselItems","slick","appendArrows","nextArrow","prevArrow","infinite","slidesToShow","slidesToScroll","mobileFirst","cssEase","useTransform","responsive","breakpoint","settings","centerPadding","centerMode","carouselArrowButton","css","opacity","window","resize","_","debounce","adjustArrowPosition","adjustArrowVisibility","imgContainerHeight","height","each","_index","$arrow","top","$arrows","length","previousArrow","display","Math","floor","offset","left","ceil","width","getContainerWidth"],"mappings":"6cAAA,IACMA,EAAM,mCAECC,oCACZ,SAAAA,yBAAYC,GAAS,IAAAC,EAAAC,kHAAAC,CAAAD,KAAAH,0BACpBG,KAAKF,QAAUA,EACfE,KAAKE,SAAWC,EAAEL,GAElBE,KAAKI,iBAAmBJ,KAAKE,SAASG,KAAd,IAAuBT,EAAvB,oBACxBI,KAAKM,gBAAkBN,KAAKE,SAASG,KAAd,IAAuBT,EAAvB,WACvBI,KAAKO,eAAiBP,KAAKE,SAASG,KAAd,IAAuBT,EAAvB,SAEtBI,KAAKM,gBAAgBE,OACpBC,aAAcT,KAAKI,iBACnBM,2IACAC,8IACAC,UAAU,EACVC,aAAc,EACdC,eAAgB,EAChBC,aAAa,EACbC,QAAS,cACTC,cAAc,EACdC,aAEEC,WAAY,IACZC,UACCC,cAAe,IACfR,aAAc,EACdC,eAAgB,KAIjBK,WAAY,IACZC,UACCE,YAAY,EACZD,cAAe,IACfR,aAAc,EACdC,eAAgB,OAMpBd,KAAKuB,oBAAsBvB,KAAKE,SAASG,KAAd,gBAC3BL,KAAKO,eAAeiB,KAAMC,QAAS,IAEnCtB,EAAEuB,QAAQC,OAAOC,EAAEC,SAAS,WAC3B9B,EAAK+B,sBACL/B,EAAKgC,yBACH,wGAIH,IAAIC,EAAqBhC,KAAKE,SAASG,KAAd,kBAAqCT,EAArC,sBAA8DqC,SAEvFjC,KAAKuB,oBAAoBW,KAAK,SAACC,EAAQrC,GACtC,IAAIsC,EAASjC,EAAEL,GACfsC,EAAOZ,KACNa,IAAUL,EAAqB,EAAMI,EAAOH,SAAW,EAAvD,+EAMF,IAAIK,EAAUtC,KAAKE,SAASG,KAAd,gBACd,GAAKiC,GAAWA,EAAQC,OAAS,EAAjC,CAIA,IAAIC,EAAgBxC,KAAKE,SAASG,KAAd,0BAChBK,EAAYV,KAAKE,SAASG,KAAd,sBAEhBmC,EAAchB,KACbiB,QAASC,KAAKC,MAAMH,EAAcI,SAASC,MAAQ,EAAI,OAAS,UAGjEnC,EAAUc,KACTiB,QAAUC,KAAKI,KAAKpC,EAAUkC,SAASC,KAAOnC,EAAUqC,SAAW,GAAM/C,KAAKgD,oBAAsB,OAAS,yEAK9G,OAAO7C,EAAEuB,QAAQqB","file":"block-9.317c86355b23b3978b5f.js","sourcesContent":["const NS = 'FeaturedCoursesTileBlock';\nconst CLS = 'featuredCoursesTileBlock';\n\nexport class FeaturedCoursesTileBlock {\n\tconstructor(element) {\n\t\tthis.element = element;\n\t\tthis.$element = $(element);\n\n\t\tthis.$sliderContainer = this.$element.find(`.${CLS}-sliderContainer`);\n\t\tthis.$carouselSlider = this.$element.find(`.${CLS}-slider`);\n\t\tthis.$carouselItems = this.$element.find(`.${CLS}-item`);\n\n\t\tthis.$carouselSlider.slick({\n\t\t\tappendArrows: this.$sliderContainer,\n\t\t\tnextArrow: `<button type=\"button\" class=\"slick-arrow slick-arrow--next\"><i class=\"slick-arrow-icon icon icon--chevron-right\"></i></button>`,\n\t\t\tprevArrow: `<button type=\"button\" class=\"slick-arrow slick-arrow--previous\"><i class=\"slick-arrow-icon icon icon--chevron-left\"></i></button>`,\n\t\t\tinfinite: true,\n\t\t\tslidesToShow: 3,\n\t\t\tslidesToScroll: 1,\n\t\t\tmobileFirst: false,\n\t\t\tcssEase: 'ease-in-out',\n\t\t\tuseTransform: true,\n\t\t\tresponsive: [\n\t\t\t\t{\n\t\t\t\t\tbreakpoint: 992,\n\t\t\t\t\tsettings: {\n\t\t\t\t\t\tcenterPadding: '0',\n\t\t\t\t\t\tslidesToShow: 2,\n\t\t\t\t\t\tslidesToScroll: 1\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tbreakpoint: 600,\n\t\t\t\t\tsettings: {\n\t\t\t\t\t\tcenterMode: true,\n\t\t\t\t\t\tcenterPadding: '0',\n\t\t\t\t\t\tslidesToShow: 1,\n\t\t\t\t\t\tslidesToScroll: 1\n\t\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\t\tthis.$carouselItems.css({ opacity: 1 });\n\n\t\t$(window).resize(_.debounce(() => {\n\t\t\tthis.adjustArrowPosition();\n\t\t\tthis.adjustArrowVisibility();\n\t\t}, 50));\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":""}