https://rammount.com/cdn/shop/t/395/assets/interactive-product-viewer.js?v=41304566802971710801781621479

1class InteractiveProductViewer{static debounce(fn,delay){let timeoutId;return function(...args){clearTimeout(timeoutId),timeoutId=setTimeout(()=>fn.apply(this,args),delay)}}constructor(container){this.container=container,this.buttons=container.querySelectorAll(".feature-btn"),this.mediaContainer=container.querySelector(".media-container"),this.mediaWrappers=container.querySelectorAll(".media-wrapper"),this.loadingIndicator=container.querySelector(".loading-indicator"),this.closeBtn=container.querySelector(".media-container .media-close-btn"),this.mobileCloseBtn=container.querySelector(".media-close-btn--mobile"),this.fullscreenBtn=container.querySelector(".media-fullscreen-btn"),this.videoControls=container.querySelector(".video-controls"),this.navPrevBtn=container.querySelector(".feature-nav-prev"),this.navNextBtn=container.querySelector(".feature-nav-next"),this.navArrows=container.querySelector(".feature-navigation-arrows"),this.mobileNavPrevBtn=container.querySelector(".mobile-nav-prev"),this.mobileNavNextBtn=container.querySelector(".mobile-nav-next"),this.mobileNavArrows=container.querySelector(".mobile-navigation-arrows"),this.currentVideo=null,this.transitionSpeed=parseInt(container.dataset.transitionSpeed)||400,this.transitionEffect=container.dataset.transitionEffect||"fade",this.mediaAnimationType=container.dataset.mediaAnimationType||"scale",this.mediaAnimationEasing=container.dataset.mediaAnimationEasing||"bounce",this.mediaFitMode=this.resolveObjectFit(container.dataset.mediaFitMode||"contain"),this.mediaPositionX=container.dataset.mediaPositionX||"50",this.mediaPositionY=container.dataset.mediaPositionY||"50",this.defaultVideoPlayOnView=container.dataset.defaultVideoPlayOnView==="true",this.currentIndex=0,this.isTransitioning=!1,this.isFullscreen=!1,this.loadedMedia={},this.cacheOrder=[],this.maxCacheSize=6,this.activeVideos=[],this.mobileCarouselIndex=0,this.isMobile=!1,this.defaultVideo=null,this.defaultVideoObserver=null,this.defaultVideoInView=!1,this.defaultVideoPlayedInView=!1,this.defaultVideoWasPlayingBeforeFeature=!1,this.defaultVideoScrollCheckQueued=!1,this.handleDefaultVideoScrollCheck=null,this.init()}init(){this.setupEventListeners(),this.checkMobile(),this.updateMobileCarousel(),this.setupDefaultVideoPlayback()}checkMobile(){this.mobileBreakpoint=parseInt(this.container.dataset.mobileBreakpoint,10)||768,this.isMobile=window.innerWidth<=this.mobileBreakpoint,this.handleResize=InteractiveProductViewer.debounce(()=>{const wasMobile=this.isMobile;this.isMobile=window.innerWidth<=this.mobileBreakpoint,wasMobile!==this.isMobile&&this.updateMobileCarousel()},150),window.addEventListener("resize",this.handleResize)}resolveObjectFit(fit){return fit==="cover"||fit==="cover_wrapper"?"cover":"contain"}setupDefaultVideoPlayback(){const defaultWrapper=this.mediaWrappers[0];this.defaultVideo=defaultWrapper?defaultWrapper.querySelector("[data-default-video]"):null,!(!this.defaultVideo||!this.defaultVideoPlayOnView)&&(this.defaultVideo.autoplay=!1,this.defaultVideo.loop=!1,this.defaultVideo.removeAttribute("autoplay"),this.defaultVideo.removeAttribute("loop"),this.resetDefaultVideo(),"IntersectionObserver"in window&&(this.defaultVideoObserver=new IntersectionObserver(entries=>{const entry=entries[0],isInView=entry.isIntersecting&&entry.intersectionRatio>=.35;this.handleDefaultVideoVisibility(isInView)},{threshold:[0,.35]}),this.defaultVideoObserver.observe(this.mediaContainer||defaultWrapper)),this.setupDefaultVideoViewportSync())}setupDefaultVideoViewportSync(){this.handleDefaultVideoScrollCheck||(this.handleDefaultVideoScrollCheck=()=>{this.defaultVideoScrollCheckQueued||(this.defaultVideoScrollCheckQueued=!0,window.requestAnimationFrame(()=>{this.defaultVideoScrollCheckQueued=!1,this.syncDefaultVideoVisibilityFromViewport()}))},window.addEventListener("scroll",this.handleDefaultVideoScrollCheck,{passive:!0}),window.addEventListener("resize",this.handleDefaultVideoScrollCheck),this.handleDefaultVideoScrollCheck())}syncDefaultVideoVisibilityFromViewport(){if(!this.defaultVideoPlayOnView||!this.defaultVideo)return;const target=this.mediaContainer||this.mediaWrappers[0];if(!target)return;

1const rect=target.getBoundingClientRect(),viewportHeight=window.innerHeight||document.documentElement.clientHeight,visibleHeight=Math.min(rect.bottom,viewportHeight)-Math.max(rect.top,0),visibleRatio=rect.height>0?Math.max(0,Math.min(visibleHeight,rect.height))/rect.height:0;this.handleDefaultVideoVisibility(visibleRatio>=.35)}handleDefaultVideoVisibility(isInView){!this.defaultVideoPlayOnView||!this.defaultVideo||(this.defaultVideoInView=isInView,isInView?this.playDefaultVideoOnceIfReady():(this.defaultVideoPlayedInView=!1,this.defaultVideoWasPlayingBeforeFeature=!1,this.resetDefaultVideo()))}isDefaultMediaActive(){const defaultWrapper=this.mediaWrappers[0];return this.currentIndex===0&&defaultWrapper&&defaultWrapper.classList.contains("active")}playDefaultVideoOnceIfReady(){if(!this.defaultVideoPlayOnView||!this.defaultVideo||!this.defaultVideoInView||this.defaultVideoPlayedInView||!this.isDefaultMediaActive())return;this.defaultVideo.loop=!1,this.defaultVideo.currentTime=0,this.defaultVideoPlayedInView=!0;const playPromise=this.defaultVideo.play();playPromise!==void 0&&playPromise.catch(error=>{this.defaultVideoPlayedInView=!1,console.log("Default video autoplay prevented:",error)})}resetDefaultVideo(){if(this.defaultVideo){this.defaultVideo.pause();try{this.defaultVideo.currentTime=0}catch{}}}pauseDefaultVideoForFeatureMedia(){!this.defaultVideoPlayOnView||!this.defaultVideo||!this.isDefaultMediaActive()||(this.defaultVideoWasPlayingBeforeFeature=!this.defaultVideo.paused&&!this.defaultVideo.ended,this.defaultVideo.pause())}resumeDefaultVideoAfterFeatureMedia(){if(!(!this.defaultVideoPlayOnView||!this.defaultVideo||!this.defaultVideoInView)){if(this.defaultVideo.loop=!1,this.defaultVideoWasPlayingBeforeFeature&&!this.defaultVideo.ended){this.defaultVideoPlayedInView=!0,this.defaultVideoWasPlayingBeforeFeature=!1;const playPromise=this.defaultVideo.play();playPromise!==void 0&&playPromise.catch(error=>{console.log("Default video autoplay prevented:",error)});return}this.defaultVideoWasPlayingBeforeFeature=!1,this.playDefaultVideoOnceIfReady()}}setupEventListeners(){this.buttons.forEach((button,index)=>{button.addEventListener("click",e=>{e.target.tagName==="A"||e.target.closest("a")||(e.preventDefault(),this.handleButtonClick(button,index))})}),this.closeBtn&&this.closeBtn.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),this.handleCloseClick()}),this.mobileCloseBtn&&this.mobileCloseBtn.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),this.handleCloseClick()}),this.fullscreenBtn&&this.fullscreenBtn.addEventListener("click",e=>{e.preventDefault(),this.toggleFullscreen()}),this.navPrevBtn&&this.navPrevBtn.addEventListener("click",e=>{e.preventDefault(),this.navigateToPreviousFeature()}),this.navNextBtn&&this.navNextBtn.addEventListener("click",e=>{e.preventDefault(),this.navigateToNextFeature()}),this.mobileNavPrevBtn&&this.mobileNavPrevBtn.addEventListener("click",e=>{e.preventDefault(),this.navigateMobileCarouselPrev()}),this.mobileNavNextBtn&&this.mobileNavNextBtn.addEventListener("click",e=>{e.preventDefault(),this.navigateMobileCarouselNext()}),this.handleKeydown=e=>{e.key==="Escape"&&(this.isFullscreen?this.exitFullscreen():this.hasExpandedButton()&&this.handleCloseClick())},document.addEventListener("keydown",this.handleKeydown),this.setupVideoControls(),this.setupTouchGestures()}setupVideoControls(){if(!this.videoControls)return;const playPauseBtn=this.videoControls.querySelector(".video-play-pause"),muteBtn=this.videoControls.querySelector(".video-mute"),volumeSlider=this.videoControls.querySelector(".video-volume-slider"),progressContainer=this.videoControls.querySelector(".video-progress-container");playPauseBtn&&playPauseBtn.addEventListener("click",()=>this.toggleVideoPlayback()),muteBtn&&muteBtn.addEventListener("click",()=>this.toggleVideoMute()),volumeSlider&&volumeSlider.addEventListener("input",e=>this.updateVideoVolume(e.target.value)),progressContainer&&progressContainer.addEventListener("click",e=>this.seekVideo(e))}setupTouchGestures(){if(!this.mediaContainer)return;let touchStartX=0,touchStartY=0,touchEndX=0,touchEndY=0,isSwiping=!1;this.mediaContainer.addEventListener("touchstart",e=>{if(this.buttons.length===0)return;const target=e.target;target.tagName==="IMG"&&target.classList.contains("zoomed")||e.target.closest(".video-controls")||(touchStartX=e.touches[0].clientX,touchStartY=e.touches[0].clientY,isSwiping=!1)},{passive:!0}),this.mediaContainer.addEventListener("touchmove",e=>{if(!touchStartX)return;touchEndX=e.touches[0].clientX,touchEndY=e.touches[0].clientY;const xDiff=Math.abs(touchEndX-touchStartX),yDiff=Math.abs(touchEndY-touchStartY);xDiff>yDiff&&xDiff>10&&(isSwiping=!0)},{passive:!0}),this.mediaContainer.addEventListener("touchend",()=>{if(!isSwiping||!touchStartX){touchStartX=0,touchStartY=0;return}const swipeDistance=touchEndX-touchStartX;Math.abs(swipeDistance)>50&&(swipeDistance>

10?this.navigateToPreviousFeature():this.navigateToNextFeature()),touchStartX=0,touchStartY=0,isSwiping=!1},{passive:!0})}navigateToNextFeature(){const currentButton=this.container.querySelector(".feature-btn.active");if(!currentButton){this.buttons.length>0&&this.buttons[0].click();return}const nextIndex=(Array.from(this.buttons).indexOf(currentButton)+1)%this.buttons.length;this.isMobile&&(this.mobileCarouselIndex=nextIndex),this.buttons[nextIndex].click()}navigateToPreviousFeature(){const currentButton=this.container.querySelector(".feature-btn.active");if(!currentButton){this.buttons.length>0&&this.buttons[this.buttons.length-1].click();return}const currentIndex=Array.from(this.buttons).indexOf(currentButton),prevIndex=currentIndex===0?this.buttons.length-1:currentIndex-1;this.isMobile&&(this.mobileCarouselIndex=prevIndex),this.buttons[prevIndex].click()}navigateMobileCarouselPrev(){this.mobileCarouselIndex=this.mobileCarouselIndex===0?this.buttons.length-1:this.mobileCarouselIndex-1,this.updateMobileCarousel(),this.buttons[this.mobileCarouselIndex].click()}navigateMobileCarouselNext(){this.mobileCarouselIndex=(this.mobileCarouselIndex+1)%this.buttons.length,this.updateMobileCarousel(),this.buttons[this.mobileCarouselIndex].click()}updateMobileCarousel(){if(!this.isMobile||this.buttons.length===0){this.buttons.forEach(btn=>btn.classList.remove("carousel-hidden")),this.mobileNavArrows&&this.mobileNavArrows.classList.remove("visible");return}this.buttons.forEach((btn,index)=>{index===this.mobileCarouselIndex?btn.classList.remove("carousel-hidden"):btn.classList.add("carousel-hidden")}),this.mobileNavArrows&&this.buttons.length>1&&this.mobileNavArrows.classList.add("visible")}hasExpandedButton(){return Array.from(this.buttons).some(btn=>btn.classList.contains("expanded"))}handleButtonClick(button,index){if(this.isTransitioning)return;this.isMobile&&(this.mobileCarouselIndex=index);const isCurrentlyExpanded=button.classList.contains("expanded");if(this.buttons.forEach(btn=>{btn!==button&&(btn.classList.remove("expanded"),btn.setAttribute("aria-expanded","false"))}),button.classList.add("expanded"),button.setAttribute("aria-expanded","true"),this.updateCloseButton(),this.navArrows&&(button.classList.contains("expanded")?this.navArrows.classList.add("visible"):this.navArrows.classList.remove("visible")),!button.classList.contains("expanded")){this.buttons.forEach(btn=>btn.classList.remove("active")),this.returnToDefaultMedia(),this.updateMobileCarousel();return}this.updateMobileCarousel(),this.buttons.forEach(btn=>btn.classList.remove("active")),button.classList.add("active");const label=button.querySelector(".feature-btn-label"),labelText=label?label.textContent:"Feature",mediaType=button.dataset.mediaType,mediaUrl=button.dataset.mediaUrl,mediaFit=button.dataset.mediaFit||"contain",autoplay=button.dataset.autoplay==="true",mute=button.dataset.mute==="true",animate=button.dataset.animate==="true",showVideoControls=button.dataset.showVideoControls!=="false",overrideFocusPoint=button.dataset.overrideFocusPoint==="true",buttonPositionX=button.dataset.mediaPositionX||"50",buttonPositionY=button.dataset.mediaPositionY||"50",mediaAlt=button.dataset.mediaAlt||"";if(!mediaUrl||mediaUrl===""){console.warn("No media URL found for this button");return}this.switchMedia(mediaType,mediaUrl,mediaFit,autoplay,mute,animate,labelText,showVideoControls,overrideFocusPoint,buttonPositionX,buttonPositionY,mediaAlt)}handleCloseClick(){if(this.isFullscreen){this.exitFullscreen();return}this.buttons.forEach(btn=>{btn.classList.remove("expanded"),btn.classList.remove("active"),btn.setAttribute("aria-expanded","false")}),this.updateCloseButton(),this.navArrows&&this.navArrows.classList.remove("visible"),this.announceMediaChange("Returned to default view"),this.returnToDefaultMedia(),this.updateMobileCarousel()}updateCloseButton(){const hasExpandedButton=Array.from(this.buttons).some(btn=>btn.classList.contains("expanded"));this.closeBtn&&(hasExpandedButton||this.isFullscreen?this.closeBtn.classList.add("visible"):this.closeBtn.classList.remove("visible")),this.mobileCloseBtn&&(hasExpandedButton||this.isFullscreen?this.mobileCloseBtn.classList.add("visible"):this.mobileCloseBtn.classList.remove("visible"))}returnToDefaultMedia(){if(this.isTransitioning)return;this.isTransitioning=!0;const currentWrapper=this.mediaWrappers[this.currentIndex],defaultWrapper=this.mediaWrappers[0];defaultWrapper.style.opacity="0",defaultWrapper.classList.add("active"),defaultWrapper.style.transition=`opacity ${this.transitionSpeed}ms cubic-bezier(0.4, 0, 0.2, 1)`,defaultWrapper.offsetWidth,defaultWrapper.style.opacity="1",currentWrapper!==defaultWrapper&&(currentWrapper.style.transition=`opacity ${this.transitionSpeed}ms cubic-bezier(0.4, 0, 0.2, 1)`,currentWrapper.style.opacity="0"),setTimeout(()=>{currentWrapper!==defaultWrapper&&(currentWrapper.classList.remove("active"),currentWrapper.style.opacity="",currentWrapper.style.transition=""),defaultWrapper.style.transition="",this.pauseAllVideos(),this.currentIndex=0;const defaultVideo=defaultWrapper.querySelector("video");if(defaultVideo)if(this.defaultVideoPlayOnView)this.defaultVideo=defaultVideo,this.resumeDefaultVideoAfterFeatureMedia();else{defaultVideo.currentTime=0;

1const playPromise=defaultVideo.play();playPromise!==void 0&&playPromise.catch(error=>{console.log("Default video autoplay prevented:",error)})}this.hideVideoControls(),this.isTransitioning=!1},this.transitionSpeed)}switchMedia(mediaType,url,fit,autoplay,mute,animate,label,showVideoControls=!0,overrideFocusPoint=!1,buttonPositionX="50",buttonPositionY="50",alt=""){this.isTransitioning=!0,this.defaultVideoPlayOnView&&this.pauseDefaultVideoForFeatureMedia(),this.currentShowVideoControls=showVideoControls,this.currentOverrideFocusPoint=overrideFocusPoint,this.currentButtonPositionX=buttonPositionX,this.currentButtonPositionY=buttonPositionY,this.currentMediaAlt=alt,label&&this.announceMediaChange(`Now showing: ${label}`);const nextIndex=1,currentWrapper=this.mediaWrappers[this.currentIndex],nextWrapper=this.mediaWrappers[nextIndex],isSameWrapper=this.currentIndex===1;let mediaElement;const cacheKey=`${mediaType}-${url}`;if(this.loadedMedia[cacheKey])mediaElement=this.loadedMedia[cacheKey],this.appendMediaAndTransition(mediaElement,currentWrapper,nextWrapper,nextIndex,fit,animate,isSameWrapper);else{this.showLoading(),mediaElement=this.createMediaElement(mediaType,url,fit,autoplay,mute);const onLoadComplete=()=>{this.hideLoading(),this.cacheMedia(cacheKey,mediaElement),this.appendMediaAndTransition(mediaElement,currentWrapper,nextWrapper,nextIndex,fit,animate,isSameWrapper)},onError=error=>{this.hideLoading(),console.error("Media load error:",error),this.showError(nextWrapper),this.isTransitioning=!1};mediaElement.tagName==="VIDEO"?(mediaElement.addEventListener("loadeddata",onLoadComplete,{once:!0}),mediaElement.addEventListener("error",onError,{once:!0}),mediaElement.load()):(mediaElement.addEventListener("load",onLoadComplete,{once:!0}),mediaElement.addEventListener("error",onError,{once:!0}))}}createMediaElement(type,url,fit,autoplay,mute){let element;const isVideo=type==="video"||url.match(/\.(mp4|webm|ogg)(\?.*)?$/i),isImage=type==="image"||url.match(/\.(jpg|jpeg|png|gif|webp|svg)(\?.*)?$/i),objectFit=this.resolveObjectFit(this.mediaFitMode||fit||"contain"),objectPosition=`${this.mediaPositionX}% ${this.mediaPositionY}%`;return isVideo?(element=document.createElement("video"),element.src=url,element.loop=!0,element.playsInline=!0,element.muted=mute,autoplay&&(element.autoplay=!0),element.style.width="100%",element.style.height="100%",element.style.objectFit=objectFit,element.style.objectPosition=objectPosition):(element=document.createElement("img"),element.src=url,element.alt=this.currentMediaAlt||"",element.style.width="100%",element.style.height="100%",element.style.objectFit=objectFit,element.style.objectPosition=objectPosition),element}appendMediaAndTransition(mediaElement,currentWrapper,nextWrapper,nextIndex,fit,animate,isSameWrapper=!1){nextWrapper.innerHTML="",mediaElement.style.objectFit=this.resolveObjectFit(this.mediaFitMode||fit||"contain");let positionX=this.mediaPositionX,positionY=this.mediaPositionY;if(this.currentOverrideFocusPoint&&(positionX=this.currentButtonPositionX,positionY=this.currentButtonPositionY),mediaElement.style.objectPosition=`${positionX}% ${positionY}%`,animate){mediaElement.classList.add("media-animate-in"),mediaElement.setAttribute("data-animation",this.mediaAnimationType),mediaElement.classList.add(`media-animate-${this.mediaAnimationEasing}`);const animationDuration=parseInt(getComputedStyle(this.container).getPropertyValue("--media-animation-duration"))||600;setTimeout(()=>{mediaElement.classList.remove("media-animate-in"),mediaElement.removeAttribute("data-animation"),mediaElement.classList.remove(`media-animate-${this.mediaAnimationEasing}`)},animationDuration)}if(nextWrapper.appendChild(mediaElement),mediaElement.tagName==="VIDEO"){this.pauseAllVideos(),this.activeVideos.includes(mediaElement)||this.activeVideos.push(mediaElement),this.currentVideo=mediaElement,this.setupVideoEventListeners(mediaElement),this.currentShowVideoControls?this.showVideoControls():this.hideVideoControls();const playPromise=mediaElement.play();playPromise!==void 0&&playPromise.catch(error=>

1{console.log("Video autoplay prevented:",error)})}else this.hideVideoControls(),this.currentVideo=null,mediaElement.tagName==="IMG"&&!this.container.dataset.disableImageZoom&&this.setupImageZoom(mediaElement);this.executeTransition(currentWrapper,nextWrapper,nextIndex,isSameWrapper)}executeTransition(currentWrapper,nextWrapper,nextIndex,isSameWrapper=!1){const duration=this.transitionSpeed;switch(this.transitionEffect){case"slide":this.slideTransition(currentWrapper,nextWrapper,nextIndex,duration,isSameWrapper);break;case"zoom":this.zoomTransition(currentWrapper,nextWrapper,nextIndex,duration,isSameWrapper);break;default:this.fadeTransition(currentWrapper,nextWrapper,nextIndex,duration,isSameWrapper);break}}fadeTransition(currentWrapper,nextWrapper,nextIndex,duration,isSameWrapper=!1){nextWrapper.style.opacity="0",nextWrapper.classList.add("active"),nextWrapper.style.transition=`opacity ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`,nextWrapper.offsetWidth,nextWrapper.style.opacity="1",isSameWrapper||(currentWrapper.style.transition=`opacity ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`,currentWrapper.style.opacity="0"),setTimeout(()=>{isSameWrapper||(currentWrapper.classList.remove("active"),currentWrapper.style.opacity="",currentWrapper.style.transition="",this.cleanupOldMedia(currentWrapper)),nextWrapper.style.transition="",this.currentIndex=nextIndex,this.isTransitioning=!1},duration)}slideTransition(currentWrapper,nextWrapper,nextIndex,duration,isSameWrapper=!1){nextWrapper.style.transform="translateX(100%)",nextWrapper.style.opacity="1",nextWrapper.classList.add("active"),nextWrapper.style.transition=`transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`,nextWrapper.offsetWidth,nextWrapper.style.transform="translateX(0)",isSameWrapper||(currentWrapper.style.transition=`transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`,currentWrapper.style.transform="translateX(-100%)"),setTimeout(()=>{isSameWrapper||(currentWrapper.classList.remove("active"),currentWrapper.style.transform="",currentWrapper.style.transition="",this.cleanupOldMedia(currentWrapper)),nextWrapper.style.transition="",this.currentIndex=nextIndex,this.isTransitioning=!1},duration)}zoomTransition(currentWrapper,nextWrapper,nextIndex,duration,isSameWrapper=!1){nextWrapper.style.transform="scale(1.1)",nextWrapper.style.opacity="0",nextWrapper.classList.add("active"),nextWrapper.style.transition=`transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`,nextWrapper.offsetWidth,nextWrapper.style.transform="scale(1)",nextWrapper.style.opacity="1",isSameWrapper||(currentWrapper.style.transition=`transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`,currentWrapper.style.transform="scale(0.9)",currentWrapper.style.opacity="0"),setTimeout(()=>{isSameWrapper||(currentWrapper.classList.remove("active"),currentWrapper.style.transform="",currentWrapper.style.opacity="",currentWrapper.style.transition="",this.cleanupOldMedia(currentWrapper)),nextWrapper.style.transition="",this.currentIndex=nextIndex,this.isTransitioning=!1},duration)}cleanupOldMedia(wrapper){const isDefaultWrapper=wrapper===this.mediaWrappers[0];wrapper.querySelectorAll("img").forEach(img=>{img._zoomCleanup&&img._zoomCleanup()});const isInCache=element=>Object.values(this.loadedMedia).includes(element);wrapper.querySelectorAll("video").forEach(video=>{if(video.pause(),!isInCache(video)&&!isDefaultWrapper&&(video.src=""),!isDefaultWrapper){const index=this.activeVideos.indexOf(video);index>-1&&this.activeVideos.splice(index,1)}}),isDefaultWrapper||(wrapper.innerHTML="")}pauseAllVideos(){this.activeVideos.forEach(video=>{video&&video.pause&&video.pause()}),this.activeVideos=[]}showLoading(){this.loadingIndicator&&this.loadingIndicator.classList.add("visible")}hideLoading(){this.loadingIndicator&&this.loadingIndicator.classList.remove("visible")}showError(wrapper){wrapper.innerHTML='<div class="error-message">Failed to load media</div>',wrapper.classList.add("active"),setTimeout(()=>{wrapper.classList.remove("active")},3e3)}cacheMedia(key,element){if(this.cacheOrder.length>=this.maxCacheSize){const oldest=this.cacheOrder.shift(),oldElement=this.loadedMedia[oldest];oldElement&&(oldElement.tagName==="VIDEO"&&(oldElement.pause(),oldElement.src="",oldElement.load()),delete this.loadedMedia[oldest])}const existingIndex=this.cacheOrder.indexOf(key);existingIndex>-1&&this.cacheOrder.splice(existingIndex,1),this.loadedMedia[key]=element,this.cacheOrder.push(key)}announceMediaChange(message){const announcer=this.container.querySelector("[data-announcement]");announcer&&(announcer.textContent=message,setTimeout(()=>{announcer.textContent=""},1e3))}toggleFullscreen(){this.isFullscreen?this.exitFullscreen():this.enterFullscreen()}enterFullscreen(){this.mediaContainer&&(this.mediaContainer.classList.add("fullscreen"),this.isFullscreen=!0,this.scrollPosition=window.pageYOffset||document.documentElement.scrollTop,document.documentElement.classList.add("fullscreen-active"),document.body.classList.add("fullscreen-active"),document.documentElement.style.overflow="hidden",document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.top=`-${this.scrollPosition}px`,document.body.style.width="100%",document.body.style.left="0",document.body.style.right="0",this.updateCloseButton(),this.fullscreenBtn&&this.fullscreenBtn.setAttribute("aria-label","Exit fullscreen view"),this.handleFullscreenClick=e=>{e.target===this.mediaContainer&&this.exitFullscreen()},this.mediaContainer.addEventListener("click",this.handleFullscreenClick))}exitFullscreen(){this.mediaContainer&&(this.mediaContainer.classList.remove("fullscreen"),this.isFullscreen=!1,document.documentElement.classList.remove("fullscreen-active"),document.body.classList.remove("fullscreen-active"),document.documentElement.style.overflow="",document.body.style.overflow="",document.body.style.position="",document.body.style.top="",document.body.style.width="",document.body.style.left="",document.body.style.right="",this.scrollPosition!==void 0&&(window.scrollTo(0,this.scrollPosition),this.scrollPosition=void 0),this.updateCloseButton(),this.fullscreenBtn&&this.fullscreenBtn.setAttribute("aria-label","Toggle fullscreen view"),this.handleFullscreenClick&&(this.mediaContainer.removeEventListener("click",this.handleFullscreenClick),this.handleFullscreenClick=null))}setupImageZoom(img){let isZoomed=!1,isDragging=!1,startX,startY,translateX=0,translateY=0,scale=1;const handleClick=e=>{if(!isDragging)if(isZoomed)scale=1,translateX=0,translateY=0,img.style.transform="scale(1) translate(0, 0)",img.classList.remove("zoomed"),isZoomed=!1;else{const rect=img.getBoundingClientRect(),x=e.clientX-rect.left,y=e.clientY-rect.top,xPercent=x/rect.width*100,yPercent=y/rect.height*100;scale=2.5,img.style.transformOrigin=`${xPercent}% ${yPercent}%`,img.style.transform=`scale(${scale})`,img.classList.add("zoomed"),isZoomed=!0}},handleMouseDown=e=>{isZoomed&&(isDragging=!0,startX=e.clientX-translateX,startY=e.clientY-translateY,img.style.transition="none")},handleMouseMove=e=>{!isDragging||!isZoomed||(translateX=e.clientX-startX,translateY=e.clientY-startY,img.style.transform=`scale(${scale}) translate(${translateX/scale}px, ${translateY/scale}px)`)},handleMouseUp=()=>{isDragging&&setTimeout(()=>{isDragging=!1},10),img.style.transition=""};let touchStartX,touchStartY;const handleTouchStart=e=>{!isZoomed||e.touches.length>1||(e.preventDefault(),isDragging=!0,touchStartX=e.touches[0].clientX-translateX,touchStartY=e.touches[0].clientY-translateY,img.style.transition="none")},handleTouchMove=e=>{!isDragging||!isZoomed||e.touches.length>1||(e.preventDefault(),translateX=e.touches[0].clientX-touchStartX,translateY=e.touches[0].clientY-touchStartY,img.style.transform=`scale(${scale}) translate(${translateX/scale}px, ${translateY/scale}px)`)},handleTouchEnd=()=>{isDragging&&setTimeout(()=>{isDragging=!1},10),img.style.transition=""};img.addEventListener("click",handleClick),img.addEventListener("mousedown",handleMouseDown),img.addEventListener("mousemove",handleMouseMove),img.addEventListener("mouseup",handleMouseUp),img.addEventListener("mouseleave",handleMouseUp),img.addEventListener("touchstart",handleTouchStart,{passive:!1}),img.addEventListener("touchmove",handleTouchMove,{passive:!1}),img.addEventListener("touchend",handleTouchEnd),img._zoomCleanup=()=>{img.removeEventListener("click",handleClick),img.removeEventListener("mousedown",handleMouseDown),img.removeEventListener("mousemove",handleMouseMove),img.removeEventListener("mouseup",handleMouseUp),img.removeEventListener("mouseleave",handleMouseUp),img.removeEventListener("touchstart",handleTouchStart),img.removeEventListener("touchmove",handleTouchMove),img.removeEventListener("touchend",handleTouchEnd)}}setupVideoEventListeners(video){video.addEventListener("timeupdate",()=>this.updateVideoProgress()),video.addEventListener("loadedmetadata",()=>this.updateVideoDuration()),video.addEventListener("play",()=>this.updatePlayPauseButton(!0)),video.addEventListener("pause",()=>this.updatePlayPauseButton(!1))}showVideoControls(){this.videoControls&&(this.videoControls.style.display="block",this.videoControls.classList.add("visible"))}hideVideoControls(){this.videoControls&&(this.videoControls.classList.remove("visible"),setTimeout(()=>{this.videoControls.style.display="none"},300))}toggleVideoPlayback(){this.currentVideo&&(this.currentVideo.paused?this.currentVideo.play():this.currentVideo.pause())}toggleVideoMute(){if(!this.currentVideo)return;this.currentVideo.muted=!this.currentVideo.muted;const muteBtn=this.videoControls.querySelector(".video-mute");muteBtn&&(this.currentVideo.muted?muteBtn.classList.add("muted"):muteBtn.classList.remove("muted"))}updateVideoVolume(value){if(!this.currentVideo)return;const volume=value/100;this.currentVideo.volume=volume,this.currentVideo.muted=volume===0;const muteBtn=this.videoControls.querySelector(".video-mute");muteBtn&&(volume===0?muteBtn.classList.add("muted"):muteBtn.classList.remove("muted"))}seekVideo(e){if(!this.currentVideo)return;const rect=e.currentTarget.querySelector(".video-progress-bar").getBoundingClientRect(),pos=(e.clientX-rect.left)/rect.width;this.currentVideo.currentTime=pos*this.currentVideo.duration}updateVideoProgress(){if(!this.currentVideo||!this.videoControls)return;const progress=this.currentVideo.currentTime/this.currentVideo.duration*100,progressFilled=this.videoControls.querySelector(".video-progress-filled"),currentTimeEl=this.videoControls.querySelector(".video-current-time");progressFilled&&(progressFilled.style.width=`${progress}%`),currentTimeEl&&(currentTimeEl.textContent=this.formatTime(this.currentVideo.currentTime))}updateVideoDuration(){if(!this.currentVideo||!this.videoControls)return;const durationEl=this.videoControls.querySelector(".video-duration");durationEl&&(durationEl.textContent=this.formatTime(this.currentVideo.duration))}updatePlayPauseButton(isPlaying){if(!this.videoControls)return;const playPauseBtn=this.videoControls.querySelector(".video-play-pause");playPauseBtn&&(isPlaying?playPauseBtn.classList.add("playing"):playPauseBtn.classList.remove("playing"))}formatTime(seconds){if(isNaN(seconds))return"0:00";const mins=Math.floor(seconds/60),secs=Math.floor(seconds%60);return`${mins}:${secs.toString().padStart(2,"0")}`}destroy(){this.isFullscreen&&this.exitFullscreen(),document.documentElement.classList.remove("fullscreen-active"),document.body.classList.remove("fullscreen-active"),document.documentElement.style.overflow="",document.body.style.overflow="",document.body.style.position="",document.body.style.top="",document.body.style.width="",document.body.style.left="",document.body.style.right="",document.removeEventListener("keydown",this.handleKeydown),this.handleResize&&window.removeEventListener("resize",this.handleResize),this.pauseAllVideos(),this.defaultVideoObserver&&(this.defaultVideoObserver.disconnect(),this.defaultVideoObserver=null),this.handleDefaultVideoScrollCheck&&(window.removeEventListener("scroll",this.handleDefaultVideoScrollCheck),window.removeEventListener("resize",this.handleDefaultVideoScrollCheck),this.handleDefaultVideoScrollCheck=null),this.defaultVideo&&(this.defaultVideo.pause(),this.defaultVideo=null),Object.keys(this.loadedMedia).forEac

1h(key=>{const element=this.loadedMedia[key];element&&element.tagName==="VIDEO"&&(element.pause(),element.src="",element.load())}),this.loadedMedia={},this.cacheOrder=[]}}window.InteractiveProductViewer=InteractiveProductViewer;
2//# sourceMappingURL=/cdn/shop/t/395/assets/interactive-product-viewer.js.map?v=41304566802971710801781621479