https://www.paulmitchell.com/cdn/shop/t/424/assets/component-product-gallery.js?v=6271585875501017771783361503

1import{LitElement}from"@lit";import{viewportObserver}from"@nova/utils";class NovaProductGallery extends LitElement{static properties={viewport:{type:String,state:!0},galleryCarousel:{type:Object,state:!0},thumbnailCarousel:{type:Object,state:!0},thumbnailPrevious:{type:Object,state:!0},thumbnailNext:{type:Object,state:!0},zoomInOverlay:{type:Object,state:!0}};constructor(){super(),this.viewport=viewportObserver.currentViewport,viewportObserver.addListener(this._handleViewportChange),this.galleryCarousel=null,this.thumbnailCarousel=null,this.thumbnailPrevious=null,this.thumbnailNext=null,this.zoomInOverlay=null,this.observer=null}connectedCallback(){super.connectedCallback(),document.addEventListener("nova:product:render-gallery",event=>{this.updateGalleryContent(event.detail.html)})}disconnectedCallback(){super.disconnectedCallback(),viewportObserver.removeListener(this._handleViewportChange),document.removeEventListener("nova:product:render-gallery",event=>{this.updateGalleryContent(event.detail.html)}),this.observer&&this.observer.disconnect()}firstUpdated(){this.initialize()}initialize(){this.thumbnailCarousel=this.querySelector(".js-thumbnails-carousel"),this.galleryCarousel=this.querySelector(".js-gallery-carousel"),this.thumbnailPrevious=this.thumbnailCarousel.shadowRoot.querySelector(".carousel__navigation-button--previous"),this.thumbnailNext=this.thumbnailCarousel.shadowRoot.querySelector(".carousel__navigation-button--next"),this.hideDisabledButton(this.thumbnailPrevious),this.hideDisabledButton(this.thumbnailNext),this.handleThumbnailCarouselAttribute(),this.handleThumbnailCarouselClick(),this.handleGalleryCarouselMove(),this.handleZoomOnImage(3),this.initMutationObserver(),requestAnimationFrame(()=>{this.resetCarousel(),this.removeCarouselItemAttributes()})}initMutationObserver(){this.observer&&this.observer.disconnect();const handleClassChange=mutationsList=>{for(const mutation of mutationsList)mutation.type==="attributes"&&mutation.attributeName==="class"&&(this.hideDisabledButton(this.thumbnailPrevious),this.hideDisabledButton(this.thumbnailNext))};this.observer=new MutationObserver(handleClassChange),this.thumbnailPrevious&&this.observer.observe(this.thumbnailPrevious,{attributes:!0}),this.thumbnailNext&&this.observer.observe(this.thumbnailNext,{attributes:!0})}hideDisabledButton(button){button&&(button.classList.contains("carousel__navigation-button--disabled")?button.style.opacity=0:button.style.opacity=1)}resetCarousel(){const carousels=this.querySelectorAll("sl-carousel");for(const carousel of carousels)carousel.goToSlide(0)}updateGalleryContent(content){if(content){for(;this.firstChild;)this.removeChild(this.firstChild);for(;content.firstChild;)this.appendChild(content.firstChild);this.requestUpdate(),this.initialize(),requestAnimationFrame(()=>{this.removeCarouselItemAttributes()})}}_handleViewportChange=newViewport=>{this.viewport=newViewport,this.handleThumbnailCarouselAttribute()};handleThumbnailCarouselAttribute(){if(!this.thumbnailCarousel)return;this.thumbnailCarousel.setAttribute("slides-per-page",5)}handleThumbnailCarouselClick(){if(!this.thumbnailCarousel)return;const handleEvent=event=>{if(event.type==="click"||event.key==="Enter"){const card=event.target.closest(".thumbnails-item");card&&this.handleGalleryCarouselDisplay(card)}};this.thumbnailCarousel.addEventListener("click",handleEvent),this.thumbnailCarousel.addEventListener("keydown",handleEvent)}handleGalleryCarouselDisplay(card){if(!this.galleryCarousel||card.classList.contains("active"))return;const activeCard=this.thumbnailCarousel.querySelector(".active");activeCard&&activeCard.classList.remove("active"),card.classList.add("active");const cardPosition=card.dataset.position;if(cardPosition){const displayCardIndex=Number(cardPosition)-1;this.galleryCarousel.goToSlide(displayCardIndex)}}handleGalleryCarouselMove(){!this.galleryCarousel||!this.thumbnailCarousel||this.galleryCarousel.addEventListener("sl-slide-change",event=>{const activeGalleryIndex=event.detail.index;this.handleVideoAutoPlay(event.detail.slide),this.thumbnailCarousel.goToSlide(Number(activeGalleryIndex));

1const oldActiveThumbnail=this.thumbnailCarousel.querySelector(".active");oldActiveThumbnail&&oldActiveThumbnail.classList.remove("active");const newActiveThumbnail=this.thumbnailCarousel.querySelector(`[data-position="${activeGalleryIndex+1}"]`);newActiveThumbnail&&newActiveThumbnail.classList.add("active")})}handleVideoAutoPlay(slide){const media=slide.querySelector("nova-adaptive-video");media&&media.play()}zoomMoveWithHover(image,event,zoomRatio){const ratio=image.height/image.width,container=event.target.getBoundingClientRect(),xPosition=event.clientX-container.left,yPosition=event.clientY-container.top,xPercent=`${xPosition/(image.clientWidth/100)}%`,yPercent=`${yPosition/(image.clientWidth*ratio/100)}%`;this.zoomInOverlay.style.backgroundPosition=`${xPercent} ${yPercent}`,this.zoomInOverlay.style.backgroundSize=`${image.width*zoomRatio}px`}handleZoomEvents(image,zoomRatio){if(this.viewport==="mobile"||this.viewport==="tablet"){if(this.zoomInOverlay=image.closest(".img").querySelector(".zoom-mobile-overlay"),!this.zoomInOverlay)return;this.zoomInOverlay.classList.remove("hidden"),this.zoomInOverlay.addEventListener("click",this.handleMobileOverlayRemove.bind(this))}else{if(this.zoomInOverlay=image.closest(".img").querySelector(".zoom-overlay"),!this.zoomInOverlay)return;this.zoomInOverlay.classList.remove("hidden");const carouselItem=image.closest(".gallery-item");carouselItem&&!carouselItem.classList.contains("zoomed")&&carouselItem.classList.add("zoomed"),this.toggleZoomButtonsAriaHidden(carouselItem,!0),this.zoomInOverlay.addEventListener("click",this.handleOverlayRemove.bind(this,carouselItem)),this.zoomInOverlay.addEventListener("mousemove",event=>this.zoomMoveWithHover(image,event,zoomRatio)),this.zoomInOverlay.addEventListener("mouseleave",this.handleOverlayRemove.bind(this,carouselItem))}}handleMobileOverlayRemove(){this.zoomInOverlay&&!this.zoomInOverlay.classList.contains("hidden")&&(this.zoomInOverlay.classList.add("hidden"),this.zoomInOverlay.removeEventListener("click",this.handleMobileOverlayRemove.bind(this)),this.zoomInOverlay=null)}handleOverlayRemove(carouselItem){this.zoomInOverlay&&!this.zoomInOverlay.classList.contains("hidden")&&(this.zoomInOverlay.classList.add("hidden"),this.zoomInOverlay.removeEventListener("click",this.handleOverlayRemove.bind(this,carouselItem)),this.zoomInOverlay.removeEventListener("mousemove",this.zoomMoveWithHover),this.zoomInOverlay.removeEventListener("mouseleave",this.handleOverlayRemove.bind(this,carouselItem)),this.zoomInOverlay=null),carouselItem&&(carouselItem.classList.remove("zoomed"),this.toggleZoomButtonsAriaHidden(carouselItem,!1))}toggleZoomButtonsAriaHidden(carouselItem,isZoomed){const zoomInButton=carouselItem.querySelector(".product__zoom-in-button"),zoomOutButton=carouselItem.querySelector(".product__zoom-out-button");zoomInButton&&zoomInButton.setAttribute("aria-hidden",isZoomed.toString()),zoomOutButton&&zoomOutButton.setAttribute("aria-hidden",(!isZoomed).toString())}handleZoomOnImage(zoomRatio){const zoomInButtons=this.querySelectorAll(".product__zoom-in-button");for(const zoomInButton of zoomInButtons)zoomInButton.addEventListener("click",()=>{const image=zoomInButton.parentElement.querySelector(".zoom-image");this.handleZoomEvents(image,zoomRatio)});const zoomOutButtons=this.querySelectorAll(".product__zoom-out-button");for(const zoomOutButton of zoomOutButtons)zoomOutButton.addEventListener("click",()=>{const carouselItem=zoomOutButton.closest(".gallery-item");carouselItem&&this.handleOverlayRemove(carouselItem)})}removeCarouselItemAttributes(){const carouselItems=this.querySelectorAll("sl-carousel-item");for(const item of carouselItems)item.removeAttribute("role"),item.removeAttribute("aria-label")}createRenderRoot(){return this}}customElements.define("nova-product-gallery",NovaProductGallery);
2//# sourceMappingURL=/cdn/shop/t/424/assets/component-product-gallery.js.map?v=6271585875501017771783361503