feat(smart-app): implement complete mobile app MVP

- App.tsx: full navigation (Auth stack + Main tabs with 5 screens)
- Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen
- HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors
- MapScreen: interactive map with layer toggles (6 layers)
- MarketplaceScreen: categories (6), products (5), search
- ChatScreen: AI chat with quick prompts (4), bot responses
- ProfileScreen: user info, stats, menu (9 items), logout
- AlertsScreen: alert list with severity, acknowledge
- SensorsScreen: sensor list with type filters (6 types), search
- ZonesScreen: zone cards with stats
- SettingsScreen: language picker (FR/EN/ES/DE), privacy, about
- Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n
- Hooks: useSensors, useAlerts, useNotifications, useLocation
- Components: Card, Button, LoadingSpinner, ErrorBoundary, Header
- Services: iotService, notificationService (with axios API client)
- Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN)
- Theme: colors.ts with full design system (Blue Ocean palette)
- Ditto: fixed MongoDB connection, new JWT secrets, official gateway image
This commit is contained in:
Eric FELIXINE
2026-06-01 18:00:35 -04:00
parent 08ca495bde
commit e30ae8ed09
35578 changed files with 3703534 additions and 43 deletions

View File

@@ -0,0 +1,13 @@
/* eslint-disable no-new-func, no-nested-ternary */
let win;
if (typeof window === "undefined") {
// window is undefined in node.js
win = {};
} else {
win = window;
}
/* eslint-enable no-new-func, no-nested-ternary */
export {win as window};

View File

@@ -0,0 +1,129 @@
import { TOUCH_ACTION_COMPUTE } from "./touchactionjs/touchaction-Consts";
import TapRecognizer from "./recognizers/tap";
import PanRecognizer from "./recognizers/pan";
import SwipeRecognizer from "./recognizers/swipe";
import PinchRecognizer from "./recognizers/pinch";
import RotateRecognizer from "./recognizers/rotate";
import PressRecognizer from "./recognizers/press";
import {DIRECTION_HORIZONTAL} from "./inputjs/input-consts";
export default {
/**
* @private
* set if DOM events are being triggered.
* But this is slower and unused by simple implementations, so disabled by default.
* @type {Boolean}
* @default false
*/
domEvents: false,
/**
* @private
* The value for the touchAction property/fallback.
* When set to `compute` it will magically set the correct value based on the added recognizers.
* @type {String}
* @default compute
*/
touchAction: TOUCH_ACTION_COMPUTE,
/**
* @private
* @type {Boolean}
* @default true
*/
enable: true,
/**
* @private
* EXPERIMENTAL FEATURE -- can be removed/changed
* Change the parent input target element.
* If Null, then it is being set the to main element.
* @type {Null|EventTarget}
* @default null
*/
inputTarget: null,
/**
* @private
* force an input class
* @type {Null|Function}
* @default null
*/
inputClass: null,
/**
* @private
* Some CSS properties can be used to improve the working of Hammer.
* Add them to this method and they will be set when creating a new Manager.
* @namespace
*/
cssProps: {
/**
* @private
* Disables text selection to improve the dragging gesture. Mainly for desktop browsers.
* @type {String}
* @default 'none'
*/
userSelect: "none",
/**
* @private
* Disable the Windows Phone grippers when pressing an element.
* @type {String}
* @default 'none'
*/
touchSelect: "none",
/**
* @private
* Disables the default callout shown when you touch and hold a touch target.
* On iOS, when you touch and hold a touch target such as a link, Safari displays
* a callout containing information about the link. This property allows you to disable that callout.
* @type {String}
* @default 'none'
*/
touchCallout: "none",
/**
* @private
* Specifies whether zooming is enabled. Used by IE10>
* @type {String}
* @default 'none'
*/
contentZooming: "none",
/**
* @private
* Specifies that an entire element should be draggable instead of its contents. Mainly for desktop browsers.
* @type {String}
* @default 'none'
*/
userDrag: "none",
/**
* @private
* Overrides the highlight color shown when the user taps a link or a JavaScript
* clickable element in iOS. This property obeys the alpha value, if specified.
* @type {String}
* @default 'rgba(0,0,0,0)'
*/
tapHighlightColor: "rgba(0,0,0,0)",
},
};
/**
* @private
* Default recognizer setup when calling `Hammer()`
* When creating a new Manager these will be skipped.
* This is separated with other defaults because of tree-shaking.
* @type {Array}
*/
export const preset = [
[RotateRecognizer, { enable: false }],
[PinchRecognizer, { enable: false }, ['rotate']],
[SwipeRecognizer, { direction: DIRECTION_HORIZONTAL }],
[PanRecognizer, { direction: DIRECTION_HORIZONTAL }, ['swipe']],
[TapRecognizer],
[TapRecognizer, { event: 'doubletap', taps: 2 }, ['tap']],
[PressRecognizer]
];

View File

@@ -0,0 +1,50 @@
import * as Hammer from "hammerjs";
export default Hammer;
export {
INPUT_START,
INPUT_MOVE,
INPUT_END,
INPUT_CANCEL,
STATE_POSSIBLE,
STATE_BEGAN,
STATE_CHANGED,
STATE_ENDED,
STATE_RECOGNIZED,
STATE_CANCELLED,
STATE_FAILED,
DIRECTION_NONE,
DIRECTION_LEFT,
DIRECTION_RIGHT,
DIRECTION_UP,
DIRECTION_DOWN,
DIRECTION_HORIZONTAL,
DIRECTION_VERTICAL,
DIRECTION_ALL,
Manager,
Input,
TouchAction,
TouchInput,
MouseInput,
PointerEventInput,
TouchMouseInput,
SingleTouchInput,
Recognizer,
AttrRecognizer,
Tap,
Pan,
Swipe,
Pinch,
Rotate,
Press,
on,
off,
each,
merge,
extend,
inherit,
bindFn,
prefixed,
defaults,
} from "hammerjs";

View File

@@ -0,0 +1,136 @@
import Manager from "./manager";
import defaults, { preset } from "./defaults";
import assign from './utils/assign';
import {
INPUT_START,
INPUT_MOVE,
INPUT_END,
INPUT_CANCEL,
DIRECTION_NONE,
DIRECTION_LEFT,
DIRECTION_RIGHT,
DIRECTION_UP,
DIRECTION_DOWN,
DIRECTION_HORIZONTAL,
DIRECTION_VERTICAL,
DIRECTION_ALL,
} from "./inputjs/input-consts";
import {
STATE_POSSIBLE,
STATE_BEGAN,
STATE_CHANGED,
STATE_ENDED,
STATE_RECOGNIZED,
STATE_CANCELLED,
STATE_FAILED,
} from "./recognizerjs/recognizer-consts";
import Input from "./inputjs/input-constructor";
import TouchAction from "./touchactionjs/touchaction-constructor";
import TouchInput from "./input/touch";
import MouseInput from "./input/mouse";
import PointerEventInput from "./input/pointerevent";
import SingleTouchInput from "./input/singletouch";
import TouchMouseInput from "./input/touchmouse";
import Recognizer from "./recognizerjs/recognizer-constructor";
import AttrRecognizer from "./recognizers/attribute";
import TapRecognizer from "./recognizers/tap";
import PanRecognizer from "./recognizers/pan";
import SwipeRecognizer from "./recognizers/swipe";
import PinchRecognizer from "./recognizers/pinch";
import RotateRecognizer from "./recognizers/rotate";
import PressRecognizer from "./recognizers/press";
import addEventListeners from "./utils/add-event-listeners";
import removeEventListeners from "./utils/remove-event-listeners";
import each from "./utils/each";
import merge from "./utils/merge";
import extend from "./utils/extend";
import inherit from "./utils/inherit";
import bindFn from "./utils/bind-fn";
import prefixed from "./utils/prefixed";
import toArray from "./utils/to-array";
import uniqueArray from "./utils/unique-array";
import splitStr from "./utils/split-str";
import inArray from "./utils/in-array";
import boolOrFn from "./utils/bool-or-fn";
import hasParent from "./utils/has-parent";
/**
* @private
* Simple way to create a manager with a default set of recognizers.
* @param {HTMLElement} element
* @param {Object} [options]
* @constructor
*/
export default class Hammer {
/**
* @private
* @const {string}
*/
static VERSION = "#__VERSION__#";
static DIRECTION_ALL = DIRECTION_ALL;
static DIRECTION_DOWN = DIRECTION_DOWN;
static DIRECTION_LEFT = DIRECTION_LEFT;
static DIRECTION_RIGHT = DIRECTION_RIGHT;
static DIRECTION_UP = DIRECTION_UP;
static DIRECTION_HORIZONTAL = DIRECTION_HORIZONTAL;
static DIRECTION_VERTICAL = DIRECTION_VERTICAL;
static DIRECTION_NONE = DIRECTION_NONE;
static DIRECTION_DOWN = DIRECTION_DOWN;
static INPUT_START = INPUT_START;
static INPUT_MOVE = INPUT_MOVE;
static INPUT_END = INPUT_END;
static INPUT_CANCEL = INPUT_CANCEL;
static STATE_POSSIBLE = STATE_POSSIBLE;
static STATE_BEGAN = STATE_BEGAN;
static STATE_CHANGED = STATE_CHANGED;
static STATE_ENDED = STATE_ENDED;
static STATE_RECOGNIZED = STATE_RECOGNIZED;
static STATE_CANCELLED = STATE_CANCELLED;
static STATE_FAILED = STATE_FAILED;
static Manager = Manager;
static Input = Input;
static TouchAction = TouchAction;
static TouchInput = TouchInput;
static MouseInput = MouseInput;
static PointerEventInput = PointerEventInput;
static TouchMouseInput = TouchMouseInput;
static SingleTouchInput = SingleTouchInput;
static Recognizer = Recognizer;
static AttrRecognizer = AttrRecognizer;
static Tap = TapRecognizer;
static Pan = PanRecognizer;
static Swipe = SwipeRecognizer;
static Pinch = PinchRecognizer;
static Rotate = RotateRecognizer;
static Press = PressRecognizer;
static on = addEventListeners;
static off = removeEventListeners;
static each = each;
static merge = merge;
static extend = extend;
static bindFn = bindFn;
static assign = assign;
static inherit = inherit;
static bindFn = bindFn;
static prefixed = prefixed;
static toArray = toArray;
static inArray = inArray;
static uniqueArray = uniqueArray;
static splitStr = splitStr;
static boolOrFn = boolOrFn;
static hasParent = hasParent;
static addEventListeners = addEventListeners;
static removeEventListeners = removeEventListeners;
static defaults = assign({}, defaults, { preset });
constructor(element, options = {}) {
return new Manager(element, {
recognizers: [
// RecognizerClass, options, [recognizeWith, ...], [requireFailure, ...]
...preset
],
...options,
});
}
}

View File

@@ -0,0 +1,123 @@
import Hammer from "./hammer";
import assign from "./utils/assign";
import {
INPUT_START,
INPUT_MOVE,
INPUT_END,
INPUT_CANCEL,
DIRECTION_NONE,
DIRECTION_LEFT,
DIRECTION_RIGHT,
DIRECTION_UP,
DIRECTION_DOWN,
DIRECTION_HORIZONTAL,
DIRECTION_VERTICAL,
DIRECTION_ALL,
} from "./inputjs/input-consts";
import {
STATE_POSSIBLE,
STATE_BEGAN,
STATE_CHANGED,
STATE_ENDED,
STATE_RECOGNIZED,
STATE_CANCELLED,
STATE_FAILED,
} from "./recognizerjs/recognizer-consts";
import Manager from "./manager";
import Input from "./inputjs/input-constructor";
import TouchAction from "./touchactionjs/touchaction-constructor";
import TouchInput from "./input/touch";
import MouseInput from "./input/mouse";
import PointerEventInput from "./input/pointerevent";
import SingleTouchInput from "./input/singletouch";
import TouchMouseInput from "./input/touchmouse";
import Recognizer from "./recognizerjs/recognizer-constructor";
import AttrRecognizer from "./recognizers/attribute";
import TapRecognizer from "./recognizers/tap";
import PanRecognizer from "./recognizers/pan";
import SwipeRecognizer from "./recognizers/swipe";
import PinchRecognizer from "./recognizers/pinch";
import RotateRecognizer from "./recognizers/rotate";
import PressRecognizer from "./recognizers/press";
import addEventListeners from "./utils/add-event-listeners";
import removeEventListeners from "./utils/remove-event-listeners";
import each from "./utils/each";
import merge from "./utils/merge";
import extend from "./utils/extend";
import inherit from "./utils/inherit";
import bindFn from "./utils/bind-fn";
import prefixed from "./utils/prefixed";
import toArray from "./utils/to-array";
import uniqueArray from "./utils/unique-array";
import splitStr from "./utils/split-str";
import inArray from "./utils/in-array";
import boolOrFn from "./utils/bool-or-fn";
import hasParent from "./utils/has-parent";
// this prevents errors when Hammer is loaded in the presence of an AMD
// style loader but by script tag, not by the loader.
const defaults = Hammer.defaults;
export {
Hammer as default,
INPUT_START,
INPUT_MOVE,
INPUT_END,
INPUT_CANCEL,
STATE_POSSIBLE,
STATE_BEGAN,
STATE_CHANGED,
STATE_ENDED,
STATE_RECOGNIZED,
STATE_CANCELLED,
STATE_FAILED,
DIRECTION_NONE,
DIRECTION_LEFT,
DIRECTION_RIGHT,
DIRECTION_UP,
DIRECTION_DOWN,
DIRECTION_HORIZONTAL,
DIRECTION_VERTICAL,
DIRECTION_ALL,
Manager,
Input,
TouchAction,
TouchInput,
MouseInput,
PointerEventInput,
TouchMouseInput,
SingleTouchInput,
Recognizer,
AttrRecognizer,
TapRecognizer as Tap,
PanRecognizer as Pan,
SwipeRecognizer as Swipe,
PinchRecognizer as Pinch,
RotateRecognizer as Rotate,
PressRecognizer as Press,
addEventListeners as on,
removeEventListeners as off,
each,
merge,
extend,
assign,
inherit,
bindFn,
prefixed,
toArray,
inArray,
uniqueArray,
splitStr,
boolOrFn,
hasParent,
addEventListeners,
removeEventListeners,
defaults,
};

View File

@@ -0,0 +1,67 @@
import {
INPUT_START,
INPUT_MOVE,
INPUT_END,
INPUT_TYPE_MOUSE
} from '../inputjs/input-consts';
import Input from '../inputjs/input-constructor';
const MOUSE_INPUT_MAP = {
mousedown: INPUT_START,
mousemove: INPUT_MOVE,
mouseup: INPUT_END
};
const MOUSE_ELEMENT_EVENTS = 'mousedown';
const MOUSE_WINDOW_EVENTS = 'mousemove mouseup';
/**
* @private
* Mouse events input
* @constructor
* @extends Input
*/
export default class MouseInput extends Input {
constructor() {
var proto = MouseInput.prototype;
proto.evEl = MOUSE_ELEMENT_EVENTS;
proto.evWin = MOUSE_WINDOW_EVENTS;
super(...arguments);
this.pressed = false; // mousedown state
}
/**
* @private
* handle mouse events
* @param {Object} ev
*/
handler(ev) {
let eventType = MOUSE_INPUT_MAP[ev.type];
// on start we want to have the left mouse button down
if (eventType & INPUT_START && ev.button === 0) {
this.pressed = true;
}
if (eventType & INPUT_MOVE && ev.which !== 1) {
eventType = INPUT_END;
}
// mouse must be down
if (!this.pressed) {
return;
}
if (eventType & INPUT_END) {
this.pressed = false;
}
this.callback(this.manager, eventType, {
pointers: [ev],
changedPointers: [ev],
pointerType: INPUT_TYPE_MOUSE,
srcEvent: ev
});
}
}

View File

@@ -0,0 +1,104 @@
import {
INPUT_START,
INPUT_END,
INPUT_CANCEL,
INPUT_MOVE,
INPUT_TYPE_TOUCH,
INPUT_TYPE_MOUSE,
INPUT_TYPE_PEN,
INPUT_TYPE_KINECT
} from '../inputjs/input-consts';
import {window} from "../browser";
import Input from '../inputjs/input-constructor';
import inArray from '../utils/in-array';
const POINTER_INPUT_MAP = {
pointerdown: INPUT_START,
pointermove: INPUT_MOVE,
pointerup: INPUT_END,
pointercancel: INPUT_CANCEL,
pointerout: INPUT_CANCEL
};
// in IE10 the pointer types is defined as an enum
const IE10_POINTER_TYPE_ENUM = {
2: INPUT_TYPE_TOUCH,
3: INPUT_TYPE_PEN,
4: INPUT_TYPE_MOUSE,
5: INPUT_TYPE_KINECT // see https://twitter.com/jacobrossi/status/480596438489890816
};
let POINTER_ELEMENT_EVENTS = 'pointerdown';
let POINTER_WINDOW_EVENTS = 'pointermove pointerup pointercancel';
// IE10 has prefixed support, and case-sensitive
if (window.MSPointerEvent && !window.PointerEvent) {
POINTER_ELEMENT_EVENTS = 'MSPointerDown';
POINTER_WINDOW_EVENTS = 'MSPointerMove MSPointerUp MSPointerCancel';
}
/**
* @private
* Pointer events input
* @constructor
* @extends Input
*/
export default class PointerEventInput extends Input {
constructor() {
var proto = PointerEventInput.prototype;
proto.evEl = POINTER_ELEMENT_EVENTS;
proto.evWin = POINTER_WINDOW_EVENTS;
super(...arguments);
this.store = (this.manager.session.pointerEvents = []);
}
/**
* @private
* handle mouse events
* @param {Object} ev
*/
handler(ev) {
let { store } = this;
let removePointer = false;
let eventTypeNormalized = ev.type.toLowerCase().replace('ms', '');
let eventType = POINTER_INPUT_MAP[eventTypeNormalized];
let pointerType = IE10_POINTER_TYPE_ENUM[ev.pointerType] || ev.pointerType;
let isTouch = (pointerType === INPUT_TYPE_TOUCH);
// get index of the event in the store
let storeIndex = inArray(store, ev.pointerId, 'pointerId');
// start and mouse must be down
if (eventType & INPUT_START && (ev.button === 0 || isTouch)) {
if (storeIndex < 0) {
store.push(ev);
storeIndex = store.length - 1;
}
} else if (eventType & (INPUT_END | INPUT_CANCEL)) {
removePointer = true;
}
// it not found, so the pointer hasn't been down (so it's probably a hover)
if (storeIndex < 0) {
return;
}
// update the event in the store
store[storeIndex] = ev;
this.callback(this.manager, eventType, {
pointers: store,
changedPointers: [ev],
pointerType,
srcEvent: ev
});
if (removePointer) {
// remove from the store
store.splice(storeIndex, 1);
}
}
}

View File

@@ -0,0 +1,82 @@
import {
INPUT_START,
INPUT_MOVE,
INPUT_END,
INPUT_CANCEL,
INPUT_TYPE_TOUCH
} from '../inputjs/input-consts';
import Input from '../inputjs/input-constructor';
import toArray from '../utils/to-array';
import uniqueArray from '../utils/unique-array';
const SINGLE_TOUCH_INPUT_MAP = {
touchstart: INPUT_START,
touchmove: INPUT_MOVE,
touchend: INPUT_END,
touchcancel: INPUT_CANCEL
};
const SINGLE_TOUCH_TARGET_EVENTS = 'touchstart';
const SINGLE_TOUCH_WINDOW_EVENTS = 'touchstart touchmove touchend touchcancel';
/**
* @private
* Touch events input
* @constructor
* @extends Input
*/
export default class SingleTouchInput extends Input {
constructor() {
var proto = SingleTouchInput.prototype;
proto.evTarget = SINGLE_TOUCH_TARGET_EVENTS;
proto.evWin = SINGLE_TOUCH_WINDOW_EVENTS;
super(...arguments);
this.started = false;
}
handler(ev) {
let type = SINGLE_TOUCH_INPUT_MAP[ev.type];
// should we handle the touch events?
if (type === INPUT_START) {
this.started = true;
}
if (!this.started) {
return;
}
let touches = normalizeSingleTouches.call(this, ev, type);
// when done, reset the started state
if (type & (INPUT_END | INPUT_CANCEL) && touches[0].length - touches[1].length === 0) {
this.started = false;
}
this.callback(this.manager, type, {
pointers: touches[0],
changedPointers: touches[1],
pointerType: INPUT_TYPE_TOUCH,
srcEvent: ev
});
}
}
/**
* @private
* @this {TouchInput}
* @param {Object} ev
* @param {Number} type flag
* @returns {undefined|Array} [all, changed]
*/
function normalizeSingleTouches(ev, type) {
let all = toArray(ev.touches);
let changed = toArray(ev.changedTouches);
if (type & (INPUT_END | INPUT_CANCEL)) {
all = uniqueArray(all.concat(changed), 'identifier', true);
}
return [all, changed];
}

View File

@@ -0,0 +1,111 @@
import {
INPUT_START,
INPUT_MOVE,
INPUT_END,
INPUT_CANCEL,
INPUT_TYPE_TOUCH
} from '../inputjs/input-consts';
import Input from '../inputjs/input-constructor';
import toArray from '../utils/to-array';
import hasParent from '../utils/has-parent';
import uniqueArray from '../utils/unique-array';
const TOUCH_INPUT_MAP = {
touchstart: INPUT_START,
touchmove: INPUT_MOVE,
touchend: INPUT_END,
touchcancel: INPUT_CANCEL
};
const TOUCH_TARGET_EVENTS = 'touchstart touchmove touchend touchcancel';
/**
* @private
* Multi-user touch events input
* @constructor
* @extends Input
*/
export default class TouchInput extends Input {
constructor() {
TouchInput.prototype.evTarget = TOUCH_TARGET_EVENTS;
super(...arguments);
this.targetIds = {};
// this.evTarget = TOUCH_TARGET_EVENTS;
}
handler(ev) {
let type = TOUCH_INPUT_MAP[ev.type];
let touches = getTouches.call(this, ev, type);
if (!touches) {
return;
}
this.callback(this.manager, type, {
pointers: touches[0],
changedPointers: touches[1],
pointerType: INPUT_TYPE_TOUCH,
srcEvent: ev
});
}
}
/**
* @private
* @this {TouchInput}
* @param {Object} ev
* @param {Number} type flag
* @returns {undefined|Array} [all, changed]
*/
function getTouches(ev, type) {
let allTouches = toArray(ev.touches);
let { targetIds } = this;
// when there is only one touch, the process can be simplified
if (type & (INPUT_START | INPUT_MOVE) && allTouches.length === 1) {
targetIds[allTouches[0].identifier] = true;
return [allTouches, allTouches];
}
let i;
let targetTouches;
let changedTouches = toArray(ev.changedTouches);
let changedTargetTouches = [];
let { target } = this;
// get target touches from touches
targetTouches = allTouches.filter((touch) => {
return hasParent(touch.target, target);
});
// collect touches
if (type === INPUT_START) {
i = 0;
while (i < targetTouches.length) {
targetIds[targetTouches[i].identifier] = true;
i++;
}
}
// filter changed touches to only contain touches that exist in the collected target ids
i = 0;
while (i < changedTouches.length) {
if (targetIds[changedTouches[i].identifier]) {
changedTargetTouches.push(changedTouches[i]);
}
// cleanup removed touches
if (type & (INPUT_END | INPUT_CANCEL)) {
delete targetIds[changedTouches[i].identifier];
}
i++;
}
if (!changedTargetTouches.length) {
return;
}
return [
// merge targetTouches with changedTargetTouches so it contains ALL touches, including 'end' and 'cancel'
uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true),
changedTargetTouches
];
}

View File

@@ -0,0 +1,117 @@
import Input from "../inputjs/input-constructor";
import TouchInput from "./touch";
import MouseInput from "./mouse";
import {
INPUT_START,
INPUT_END,
INPUT_CANCEL,
INPUT_TYPE_TOUCH,
INPUT_TYPE_MOUSE,
} from "../inputjs/input-consts";
/**
* @private
* Combined touch and mouse input
*
* Touch has a higher priority then mouse, and while touching no mouse events are allowed.
* This because touch devices also emit mouse events while doing a touch.
*
* @constructor
* @extends Input
*/
const DEDUP_TIMEOUT = 2500;
const DEDUP_DISTANCE = 25;
function setLastTouch(eventData) {
const { changedPointers: [touch] } = eventData;
if (touch.identifier === this.primaryTouch) {
const lastTouch = { x: touch.clientX, y: touch.clientY };
const lts = this.lastTouches;
this.lastTouches.push(lastTouch);
const removeLastTouch = function() {
const i = lts.indexOf(lastTouch);
if (i > -1) {
lts.splice(i, 1);
}
};
setTimeout(removeLastTouch, DEDUP_TIMEOUT);
}
}
function recordTouches(eventType, eventData) {
if (eventType & INPUT_START) {
this.primaryTouch = eventData.changedPointers[0].identifier;
setLastTouch.call(this, eventData);
} else if (eventType & (INPUT_END | INPUT_CANCEL)) {
setLastTouch.call(this, eventData);
}
}
function isSyntheticEvent(eventData) {
const x = eventData.srcEvent.clientX;
const y = eventData.srcEvent.clientY;
for (let i = 0; i < this.lastTouches.length; i++) {
const t = this.lastTouches[i];
const dx = Math.abs(x - t.x);
const dy = Math.abs(y - t.y);
if (dx <= DEDUP_DISTANCE && dy <= DEDUP_DISTANCE) {
return true;
}
}
return false;
}
export default class TouchMouseInput extends Input {
constructor(manager, callback) {
super(manager, callback);
this.touch = new TouchInput(this.manager, this.handler);
this.mouse = new MouseInput(this.manager, this.handler);
this.primaryTouch = null;
this.lastTouches = [];
}
/**
* @private
* handle mouse and touch events
* @param {Hammer} manager
* @param {String} inputEvent
* @param {Object} inputData
*/
handler = (manager, inputEvent, inputData) => {
const isTouch = (inputData.pointerType === INPUT_TYPE_TOUCH);
const isMouse = (inputData.pointerType === INPUT_TYPE_MOUSE);
if (isMouse && inputData.sourceCapabilities && inputData.sourceCapabilities.firesTouchEvents) {
return;
}
// when we're in a touch event, record touches to de-dupe synthetic mouse event
if (isTouch) {
recordTouches.call(this, inputEvent, inputData);
} else if (isMouse && isSyntheticEvent.call(this, inputData)) {
return;
}
this.callback(manager, inputEvent, inputData);
}
/**
* @private
* remove the event listeners
*/
destroy() {
this.touch.destroy();
this.mouse.destroy();
}
}

View File

@@ -0,0 +1,25 @@
import { INPUT_START, INPUT_END } from './input-consts';
export default function computeDeltaXY(session, input) {
let { center } = input;
// let { offsetDelta:offset = {}, prevDelta = {}, prevInput = {} } = session;
// jscs throwing error on defalut destructured values and without defaults tests fail
let offset = session.offsetDelta || {};
let prevDelta = session.prevDelta || {};
let prevInput = session.prevInput || {};
if (input.eventType === INPUT_START || prevInput.eventType === INPUT_END) {
prevDelta = session.prevDelta = {
x: prevInput.deltaX || 0,
y: prevInput.deltaY || 0
};
offset = session.offsetDelta = {
x: center.x,
y: center.y
};
}
input.deltaX = prevDelta.x + (center.x - offset.x);
input.deltaY = prevDelta.y + (center.y - offset.y);
}

View File

@@ -0,0 +1,81 @@
import { now } from '../utils/utils-consts';
import { abs } from '../utils/utils-consts';
import hasParent from '../utils/has-parent';
import simpleCloneInputData from './simple-clone-input-data';
import getCenter from './get-center';
import getDistance from './get-distance';
import getAngle from './get-angle';
import getDirection from './get-direction';
import computeDeltaXY from './compute-delta-xy';
import getVelocity from './get-velocity';
import getScale from './get-scale';
import getRotation from './get-rotation';
import computeIntervalInputData from './compute-interval-input-data';
/**
* @private
* extend the data with some usable properties like scale, rotate, velocity etc
* @param {Object} manager
* @param {Object} input
*/
export default function computeInputData(manager, input) {
let { session } = manager;
let { pointers } = input;
let { length:pointersLength } = pointers;
// store the first input to calculate the distance and direction
if (!session.firstInput) {
session.firstInput = simpleCloneInputData(input);
}
// to compute scale and rotation we need to store the multiple touches
if (pointersLength > 1 && !session.firstMultiple) {
session.firstMultiple = simpleCloneInputData(input);
} else if (pointersLength === 1) {
session.firstMultiple = false;
}
let { firstInput, firstMultiple } = session;
let offsetCenter = firstMultiple ? firstMultiple.center : firstInput.center;
let center = input.center = getCenter(pointers);
input.timeStamp = now();
input.deltaTime = input.timeStamp - firstInput.timeStamp;
input.angle = getAngle(offsetCenter, center);
input.distance = getDistance(offsetCenter, center);
computeDeltaXY(session, input);
input.offsetDirection = getDirection(input.deltaX, input.deltaY);
let overallVelocity = getVelocity(input.deltaTime, input.deltaX, input.deltaY);
input.overallVelocityX = overallVelocity.x;
input.overallVelocityY = overallVelocity.y;
input.overallVelocity = (abs(overallVelocity.x) > abs(overallVelocity.y)) ? overallVelocity.x : overallVelocity.y;
input.scale = firstMultiple ? getScale(firstMultiple.pointers, pointers) : 1;
input.rotation = firstMultiple ? getRotation(firstMultiple.pointers, pointers) : 0;
input.maxPointers = !session.prevInput ? input.pointers.length : ((input.pointers.length >
session.prevInput.maxPointers) ? input.pointers.length : session.prevInput.maxPointers);
computeIntervalInputData(session, input);
// find the correct target
let target = manager.element;
const srcEvent = input.srcEvent;
let srcEventTarget;
if (srcEvent.composedPath) {
srcEventTarget = srcEvent.composedPath()[0];
} else if (srcEvent.path) {
srcEventTarget = srcEvent.path[0];
} else {
srcEventTarget = srcEvent.target;
}
if (hasParent(srcEventTarget, target)) {
target = srcEventTarget;
}
input.target = target;
}

View File

@@ -0,0 +1,43 @@
import { INPUT_CANCEL,COMPUTE_INTERVAL } from './input-consts';
import { abs } from '../utils/utils-consts';
import getVelocity from './get-velocity';
import getDirection from './get-direction';
/**
* @private
* velocity is calculated every x ms
* @param {Object} session
* @param {Object} input
*/
export default function computeIntervalInputData(session, input) {
let last = session.lastInterval || input;
let deltaTime = input.timeStamp - last.timeStamp;
let velocity;
let velocityX;
let velocityY;
let direction;
if (input.eventType !== INPUT_CANCEL && (deltaTime > COMPUTE_INTERVAL || last.velocity === undefined)) {
let deltaX = input.deltaX - last.deltaX;
let deltaY = input.deltaY - last.deltaY;
let v = getVelocity(deltaTime, deltaX, deltaY);
velocityX = v.x;
velocityY = v.y;
velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
direction = getDirection(deltaX, deltaY);
session.lastInterval = input;
} else {
// use latest velocity info if it doesn't overtake a minimum period
velocity = last.velocity;
velocityX = last.velocityX;
velocityY = last.velocityY;
direction = last.direction;
}
input.velocity = velocity;
input.velocityX = velocityX;
input.velocityY = velocityY;
input.direction = direction;
}

View File

@@ -0,0 +1,31 @@
import { SUPPORT_POINTER_EVENTS,SUPPORT_ONLY_TOUCH,SUPPORT_TOUCH } from './input-consts';
import inputHandler from './input-handler';
import PointerEventInput from '../input/pointerevent';
import TouchInput from '../input/touch';
import MouseInput from '../input/mouse';
import TouchMouseInput from '../input/touchmouse';
/**
* @private
* create new input type manager
* called by the Manager constructor
* @param {Hammer} manager
* @returns {Input}
*/
export default function createInputInstance(manager) {
let Type;
// let inputClass = manager.options.inputClass;
let { options:{ inputClass } } = manager;
if (inputClass) {
Type = inputClass;
} else if (SUPPORT_POINTER_EVENTS) {
Type = PointerEventInput;
} else if (SUPPORT_ONLY_TOUCH) {
Type = TouchInput;
} else if (!SUPPORT_TOUCH) {
Type = MouseInput;
} else {
Type = TouchMouseInput;
}
return new (Type)(manager, inputHandler);
}

View File

@@ -0,0 +1,18 @@
import { PROPS_XY } from './input-consts';
/**
* @private
* calculate the angle between two coordinates
* @param {Object} p1
* @param {Object} p2
* @param {Array} [props] containing x and y keys
* @return {Number} angle
*/
export default function getAngle(p1, p2, props) {
if (!props) {
props = PROPS_XY;
}
let x = p2[props[0]] - p1[props[0]];
let y = p2[props[1]] - p1[props[1]];
return Math.atan2(y, x) * 180 / Math.PI;
}

View File

@@ -0,0 +1,33 @@
import { round } from '../utils/utils-consts';
/**
* @private
* get the center of all the pointers
* @param {Array} pointers
* @return {Object} center contains `x` and `y` properties
*/
export default function getCenter(pointers) {
let pointersLength = pointers.length;
// no need to loop when only one touch
if (pointersLength === 1) {
return {
x: round(pointers[0].clientX),
y: round(pointers[0].clientY)
};
}
let x = 0;
let y = 0;
let i = 0;
while (i < pointersLength) {
x += pointers[i].clientX;
y += pointers[i].clientY;
i++;
}
return {
x: round(x / pointersLength),
y: round(y / pointersLength)
};
}

View File

@@ -0,0 +1,20 @@
import { abs } from '../utils/utils-consts';
import { DIRECTION_NONE,DIRECTION_LEFT,DIRECTION_RIGHT,DIRECTION_UP,DIRECTION_DOWN } from './input-consts';
/**
* @private
* get the direction between two points
* @param {Number} x
* @param {Number} y
* @return {Number} direction
*/
export default function getDirection(x, y) {
if (x === y) {
return DIRECTION_NONE;
}
if (abs(x) >= abs(y)) {
return x < 0 ? DIRECTION_LEFT : DIRECTION_RIGHT;
}
return y < 0 ? DIRECTION_UP : DIRECTION_DOWN;
}

View File

@@ -0,0 +1,19 @@
import { PROPS_XY } from './input-consts';
/**
* @private
* calculate the absolute distance between two points
* @param {Object} p1 {x, y}
* @param {Object} p2 {x, y}
* @param {Array} [props] containing x and y keys
* @return {Number} distance
*/
export default function getDistance(p1, p2, props) {
if (!props) {
props = PROPS_XY;
}
let x = p2[props[0]] - p1[props[0]];
let y = p2[props[1]] - p1[props[1]];
return Math.sqrt((x * x) + (y * y));
}

View File

@@ -0,0 +1,13 @@
import getAngle from './get-angle';
import { PROPS_CLIENT_XY } from './input-consts';
/**
* @private
* calculate the rotation degrees between two pointersets
* @param {Array} start array of pointers
* @param {Array} end array of pointers
* @return {Number} rotation
*/
export default function getRotation(start, end) {
return getAngle(end[1], end[0], PROPS_CLIENT_XY) + getAngle(start[1], start[0], PROPS_CLIENT_XY);
}

View File

@@ -0,0 +1,13 @@
import { PROPS_CLIENT_XY } from './input-consts';
import getDistance from './get-distance';
/**
* @private
* calculate the scale factor between two pointersets
* no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
* @param {Array} start array of pointers
* @param {Array} end array of pointers
* @return {Number} scale
*/
export default function getScale(start, end) {
return getDistance(end[0], end[1], PROPS_CLIENT_XY) / getDistance(start[0], start[1], PROPS_CLIENT_XY);
}

View File

@@ -0,0 +1,14 @@
/**
* @private
* calculate the velocity between two points. unit is in px per ms.
* @param {Number} deltaTime
* @param {Number} x
* @param {Number} y
* @return {Object} velocity `x` and `y`
*/
export default function getVelocity(deltaTime, x, y) {
return {
x: x / deltaTime || 0,
y: y / deltaTime || 0
};
}

View File

@@ -0,0 +1,59 @@
import boolOrFn from '../utils/bool-or-fn';
import addEventListeners from '../utils/add-event-listeners';
import removeEventListeners from '../utils/remove-event-listeners';
import getWindowForElement from '../utils/get-window-for-element';
/**
* @private
* create new input type manager
* @param {Manager} manager
* @param {Function} callback
* @returns {Input}
* @constructor
*/
export default class Input {
constructor(manager, callback) {
let self = this;
this.manager = manager;
this.callback = callback;
this.element = manager.element;
this.target = manager.options.inputTarget;
// smaller wrapper around the handler, for the scope and the enabled state of the manager,
// so when disabled the input events are completely bypassed.
this.domHandler = function(ev) {
if (boolOrFn(manager.options.enable, [manager])) {
self.handler(ev);
}
};
this.init();
}
/**
* @private
* should handle the inputEvent data and trigger the callback
* @virtual
*/
handler() { }
/**
* @private
* bind the events
*/
init() {
this.evEl && addEventListeners(this.element, this.evEl, this.domHandler);
this.evTarget && addEventListeners(this.target, this.evTarget, this.domHandler);
this.evWin && addEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
}
/**
* @private
* unbind the events
*/
destroy() {
this.evEl && removeEventListeners(this.element, this.evEl, this.domHandler);
this.evTarget && removeEventListeners(this.target, this.evTarget, this.domHandler);
this.evWin && removeEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
}
}

View File

@@ -0,0 +1,59 @@
import prefixed from '../utils/prefixed';
import {window} from "../browser";
const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
const SUPPORT_TOUCH = ('ontouchstart' in window);
const SUPPORT_POINTER_EVENTS = prefixed(window, 'PointerEvent') !== undefined;
const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);
const INPUT_TYPE_TOUCH = 'touch';
const INPUT_TYPE_PEN = 'pen';
const INPUT_TYPE_MOUSE = 'mouse';
const INPUT_TYPE_KINECT = 'kinect';
const COMPUTE_INTERVAL = 25;
const INPUT_START = 1;
const INPUT_MOVE = 2;
const INPUT_END = 4;
const INPUT_CANCEL = 8;
const DIRECTION_NONE = 1;
const DIRECTION_LEFT = 2;
const DIRECTION_RIGHT = 4;
const DIRECTION_UP = 8;
const DIRECTION_DOWN = 16;
const DIRECTION_HORIZONTAL = DIRECTION_LEFT | DIRECTION_RIGHT;
const DIRECTION_VERTICAL = DIRECTION_UP | DIRECTION_DOWN;
const DIRECTION_ALL = DIRECTION_HORIZONTAL | DIRECTION_VERTICAL;
const PROPS_XY = ['x', 'y'];
const PROPS_CLIENT_XY = ['clientX', 'clientY'];
export {
MOBILE_REGEX,
SUPPORT_ONLY_TOUCH,
SUPPORT_POINTER_EVENTS,
SUPPORT_TOUCH,
INPUT_TYPE_KINECT,
INPUT_TYPE_MOUSE,
INPUT_TYPE_PEN,
INPUT_TYPE_TOUCH,
COMPUTE_INTERVAL,
INPUT_START,
INPUT_MOVE,
INPUT_END,
INPUT_CANCEL,
DIRECTION_NONE,
DIRECTION_LEFT,
DIRECTION_RIGHT,
DIRECTION_UP,
DIRECTION_DOWN,
DIRECTION_HORIZONTAL,
DIRECTION_VERTICAL,
DIRECTION_ALL,
PROPS_XY,
PROPS_CLIENT_XY
};

View File

@@ -0,0 +1,36 @@
import { INPUT_START,INPUT_END,INPUT_CANCEL } from './input-consts';
import computeInputData from './compute-input-data';
/**
* @private
* handle input events
* @param {Manager} manager
* @param {String} eventType
* @param {Object} input
*/
export default function inputHandler(manager, eventType, input) {
let pointersLen = input.pointers.length;
let changedPointersLen = input.changedPointers.length;
let isFirst = (eventType & INPUT_START && (pointersLen - changedPointersLen === 0));
let isFinal = (eventType & (INPUT_END | INPUT_CANCEL) && (pointersLen - changedPointersLen === 0));
input.isFirst = !!isFirst;
input.isFinal = !!isFinal;
if (isFirst) {
manager.session = {};
}
// source event is the normalized value of the domEvents
// like 'touchstart, mouseup, pointerdown'
input.eventType = eventType;
// compute scale, rotation etc
computeInputData(manager, input);
// emit secret event
manager.emit('hammer.input', input);
manager.recognize(input);
manager.session.prevInput = input;
}

View File

@@ -0,0 +1,30 @@
import { now,round } from '../utils/utils-consts';
import getCenter from './get-center';
/**
* @private
* create a simple clone from the input used for storage of firstInput and firstMultiple
* @param {Object} input
* @returns {Object} clonedInputData
*/
export default function simpleCloneInputData(input) {
// make a simple copy of the pointers because we will get a reference if we don't
// we only need clientXY for the calculations
let pointers = [];
let i = 0;
while (i < input.pointers.length) {
pointers[i] = {
clientX: round(input.pointers[i].clientX),
clientY: round(input.pointers[i].clientY)
};
i++;
}
return {
timeStamp: now(),
pointers,
center: getCenter(pointers),
deltaX: input.deltaX,
deltaY: input.deltaY
};
}

View File

@@ -0,0 +1,352 @@
import assign from "./utils/assign";
import TouchAction from "./touchactionjs/touchaction-constructor";
import createInputInstance from "./inputjs/create-input-instance";
import each from "./utils/each";
import inArray from "./utils/in-array";
import invokeArrayArg from "./utils/invoke-array-arg";
import splitStr from "./utils/split-str";
import prefixed from "./utils/prefixed";
import Recognizer from "./recognizerjs/recognizer-constructor";
import {
STATE_BEGAN,
STATE_ENDED,
STATE_CHANGED,
STATE_RECOGNIZED,
} from "./recognizerjs/recognizer-consts";
import defaults from "./defaults";
const STOP = 1;
const FORCED_STOP = 2;
/**
* @private
* add/remove the css properties as defined in manager.options.cssProps
* @param {Manager} manager
* @param {Boolean} add
*/
function toggleCssProps(manager, add) {
const { element } = manager;
if (!element.style) {
return;
}
let prop;
each(manager.options.cssProps, (value, name) => {
prop = prefixed(element.style, name);
if (add) {
manager.oldCssProps[prop] = element.style[prop];
element.style[prop] = value;
} else {
element.style[prop] = manager.oldCssProps[prop] || "";
}
});
if (!add) {
manager.oldCssProps = {};
}
}
/**
* @private
* trigger dom event
* @param {String} event
* @param {Object} data
*/
function triggerDomEvent(event, data) {
const gestureEvent = document.createEvent("Event");
gestureEvent.initEvent(event, true, true);
gestureEvent.gesture = data;
data.target.dispatchEvent(gestureEvent);
}
/**
* @private
* Manager
* @param {HTMLElement} element
* @param {Object} [options]
* @constructor
*/
export default class Manager {
constructor(element, options) {
this.options = assign({}, defaults, options || {});
this.options.inputTarget = this.options.inputTarget || element;
this.handlers = {};
this.session = {};
this.recognizers = [];
this.oldCssProps = {};
this.element = element;
this.input = createInputInstance(this);
this.touchAction = new TouchAction(this, this.options.touchAction);
toggleCssProps(this, true);
each(this.options.recognizers, item => {
const recognizer = this.add(new (item[0])(item[1]));
item[2] && recognizer.recognizeWith(item[2]);
item[3] && recognizer.requireFailure(item[3]);
}, this);
}
/**
* @private
* set options
* @param {Object} options
* @returns {Manager}
*/
set(options) {
assign(this.options, options);
// Options that need a little more setup
if (options.touchAction) {
this.touchAction.update();
}
if (options.inputTarget) {
// Clean up existing event listeners and reinitialize
this.input.destroy();
this.input.target = options.inputTarget;
this.input.init();
}
return this;
}
/**
* @private
* stop recognizing for this session.
* This session will be discarded, when a new [input]start event is fired.
* When forced, the recognizer cycle is stopped immediately.
* @param {Boolean} [force]
*/
stop(force) {
this.session.stopped = force ? FORCED_STOP : STOP;
}
/**
* @private
* run the recognizers!
* called by the inputHandler function on every movement of the pointers (touches)
* it walks through all the recognizers and tries to detect the gesture that is being made
* @param {Object} inputData
*/
recognize(inputData) {
const { session } = this;
if (session.stopped) {
return;
}
// run the touch-action polyfill
this.touchAction.preventDefaults(inputData);
let recognizer;
const { recognizers } = this;
// this holds the recognizer that is being recognized.
// so the recognizer's state needs to be BEGAN, CHANGED, ENDED or RECOGNIZED
// if no recognizer is detecting a thing, it is set to `null`
let { curRecognizer } = session;
// reset when the last recognizer is recognized
// or when we're in a new session
if (!curRecognizer || (curRecognizer && curRecognizer.state & STATE_RECOGNIZED)) {
session.curRecognizer = null;
curRecognizer = null;
}
let i = 0;
while (i < recognizers.length) {
recognizer = recognizers[i];
// find out if we are allowed try to recognize the input for this one.
// 1. allow if the session is NOT forced stopped (see the .stop() method)
// 2. allow if we still haven't recognized a gesture in this session, or the this recognizer is the one
// that is being recognized.
// 3. allow if the recognizer is allowed to run simultaneous with the current recognized recognizer.
// this can be setup with the `recognizeWith()` method on the recognizer.
if (session.stopped !== FORCED_STOP && (// 1
!curRecognizer || recognizer === curRecognizer || // 2
recognizer.canRecognizeWith(curRecognizer))) { // 3
recognizer.recognize(inputData);
} else {
recognizer.reset();
}
// if the recognizer has been recognizing the input as a valid gesture, we want to store this one as the
// current active recognizer. but only if we don't already have an active recognizer
if (!curRecognizer && recognizer.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED)) {
session.curRecognizer = recognizer;
curRecognizer = recognizer;
}
i++;
}
}
/**
* @private
* get a recognizer by its event name.
* @param {Recognizer|String} recognizer
* @returns {Recognizer|Null}
*/
get(recognizer) {
if (recognizer instanceof Recognizer) {
return recognizer;
}
const { recognizers } = this;
for (let i = 0; i < recognizers.length; i++) {
if (recognizers[i].options.event === recognizer) {
return recognizers[i];
}
}
return null;
}
/**
* @private add a recognizer to the manager
* existing recognizers with the same event name will be removed
* @param {Recognizer} recognizer
* @returns {Recognizer|Manager}
*/
add(recognizer) {
if (invokeArrayArg(recognizer, "add", this)) {
return this;
}
// remove existing
const existing = this.get(recognizer.options.event);
if (existing) {
this.remove(existing);
}
this.recognizers.push(recognizer);
recognizer.manager = this;
this.touchAction.update();
return recognizer;
}
/**
* @private
* remove a recognizer by name or instance
* @param {Recognizer|String} recognizer
* @returns {Manager}
*/
remove(recognizer) {
if (invokeArrayArg(recognizer, "remove", this)) {
return this;
}
const targetRecognizer = this.get(recognizer);
// let's make sure this recognizer exists
if (recognizer) {
const { recognizers } = this;
const index = inArray(recognizers, targetRecognizer);
if (index !== -1) {
recognizers.splice(index, 1);
this.touchAction.update();
}
}
return this;
}
/**
* @private
* bind event
* @param {String} events
* @param {Function} handler
* @returns {EventEmitter} this
*/
on(events, handler) {
if (events === undefined || handler === undefined) {
return this;
}
const { handlers } = this;
each(splitStr(events), event => {
handlers[event] = handlers[event] || [];
handlers[event].push(handler);
});
return this;
}
/**
* @private unbind event, leave emit blank to remove all handlers
* @param {String} events
* @param {Function} [handler]
* @returns {EventEmitter} this
*/
off(events, handler) {
if (events === undefined) {
return this;
}
const { handlers } = this;
each(splitStr(events), event => {
if (!handler) {
delete handlers[event];
} else {
handlers[event] && handlers[event].splice(inArray(handlers[event], handler), 1);
}
});
return this;
}
/**
* @private emit event to the listeners
* @param {String} event
* @param {Object} data
*/
emit(event, data) {
// we also want to trigger dom events
if (this.options.domEvents) {
triggerDomEvent(event, data);
}
// no handlers, so skip it all
const handlers = this.handlers[event] && this.handlers[event].slice();
if (!handlers || !handlers.length) {
return;
}
data.type = event;
data.preventDefault = function () {
data.srcEvent.preventDefault();
};
let i = 0;
while (i < handlers.length) {
handlers[i](data);
i++;
}
}
/**
* @private
* destroy the manager and unbinds all events
* it doesn't unbind dom events, that is the user own responsibility
*/
destroy() {
this.element && toggleCssProps(this, false);
this.handlers = {};
this.session = {};
this.input.destroy();
this.element = null;
}
}

View File

@@ -0,0 +1,25 @@
import {
DIRECTION_LEFT,
DIRECTION_RIGHT,
DIRECTION_UP,
DIRECTION_DOWN
} from '../inputjs/input-consts';
/**
* @private
* direction cons to string
* @param {constant} direction
* @returns {String}
*/
export default function directionStr(direction) {
if (direction === DIRECTION_DOWN) {
return 'down';
} else if (direction === DIRECTION_UP) {
return 'up';
} else if (direction === DIRECTION_LEFT) {
return 'left';
} else if (direction === DIRECTION_RIGHT) {
return 'right';
}
return '';
}

View File

@@ -0,0 +1,14 @@
/**
* @private
* get a recognizer by name if it is bound to a manager
* @param {Recognizer|String} otherRecognizer
* @param {Recognizer} recognizer
* @returns {Recognizer}
*/
export default function getRecognizerByNameIfManager(otherRecognizer, recognizer) {
let { manager } = recognizer;
if (manager) {
return manager.get(otherRecognizer);
}
return otherRecognizer;
}

View File

@@ -0,0 +1,300 @@
import {
STATE_POSSIBLE,
STATE_ENDED,
STATE_FAILED,
STATE_RECOGNIZED,
STATE_CANCELLED,
STATE_BEGAN,
STATE_CHANGED
} from './recognizer-consts';
import assign from '../utils/assign';
import uniqueId from '../utils/unique-id';
import invokeArrayArg from '../utils/invoke-array-arg';
import inArray from '../utils/in-array';
import boolOrFn from '../utils/bool-or-fn';
import getRecognizerByNameIfManager from './get-recognizer-by-name-if-manager';
import stateStr from './state-str';
/**
* @private
* Recognizer flow explained; *
* All recognizers have the initial state of POSSIBLE when a input session starts.
* The definition of a input session is from the first input until the last input, with all it's movement in it. *
* Example session for mouse-input: mousedown -> mousemove -> mouseup
*
* On each recognizing cycle (see Manager.recognize) the .recognize() method is executed
* which determines with state it should be.
*
* If the recognizer has the state FAILED, CANCELLED or RECOGNIZED (equals ENDED), it is reset to
* POSSIBLE to give it another change on the next cycle.
*
* Possible
* |
* +-----+---------------+
* | |
* +-----+-----+ |
* | | |
* Failed Cancelled |
* +-------+------+
* | |
* Recognized Began
* |
* Changed
* |
* Ended/Recognized
*/
/**
* @private
* Recognizer
* Every recognizer needs to extend from this class.
* @constructor
* @param {Object} options
*/
export default class Recognizer {
constructor(options = {}) {
this.options = {
enable: true,
...options,
};
this.id = uniqueId();
this.manager = null;
// default is enable true
this.state = STATE_POSSIBLE;
this.simultaneous = {};
this.requireFail = [];
}
/**
* @private
* set options
* @param {Object} options
* @return {Recognizer}
*/
set(options) {
assign(this.options, options);
// also update the touchAction, in case something changed about the directions/enabled state
this.manager && this.manager.touchAction.update();
return this;
}
/**
* @private
* recognize simultaneous with an other recognizer.
* @param {Recognizer} otherRecognizer
* @returns {Recognizer} this
*/
recognizeWith(otherRecognizer) {
if (invokeArrayArg(otherRecognizer, 'recognizeWith', this)) {
return this;
}
let { simultaneous } = this;
otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
if (!simultaneous[otherRecognizer.id]) {
simultaneous[otherRecognizer.id] = otherRecognizer;
otherRecognizer.recognizeWith(this);
}
return this;
}
/**
* @private
* drop the simultaneous link. it doesnt remove the link on the other recognizer.
* @param {Recognizer} otherRecognizer
* @returns {Recognizer} this
*/
dropRecognizeWith(otherRecognizer) {
if (invokeArrayArg(otherRecognizer, 'dropRecognizeWith', this)) {
return this;
}
otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
delete this.simultaneous[otherRecognizer.id];
return this;
}
/**
* @private
* recognizer can only run when an other is failing
* @param {Recognizer} otherRecognizer
* @returns {Recognizer} this
*/
requireFailure(otherRecognizer) {
if (invokeArrayArg(otherRecognizer, 'requireFailure', this)) {
return this;
}
let { requireFail } = this;
otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
if (inArray(requireFail, otherRecognizer) === -1) {
requireFail.push(otherRecognizer);
otherRecognizer.requireFailure(this);
}
return this;
}
/**
* @private
* drop the requireFailure link. it does not remove the link on the other recognizer.
* @param {Recognizer} otherRecognizer
* @returns {Recognizer} this
*/
dropRequireFailure(otherRecognizer) {
if (invokeArrayArg(otherRecognizer, 'dropRequireFailure', this)) {
return this;
}
otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
let index = inArray(this.requireFail, otherRecognizer);
if (index > -1) {
this.requireFail.splice(index, 1);
}
return this;
}
/**
* @private
* has require failures boolean
* @returns {boolean}
*/
hasRequireFailures() {
return this.requireFail.length > 0;
}
/**
* @private
* if the recognizer can recognize simultaneous with an other recognizer
* @param {Recognizer} otherRecognizer
* @returns {Boolean}
*/
canRecognizeWith(otherRecognizer) {
return !!this.simultaneous[otherRecognizer.id];
}
/**
* @private
* You should use `tryEmit` instead of `emit` directly to check
* that all the needed recognizers has failed before emitting.
* @param {Object} input
*/
emit(input) {
let self = this;
let { state } = this;
function emit(event) {
self.manager.emit(event, input);
}
// 'panstart' and 'panmove'
if (state < STATE_ENDED) {
emit(self.options.event + stateStr(state));
}
emit(self.options.event); // simple 'eventName' events
if (input.additionalEvent) { // additional event(panleft, panright, pinchin, pinchout...)
emit(input.additionalEvent);
}
// panend and pancancel
if (state >= STATE_ENDED) {
emit(self.options.event + stateStr(state));
}
}
/**
* @private
* Check that all the require failure recognizers has failed,
* if true, it emits a gesture event,
* otherwise, setup the state to FAILED.
* @param {Object} input
*/
tryEmit(input) {
if (this.canEmit()) {
return this.emit(input);
}
// it's failing anyway
this.state = STATE_FAILED;
}
/**
* @private
* can we emit?
* @returns {boolean}
*/
canEmit() {
let i = 0;
while (i < this.requireFail.length) {
if (!(this.requireFail[i].state & (STATE_FAILED | STATE_POSSIBLE))) {
return false;
}
i++;
}
return true;
}
/**
* @private
* update the recognizer
* @param {Object} inputData
*/
recognize(inputData) {
// make a new copy of the inputData
// so we can change the inputData without messing up the other recognizers
let inputDataClone = assign({}, inputData);
// is is enabled and allow recognizing?
if (!boolOrFn(this.options.enable, [this, inputDataClone])) {
this.reset();
this.state = STATE_FAILED;
return;
}
// reset when we've reached the end
if (this.state & (STATE_RECOGNIZED | STATE_CANCELLED | STATE_FAILED)) {
this.state = STATE_POSSIBLE;
}
this.state = this.process(inputDataClone);
// the recognizer has recognized a gesture
// so trigger an event
if (this.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED | STATE_CANCELLED)) {
this.tryEmit(inputDataClone);
}
}
/**
* @private
* return the state of the recognizer
* the actual recognizing happens in this method
* @virtual
* @param {Object} inputData
* @returns {constant} STATE
*/
/* jshint ignore:start */
process(inputData) { }
/* jshint ignore:end */
/**
* @private
* return the preferred touch-action
* @virtual
* @returns {Array}
*/
getTouchAction() { }
/**
* @private
* called when the gesture isn't allowed to recognize
* like when another is being recognized or it is disabled
* @virtual
*/
reset() { }
}

View File

@@ -0,0 +1,17 @@
const STATE_POSSIBLE = 1;
const STATE_BEGAN = 2;
const STATE_CHANGED = 4;
const STATE_ENDED = 8;
const STATE_RECOGNIZED = STATE_ENDED;
const STATE_CANCELLED = 16;
const STATE_FAILED = 32;
export {
STATE_POSSIBLE,
STATE_BEGAN,
STATE_CHANGED,
STATE_ENDED,
STATE_RECOGNIZED,
STATE_CANCELLED,
STATE_FAILED
};

View File

@@ -0,0 +1,25 @@
import {
STATE_CANCELLED,
STATE_ENDED,
STATE_CHANGED,
STATE_BEGAN
} from './recognizer-consts';
/**
* @private
* get a usable string, used as event postfix
* @param {constant} state
* @returns {String} state
*/
export default function stateStr(state) {
if (state & STATE_CANCELLED) {
return 'cancel';
} else if (state & STATE_ENDED) {
return 'end';
} else if (state & STATE_CHANGED) {
return 'move';
} else if (state & STATE_BEGAN) {
return 'start';
}
return '';
}

View File

@@ -0,0 +1,67 @@
import Recognizer from '../recognizerjs/recognizer-constructor';
import {
STATE_BEGAN,
STATE_CHANGED,
STATE_CANCELLED,
STATE_ENDED,
STATE_FAILED
} from '../recognizerjs/recognizer-consts';
import {
INPUT_CANCEL,
INPUT_END
} from '../inputjs/input-consts';
/**
* @private
* This recognizer is just used as a base for the simple attribute recognizers.
* @constructor
* @extends Recognizer
*/
export default class AttrRecognizer extends Recognizer {
constructor(options = {}) {
super({
pointers: 1,
...options,
});
}
/**
* @private
* Used to check if it the recognizer receives valid input, like input.distance > 10.
* @memberof AttrRecognizer
* @param {Object} input
* @returns {Boolean} recognized
*/
attrTest(input) {
let optionPointers = this.options.pointers;
return optionPointers === 0 || input.pointers.length === optionPointers;
}
/**
* @private
* Process the input and return the state for the recognizer
* @memberof AttrRecognizer
* @param {Object} input
* @returns {*} State
*/
process(input) {
let { state } = this;
let { eventType } = input;
let isRecognized = state & (STATE_BEGAN | STATE_CHANGED);
let isValid = this.attrTest(input);
// on cancel input and we've recognized before, return STATE_CANCELLED
if (isRecognized && (eventType & INPUT_CANCEL || !isValid)) {
return state | STATE_CANCELLED;
} else if (isRecognized || isValid) {
if (eventType & INPUT_END) {
return state | STATE_ENDED;
} else if (!(state & STATE_BEGAN)) {
return STATE_BEGAN;
}
return state | STATE_CHANGED;
}
return STATE_FAILED;
}
}

View File

@@ -0,0 +1,89 @@
import AttrRecognizer from './attribute';
import {
DIRECTION_ALL,
DIRECTION_HORIZONTAL,
DIRECTION_VERTICAL,
DIRECTION_NONE,
DIRECTION_UP,
DIRECTION_DOWN,
DIRECTION_LEFT,
DIRECTION_RIGHT
} from '../inputjs/input-consts';
import { STATE_BEGAN } from '../recognizerjs/recognizer-consts';
import { TOUCH_ACTION_PAN_X,TOUCH_ACTION_PAN_Y } from '../touchactionjs/touchaction-Consts';
import directionStr from '../recognizerjs/direction-str';
/**
* @private
* Pan
* Recognized when the pointer is down and moved in the allowed direction.
* @constructor
* @extends AttrRecognizer
*/
export default class PanRecognizer extends AttrRecognizer {
constructor(options = {}) {
super({
event: 'pan',
threshold: 10,
pointers: 1,
direction: DIRECTION_ALL,
...options,
});
this.pX = null;
this.pY = null;
}
getTouchAction() {
let { options:{ direction } } = this;
let actions = [];
if (direction & DIRECTION_HORIZONTAL) {
actions.push(TOUCH_ACTION_PAN_Y);
}
if (direction & DIRECTION_VERTICAL) {
actions.push(TOUCH_ACTION_PAN_X);
}
return actions;
}
directionTest(input) {
let { options } = this;
let hasMoved = true;
let { distance } = input;
let { direction } = input;
let x = input.deltaX;
let y = input.deltaY;
// lock to axis?
if (!(direction & options.direction)) {
if (options.direction & DIRECTION_HORIZONTAL) {
direction = (x === 0) ? DIRECTION_NONE : (x < 0) ? DIRECTION_LEFT : DIRECTION_RIGHT;
hasMoved = x !== this.pX;
distance = Math.abs(input.deltaX);
} else {
direction = (y === 0) ? DIRECTION_NONE : (y < 0) ? DIRECTION_UP : DIRECTION_DOWN;
hasMoved = y !== this.pY;
distance = Math.abs(input.deltaY);
}
}
input.direction = direction;
return hasMoved && distance > options.threshold && direction & options.direction;
}
attrTest(input) {
return AttrRecognizer.prototype.attrTest.call(this, input) && // replace with a super call
(this.state & STATE_BEGAN || (!(this.state & STATE_BEGAN) && this.directionTest(input)));
}
emit(input) {
this.pX = input.deltaX;
this.pY = input.deltaY;
let direction = directionStr(input.direction);
if (direction) {
input.additionalEvent = this.options.event + direction;
}
super.emit(input);
}
}

View File

@@ -0,0 +1,38 @@
import AttrRecognizer from './attribute';
import { TOUCH_ACTION_NONE } from '../touchactionjs/touchaction-Consts';
import { STATE_BEGAN } from '../recognizerjs/recognizer-consts';
/**
* @private
* Pinch
* Recognized when two or more pointers are moving toward (zoom-in) or away from each other (zoom-out).
* @constructor
* @extends AttrRecognizer
*/
export default class PinchRecognizer extends AttrRecognizer {
constructor(options = {}) {
super({
event: 'pinch',
threshold: 0,
pointers: 2,
...options,
});
}
getTouchAction() {
return [TOUCH_ACTION_NONE];
}
attrTest(input) {
return super.attrTest(input) &&
(Math.abs(input.scale - 1) > this.options.threshold || this.state & STATE_BEGAN);
}
emit(input) {
if (input.scale !== 1) {
let inOut = input.scale < 1 ? 'in' : 'out';
input.additionalEvent = this.options.event + inOut;
}
super.emit(input);
}
}

View File

@@ -0,0 +1,79 @@
import Recognizer from '../recognizerjs/recognizer-constructor';
import {
STATE_RECOGNIZED,
STATE_FAILED
} from '../recognizerjs/recognizer-consts';
import { now } from '../utils/utils-consts';
import { TOUCH_ACTION_AUTO } from '../touchactionjs/touchaction-Consts';
import {
INPUT_START,
INPUT_END,
INPUT_CANCEL
} from '../inputjs/input-consts';
/**
* @private
* Press
* Recognized when the pointer is down for x ms without any movement.
* @constructor
* @extends Recognizer
*/
export default class PressRecognizer extends Recognizer {
constructor(options = {}) {
super({
event: 'press',
pointers: 1,
time: 251, // minimal time of the pointer to be pressed
threshold: 9, // a minimal movement is ok, but keep it low
...options,
});
this._timer = null;
this._input = null;
}
getTouchAction() {
return [TOUCH_ACTION_AUTO];
}
process(input) {
let { options } = this;
let validPointers = input.pointers.length === options.pointers;
let validMovement = input.distance < options.threshold;
let validTime = input.deltaTime > options.time;
this._input = input;
// we only allow little movement
// and we've reached an end event, so a tap is possible
if (!validMovement || !validPointers || (input.eventType & (INPUT_END | INPUT_CANCEL) && !validTime)) {
this.reset();
} else if (input.eventType & INPUT_START) {
this.reset();
this._timer = setTimeout(() => {
this.state = STATE_RECOGNIZED;
this.tryEmit();
}, options.time);
} else if (input.eventType & INPUT_END) {
return STATE_RECOGNIZED;
}
return STATE_FAILED;
}
reset() {
clearTimeout(this._timer);
}
emit(input) {
if (this.state !== STATE_RECOGNIZED) {
return;
}
if (input && (input.eventType & INPUT_END)) {
this.manager.emit(`${this.options.event}up`, input);
} else {
this._input.timeStamp = now();
this.manager.emit(this.options.event, this._input);
}
}
}

View File

@@ -0,0 +1,30 @@
import AttrRecognizer from './attribute';
import { TOUCH_ACTION_NONE } from '../touchactionjs/touchaction-Consts';
import { STATE_BEGAN } from '../recognizerjs/recognizer-consts';
/**
* @private
* Rotate
* Recognized when two or more pointer are moving in a circular motion.
* @constructor
* @extends AttrRecognizer
*/
export default class RotateRecognizer extends AttrRecognizer {
constructor(options = {}) {
super( {
event: 'rotate',
threshold: 0,
pointers: 2,
...options,
});
}
getTouchAction() {
return [TOUCH_ACTION_NONE];
}
attrTest(input) {
return super.attrTest(input) &&
(Math.abs(input.rotation) > this.options.threshold || this.state & STATE_BEGAN);
}
}

View File

@@ -0,0 +1,58 @@
import AttrRecognizer from '../recognizers/attribute';
import { abs } from '../utils/utils-consts';
import { DIRECTION_HORIZONTAL,DIRECTION_VERTICAL } from '../inputjs/input-consts';
import PanRecognizer from './pan';
import { INPUT_END } from '../inputjs/input-consts';
import directionStr from '../recognizerjs/direction-str';
/**
* @private
* Swipe
* Recognized when the pointer is moving fast (velocity), with enough distance in the allowed direction.
* @constructor
* @extends AttrRecognizer
*/
export default class SwipeRecognizer extends AttrRecognizer {
constructor(options = {}) {
super({
event: 'swipe',
threshold: 10,
velocity: 0.3,
direction: DIRECTION_HORIZONTAL | DIRECTION_VERTICAL,
pointers: 1,
...options,
});
}
getTouchAction() {
return PanRecognizer.prototype.getTouchAction.call(this);
}
attrTest(input) {
let { direction } = this.options;
let velocity;
if (direction & (DIRECTION_HORIZONTAL | DIRECTION_VERTICAL)) {
velocity = input.overallVelocity;
} else if (direction & DIRECTION_HORIZONTAL) {
velocity = input.overallVelocityX;
} else if (direction & DIRECTION_VERTICAL) {
velocity = input.overallVelocityY;
}
return super.attrTest(input) &&
direction & input.offsetDirection &&
input.distance > this.options.threshold &&
input.maxPointers === this.options.pointers &&
abs(velocity) > this.options.velocity && input.eventType & INPUT_END;
}
emit(input) {
let direction = directionStr(input.offsetDirection);
if (direction) {
this.manager.emit(this.options.event + direction, input);
}
this.manager.emit(this.options.event, input);
}
}

View File

@@ -0,0 +1,120 @@
import Recognizer from '../recognizerjs/recognizer-constructor';
import { TOUCH_ACTION_MANIPULATION } from '../touchactionjs/touchaction-Consts';
import {INPUT_START,INPUT_END } from '../inputjs/input-consts';
import {
STATE_RECOGNIZED,
STATE_BEGAN,
STATE_FAILED
} from '../recognizerjs/recognizer-consts';
import getDistance from '../inputjs/get-distance';
/**
* @private
* A tap is recognized when the pointer is doing a small tap/click. Multiple taps are recognized if they occur
* between the given interval and position. The delay option can be used to recognize multi-taps without firing
* a single tap.
*
* The eventData from the emitted event contains the property `tapCount`, which contains the amount of
* multi-taps being recognized.
* @constructor
* @extends Recognizer
*/
export default class TapRecognizer extends Recognizer {
constructor(options = {}) {
super({
event: 'tap',
pointers: 1,
taps: 1,
interval: 300, // max time between the multi-tap taps
time: 250, // max time of the pointer to be down (like finger on the screen)
threshold: 9, // a minimal movement is ok, but keep it low
posThreshold: 10, // a multi-tap can be a bit off the initial position
...options,
});
// previous time and center,
// used for tap counting
this.pTime = false;
this.pCenter = false;
this._timer = null;
this._input = null;
this.count = 0;
}
getTouchAction() {
return [TOUCH_ACTION_MANIPULATION];
}
process(input) {
let { options } = this;
let validPointers = input.pointers.length === options.pointers;
let validMovement = input.distance < options.threshold;
let validTouchTime = input.deltaTime < options.time;
this.reset();
if ((input.eventType & INPUT_START) && (this.count === 0)) {
return this.failTimeout();
}
// we only allow little movement
// and we've reached an end event, so a tap is possible
if (validMovement && validTouchTime && validPointers) {
if (input.eventType !== INPUT_END) {
return this.failTimeout();
}
let validInterval = this.pTime ? (input.timeStamp - this.pTime < options.interval) : true;
let validMultiTap = !this.pCenter || getDistance(this.pCenter, input.center) < options.posThreshold;
this.pTime = input.timeStamp;
this.pCenter = input.center;
if (!validMultiTap || !validInterval) {
this.count = 1;
} else {
this.count += 1;
}
this._input = input;
// if tap count matches we have recognized it,
// else it has began recognizing...
let tapCount = this.count % options.taps;
if (tapCount === 0) {
// no failing requirements, immediately trigger the tap event
// or wait as long as the multitap interval to trigger
if (!this.hasRequireFailures()) {
return STATE_RECOGNIZED;
} else {
this._timer = setTimeout(() => {
this.state = STATE_RECOGNIZED;
this.tryEmit();
}, options.interval);
return STATE_BEGAN;
}
}
}
return STATE_FAILED;
}
failTimeout() {
this._timer = setTimeout(() => {
this.state = STATE_FAILED;
}, this.options.interval);
return STATE_FAILED;
}
reset() {
clearTimeout(this._timer);
}
emit() {
if (this.state === STATE_RECOGNIZED) {
this._input.tapCount = this.count;
this.manager.emit(this.options.event, this._input);
}
}
}

View File

@@ -0,0 +1,44 @@
import inStr from '../utils/in-str';
import {
TOUCH_ACTION_NONE,
TOUCH_ACTION_PAN_X,
TOUCH_ACTION_PAN_Y,
TOUCH_ACTION_MANIPULATION,
TOUCH_ACTION_AUTO
} from './touchaction-Consts';
/**
* @private
* when the touchActions are collected they are not a valid value, so we need to clean things up. *
* @param {String} actions
* @returns {*}
*/
export default function cleanTouchActions(actions) {
// none
if (inStr(actions, TOUCH_ACTION_NONE)) {
return TOUCH_ACTION_NONE;
}
let hasPanX = inStr(actions, TOUCH_ACTION_PAN_X);
let hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y);
// if both pan-x and pan-y are set (different recognizers
// for different directions, e.g. horizontal pan but vertical swipe?)
// we need none (as otherwise with pan-x pan-y combined none of these
// recognizers will work, since the browser would handle all panning
if (hasPanX && hasPanY) {
return TOUCH_ACTION_NONE;
}
// pan-x OR pan-y
if (hasPanX || hasPanY) {
return hasPanX ? TOUCH_ACTION_PAN_X : TOUCH_ACTION_PAN_Y;
}
// manipulation
if (inStr(actions, TOUCH_ACTION_MANIPULATION)) {
return TOUCH_ACTION_MANIPULATION;
}
return TOUCH_ACTION_AUTO;
}

View File

@@ -0,0 +1,21 @@
import prefixed from '../utils/prefixed';
import { TEST_ELEMENT } from '../utils/utils-consts';
import {window} from '../browser';
export const PREFIXED_TOUCH_ACTION = prefixed(TEST_ELEMENT.style, 'touchAction');
export const NATIVE_TOUCH_ACTION = PREFIXED_TOUCH_ACTION !== undefined;
export default function getTouchActionProps() {
if (!NATIVE_TOUCH_ACTION) {
return false;
}
let touchMap = {};
let cssSupports = window.CSS && window.CSS.supports;
['auto', 'manipulation', 'pan-y', 'pan-x', 'pan-x pan-y', 'none'].forEach((val) => {
// If css.supports is not supported but there is native touch-action assume it supports
// all values. This is the case for IE 10 and 11.
return touchMap[val] = cssSupports ? window.CSS.supports('touch-action', val) : true;
});
return touchMap;
}

View File

@@ -0,0 +1,22 @@
import getTouchActionProps from './get-touchaction-props';
// magical touchAction value
const TOUCH_ACTION_COMPUTE = 'compute';
const TOUCH_ACTION_AUTO = 'auto';
const TOUCH_ACTION_MANIPULATION = 'manipulation'; // not implemented
const TOUCH_ACTION_NONE = 'none';
const TOUCH_ACTION_PAN_X = 'pan-x';
const TOUCH_ACTION_PAN_Y = 'pan-y';
const TOUCH_ACTION_MAP = getTouchActionProps();
export {
TOUCH_ACTION_AUTO,
TOUCH_ACTION_COMPUTE,
TOUCH_ACTION_MANIPULATION,
TOUCH_ACTION_NONE,
TOUCH_ACTION_PAN_X,
TOUCH_ACTION_PAN_Y,
TOUCH_ACTION_MAP
};

View File

@@ -0,0 +1,127 @@
import {
TOUCH_ACTION_COMPUTE,
TOUCH_ACTION_MAP,
TOUCH_ACTION_NONE,
TOUCH_ACTION_PAN_X,
TOUCH_ACTION_PAN_Y
} from './touchaction-Consts';
import {
NATIVE_TOUCH_ACTION,
PREFIXED_TOUCH_ACTION,
} from "./get-touchaction-props";
import {
DIRECTION_VERTICAL,
DIRECTION_HORIZONTAL
} from '../inputjs/input-consts';
import each from '../utils/each';
import boolOrFn from '../utils/bool-or-fn';
import inStr from '../utils/in-str';
import cleanTouchActions from './clean-touch-actions';
/**
* @private
* Touch Action
* sets the touchAction property or uses the js alternative
* @param {Manager} manager
* @param {String} value
* @constructor
*/
export default class TouchAction {
constructor(manager, value) {
this.manager = manager;
this.set(value);
}
/**
* @private
* set the touchAction value on the element or enable the polyfill
* @param {String} value
*/
set(value) {
// find out the touch-action by the event handlers
if (value === TOUCH_ACTION_COMPUTE) {
value = this.compute();
}
if (NATIVE_TOUCH_ACTION && this.manager.element.style && TOUCH_ACTION_MAP[value]) {
this.manager.element.style[PREFIXED_TOUCH_ACTION] = value;
}
this.actions = value.toLowerCase().trim();
}
/**
* @private
* just re-set the touchAction value
*/
update() {
this.set(this.manager.options.touchAction);
}
/**
* @private
* compute the value for the touchAction property based on the recognizer's settings
* @returns {String} value
*/
compute() {
let actions = [];
each(this.manager.recognizers, (recognizer) => {
if (boolOrFn(recognizer.options.enable, [recognizer])) {
actions = actions.concat(recognizer.getTouchAction());
}
});
return cleanTouchActions(actions.join(' '));
}
/**
* @private
* this method is called on each input cycle and provides the preventing of the browser behavior
* @param {Object} input
*/
preventDefaults(input) {
let { srcEvent } = input;
let direction = input.offsetDirection;
// if the touch action did prevented once this session
if (this.manager.session.prevented) {
srcEvent.preventDefault();
return;
}
let { actions } = this;
let hasNone = inStr(actions, TOUCH_ACTION_NONE) && !TOUCH_ACTION_MAP[TOUCH_ACTION_NONE];
let hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_Y];
let hasPanX = inStr(actions, TOUCH_ACTION_PAN_X) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_X];
if (hasNone) {
// do not prevent defaults if this is a tap gesture
let isTapPointer = input.pointers.length === 1;
let isTapMovement = input.distance < 2;
let isTapTouchTime = input.deltaTime < 250;
if (isTapPointer && isTapMovement && isTapTouchTime) {
return;
}
}
if (hasPanX && hasPanY) {
// `pan-x pan-y` means browser handles all scrolling/panning, do not prevent
return;
}
if (hasNone ||
(hasPanY && direction & DIRECTION_HORIZONTAL) ||
(hasPanX && direction & DIRECTION_VERTICAL)) {
return this.preventSrc(srcEvent);
}
}
/**
* @private
* call preventDefault to prevent the browser's default behavior (scrolling in most cases)
* @param {Object} srcEvent
*/
preventSrc(srcEvent) {
this.manager.session.prevented = true;
srcEvent.preventDefault();
}
}

View File

@@ -0,0 +1,14 @@
import each from './each';
import splitStr from './split-str';
/**
* @private
* addEventListener with multiple events at once
* @param {EventTarget} target
* @param {String} types
* @param {Function} handler
*/
export default function addEventListeners(target, types, handler) {
each(splitStr(types), (type) => {
target.addEventListener(type, handler, false);
});
}

View File

@@ -0,0 +1,33 @@
/**
* @private
* extend object.
* means that properties in dest will be overwritten by the ones in src.
* @param {Object} target
* @param {...Object} objects_to_assign
* @returns {Object} target
*/
let assign;
if (typeof Object.assign !== 'function') {
assign = function assign(target) {
if (target === undefined || target === null) {
throw new TypeError('Cannot convert undefined or null to object');
}
let output = Object(target);
for (let index = 1; index < arguments.length; index++) {
const source = arguments[index];
if (source !== undefined && source !== null) {
for (const nextKey in source) {
if (source.hasOwnProperty(nextKey)) {
output[nextKey] = source[nextKey];
}
}
}
}
return output;
};
} else {
assign = Object.assign;
}
export default assign;

View File

@@ -0,0 +1,12 @@
/**
* @private
* simple function bind
* @param {Function} fn
* @param {Object} context
* @returns {Function}
*/
export default function bindFn(fn, context) {
return function boundFn() {
return fn.apply(context, arguments);
};
}

View File

@@ -0,0 +1,15 @@
import { TYPE_FUNCTION } from './utils-consts';
/**
* @private
* let a boolean value also be a function that must return a boolean
* this first item in args will be used as the context
* @param {Boolean|Function} val
* @param {Array} [args]
* @returns {Boolean}
*/
export default function boolOrFn(val, args) {
if (typeof val === TYPE_FUNCTION) {
return val.apply(args ? args[0] || undefined : undefined, args);
}
return val;
}

View File

@@ -0,0 +1,23 @@
/**
* @private
* wrap a method with a deprecation warning and stack trace
* @param {Function} method
* @param {String} name
* @param {String} message
* @returns {Function} A new function wrapping the supplied method.
*/
export default function deprecate(method, name, message) {
let deprecationMessage = `DEPRECATED METHOD: ${name}\n${message} AT \n`;
return function() {
let e = new Error('get-stack-trace');
let stack = e && e.stack ? e.stack.replace(/^[^\(]+?[\n$]/gm, '')
.replace(/^\s+at\s+/gm, '')
.replace(/^Object.<anonymous>\s*\(/gm, '{anonymous}()@') : 'Unknown Stack Trace';
let log = window.console && (window.console.warn || window.console.log);
if (log) {
log.call(window.console, deprecationMessage, stack);
}
return method.apply(this, arguments);
};
}

View File

@@ -0,0 +1,28 @@
/**
* @private
* walk objects and arrays
* @param {Object} obj
* @param {Function} iterator
* @param {Object} context
*/
export default function each(obj, iterator, context) {
let i;
if (!obj) {
return;
}
if (obj.forEach) {
obj.forEach(iterator, context);
} else if (obj.length !== undefined) {
i = 0;
while (i < obj.length) {
iterator.call(context, obj[i], i, obj);
i++;
}
} else {
for (i in obj) {
obj.hasOwnProperty(i) && iterator.call(context, obj[i], i, obj);
}
}
}

View File

@@ -0,0 +1,23 @@
import deprecate from './deprecate';
/**
* @private
* extend object.
* means that properties in dest will be overwritten by the ones in src.
* @param {Object} dest
* @param {Object} src
* @param {Boolean} [merge=false]
* @returns {Object} dest
*/
const extend = deprecate((dest, src, merge) => {
let keys = Object.keys(src);
let i = 0;
while (i < keys.length) {
if (!merge || (merge && dest[keys[i]] === undefined)) {
dest[keys[i]] = src[keys[i]];
}
i++;
}
return dest;
}, 'extend', 'Use `assign`.');
export default extend;

View File

@@ -0,0 +1,10 @@
/**
* @private
* get the window object of an element
* @param {HTMLElement} element
* @returns {DocumentView|Window}
*/
export default function getWindowForElement(element) {
let doc = element.ownerDocument || element;
return (doc.defaultView || doc.parentWindow || window);
}

View File

@@ -0,0 +1,17 @@
/**
* @private
* find if a node is in the given parent
* @method hasParent
* @param {HTMLElement} node
* @param {HTMLElement} parent
* @return {Boolean} found
*/
export default function hasParent(node, parent) {
while (node) {
if (node === parent) {
return true;
}
node = node.parentNode;
}
return false;
}

View File

@@ -0,0 +1,10 @@
/**
* @private
* use the val2 when val1 is undefined
* @param {*} val1
* @param {*} val2
* @returns {*}
*/
export default function ifUndefined(val1, val2) {
return (val1 === undefined) ? val2 : val1;
}

View File

@@ -0,0 +1,22 @@
/**
* @private
* find if a array contains the object using indexOf or a simple polyFill
* @param {Array} src
* @param {String} find
* @param {String} [findByKey]
* @return {Boolean|Number} false when not found, or the index
*/
export default function inArray(src, find, findByKey) {
if (src.indexOf && !findByKey) {
return src.indexOf(find);
} else {
let i = 0;
while (i < src.length) {
if ((findByKey && src[i][findByKey] == find) || (!findByKey && src[i] === find)) {// do not use === here, test fails
return i;
}
i++;
}
return -1;
}
}

View File

@@ -0,0 +1,10 @@
/**
* @private
* small indexOf wrapper
* @param {String} str
* @param {String} find
* @returns {Boolean} found
*/
export default function inStr(str, find) {
return str.indexOf(find) > -1;
}

View File

@@ -0,0 +1,20 @@
import assign from './assign';
/**
* @private
* simple class inheritance
* @param {Function} child
* @param {Function} base
* @param {Object} [properties]
*/
export default function inherit(child, base, properties) {
let baseP = base.prototype;
let childP;
childP = child.prototype = Object.create(baseP);
childP.constructor = child;
childP._super = baseP;
if (properties) {
assign(childP, properties);
}
}

View File

@@ -0,0 +1,18 @@
import each from './each';
/**
* @private
* if the argument is an array, we want to execute the fn on each entry
* if it aint an array we don't want to do a thing.
* this is used by all the methods that accept a single and array argument.
* @param {*|Array} arg
* @param {String} fn
* @param {Object} [context]
* @returns {Boolean}
*/
export default function invokeArrayArg(arg, fn, context) {
if (Array.isArray(arg)) {
each(arg, context[fn], context);
return true;
}
return false;
}

View File

@@ -0,0 +1,15 @@
import deprecate from './deprecate';
import extend from './extend';
/**
* @private
* merge the values from src in the dest.
* means that properties that exist in dest will not be overwritten by src
* @param {Object} dest
* @param {Object} src
* @returns {Object} dest
*/
const merge = deprecate((dest, src) => {
return extend(dest, src, true);
}, 'merge', 'Use `assign`.');
export default merge;

View File

@@ -0,0 +1,25 @@
import { VENDOR_PREFIXES } from './utils-consts';
/**
* @private
* get the prefixed property
* @param {Object} obj
* @param {String} property
* @returns {String|Undefined} prefixed
*/
export default function prefixed(obj, property) {
let prefix;
let prop;
let camelProp = property[0].toUpperCase() + property.slice(1);
let i = 0;
while (i < VENDOR_PREFIXES.length) {
prefix = VENDOR_PREFIXES[i];
prop = (prefix) ? prefix + camelProp : property;
if (prop in obj) {
return prop;
}
i++;
}
return undefined;
}

View File

@@ -0,0 +1,14 @@
import each from './each';
import splitStr from './split-str';
/**
* @private
* removeEventListener with multiple events at once
* @param {EventTarget} target
* @param {String} types
* @param {Function} handler
*/
export default function removeEventListeners(target, types, handler) {
each(splitStr(types), (type) => {
target.removeEventListener(type, handler, false);
});
}

View File

@@ -0,0 +1,13 @@
import bindFn from './bind-fn';
/**
* @private
* set a timeout with a given scope
* @param {Function} fn
* @param {Number} timeout
* @param {Object} context
* @returns {number}
*/
export default function setTimeoutContext(fn, timeout, context) {
return setTimeout(bindFn(fn, context), timeout);
}

View File

@@ -0,0 +1,10 @@
/**
* @private
* split string on whitespace
* @param {String} str
* @returns {Array} words
*/
export default function splitStr(str) {
return str.trim().split(/\s+/g);
}

View File

@@ -0,0 +1,9 @@
/**
* @private
* convert array-like objects to real arrays
* @param {Object} obj
* @returns {Array}
*/
export default function toArray(obj) {
return Array.prototype.slice.call(obj, 0);
}

View File

@@ -0,0 +1,36 @@
import inArray from './in-array';
/**
* @private
* unique array with objects based on a key (like 'id') or just by the array's value
* @param {Array} src [{id:1},{id:2},{id:1}]
* @param {String} [key]
* @param {Boolean} [sort=False]
* @returns {Array} [{id:1},{id:2}]
*/
export default function uniqueArray(src, key, sort) {
let results = [];
let values = [];
let i = 0;
while (i < src.length) {
let val = key ? src[i][key] : src[i];
if (inArray(values, val) < 0) {
results.push(src[i]);
}
values[i] = val;
i++;
}
if (sort) {
if (!key) {
results = results.sort();
} else {
results = results.sort((a, b) => {
return a[key] > b[key];
});
}
}
return results;
}

View File

@@ -0,0 +1,9 @@
/**
* @private
* get a unique id
* @returns {number} uniqueId
*/
let _uniqueId = 1;
export default function uniqueId() {
return _uniqueId++;
}

View File

@@ -0,0 +1,17 @@
const VENDOR_PREFIXES = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];
const TEST_ELEMENT = typeof document === "undefined" ? {style: {}} : document.createElement('div');
const TYPE_FUNCTION = 'function';
const { round, abs } = Math;
const { now } = Date;
export {
VENDOR_PREFIXES,
TEST_ELEMENT,
TYPE_FUNCTION,
round,
abs,
now
};