https://mantasleep.uk/cdn/shop/t/137/assets/section-image-map.js?v=126368053591701735411779459360

1(function(){"use strict";class ImageMap{constructor(section){this.section=section,this.hotspotMarkers=Array.from(section.querySelectorAll(".hotspot-marker")),this.hotspotImage=section.querySelector("[data-hotspot-image]"),this.prefersReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.currentPulsingIndex=0,this.pulseTimeout=null,this.resizeTimeout=null,this.currentAnimationFrame=null,this.init()}init(){this.startSequentialPulsing(),this.setupResizeHandler(),this.setupHoverAnimation(),window.Shopify&&Shopify.designMode&&this.setupCoordinateHelper()}animateRing(ring,cycleProgress){const eased=cycleProgress<.5?2*cycleProgress*cycleProgress:1-Math.pow(-2*cycleProgress+2,2)/2;let scale,opacity;if(eased<.5){const t=eased*2;scale=1+t,opacity=1-t}else{const t=(eased-.5)*2;scale=2-t,opacity=t}ring&&(ring.style.transform=`scale(${scale})`,ring.style.opacity=opacity)}setupHoverAnimation(){this.hotspotMarkers.forEach(marker=>{const ring=marker.querySelector(".hotspot-marker__ring");let animationFrame=null,startTime=null;const animate=currentTime=>{startTime||(startTime=currentTime);const elapsed=currentTime-startTime,duration=1e3,cycleProgress=elapsed%duration/duration;this.animateRing(ring,cycleProgress),animationFrame=requestAnimationFrame(animate)};marker.addEventListener("mouseenter",()=>{window.innerWidth<=767||(startTime=null,animationFrame&&cancelAnimationFrame(animationFrame),ring&&(ring.style.willChange="transform, opacity"),animationFrame=requestAnimationFrame(animate))}),marker.addEventListener("mouseleave",()=>{if(window.innerWidth<=767)return;animationFrame&&(cancelAnimationFrame(animationFrame),animationFrame=null);const currentTransform=ring?getComputedStyle(ring).transform:"none",currentOpacity=ring?getComputedStyle(ring).opacity:"1";ring&&(ring.style.transform=currentTransform,ring.style.opacity=currentOpacity),marker.offsetWidth;const exitDuration=250,exitStartTime=performance.now(),animateExit=currentTime=>{const elapsed=currentTime-exitStartTime,progress=Math.min(elapsed/exitDuration,1);if(ring){const startScale=parseFloat(currentTransform.match(/matrix\(([^,]+)/)?.[1]||"1"),startOpacity=parseFloat(currentOpacity),scale=startScale-(startScale-1)*progress,opacity=startOpacity+(1-startOpacity)*progress;ring.style.transform=`scale(${scale})`,ring.style.opacity=opacity}progress<1?requestAnimationFrame(animateExit):ring&&(ring.style.transform="",ring.style.opacity="",ring.style.willChange="")};requestAnimationFrame(animateExit)})})}startSequentialPulsing(){window.innerWidth>767||this.prefersReducedMotion||this.hotspotMarkers.length!==0&&this.pulseNext()}pulseNext(){const currentMarker=this.hotspotMarkers[this.currentPulsingIndex];if(currentMarker){const ring=currentMarker.querySelector(".hotspot-marker__ring");let startTime=null;const pulseDuration=1200,totalDuration=2400,animate=currentTime=>{startTime||(startTime=currentTime);const elapsed=currentTime-startTime;if(elapsed>=totalDuration){ring&&(ring.style.transform="",ring.style.opacity="",ring.style.willChange=""),this.currentAnimationFrame&&(cancelAnimationFrame(this.currentAnimationFrame),this.currentAnimationFrame=null),this.currentPulsingIndex=(this.currentPulsingIndex+1)%this.hotspotMarkers.length,this.pulseNext();return}const cycleProgress=elapsed%pulseDuration/pulseDuration;this.animateRing(ring,cycleProgress),this.currentAnimationFrame=requestAnimationFrame(animate)};ring&&(ring.style.willChange="transform, opacity"),this.currentAnimationFrame=requestAnimationFrame(animate)}}setupResizeHandler(){window.addEventListener("resize",()=>{clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(()=>{window.innerWidth<=767&&!this.prefersReducedMotion?this.startSequentialPulsing():(this.currentAnimationFrame&&(cancelAnimationFrame(this.currentAnimationFrame),this.currentAnimationFrame=null),this.hotspotMarkers.forEach(marker=>{const ring=marker.querySelector(".hotspot-marker__ring");ring&&(ring.style.transform="",ring.style.opacity="",ring.style.willChange="")}))},500)})}setupCoordinateHelper(){if(!this.hotspotImage)return;const coordinatesMessage="Copy these into your hotspot block settings.";this.coordinateClickHandler&&this.hotspotImage.removeEventListener("click",this.coordinateClickHandler);let tooltip=this.section.querySelector(".coordinate-tooltip");tooltip||(tooltip=document.createElement("div"),tooltip.className="

1coordinate-tooltip",this.section.appendChild(tooltip)),this.coordinateTooltip=tooltip,this.coordinateClickHandler=e=>{e.stopPropagation(),e.preventDefault();const rect=this.hotspotImage.getBoundingClientRect(),x=((e.clientX-rect.left)/rect.width*100).toFixed(1),y=((e.clientY-rect.top)/rect.height*100).toFixed(1);this.coordinateTooltip.innerHTML=`
2          <div class="coordinate-tooltip__content">
3            <strong>Hotspot Coordinates:</strong><br>
4            X: ${x}%<br>
5            Y: ${y}%<br>
6            <small>${coordinatesMessage}</small>
7          </div>
8        `,this.coordinateTooltip.style.top=`${e.clientY}px`,this.coordinateTooltip.classList.add("is-visible"),clearTimeout(this.tooltipTimeout),this.tooltipTimeout=setTimeout(()=>{this.coordinateTooltip.classList.remove("is-visible")},3e3)},this.hotspotImage.addEventListener("click",this.coordinateClickHandler),this.hotspotImage.style.cursor="crosshair",this.tooltipDismissHandler=e=>{!this.coordinateTooltip.contains(e.target)&&e.target!==this.hotspotImage&&this.coordinateTooltip.classList.remove("is-visible")},document.addEventListener("click",this.tooltipDismissHandler)}reinit(){clearTimeout(this.pulseTimeout),clearTimeout(this.resizeTimeout),this.hotspotMarkers=Array.from(this.section.querySelectorAll(".hotspot-marker")),this.hotspotImage=this.section.querySelector("[data-hotspot-image]"),this.currentPulsingIndex=0,this.hotspotMarkers.forEach(marker=>marker.classList.remove("is-pulsing")),this.init()}destroy(){clearTimeout(this.pulseTimeout),clearTimeout(this.resizeTimeout),clearTimeout(this.tooltipTimeout),this.coordinateClickHandler&&this.hotspotImage&&(this.hotspotImage.removeEventListener("click",this.coordinateClickHandler),this.hotspotImage.style.cursor=""),this.tooltipDismissHandler&&document.removeEventListener("click",this.tooltipDismissHandler),this.coordinateTooltip&&this.coordinateTooltip.remove(),this.hotspotMarkers.forEach(marker=>marker.classList.remove("is-pulsing"))}}const imageMapInstances=new Map;function initImageMaps(){document.querySelectorAll(".image-map").forEach(section=>{const sectionId=section.id;if(imageMapInstances.has(sectionId))return;const instance=new ImageMap(section);imageMapInstances.set(sectionId,instance)})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{setTimeout(initImageMaps,100)}):setTimeout(initImageMaps,100),document.addEventListener("shopify:section:load",function(event){const section=event.target.querySelector(".image-map");if(section){const sectionId=section.id;imageMapInstances.has(sectionId)&&(imageMapInstances.get(sectionId).destroy(),imageMapInstances.delete(sectionId)),setTimeout(()=>{const instance=new ImageMap(section);imageMapInstances.set(sectionId,instance)},100)}}),document.addEventListener("shopify:block:select",function(event){const section=event.target.closest(".image-map");if(section){const sectionId=section.id,instance=imageMapInstances.get(sectionId);instance&&setTimeout(()=>{instance.reinit()},100)}}),document.addEventListener("shopify:section:unload",function(event){const section=event.target.querySelector(".image-map");if(section){const sectionId=section.id,instance=imageMapInstances.get(sectionId);instance&&(instance.destroy(),imageMapInstances.delete(sectionId))}})})();
9//# sourceMappingURL=/cdn/shop/t/137/assets/section-image-map.js.map?v=126368053591701735411779459360