svelte-gestures - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

CHANGELOG.md

 # Changelog
 
-## 1.2.1
+## 1.3.0
 
+Added `press` gesture.
+Gestures `press`, `tap`, `swipe`, `pan` now also emit `target:EventTarget` in the event detail.
+
+## 1.2.2
+
 Fixed TS types location
@@ -6,0 +11,0 @@

dist/index.esm.js

@@ -95,5 +95,7 @@ const DEFAULT_DELAY = 300;
   let startTime;
+  let target;
 
-  function onDown() {
+  function onDown(activeEvents, event) {
     startTime = Date.now();
+    target = event.target;
   }
@@ -111,3 +113,4 @@
             x,
-            y
+            y,
+            target
           }
@@ -166,2 +169,34 @@ }));
 
+function press(node, parameters = {
+  timeframe: DEFAULT_DELAY
+}) {
+  const gestureName = 'press';
+  let startTime;
+  let clientX;
+  let clientY;
+
+  function onUp(activeEvents, event) {
+    if (Math.abs(event.clientX - clientX) < 4 && Math.abs(event.clientY - clientY) < 4 && Date.now() - startTime > parameters.timeframe) {
+      const rect = node.getBoundingClientRect();
+      const x = Math.round(event.clientX - rect.left);
+      const y = Math.round(event.clientY - rect.top);
+      node.dispatchEvent(new CustomEvent(gestureName, {
+        detail: {
+          x,
+          y,
+          target: event.target
+        }
+      }));
+    }
+  }
+
+  function onDown(activeEvents, event) {
+    clientX = event.clientX;
+    clientY = event.clientY;
+    startTime = Date.now();
+  }
+
+  return setPointerControls(gestureName, node, null, onDown, onUp);
+}
+
 function getPointersAngleDeg(activeEvents) {
@@ -254,2 +289,3 @@ // instead of hell lot of conditions we use an object mapping
   let clientY;
+  let target;
 
@@ -260,2 +296,6 @@ function onDown(activeEvents, event) {
     startTime = Date.now();
+
+    if (activeEvents.length === 1) {
+      target = event.target;
+    }
   }
@@ -282,3 +322,4 @@
           detail: {
-            direction
+            direction,
+            target
           }
@@ -309,3 +350,4 @@ }));
           x,
-          y
+          y,
+          target: event.target
         }
@@ -325,2 +367,2 @@ }));
 
-export { DEFAULT_DELAY, DEFAULT_MIN_SWIPE_DISTANCE, DEFAULT_TOUCH_ACTION, getCenterOfTwoPoints, pan, pinch, rotate, setPointerControls, swipe, tap };
+export { DEFAULT_DELAY, DEFAULT_MIN_SWIPE_DISTANCE, DEFAULT_TOUCH_ACTION, getCenterOfTwoPoints, pan, pinch, press, rotate, setPointerControls, swipe, tap };

dist/index.js

@@ -99,5 +99,7 @@ 'use strict';
   let startTime;
+  let target;
 
-  function onDown() {
+  function onDown(activeEvents, event) {
     startTime = Date.now();
+    target = event.target;
   }
@@ -115,3 +117,4 @@
             x,
-            y
+            y,
+            target
           }
@@ -170,2 +173,34 @@ }));
 
+function press(node, parameters = {
+  timeframe: DEFAULT_DELAY
+}) {
+  const gestureName = 'press';
+  let startTime;
+  let clientX;
+  let clientY;
+
+  function onUp(activeEvents, event) {
+    if (Math.abs(event.clientX - clientX) < 4 && Math.abs(event.clientY - clientY) < 4 && Date.now() - startTime > parameters.timeframe) {
+      const rect = node.getBoundingClientRect();
+      const x = Math.round(event.clientX - rect.left);
+      const y = Math.round(event.clientY - rect.top);
+      node.dispatchEvent(new CustomEvent(gestureName, {
+        detail: {
+          x,
+          y,
+          target: event.target
+        }
+      }));
+    }
+  }
+
+  function onDown(activeEvents, event) {
+    clientX = event.clientX;
+    clientY = event.clientY;
+    startTime = Date.now();
+  }
+
+  return setPointerControls(gestureName, node, null, onDown, onUp);
+}
+
 function getPointersAngleDeg(activeEvents) {
@@ -258,2 +293,3 @@ // instead of hell lot of conditions we use an object mapping
   let clientY;
+  let target;
 
@@ -264,2 +300,6 @@ function onDown(activeEvents, event) {
     startTime = Date.now();
+
+    if (activeEvents.length === 1) {
+      target = event.target;
+    }
   }
@@ -286,3 +326,4 @@
           detail: {
-            direction
+            direction,
+            target
           }
@@ -313,3 +354,4 @@ }));
           x,
-          y
+          y,
+          target: event.target
         }
@@ -335,2 +377,3 @@ }));
 exports.pinch = pinch;
+exports.press = press;
 exports.rotate = rotate;
@@ -337,0 +380,0 @@ exports.setPointerControls = setPointerControls;

dist/types/index.d.ts

 export * from './pan';
 export * from './pinch';
+export * from './press';
 export * from './rotate';
@@ -4,0 +5,0 @@ export * from './shared';

package.json

@@ -6,3 +6,3 @@ {
   "license": "MIT",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "main": "dist/index.js",
@@ -9,0 +9,0 @@ "module": "dist/index.esm.js",

README.md

@@ -19,3 +19,3 @@ # svelte-gestures
 
-Pan action fires `pan` event: `event.detail` has `x` and `y` properties (x,y stand for position withing the `element` on which the action is used).
+Pan action fires `pan` event: `event.detail` has `x`, `y` and `target` properties (x,y stand for position withing the `element` on which the action is used). `target` is an EventTarget (HTMLElement) of the pan. The target is recorded when pan starts.
 
@@ -31,2 +31,3 @@ It is triggered on pointer (mouse, touch, etc.) move. But not earlier than `delay` parameter. The `delay` parameter is optional. If used it overwrites 300ms default value. It prevents triggering of tap or swipe gestures when combined on single element.
   let y;
+  let target;
 
@@ -36,2 +37,3 @@ function handler(event) {
     y = event.detail.y;
+    target = event.detail.target;
   }
@@ -117,3 +119,4 @@ </script>
 
-Swipe action fires `swipe` event: `event.detail.direction`. It accepts props as parameter: `{ timeframe: number; minSwipeDistance: number; touchAction: string }` with default values 300ms, 60px and `none`.
+Swipe action fires `swipe` event: `event.detail`. With properties `direction` and target. `target` is an EventTarget (HTMLElement) of the swipe action. The target is recorded when swipe starts.
+It accepts props as parameter: `{ timeframe: number; minSwipeDistance: number; touchAction: string }` with default values 300ms, 60px and `none`.
 Swipe is fired if preset distance in proper direction is done in preset time.
@@ -131,5 +134,7 @@ You can use the [touchAction](https://developer.mozilla.org/en/docs/Web/CSS/touch-action) parameter to control the default behaviour of the browser.
   let direction;
+  let target;
 
   function handler(event) {
     direction = event.detail.direction;
+    target = event.detail.target;
   }
@@ -145,3 +150,3 @@ </script>
 
-Tap action fires `tap` event: `event.detail` has `x` and `y` properties (x,y stand for position withing the `element` on which the action is used).
+Tap action fires `tap` event: `event.detail` has `x`, `y` and `target` properties (x,y stand for position withing the `element` on which the action is used). `target` is an EventTarget (HTMLElement) of the tap.
 
@@ -158,2 +163,3 @@ Tap action is fired only when the click/touch is finished within the give `timeframe`, the parameter is optional and overwrites defalut value of 300ms.
   let y;
+  let target;
 
@@ -163,2 +169,3 @@ function handler(event) {
     y = event.detail.y;
+    target = event.detail.target;
   }
@@ -172,2 +179,29 @@ </script>
 
+## Press
+
+Press action fires `press` event: `event.detail` has `x`, `y`, `target` properties (x,y stand for position withing the `element` on which the action is used). `target` is an EventTarget (HTMLElement) of the press.
+
+Press action is fired only when the click/touch is finished after the give `timeframe`, the parameter is optional and overwrites defalut value of 300ms.
+
+[> repl Press demo](https://svelte.dev/repl/8bef691ad59f4b2285d2b8a6df5d178a?version=3.38.2)
+
+```html
+<script>
+  import { press } from 'svelte-gestures';
+  let x;
+  let y;
+  let target;
+
+  function handler(event) {
+    x = event.detail.x;
+    y = event.detail.y;
+    target = event.detail.target
+  }
+</script>
+
+<div use:press={{ timeframe: 300 }} on:press={handler} style="width:500px;height:500px;border:1px solid black;">
+  press: {x} {y}
+</div>
+```
+
 # Custom gestures
@@ -174,0 +208,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37623

increased by11.94%

Number of package files

22

increased by10%

Lines of code

674

increased by13.66%

Number of lines in readme file

296

increased by12.98%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes