https://www.nivea.co.jp/dist/NiveaX/modules/ProductStage.2968d44f.js

1"use strict";(self.NiveaXwebpackJsonp=self.NiveaXwebpackJsonp||[]).push([[942],{26826:(e,t,i)=>{i.r(t),i.d(t,{default:()=>l});var s=i(98684),n=i(21464);const r={controls:!1,controlsText:["",""],fixedWidth:70,gutter:8,edgePadding:0,loop:!1,mouseDrag:!0,nav:!1,slideBy:1,responsive:{1280:{edgePadding:0}},startIndex:0,lazyload:!0};class l{static setup(e){Array.from(document.querySelectorAll(e)).filter(e=>!e.dataset.moduleInitialized).forEach(e=>{new l(e),e.dataset.moduleInitialized="true"})}constructor(e){this.element=e,this.isStageWithGrid=!1,this.sliderElement=this.element.querySelector(".nx-slider"),this.thumbWrapperElement=this.element.querySelector(".nx-product__thumb-slider-wrapper"),this.thumbSliderElement=this.element.querySelector(".nx-product__thumb-slider"),this.init()}init(){this.isStageWithGrid=(0,s.nB)(this.element,"nx-product-stage__grid");const e=this.element.querySelector(".nx-slider__indicator-current");if(!this.isStageWithGrid){(()=>Promise.all([i.e(3988),i.e(260)]).then(i.bind(i,53784)))().then(t=>{this.slider=new t.default(this.sliderElement),null!=this.slider.slider&&(this.currentActiveSlideIndex=this.slider.slider.getInfo().index,(0,s.nB)(this.thumbWrapperElement,"nx-thumbnails__with--expander")&&this.initThumbsWithExpander(),(0,s.nB)(this.thumbWrapperElement,"nx-product__thumb--with-slider")&&this.initThumbSlider(),e&&this.slider.slider.events.on("indexChanged",t=>{e.textContent=t.index+1}),this.initDetectDrag(this.sliderElement),this.createOverlayImages(),this.addOpenLayerOnClickImages())})}this.createOverlayImages(),this.addOpenLayerOnClickImages(),document.querySelectorAll(".nx-product-stage__item--image-360").length>0&&(this.createOverlayImages360(),this.addOpenLayer360OnClick())}initThumbsWithExpander(){var e,t;const i=null===(e=this.element)||void 0===e?void 0:e.querySelector(".nx-expander__btn"),r=null===(t=this.element)||void 0===t?void 0:t.querySelectorAll(".nx-product__thumb-slider-item:not(.nx-expander__btn)"),l=this.element.querySelector(".tns-nav__wrapper"),d=null==i?void 0:i.querySelector(".nx-product__thumb--count strong");this.thumbnailSliderItems=r,l.hidden=!0,null==i||i.addEventListener("click",e=>this.toggleThumbsExpander()),r.forEach(e=>{e.addEventListener("click",e=>{const t=e.currentTarget.closest(".nx-product__thumb-slider-item").getAttribute("data-slide-id");this.slider.goTo(t)})}),this.slider.slider.events.on("indexChanged",e=>{this.toggleActiveThumbnailStyle(e.index,this.currentActiveSlideIndex),this.expandThumbsIfNeeded(e.index+1)});const a=()=>{this.thumbsNeedToShow=Math.floor(this.thumbWrapperElement.clientWidth/78)-1,this.moveExpanderButton(this.thumbWrapperElement,i,r[this.thumbsNeedToShow]),this.updateExpanderButtonCounter(d,r.length-this.thumbsNeedToShow),r.length>this.thumbsNeedToShow?(0,s.vy)(i,"nx-hidden"):(0,s.iQ)(i,"nx-hidden")};a(),NiveaX.addToEventStore("resize",()=>(0,n.sg)(a(),300),window)}toggleThumbsExpander(){this.thumbWrapperElement.classList.toggle("nx-thumbnails--expanded"),(0,s.nB)(this.thumbWrapperElement,"nx-thumbnails--expanded")?this.thumbWrapperElement.style.maxHeight="100vh":this.thumbWrapperElement.style.maxHeight=""}expandThumbsIfNeeded(e){e>this.thumbsNeedToShow&&(!(0,s.nB)(this.thumbWrapperElement,"nx-thumbnails--expanded")&&this.toggleThumbsExpander())}moveExpanderButton(e,t,i){t&&(null==e||e.querySelector(".nx-product__thumb-slider").insertBefore(t,i))}updateExpanderButtonCounter(e,t){e&&t&&(e.textContent=`+${t}`)}initThumbSlider(){if(!this.thumbSliderElement)return;return i.e(3988).then(i.bind(i,50436)).then(e=>{this.thumbSlider=new e.default(this.thumbSliderElement,r),this.thumbnailSliderItems=this.thumbSlider.sliderInfo.slideItems,this.addClickListenerToThumbs(),this.showThumbslider(),this.slider.slider.events.on("indexChanged",e=>{this.toggleActiveThumbnailStyle(e.index,this.currentActiveSlideIndex),this.thumbSlider.goTo(e.index)}),this.toggleActiveThumbnailStyle(this.currentActiveSlideIndex,this.currentActiveSlideIndex)}),this}showThumbslider(){var e,t,i;null===(e=this.element)||void 0===e||e.classList.add("nx-product-stage__slider--thumb-slider"),null===(i=null===(t=this.thumbSliderElement)||void 0===t?void 0:t.closest(".

1nx-product__thumb-slider-wrapper"))||void 0===i||i.classList.remove("nx-product__thumb-slider-wrapper--hidden")}addClickListenerToThumbs(){for(let e=0;e<this.thumbnailSliderItems.length;e++){let t=this.thumbnailSliderItems[e];t.addEventListener("click",()=>{this.slider.goTo(parseInt(t.dataset.slideId)),this.toggleActiveThumbnailStyle(parseInt(t.dataset.slideId),this.currentActiveSlideIndex)})}}toggleActiveThumbnailStyle(e,t){this.removeActiveThumbnailClass(t),this.addActiveThumbnailClass(e),this.currentActiveSlideIndex=e}removeActiveThumbnailClass(e){if(!this.thumbnailSliderItems[e])return;let t=this.thumbnailSliderItems[e].children[0];return t.classList.contains("--active")&&t.classList.remove("--active"),this}addActiveThumbnailClass(e){if(!this.thumbnailSliderItems[e])return;let t=this.thumbnailSliderItems[e].children[0];return t.classList.contains("--active")||t.classList.add("--active"),this}addOpenLayer360OnClick(){this.addListenerToImage360(),this.addListenersToIcon360()}addListenerToImage360(){var e;const t=(null===(e=this.slider)||void 0===e?void 0:e.element.querySelector(".nx-product-stage__item--image-360"))||this.element.querySelector(".nx-product-stage__item--image-360");null==t||t.addEventListener("click",()=>{this.open360Layer()})}addListenersToIcon360(){const e=document.querySelector(".nx-product-stage__icon-360-container");null==e||e.addEventListener("click",()=>{this.open360Layer()})}addOpenLayerOnClickImages(){var e;const t=(null===(e=this.slider)||void 0===e?void 0:e.element.querySelectorAll(".nx-product-stage__item--image"))||Array.from(this.element.querySelectorAll(".nx-product-stage__grid--item")).filter(e=>!e.classList.contains("nx-product-stage__item--image-360")).filter(e=>!e.classList.contains("nx-product-stage__item--video"));for(let e=0;e<t.length;e++){t[e].addEventListener("click",e=>{var t;if(!this.sliderIsDragged){let i=e.currentTarget;(null===(t=this.slider)||void 0===t?void 0:t.slider)&&(this.slider.slider.currentSlide=i.dataset.slideId),this.openLayer(i.dataset.slideId)}},!1)}}initDetectDrag(e){let t={x:0,y:0};e.addEventListener("mousedown",e=>{this.sliderIsDragged=!1,t={x:e.clientX,y:e.clientY}}),e.addEventListener("mousemove",e=>{Math.sqrt(Math.pow(t.y-e.clientY,2)+Math.pow(t.x-e.clientX,2))>20&&(this.sliderIsDragged=!0)})}callbackProductStage(e){var t;null===(t=this.slider)||void 0===t||t.slider.goTo(e)}createOverlayImages(){Promise.all([i.e(3988),i.e(1278)]).then(i.bind(i,63528)).then(e=>(this.overlay=new e.default(this.element.dataset.options,this.slider,this.callbackProductStage.bind(this),this.element),this.overlay))}openLayer(e){return this.overlay.openLayer(e),this.overlay}createOverlayImages360(){i.e(9407).then(i.bind(i,785)).then(e=>(this.overlay360=new e.default(this.element.dataset.options),this.overlay))}open360Layer(){return this.overlay360.openLayer(),this.overlay360}}l.setup('[data-module="ProductStage"]')}}]);
2//# sourceMappingURL=/dist/NiveaX/./modules/ProductStage.2968d44f.js.212ac5f3.map