@sandlada/mdc/build/components/side-sheet/internal/side-sheet-drag-controller.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{SIDE_SHEET_DRAG_END_EVENT as e,SIDE_SHEET_DRAG_EVENT as t,SIDE_SHEET_DRAG_START_EVENT as n}from"../side-sheet.interface.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const r=.5;var i=class{constructor(e){this.pointerId=null,this.startX=0,this.startY=0,this.engaged=!1,this.canceled=!1,this.currentDx=0,this.containerWidth=0,this.lastMoveT=0,this.lastMoveDx=0,this.releaseVelocity=0,this.host=e,e.addController(this),this.handlePointerMoveBound=e=>this.handlePointerMove(e),this.handlePointerUpBound=e=>this.handlePointerUp(e),this.handlePointerCancelBound=e=>this.handlePointerUp(e)}hostConnected(){}hostDisconnected(){window.removeEventListener(`pointermove`,this.handlePointerMoveBound),window.removeEventListener(`pointerup`,this.handlePointerUpBound),window.removeEventListener(`pointercancel`,this.handlePointerCancelBound),this.resetState()}cancel(){if(this.pointerId===null)return;window.removeEventListener(`pointermove`,this.handlePointerMoveBound),window.removeEventListener(`pointerup`,this.handlePointerUpBound),window.removeEventListener(`pointercancel`,this.handlePointerCancelBound),this.resetState();let e=this.host.containerRef();e&&(e.style.removeProperty(`transform`),e.style.removeProperty(`cursor`));let t=this.host.scrimRef();t&&t.style.removeProperty(`opacity`),this.host.removeAttribute(`touch-action`),this.host.removeAttribute(`dragged`)}handlePointerDown(e){if(this.pointerId!==null||!this.host.enabled()||!e.isPrimary)return;let t=e.target;t&&t.closest(`button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])`)||(this.pointerId=e.pointerId,this.startX=e.clientX,this.startY=e.clientY,this.engaged=!1,this.canceled=!1,this.currentDx=0,this.releaseVelocity=0,this.lastMoveT=0,this.lastMoveDx=0,window.addEventListener(`pointermove`,this.handlePointerMoveBound),window.addEventListener(`pointerup`,this.handlePointerUpBound),window.addEventListener(`pointercancel`,this.handlePointerCancelBound))}handlePointerMove(e){if(this.pointerId!==e.pointerId||this.canceled)return;let r=e.clientX-this.startX,i=Math.abs(e.clientY-this.startY);if(!this.engaged&&i>2*Math.max(Math.abs(r),1)){this.canceled=!0,this.handlePointerUp(e);return}if(!this.engaged){if(Math.abs(r)<4)return;let t=this.host.containerRef();if(!t)return;try{t.setPointerCapture(e.pointerId)}catch{}this.engaged=!0,this.containerWidth=t.getBoundingClientRect().width,this.host.setAttribute(`touch-action`,`none`),t.style.cursor=`grabbing`,this.host.dispatchEvent(new CustomEvent(n,{bubbles:!0,composed:!0,detail:{sheetEdge:this.host.getSheetEdge()}}))}let a=this.host.getSheetEdge(),o=this.host.getVariant()===`standard`,s=0;s=a===`end`?r<0?r*.2:r:r>0?r*.2:r;let c=performance.now(),l=this.lastMoveT,u=this.lastMoveDx;this.lastMoveT=c,this.lastMoveDx=s,l>0&&c-l<80?this.releaseVelocity=(s-u)/(c-l):c-l>=80&&(this.releaseVelocity=0),this.currentDx=s,Math.abs(s)>0?this.host.setAttribute(`dragged`,``):this.host.removeAttribute(`dragged`);let d=this.host.containerRef(),f=this.host.scrimRef();if(f&&!o){let e=Math.min(1,Math.max(0,Math.abs(s)/Math.max(1,this.containerWidth)));f.style.opacity=String(.32*(1-e))}d&&(d.style.transform=`translateX(${s}px)`);let p=this.containerWidth>0?this.containerWidth:1,m=Math.min(1,Math.max(0,Math.abs(s)/p));this.host.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:{dx:s,progress:m}}))}handlePointerUp(t){if(this.pointerId!==t.pointerId)return;window.removeEventListener(`pointermove`,this.handlePointerMoveBound),window.removeEventListener(`pointerup`,this.handlePointerUpBound),window.removeEventListener(`pointercancel`,this.handlePointerCancelBound);let n=this.host.containerRef(),i=this.host.scrimRef(),a=this.currentDx;if(!this.engaged){this.resetState();return}if(this.canceled){n&&(n.style.transform=``,n.style.cursor=``),i&&(i.style.opacity=``),this.host.removeAttribute(`touch-action`),this.host.removeAttribute(`dragged`);try{n?.releasePointerCapture(t.pointerId)}catch{}this.host.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:{committed:!1,target:`open`,reason:`cancel`,dx:a}})),this.resetState();return}try{n?.releasePointerCapture(t.pointerId)}catch{}let o=this.host.getSheetEdge(),s=Math.max(40,this.containerWidth*.25),c=`open`,l;o===`end`?(this.releaseVelocity>r||this.currentDx>s)&&(c=`closed`,l=this.releaseVelocity>r?`velocity`:`distance`):(this.releaseVelocity<-.5||this.currentDx<-s)&&(c=`closed`,l=this.releaseVelocity<-.5?`velocity`:`distance`);let u=c===`closed`;this.host.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:{committed:u,target:c,reason:l,dx:a}})),this.resetState()}resetState(){this.host.removeAttribute(`dragged`);let e=this.host.containerRef();e&&e.style.removeProperty(`cursor`),this.pointerId=null,this.startX=0,this.startY=0,this.engaged=!1,this.canceled=!1,this.currentDx=0,this.containerWidth=0,this.releaseVelocity=0,this.lastMoveT=0,this.lastMoveDx=0}};export{i as SideSheetDragController};
//# sourceMappingURL=side-sheet-drag-controller.js.map