https://hairareus.com/cdn/shop/t/49/assets/product-media.js?v=173660877729249554031721400543

1customElements.get("media-gallery")||customElements.define("media-gallery",class extends HTMLElement{constructor(){super(),this.selectors={container:".m-main-product--wrapper",slider:".swiper-container",sliderPagination:".swiper-pagination",sliderPrevEl:".swiper-button-prev",sliderNextEl:".swiper-button-next",navSlider:".nav-swiper-container",medias:[".m-product-media--item"],mediaWrapper:".m-product-media--wrapper",mediaZoomIns:[".m-product-media__zoom-in"],videos:[".media-video"],variantIdNode:'[name="id"]',featuredImage:".m-product-media"},this.productSlideCommonConfigs={loop:!0},this.productSlideConfigs={mobile:{autoHeight:!0,loop:!0},"quick-view":{autoHeight:!0},"layout-5":{...this.productSlideCommonConfigs,slidesPerView:1,slidesPerGroup:1,watchSlidesProgress:!0,watchSlidesVisibility:!0,breakpoints:{768:{slidesPerView:2,slidesPerGroup:1,spaceBetween:10}}},"layout-7":{...this.productSlideCommonConfigs,slidesPerView:3,speed:500,centeredSlides:!0}},this.container=this.closest(this.selectors.container),this.domNodes=queryDomNodes(this.selectors,this),this.enableVideoAutoplay=this.dataset.enableVideoAutoplay==="true",this.enableImageZoom=this.dataset.enableImageZoom==="true",this.enableVariantGroupImages=this.dataset.enableVariantGroupImages==="true",this.onlyMedia=this.dataset.onlyMedia==="true",this.container&&(this.view=this.container.dataset.view||"product-template"),this.section=this.closest(`[data-section-id="${this.sectionId}"]`),this.layout=this.dataset.layout,this.fetchProductData()}getProductSliderConfig(layout){const conf=this.productSlideConfigs[layout]||this.productSlideConfigs["layout-4"];return{...this.productSlideCommonConfigs,...conf}}async fetchProductData(){try{const product=await this.getProductJson();product&&(this.productData=product,this.setupData())}catch(error){console.error("Error fetching product:",error)}}setupData(){this.productHandle=this.dataset.productHandle,this.productUrl=this.dataset.productUrl;const{variants}=this.productData||{};if(!this.productData||!variants)return;const variantIdNode=this.container.querySelector(this.selectors.variantIdNode);if(!variantIdNode)return;let currentVariantId=Number(variantIdNode.value)||this.productData.selected_or_first_available_variant.id;const currentVariant=variants.find(v=>v.id===currentVariantId)||variants[0];if(this.productData.initialVariant=currentVariant,!this.productData.selected_variant&&variantIdNode.dataset.selectedVariant){const selectedVariantId=Number(variantIdNode.dataset.selectedVariant);this.productData.selected_variant=variants.find(v=>v.id===selectedVariantId)}this.init()}init(){const variantPicker=this.container.querySelector("variant-picker"),commonInit=()=>{this.handleAutoplayVideo(),variantPicker||(this.initPhotoswipe(),this.handleSlideChange(),this.removeAttribute("data-media-loading"),this.firstElementChild.style.opacity=1)};switch(this.view){case"product-template":this.mediaMode="grid-column",this.handlePhotoswipe(),this.initPhotoswipe(),this.initSlider();break;case"featured-product":this.initSlider();break;case"card":case"sticky-atc":case"quick-view":this.mediaMode="featured-image",this.view==="quick-view"&&this.initSlider();break;default:console.warn("Unknown product view: ",this,this.view)}commonInit()}initSlider(){if(!this.domNodes.slider)return;this.mediaMode="slider";const{slider,sliderPagination,navSlider,sliderNextEl:nextEl,sliderPrevEl:prevEl}=this.domNodes,initialSlide=this.productData.initialVariant&&this.productData.initialVariant.featured_media&&this.productData.initialVariant.featured_media.position-1||0,configNav=this.getNavSliderConfig(initialSlide);this.navSlider=navSlider?new MinimogLibs.Swiper(navSlider,configNav):null;const config=this.getMainSliderConfig(initialSlide,{nextEl,prevEl,sliderPagination});this.slider=new MinimogLibs.Swiper(slider,config),this.enableVariantGroupImages||this.handleSlideChange()}getNavSliderConfig(initialSlide){return{loop:!1,initialSlide,slidesPerView:5,freeMode:!0,spaceBetween:this.layout==="layout-6"?5:10,threshold:2,watchSlidesVisibility:!0,watchSlidesProgress:!0,breakpoints:{1024:{direction:this.layout==="layout-6"?"vertical":"horizontal"}},on:{init:()=>this.domNodes.navSlider.style.opacity=1}}}getMainSliderConfig(initialSlide,{nextEl,prevEl,sliderPagination}){const thumbsConfig=this.navSlider?{thumbs:{swiper:this.navSlider}}:{};return{...this.getProductSliderConfig(this.layout),initialSlide,autoHeight:!0,navigation:{nextEl,prevEl},threshold:2,loop:!this.enableVariantGroupImages,pagination:{el:sliderPagination,clickable:!0,type:"bullets"},...thumbsConfig,on:{init:()=>{this.domNodes.slider.style.opacity=1,this.domNodes=queryDomNodes(this.selectors,this.container),requestAnimationFrame(()=>{window.dispatchEvent(new Event("resize"))})}}}}handleSlideChange(){this.slider&&this.slider.on("slideChange",swiper=>{window.pauseAllMedia(this);const{slides,activeIndex}=swiper,activeSlide=slides[activeIndex];activeSlide&&this.playActiveMedia(activeSlide);const visibleSlides=[activeIndex];["layout-5","layout-7"].includes(this.layout)&&visibleSlides.push(activeIndex+1);const hasModelMediaType=visibleSlides.some(index=>{const slide=slides[index];return slide&&slide.dataset.mediaType==="model"});this.toggleSliderDraggableState(!hasModelMediaType)})}toggleSliderDraggableState(isDraggable){this.slider.allowTouchMove!==isDraggable&&(this.slider.allowTouchMove=isDraggable)}handleAutoplayVideo(){const playVideo=mediaElement=>{const mediaType=mediaElement.dataset.mediaType;if(mediaType==="video"||mediaType==="external_video"){const deferredMedia=mediaElement.querySelector("deferred-media");deferredMedia&&deferredMedia.dataset.autoPlay==="true"&&deferredMedia.loadContent(!1)}};if(this.mediaMode==="slider"){const{slides,activeIndex}=this.slider,activeSlide=slides[activeIndex];activeSlide&&playVideo(activeSlide)}else this.querySelectorAll(".m-product-media--item").forEach(playVideo)}playActiveMedia(selected){const deferredMedia=selected.querySelector("deferred-media");if(!deferredMedia||deferredMedia.dataset.autoPlay!=="true")return;const playMedia=element=>{if(element.classList.contains("js-youtube")||element.classList.contains("js-vimeo")){const param=(element.classList.contains("js-youtube")?"youtube":"vimeo")==="youtube"?"mute=1":"muted=1",symbol=element.src.includes("?")?"&":"?";element.src+=`${symbol}autoplay=1&${param}`}else element.play()};deferredMedia.hasAttribute("loaded")||deferredMedia.loadContent(!1);const deferredElement=deferredMedia.querySelector("video, model-viewer, iframe");playMedia(deferredElement)}handlePhotoswipe(customData=[]){if(!this.enableImageZoom)return;const data=[...this.querySelectorAll(".m-product-media--item:not(.swiper-slide-duplicate)")].map(media=>{const{mediaType,index:id}=media.dataset;if(mediaType==="image"){const{mediaSrc:src,mediaWidth,mediaHeight,mediaAlt:alt}=media.querySelector(".m-product-media").dataset;return{src,width:parseInt(mediaWidth),height:parseInt(mediaHeight),alt,id}}else return{html:`<div class="pswp__${mediaType}">${media.innerHTML}</div>`,type:mediaType,id}}),options={dataSource:customData.length?customData:data,bgOpacity:1,close:!1,zoom:!1,arrowNext:!1,arrowPrev:!1,counter:!1,preloader:!1,pswpModule:MinimogLibs.PhotoSwipeLightbox.PhotoSwipe};this.lightbox=new MinimogLibs.PhotoSwipeLightbox(options),this.lightbox.addFilter("thumbEl",(thumbEl,{id},index)=>this.querySelector(`[data-index="${id}"]:not(.swiper-slide-duplicate) img`)||thumbEl),this.lightbox.addFilter("placeholderSrc",(placeholderSrc,{data:{id}})=>{const el=this.querySelector(`[data-index="${id}"]:not(.swiper-slide-duplicate) img`);return el?el.src:placeholderSrc}),this.lightbox.on("change",()=>{if(window.pauseAllMedia(this),this.slider){const{currIndex}=this.lightbox.pswp,slideMethod=this.enableVariantGroupImages?"slideTo":"slideToLoop";this.slider[slideMethod](currIndex,100,!1)}}),this.lightbox.on("pointerDown",e=>{this.lightbox.pswp.currSlide.data.type==="model"&&e.preventDefault()});const uiElements=[{name:"m-close",order:11,isButton:!0,html:'<svg class="m-svg-icon--large" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>',onClick:(event,el,pswp)=>pswp.close()},{name:"m-arrowNext",order:12,isButton:!0,html:'<svg fill="currentColor" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg>',onClick:(event,el,pswp)=>pswp.next()},{name:"m-arrowPrev",order:10,isButton:!0,html:'<svg width="14px" height="14px" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M229.9 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L94.569 282H436c6.627 0 12-5.373 12-12v-28c0-6.627-5.373-12-12-12H94.569l155.13-155.13c4.686-4.686 4.686-12.284 0-16.971L229.9 38.101c-4.686-4.686-12.284-4.686-16.971 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971L212.929 473.9c4.686 4.686 12.284 4.686 16.971-.001z"></path></svg>',onClick:(event,el,pswp)=>pswp.prev()}];this.lightbox.on("uiRegister",()=>{this.lightbox.pswp.ui.registerElement(uiElements[0]),this.onlyMedia||uiElements.slice(1).forEac

1h(element=>this.lightbox.pswp.ui.registerElement(element))})}initPhotoswipe(){if(!this.enableImageZoom)return;this.lightbox.init();const handleMediaClick=(e,media)=>{e.preventDefault();const isImage=media.classList.contains("media-type-image"),isZoomButton=e.target.closest(this.selectors.mediaZoomIns[0]);if(isImage||isZoomButton){const index=Number(media.dataset.index)||0;this.lightbox.loadAndOpen(index)}};addEventDelegate({selector:this.selectors.medias[0],context:this,handler:handleMediaClick})}setActiveMedia(variant){if(variant)switch(this.mediaMode){case"slider":this.setActiveMediaForSlider(variant);break;case"featured-image":this.setActiveMediaForFeaturedImage(variant);break;default:this.handleGalleryMode(variant)}}setActiveMediaForSlider(variant){if(variant.featured_media&&this.slider&&this.slider.wrapperEl){const slideIndex=variant.featured_media.position||0;this.slider.slideToLoop(slideIndex-1)}}setActiveMediaForFeaturedImage(variant){if(variant.featured_image){const src=variant.featured_image.src,{featuredImage}=this.domNodes,img=featuredImage.querySelector("img");img&&src&&(img.src=src)}}handleGalleryMode(variant){if(this.view!=="featured-product"&&variant&&variant.featured_media){const selectedMedia=this.querySelector(`[data-media-id="${variant.featured_media.id}"]`);selectedMedia&&this.scrollIntoView(selectedMedia)}}scrollIntoView(selectedMedia){selectedMedia.scrollIntoView({behavior:"smooth"})}getProductJson(){return fetch(window.Shopify.routes.root+`products/${this.dataset.productHandle}.js`).then(response=>{if(!response.ok)throw new Error("Network response was not ok");return response.json()}).then(product=>product).catch(error=>{console.error("There has been a problem with your fetch operation:",error)})}});
2//# sourceMappingURL=/cdn/shop/t/49/assets/product-media.js.map?v=173660877729249554031721400543