https://www.laparure.com.my/cdn/shop/t/43/assets/product-hotspot.js?v=154486456714459151781790213436

1import{Component}from"@theme/component";import"@theme/quick-add";import{isClickedOutside,isMobileBreakpoint,isTouchDevice,mediaQueryLarge}from"@theme/utilities";export class ProductHotspotComponent extends Component{requiredRefs=["trigger","dialog"];#pointerenterHandler=null;timer=null;connectedCallback(){super.connectedCallback(),this.#handleBreakpointChange(),mediaQueryLarge.addEventListener("change",this.#handleBreakpointChange)}disconnectedCallback(){super.disconnectedCallback(),this.#removeDesktopListeners(),mediaQueryLarge.removeEventListener("change",this.#handleBreakpointChange)}#openQuickAddModal(){const quickAddComponent=this.querySelector("quick-add-component");quickAddComponent&&quickAddComponent.handleClick(new MouseEvent("click",{bubbles:!0,cancelable:!0}))}#setupDesktopListeners(){const{trigger,dialog}=this.refs,pointerenterHandler=()=>{dialog.open||(this.timer=setTimeout(()=>{this.showDialog()},120),trigger.addEventListener("pointerleave",this.#handlePointerLeave))};this.#pointerenterHandler=pointerenterHandler,trigger.addEventListener("pointerenter",pointerenterHandler)}#removeDesktopListeners(){const{trigger}=this.refs;this.#pointerenterHandler&&(trigger.removeEventListener("pointerenter",this.#pointerenterHandler),trigger.removeEventListener("pointerleave",this.#handlePointerLeave),this.#pointerenterHandler=null),this.timer&&(clearTimeout(this.timer),this.timer=null)}#handleBreakpointChange=()=>{this.#removeDesktopListeners(),isMobileBreakpoint()||this.#setupDesktopListeners()};#calculateDialogPlacement(){const{trigger,dialog}=this.refs,hotspotsContainer=this.parentElement;if(!hotspotsContainer)return;const BUTTON_GAP=10,CONTAINER_GAP=10,TOTAL_GAP=BUTTON_GAP+CONTAINER_GAP,containerRect=hotspotsContainer?.getBoundingClientRect(),triggerRect=trigger.getBoundingClientRect();dialog.style.visibility="hidden",dialog.style.display="block",dialog.style.transform="none",dialog.removeAttribute("data-placement");const{width:dialogWidth,height:dialogHeight}=dialog.getBoundingClientRect();dialog.style.removeProperty("display"),dialog.style.removeProperty("visibility"),dialog.style.removeProperty("transform");const buttonLeft=triggerRect.left-containerRect.left,buttonRight=triggerRect.right-containerRect.left,buttonTop=triggerRect.top-containerRect.top,buttonBottom=triggerRect.bottom-containerRect.top,spaceRight=containerRect.width-buttonRight-CONTAINER_GAP,spaceLeft=buttonLeft-CONTAINER_GAP;let x="right";spaceRight>=dialogWidth+BUTTON_GAP?x="right":spaceLeft>=dialogWidth+BUTTON_GAP?x="left":x="center";let y="bottom",verticalOffset=0;if(x!=="center"){let dialogStartY=buttonTop,dialogEndY=buttonTop+dialogHeight;dialogEndY>containerRect.height-CONTAINER_GAP?(dialogStartY=buttonBottom-dialogHeight,dialogEndY=buttonBottom,y="top",dialogStartY<CONTAINER_GAP?verticalOffset=CONTAINER_GAP-dialogStartY:dialogEndY>containerRect.height-CONTAINER_GAP&&(verticalOffset=-(dialogEndY-(containerRect.height-CONTAINER_GAP)))):dialogStartY<CONTAINER_GAP&&(dialogStartY<CONTAINER_GAP&&(verticalOffset=CONTAINER_GAP-dialogStartY),y="bottom")}else containerRect.height-buttonBottom>=dialogHeight+TOTAL_GAP?y="bottom":buttonTop>=dialogHeight+TOTAL_GAP?y="top":y=buttonTop<containerRect.height/2?"bottom":"top";return dialog.dataset.placement=`${x},${y}`,verticalOffset!==0?dialog.style.setProperty("--dialog-vertical-offset",`${verticalOffset}px`):dialog.style.removeProperty("--dialog-vertical-offset"),new Promise(resolve=>setTimeout(resolve,100))}#handlePointerLeave=e=>{const{dialog,trigger}=this.refs;if(this.timer&&(clearTimeout(this.timer),this.timer=null),!dialog.open)return;const isLeavingTrigger=e.target===trigger,isLeavingDialog=e.target===dialog,isGoingToDialog=e.relatedTarget instanceof Element&&dialog.contains(e.relatedTarget),isGoingToTrigger=e.relatedTarget===trigger;isGoingToDialog||isLeavingDialog&&isGoingToTrigger||(isLeavingTrigger||isLeavingDialog)&&this.closeDialog()};getHotspotProductLink(){return this.refs.productLink||null}handleHotspotClick=e=>{isMobileBreakpoint()||isTouchDevice()?(e.preventDefault(),e.stopPropagation(),this.#openQuickAddModal()):this.showDialog()};showDialog=async()=>{const{dialog}=this.refs;await this.#calculateDialogPlacement(),dialog.dataset.showing="true",dialog.show(),document.body.addEventListener("click",this.lightDismissMouse),document.body.addEventListener("keydown",this.lightDismissKeyboard),document.body.addEventListener("keyup",this.lightDismissKeyboard),dialog.addEventListener("pointerleave",this.#handlePointerLeave)};closeDialog=async()=>{const{dialog,trigger}=this.refs;dialog.dataset.closing="true",dialog.close(),document.body.removeEventListener("click",this.lightDismissMouse),document.body.removeEventListener("keydown",this.lightDismissKeyboard),document.body.removeEventListener("keyup",this.lightDismissKeyboard),dialog.removeEventListener("pointerleave",this.#handlePointerLeave),trigger.removeEventListener("pointerleave",this.#handlePointerLeave);const animations=dialog.getAnimations({subtree:!0});await Promise.allSettled(animations.map(a=>a.finished)),dialog.open||(delete dialog.dataset.showing,delete dialog.dataset.closing,delete dialog.dataset.placement)};lightDismissMouse=event=>{const{dialog}=this.refs;isClickedOutside(event,dialog)&&this.closeDialog()};lightDismissKeyboard=event=>{const{dialog}=this.refs;

1(event.type==="keydown"&&event.key==="Escape"||event.type==="keyup"&&!dialog.matches(":is(:focus, :focus-visible, :focus-within)"))&&this.closeDialog()}}customElements.define("product-hotspot-component",ProductHotspotComponent);
2//# sourceMappingURL=/cdn/shop/t/43/assets/product-hotspot.js.map?v=154486456714459151781790213436