feat(movable): variant 'screen' for limit.parent - limit to screen

vnphanquang · Sep 23, 2022 · 0b69be1 · 0b69be1
1 parent c6f2a9a
commit 0b69be1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/.changeset/curly-oranges-listen.md b/.changeset/curly-oranges-listen.md
@@ -0,0 +1,5 @@
+---
+"@svelte-put/movable": minor
+---
+
+Add 'screen' variant for limit parent
diff --git a/packages/actions/movable/src/movable.ts b/packages/actions/movable/src/movable.ts
@@ -84,7 +84,7 @@ import { input } from './utils';
  *
  * Be aware of side effects:
  *
- * - element.style.position is set to `relative` (if not already 'absolute' / 'relative') the first time mousedown is triggered
+ * - element.style.position is set to `relative` (if not already 'absolute', 'relative', or 'fixed) the first time mousedown is triggered
  *
  * - document.body.userSelect is set to `none` after `mousedown` and restored on `mouseup`
  *
@@ -143,7 +143,17 @@ export function movable(node: HTMLElement, parameters: MovableParameters = { ena
     }
 
     if (parent) {
-      const insideBoundingRect = parent.getBoundingClientRect();
+      let insideBoundingRect: Record<'top' | 'bottom' | 'left' | 'right', number>;
+      if (parent === 'screen') {
+        insideBoundingRect = {
+          top: 0,
+          bottom: window.innerHeight,
+          left: 0,
+          right: window.innerWidth,
+        };
+      } else {
+        insideBoundingRect = parent.getBoundingClientRect();
+      }
 
       const newAbsTop = nodeBoundingRect.top + Δy + boundY;
       if (newAbsTop < insideBoundingRect.top) {
@@ -216,7 +226,7 @@ export function movable(node: HTMLElement, parameters: MovableParameters = { ena
 
     // init position style
     const position = computedStyles.getPropertyValue('position');
-    if (position !== 'relative' && position !== 'absolute') {
+    if (position !== 'relative' && position !== 'absolute' && position !== 'fixed') {
       node.style.position = 'relative';
     }
 

diff --git a/packages/actions/movable/src/types/index.ts b/packages/actions/movable/src/types/index.ts
@@ -46,9 +46,9 @@ export type MovableLimitDelta = `${number}px` | `${number}%`;
  */
 export interface MovableLimit {
   /**
-   * Move node within this parent node
+   * Move node within this parent node or within screen
    */
-  parent?: HTMLElement;
+  parent?: HTMLElement | 'screen';
   /**
    * Bounding box limit in both axes
    */