https://www.nivea.co.jp/dist/NiveaX/modules/StoryStage.e06eabf6.js

1"use strict";(self.NiveaXwebpackJsonp=self.NiveaXwebpackJsonp||[]).push([[260,4452,8578],{52043:(t,e,i)=>{i.r(e),i.d(e,{default:()=>n});const n=i(62238).default},53784:(t,e,i)=>{i.r(e),i.d(e,{default:()=>p});var n=i(84817),r=i(19446),s=i(42194),a=i(88692),o=i(8481),l=i(60778),d=i(45204),u=i(61269),h=i(24329),m=i(71678),c=i(50436),v=i(98684);const y='[data-module="SliderPagination"]',g=document.dir;class p extends c.default{static setup(t=y){Array.from(document.querySelectorAll(t)).filter(t=>!t.dataset.moduleInitialized).forEach(t=>{window.requestAnimationFrame(()=>{setTimeout(function(){t.dataset.moduleInitialized||(new p(t),t.dataset.moduleInitialized="true")})})})}constructor(t,e){super(t,e),this.hasChildren()&&(this.initSliderPagination(),this.convertAnchorToSpan())}hasChildren(){return this.element.children.length>0}convertAnchorToSpan(){return this.element.querySelectorAll(".nx-how-to__description a").forEach(t=>{const e=(0,v.m6)("");e.innerHTML=t.innerHTML,e.className=t.className,e.setAttribute("data-url",t.getAttribute("href")),e.classList.add("nx-how-to__description-link"),t.parentNode.replaceChild(e,t),e.addEventListener("click",()=>window.location.replace(e.getAttribute("data-url")))}),this}initSliderPagination(){return this.initLiquid(20).initInfitity(this.sliderInfo,5),this}resetPaginatorItem(t){return(0,n.H)(this.sliderInfo.navItems).pipe((0,l.T)(t=>t.querySelector(".tns-nav__liquid")),(0,d.p)(t=>null!=t)).subscribe(e=>{requestAnimationFrame(()=>{e.style.transition="all 0.5s",e.style.opacity="0",e.style.width=t+"px",setTimeout(()=>{e.remove()},500)})}),this}drawPaginationItem(t,e,i){0==(null==t?void 0:t.children.length)&&(0,v.L8)(t,(0,v.Sw)("tns-nav__liquid"));let n=null==t?void 0:t.firstElementChild;return n&&requestAnimationFrame(()=>{"rtl"===g?(n.style.left=e?"auto":"0",n.style.right=e?"0":"auto"):(n.style.left=e?"0":"auto",n.style.right=e?"auto":"0"),n.style.width=i+"px"}),this}initLiquid(t){return this.onDrag(t),this.slider.events.on("indexChanged",this.onIndexChanged(t)),this}onDrag(t){const e=(0,r.R)(this.slider.events,"dragMove",{passive:!0}).pipe((0,u.E)("0","event","clientX")),i=(0,r.R)(this.slider.events,"dragEnd",{passive:!0}),n=(0,r.R)(document,"mousemove").pipe((0,l.T)(({clientX:t})=>t)),d=(0,r.R)(document,"touchmove",{passive:!0}).pipe((0,l.T)(({changedTouches:{0:{clientX:t}}})=>t)),c=(0,s.h)(n,d).pipe((0,h.Q)(i));return e.pipe((0,m.n)(t=>(0,a.zV)((0,o.of)(t),c))).subscribe(([e,i])=>{const n=document.body.offsetWidth-e,r=i>e,s=r?i-e:e-i;if(r&&n<60||!r&&e<60)return;const a=Math.max((r?n:e)/2,60),o=Math.min(s/a,1);this.drawPaginationItem(this.activeNav,!r,t*o)}),i.subscribe(()=>this.resetPaginatorItem(t)),this}get activeNav(){return Array.from(this.sliderInfo.navItems).filter(t=>(0,v.nB)(t,"tns-nav-active"))[0]}onIndexChanged(t){let e;return()=>{let{index:i,indexCached:n,navItems:r,slideBy:s,slideCount:a}=this.sliderInfo,o=Math.ceil(a/s),l=Math.ceil(i/s),d=Math.ceil(n/s),u=l>=o?l-o:l,h=d>=o?0:d,m=Array.from(r).filter(t=>!t.style.display)[h],c=u>h;Math.abs(u-h)>1||e===u||u<0||(this.drawPaginationItem(m,c,0).resetPaginatorItem(t),e=u)}}initInfitity(t,e){const i=t.navContainer,n=null==i?void 0:i.parentElement,r=(0,v.Sw)("tns-nav__wrapper");return(0,v.L8)(n,(0,v.L8)(r,i)),this.slider.events.on("indexChanged",t=>

1{this.adjustInfinytePagination(t,e),this.element.closest(".nx-stage")||this.options.autoplay||this.setFocusActiveTeaser(this.activeSlides,t.index)}),this.adjustInfinytePagination(t,e),this}setFocusActiveTeaser(t,e){const i=t[0];i&&i.querySelector("a")&&(i.setAttribute("tabindex",0),i.querySelector("a").focus())}adjustInfinytePagination({navContainer:t,navItems:e,index:i,slideBy:n,cloneCount:r=0},s){const a=Array.from(e).filter(t=>"none"!==t.style.display),o=Array.from(a),l=a.length,d=Math.ceil((i-r)/n),u=Math.ceil(s/2),h=l-u,m=d>=u&&d<h,c=d>=h;let y="-";l<=s||("rtl"==g&&(y=""),d<u&&((0,v.vg)(o,"tns-nav-small"),(0,v.BK)([o[s-1]],"tns-nav-small"),t.style.transform=`translateX(${y}0px)`),m&&((0,v.vg)(o,"tns-nav-small"),(0,v.BK)([o[d-u+1],o[d+u-1]],"tns-nav-small"),t.style.transform=`translateX(${y}${15*(d-(u-1))}px)`),c&&((0,v.vg)(o,"tns-nav-small"),(0,v.BK)([o[l-s]],"tns-nav-small"),t.style.transform=`translateX(${y}${15*(h-(u-1))}px)`))}}p.setup(y)},61269:(t,e,i)=>{i.d(e,{E:()=>r});var n=i(60778);function r(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var i=t.length;if(0===i)throw new Error("list of properties cannot be empty.");return function(e){return(0,n.T)(function(t,e){var i=function(i){for(var n=i,r=0;r<e;r++){var s=n[t[r]];if(void 0===s)return;n=s}return n};return i}(t,i))(e)}}},62238:(t,e,i)=>{i.r(e),i.d(e,{default:()=>o});var n=i(53784),r=i(21464);const s='[data-module="StoryStage"]',a={autoplay:!1,autoplayButtonOutput:!1,controls:!1,container:".nx-story-stage__slider",mouseDrag:!0,speed:0,swipeAngle:36,slideBy:"page",loadNext:!0,loadPrev:!0,items:1,preventScrollOnTouch:"auto"};class o extends n.default{static setup(t=s){Array.from(document.querySelectorAll(t)).filter(t=>!t.dataset.moduleInitialized).forEach(t=>{new o(t),t.dataset.moduleInitialized="true"})}constructor(t,e=(0,r.JH)(a)){super(t,e),this.timerItem="nx-story-stage__timer-list__item",this.sensitiveArea=33,this.stageLength=this.slider.slideCount,this.isRtl=null!=document.dir?"rtl"===document.dir:"rtl"==document.getElementsByTagName("html")[0].getAttribute("dir"),this.storyStage=this.element.closest(".

1nx-story-stage"),this.timerWrapper=this.storyStage.querySelector(".nx-story-stage__timer-list"),this.defaultDuration=this.element.getAttribute("data-default-duration")||3e3,this.hasChildren&&(this.timerDuruction=this.defaultDuration,this.buildTimer().initTimer().onAnimationEndHandler().stopTimerOnTouchedHandler().initSensitiveArea().initHandlingLinks(),this.slider.events.on("indexChanged",()=>this.onStoryIndexChanged()))}initHandlingLinks(){return Array.from(this.element.querySelectorAll(".nx-story-stage__link")).forEach((t,e)=>{t.addEventListener("click",t=>{const e=t.currentTarget.dataset.href;location.href=e})}),this}stopTimerOnTouchedHandler(){return Array.from(this.element.querySelectorAll(".nx-slider__item")).forEach(t=>{t.addEventListener("touchstart",()=>this.toggleTimer(!0),{passive:!0}),t.addEventListener("touchend",()=>this.toggleTimer(),{passive:!0}),t.addEventListener("mousedown",()=>this.toggleTimer(!0)),t.addEventListener("mouseup",()=>this.toggleTimer())}),this}initTimer(){return this.onStoryIndexChanged(),this}onStoryIndexChanged(){const{navCurrentIndex:t,slideItems:e}=this.sliderInfo,i=e[t],n=i.querySelector("video"),r=i.getAttribute("data-duration");n&&0==parseInt(r)?this.videoStory(n,t):(this.timerDuruction=parseInt(r)>0?r:this.defaultDuration,this.startTimer())}videoStory(t,e){t.duration?(this.timerDuruction=1e3*t.duration,this.startTimer()):t.onloadeddata=()=>{this.timerDuruction=1e3*t.duration,this.storyStage.querySelector(`.${this.timerItem}[data-timer-index="${e}"] > span`).setAttribute("style",`animation-duration:${this.timerDuruction}ms; -webkit-animation-duration: ${this.timerDuruction}ms;`),this.startTimer()}}onAnimationEndHandler(){return Array.from(this.storyStage.querySelectorAll(".nx-story-stage__timer--loader")).forEach(t=>{t.addEventListener("animationend",()=>this.slider.goTo("next"))}),this}toggleTimer(t=!1){const{navCurrentIndex:e,slideItems:i,slideCount:n}=this.sliderInfo;if(1==n)return;const r=this.storyStage.querySelector(`.${this.timerItem}[data-timer-index="${e}"] > span`);const s=i[e].querySelector("video");t?(r.setAttribute("style",`${r.getAttribute("style")} animation-play-state: paused;`),s&&s.pause()):(r.setAttribute("style",`animation-duration:${this.timerDuruction}ms; -webkit-animation-duration: ${this.timerDuruction}ms;`),s&&s.play())}startTimer(){let{navCurrentIndex:t,slideCount:e}=this.sliderInfo;if(1!=e)return this.updateTimer(t,e),t==e&&(t=0),this.storyStage.querySelector(`.${this.timerItem}[data-timer-index="${t}"]`).classList.add(`${this.timerItem}--active`),this}buildTimer(){const{slideCount:t,slideItems:e}=this.sliderInfo;let i="";if(1===t)return this.timerWrapper.style.display="none",this;for(let n=0;n<t;n++)i+=`<div class="nx-story-stage__timer-list__item" data-timer-index="${n}">                        \n                        <span class="nx-story-stage__timer--loader"\n                        style="animation-duration:${this.getDuration(e[n])}ms; -webkit-animation-duration: ${this.getDuration(e[n])}ms;">\n                        </span>\n                    </div>`;return this.timerWrapper.innerHTML=i,this}updateTimer(t,e){for(let e=0;e<t;e++)this.storyStage.querySelector(`.${this.timerItem}[data-timer-index="${e}"]`).classList.add(`${this.timerItem}--full`);for(let i=e-1;i>=t;i--)this.storyStage.querySelector(`.${this.timerItem}[data-timer-index="${i}"]`).classList.remove(`${this.timerItem}--full`),this.storyStage.querySelector(`.${this.timerItem}[data-timer-index="${i}"]`).classList.remove(`${this.timerItem}--active`)}getDuration(t){const e=t.getAttribute("data-duration");return 0!=parseInt(e)?e:this.defaultDuration}initSensitiveArea(){return this.element.addEventListener("click",t=>this.onSliderClick(t)),this.element.addEventListener("mousemove",t=>this.onMouseMove(t)),this}onSliderClick(t){const e=t.target,i=this.onSensitiveArea(t);if(e.closest("a")||"A"==e.nodeName)return!1;i&&this.slider.goTo(i)}onMouseMove(t){this.onSensitiveArea(t)?this.element.classList.add("nx-story-stage--cursor-pointer"):this.element.classList.remove("nx-story-stage--cursor-pointer")}onSensitiveArea(t){const e=t.clientX,i=window.innerWidth*this.sensitiveArea/100,n=window.innerWidth*(100-this.sensitiveArea)/100;return e<=i?this.isRtl?"next":"prev":e>=n?this.isRtl?"prev":"next":null}}o.setup(s)}}]);
2//# sourceMappingURL=/dist/NiveaX/./modules/StoryStage.e06eabf6.js.514db18e.map