Socket
Socket
Sign inDemoInstall

@ajiu9/gesture

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ajiu9/gesture - npm Package Compare versions

Comparing version 1.0.3-beta.6 to 1.0.3-beta.7

248

dist/gesture.cjs.js

@@ -1,247 +0,1 @@

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
class Listener {
constructor(element, recognizer) {
let isListeningMouse = false;
const contexts = new Map();
// PC mousemove and mouseup event
// Event listen in document.documentElement
const el = document.documentElement;
element.addEventListener('mousedown', (event) => {
const context = Object.create(null);
// 移位做为key
contexts.set(`mouse${1 << event.button}`, context);
recognizer.start(event, context);
const mouseMove = (event) => {
// mousemove中event.button may not exist
// get event.buttons 0b00001
let button = 1;
while (button <= event.buttons) {
if (button & event.buttons) {
// order of buttons & button property is not same
let key;
if (button === 2)
key = 4;
else if (button === 4)
key = 2;
else
key = button;
const context = contexts.get(`mouse${key}`);
recognizer.move(event, context);
}
button = button << 1;
}
};
const mouseup = (event) => {
const context = contexts.get(`mouse${1 << event.button}`);
recognizer.end(event, context);
contexts.delete(`mouse${1 << event.button}`);
if (event.buttons === 0) {
el.removeEventListener('mousemove', mouseMove);
el.removeEventListener('mouseup', mouseup);
isListeningMouse = false;
}
};
if (!isListeningMouse) {
el.addEventListener('mousemove', mouseMove);
el.addEventListener('mouseup', mouseup);
isListeningMouse = true;
}
});
// touchstart touchmove on an element
element.addEventListener('touchstart', (event) => {
for (const touch of event.changedTouches) {
const context = Object.create(null);
contexts.set(touch.identifier, context);
recognizer.start(touch, context);
}
});
element.addEventListener('touchmove', (event) => {
for (const touch of event.changedTouches) {
const context = contexts.get(touch.identifier);
// prevent event for example drop down event
// item can interrupt touchmove
event.preventDefault();
recognizer.move(touch, context);
}
});
element.addEventListener('touchend', (event) => {
for (const touch of event.changedTouches) {
const context = contexts.get(touch.identifier);
recognizer.end(touch, context);
contexts.delete(touch.identifier);
}
});
element.addEventListener('touchcancel', (event) => {
for (const touch of event.changedTouches) {
const context = contexts.get(touch.identifier);
recognizer.cancel(touch, context);
contexts.delete(touch.identifier);
}
});
}
}
class Recognizer {
constructor(dispatcher) {
this.dispatcher = dispatcher;
}
start(point, context) {
context.startX = point.clientX;
context.startY = point.clientY;
this.dispatcher.dispatch('start', {
clientX: point.clientX,
clientY: point.clientY,
});
context.points = [{
t: Date.now(),
x: point.clientX,
y: point.clientY,
}];
context.isTap = true;
context.isPan = false;
context.isPress = false;
context.handler = setTimeout(() => {
context.isTap = false;
context.isPan = false;
context.isPress = true;
context.handler = null;
this.dispatcher.dispatch('press', {});
}, 500);
}
move(point, context) {
const dx = point.clientX - context.startX;
const dy = point.clientY - context.startY;
if (!context.isPan && dx ** 2 + dy ** 2 > 100) {
context.isPan = true;
context.isTap = false;
context.isPress = false;
context.isVertical = Math.abs(dx) - Math.abs(dy) >= 0;
clearTimeout(context.handler);
this.dispatcher.dispatch('panStart', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
isVertical: context.isVertical,
});
}
if (context.isPan) {
this.dispatcher.dispatch('pan', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
isVertical: context.isVertical,
});
}
context.points = context.points.filter(point => Date.now() - point.t < 500);
context.points.push({
t: Date.now(),
x: point.clientX,
y: point.clientY,
});
}
end(point, context) {
if (context.isTap) {
this.dispatcher.dispatch('tap', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
});
clearTimeout(context.handler);
}
if (context.isPress)
this.dispatcher.dispatch('pressEnd', {});
context.points = context.points.filter(point => Date.now() - point.t < 500);
let v = 0;
if (context.points.length) {
const d = Math.sqrt((point.clientX - context.points[0].x) ** 2 + (point.clientY - context.points[0].y) ** 2);
v = d / (Date.now() - context.points[0].t);
}
if (v > 1.5) {
context.isFlick = true;
this.dispatcher.dispatch('flick', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
isVertical: context.isVertical,
isFlick: context.isFlick,
velocity: v,
});
}
else {
context.isFlick = false;
}
if (context.isPan) {
this.dispatcher.dispatch('panEnd', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
isVertical: context.isVertical,
isFlick: context.isFlick,
velocity: v,
});
}
this.dispatcher.dispatch('end', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
isVertical: context.isVertical,
isFlick: context.isFlick,
isPan: context.isPan,
velocity: v,
});
}
cancel = (point, context) => {
clearTimeout(context.handler);
this.dispatcher.dispatch('cancel', {});
}
}
class Dispatcher {
constructor(element) {
this.element = element;
}
dispatch(type, properties) {
const event = new Event(type);
for (const name in properties)
event[name] = properties[name];
this.element.dispatchEvent(event);
}
}
function enableGesture(element) {
// eslint-disable-next-line no-new
new Listener(element, new Recognizer(new Dispatcher(element)));
}
exports.Dispatcher = Dispatcher;
exports.Listener = Listener;
exports.Recognizer = Recognizer;
exports.enableGesture = enableGesture;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});class t{constructor(t,e){let s=!1;const i=new Map,n=document.documentElement;t.addEventListener("mousedown",(t=>{const c=Object.create(null);i.set("mouse"+(1<<t.button),c),e.start(t,c);const a=t=>{let s=1;for(;s<=t.buttons;){if(s&t.buttons){let n;n=2===s?4:4===s?2:s;const c=i.get(`mouse${n}`);e.move(t,c)}s<<=1}},r=t=>{const c=i.get("mouse"+(1<<t.button));e.end(t,c),i.delete("mouse"+(1<<t.button)),0===t.buttons&&(n.removeEventListener("mousemove",a),n.removeEventListener("mouseup",r),s=!1)};s||(n.addEventListener("mousemove",a),n.addEventListener("mouseup",r),s=!0)})),t.addEventListener("touchstart",(t=>{for(const s of t.changedTouches){const t=Object.create(null);i.set(s.identifier,t),e.start(s,t)}})),t.addEventListener("touchmove",(t=>{for(const s of t.changedTouches){const n=i.get(s.identifier);t.preventDefault(),e.move(s,n)}})),t.addEventListener("touchend",(t=>{for(const s of t.changedTouches){const t=i.get(s.identifier);e.end(s,t),i.delete(s.identifier)}})),t.addEventListener("touchcancel",(t=>{for(const s of t.changedTouches){const t=i.get(s.identifier);e.cancel(s,t),i.delete(s.identifier)}}))}}class e{constructor(t){this.dispatcher=t}start(t,e){e.startX=t.clientX,e.startY=t.clientY,this.dispatcher.dispatch("start",{clientX:t.clientX,clientY:t.clientY}),e.points=[{t:Date.now(),x:t.clientX,y:t.clientY}],e.isTap=!0,e.isPan=!1,e.isPress=!1,e.handler=setTimeout((()=>{e.isTap=!1,e.isPan=!1,e.isPress=!0,e.handler=null,this.dispatcher.dispatch("press",{})}),500)}move(t,e){const s=t.clientX-e.startX,i=t.clientY-e.startY;!e.isPan&&s**2+i**2>100&&(e.isPan=!0,e.isTap=!1,e.isPress=!1,e.isVertical=Math.abs(s)-Math.abs(i)>=0,clearTimeout(e.handler),this.dispatcher.dispatch("panStart",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical})),e.isPan&&this.dispatcher.dispatch("pan",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical}),e.points=e.points.filter((t=>Date.now()-t.t<500)),e.points.push({t:Date.now(),x:t.clientX,y:t.clientY})}end(t,e){e.isTap&&(this.dispatcher.dispatch("tap",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY}),clearTimeout(e.handler)),e.isPress&&this.dispatcher.dispatch("pressEnd",{}),e.points=e.points.filter((t=>Date.now()-t.t<500));let s=0;if(e.points.length){s=Math.sqrt((t.clientX-e.points[0].x)**2+(t.clientY-e.points[0].y)**2)/(Date.now()-e.points[0].t)}s>1.5?(e.isFlick=!0,this.dispatcher.dispatch("flick",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,velocity:s})):e.isFlick=!1,e.isPan&&this.dispatcher.dispatch("panEnd",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,velocity:s}),this.dispatcher.dispatch("end",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,isPan:e.isPan,velocity:s})}cancel=(t,e)=>{clearTimeout(e.handler),this.dispatcher.dispatch("cancel",{})}}class s{constructor(t){this.element=t}dispatch(t,e){const s=new Event(t);for(const i in e)s[i]=e[i];this.element.dispatchEvent(s)}}exports.Dispatcher=s,exports.Listener=t,exports.Recognizer=e,exports.enableGesture=function(i){new t(i,new e(new s(i)))};

@@ -1,240 +0,1 @@

class Listener {
constructor(element, recognizer) {
let isListeningMouse = false;
const contexts = new Map();
// PC mousemove and mouseup event
// Event listen in document.documentElement
const el = document.documentElement;
element.addEventListener('mousedown', (event) => {
const context = Object.create(null);
// 移位做为key
contexts.set(`mouse${1 << event.button}`, context);
recognizer.start(event, context);
const mouseMove = (event) => {
// mousemove中event.button may not exist
// get event.buttons 0b00001
let button = 1;
while (button <= event.buttons) {
if (button & event.buttons) {
// order of buttons & button property is not same
let key;
if (button === 2)
key = 4;
else if (button === 4)
key = 2;
else
key = button;
const context = contexts.get(`mouse${key}`);
recognizer.move(event, context);
}
button = button << 1;
}
};
const mouseup = (event) => {
const context = contexts.get(`mouse${1 << event.button}`);
recognizer.end(event, context);
contexts.delete(`mouse${1 << event.button}`);
if (event.buttons === 0) {
el.removeEventListener('mousemove', mouseMove);
el.removeEventListener('mouseup', mouseup);
isListeningMouse = false;
}
};
if (!isListeningMouse) {
el.addEventListener('mousemove', mouseMove);
el.addEventListener('mouseup', mouseup);
isListeningMouse = true;
}
});
// touchstart touchmove on an element
element.addEventListener('touchstart', (event) => {
for (const touch of event.changedTouches) {
const context = Object.create(null);
contexts.set(touch.identifier, context);
recognizer.start(touch, context);
}
});
element.addEventListener('touchmove', (event) => {
for (const touch of event.changedTouches) {
const context = contexts.get(touch.identifier);
// prevent event for example drop down event
// item can interrupt touchmove
event.preventDefault();
recognizer.move(touch, context);
}
});
element.addEventListener('touchend', (event) => {
for (const touch of event.changedTouches) {
const context = contexts.get(touch.identifier);
recognizer.end(touch, context);
contexts.delete(touch.identifier);
}
});
element.addEventListener('touchcancel', (event) => {
for (const touch of event.changedTouches) {
const context = contexts.get(touch.identifier);
recognizer.cancel(touch, context);
contexts.delete(touch.identifier);
}
});
}
}
class Recognizer {
constructor(dispatcher) {
this.dispatcher = dispatcher;
}
start(point, context) {
context.startX = point.clientX;
context.startY = point.clientY;
this.dispatcher.dispatch('start', {
clientX: point.clientX,
clientY: point.clientY,
});
context.points = [{
t: Date.now(),
x: point.clientX,
y: point.clientY,
}];
context.isTap = true;
context.isPan = false;
context.isPress = false;
context.handler = setTimeout(() => {
context.isTap = false;
context.isPan = false;
context.isPress = true;
context.handler = null;
this.dispatcher.dispatch('press', {});
}, 500);
}
move(point, context) {
const dx = point.clientX - context.startX;
const dy = point.clientY - context.startY;
if (!context.isPan && dx ** 2 + dy ** 2 > 100) {
context.isPan = true;
context.isTap = false;
context.isPress = false;
context.isVertical = Math.abs(dx) - Math.abs(dy) >= 0;
clearTimeout(context.handler);
this.dispatcher.dispatch('panStart', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
isVertical: context.isVertical,
});
}
if (context.isPan) {
this.dispatcher.dispatch('pan', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
isVertical: context.isVertical,
});
}
context.points = context.points.filter(point => Date.now() - point.t < 500);
context.points.push({
t: Date.now(),
x: point.clientX,
y: point.clientY,
});
}
end(point, context) {
if (context.isTap) {
this.dispatcher.dispatch('tap', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
});
clearTimeout(context.handler);
}
if (context.isPress)
this.dispatcher.dispatch('pressEnd', {});
context.points = context.points.filter(point => Date.now() - point.t < 500);
let v = 0;
if (context.points.length) {
const d = Math.sqrt((point.clientX - context.points[0].x) ** 2 + (point.clientY - context.points[0].y) ** 2);
v = d / (Date.now() - context.points[0].t);
}
if (v > 1.5) {
context.isFlick = true;
this.dispatcher.dispatch('flick', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
isVertical: context.isVertical,
isFlick: context.isFlick,
velocity: v,
});
}
else {
context.isFlick = false;
}
if (context.isPan) {
this.dispatcher.dispatch('panEnd', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
isVertical: context.isVertical,
isFlick: context.isFlick,
velocity: v,
});
}
this.dispatcher.dispatch('end', {
startX: context.startX,
startY: context.startY,
clientX: point.clientX,
clientY: point.clientY,
isVertical: context.isVertical,
isFlick: context.isFlick,
isPan: context.isPan,
velocity: v,
});
}
cancel = (point, context) => {
clearTimeout(context.handler);
this.dispatcher.dispatch('cancel', {});
}
}
class Dispatcher {
constructor(element) {
this.element = element;
}
dispatch(type, properties) {
const event = new Event(type);
for (const name in properties)
event[name] = properties[name];
this.element.dispatchEvent(event);
}
}
function enableGesture(element) {
// eslint-disable-next-line no-new
new Listener(element, new Recognizer(new Dispatcher(element)));
}
export { Dispatcher, Listener, Recognizer, enableGesture };
class t{constructor(t,e){let s=!1;const i=new Map,n=document.documentElement;t.addEventListener("mousedown",(t=>{const c=Object.create(null);i.set("mouse"+(1<<t.button),c),e.start(t,c);const a=t=>{let s=1;for(;s<=t.buttons;){if(s&t.buttons){let n;n=2===s?4:4===s?2:s;const c=i.get(`mouse${n}`);e.move(t,c)}s<<=1}},r=t=>{const c=i.get("mouse"+(1<<t.button));e.end(t,c),i.delete("mouse"+(1<<t.button)),0===t.buttons&&(n.removeEventListener("mousemove",a),n.removeEventListener("mouseup",r),s=!1)};s||(n.addEventListener("mousemove",a),n.addEventListener("mouseup",r),s=!0)})),t.addEventListener("touchstart",(t=>{for(const s of t.changedTouches){const t=Object.create(null);i.set(s.identifier,t),e.start(s,t)}})),t.addEventListener("touchmove",(t=>{for(const s of t.changedTouches){const n=i.get(s.identifier);t.preventDefault(),e.move(s,n)}})),t.addEventListener("touchend",(t=>{for(const s of t.changedTouches){const t=i.get(s.identifier);e.end(s,t),i.delete(s.identifier)}})),t.addEventListener("touchcancel",(t=>{for(const s of t.changedTouches){const t=i.get(s.identifier);e.cancel(s,t),i.delete(s.identifier)}}))}}class e{constructor(t){this.dispatcher=t}start(t,e){e.startX=t.clientX,e.startY=t.clientY,this.dispatcher.dispatch("start",{clientX:t.clientX,clientY:t.clientY}),e.points=[{t:Date.now(),x:t.clientX,y:t.clientY}],e.isTap=!0,e.isPan=!1,e.isPress=!1,e.handler=setTimeout((()=>{e.isTap=!1,e.isPan=!1,e.isPress=!0,e.handler=null,this.dispatcher.dispatch("press",{})}),500)}move(t,e){const s=t.clientX-e.startX,i=t.clientY-e.startY;!e.isPan&&s**2+i**2>100&&(e.isPan=!0,e.isTap=!1,e.isPress=!1,e.isVertical=Math.abs(s)-Math.abs(i)>=0,clearTimeout(e.handler),this.dispatcher.dispatch("panStart",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical})),e.isPan&&this.dispatcher.dispatch("pan",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical}),e.points=e.points.filter((t=>Date.now()-t.t<500)),e.points.push({t:Date.now(),x:t.clientX,y:t.clientY})}end(t,e){e.isTap&&(this.dispatcher.dispatch("tap",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY}),clearTimeout(e.handler)),e.isPress&&this.dispatcher.dispatch("pressEnd",{}),e.points=e.points.filter((t=>Date.now()-t.t<500));let s=0;if(e.points.length){s=Math.sqrt((t.clientX-e.points[0].x)**2+(t.clientY-e.points[0].y)**2)/(Date.now()-e.points[0].t)}s>1.5?(e.isFlick=!0,this.dispatcher.dispatch("flick",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,velocity:s})):e.isFlick=!1,e.isPan&&this.dispatcher.dispatch("panEnd",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,velocity:s}),this.dispatcher.dispatch("end",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,isPan:e.isPan,velocity:s})}cancel=(t,e)=>{clearTimeout(e.handler),this.dispatcher.dispatch("cancel",{})}}class s{constructor(t){this.element=t}dispatch(t,e){const s=new Event(t);for(const i in e)s[i]=e[i];this.element.dispatchEvent(s)}}function i(i){new t(i,new e(new s(i)))}export{s as Dispatcher,t as Listener,e as Recognizer,i as enableGesture};

2

package.json
{
"name": "@ajiu9/gesture",
"version": "1.0.3-beta.6",
"version": "1.0.3-beta.7",
"description": "",

@@ -5,0 +5,0 @@ "author": "ajiu9 <615944323@qq.com> (https://github.com/ajiu9/)",

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc