New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

fitbit-gestures

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fitbit-gestures - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

.eslintrc.json
dist/enums/gesture-direction.enum.d.ts
dist/enums/gesture-direction.enum.js
dist/enums/gesture-status.enum.d.ts
dist/enums/gesture-status.enum.js
dist/enums/gesture-type.enum.d.ts
dist/enums/gesture-type.enum.js
dist/interfaces/gesture-callback.interface.d.ts
dist/interfaces/gesture-callback.interface.js
dist/interfaces/gesture-event.interface.d.ts
dist/interfaces/gesture-event.interface.js
dist/Tap.d.ts
dist/Tap.js
dist/TapDetector.d.ts
dist/TapDetector.js
dist/TapPrivate.d.ts
dist/TapPrivate.js
src/enums/gesture-direction.enum.ts
src/enums/gesture-status.enum.ts
src/enums/gesture-type.enum.ts
src/interfaces/gesture-callback.interface.ts
src/interfaces/gesture-event.interface.ts
src/Tap.ts
src/TapDetector.ts
src/TapPrivate.ts

10

dist/DoubleTap.d.ts

@@ -0,11 +1,11 @@

import { GestureCallback } from './interfaces/gesture-callback.interface';
export interface DoubleTapConfig {
interval: number;
}
export declare type DoubleTapCallback = () => any;
export declare class DoubleTap {
private readonly tapCallback;
export declare abstract class DoubleTap {
private readonly cb;
private readonly interval;
private lastTap;
protected constructor(tapCallback: DoubleTapCallback, cfg?: DoubleTapConfig);
protected _onMouseUp(): void;
constructor(cb: GestureCallback, cfg?: DoubleTapConfig);
protected _onMouseUp(evt: MouseEvent): void;
}

15

dist/DoubleTap.js

@@ -0,11 +1,18 @@

import { GestureType } from './enums/gesture-type.enum';
var DoubleTap = /** @class */ (function () {
function DoubleTap(tapCallback, cfg) {
this.tapCallback = tapCallback;
function DoubleTap(cb, cfg) {
this.cb = cb;
this.lastTap = null;
this.interval = (cfg === null || cfg === void 0 ? void 0 : cfg.interval) || 250;
}
DoubleTap.prototype._onMouseUp = function () {
DoubleTap.prototype._onMouseUp = function (evt) {
var now = Date.now();
if (now && now - this.lastTap < 250) {
this.tapCallback();
this.cb({
type: GestureType.DoubleTap,
point: {
x: evt.screenX,
y: evt.screenY
}
});
}

@@ -12,0 +19,0 @@ this.lastTap = now;

5

dist/DoubleTapDetector.d.ts

@@ -1,5 +0,6 @@

import { DoubleTap, DoubleTapCallback, DoubleTapConfig } from "./DoubleTap";
import { DoubleTap, DoubleTapConfig } from './DoubleTap';
import { GestureCallback } from './interfaces/gesture-callback.interface';
export declare class DoubleTapDetector extends DoubleTap {
private readonly element;
constructor(element: string | Element, tapCallback: DoubleTapCallback, cfg?: DoubleTapConfig);
constructor(element: string | Element, cb: GestureCallback, cfg?: DoubleTapConfig);
}

8

dist/DoubleTapDetector.js
import { __extends } from "tslib";
import { findElement } from "./helpers/find-element.helper";
import { DoubleTap } from "./DoubleTap";
import { findElement } from './helpers/find-element.helper';
import { DoubleTap } from './DoubleTap';
var DoubleTapDetector = /** @class */ (function (_super) {
__extends(DoubleTapDetector, _super);
function DoubleTapDetector(element, tapCallback, cfg) {
var _this = _super.call(this, tapCallback, cfg) || this;
function DoubleTapDetector(element, cb, cfg) {
var _this = _super.call(this, cb, cfg) || this;
_this.element = findElement(element);

@@ -9,0 +9,0 @@ _this.element.onmouseup = _this._onMouseUp.bind(_this);

5

dist/DoubleTapPrivate.d.ts

@@ -1,5 +0,4 @@

import { DoubleTap, DoubleTapCallback, DoubleTapConfig } from "./DoubleTap";
import { DoubleTap } from './DoubleTap';
export declare class DoubleTapPrivate extends DoubleTap {
constructor(callback: DoubleTapCallback, cfg?: DoubleTapConfig);
onMouseUp(): void;
onMouseUp(evt: MouseEvent): void;
}

10

dist/DoubleTapPrivate.js
import { __extends } from "tslib";
import { DoubleTap } from "./DoubleTap";
import { DoubleTap } from './DoubleTap';
var DoubleTapPrivate = /** @class */ (function (_super) {
__extends(DoubleTapPrivate, _super);
function DoubleTapPrivate(callback, cfg) {
return _super.call(this, callback, cfg) || this;
function DoubleTapPrivate() {
return _super !== null && _super.apply(this, arguments) || this;
}
DoubleTapPrivate.prototype.onMouseUp = function () {
_super.prototype._onMouseUp.call(this);
DoubleTapPrivate.prototype.onMouseUp = function (evt) {
_super.prototype._onMouseUp.call(this, evt);
};

@@ -11,0 +11,0 @@ return DoubleTapPrivate;

21

dist/GestureDetector.d.ts

@@ -1,7 +0,4 @@

import { SwipeCallback, SwipeConfig } from "./Swipe";
import { DoubleTapCallback, DoubleTapConfig } from "./DoubleTap";
import { SlideCallback } from "./Slide";
import { LongPressCallback } from "./LongPress";
export interface GestureConfig {
}
import { SwipeConfig } from './Swipe';
import { DoubleTapConfig } from './DoubleTap';
import { GestureCallback } from './interfaces/gesture-callback.interface';
export declare class GestureDetector {

@@ -13,9 +10,11 @@ private readonly element;

private longPress;
private tap;
private callbacks;
constructor(element: string | Element, cfg?: GestureConfig);
onSwipe(cb: SwipeCallback, cfg?: SwipeConfig): this;
onDoubleTap(cb: DoubleTapCallback, cfg?: DoubleTapConfig): this;
onSlide(cb: SlideCallback): this;
onLongPress(cb: LongPressCallback): this;
constructor(element: string | Element);
onTap(cb: GestureCallback): void;
onDoubleTap(cb: GestureCallback, cfg?: DoubleTapConfig): this;
onLongPress(cb: GestureCallback): this;
onSwipe(cb: GestureCallback, cfg?: SwipeConfig): this;
onSlide(cb: GestureCallback): this;
private _addListener;
}

41

dist/GestureDetector.js

@@ -1,8 +0,9 @@

import { findElement } from "./helpers/find-element.helper";
import { SwipePrivate } from "./SwipePrivate";
import { DoubleTapPrivate } from "./DoubleTapPrivate";
import { SlidePrivate } from "./SlidePrivate";
import { LongPressPrivate } from "./LongPressPrivate";
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';
var GestureDetector = /** @class */ (function () {
function GestureDetector(element, cfg) {
function GestureDetector(element) {
this.callbacks = {

@@ -16,2 +17,18 @@ up: null,

}
GestureDetector.prototype.onTap = function (cb) {
this.tap = new TapPrivate(cb);
this._addListener('down', this.tap.onMouseDown.bind(this.tap));
};
GestureDetector.prototype.onDoubleTap = function (cb, cfg) {
this.doubleTap = new DoubleTapPrivate(cb, cfg);
this._addListener('up', this.doubleTap.onMouseUp.bind(this.doubleTap));
return this;
};
GestureDetector.prototype.onLongPress = function (cb) {
this.longPress = new LongPressPrivate(cb);
this._addListener('up', this.longPress.onMouseUp.bind(this.longPress));
this._addListener('down', this.longPress.onMouseDown.bind(this.longPress));
this._addListener('move', this.longPress.onMouseMove.bind(this.longPress));
return this;
};
GestureDetector.prototype.onSwipe = function (cb, cfg) {

@@ -23,7 +40,2 @@ this.swipe = new SwipePrivate(cb, cfg);

};
GestureDetector.prototype.onDoubleTap = function (cb, cfg) {
this.doubleTap = new DoubleTapPrivate(cb, cfg);
this._addListener('up', this.doubleTap.onMouseUp.bind(this.doubleTap));
return this;
};
GestureDetector.prototype.onSlide = function (cb) {

@@ -36,9 +48,2 @@ this.slide = new SlidePrivate(cb);

};
GestureDetector.prototype.onLongPress = function (cb) {
this.longPress = new LongPressPrivate(cb);
this._addListener('up', this.longPress.onMouseUp.bind(this.slide));
this._addListener('down', this.longPress.onMouseDown.bind(this.slide));
this._addListener('move', this.longPress.onMouseMove.bind(this.slide));
return this;
};
GestureDetector.prototype._addListener = function (gesture, cb) {

@@ -45,0 +50,0 @@ var _this = this;

2

dist/helpers/find-element.helper.js

@@ -1,2 +0,2 @@

import document from "document";
import document from 'document';
export function findElement(element) {

@@ -3,0 +3,0 @@ var el;

23

dist/index.d.ts

@@ -1,9 +0,14 @@

export { SwipeDetector } from "./SwipeDetector";
export { SwipeConfig, SWIPE_DIR, SwipeCallback } from "./Swipe";
export { DoubleTapDetector } from "./DoubleTapDetector";
export { DoubleTapConfig } from "./DoubleTap";
export { SlideDetector } from "./SlideDetector";
export { SLIDE_EVENT, SlideData, MovementData, SlideCallback } from "./Slide";
export { LongPressDetector } from "./LongPressDetector";
export { LongPressConfig, LongPressCallback } from "./LongPress";
export { GestureDetector, GestureConfig } from "./GestureDetector";
export { GestureDirection } from './enums/gesture-direction.enum';
export { GestureType } from './enums/gesture-type.enum';
export { GestureCallback } from './interfaces/gesture-callback.interface';
export { GestureEvent } from './interfaces/gesture-event.interface';
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 { GestureDetector } from './GestureDetector';

15

dist/index.js

@@ -1,7 +0,8 @@

export { SwipeDetector } from "./SwipeDetector";
export { SWIPE_DIR } from "./Swipe";
export { DoubleTapDetector } from "./DoubleTapDetector";
export { SlideDetector } from "./SlideDetector";
export { SLIDE_EVENT } from "./Slide";
export { LongPressDetector } from "./LongPressDetector";
export { GestureDetector } from "./GestureDetector";
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 { GestureDetector } from './GestureDetector';

10

dist/LongPress.d.ts

@@ -0,1 +1,2 @@

import { GestureCallback } from './interfaces/gesture-callback.interface';
export interface LongPressConfig {

@@ -5,11 +6,10 @@ time?: number;

}
export declare type LongPressCallback = () => any;
export declare class LongPress {
private readonly longPressCallback;
export declare abstract class LongPress {
private readonly cb;
private readonly minTime;
private readonly threshold;
private startPos;
private timeout;
private executed;
private timeout;
protected constructor(longPressCallback: LongPressCallback, cfg?: LongPressConfig);
constructor(cb: GestureCallback, cfg?: LongPressConfig);
protected _onMouseDown(evt: MouseEvent): void;

@@ -16,0 +16,0 @@ protected _onMouseMove(evt: MouseEvent): void;

20

dist/LongPress.js

@@ -0,6 +1,7 @@

import { GestureType } from './enums/gesture-type.enum';
var LongPress = /** @class */ (function () {
function LongPress(longPressCallback, cfg) {
this.longPressCallback = longPressCallback;
function LongPress(cb, cfg) {
this.cb = cb;
this.timeout = null;
this.executed = false;
this.timeout = null;
this.minTime = (cfg === null || cfg === void 0 ? void 0 : cfg.time) || 300;

@@ -18,3 +19,4 @@ this.threshold = (cfg === null || cfg === void 0 ? void 0 : cfg.time) || 10;

Math.abs(evt.screenY - this.startPos.y) > this.threshold) {
this._init(evt);
this._reset();
this.executed = true;
}

@@ -28,3 +30,6 @@ };

this.timeout = setTimeout(this._execute.bind(this), this.minTime);
this.startPos = { x: evt.screenX, y: evt.screenY };
this.startPos = {
x: evt.screenX,
y: evt.screenY
};
};

@@ -40,3 +45,6 @@ LongPress.prototype._reset = function () {

this.executed = true;
this.longPressCallback();
this.cb({
type: GestureType.LongPress,
point: this.startPos
});
};

@@ -43,0 +51,0 @@ return LongPress;

5

dist/LongPressDetector.d.ts

@@ -1,5 +0,6 @@

import { LongPress, LongPressCallback, LongPressConfig } from "./LongPress";
import { LongPress, LongPressConfig } from './LongPress';
import { GestureCallback } from './interfaces/gesture-callback.interface';
export declare class LongPressDetector extends LongPress {
private readonly element;
constructor(element: string | Element, longPressCallback: LongPressCallback, cfg?: LongPressConfig);
constructor(element: string | Element, cb: GestureCallback, cfg?: LongPressConfig);
}

8

dist/LongPressDetector.js
import { __extends } from "tslib";
import { LongPress } from "./LongPress";
import { findElement } from "./helpers/find-element.helper";
import { LongPress } from './LongPress';
import { findElement } from './helpers/find-element.helper';
var LongPressDetector = /** @class */ (function (_super) {
__extends(LongPressDetector, _super);
function LongPressDetector(element, longPressCallback, cfg) {
var _this = _super.call(this, longPressCallback, cfg) || this;
function LongPressDetector(element, cb, cfg) {
var _this = _super.call(this, cb, cfg) || this;
_this.element = findElement(element);

@@ -9,0 +9,0 @@ _this.element.onmousedown = _this._onMouseDown.bind(_this);

3

dist/LongPressPrivate.d.ts

@@ -1,4 +0,3 @@

import { LongPress, LongPressCallback, LongPressConfig } from "./LongPress";
import { LongPress } from './LongPress';
export declare class LongPressPrivate extends LongPress {
constructor(callback: LongPressCallback, cfg?: LongPressConfig);
onMouseDown(evt: MouseEvent): void;

@@ -5,0 +4,0 @@ onMouseUp(): void;

6

dist/LongPressPrivate.js
import { __extends } from "tslib";
import { LongPress } from "./LongPress";
import { LongPress } from './LongPress';
var LongPressPrivate = /** @class */ (function (_super) {
__extends(LongPressPrivate, _super);
function LongPressPrivate(callback, cfg) {
return _super.call(this, callback, cfg) || this;
function LongPressPrivate() {
return _super !== null && _super.apply(this, arguments) || this;
}

@@ -8,0 +8,0 @@ LongPressPrivate.prototype.onMouseDown = function (evt) {

22

dist/Slide.d.ts

@@ -1,18 +0,4 @@

export declare enum SLIDE_EVENT {
STARTED = "STARTED",
MOVED = "MOVED",
ENDED = "ENDED"
}
export interface SlideData {
type: SLIDE_EVENT;
x: MovementData;
y: MovementData;
}
export interface MovementData {
from: number;
to: number;
}
export declare type SlideCallback = (data: SlideData) => any;
export declare class Slide {
private readonly slideCallback;
import { GestureCallback } from './interfaces/gesture-callback.interface';
export declare abstract class Slide {
private readonly cb;
private startX;

@@ -22,3 +8,3 @@ private lastX;

private lastY;
protected constructor(slideCallback: SlideCallback);
constructor(cb: GestureCallback);
protected _onMouseDown(evt: MouseEvent): void;

@@ -25,0 +11,0 @@ protected _onMouseUp(evt: MouseEvent): void;

38

dist/Slide.js

@@ -1,10 +0,7 @@

export var SLIDE_EVENT;
(function (SLIDE_EVENT) {
SLIDE_EVENT["STARTED"] = "STARTED";
SLIDE_EVENT["MOVED"] = "MOVED";
SLIDE_EVENT["ENDED"] = "ENDED";
})(SLIDE_EVENT || (SLIDE_EVENT = {}));
import { GestureType } from './enums/gesture-type.enum';
import { GestureStatus } from './enums/gesture-status.enum';
var Slide = /** @class */ (function () {
function Slide(slideCallback) {
this.slideCallback = slideCallback;
// eslint-disable-next-line no-useless-constructor
function Slide(cb) {
this.cb = cb;
this.startX = null;

@@ -20,6 +17,6 @@ this.lastX = null;

this.lastY = evt.screenY;
return this._generateEvent(SLIDE_EVENT.STARTED, evt);
return this._generateEvent(GestureStatus.Started, evt);
};
Slide.prototype._onMouseUp = function (evt) {
var data = this._generateEvent(SLIDE_EVENT.ENDED, evt);
var data = this._generateEvent(GestureStatus.Ended, evt);
this.startX = null;

@@ -37,17 +34,18 @@ this.startY = null;

this.lastY = evt.screenY;
return this._generateEvent(SLIDE_EVENT.MOVED, evt);
return this._generateEvent(GestureStatus.Moved, evt);
};
Slide.prototype._generateEvent = function (type, evt) {
Slide.prototype._generateEvent = function (status, evt) {
if (this.startX === null) {
return;
}
this.slideCallback({
type: type,
x: {
from: this.startX,
to: evt.screenX
this.cb({
type: GestureType.Slide,
status: status,
point: {
x: evt.screenX,
y: evt.screenY
},
y: {
from: this.startY,
to: evt.screenY
from: {
x: this.startX,
y: this.startY
}

@@ -54,0 +52,0 @@ });

5

dist/SlideDetector.d.ts

@@ -1,5 +0,6 @@

import { Slide, SlideCallback } from "./Slide";
import { Slide } from './Slide';
import { GestureCallback } from './interfaces/gesture-callback.interface';
export declare class SlideDetector extends Slide {
private readonly element;
constructor(element: string | Element, slideCallback: SlideCallback);
constructor(element: string | Element, cb: GestureCallback);
}

8

dist/SlideDetector.js
import { __extends } from "tslib";
import { findElement } from "./helpers/find-element.helper";
import { Slide } from "./Slide";
import { findElement } from './helpers/find-element.helper';
import { Slide } from './Slide';
var SlideDetector = /** @class */ (function (_super) {
__extends(SlideDetector, _super);
function SlideDetector(element, slideCallback) {
var _this = _super.call(this, slideCallback) || this;
function SlideDetector(element, cb) {
var _this = _super.call(this, cb) || this;
_this.element = findElement(element);

@@ -9,0 +9,0 @@ _this.element.onmousedown = _this._onMouseDown.bind(_this);

3

dist/SlidePrivate.d.ts

@@ -1,4 +0,3 @@

import { Slide, SlideCallback } from "./Slide";
import { Slide } from './Slide';
export declare class SlidePrivate extends Slide {
constructor(callback: SlideCallback);
onMouseDown(evt: MouseEvent): void;

@@ -5,0 +4,0 @@ onMouseUp(evt: MouseEvent): void;

6

dist/SlidePrivate.js
import { __extends } from "tslib";
import { Slide } from "./Slide";
import { Slide } from './Slide';
var SlidePrivate = /** @class */ (function (_super) {
__extends(SlidePrivate, _super);
function SlidePrivate(callback) {
return _super.call(this, callback) || this;
function SlidePrivate() {
return _super !== null && _super.apply(this, arguments) || this;
}

@@ -8,0 +8,0 @@ SlidePrivate.prototype.onMouseDown = function (evt) {

15

dist/Swipe.d.ts

@@ -0,19 +1,14 @@

import { GestureCallback } from './interfaces/gesture-callback.interface';
export interface SwipeConfig {
threshold: number;
}
export declare enum SWIPE_DIR {
UP = 0,
DOWN = 1,
LEFT = 2,
RIGHT = 3
}
export declare type SwipeCallback = (dir: SWIPE_DIR) => any;
export declare class Swipe {
private readonly swipeCallback;
export declare abstract class Swipe {
private readonly cb;
private readonly threshold;
private initY;
private initX;
protected constructor(swipeCallback: SwipeCallback, cfg?: SwipeConfig);
constructor(cb: GestureCallback, cfg?: SwipeConfig);
protected _onMouseDown(evt: MouseEvent): void;
protected _onMouseUp(evt: MouseEvent): void;
private getDirection;
}

45

dist/Swipe.js

@@ -1,11 +0,6 @@

export var SWIPE_DIR;
(function (SWIPE_DIR) {
SWIPE_DIR[SWIPE_DIR["UP"] = 0] = "UP";
SWIPE_DIR[SWIPE_DIR["DOWN"] = 1] = "DOWN";
SWIPE_DIR[SWIPE_DIR["LEFT"] = 2] = "LEFT";
SWIPE_DIR[SWIPE_DIR["RIGHT"] = 3] = "RIGHT";
})(SWIPE_DIR || (SWIPE_DIR = {}));
import { GestureDirection } from './enums/gesture-direction.enum';
import { GestureType } from './enums/gesture-type.enum';
var Swipe = /** @class */ (function () {
function Swipe(swipeCallback, cfg) {
this.swipeCallback = swipeCallback;
function Swipe(cb, cfg) {
this.cb = cb;
this.initY = 0;

@@ -20,15 +15,35 @@ this.initX = 0;

Swipe.prototype._onMouseUp = function (evt) {
var x = evt.screenX - this.initX;
var y = evt.screenY - this.initY;
if (!this.initX) {
return;
}
var dir = this.getDirection(evt.screenX - this.initX, evt.screenY - this.initY);
if (dir) {
this.cb({
type: GestureType.Swipe,
dir: dir,
point: {
x: evt.screenX,
y: evt.screenY
},
from: {
x: this.initX,
y: this.initY
}
});
}
this.initX = null;
this.initY = null;
};
Swipe.prototype.getDirection = function (x, y) {
if (y < -this.threshold) {
this.swipeCallback(SWIPE_DIR.UP);
return GestureDirection.Up;
}
else if (y > this.threshold) {
this.swipeCallback(SWIPE_DIR.DOWN);
return GestureDirection.Down;
}
else if (x < -this.threshold) {
this.swipeCallback(SWIPE_DIR.LEFT);
return GestureDirection.Left;
}
else if (x > this.threshold) {
this.swipeCallback(SWIPE_DIR.RIGHT);
return GestureDirection.Right;
}

@@ -35,0 +50,0 @@ };

5

dist/SwipeDetector.d.ts

@@ -1,5 +0,6 @@

import { Swipe, SwipeCallback, SwipeConfig } from "./Swipe";
import { Swipe, SwipeConfig } from './Swipe';
import { GestureCallback } from './interfaces/gesture-callback.interface';
export declare class SwipeDetector extends Swipe {
private readonly element;
constructor(element: string | Element, swipeCallback: SwipeCallback, cfg?: SwipeConfig);
constructor(element: string | Element, cb: GestureCallback, cfg?: SwipeConfig);
}

8

dist/SwipeDetector.js
import { __extends } from "tslib";
import { findElement } from "./helpers/find-element.helper";
import { Swipe } from "./Swipe";
import { findElement } from './helpers/find-element.helper';
import { Swipe } from './Swipe';
var SwipeDetector = /** @class */ (function (_super) {
__extends(SwipeDetector, _super);
function SwipeDetector(element, swipeCallback, cfg) {
var _this = _super.call(this, swipeCallback, cfg) || this;
function SwipeDetector(element, cb, cfg) {
var _this = _super.call(this, cb, cfg) || this;
_this.element = findElement(element);

@@ -9,0 +9,0 @@ _this.element.onmousedown = _this._onMouseDown.bind(_this);

3

dist/SwipePrivate.d.ts

@@ -1,6 +0,5 @@

import { Swipe, SwipeCallback, SwipeConfig } from "./Swipe";
import { Swipe } from './Swipe';
export declare class SwipePrivate extends Swipe {
constructor(callback: SwipeCallback, cfg?: SwipeConfig);
onMouseDown(evt: MouseEvent): void;
onMouseUp(evt: MouseEvent): void;
}

6

dist/SwipePrivate.js
import { __extends } from "tslib";
import { Swipe } from "./Swipe";
import { Swipe } from './Swipe';
var SwipePrivate = /** @class */ (function (_super) {
__extends(SwipePrivate, _super);
function SwipePrivate(callback, cfg) {
return _super.call(this, callback, cfg) || this;
function SwipePrivate() {
return _super !== null && _super.apply(this, arguments) || this;
}

@@ -8,0 +8,0 @@ SwipePrivate.prototype.onMouseDown = function (evt) {

19

package.json
{
"name": "fitbit-gestures",
"version": "0.3.0",
"version": "0.4.0",
"description": "Library to detect gestures on Fitbit devices",

@@ -8,3 +8,4 @@ "main": "./dist/index.js",

"scripts": {
"build": "rm -r ./dist && tsc"
"build": "rm -r ./dist && tsc",
"lint": "eslint src/**/*.ts"
},

@@ -17,2 +18,9 @@ "author": "Valga Medios",

"@fitbit/sdk-cli": "1.7.3",
"@typescript-eslint/eslint-plugin": "^4.12.0",
"@typescript-eslint/parser": "^4.12.0",
"eslint": "^7.17.0",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"fitbit-sdk-types": "6.0.0",

@@ -25,3 +33,8 @@ "typescript": "^4.0.3"

},
"keywords": ["fitbitdev", "fitbit", "swipe", "typescript"],
"keywords": [
"fitbitdev",
"fitbit",
"swipe",
"typescript"
],
"bugs": {

@@ -28,0 +41,0 @@ "url": "https://github.com/davidvalgamedios/fitbit-gestures/issues"

157

README.md
# Gestures for Fitbit
This library allows you to detect different gestures in Fitbit apps. Tested only on Fitbit SDK 5.0
This library allows you to detect different gestures in Fitbit devices. Tested only on Fitbit SDK 5.0

@@ -9,5 +9,5 @@ ## Installation

## Gestures
## Available gestures
**Swipe, Double Tap, Slide** (More gestures soon)
**Tap, Double Tap, Long Press, Swipe, Slide**

@@ -18,3 +18,3 @@ ## Usage

The selected element should have "pointer-events" set to "visible". Will work only on elements which can have this attribute like [RectElements](https://dev.fitbit.com/build/guides/user-interface/svg/#rectangles).
The selected element should have "pointer-events" set to "visible". Will work only on elements which can have this attribute, like [RectElements](https://dev.fitbit.com/build/guides/user-interface/svg/#rectangles).

@@ -29,3 +29,3 @@ ```xml

>
> Keep in mind that only one listener can be attached to each element. Attaching multiple detectors to the same element will overwrite the previous ones.
> Keep in mind that only one gesture listener can be attached to each element. Attaching multiple detectors to the same element will overwrite the previous ones.

@@ -35,6 +35,6 @@

For each gesture, you can customize the detectors. View Single Gesture examples below.
For some gestures, you can customize the detectors. View Single Gesture configuration below.
```typescript
import { GestureDetector, SlideData, SWIPE_DIR } from 'fitbit-gestures';
import { GestureDetector, GestureEvent } from 'fitbit-gestures';

@@ -45,104 +45,121 @@ // Get the element. You can also pass the element ID

const detector = new GestureDetector(element)
.onSwipe((dir: SWIPE_DIR) => {
.onTap((event: GestureEvent) => {
//Do something
})
.onDoubleTap(() => {
.onDoubleTap((event: GestureEvent) => {
//Do something
})
.onSlide((data: SlideData) => {
.onLongPress((event: GestureEvent) => {
//Do something
})
.onSlide((event: GestureEvent) => {
//Do something
})
.onSwipe((event: GestureEvent) => {
//Do something
});
```
### Events
#### Single gesture detectors
All detectors will return a **GestureEvent** in the callback function
If you only need one type of gesture, it will be slightly faster to use a dedicated class.
```typescript
interface GestureEvent {
type: GestureType,
point: Point,
from?: Point, //Swipe & Slide only
dir?: GestureDirection, //Swipe only
status?: GestureStatus //Slide only
}
```
#### Swipe only
##### Point
```typescript
interface Point {
x: number,
y: number
}
```
##### Types
```typescript
import { SwipeDetector, SWIPE_DIR, SwipeConfig } from 'fitbit-gestures';
enum GestureType {
Tap = 'Tap',
DoubleTap = 'DoubleTap',
LongPress = 'LongPress',
Slide = 'Slide',
Swipe = 'Swipe'
}
```
// Get the element. You can also pass the element ID as string
const element = document.getElementById('detectorElement');
##### Directions (Swipe only)
//Optional configuration
const swipeConfig: SwipeConfig = {
threshold: 100
};
```typescript
enum GestureDirection {
Up = 'Up',
Down = 'Down',
Left = 'Left',
Right = 'Right'
}
```
const detector = new SwipeDetector(element, onSwipe.bind(this), swipeConfig);
##### Status (Slide only)
function onSwipe(direction: SWIPE_DIR) {
if(SWIPE_DIR.DOWN) {
//Do something
}
```typescript
enum GestureStatus {
Started = 'Started',
Moved = 'Moved',
Ended = 'Ended'
}
```
##### Swipe configuration (Optional)
### Single gesture detectors
| Attribute | Description | Default |
| --- | :--- | --- |
| **threshold** | Distance (in pixels) required to trigger the event | 100px
If you only need one type of gesture on an element, it will be slightly faster to use a dedicated class for that.
#### DoubleTap only
```typescript
import { DoubleTapDetector, DoubleTapConfig } from 'fitbit-gestures';
// Get the element. You can also pass the element ID as string
const element = document.getElementById('detectorElement');
//Optional configuration
//Optional configurations
const swipeConfig: SwipeConfig = {
threshold: 100
};
const doubleTapConfig: DoubleTapConfig = {
interval: 250
}
const longPressConfig: LongPressConfig = {
time: 300,
threshold: 10
}
const detector = new DoubleTapDetector(element, onDoubleTap.bind(this), doubleTapConfig);
const tap = new TapDetector('tapElement', onGesture.bind(this));
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 swipe = new SwipeDetector('swipeElement', onGesture.bind(this), swipeConfig);
function onDoubleTap() {
//Do something
function onGesture(event: GestureEvent) {
if(event.type === GestureType.Swipe && event.dir === GestureDirection.Down) {
//Do something
} else if(event.type === GestureType.Slide) {
//Do something
}
}
```
##### DoubleTap configuration (Optional)
##### Swipe configuration
| Attribute | Description | Default |
| --- | :--- | --- |
| **interval** | Time (in ms) required to trigger the event | 250ms
| threshold | Minimum distance (in pixels) required to trigger the event | 100px
#### Slide only
##### DoubleTap configuration
```typescript
import { SlideDetector, SlideData } from 'fitbit-gestures';
| Attribute | Description | Default |
| --- | :--- | --- |
| **interval** | Time (in ms) required to trigger the event | 250ms
// Get the element. You can also pass the element ID as string
const element = document.getElementById('detectorElement');
##### LongPress configuration
const detector = new SlideDetector(element, onSlide.bind(this));
function onSlide(data: SlideData) {
//Do something
}
```
#### LongPress only
```typescript
import { LongPressDetector } from 'fitbit-gestures';
// Get the element. You can also pass the element ID as string
const element = document.getElementById('detectorElement');
const detector = new LongPressDetector(element, onLongPress.bind(this));
function onLongPress() {
//Do something
}
```
##### LongPress configuration (Optional)
| Attribute | Description | Default |

@@ -149,0 +166,0 @@ | --- | :--- | --- |

32

src/DoubleTap.ts

@@ -0,1 +1,4 @@

import { GestureCallback } from './interfaces/gesture-callback.interface'
import { GestureType } from './enums/gesture-type.enum'
export interface DoubleTapConfig {

@@ -5,23 +8,26 @@ interval: number

export type DoubleTapCallback = () => any;
export abstract class DoubleTap {
private readonly interval: number
private lastTap: number | null = null
export class DoubleTap {
private readonly interval: number;
private lastTap: number | null = null;
protected constructor(
private readonly tapCallback: DoubleTapCallback,
constructor (
private readonly cb: GestureCallback,
cfg?: DoubleTapConfig
) {
this.interval = cfg?.interval || 250;
this.interval = cfg?.interval || 250
}
protected _onMouseUp() {
const now = Date.now();
protected _onMouseUp (evt: MouseEvent) {
const now = Date.now()
if (now && now - this.lastTap < 250) {
this.tapCallback();
this.cb({
type: GestureType.DoubleTap,
point: {
x: evt.screenX,
y: evt.screenY
}
})
}
this.lastTap = now;
this.lastTap = now
}
}

19

src/DoubleTapDetector.ts

@@ -1,18 +0,17 @@

import {findElement} from "./helpers/find-element.helper";
import {DoubleTap, DoubleTapCallback, DoubleTapConfig} from "./DoubleTap";
import { findElement } from './helpers/find-element.helper'
import { DoubleTap, DoubleTapConfig } from './DoubleTap'
import { GestureCallback } from './interfaces/gesture-callback.interface'
export class DoubleTapDetector extends DoubleTap {
private readonly element: Element;
private readonly element: Element
constructor(
constructor (
element: string | Element,
tapCallback: DoubleTapCallback,
cb: GestureCallback,
cfg?: DoubleTapConfig
) {
super(tapCallback, cfg);
this.element = findElement(element);
this.element.onmouseup = this._onMouseUp.bind(this);
super(cb, cfg)
this.element = findElement(element)
this.element.onmouseup = this._onMouseUp.bind(this)
}
}

12

src/DoubleTapPrivate.ts

@@ -1,13 +0,7 @@

import {DoubleTap, DoubleTapCallback, DoubleTapConfig} from "./DoubleTap";
import { DoubleTap } from './DoubleTap'
export class DoubleTapPrivate extends DoubleTap {
constructor(callback: DoubleTapCallback, cfg?: DoubleTapConfig) {
super(callback, cfg);
onMouseUp (evt: MouseEvent) {
super._onMouseUp(evt)
}
onMouseUp() {
super._onMouseUp();
}
}

96

src/GestureDetector.ts

@@ -1,21 +0,18 @@

import {SwipeCallback, SwipeConfig} from "./Swipe";
import {findElement} from "./helpers/find-element.helper";
import {SwipePrivate} from "./SwipePrivate";
import {DoubleTapPrivate} from "./DoubleTapPrivate";
import {DoubleTapCallback, DoubleTapConfig} from "./DoubleTap";
import {SlideCallback} from "./Slide";
import {SlidePrivate} from "./SlidePrivate";
import {LongPressPrivate} from "./LongPressPrivate";
import {LongPressCallback} from "./LongPress";
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 { GestureCallback } from './interfaces/gesture-callback.interface'
import { TapPrivate } from './TapPrivate'
export interface GestureConfig {
}
export class GestureDetector {
private readonly element: Element;
private swipe: SwipePrivate;
private doubleTap: DoubleTapPrivate;
private slide: SlidePrivate;
private longPress: LongPressPrivate;
private readonly element: Element
private swipe: SwipePrivate
private doubleTap: DoubleTapPrivate
private slide: SlidePrivate
private longPress: LongPressPrivate
private tap: TapPrivate
private callbacks = {

@@ -27,50 +24,53 @@ up: null,

constructor(
element: string | Element,
cfg?: GestureConfig
constructor (
element: string | Element
) {
this.element = findElement(element);
return this;
this.element = findElement(element)
return this
}
onSwipe(cb: SwipeCallback, cfg?: SwipeConfig) {
this.swipe = new SwipePrivate(cb, cfg)
this._addListener('up', this.swipe.onMouseUp.bind(this.swipe));
this._addListener('down', this.swipe.onMouseDown.bind(this.swipe));
return this;
onTap (cb: GestureCallback) {
this.tap = new TapPrivate(cb)
this._addListener('down', this.tap.onMouseDown.bind(this.tap))
}
onDoubleTap(cb: DoubleTapCallback, cfg?: DoubleTapConfig) {
onDoubleTap (cb: GestureCallback, cfg?: DoubleTapConfig) {
this.doubleTap = new DoubleTapPrivate(cb, cfg)
this._addListener('up', this.doubleTap.onMouseUp.bind(this.doubleTap));
return this;
this._addListener('up', this.doubleTap.onMouseUp.bind(this.doubleTap))
return this
}
onSlide(cb: SlideCallback) {
this.slide = new SlidePrivate(cb);
this._addListener('up', this.slide.onMouseUp.bind(this.slide));
this._addListener('down', this.slide.onMouseDown.bind(this.slide));
this._addListener('move', this.slide.onMouseMove.bind(this.slide));
return this;
onLongPress (cb: GestureCallback) {
this.longPress = new LongPressPrivate(cb)
this._addListener('up', this.longPress.onMouseUp.bind(this.longPress))
this._addListener('down', this.longPress.onMouseDown.bind(this.longPress))
this._addListener('move', this.longPress.onMouseMove.bind(this.longPress))
return this
}
onLongPress(cb: LongPressCallback) {
this.longPress = new LongPressPrivate(cb);
this._addListener('up', this.longPress.onMouseUp.bind(this.slide));
this._addListener('down', this.longPress.onMouseDown.bind(this.slide));
this._addListener('move', this.longPress.onMouseMove.bind(this.slide));
return this;
onSwipe (cb: GestureCallback, cfg?: SwipeConfig) {
this.swipe = new SwipePrivate(cb, cfg)
this._addListener('up', this.swipe.onMouseUp.bind(this.swipe))
this._addListener('down', this.swipe.onMouseDown.bind(this.swipe))
return this
}
private _addListener(gesture: string, cb: Function) {
onSlide (cb: GestureCallback) {
this.slide = new SlidePrivate(cb)
this._addListener('up', this.slide.onMouseUp.bind(this.slide))
this._addListener('down', this.slide.onMouseDown.bind(this.slide))
this._addListener('move', this.slide.onMouseMove.bind(this.slide))
return this
}
private _addListener (gesture: 'up' | 'down' | 'move', cb: Function) {
if (!this.callbacks[gesture]) {
this.callbacks[gesture] = [];
this.callbacks[gesture] = []
this.element[`onmouse${gesture}`] = (evt: MouseEvent) => {
this.callbacks[gesture].forEach((fn: Function) => fn(evt));
this.callbacks[gesture].forEach((fn: Function) => fn(evt))
}
}
this.callbacks[gesture].push(cb);
this.callbacks[gesture].push(cb)
}
}

14

src/helpers/find-element.helper.ts

@@ -1,14 +0,14 @@

import document from "document";
import document from 'document'
export function findElement(element: string | Element): Element {
let el;
export function findElement (element: string | Element): Element {
let el
if (typeof element === 'string') {
el = document.getElementById(element);
el = document.getElementById(element)
} else {
el = element;
el = element
}
if (!el) {
throw new Error('Element not found');
throw new Error('Element not found')
}
return el;
return el
}

23

src/index.ts

@@ -1,9 +0,14 @@

export {SwipeDetector} from "./SwipeDetector";
export {SwipeConfig, SWIPE_DIR, SwipeCallback} from "./Swipe";
export {DoubleTapDetector} from "./DoubleTapDetector";
export {DoubleTapConfig} from "./DoubleTap";
export {SlideDetector} from "./SlideDetector";
export {SLIDE_EVENT, SlideData, MovementData, SlideCallback} from "./Slide";
export {LongPressDetector} from "./LongPressDetector";
export {LongPressConfig, LongPressCallback} from "./LongPress";
export {GestureDetector, GestureConfig} from "./GestureDetector";
export { GestureDirection } from './enums/gesture-direction.enum'
export { GestureType } from './enums/gesture-type.enum'
export { GestureCallback } from './interfaces/gesture-callback.interface'
export { GestureEvent } from './interfaces/gesture-event.interface'
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 { GestureDetector } from './GestureDetector'

75

src/LongPress.ts

@@ -1,2 +0,4 @@

import {Point} from "./interfaces/point.interface";
import { Point } from './interfaces/point.interface'
import { GestureCallback } from './interfaces/gesture-callback.interface'
import { GestureType } from './enums/gesture-type.enum'

@@ -8,59 +10,62 @@ export interface LongPressConfig {

export type LongPressCallback = () => any;
export abstract class LongPress {
private readonly minTime: number
private readonly threshold: number
private startPos: Point | null
private timeout: number = null
private executed = false
export class LongPress {
private readonly minTime: number;
private readonly threshold: number;
private startPos: Point | null;
private executed: boolean = false;
private timeout: number = null;
protected constructor(
private readonly longPressCallback: LongPressCallback,
constructor (
private readonly cb: GestureCallback,
cfg?: LongPressConfig
) {
this.minTime = cfg?.time || 300;
this.threshold = cfg?.time || 10;
this.minTime = cfg?.time || 300
this.threshold = cfg?.time || 10
}
protected _onMouseDown(evt: MouseEvent) {
this._init(evt);
protected _onMouseDown (evt: MouseEvent) {
this._init(evt)
}
protected _onMouseMove(evt: MouseEvent) {
if(this.executed || !this.startPos) {
return;
protected _onMouseMove (evt: MouseEvent) {
if (this.executed || !this.startPos) {
return
}
if(
if (
Math.abs(evt.screenX - this.startPos.x) > this.threshold ||
Math.abs(evt.screenY - this.startPos.y) > this.threshold
) {
this._init(evt);
this._reset()
this.executed = true
}
}
protected _onMouseUp() {
this._reset();
protected _onMouseUp () {
this._reset()
}
private _init(evt: MouseEvent) {
this._reset();
this.timeout = setTimeout(this._execute.bind(this), this.minTime);
this.startPos = {x: evt.screenX, y: evt.screenY};
private _init (evt: MouseEvent) {
this._reset()
this.timeout = setTimeout(this._execute.bind(this), this.minTime)
this.startPos = {
x: evt.screenX,
y: evt.screenY
}
}
private _reset() {
private _reset () {
if (this.timeout) {
clearTimeout(this.timeout);
clearTimeout(this.timeout)
}
this.startPos = null;
this.executed = false;
this.startPos = null
this.executed = false
}
private _execute() {
this.executed = true;
this.longPressCallback();
private _execute () {
this.executed = true
this.cb({
type: GestureType.LongPress,
point: this.startPos
})
}
}

23

src/LongPressDetector.ts

@@ -1,19 +0,20 @@

import {LongPress, LongPressCallback, LongPressConfig} from "./LongPress";
import {findElement} from "./helpers/find-element.helper";
import { LongPress, LongPressConfig } from './LongPress'
import { findElement } from './helpers/find-element.helper'
import { GestureCallback } from './interfaces/gesture-callback.interface'
export class LongPressDetector extends LongPress {
private readonly element: Element;
private readonly element: Element
constructor(
constructor (
element: string | Element,
longPressCallback: LongPressCallback,
cb: GestureCallback,
cfg?: LongPressConfig
) {
super(longPressCallback, cfg);
this.element = findElement(element);
this.element.onmousedown = this._onMouseDown.bind(this);
this.element.onmouseup = this._onMouseUp.bind(this);
this.element.onmousemove = this._onMouseMove.bind(this);
return this;
super(cb, cfg)
this.element = findElement(element)
this.element.onmousedown = this._onMouseDown.bind(this)
this.element.onmouseup = this._onMouseUp.bind(this)
this.element.onmousemove = this._onMouseMove.bind(this)
return this
}
}

19

src/LongPressPrivate.ts

@@ -1,20 +0,15 @@

import {LongPress, LongPressCallback, LongPressConfig} from "./LongPress";
import { LongPress } from './LongPress'
export class LongPressPrivate extends LongPress {
constructor(callback: LongPressCallback, cfg?: LongPressConfig) {
super(callback, cfg);
onMouseDown (evt: MouseEvent) {
super._onMouseDown(evt)
}
onMouseDown(evt: MouseEvent) {
super._onMouseDown(evt);
onMouseUp () {
super._onMouseUp()
}
onMouseUp() {
super._onMouseUp();
onMouseMove (evt: MouseEvent) {
super._onMouseMove(evt)
}
onMouseMove(evt: MouseEvent) {
super._onMouseMove(evt);
}
}

98

src/Slide.ts

@@ -1,74 +0,60 @@

export enum SLIDE_EVENT {
STARTED = 'STARTED',
MOVED = 'MOVED',
ENDED = 'ENDED'
}
import { GestureCallback } from './interfaces/gesture-callback.interface'
import { GestureType } from './enums/gesture-type.enum'
import { GestureStatus } from './enums/gesture-status.enum'
export interface SlideData {
type: SLIDE_EVENT,
x: MovementData,
y: MovementData
}
export abstract class Slide {
private startX: number = null
private lastX: number = null
private startY: number = null
private lastY: number = null
export interface MovementData {
from: number,
to: number
}
export type SlideCallback = (data: SlideData) => any;
export class Slide {
private startX: number = null;
private lastX: number = null;
private startY: number = null;
private lastY: number = null;
protected constructor(
private readonly slideCallback: SlideCallback
// eslint-disable-next-line no-useless-constructor
constructor (
private readonly cb: GestureCallback
) {}
protected _onMouseDown(evt: MouseEvent) {
this.startX = evt.screenX;
this.startY = evt.screenY;
this.lastX = evt.screenX;
this.lastY = evt.screenY;
return this._generateEvent(SLIDE_EVENT.STARTED, evt);
protected _onMouseDown (evt: MouseEvent) {
this.startX = evt.screenX
this.startY = evt.screenY
this.lastX = evt.screenX
this.lastY = evt.screenY
return this._generateEvent(GestureStatus.Started, evt)
}
protected _onMouseUp(evt: MouseEvent) {
const data = this._generateEvent(SLIDE_EVENT.ENDED, evt);
this.startX = null;
this.startY = null;
this.lastX = null;
this.lastY = null;
return data;
protected _onMouseUp (evt: MouseEvent) {
const data = this._generateEvent(GestureStatus.Ended, evt)
this.startX = null
this.startY = null
this.lastX = null
this.lastY = null
return data
}
protected _onMouseMove(evt: MouseEvent) {
if(this.lastX === evt.screenX && this.lastY === evt.screenY) {
return;
protected _onMouseMove (evt: MouseEvent) {
if (this.lastX === evt.screenX && this.lastY === evt.screenY) {
return
}
this.lastX = evt.screenX;
this.lastY = evt.screenY;
return this._generateEvent(SLIDE_EVENT.MOVED, evt);
this.lastX = evt.screenX
this.lastY = evt.screenY
return this._generateEvent(GestureStatus.Moved, evt)
}
private _generateEvent(type: SLIDE_EVENT, evt: MouseEvent) {
private _generateEvent (status: GestureStatus, evt: MouseEvent) {
if (this.startX === null) {
return;
return
}
this.slideCallback({
type,
x: {
from: this.startX,
to: evt.screenX
this.cb({
type: GestureType.Slide,
status,
point: {
x: evt.screenX,
y: evt.screenY
},
y: {
from: this.startY,
to: evt.screenY
from: {
x: this.startX,
y: this.startY
}
});
})
}
}

21

src/SlideDetector.ts

@@ -1,17 +0,18 @@

import {findElement} from "./helpers/find-element.helper";
import {Slide, SlideCallback} from "./Slide";
import { findElement } from './helpers/find-element.helper'
import { Slide } from './Slide'
import { GestureCallback } from './interfaces/gesture-callback.interface'
export class SlideDetector extends Slide {
private readonly element: Element;
private readonly element: Element
constructor(
constructor (
element: string | Element,
slideCallback: SlideCallback
cb: GestureCallback
) {
super(slideCallback);
this.element = findElement(element);
this.element.onmousedown = this._onMouseDown.bind(this);
this.element.onmouseup = this._onMouseUp.bind(this);
this.element.onmousemove = this._onMouseMove.bind(this);
super(cb)
this.element = findElement(element)
this.element.onmousedown = this._onMouseDown.bind(this)
this.element.onmouseup = this._onMouseUp.bind(this)
this.element.onmousemove = this._onMouseMove.bind(this)
}
}

20

src/SlidePrivate.ts

@@ -1,21 +0,15 @@

import {Slide, SlideCallback} from "./Slide";
import { Slide } from './Slide'
export class SlidePrivate extends Slide {
constructor(callback: SlideCallback) {
super(callback);
onMouseDown (evt: MouseEvent) {
super._onMouseDown(evt)
}
onMouseDown(evt: MouseEvent) {
super._onMouseDown(evt);
onMouseUp (evt: MouseEvent) {
super._onMouseUp(evt)
}
onMouseUp(evt: MouseEvent) {
super._onMouseUp(evt);
onMouseMove (evt: MouseEvent) {
super._onMouseMove(evt)
}
onMouseMove(evt: MouseEvent) {
super._onMouseMove(evt);
}
}

68

src/Swipe.ts

@@ -0,1 +1,5 @@

import { GestureCallback } from './interfaces/gesture-callback.interface'
import { GestureDirection } from './enums/gesture-direction.enum'
import { GestureType } from './enums/gesture-type.enum'
export interface SwipeConfig {

@@ -5,43 +9,53 @@ threshold: number

export enum SWIPE_DIR {
UP,
DOWN,
LEFT,
RIGHT
}
export abstract class Swipe {
private readonly threshold: number
private initY = 0
private initX = 0
export type SwipeCallback = (dir: SWIPE_DIR) => any;
export class Swipe {
private readonly threshold: number;
private initY: number = 0;
private initX: number = 0;
protected constructor(
private readonly swipeCallback: SwipeCallback,
constructor (
private readonly cb: GestureCallback,
cfg?: SwipeConfig
) {
this.threshold = cfg?.threshold || 100;
this.threshold = cfg?.threshold || 100
}
protected _onMouseDown(evt: MouseEvent) {
this.initY = evt.screenY;
this.initX = evt.screenX;
protected _onMouseDown (evt: MouseEvent) {
this.initY = evt.screenY
this.initX = evt.screenX
}
protected _onMouseUp(evt: MouseEvent) {
let x = evt.screenX - this.initX;
let y = evt.screenY - this.initY;
protected _onMouseUp (evt: MouseEvent) {
if (!this.initX) {
return
}
const dir = this.getDirection(evt.screenX - this.initX, evt.screenY - this.initY)
if (dir) {
this.cb({
type: GestureType.Swipe,
dir,
point: {
x: evt.screenX,
y: evt.screenY
},
from: {
x: this.initX,
y: this.initY
}
})
}
this.initX = null
this.initY = null
}
private getDirection (x: number, y: number): GestureDirection | void {
if (y < -this.threshold) {
this.swipeCallback(SWIPE_DIR.UP);
return GestureDirection.Up
} else if (y > this.threshold) {
this.swipeCallback(SWIPE_DIR.DOWN);
return GestureDirection.Down
} else if (x < -this.threshold) {
this.swipeCallback(SWIPE_DIR.LEFT);
return GestureDirection.Left
} else if (x > this.threshold) {
this.swipeCallback(SWIPE_DIR.RIGHT);
return GestureDirection.Right
}
}
}

20

src/SwipeDetector.ts

@@ -1,18 +0,18 @@

import {findElement} from "./helpers/find-element.helper";
import {Swipe, SwipeCallback, SwipeConfig} from "./Swipe";
import { findElement } from './helpers/find-element.helper'
import { Swipe, SwipeConfig } from './Swipe'
import { GestureCallback } from './interfaces/gesture-callback.interface'
export class SwipeDetector extends Swipe {
private readonly element: Element;
private readonly element: Element
constructor(
constructor (
element: string | Element,
swipeCallback: SwipeCallback,
cb: GestureCallback,
cfg?: SwipeConfig
) {
super(swipeCallback, cfg);
this.element = findElement(element);
this.element.onmousedown = this._onMouseDown.bind(this);
this.element.onmouseup = this._onMouseUp.bind(this);
super(cb, cfg)
this.element = findElement(element)
this.element.onmousedown = this._onMouseDown.bind(this)
this.element.onmouseup = this._onMouseUp.bind(this)
}
}

16

src/SwipePrivate.ts

@@ -1,17 +0,11 @@

import {Swipe, SwipeCallback, SwipeConfig} from "./Swipe";
import { Swipe } from './Swipe'
export class SwipePrivate extends Swipe {
constructor(callback: SwipeCallback, cfg?: SwipeConfig) {
super(callback, cfg);
onMouseDown (evt: MouseEvent) {
super._onMouseDown(evt)
}
onMouseDown(evt: MouseEvent) {
super._onMouseDown(evt);
onMouseUp (evt: MouseEvent) {
super._onMouseUp(evt)
}
onMouseUp(evt: MouseEvent) {
super._onMouseUp(evt);
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc