Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

gesto

Package Overview
Dependencies
Maintainers
1
Versions
49
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gesto - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

26

declaration/Gesto.d.ts

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

import { Client, OnDrag, GestoOptions, GestoEvents, ComponentTriggerType } from "./types";
import Component from "@egjs/component";
declare class Gesto extends Component {
import { Client, OnDrag, GestoOptions, GestoEvents } from "./types";
import EventEmitter, { TargetParam } from "@scena/event-emitter";
declare class Gesto extends EventEmitter<GestoEvents> {
options: GestoOptions;

@@ -23,3 +23,3 @@ private flag;

scrollBy(deltaX: number, deltaY: number, e: any, isCallDrag?: boolean): void;
move([deltaX, deltaY]: number[], inputEvent: any): ComponentTriggerType<OnDrag>;
move([deltaX, deltaY]: number[], inputEvent: any): TargetParam<OnDrag>;
triggerDragStart(e: any): void;

@@ -29,3 +29,3 @@ unset(): void;

onDrag: (e: any, isScroll?: boolean | undefined) => void;
onDragEnd: (e: any) => void;
onDragEnd: (e?: any) => void;
onPinchStart(e: TouchEvent): void;

@@ -37,18 +37,4 @@ onPinch(e: TouchEvent, clients: Client[]): void;

private moveClients;
private onBlur;
}
interface Gesto {
on<T extends keyof GestoEvents>(eventName: T, handlerToAttach: (event: GestoEvents[T]) => any): this;
on(eventName: string, handlerToAttach: (event: {
[key: string]: any;
}) => any): this;
on(events: {
[key: string]: (event: {
[key: string]: any;
}) => any;
}): this;
trigger<T extends keyof GestoEvents>(eventName: T, param: ComponentTriggerType<GestoEvents[T]>): boolean;
trigger(eventName: string, param: {
[key: string]: any;
}): boolean;
}
export default Gesto;

24

declaration/types.d.ts
import { IObject } from "@daybrush/utils";
export interface Event {
eventType: string;
stop(): void;
}
import { EmitterParam } from "@scena/event-emitter";
import Gesto from "./Gesto";
export interface Client {

@@ -22,3 +20,3 @@ clientX: number;

}
export interface OnDragStart extends Position, Event {
export interface OnDragStart extends Position, EmitterParam<Gesto> {
datas: IObject<any>;

@@ -28,3 +26,3 @@ inputEvent: any;

}
export interface OnDrag extends Position, Event {
export interface OnDrag extends Position, EmitterParam<Gesto> {
isDrag: boolean;

@@ -37,3 +35,3 @@ isPinch: boolean;

}
export interface OnDragEnd extends Position, Event {
export interface OnDragEnd extends Position, EmitterParam<Gesto> {
isDrag: boolean;

@@ -44,3 +42,3 @@ isDouble: boolean;

}
export interface OnPinchStart extends Position, Event {
export interface OnPinchStart extends Position, EmitterParam<Gesto> {
datas: IObject<any>;

@@ -51,3 +49,3 @@ touches: Position[];

}
export interface OnPinch extends Position, Event {
export interface OnPinch extends Position, EmitterParam<Gesto> {
datas: IObject<any>;

@@ -62,3 +60,3 @@ touches: Position[];

}
export interface OnPinchEnd extends Position, Event {
export interface OnPinchEnd extends Position, EmitterParam<Gesto> {
isPinch: boolean;

@@ -77,4 +75,5 @@ datas: IObject<any>;

checkInput?: boolean;
checkWindowBlur?: boolean;
}
export interface GestoEvents {
export declare type GestoEvents = {
"dragStart": OnDragStart;

@@ -86,3 +85,2 @@ "drag": OnDrag;

"pinchEnd": OnPinchEnd;
}
export declare type ComponentTriggerType<T extends IObject<any>> = Pick<T, Exclude<keyof T, "stop" | "eventType">>;
};

31

dist/gesto.cjs.js

@@ -7,7 +7,7 @@ /*

repository: git+https://github.com/daybrush/gesture.git
version: 1.0.1
version: 1.1.0
*/
'use strict';
var Component = require('@egjs/component');
var EventEmitter = require('@scena/event-emitter');
var utils = require('@daybrush/utils');

@@ -356,3 +356,3 @@

var result = _this.trigger("dragStart", __assign({
var result = _this.emit("dragStart", __assign({
datas: _this.datas,

@@ -412,3 +412,3 @@ inputEvent: e,

if (_this.pinchFlag || result.deltaX || result.deltaY) {
_this.trigger("drag", __assign({}, result, {
_this.emit("drag", __assign({}, result, {
isScroll: !!isScroll,

@@ -447,3 +447,3 @@ inputEvent: e

_this.trigger("dragEnd", __assign({
_this.emit("dragEnd", __assign({
datas: _this.datas,

@@ -462,2 +462,6 @@ isDouble: isDouble,

_this.onBlur = function () {
_this.onDragEnd();
};
var elements = [].concat(targets);

@@ -469,2 +473,3 @@ _this.options = __assign({

preventDefault: true,
checkWindowBlur: false,
pinchThreshold: 0,

@@ -475,3 +480,4 @@ events: ["touch", "mouse"]

container = _a.container,
events = _a.events;
events = _a.events,
checkWindowBlur = _a.checkWindowBlur;
_this.isTouch = events.indexOf("touch") > -1;

@@ -490,2 +496,6 @@ _this.isMouse = events.indexOf("mouse") > -1;

if (checkWindowBlur) {
utils.addEvent(window, "blur", _this.onBlur);
}
if (_this.isTouch) {

@@ -606,2 +616,3 @@ var passive_1 = {

this.off();
utils.removeEvent(window, "blur", this.onBlur);

@@ -638,3 +649,3 @@ if (this.isMouse) {

this.clientStores.splice(0, 0, store);
var result = this.trigger("pinchStart", __assign({
var result = this.emit("pinchStart", __assign({
datas: this.datas,

@@ -659,3 +670,3 @@ angle: store.getAngle(),

this.isPinch = true;
this.trigger("pinch", __assign({
this.emit("pinch", __assign({
datas: this.datas,

@@ -682,3 +693,3 @@ movement: this.getMovement(clients),

var store = this.getCurrentStore();
this.trigger("pinchEnd", __assign({
this.emit("pinchEnd", __assign({
datas: this.datas,

@@ -720,3 +731,3 @@ isPinch: isPinch,

return Gesto;
}(Component);
}(EventEmitter);

@@ -723,0 +734,0 @@

31

dist/gesto.esm.js

@@ -7,5 +7,5 @@ /*

repository: git+https://github.com/daybrush/gesture.git
version: 1.0.1
version: 1.1.0
*/
import Component from '@egjs/component';
import EventEmitter from '@scena/event-emitter';
import { removeEvent, now, addEvent } from '@daybrush/utils';

@@ -354,3 +354,3 @@

var result = _this.trigger("dragStart", __assign({
var result = _this.emit("dragStart", __assign({
datas: _this.datas,

@@ -410,3 +410,3 @@ inputEvent: e,

if (_this.pinchFlag || result.deltaX || result.deltaY) {
_this.trigger("drag", __assign({}, result, {
_this.emit("drag", __assign({}, result, {
isScroll: !!isScroll,

@@ -445,3 +445,3 @@ inputEvent: e

_this.trigger("dragEnd", __assign({
_this.emit("dragEnd", __assign({
datas: _this.datas,

@@ -460,2 +460,6 @@ isDouble: isDouble,

_this.onBlur = function () {
_this.onDragEnd();
};
var elements = [].concat(targets);

@@ -467,2 +471,3 @@ _this.options = __assign({

preventDefault: true,
checkWindowBlur: false,
pinchThreshold: 0,

@@ -473,3 +478,4 @@ events: ["touch", "mouse"]

container = _a.container,
events = _a.events;
events = _a.events,
checkWindowBlur = _a.checkWindowBlur;
_this.isTouch = events.indexOf("touch") > -1;

@@ -488,2 +494,6 @@ _this.isMouse = events.indexOf("mouse") > -1;

if (checkWindowBlur) {
addEvent(window, "blur", _this.onBlur);
}
if (_this.isTouch) {

@@ -604,2 +614,3 @@ var passive_1 = {

this.off();
removeEvent(window, "blur", this.onBlur);

@@ -636,3 +647,3 @@ if (this.isMouse) {

this.clientStores.splice(0, 0, store);
var result = this.trigger("pinchStart", __assign({
var result = this.emit("pinchStart", __assign({
datas: this.datas,

@@ -657,3 +668,3 @@ angle: store.getAngle(),

this.isPinch = true;
this.trigger("pinch", __assign({
this.emit("pinch", __assign({
datas: this.datas,

@@ -680,3 +691,3 @@ movement: this.getMovement(clients),

var store = this.getCurrentStore();
this.trigger("pinchEnd", __assign({
this.emit("pinchEnd", __assign({
datas: this.datas,

@@ -718,5 +729,5 @@ isPinch: isPinch,

return Gesto;
}(Component);
}(EventEmitter);
export default Gesto;
//# sourceMappingURL=gesto.esm.js.map

649

dist/gesto.js

@@ -7,3 +7,3 @@ /*

repository: git+https://github.com/daybrush/gesture.git
version: 1.0.1
version: 1.1.0
*/

@@ -168,349 +168,395 @@ (function (global, factory) {

/*
Copyright (c) 2017 NAVER Corp.
@egjs/component project is licensed under the MIT license
Copyright (c) 2018 Daybrush
@name: @daybrush/utils
license: MIT
author: Daybrush
repository: https://github.com/daybrush/utils
@version 1.0.0
*/
/**
* get string "object"
* @memberof Consts
* @example
import {OBJECT} from "@daybrush/utils";
@egjs/component JavaScript library
https://naver.github.io/egjs-component
console.log(OBJECT); // "object"
*/
@version 2.1.2
var OBJECT = "object";
/**
* Check the type that the value is object.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {} true if the type is correct, false otherwise
* @example
import {isObject} from "@daybrush/utils";
console.log(isObject({})); // true
console.log(isObject(undefined)); // false
console.log(isObject("")); // false
console.log(isObject(null)); // false
*/
function isObject(value) {
return value && typeof value === OBJECT;
}
/**
* Copyright (c) 2015 NAVER Corp.
* egjs projects are licensed under the MIT license
*/
function isUndefined(value) {
return typeof value === "undefined";
* Date.now() method
* @memberof CrossBrowser
* @return {number} milliseconds
* @example
import {now} from "@daybrush/utils";
console.log(now()); // 12121324241(milliseconds)
*/
function now() {
return Date.now ? Date.now() : new Date().getTime();
}
/**
* A class used to manage events in a component
* @ko 컴포넌트의 이벤트을 관리할 수 있게 하는 클래스
* @alias eg.Component
*/
* Returns the index of the first element in the array that satisfies the provided testing function.
* @function
* @memberof CrossBrowser
* @param - The array `findIndex` was called upon.
* @param - A function to execute on each value in the array until the function returns true, indicating that the satisfying element was found.
* @param - Returns defaultIndex if not found by the function.
* @example
import { findIndex } from "@daybrush/utils";
findIndex([{a: 1}, {a: 2}, {a: 3}, {a: 4}], ({ a }) => a === 2); // 1
*/
var Component =
/*#__PURE__*/
function () {
var Component =
/*#__PURE__*/
function () {
/**
* Version info string
* @ko 버전정보 문자열
* @name VERSION
* @static
* @type {String}
* @example
* eg.Component.VERSION; // ex) 2.0.0
* @memberof eg.Component
*/
function findIndex(arr, callback, defaultIndex) {
if (defaultIndex === void 0) {
defaultIndex = -1;
}
/**
* @support {"ie": "7+", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"}
*/
function Component() {
this._eventHandler = {};
this.options = {};
var length = arr.length;
for (var i = 0; i < length; ++i) {
if (callback(arr[i], i, arr)) {
return i;
}
/**
* Triggers a custom event.
* @ko 커스텀 이벤트를 발생시킨다
* @param {String} eventName The name of the custom event to be triggered <ko>발생할 커스텀 이벤트의 이름</ko>
* @param {Object} customEvent Event data to be sent when triggering a custom event <ko>커스텀 이벤트가 발생할 때 전달할 데이터</ko>
* @return {Boolean} Indicates whether the event has occurred. If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring. <a href="https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F">Ref</a> <ko>이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다. <a href="https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F">참고</a></ko>
* @example
class Some extends eg.Component {
some(){
if(this.trigger("beforeHi")){ // When event call to stop return false.
this.trigger("hi");// fire hi event.
}
}
}
const some = new Some();
some.on("beforeHi", (e) => {
if(condition){
e.stop(); // When event call to stop, `hi` event not call.
}
});
some.on("hi", (e) => {
// `currentTarget` is component instance.
console.log(some === e.currentTarget); // true
});
// If you want to more know event design. You can see article.
// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
*/
}
return defaultIndex;
}
/**
* Sets up a function that will be called whenever the specified event is delivered to the target
* @memberof DOM
* @param - event target
* @param - A case-sensitive string representing the event type to listen for.
* @param - The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs
* @param - An options object that specifies characteristics about the event listener. The available options are:
* @example
import {addEvent} from "@daybrush/utils";
var _proto = Component.prototype;
addEvent(el, "click", e => {
console.log(e);
});
*/
_proto.trigger = function trigger(eventName, customEvent) {
if (customEvent === void 0) {
customEvent = {};
}
function addEvent(el, type, listener, options) {
el.addEventListener(type, listener, options);
}
/**
* removes from the EventTarget an event listener previously registered with EventTarget.addEventListener()
* @memberof DOM
* @param - event target
* @param - A case-sensitive string representing the event type to listen for.
* @param - The EventListener function of the event handler to remove from the event target.
* @example
import {addEvent, removeEvent} from "@daybrush/utils";
const listener = e => {
console.log(e);
};
addEvent(el, "click", listener);
removeEvent(el, "click", listener);
*/
var handlerList = this._eventHandler[eventName] || [];
var hasHandlerList = handlerList.length > 0;
function removeEvent(el, type, listener) {
el.removeEventListener(type, listener);
}
if (!hasHandlerList) {
return true;
} // If detach method call in handler in first time then handler list calls.
/*
Copyright (c) 2019 Daybrush
name: @scena/event-emitter
license: MIT
author: Daybrush
repository: git+https://github.com/daybrush/gesture.git
version: 1.0.0
*/
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
handlerList = handlerList.concat();
customEvent.eventType = eventName;
var isCanceled = false;
var arg = [customEvent];
var i = 0;
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
customEvent.stop = function () {
isCanceled = true;
};
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign$1 = function () {
__assign$1 = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
customEvent.currentTarget = this;
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
for (var _len = arguments.length, restParam = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
restParam[_key - 2] = arguments[_key];
}
return t;
};
if (restParam.length >= 1) {
arg = arg.concat(restParam);
}
return __assign$1.apply(this, arguments);
};
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (i = 0; handlerList[i]; i++) {
handlerList[i].apply(this, arg);
}
for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
return !isCanceled;
};
/**
* Executed event just one time.
* @ko 이벤트가 한번만 실행된다.
* @param {eventName} eventName The name of the event to be attached <ko>등록할 이벤트의 이름</ko>
* @param {Function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
* @return {eg.Component} An instance of a component itself<ko>컴포넌트 자신의 인스턴스</ko>
* @example
class Some extends eg.Component {
hi() {
alert("hi");
}
thing() {
this.once("hi", this.hi);
}
}
var some = new Some();
some.thing();
some.trigger("hi");
// fire alert("hi");
some.trigger("hi");
// Nothing happens
*/
return r;
}
/**
* Implement EventEmitter on object or component.
*/
_proto.once = function once(eventName, handlerToAttach) {
if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
var eventHash = eventName;
var i;
var EventEmitter =
/*#__PURE__*/
function () {
function EventEmitter() {
this._events = {};
}
/**
* Add a listener to the registered event.
* @param - Name of the event to be added
* @param - listener function of the event to be added
* @example
* import EventEmitter from "@scena/event-emitter";
* cosnt emitter = new EventEmitter();
*
* // Add listener in "a" event
* emitter.on("a", () => {
* });
* // Add listeners
* emitter.on({
* a: () => {},
* b: () => {},
* });
*/
for (i in eventHash) {
this.once(i, eventHash[i]);
}
return this;
} else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
var self = this;
this.on(eventName, function listener() {
for (var _len2 = arguments.length, arg = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
arg[_key2] = arguments[_key2];
}
var __proto = EventEmitter.prototype;
handlerToAttach.apply(self, arg);
self.off(eventName, listener);
});
__proto.on = function (eventName, listener) {
if (isObject(eventName)) {
for (var name in eventName) {
this.on(name, eventName[name]);
}
return this;
};
/**
* Checks whether an event has been attached to a component.
* @ko 컴포넌트에 이벤트가 등록됐는지 확인한다.
* @param {String} eventName The name of the event to be attached <ko>등록 여부를 확인할 이벤트의 이름</ko>
* @return {Boolean} Indicates whether the event is attached. <ko>이벤트 등록 여부</ko>
* @example
class Some extends eg.Component {
some() {
this.hasOn("hi");// check hi event.
}
} else {
this._addEvent(eventName, listener, {});
}
*/
return this;
};
/**
* Remove listeners registered in the event target.
* @param - Name of the event to be removed
* @param - listener function of the event to be removed
* @example
* import EventEmitter from "@scena/event-emitter";
* cosnt emitter = new EventEmitter();
*
* // Remove all listeners.
* emitter.off();
*
* // Remove all listeners in "A" event.
* emitter.off("a");
*
*
* // Remove "listener" listener in "a" event.
* emitter.off("a", listener);
*/
_proto.hasOn = function hasOn(eventName) {
return !!this._eventHandler[eventName];
};
/**
* Attaches an event to a component.
* @ko 컴포넌트에 이벤트를 등록한다.
* @param {eventName} eventName The name of the event to be attached <ko>등록할 이벤트의 이름</ko>
* @param {Function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
* @return {eg.Component} An instance of a component itself<ko>컴포넌트 자신의 인스턴스</ko>
* @example
class Some extends eg.Component {
hi() {
console.log("hi");
}
some() {
this.on("hi",this.hi); //attach event
}
}
*/
__proto.off = function (eventName, listener) {
if (!eventName) {
this._events = {};
} else if (isObject(eventName)) {
for (var name in eventName) {
this.off(name);
}
} else if (!listener) {
this._events[eventName] = [];
} else {
var events = this._events[eventName];
_proto.on = function on(eventName, handlerToAttach) {
if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
var eventHash = eventName;
var name;
if (events) {
var index = findIndex(events, function (e) {
return e.listener === listener;
});
for (name in eventHash) {
this.on(name, eventHash[name]);
if (index > -1) {
events.splice(index, 1);
}
}
}
return this;
} else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
var handlerList = this._eventHandler[eventName];
return this;
};
/**
* Add a disposable listener and Use promise to the registered event.
* @param - Name of the event to be added
* @param - disposable listener function of the event to be added
* @example
* import EventEmitter from "@scena/event-emitter";
* cosnt emitter = new EventEmitter();
*
* // Add a disposable listener in "a" event
* emitter.once("a", () => {
* });
*
* // Use Promise
* emitter.once("a").then(e => {
* });
*/
if (isUndefined(handlerList)) {
this._eventHandler[eventName] = [];
handlerList = this._eventHandler[eventName];
}
handlerList.push(handlerToAttach);
}
__proto.once = function (eventName, listener) {
var _this = this;
return this;
};
/**
* Detaches an event from the component.
* @ko 컴포넌트에 등록된 이벤트를 해제한다
* @param {eventName} eventName The name of the event to be detached <ko>해제할 이벤트의 이름</ko>
* @param {Function} handlerToDetach The handler function of the event to be detached <ko>해제할 이벤트의 핸들러 함수</ko>
* @return {eg.Component} An instance of a component itself <ko>컴포넌트 자신의 인스턴스</ko>
* @example
class Some extends eg.Component {
hi() {
console.log("hi");
}
some() {
this.off("hi",this.hi); //detach event
}
if (listener) {
this._addEvent(eventName, listener, {
once: true
});
}
*/
return new Promise(function (resolve) {
_this._addEvent(eventName, resolve, {
once: true
});
});
};
/**
* Fires an event to call listeners.
* @param - Event name
* @param - Event parameter
* @return If false, stop the event.
* @example
*
* import EventEmitter from "@scena/event-emitter";
*
*
* const emitter = new EventEmitter();
*
* emitter.on("a", e => {
* });
*
*
* emitter.emit("a", {
* a: 1,
* });
*/
_proto.off = function off(eventName, handlerToDetach) {
// All event detach.
if (isUndefined(eventName)) {
this._eventHandler = {};
return this;
} // All handler of specific event detach.
__proto.emit = function (eventName, param) {
var _this = this;
if (isUndefined(handlerToDetach)) {
if (typeof eventName === "string") {
this._eventHandler[eventName] = undefined;
return this;
} else {
var eventHash = eventName;
var name;
if (param === void 0) {
param = {};
}
for (name in eventHash) {
this.off(name, eventHash[name]);
}
var events = this._events[eventName];
return this;
}
} // The handler of specific event detach.
if (!eventName || !events) {
return true;
}
var isStop = false;
param.eventType = eventName;
var handlerList = this._eventHandler[eventName];
param.stop = function () {
isStop = true;
};
if (handlerList) {
var k;
var handlerFunction;
param.currentTarget = this;
for (k = 0; (handlerFunction = handlerList[k]) !== undefined; k++) {
if (handlerFunction === handlerToDetach) {
handlerList = handlerList.splice(k, 1);
break;
}
}
__spreadArrays(events).forEach(function (info) {
info.listener(param);
if (info.once) {
_this.off(eventName, info.listener);
}
});
return this;
};
return isStop;
};
/**
* Fires an event to call listeners.
* @param - Event name
* @param - Event parameter
* @return If false, stop the event.
* @example
*
* import EventEmitter from "@scena/event-emitter";
*
*
* const emitter = new EventEmitter();
*
* emitter.on("a", e => {
* });
*
*
* emitter.emit("a", {
* a: 1,
* });
*/
return Component;
}();
/**
* Fires an event to call listeners.
* @param - Event name
* @param - Event parameter
* @return If false, stop the event.
* @example
*
* import EventEmitter from "@scena/event-emitter";
*
*
* const emitter = new EventEmitter();
*
* emitter.on("a", e => {
* });
*
* // emit
* emitter.trigger("a", {
* a: 1,
* });
*/
Component.VERSION = "2.1.2";
return Component;
}();
/*
Copyright (c) 2018 Daybrush
@name: @daybrush/utils
license: MIT
author: Daybrush
repository: https://github.com/daybrush/utils
@version 1.0.0
*/
/**
* Date.now() method
* @memberof CrossBrowser
* @return {number} milliseconds
* @example
import {now} from "@daybrush/utils";
__proto.trigger = function (eventName, param) {
if (param === void 0) {
param = {};
}
console.log(now()); // 12121324241(milliseconds)
*/
return this.emit(eventName, param);
};
function now() {
return Date.now ? Date.now() : new Date().getTime();
}
/**
* Sets up a function that will be called whenever the specified event is delivered to the target
* @memberof DOM
* @param - event target
* @param - A case-sensitive string representing the event type to listen for.
* @param - The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs
* @param - An options object that specifies characteristics about the event listener. The available options are:
* @example
import {addEvent} from "@daybrush/utils";
__proto._addEvent = function (eventName, listener, options) {
var events = this._events;
events[eventName] = events[eventName] || [];
var listeners = events[eventName];
listeners.push(__assign$1({
listener: listener
}, options));
};
addEvent(el, "click", e => {
console.log(e);
});
*/
return EventEmitter;
}();
function addEvent(el, type, listener, options) {
el.addEventListener(type, listener, options);
}
/**
* removes from the EventTarget an event listener previously registered with EventTarget.addEventListener()
* @memberof DOM
* @param - event target
* @param - A case-sensitive string representing the event type to listen for.
* @param - The EventListener function of the event handler to remove from the event target.
* @example
import {addEvent, removeEvent} from "@daybrush/utils";
const listener = e => {
console.log(e);
};
addEvent(el, "click", listener);
removeEvent(el, "click", listener);
*/
function removeEvent(el, type, listener) {
el.removeEventListener(type, listener);
}
var ClientStore =

@@ -706,3 +752,3 @@ /*#__PURE__*/

var result = _this.trigger("dragStart", __assign({
var result = _this.emit("dragStart", __assign({
datas: _this.datas,

@@ -762,3 +808,3 @@ inputEvent: e,

if (_this.pinchFlag || result.deltaX || result.deltaY) {
_this.trigger("drag", __assign({}, result, {
_this.emit("drag", __assign({}, result, {
isScroll: !!isScroll,

@@ -797,3 +843,3 @@ inputEvent: e

_this.trigger("dragEnd", __assign({
_this.emit("dragEnd", __assign({
datas: _this.datas,

@@ -812,2 +858,6 @@ isDouble: isDouble,

_this.onBlur = function () {
_this.onDragEnd();
};
var elements = [].concat(targets);

@@ -819,2 +869,3 @@ _this.options = __assign({

preventDefault: true,
checkWindowBlur: false,
pinchThreshold: 0,

@@ -825,3 +876,4 @@ events: ["touch", "mouse"]

container = _a.container,
events = _a.events;
events = _a.events,
checkWindowBlur = _a.checkWindowBlur;
_this.isTouch = events.indexOf("touch") > -1;

@@ -840,2 +892,6 @@ _this.isMouse = events.indexOf("mouse") > -1;

if (checkWindowBlur) {
addEvent(window, "blur", _this.onBlur);
}
if (_this.isTouch) {

@@ -956,2 +1012,3 @@ var passive_1 = {

this.off();
removeEvent(window, "blur", this.onBlur);

@@ -988,3 +1045,3 @@ if (this.isMouse) {

this.clientStores.splice(0, 0, store);
var result = this.trigger("pinchStart", __assign({
var result = this.emit("pinchStart", __assign({
datas: this.datas,

@@ -1009,3 +1066,3 @@ angle: store.getAngle(),

this.isPinch = true;
this.trigger("pinch", __assign({
this.emit("pinch", __assign({
datas: this.datas,

@@ -1032,3 +1089,3 @@ movement: this.getMovement(clients),

var store = this.getCurrentStore();
this.trigger("pinchEnd", __assign({
this.emit("pinchEnd", __assign({
datas: this.datas,

@@ -1070,3 +1127,3 @@ isPinch: isPinch,

return Gesto;
}(Component);
}(EventEmitter);

@@ -1073,0 +1130,0 @@

4

dist/gesto.min.js

@@ -7,5 +7,5 @@ /*

repository: git+https://github.com/daybrush/gesture.git
version: 1.0.1
version: 1.1.0
*/
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).Gesto=n()}(this,function(){"use strict";var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,n){t.__proto__=n}||function(t,n){for(var i in n)n.hasOwnProperty(i)&&(t[i]=n[i])})(t,n)};var m=function(){return(m=Object.assign||function(t){for(var n,i=1,e=arguments.length;i<e;i++)for(var r in n=arguments[i])Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r]);return t}).apply(this,arguments)};function i(t){return function(t,n){var i=n[0]-t[0],e=n[1]-t[1],r=Math.atan2(e,i);return 0<=r?r:r+2*Math.PI}([t[0].clientX,t[0].clientY],[t[1].clientX,t[1].clientY])/Math.PI*180}function D(t){return t.touches?function(t){for(var n=Math.min(t.length,2),i=[],e=0;e<n;++e)i.push(s(t[e]));return i}(t.touches):[s(t)]}function r(t,n,i){var e=i.length,r=f(t,e),o=r.clientX,s=r.clientY,a=r.originalClientX,c=r.originalClientY,h=f(n,e),l=h.clientX,u=h.clientY,g=f(i,e);return{clientX:a,clientY:c,deltaX:o-l,deltaY:s-u,distX:o-g.clientX,distY:s-g.clientY}}function o(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function s(t){return{clientX:t.clientX,clientY:t.clientY}}function f(t,n){void 0===n&&(n=t.length);for(var i={clientX:0,clientY:0,originalClientX:0,originalClientY:0},e=0;e<n;++e){var r=t[e];i.originalClientX+="originalClientX"in r?r.originalClientX:r.clientX,i.originalClientY+="originalClientY"in r?r.originalClientY:r.clientY,i.clientX+=r.clientX,i.clientY+=r.clientY}return n?{clientX:i.clientX/n,clientY:i.clientY/n,originalClientX:i.originalClientX/n,originalClientY:i.originalClientY/n}:i}function a(t){return void 0===t}var t=function(){var t=function(){function t(){this._eventHandler={},this.options={}}var n=t.prototype;return n.trigger=function(t,n){void 0===n&&(n={});var i=this._eventHandler[t]||[];if(!(0<i.length))return!0;i=i.concat(),n.eventType=t;var e=!1,r=[n],o=0;n.stop=function(){e=!0},n.currentTarget=this;for(var s=arguments.length,a=new Array(2<s?s-2:0),c=2;c<s;c++)a[c-2]=arguments[c];for(1<=a.length&&(r=r.concat(a)),o=0;i[o];o++)i[o].apply(this,r);return!e},n.once=function(r,o){if("object"==typeof r&&a(o)){var t,n=r;for(t in n)this.once(t,n[t]);return this}if("string"==typeof r&&"function"==typeof o){var s=this;this.on(r,function t(){for(var n=arguments.length,i=new Array(n),e=0;e<n;e++)i[e]=arguments[e];o.apply(s,i),s.off(r,t)})}return this},n.hasOn=function(t){return!!this._eventHandler[t]},n.on=function(t,n){if("object"==typeof t&&a(n)){var i,e=t;for(i in e)this.on(i,e[i]);return this}if("string"==typeof t&&"function"==typeof n){var r=this._eventHandler[t];a(r)&&(this._eventHandler[t]=[],r=this._eventHandler[t]),r.push(n)}return this},n.off=function(t,n){if(a(t))return this._eventHandler={},this;if(a(n)){if("string"==typeof t)return this._eventHandler[t]=void 0,this;var i,e=t;for(i in e)this.off(i,e[i]);return this}var r,o,s=this._eventHandler[t];if(s)for(r=0;void 0!==(o=s[r]);r++)if(o===n){s=s.splice(r,1);break}return this},t}();return t.VERSION="2.1.2",t}();function S(){return Date.now?Date.now():(new Date).getTime()}function P(t,n,i,e){t.addEventListener(n,i,e)}function X(t,n,i){t.removeEventListener(n,i)}var Y=function(){function t(t){this.prevClients=[],this.startClients=[],this.movement=0,this.length=0,this.startClients=t,this.prevClients=t,this.length=t.length}var n=t.prototype;return n.addClients=function(t){void 0===t&&(t=this.prevClients);var n=this.getPosition(t),i=n.deltaX,e=n.deltaY;return this.movement+=Math.sqrt(i*i+e*e),this.prevClients=t,n},n.getAngle=function(t){return void 0===t&&(t=this.prevClients),i(t)},n.getRotation=function(t){return void 0===t&&(t=this.prevClients),i(t)-i(this.startClients)},n.getPosition=function(t){return r(t||this.prevClients,this.prevClients,this.startClients)},n.getPositions=function(i){void 0===i&&(i=this.prevClients);var e=this.prevClients;return this.startClients.map(function(t,n){return r([i[n]],[e[n]],[t])})},n.getMovement=function(t){var n=this.movement;if(!t)return n;var i=f(t,this.length),e=f(this.prevClients,this.length),r=i.clientX-e.clientX,o=i.clientY-e.clientY;return Math.sqrt(r*r+o*o)+n},n.getDistance=function(t){return void 0===t&&(t=this.prevClients),o(t)},n.getScale=function(t){return void 0===t&&(t=this.prevClients),o(t)/o(this.startClients)},n.move=function(n,i){this.startClients.forEach(function(t){t.clientX-=n,t.clientY-=i}),this.prevClients.forEach(function(t){t.clientX-=n,t.clientY-=i})},t}(),E=["textarea","input"],n=function(a){function t(t,n){void 0===n&&(n={});var C=a.call(this)||this;C.options={},C.flag=!1,C.pinchFlag=!1,C.datas={},C.isDrag=!1,C.isPinch=!1,C.isMouse=!1,C.isTouch=!1,C.clientStores=[],C.targets=[],C.prevTime=0,C.isDouble=!1,C.onDragStart=function(t,n){if(void 0===n&&(n=!0),C.flag||!1!==t.cancelable){var i=C.options,e=i.container,r=i.pinchOutside,o=i.preventRightClick,s=i.preventDefault,a=i.checkInput,c=C.isTouch,h=!C.flag;if(h){var l=document.activeElement,u=t.target,g=u.tagName.toLowerCase(),f=-1<E.indexOf(g),v=u.isContentEditable;if(f||v){if(a||l===u)return!1;if(l&&v&&l.isContentEditable&&l.contains(u))return!1}else if((s||"touchstart"===t.type)&&l){var p=l.tagName;(l.isContentEditable||-1<E.indexOf(p))&&l.blur()}if(C.clientStores=[new Y(D(t))],C.flag=!0,C.isDrag=!1,C.datas={},o&&(3===t.which||2===t.button))return C.initDrag(),!1;!1===C.trigger("dragStart",m({datas:C.datas,inputEvent:t,isTrusted:n},C.getCurrentStore().getPosition()))&&C.initDrag(),C.isDouble=S()-C.prevTime<200,C.flag&&s&&t.preventDefault()}if(!C.flag)return!1;var d=0;if(h&&c&&r&&(d=setTimeout(function(){P(e,"touchstart",C.onDragStart,{passive:!1})})),!h&&c&&r&&X(e,"touchstart",C.onDragStart),C.flag&&function(t){return t.touches&&2<=t.touches.length}(t)){if(clearTimeout(d),h&&t.touches.length!==t.changedTouches.length)return;C.pinchFlag||C.onPinchStart(t)}}},C.onDrag=function(t,n){if(C.flag){var i=D(t),e=C.moveClients(i,t,!1);(C.pinchFlag||e.deltaX||e.deltaY)&&C.trigger("drag",m({},e,{isScroll:!!n,inputEvent:t})),C.pinchFlag&&C.onPinch(t,i),C.getCurrentStore().addClients(i)}},C.onDragEnd=function(t){if(C.flag){var n=C.options,i=n.pinchOutside,e=n.container;C.isTouch&&i&&X(e,"touchstart",C.onDragStart),C.flag=!1;var r=C.getCurrentStore().getPosition(),o=S(),s=!C.isDrag&&C.isDouble;C.prevTime=C.isDrag||s?0:o,C.trigger("dragEnd",m({datas:C.datas,isDouble:s,isDrag:C.isDrag,inputEvent:t},r)),C.pinchFlag&&C.onPinchEnd(t),C.clientStores=[]}};var i=[].concat(t);C.options=m({checkInput:!1,container:1<i.length?window:i[0],preventRightClick:!0,preventDefault:!0,pinchThreshold:0,events:["touch","mouse"]},n);var e=C.options,r=e.container,o=e.events;if(C.isTouch=-1<o.indexOf("touch"),C.isMouse=-1<o.indexOf("mouse"),C.targets=i,C.isMouse&&(i.forEach(function(t){P(t,"mousedown",C.onDragStart)}),P(r,"mousemove",C.onDrag),P(r,"mouseup",C.onDragEnd),P(r,"contextmenu",C.onDragEnd)),C.isTouch){var s={passive:!1};i.forEach(function(t){P(t,"touchstart",C.onDragStart,s)}),P(r,"touchmove",C.onDrag,s),P(r,"touchend",C.onDragEnd,s),P(r,"touchcancel",C.onDragEnd,s)}return C}!function(t,n){function i(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(i.prototype=n.prototype,new i)}(t,a);var n=t.prototype;return n.getMovement=function(t){return this.getCurrentStore().getMovement(t)+this.clientStores.slice(1).reduce(function(t,n){return t+n.movement},0)},n.isDragging=function(){return this.isDrag},n.isFlag=function(){return this.flag},n.isPinchFlag=function(){return this.pinchFlag},n.isPinching=function(){return this.isPinch},n.scrollBy=function(t,n,i,e){void 0===e&&(e=!0),this.flag&&(this.clientStores[0].move(t,n),e&&this.onDrag(i,!0))},n.move=function(t,n){var e=t[0],r=t[1],i=this.getCurrentStore().prevClients;return this.moveClients(i.map(function(t){var n=t.clientX,i=t.clientY;return{clientX:n+e,clientY:i+r,originalClientX:n,originalClientY:i}}),n,!0)},n.triggerDragStart=function(t){this.onDragStart(t,!1)},n.unset=function(){var n=this,t=this.targets,i=this.options.container;this.off(),this.isMouse&&(t.forEach(function(t){X(t,"mousedown",n.onDragStart)}),X(i,"mousemove",this.onDrag),X(i,"mouseup",this.onDragEnd),X(i,"contextmenu",this.onDragEnd)),this.isTouch&&(t.forEach(function(t){X(t,"touchstart",n.onDragStart)}),X(i,"touchstart",this.onDragStart),X(i,"touchmove",this.onDrag),X(i,"touchend",this.onDragEnd),X(i,"touchcancel",this.onDragEnd))},n.onPinchStart=function(t){var n=this.options.pinchThreshold;if(!(this.isDrag&&this.getMovement()>n)){var i=new Y(D(t));this.pinchFlag=!0,this.clientStores.splice(0,0,i),!1===this.trigger("pinchStart",m({datas:this.datas,angle:i.getAngle(),touches:this.getCurrentStore().getPositions()},i.getPosition(),{inputEvent:t}))&&(this.pinchFlag=!1)}},n.onPinch=function(t,n){if(this.flag&&this.pinchFlag&&!(n.length<2)){var i=this.getCurrentStore();this.isPinch=!0,this.trigger("pinch",m({datas:this.datas,movement:this.getMovement(n),angle:i.getAngle(n),rotation:i.getRotation(n),touches:i.getPositions(n),scale:i.getScale(n),distance:i.getDistance(n)},i.getPosition(n),{inputEvent:t}))}},n.onPinchEnd=function(t){if(this.pinchFlag){var n=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var i=this.getCurrentStore();this.trigger("pinchEnd",m({datas:this.datas,isPinch:n,touches:i.getPositions()},i.getPosition(),{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}},n.initDrag=function(){this.clientStores=[],this.pinchFlag=!1,this.flag=!1},n.getCurrentStore=function(){return this.clientStores[0]},n.moveClients=function(t,n,i){var e=this.getCurrentStore()[i?"addClients":"getPosition"](t);return this.isDrag=!0,m({datas:this.datas},e,{movement:this.getMovement(t),isDrag:this.isDrag,isPinch:this.isPinch,isScroll:!1,inputEvent:n})},t}(t),c={default:n};for(var h in c)n[h]=c[h];return n});
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).Gesto=n()}(this,function(){"use strict";var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,n){t.__proto__=n}||function(t,n){for(var i in n)n.hasOwnProperty(i)&&(t[i]=n[i])})(t,n)};var C=function(){return(C=Object.assign||function(t){for(var n,i=1,e=arguments.length;i<e;i++)for(var r in n=arguments[i])Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r]);return t}).apply(this,arguments)};function i(t){return function(t,n){var i=n[0]-t[0],e=n[1]-t[1],r=Math.atan2(e,i);return 0<=r?r:r+2*Math.PI}([t[0].clientX,t[0].clientY],[t[1].clientX,t[1].clientY])/Math.PI*180}function D(t){return t.touches?function(t){for(var n=Math.min(t.length,2),i=[],e=0;e<n;++e)i.push(s(t[e]));return i}(t.touches):[s(t)]}function r(t,n,i){var e=i.length,r=f(t,e),o=r.clientX,s=r.clientY,a=r.originalClientX,c=r.originalClientY,u=f(n,e),l=u.clientX,h=u.clientY,g=f(i,e);return{clientX:a,clientY:c,deltaX:o-l,deltaY:s-h,distX:o-g.clientX,distY:s-g.clientY}}function o(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function s(t){return{clientX:t.clientX,clientY:t.clientY}}function f(t,n){void 0===n&&(n=t.length);for(var i={clientX:0,clientY:0,originalClientX:0,originalClientY:0},e=0;e<n;++e){var r=t[e];i.originalClientX+="originalClientX"in r?r.originalClientX:r.clientX,i.originalClientY+="originalClientY"in r?r.originalClientY:r.clientY,i.clientX+=r.clientX,i.clientY+=r.clientY}return n?{clientX:i.clientX/n,clientY:i.clientY/n,originalClientX:i.originalClientX/n,originalClientY:i.originalClientY/n}:i}function a(t){return t&&"object"==typeof t}function E(){return Date.now?Date.now():(new Date).getTime()}function S(t,n,i,e){t.addEventListener(n,i,e)}function P(t,n,i){t.removeEventListener(n,i)}var c=function(){return(c=Object.assign||function(t){for(var n,i=1,e=arguments.length;i<e;i++)for(var r in n=arguments[i])Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r]);return t}).apply(this,arguments)};var t=function(){function t(){this._events={}}var n=t.prototype;return n.on=function(t,n){if(a(t))for(var i in t)this.on(i,t[i]);else this._addEvent(t,n,{});return this},n.off=function(t,n){if(t)if(a(t))for(var i in t)this.off(i);else if(n){var e=this._events[t];if(e){var r=function(t,n,i){void 0===i&&(i=-1);for(var e=t.length,r=0;r<e;++r)if(n(t[r],r,t))return r;return i}(e,function(t){return t.listener===n});-1<r&&e.splice(r,1)}}else this._events[t]=[];else this._events={};return this},n.once=function(n,t){var i=this;return t&&this._addEvent(n,t,{once:!0}),new Promise(function(t){i._addEvent(n,t,{once:!0})})},n.emit=function(n,i){var e=this;void 0===i&&(i={});var t=this._events[n];if(!n||!t)return!0;var r=!1;return i.eventType=n,i.stop=function(){r=!0},i.currentTarget=this,function(){for(var t=0,n=0,i=arguments.length;n<i;n++)t+=arguments[n].length;var e=Array(t),r=0;for(n=0;n<i;n++)for(var o=arguments[n],s=0,a=o.length;s<a;s++,r++)e[r]=o[s];return e}(t).forEach(function(t){t.listener(i),t.once&&e.off(n,t.listener)}),r},n.trigger=function(t,n){return void 0===n&&(n={}),this.emit(t,n)},n._addEvent=function(t,n,i){var e=this._events;e[t]=e[t]||[],e[t].push(c({listener:n},i))},t}(),X=function(){function t(t){this.prevClients=[],this.startClients=[],this.movement=0,this.length=0,this.startClients=t,this.prevClients=t,this.length=t.length}var n=t.prototype;return n.addClients=function(t){void 0===t&&(t=this.prevClients);var n=this.getPosition(t),i=n.deltaX,e=n.deltaY;return this.movement+=Math.sqrt(i*i+e*e),this.prevClients=t,n},n.getAngle=function(t){return void 0===t&&(t=this.prevClients),i(t)},n.getRotation=function(t){return void 0===t&&(t=this.prevClients),i(t)-i(this.startClients)},n.getPosition=function(t){return r(t||this.prevClients,this.prevClients,this.startClients)},n.getPositions=function(i){void 0===i&&(i=this.prevClients);var e=this.prevClients;return this.startClients.map(function(t,n){return r([i[n]],[e[n]],[t])})},n.getMovement=function(t){var n=this.movement;if(!t)return n;var i=f(t,this.length),e=f(this.prevClients,this.length),r=i.clientX-e.clientX,o=i.clientY-e.clientY;return Math.sqrt(r*r+o*o)+n},n.getDistance=function(t){return void 0===t&&(t=this.prevClients),o(t)},n.getScale=function(t){return void 0===t&&(t=this.prevClients),o(t)/o(this.startClients)},n.move=function(n,i){this.startClients.forEach(function(t){t.clientX-=n,t.clientY-=i}),this.prevClients.forEach(function(t){t.clientX-=n,t.clientY-=i})},t}(),Y=["textarea","input"],n=function(c){function t(t,n){void 0===n&&(n={});var m=c.call(this)||this;m.options={},m.flag=!1,m.pinchFlag=!1,m.datas={},m.isDrag=!1,m.isPinch=!1,m.isMouse=!1,m.isTouch=!1,m.clientStores=[],m.targets=[],m.prevTime=0,m.isDouble=!1,m.onDragStart=function(t,n){if(void 0===n&&(n=!0),m.flag||!1!==t.cancelable){var i=m.options,e=i.container,r=i.pinchOutside,o=i.preventRightClick,s=i.preventDefault,a=i.checkInput,c=m.isTouch,u=!m.flag;if(u){var l=document.activeElement,h=t.target,g=h.tagName.toLowerCase(),f=-1<Y.indexOf(g),v=h.isContentEditable;if(f||v){if(a||l===h)return!1;if(l&&v&&l.isContentEditable&&l.contains(h))return!1}else if((s||"touchstart"===t.type)&&l){var p=l.tagName;(l.isContentEditable||-1<Y.indexOf(p))&&l.blur()}if(m.clientStores=[new X(D(t))],m.flag=!0,m.isDrag=!1,m.datas={},o&&(3===t.which||2===t.button))return m.initDrag(),!1;!1===m.emit("dragStart",C({datas:m.datas,inputEvent:t,isTrusted:n},m.getCurrentStore().getPosition()))&&m.initDrag(),m.isDouble=E()-m.prevTime<200,m.flag&&s&&t.preventDefault()}if(!m.flag)return!1;var d=0;if(u&&c&&r&&(d=setTimeout(function(){S(e,"touchstart",m.onDragStart,{passive:!1})})),!u&&c&&r&&P(e,"touchstart",m.onDragStart),m.flag&&function(t){return t.touches&&2<=t.touches.length}(t)){if(clearTimeout(d),u&&t.touches.length!==t.changedTouches.length)return;m.pinchFlag||m.onPinchStart(t)}}},m.onDrag=function(t,n){if(m.flag){var i=D(t),e=m.moveClients(i,t,!1);(m.pinchFlag||e.deltaX||e.deltaY)&&m.emit("drag",C({},e,{isScroll:!!n,inputEvent:t})),m.pinchFlag&&m.onPinch(t,i),m.getCurrentStore().addClients(i)}},m.onDragEnd=function(t){if(m.flag){var n=m.options,i=n.pinchOutside,e=n.container;m.isTouch&&i&&P(e,"touchstart",m.onDragStart),m.flag=!1;var r=m.getCurrentStore().getPosition(),o=E(),s=!m.isDrag&&m.isDouble;m.prevTime=m.isDrag||s?0:o,m.emit("dragEnd",C({datas:m.datas,isDouble:s,isDrag:m.isDrag,inputEvent:t},r)),m.pinchFlag&&m.onPinchEnd(t),m.clientStores=[]}},m.onBlur=function(){m.onDragEnd()};var i=[].concat(t);m.options=C({checkInput:!1,container:1<i.length?window:i[0],preventRightClick:!0,preventDefault:!0,checkWindowBlur:!1,pinchThreshold:0,events:["touch","mouse"]},n);var e=m.options,r=e.container,o=e.events,s=e.checkWindowBlur;if(m.isTouch=-1<o.indexOf("touch"),m.isMouse=-1<o.indexOf("mouse"),m.targets=i,m.isMouse&&(i.forEach(function(t){S(t,"mousedown",m.onDragStart)}),S(r,"mousemove",m.onDrag),S(r,"mouseup",m.onDragEnd),S(r,"contextmenu",m.onDragEnd)),s&&S(window,"blur",m.onBlur),m.isTouch){var a={passive:!1};i.forEach(function(t){S(t,"touchstart",m.onDragStart,a)}),S(r,"touchmove",m.onDrag,a),S(r,"touchend",m.onDragEnd,a),S(r,"touchcancel",m.onDragEnd,a)}return m}!function(t,n){function i(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(i.prototype=n.prototype,new i)}(t,c);var n=t.prototype;return n.getMovement=function(t){return this.getCurrentStore().getMovement(t)+this.clientStores.slice(1).reduce(function(t,n){return t+n.movement},0)},n.isDragging=function(){return this.isDrag},n.isFlag=function(){return this.flag},n.isPinchFlag=function(){return this.pinchFlag},n.isPinching=function(){return this.isPinch},n.scrollBy=function(t,n,i,e){void 0===e&&(e=!0),this.flag&&(this.clientStores[0].move(t,n),e&&this.onDrag(i,!0))},n.move=function(t,n){var e=t[0],r=t[1],i=this.getCurrentStore().prevClients;return this.moveClients(i.map(function(t){var n=t.clientX,i=t.clientY;return{clientX:n+e,clientY:i+r,originalClientX:n,originalClientY:i}}),n,!0)},n.triggerDragStart=function(t){this.onDragStart(t,!1)},n.unset=function(){var n=this,t=this.targets,i=this.options.container;this.off(),P(window,"blur",this.onBlur),this.isMouse&&(t.forEach(function(t){P(t,"mousedown",n.onDragStart)}),P(i,"mousemove",this.onDrag),P(i,"mouseup",this.onDragEnd),P(i,"contextmenu",this.onDragEnd)),this.isTouch&&(t.forEach(function(t){P(t,"touchstart",n.onDragStart)}),P(i,"touchstart",this.onDragStart),P(i,"touchmove",this.onDrag),P(i,"touchend",this.onDragEnd),P(i,"touchcancel",this.onDragEnd))},n.onPinchStart=function(t){var n=this.options.pinchThreshold;if(!(this.isDrag&&this.getMovement()>n)){var i=new X(D(t));this.pinchFlag=!0,this.clientStores.splice(0,0,i),!1===this.emit("pinchStart",C({datas:this.datas,angle:i.getAngle(),touches:this.getCurrentStore().getPositions()},i.getPosition(),{inputEvent:t}))&&(this.pinchFlag=!1)}},n.onPinch=function(t,n){if(this.flag&&this.pinchFlag&&!(n.length<2)){var i=this.getCurrentStore();this.isPinch=!0,this.emit("pinch",C({datas:this.datas,movement:this.getMovement(n),angle:i.getAngle(n),rotation:i.getRotation(n),touches:i.getPositions(n),scale:i.getScale(n),distance:i.getDistance(n)},i.getPosition(n),{inputEvent:t}))}},n.onPinchEnd=function(t){if(this.pinchFlag){var n=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var i=this.getCurrentStore();this.emit("pinchEnd",C({datas:this.datas,isPinch:n,touches:i.getPositions()},i.getPosition(),{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}},n.initDrag=function(){this.clientStores=[],this.pinchFlag=!1,this.flag=!1},n.getCurrentStore=function(){return this.clientStores[0]},n.moveClients=function(t,n,i){var e=this.getCurrentStore()[i?"addClients":"getPosition"](t);return this.isDrag=!0,C({datas:this.datas},e,{movement:this.getMovement(t),isDrag:this.isDrag,isPinch:this.isPinch,isScroll:!1,inputEvent:n})},t}(t),u={default:n};for(var l in u)n[l]=u[l];return n});
//# sourceMappingURL=gesto.min.js.map

2

jsdoc.json

@@ -10,3 +10,3 @@

"source": {
"include": ["./src", "README.md"],
"include": ["./src", "README.md", "./node_modules/@scena/event-emitter/src/"],
"includePattern": "(.+\\.js(doc|x)?|.+\\.ts(doc|x)?)$",

@@ -13,0 +13,0 @@ "excludePattern": "(^|\\/|\\\\)_"

4

package.json
{
"name": "gesto",
"version": "1.0.1",
"version": "1.1.0",
"description": "You can set up drag, pinch events in any browser.",

@@ -50,4 +50,4 @@ "main": "./dist/gesto.cjs.js",

"@daybrush/utils": "^1.0.0",
"@egjs/component": "^2.1.2"
"@scena/event-emitter": "^1.0.0"
}
}

42

src/Gesto.ts

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

import { Client, OnDrag, GestoOptions, GestoEvents, ComponentTriggerType } from "./types";
import { Client, OnDrag, GestoOptions, GestoEvents } from "./types";
import {
getEventClients, isMultiTouch,
} from "./utils";
import Component from "@egjs/component";
import EventEmitter, { TargetParam } from "@scena/event-emitter";
import { addEvent, removeEvent, now } from "@daybrush/utils";

@@ -13,3 +13,3 @@ import { ClientStore } from "./ClientStore";

*/
class Gesto extends Component {
class Gesto extends EventEmitter<GestoEvents> {
public options: GestoOptions = {};

@@ -39,2 +39,3 @@ private flag = false;

preventDefault: true,
checkWindowBlur: false,
pinchThreshold: 0,

@@ -45,3 +46,3 @@ events: ["touch", "mouse"],

const { container, events } = this.options;
const { container, events, checkWindowBlur } = this.options;

@@ -60,2 +61,5 @@ this.isTouch = events!.indexOf("touch") > -1;

}
if (checkWindowBlur) {
addEvent(window, "blur", this.onBlur);
}
if (this.isTouch) {

@@ -118,3 +122,3 @@ const passive = {

*/
public move([deltaX, deltaY]: number[], inputEvent: any): ComponentTriggerType<OnDrag> {
public move([deltaX, deltaY]: number[], inputEvent: any): TargetParam<OnDrag> {
const store = this.getCurrentStore();

@@ -146,2 +150,3 @@ const nextClients = store.prevClients;

this.off();
removeEvent(window, "blur", this.onBlur);
if (this.isMouse) {

@@ -208,3 +213,3 @@ targets.forEach(target => {

}
const result = this.trigger("dragStart", {
const result = this.emit("dragStart", {
datas: this.datas,

@@ -253,3 +258,3 @@ inputEvent: e,

if (this.pinchFlag || result.deltaX || result.deltaY) {
this.trigger("drag", {
this.emit("drag", {
...result,

@@ -266,3 +271,3 @@ isScroll: !!isScroll,

}
public onDragEnd = (e: any) => {
public onDragEnd = (e?: any) => {
if (!this.flag) {

@@ -285,3 +290,3 @@ return;

this.trigger("dragEnd", {
this.emit("dragEnd", {
datas: this.datas,

@@ -309,3 +314,3 @@ isDouble,

const result = this.trigger("pinchStart", {
const result = this.emit("pinchStart", {
datas: this.datas,

@@ -330,3 +335,3 @@ angle: store.getAngle(),

this.trigger("pinch", {
this.emit("pinch", {
datas: this.datas,

@@ -352,3 +357,3 @@ movement: this.getMovement(clients),

const store = this.getCurrentStore();
this.trigger("pinchEnd", {
this.emit("pinchEnd", {
datas: this.datas,

@@ -372,3 +377,3 @@ isPinch,

}
private moveClients(clients: Client[], inputEvent: any, isAdd: boolean): ComponentTriggerType<OnDrag> {
private moveClients(clients: Client[], inputEvent: any, isAdd: boolean): TargetParam<OnDrag> {
const store = this.getCurrentStore();

@@ -389,12 +394,7 @@ const position = store[isAdd ? "addClients" : "getPosition"](clients);

}
private onBlur = () => {
this.onDragEnd();
}
}
interface Gesto {
on<T extends keyof GestoEvents>(
eventName: T, handlerToAttach: (event: GestoEvents[T]) => any): this;
on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;
on(events: { [key: string]: (event: { [key: string]: any }) => any }): this;
trigger<T extends keyof GestoEvents>(eventName: T, param: ComponentTriggerType<GestoEvents[T]>): boolean;
trigger(eventName: string, param: { [key: string]: any }): boolean;
}
export default Gesto;

49

src/types.ts
import { IObject } from "@daybrush/utils";
import { EmitterParam } from "@scena/event-emitter";
import Gesto from "./Gesto";
/**

@@ -7,11 +8,2 @@ * @typedef

*/
export interface Event {
eventType: string;
stop(): void;
}
/**
* @typedef
* @memberof Gesto
*/
export interface Client {

@@ -51,5 +43,5 @@ clientX: number;

* @extends Gesto.Position
* @extends Gesto.Event
* @extends EventEmitter.EmitterParam
*/
export interface OnDragStart extends Position, Event {
export interface OnDragStart extends Position, EmitterParam<Gesto> {
datas: IObject<any>;

@@ -63,5 +55,5 @@ inputEvent: any;

* @extends Gesto.Position
* @extends Gesto.Event
* @extends EventEmitter.EmitterParam
*/
export interface OnDrag extends Position, Event {
export interface OnDrag extends Position, EmitterParam<Gesto> {
isDrag: boolean;

@@ -78,5 +70,5 @@ isPinch: boolean;

* @extends Gesto.Position
* @extends Gesto.Event
* @extends EventEmitter.EmitterParam
*/
export interface OnDragEnd extends Position, Event {
export interface OnDragEnd extends Position, EmitterParam<Gesto> {
isDrag: boolean;

@@ -91,5 +83,5 @@ isDouble: boolean;

* @extends Gesto.Position
* @extends Gesto.Event
* @extends EventEmitter.EmitterParam
*/
export interface OnPinchStart extends Position, Event {
export interface OnPinchStart extends Position, EmitterParam<Gesto> {
datas: IObject<any>;

@@ -104,5 +96,5 @@ touches: Position[];

* @extends Gesto.Position
* @extends Gesto.Event
* @extends EventEmitter.EmitterParam
*/
export interface OnPinch extends Position, Event {
export interface OnPinch extends Position, EmitterParam<Gesto> {
datas: IObject<any>;

@@ -121,5 +113,5 @@ touches: Position[];

* @extends Gesto.Position
* @extends Gesto.Event
* @extends EventEmitter.EmitterParam
*/
export interface OnPinchEnd extends Position, Event {
export interface OnPinchEnd extends Position, EmitterParam<Gesto> {
isPinch: boolean;

@@ -143,2 +135,3 @@ datas: IObject<any>;

checkInput?: boolean;
checkWindowBlur?: boolean;
}

@@ -150,3 +143,3 @@

*/
export interface GestoEvents {
export type GestoEvents = {
"dragStart": OnDragStart;

@@ -158,10 +151,2 @@ "drag": OnDrag;

"pinchEnd": OnPinchEnd;
}
type x = Exclude<keyof GestoEvents, "stop" | "eventType">;
/**
* @typedef
* @memberof Gesto
*/
export type ComponentTriggerType<T extends IObject<any>> = Pick<T, Exclude<keyof T, "stop" | "eventType">>;
};

1

tslint.json

@@ -12,2 +12,3 @@ {

"interface-name": false,
"interface-over-type-literal": false,
"indent": [

@@ -14,0 +15,0 @@ true,

dist/gesto.cjs.js.map

Sorry, the diff of this file is not supported yet

dist/gesto.esm.js.map

Sorry, the diff of this file is not supported yet

dist/gesto.js.map

Sorry, the diff of this file is not supported yet

dist/gesto.min.js.map

Sorry, the diff of this file is not supported yet

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