https://www.maybelline.com/frontend/master/js/new-transporter-slider.d9250af6.js

1"use strict";(self["webpackChunkwsf_master_mny"]=self["webpackChunkwsf_master_mny"]||[]).push([[364],{4011:function(t,e,s){s.r(e),s.d(e,{default:function(){return w}});var i=s(5906),r=function(){var t=this,e=t._self._c;return e("div",{ref:"carousel",staticClass:"new-transporter-slider",class:[{"disable-carousel":t.isCenteredItems,scrolled:t.isScrolled},{scaled:t.windowScale>=1.5&&t.windowWidth<2048}],attrs:{"data-qa":"new-transporter-slider",role:"group","aria-roledescription":"carousel"}},[e("div",{ref:"transportersWrapper",staticClass:"new-transporter-slider-carousel",class:{"center-items":t.isCenteredItems}},[t._t("default")],2),t._v(" "),t.cardsAmount>1&&!t.isCenteredItems?e("div",{staticClass:"carousel-nav__wrapper"},[t.activeCard>0?e("button",{staticClass:"carousel-nav__prev prev",on:{click:t.goPrev}},[e("svg",{staticClass:"icon icon--arrow",attrs:{"aria-label":t.navPrevAltText,role:"img"}},[e("use",{attrs:{"xlink:href":"#icon-chevron",href:"#icon-chevron"}})])]):t._e(),t._v(" "),e("div",{staticClass:"carousel-nav__pagination"},[e("pagination",{attrs:{"pagination-items":t.fullIntervals,"current-page":t.activeView,"is-paused":!1,"is-animation-enabled":!1,"go-to-slide-aria-label":t.goToSlideAriaLabel},on:{selectPagination:t.scrollToSlide,isPausedCarousel:()=>null}})],1),t._v(" "),t.isNextDisabled?t._e():e("button",{staticClass:"carousel-nav__next next",on:{click:t.goNext}},[e("svg",{staticClass:"icon icon--arrow",attrs:{"aria-label":t.navNextAltText,role:"img"}},[e("use",{attrs:{"xlink:href":"#icon-chevron",href:"#icon-chevron"}})])])]):t._e()])},a=[],n=s(4017),o=s(7061);

1const d=".new-transporter-card",l=".new-transporter-card.active";var c={name:"NewTransporterSlider",components:{Pagination:o.A},props:{goToSlideAriaLabel:{type:String,default:""},navPrevAltText:{type:String,default:""},navNextAltText:{type:String,default:""}},data(){return{activeCard:0,cardsAmount:0,isCenteredCarousel:!0,windowWidth:window.innerWidth,windowScale:window.devicePixelRatio,widthCarousel:0,widthAllCards:0}},computed:{activeView(){return this.activeCard>0?Math.ceil(this.activeCard/this.scrollInterval):0},isScrolled(){return this.activeCard>0},scrollInterval(){return this.windowWidth>1100?3:1},nextScrollInterval(){const t=this.cardsAmount-(this.activeCard+1+this.scrollInterval);return t>=this.scrollInterval?0:t},fullIntervals(){let t=this.cardsAmount%2?4:3,e=this.windowWidth>1100?t:1;return this.windowWidth>568&&this.windowWidth<=1100?Math.ceil(this.cardsAmount/e)-1:this.cardsAmount%2?Math.ceil(this.cardsAmount/e):Math.round(this.cardsAmount/e)},isNextDisabled(){const t=this.windowWidth<568?this.activeCard:this.activeCard+1;return t+this.scrollInterval>=this.cardsAmount},isShowCarousel(){return this.cardsAmount>4},isCenteredItems(){return this.widthCarousel>this.widthAllCards}},watch:{activeCard(){this.setActive()},windowWidth(t,e){t>e&&t>1100&&this.resetScroll()}},mounted(){window.addEventListener("resize",this.onResize),this.onResize(),this.getCardsAmount(),this.getCardsWidth(),this.setActive(),this.isCenteredItems||this.swipeDetection(),this.desktopWidth()&&!this.isCenteredItems&&this.grabDetection()},beforeDestroy(){window.removeEventListener("resize",this.onResize)},methods:{getCardsWidth(){const t=this.$refs.transportersWrapper;this.widthCarousel=t.clientWidth;let e=0;t.querySelectorAll(d).forEach(t=>{e+=t.clientWidth}),this.widthAllCards=e},desktopWidth(){return Boolean(window.innerWidth>1100)},getCardsAmount(){this.cardsAmount=this.$refs.transportersWrapper.querySelectorAll(d).length},onResize(){this.windowWidth=window.innerWidth,this.windowScale=window.devicePixelRatio,this.getCardsAmount()},scrollToSlide(t){this.activeCard=t*this.scrollInterval,this.setActive()},setActive(){const t=document.body.classList.contains("rtl"),e=this.$refs.transportersWrapper.querySelector(d),s=this.$refs.carousel,i=parseInt(window.getComputedStyle(e).width)+parseInt(window.getComputedStyle(e).marginRight)+parseInt(window.getComputedStyle(e).marginLeft),r=this.activeCard>0&&this.windowWidth<=1024&&this.windowWidth>768?parseInt(window.getComputedStyle(s).paddingLeft)+10:0,a=this.windowWidth<=768&&this.windowWidth>568&&this.isNextDisabled?r+85:r;this.$refs.transportersWrapper.style.transform=`translateX(${t?"":"-"}${this.activeCard*i-a}px)`,this.addActiveCardClass()},resetScroll(){this.$refs.transportersWrapper.style.transform="translateX(0)",this.activeCard=0},addActiveCardClass(){const t=this.$refs.transportersWrapper.querySelector(l);t?.classList.remove("active");const e=Array.from(this.$refs.transportersWrapper.querySelectorAll(d)).filter((t,e)=>e===this.activeCard)[0];e?.classList.add("active")},getFinalPoint(){return this.isShowCarousel&&Boolean(window.innerWidth>1023)&&this.cardsAmount>4?this.cardsAmount-2:this.cardsAmount-1},goNext(){n.B.$emit("youtube-pause-video"),this.activeCard<this.getFinalPoint()?this.nextScrollInterval?this.activeCard=this.activeCard+this.nextScrollInterval:this.activeCard=this.activeCard+this.scrollInterval:this.activeCard=0,this.setActive()},goPrev(){if(n.B.$emit("youtube-pause-video"),this.activeCard>0)if(this.activeCard%this.scrollInterval){for(let t=this.activeCard;t>=0;t--)if(!(t%this.scrollInterval)){this.activeCard=t;break}}else this.activeCard=this.activeCard-this.scrollInterval;this.setActive()},swipeDetection(){this.touchstartX=0,this.touchendX=0;const t=this.$refs.transportersWrapper;t.addEventListener("touchstart",t=>{this.touchstartX=t.changedTouches[0].screenX,document.body.classList.add("stop-scrolling")},{passive:!0}),t.addEventListener("touchend",t=>{this.touchendX=t.changedTouches[0].screenX,this.handleGesture(),setTimeout(()=>{document.body.classList.remove("stop-scrolling")},500)},{passive:!0})},grabDetection(){let t=!1,e=0,s=0;const i=this.$refs.transportersWrapper,r=document.body.classList.contains("rtl");i.ondragstart=function(){return!1},i.addEventListener("pointerdown",s=>{t=!0,e=s.pageX,i.classList.add("grabbing")}),i.addEventListener("pointerup",a=>{if(t=!1,i.classList.remove("grabbing"),s=a.pageX,s!==e&&Math.abs(s-e)>100){const t=r?s>e:s<e;t&&!this.isNextDisabled?this.goNext():t||this.goPrev()}i.removeEventListener("pointermove",()=>{}),i.removeEventListener("pointerup",()=>{}),i.removeEventListener("pointerdown",()=>{})}),i.addEventListener("pointermove",e=>{t&&(e.preventDefault(),s=e.pageX)})},handleGesture(){const t=document.body.classList.contains("rtl"),e=Math.abs(this.touchendX-this.touchstartX),s=e>30,i=t?this.touchendX>this.touchstartX:this.touchendX<this.touchstartX;s&&(i&&!this.isNextDisabled?this.goNext():i||this.goPrev())}}},h=c,u=s(1656),v=(0,u.A)(h,r,a,!1,null,null,null),p=v.exports,w=(0,i.fC)({components:{NewTransporterSlider:p}})}}]);