Socket
Socket
Sign inDemoInstall

touchsweep

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

touchsweep - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

dist/touchsweep.js.map

80

dist/touchsweep.d.ts

@@ -1,73 +0,21 @@

export type TouchSwipeEventType = string;
export namespace TouchSwipeEventType {
const tap: string;
const up: string;
const down: string;
const left: string;
const right: string;
export declare const enum TouchSwipeEventType {
tap = "tap",
up = "swipeup",
down = "swipedown",
left = "swipeleft",
right = "swiperight"
}
export default class TouchSweep {
/**
* Create a new TouchSweep instance
* @constructor
* @param {HTMLElement} element
* @param {Record<string, any>} data
* @param {number} threshold
* @return {TouchSweep}
*/
constructor(element?: HTMLElement, data?: Record<string, any>, threshold?: number);
element: HTMLElement;
eventData: Record<string, any>;
threshold: number;
coords: {
startX: number;
startY: number;
endX: number;
endY: number;
};
/**
* Set start X and Y coordinates
* @private
* @param {MouseEvent | TouchEvent} event
* @return {void}
*/
private element;
private eventData;
private threshold;
private coords;
constructor(element?: HTMLElement, data?: {}, threshold?: number);
bind(): void;
unbind(): void;
private getCoords;
private onStart;
/**
* Set end X and Y coordinates
* @private
* @param {MouseEvent | TouchEvent} event
* @return {void}
*/
private onEnd;
/**
* Get X and Y coordinates from a mouse or touch event
* @private
* @param {MouseEvent | TouchEvent} event
* @return {Record<'x' | 'y', number>}
*/
private getCoords;
/**
* Add event listeners
* @public
* @return {void}
*/
public bind(): void;
/**
* Remove event listeners
* @public
* @return {void}
*/
public unbind(): void;
/**
* Get the event name based on the swipe direction
* @private
* @return {TouchSwipeEventType | ''}
*/
private getEventName;
/**
* Dispatch an event
* @private
* @return {void}
*/
private dispatch;
}

@@ -1,215 +0,103 @@

(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports"], factory);
} else if (typeof exports !== "undefined") {
factory(exports);
} else {
var mod = {
exports: {}
};
factory(mod.exports);
global.touchsweep = mod.exports;
}
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
"use strict";
Object.defineProperty(_exports, "__esModule", {
value: true
});
_exports["default"] = _exports.TouchSwipeEventType = void 0;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
/**
* @enum {string}
*/
var TouchSwipeEventType = {
tap: 'tap',
up: 'swipeup',
down: 'swipedown',
left: 'swipeleft',
right: 'swiperight'
};
_exports.TouchSwipeEventType = TouchSwipeEventType;
var TouchSweep = /*#__PURE__*/function () {
/**
* Create a new TouchSweep instance
* @constructor
* @param {HTMLElement} element
* @param {Record<string, any>} data
* @param {number} threshold
* @return {TouchSweep}
*/
function TouchSweep() {
var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document.body;
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var threshold = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 40;
_classCallCheck(this, TouchSweep);
this.element = element;
this.eventData = data;
this.threshold = threshold;
this.coords = {
startX: 0,
startY: 0,
endX: 0,
endY: 0
};
this.onStart = this.onStart.bind(this);
this.onEnd = this.onEnd.bind(this);
this.bind();
return this;
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
/**
* Get X and Y coordinates from a mouse or touch event
* @private
* @param {MouseEvent | TouchEvent} event
* @return {Record<'x' | 'y', number>}
*/
_createClass(TouchSweep, [{
key: "getCoords",
value: function getCoords(event) {
var isMouseEvent = event.type === 'mousedown' || event.type === 'mouseup';
var x = isMouseEvent ? event.pageX : event.changedTouches[0].screenX;
var y = isMouseEvent ? event.pageY : event.changedTouches[0].screenY;
return {
x: x,
y: y
else if (typeof define === "function" && define.amd) {
define(["require", "exports"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TouchSwipeEventType = void 0;
var TouchSwipeEventType;
(function (TouchSwipeEventType) {
TouchSwipeEventType["tap"] = "tap";
TouchSwipeEventType["up"] = "swipeup";
TouchSwipeEventType["down"] = "swipedown";
TouchSwipeEventType["left"] = "swipeleft";
TouchSwipeEventType["right"] = "swiperight";
})(TouchSwipeEventType = exports.TouchSwipeEventType || (exports.TouchSwipeEventType = {}));
var TouchSweep = /** @class */ (function () {
function TouchSweep(element, data, threshold) {
if (element === void 0) { element = document.body; }
if (data === void 0) { data = {}; }
if (threshold === void 0) { threshold = 40; }
this.element = element;
this.eventData = data;
this.threshold = threshold;
this.coords = {
startX: 0,
startY: 0,
endX: 0,
endY: 0
};
this.onStart = this.onStart.bind(this);
this.onEnd = this.onEnd.bind(this);
this.bind();
return this;
}
TouchSweep.prototype.bind = function () {
this.element.addEventListener('touchstart', this.onStart, false);
this.element.addEventListener('touchend', this.onEnd, false);
this.element.addEventListener('mousedown', this.onStart, false);
this.element.addEventListener('mouseup', this.onEnd, false);
};
}
/**
* Set start X and Y coordinates
* @private
* @param {MouseEvent | TouchEvent} event
* @return {void}
*/
}, {
key: "onStart",
value: function onStart(event) {
var _this$getCoords = this.getCoords(event),
x = _this$getCoords.x,
y = _this$getCoords.y;
this.coords.startX = x;
this.coords.startY = y;
}
/**
* Set end X and Y coordinates
* @private
* @param {MouseEvent | TouchEvent} event
* @return {void}
*/
}, {
key: "onEnd",
value: function onEnd(event) {
var _this$getCoords2 = this.getCoords(event),
x = _this$getCoords2.x,
y = _this$getCoords2.y;
this.coords.endX = x;
this.coords.endY = y;
this.dispatch();
}
/**
* Add event listeners
* @public
* @return {void}
*/
}, {
key: "bind",
value: function bind() {
this.element.addEventListener('touchstart', this.onStart, false);
this.element.addEventListener('touchend', this.onEnd, false);
this.element.addEventListener('mousedown', this.onStart, false);
this.element.addEventListener('mouseup', this.onEnd, false);
}
/**
* Remove event listeners
* @public
* @return {void}
*/
}, {
key: "unbind",
value: function unbind() {
this.element.removeEventListener('touchstart', this.onStart, false);
this.element.removeEventListener('touchend', this.onEnd, false);
this.element.removeEventListener('mousedown', this.onStart, false);
this.element.removeEventListener('mouseup', this.onEnd, false);
}
/**
* Get the event name based on the swipe direction
* @private
* @return {TouchSwipeEventType | ''}
*/
}, {
key: "getEventName",
value: function getEventName() {
var threshold = this.threshold;
var _this$coords = this.coords,
startX = _this$coords.startX,
startY = _this$coords.startY,
endX = _this$coords.endX,
endY = _this$coords.endY;
if (endX < startX && Math.abs(endX - startX) > threshold) {
return TouchSwipeEventType.left;
}
if (endX > startX && Math.abs(endX - startX) > threshold) {
return TouchSwipeEventType.right;
}
if (endY < startY && Math.abs(endY - startY) > threshold) {
return TouchSwipeEventType.up;
}
if (endY > startY && Math.abs(endY - startY) > threshold) {
return TouchSwipeEventType.down;
}
if (endY === startY && endX === startX) {
return TouchSwipeEventType.tap;
}
return '';
}
/**
* Dispatch an event
* @private
* @return {void}
*/
}, {
key: "dispatch",
value: function dispatch() {
var eventName = this.getEventName();
if (!eventName) {
return;
}
var event = new CustomEvent(eventName, {
detail: this.eventData
});
this.element.dispatchEvent(event);
}
}]);
return TouchSweep;
}();
_exports["default"] = TouchSweep;
TouchSweep.prototype.unbind = function () {
this.element.removeEventListener('touchstart', this.onStart, false);
this.element.removeEventListener('touchend', this.onEnd, false);
this.element.removeEventListener('mousedown', this.onStart, false);
this.element.removeEventListener('mouseup', this.onEnd, false);
};
TouchSweep.prototype.getCoords = function (event) {
var isMouseEvent = 'pageX' in event;
var x = isMouseEvent ? event.pageX : event.changedTouches[0].screenX;
var y = isMouseEvent ? event.pageY : event.changedTouches[0].screenY;
return { x: x, y: y };
};
TouchSweep.prototype.onStart = function (event) {
var _a = this.getCoords(event), x = _a.x, y = _a.y;
this.coords.startX = x;
this.coords.startY = y;
};
TouchSweep.prototype.onEnd = function (event) {
var _a = this.getCoords(event), x = _a.x, y = _a.y;
this.coords.endX = x;
this.coords.endY = y;
this.dispatch();
};
TouchSweep.prototype.getEventName = function () {
var threshold = this.threshold;
var _a = this.coords, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
if (endX < startX && Math.abs(endX - startX) > threshold) {
return TouchSwipeEventType.left;
}
if (endX > startX && Math.abs(endX - startX) > threshold) {
return TouchSwipeEventType.right;
}
if (endY < startY && Math.abs(endY - startY) > threshold) {
return TouchSwipeEventType.up;
}
if (endY > startY && Math.abs(endY - startY) > threshold) {
return TouchSwipeEventType.down;
}
if (endY === startY && endX === startX) {
return TouchSwipeEventType.tap;
}
return '';
};
TouchSweep.prototype.dispatch = function () {
var eventName = this.getEventName();
if (!eventName) {
return;
}
var event = new CustomEvent(eventName, {
detail: this.eventData
});
this.element.dispatchEvent(event);
};
return TouchSweep;
}());
exports.default = TouchSweep;
});
//# sourceMappingURL=touchsweep.js.map
{
"name": "touchsweep",
"version": "1.3.0",
"version": "2.0.0",
"description": "Super tiny vanilla JS module to detect swipe direction",
"keywords": [
"Touch",
"Event",
"Touch Events",
"touchstart",
"touchend",
"touchmove",
"swipe"
"Touch swipe",
"Touch events",
"Mouse events",
"Touch event detection",
"Mouse event detection"
],
"homepage": "https://touchsweep.atanas.info",
"bugs": {
"url": "https://github.com/scriptex/touchsweep/issues",
"email": "hi@atanas.info"
},
"license": "MIT",
"author": "Atanas Atanasov <hi@atanas.info> (https://atanas.info)",
"funding": "https://github.com/sponsors/scriptex",
"main": "dist/touchsweep.js",
"types": "dist/touchsweep.d.ts",
"repository": {
"type": "git",
"url": "github:scriptex/touchsweep"
},
"scripts": {
"dist": "babel src/touchsweep.js --out-file dist/touchsweep.js",
"minify": "babel src/touchsweep.js --out-file dist/touchsweep.min.js --presets minify,@babel/env",
"types": "tsc",
"build": "yarn dist && yarn minify && yarn tsc"
"lint": "eslint 'src/**/*.ts'",
"copy": "cp -r dist demo",
"clean": "rm -rf dist && rm -rf demo/dist",
"build": "yarn clean && tsc --skipLibCheck && yarn copy"
},
"repository": "git@github.com:scriptex/touchsweep.git",
"bugs": {
"url": "https://github.com/scriptex/touchsweep/issues",
"email": "scriptex.bg@gmail.com"
},
"author": "Atanas Atanasov <scriptex.bg@gmail.com> (https://atanas.info)",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"@babel/cli": "7.17.6",
"@babel/core": "7.17.5",
"@babel/plugin-transform-modules-umd": "7.16.7",
"@babel/preset-env": "7.16.11",
"babel-minify": "0.5.1",
"typescript": "4.6.2"
},
"dependencies": {}
"@typescript-eslint/eslint-plugin": "5.38.1",
"@typescript-eslint/parser": "5.38.1",
"eslint": "8.24.0",
"eslint-config-prettier": "8.5.0",
"typescript": "4.8.4"
}
}

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

[![GitHub release](https://img.shields.io/github/release/scriptex/touchsweep.svg)](https://github.com/scriptex/touchsweep/releases/latest)
[![GitHub issues](https://img.shields.io/github/issues/scriptex/touchsweep.svg)](https://github.com/scriptex/touchsweep/issues)
[![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/touchsweep.svg)](https://github.com/scriptex/touchsweep/commits/master)
[![Github file size](https://img.shields.io/github/size/scriptex/touchsweep/dist/touchsweep.min.js.svg)](https://github.com/scriptex/touchsweep)
[![Build Status](https://travis-ci.com/scriptex/touchsweep.svg?branch=master)](https://travis-ci.com/scriptex/touchsweep)
[![npm](https://img.shields.io/npm/dt/touchsweep.svg)](https://www.npmjs.com/package/touchsweep)
[![npm](https://img.shields.io/npm/v/touchsweep.svg)](https://www.npmjs.com/package/touchsweep)
[![Analytics](https://ga-beacon.appspot.com/UA-83446952-1/github.com/scriptex/touchsweep/README.md)](https://github.com/scriptex/touchsweep/)
[![Travis CI](https://travis-ci.com/scriptex/touchsweep.svg?branch=master)](https://travis-ci.com/scriptex/touchsweep)
[![Github Build](https://github.com/scriptex/touchsweep/workflows/Build/badge.svg)](https://github.com/scriptex/touchsweep/actions?query=workflow%3ABuild)
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/touchsweep/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/touchsweep&utm_campaign=Badge_Grade)
[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-touchsweep-master)
[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/touchsweep/badge)](https://www.codefactor.io/repository/github/scriptex/touchsweep)
[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/touchsweep/README.md?pixel)](https://github.com/scriptex/touchsweep/)
# TouchSweep
Super tiny vanilla JS module to detect swipe direction and trigger custom events accordingly.
> Super tiny vanilla JS module to detect swipe direction and trigger custom events accordingly.
## Visitor stats
![GitHub stars](https://img.shields.io/github/stars/scriptex/touchsweep?style=social)
![GitHub forks](https://img.shields.io/github/forks/scriptex/touchsweep?style=social)
![GitHub watchers](https://img.shields.io/github/watchers/scriptex/touchsweep?style=social)
![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)
## Code stats
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/touchsweep)
![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/touchsweep?style=plastic)
![GitHub language count](https://img.shields.io/github/languages/count/scriptex/touchsweep?style=plastic)
![GitHub top language](https://img.shields.io/github/languages/top/scriptex/touchsweep?style=plastic)
![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/touchsweep?style=plastic)
## Install

@@ -26,12 +40,2 @@

or
just download this repository and use the files located in `dist` folder
or include it from unpkg.com
```html
<script src="https://unpkg.com/touchsweep"></script>
```
## Usage

@@ -116,10 +120,97 @@

## Support this project
## LICENSE
[![Tweet](https://img.shields.io/badge/Tweet-Share_this_repository-blue.svg?style=flat-square&logo=twitter&color=38A1F3)](https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20software%20project%3A&url=https%3A%2F%2Fgithub.com%2Fscriptex%2Ftouchsweep&via=scriptexbg&hashtags=software%2Cgithub%2Ccode%2Cawesome)
[![Donate](https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?style=flat-square&logo=paypal&color=222d65)](https://www.paypal.me/scriptex)
[![Become a Patron](https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?style=flat-square&logo=patreon&color=e64413)](https://www.patreon.com/atanas)
MIT
## LICENSE
---
MIT
<div align="center">
Connect with me:
</div>
<br />
<div align="center">
<a href="https://atanas.info">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg" height="20" alt="">
</a>
&nbsp;
<a href="mailto:hi@atanas.info">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg" height="20" alt="">
</a>
&nbsp;
<a href="https://www.linkedin.com/in/scriptex/">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg" height="20" alt="">
</a>
&nbsp;
<a href="https://github.com/scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg" height="20" alt="">
</a>
&nbsp;
<a href="https://gitlab.com/scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg" height="20" alt="">
</a>
&nbsp;
<a href="https://twitter.com/scriptexbg">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg" height="20" alt="">
</a>
&nbsp;
<a href="https://www.npmjs.com/~scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg" height="20" alt="">
</a>
&nbsp;
<a href="https://www.youtube.com/user/scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg" height="20" alt="">
</a>
&nbsp;
<a href="https://stackoverflow.com/users/4140082/atanas-atanasov">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg" height="20" alt="">
</a>
&nbsp;
<a href="https://codepen.io/scriptex/">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg" width="20" alt="">
</a>
&nbsp;
<a href="https://profile.codersrank.io/user/scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg" height="20" alt="">
</a>
&nbsp;
<a href="https://linktr.ee/scriptex">
<img src="https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg" height="20" alt="">
</a>
</div>
---
<div align="center">
Support and sponsor my work:
<br />
<br />
<a href="https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A&url=https%3A%2F%2Fgithub.com%2Fscriptex&via=scriptexbg&hashtags=software%2Cgithub%2Ccode%2Cawesome" title="Tweet">
<img src="https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter&color=38A1F3" />
</a>
<a href="https://paypal.me/scriptex" title="Donate on Paypal">
<img src="https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal&color=222d65" />
</a>
<a href="https://revolut.me/scriptex" title="Donate on Revolut">
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json" />
</a>
<a href="https://patreon.com/atanas" title="Become a Patron">
<img src="https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon&color=e64413" />
</a>
<a href="https://ko-fi.com/scriptex" title="Buy Me A Coffee">
<img src="https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi" />
</a>
<a href="https://liberapay.com/scriptex/donate" title="Donate on Liberapay">
<img src="https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay&logo=liberapay" />
</a>
<a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" title="Donate Bitcoin">
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json" />
</a>
<a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" title="Donate Etherium">
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json" />
</a>
<a href="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" title="Donate Shiba Inu">
<img src="https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json" />
</a>
</div>
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