fitbit-gestures - npm Package Compare versions

Comparing version 0.4.0 to 1.0.0

.eslintrc.json

@@ -20,3 +20,4 @@ {
         "@typescript-eslint/no-unused-vars": "error"
-    }
+    },
+    "ignorePatterns": ["*.spec.ts"]
 }

dist/GestureDetector.d.ts

@@ -1,4 +0,7 @@
-import { SwipeConfig } from './Swipe';
-import { DoubleTapConfig } from './DoubleTap';
+import { SwipeConfig } from './gestures/Swipe';
+import { DoubleTapConfig } from './gestures/DoubleTap';
 import { GestureCallback } from './interfaces/gesture-callback.interface';
+import { TapConfig } from './gestures/Tap';
+import { LongPressConfig } from './gestures/LongPress';
+import { SlideConfig } from './gestures/Slide';
 export declare class GestureDetector {
@@ -13,8 +16,8 @@ private readonly element;
     constructor(element: string | Element);
-    onTap(cb: GestureCallback): void;
+    onTap(cb: GestureCallback, cfg?: TapConfig): this;
     onDoubleTap(cb: GestureCallback, cfg?: DoubleTapConfig): this;
-    onLongPress(cb: GestureCallback): this;
+    onLongPress(cb: GestureCallback, cfg?: LongPressConfig): this;
     onSwipe(cb: GestureCallback, cfg?: SwipeConfig): this;
-    onSlide(cb: GestureCallback): this;
+    onSlide(cb: GestureCallback, cfg?: SlideConfig): this;
     private _addListener;
 }

dist/GestureDetector.js

@@ -1,7 +0,7 @@
-import { findElement } from './helpers/find-element.helper';
-import { SwipePrivate } from './SwipePrivate';
-import { DoubleTapPrivate } from './DoubleTapPrivate';
-import { SlidePrivate } from './SlidePrivate';
-import { LongPressPrivate } from './LongPressPrivate';
-import { TapPrivate } from './TapPrivate';
+import { FindElement } from './helpers/dom.helper';
+import { SwipePrivate } from './gestures/SwipePrivate';
+import { DoubleTapPrivate } from './gestures/DoubleTapPrivate';
+import { SlidePrivate } from './gestures/SlidePrivate';
+import { LongPressPrivate } from './gestures/LongPressPrivate';
+import { TapPrivate } from './gestures/TapPrivate';
 var GestureDetector = /** @class */ (function () {
@@ -14,8 +14,10 @@ function GestureDetector(element) {
         };
-        this.element = findElement(element);
+        this.element = FindElement(element);
         return this;
     }
-    GestureDetector.prototype.onTap = function (cb) {
-        this.tap = new TapPrivate(cb);
+    GestureDetector.prototype.onTap = function (cb, cfg) {
+        this.tap = new TapPrivate(cb, cfg);
+        this._addListener('up', this.tap.onMouseUp.bind(this.tap));
         this._addListener('down', this.tap.onMouseDown.bind(this.tap));
+        return this;
     };
@@ -27,4 +29,4 @@ GestureDetector.prototype.onDoubleTap = function (cb, cfg) {
     };
-    GestureDetector.prototype.onLongPress = function (cb) {
-        this.longPress = new LongPressPrivate(cb);
+    GestureDetector.prototype.onLongPress = function (cb, cfg) {
+        this.longPress = new LongPressPrivate(cb, cfg);
         this._addListener('up', this.longPress.onMouseUp.bind(this.longPress));
@@ -38,7 +40,8 @@ this._addListener('down', this.longPress.onMouseDown.bind(this.longPress));
         this._addListener('up', this.swipe.onMouseUp.bind(this.swipe));
+        this._addListener('down', this.swipe.onMouseDown.bind(this.slide));
         this._addListener('down', this.swipe.onMouseDown.bind(this.swipe));
         return this;
     };
-    GestureDetector.prototype.onSlide = function (cb) {
-        this.slide = new SlidePrivate(cb);
+    GestureDetector.prototype.onSlide = function (cb, cfg) {
+        this.slide = new SlidePrivate(cb, cfg);
         this._addListener('up', this.slide.onMouseUp.bind(this.slide));
@@ -49,11 +52,11 @@ this._addListener('down', this.slide.onMouseDown.bind(this.slide));
     };
-    GestureDetector.prototype._addListener = function (gesture, cb) {
+    GestureDetector.prototype._addListener = function (action, cb) {
         var _this = this;
-        if (!this.callbacks[gesture]) {
-            this.callbacks[gesture] = [];
-            this.element["onmouse" + gesture] = function (evt) {
-                _this.callbacks[gesture].forEach(function (fn) { return fn(evt); });
+        if (!this.callbacks[action]) {
+            this.callbacks[action] = [];
+            this.element["onmouse" + action] = function (evt) {
+                _this.callbacks[action].forEach(function (fn) { return fn(evt); });
             };
         }
-        this.callbacks[gesture].push(cb);
+        this.callbacks[action].push(cb);
     };
@@ -60,0 +63,0 @@ return GestureDetector;

dist/index.d.ts

@@ -6,10 +6,11 @@ export { GestureDirection } from './enums/gesture-direction.enum';
 export { Point } from './interfaces/point.interface';
-export { SwipeDetector } from './SwipeDetector';
-export { SwipeConfig } from './Swipe';
-export { DoubleTapDetector } from './DoubleTapDetector';
-export { DoubleTapConfig } from './DoubleTap';
-export { SlideDetector } from './SlideDetector';
-export { LongPressDetector } from './LongPressDetector';
-export { LongPressConfig } from './LongPress';
-export { TapDetector } from './TapDetector';
+export { SwipeConfig } from './gestures/Swipe';
+export { SwipeDetector } from './gestures/SwipeDetector';
+export { DoubleTapConfig } from './gestures/DoubleTap';
+export { DoubleTapDetector } from './gestures/DoubleTapDetector';
+export { SlideDetector } from './gestures/SlideDetector';
+export { LongPressConfig } from './gestures/LongPress';
+export { LongPressDetector } from './gestures/LongPressDetector';
+export { TapConfig } from './gestures/Tap';
+export { TapDetector } from './gestures/TapDetector';
 export { GestureDetector } from './GestureDetector';

dist/index.js

 export { GestureDirection } from './enums/gesture-direction.enum';
 export { GestureType } from './enums/gesture-type.enum';
-export { SwipeDetector } from './SwipeDetector';
-export { DoubleTapDetector } from './DoubleTapDetector';
-export { SlideDetector } from './SlideDetector';
-export { LongPressDetector } from './LongPressDetector';
-export { TapDetector } from './TapDetector';
+export { SwipeDetector } from './gestures/SwipeDetector';
+export { DoubleTapDetector } from './gestures/DoubleTapDetector';
+export { SlideDetector } from './gestures/SlideDetector';
+export { LongPressDetector } from './gestures/LongPressDetector';
+export { TapDetector } from './gestures/TapDetector';
 export { GestureDetector } from './GestureDetector';

dist/interfaces/gesture-event.interface.d.ts

 import { Point } from './point.interface';
 import { GestureDirection } from '../enums/gesture-direction.enum';
 import { GestureType } from '../enums/gesture-type.enum';
-import { GestureStatus } from '../enums/gesture-status.enum';
 export interface GestureEvent {
@@ -10,3 +9,3 @@ type: GestureType;
     dir?: GestureDirection;
-    status?: GestureStatus;
+    ended?: boolean;
 }

package.json

 {
   "name": "fitbit-gestures",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "Library to detect gestures on Fitbit devices",
@@ -8,4 +8,7 @@ "main": "./dist/index.js",
   "scripts": {
-    "build": "rm -r ./dist && tsc",
-    "lint": "eslint src/**/*.ts"
+    "build": "eslint src/**/*.ts && jest && rm -r ./dist && tsc",
+    "lint": "eslint src/**/*.ts",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --collectCoverage=true && open coverage/lcov-report/index.html"
   },
@@ -18,2 +21,3 @@ "author": "Valga Medios",
     "@fitbit/sdk-cli": "1.7.3",
+    "@types/jest": "^26.0.20",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
@@ -27,2 +31,4 @@ "@typescript-eslint/parser": "^4.12.0",
     "fitbit-sdk-types": "6.0.0",
+    "jest": "^26.6.3",
+    "ts-jest": "^26.4.4",
     "typescript": "^4.0.3"
@@ -29,0 +35,0 @@ },

README.md

@@ -11,4 +11,18 @@ # Gestures for Fitbit
 
-**Tap, Double Tap, Long Press, Swipe, Slide**
+| Gesture | Description | Examples
+| :---: | :--- |  ---  
+| ![Tap gesture][tapGif] | Regular "click" | Buttons
+| ![DoubleTap gesture][doubleTapGif] | Fast double "click" | Secondary actions
+| ![LongPress gesture][longPressGif] | Press without release | Secondary actions
+| ![Slide gesture][slideGif] | Press and move | Drag objects
+| ![Swipe gesture][swipeGif] | Press move and release | Navigation
 
+
+[tapGif]: ./demo/Tap.gif "Tap gesture"
+[doubleTapGif]: ./demo/DoubleTap.gif "DoubleTap gesture"
+[LongPressGif]: ./demo/LongPress.gif "LongPress gesture"
+[slideGif]: ./demo/Slide.gif "Slide gesture"
+[swipeGif]: ./demo/Swipe.gif "Swipe gesture"
+
+
 ## Usage
@@ -33,3 +47,3 @@
 
-For some gestures, you can customize the detectors. View Single Gesture configuration below.
+All detectors are customizable. View configuration below.
 
@@ -70,3 +84,3 @@ ```typescript
   dir?: GestureDirection,         //Swipe only
-  status?: GestureStatus          //Slide only
+  ended?: boolean                 //Slide only
 }
@@ -102,19 +116,13 @@ ```
   Left = 'Left',
-  Right = 'Right'
+  Right = 'Right',
+  UpRight = 'UpRight',
+  UpLeft = 'UpLeft',
+  DownRight = 'DownRight',
+  DownLeft = 'DownLeft',
 }
 ```
 
-##### Status (Slide only)
-
-```typescript
-enum GestureStatus {
-  Started = 'Started',
-  Moved = 'Moved',
-  Ended = 'Ended'
-}
-```
-
 ### Single gesture detectors
 
-If you only need one type of gesture on an element, it will be slightly faster to use a dedicated class for that. 
+If you only need one type of gesture on an element, it will be slightly faster to use a dedicated class. 
 
@@ -124,7 +132,9 @@ ```typescript
 //Optional configurations
-const swipeConfig: SwipeConfig = {
-  threshold: 100
-};
+const tapConfig: TapConfig = {
+  interval: 250,
+  threshold: 10
+}
 const doubleTapConfig: DoubleTapConfig = {
-  interval: 250
+  interval: 250,
+  threshold: 10
 }
@@ -135,7 +145,13 @@ const longPressConfig: LongPressConfig = {
 }
+const slideConfig: SlideConfig = {
+  threshold: 10
+}
+const swipeConfig: SwipeConfig = {
+  threshold: 100
+}
 
-const tap = new TapDetector('tapElement', onGesture.bind(this));
+const tap = new TapDetector('tapElement', onGesture.bind(this), tapConfig);
 const doubleTap = new DoubleTapDetector('doubleTapElement', onGesture.bind(this), doubleTapConfig);
 const longPress = new LongPressDetector('longPressElement', onGesture.bind(this));
-const slide = new SlideDetector('slideElement', onGesture.bind(this));
+const slide = new SlideDetector('slideElement', onGesture.bind(this), slideConfig);
 const swipe = new SwipeDetector('swipeElement', onGesture.bind(this), swipeConfig);
@@ -151,8 +167,8 @@
 ```
+##### Tap configuration
 
-##### Swipe configuration
-
 | Attribute | Description | Default |
 | --- | :--- | --- |
-| threshold | Minimum distance (in pixels) required to trigger the event | 100px
+| **interval** | Maximum time (in ms) between start touching and releasing | 250ms
+| **threshold** | Maximum allowed distance (in px) between start touching and releasing | 10px
 
@@ -163,3 +179,4 @@ ##### DoubleTap configuration
 | --- | :--- | --- |
-| **interval** | Time (in ms) required to trigger the event | 250ms
+| **interval** | Maximum time (in ms) between taps | 250ms
+| **threshold** | Maximum allowed distance (in px) between taps | 10px
 
@@ -172,1 +189,13 @@ ##### LongPress configuration
 | **threshold** | Max distance (in px) allowed | 10px
+
+##### Slide configuration
+
+| Attribute | Description | Default |
+| --- | :--- | --- |
+| **threshold** | Minimum distance (in pixels) to start recognizing | 10px
+
+##### Swipe configuration
+
+| Attribute | Description | Default |
+| --- | :--- | --- |
+| **threshold** | Minimum distance (in pixels) required to trigger the event | 100px

src/GestureDetector.ts

@@ -1,10 +0,13 @@
-import { SwipeConfig } from './Swipe'
-import { findElement } from './helpers/find-element.helper'
-import { SwipePrivate } from './SwipePrivate'
-import { DoubleTapPrivate } from './DoubleTapPrivate'
-import { DoubleTapConfig } from './DoubleTap'
-import { SlidePrivate } from './SlidePrivate'
-import { LongPressPrivate } from './LongPressPrivate'
+import { SwipeConfig } from './gestures/Swipe'
+import { FindElement } from './helpers/dom.helper'
+import { SwipePrivate } from './gestures/SwipePrivate'
+import { DoubleTapPrivate } from './gestures/DoubleTapPrivate'
+import { DoubleTapConfig } from './gestures/DoubleTap'
+import { SlidePrivate } from './gestures/SlidePrivate'
+import { LongPressPrivate } from './gestures/LongPressPrivate'
 import { GestureCallback } from './interfaces/gesture-callback.interface'
-import { TapPrivate } from './TapPrivate'
+import { TapPrivate } from './gestures/TapPrivate'
+import { TapConfig } from './gestures/Tap'
+import { LongPressConfig } from './gestures/LongPress'
+import { SlideConfig } from './gestures/Slide'
 
@@ -27,9 +30,11 @@ export class GestureDetector {
   ) {
-    this.element = findElement(element)
+    this.element = FindElement(element)
     return this
   }
 
-  onTap (cb: GestureCallback) {
-    this.tap = new TapPrivate(cb)
+  onTap (cb: GestureCallback, cfg?: TapConfig) {
+    this.tap = new TapPrivate(cb, cfg)
+    this._addListener('up', this.tap.onMouseUp.bind(this.tap))
     this._addListener('down', this.tap.onMouseDown.bind(this.tap))
+    return this
   }
@@ -43,4 +48,4 @@
 
-  onLongPress (cb: GestureCallback) {
-    this.longPress = new LongPressPrivate(cb)
+  onLongPress (cb: GestureCallback, cfg?: LongPressConfig) {
+    this.longPress = new LongPressPrivate(cb, cfg)
     this._addListener('up', this.longPress.onMouseUp.bind(this.longPress))
@@ -55,2 +60,3 @@ this._addListener('down', this.longPress.onMouseDown.bind(this.longPress))
     this._addListener('up', this.swipe.onMouseUp.bind(this.swipe))
+    this._addListener('down', this.swipe.onMouseDown.bind(this.slide))
     this._addListener('down', this.swipe.onMouseDown.bind(this.swipe))
@@ -60,4 +66,4 @@ return this
 
-  onSlide (cb: GestureCallback) {
-    this.slide = new SlidePrivate(cb)
+  onSlide (cb: GestureCallback, cfg?: SlideConfig) {
+    this.slide = new SlidePrivate(cb, cfg)
     this._addListener('up', this.slide.onMouseUp.bind(this.slide))
@@ -69,12 +75,12 @@ this._addListener('down', this.slide.onMouseDown.bind(this.slide))
 
-  private _addListener (gesture: 'up' | 'down' | 'move', cb: Function) {
-    if (!this.callbacks[gesture]) {
-      this.callbacks[gesture] = []
-      this.element[`onmouse${gesture}`] = (evt: MouseEvent) => {
-        this.callbacks[gesture].forEach((fn: Function) => fn(evt))
+  private _addListener (action: 'up' | 'down' | 'move', cb: Function) {
+    if (!this.callbacks[action]) {
+      this.callbacks[action] = []
+      this.element[`onmouse${action}`] = (evt: MouseEvent) => {
+        this.callbacks[action].forEach((fn: Function) => fn(evt))
       }
     }
 
-    this.callbacks[gesture].push(cb)
+    this.callbacks[action].push(cb)
   }
 }

src/index.ts

@@ -6,10 +6,11 @@ export { GestureDirection } from './enums/gesture-direction.enum'
 export { Point } from './interfaces/point.interface'
-export { SwipeDetector } from './SwipeDetector'
-export { SwipeConfig } from './Swipe'
-export { DoubleTapDetector } from './DoubleTapDetector'
-export { DoubleTapConfig } from './DoubleTap'
-export { SlideDetector } from './SlideDetector'
-export { LongPressDetector } from './LongPressDetector'
-export { LongPressConfig } from './LongPress'
-export { TapDetector } from './TapDetector'
+export { SwipeConfig } from './gestures/Swipe'
+export { SwipeDetector } from './gestures/SwipeDetector'
+export { DoubleTapConfig } from './gestures/DoubleTap'
+export { DoubleTapDetector } from './gestures/DoubleTapDetector'
+export { SlideDetector } from './gestures/SlideDetector'
+export { LongPressConfig } from './gestures/LongPress'
+export { LongPressDetector } from './gestures/LongPressDetector'
+export { TapConfig } from './gestures/Tap'
+export { TapDetector } from './gestures/TapDetector'
 export { GestureDetector } from './GestureDetector'

src/interfaces/gesture-event.interface.ts

 import { Point } from './point.interface'
 import { GestureDirection } from '../enums/gesture-direction.enum'
 import { GestureType } from '../enums/gesture-type.enum'
-import { GestureStatus } from '../enums/gesture-status.enum'
 
@@ -11,3 +10,3 @@ export interface GestureEvent {
   dir?: GestureDirection,
-  status?: GestureStatus
+  ended?: boolean
 }

tsconfig.json

@@ -8,3 +8,6 @@ {
     "declaration": true,
-    "removeComments": false
+    "removeComments": false,
+    "types": [
+      "jest"
+    ]
   },
@@ -21,3 +24,4 @@ "include": [
     "./node_modules/fitbit-sdk-types/types/companion/user-settings.d.ts",
+    "__tests__"
   ]
 }

New alerts

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

Fixed alerts

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

814646

increased by1791.05%

Number of package files

177

increased by129.87%

Lines of code

2858

increased by143.03%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

193

increased by17.68%

Worsened metrics

Dev dependency count

14

increased by27.27%

No dependency changes