#1: Event types for vanilla JS + svelte syntax

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+    "cSpell.ignoreWords": [
+        "dragmove",
+        "dragstop",
+        "ezgdragmove",
+        "ezgdragstart",
+        "ezgdragstop",
+        "ezgesture",
+        "ezglongpress",
+        "ezgpinchend",
+        "ezgpinchmove",
+        "ezgpinchstart",
+        "gzipped",
+        "longpress",
+        "pinchstart"
+    ],
+    "cSpell.words": [
+        "qurafi"
+    ]
+}

README.md

@@ -1,10 +1,10 @@
-# EZGesture(~1KB Gzipped)
+# EZGesture(~1KB GZipped)
 ![npm (tag)](https://img.shields.io/npm/v/ezgesture) ![GitHub](https://img.shields.io/github/license/mhmd-22/ezgesture)
 
 Easily add gestures functionality with simple native DOM events
 
 
-- [EZGesture(~1KB Gzipped)](#ezgesture1kb-gzipped)
+- [EZGesture(~1KB GZipped)](#ezgesture1kb-gzipped)
   - [Installation](#installation)
   - [Quick Start](#quick-start)
   - [Usage](#usage)
@@ -76,11 +76,11 @@ You can also supply `threshold` in options to set minimum distance to trigger ev
 **Events**
 - `ezgdragstart` - cancelable with `e.preventDefault()`
 - `ezgdragmove` - cancelable. will stop calculating last offset.
-- `ezgdragend`
+- `ezgdragstop`
 
 
-**Events paramters:**
-Use `e.detail` to access these event paramaters:
+**Events parameters:**
+Use `e.detail` to access these event parameters:
 ```javascript
 
 // Initial drag position
@@ -115,16 +115,16 @@ Available options:
 **cancelable**: Yes, with `e.preventDefault()`
 
 
-**paramaters**:
+**parameters**:
 ```javascript
 startTouches
 originalEvent
 ```
 
 ### `ezgpinchmove`
-**cancelable**: Yes, It will stop calculating `lastXXX` paramaters such as `lastOffset` and `lastDist`
+**cancelable**: Yes, It will stop calculating `lastXXX` parameters such as `lastOffset` and `lastDist`
 
-**paramaters**:
+**parameters**:
 * `dx, dy`: difference between the two touches
 * `da`: angle difference from last movement
 * `dist`: distance between two fingers
@@ -141,7 +141,7 @@ originalEvent
 ### `ezgpinchend`
 **cancelable**: No
 
-**paramaters**:
+**parameters**:
 * `startTouches`
 * `lastTouches`
 * `lastOffset`
@@ -159,7 +159,7 @@ The default duration is `700ms`. and it has only one parameter `originalEvent`
 ## Integration with other frameworks
 
 ### Svelte
-You could also listen to this event with framework that uses native dom events. For example in svelte you could use:
+You could also listen to these events with framework that uses native dom events. For example in svelte you could use:
 
 ```svelte
 <div use:enablePinchEvents={{options}} on:ezgpinchmove={onPinch}></div>

demos/dist/interfaces.js

@@ -0,0 +1 @@
+"use strict";

demos/dist/shared.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dispatchCustomEvent = void 0;
+function dispatchCustomEvent(name, elm, detail, cancelable) {
+    if (cancelable === void 0) { cancelable = true; }
+    return !elm.dispatchEvent(new CustomEvent("ezg" + name, { detail: detail, cancelable: cancelable }));
+}
+exports.dispatchCustomEvent = dispatchCustomEvent;

dist/interfaces.js

@@ -0,0 +1 @@
+"use strict";

dist/shared.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dispatchCustomEvent = void 0;
+function dispatchCustomEvent(name, elm, detail, cancelable) {
+    if (cancelable === void 0) { cancelable = true; }
+    return !elm.dispatchEvent(new CustomEvent("ezg" + name, { detail: detail, cancelable: cancelable }));
+}
+exports.dispatchCustomEvent = dispatchCustomEvent;

lib/interfaces.ts

@@ -0,0 +1,59 @@
+interface EZGDragEventDetail {
+    startX: number;
+    startY: number;
+
+    lastX: number;
+    lastY: number;
+
+    clientX: number;
+    clientY: number;
+
+    offsetX: number;
+    offsetY: number;
+
+    movementX: number;
+    movementY: number;
+
+    originalEvent: MouseEvent | TouchEvent;
+}
+
+interface EZGPinchBaseDetail {
+    startTouches: TouchList;
+    lastTouches: TouchList;
+    lastOffset: number;
+    lastDist: number;
+    lastAngle: number;
+    originalEvent: TouchEvent;
+}
+
+type EZGPinchEndDetail = EZGPinchBaseDetail;
+
+interface EZGPinchStartDetail {
+    startTouches: TouchEvent;
+    originalEvent: TouchEvent;
+}
+
+interface EZGPinchMoveDetail extends EZGPinchBaseDetail {
+    dx: number;
+    dy: number;
+    da: number;
+    dist: number;
+    angle: number;
+    offset: number;
+    midX: number;
+    midY: number;
+    dir: number;
+    touches: TouchList;
+}
+
+interface EZGLongPressDetail {
+    originalEvent: MouseEvent | TouchEvent;
+}
+
+type EZGDragEvent = CustomEvent<EZGDragEventDetail>;
+
+type EZGPinchStartEvent = CustomEvent<EZGPinchStartDetail>;
+type EZGPinchMoveEvent = CustomEvent<EZGPinchMoveDetail>;
+type EZGPinchEndEvent = CustomEvent<EZGPinchEndDetail>;
+
+type EZGLongPressEvent = CustomEvent<EZGLongPressDetail>;

lib/pinch.ts

@@ -17,15 +17,15 @@ const defaults = {
 
 const options = new WeakMap();
 
-export function enablePinchEvents(elm: Element, opt = defaults) {
+export function enablePinchEvents(elm: HTMLElement, opt = defaults) {
     options.set(elm, opt);
     elm.addEventListener("touchstart", onTouchStart);
 }
 
-function onTouchStart(e) {
+function onTouchStart(this: Element, e: TouchEvent) {
     startTouches = e.touches;
     checkPinch = true;
-    e.currentTarget.addEventListener("touchmove", onTouchMove);
+    this.addEventListener("touchmove", onTouchMove);
 }
 
 function onTouchMove(e) {
@@ -109,7 +109,10 @@ function calculatePinchProps(touches) {
 
 function onTouchEnd(e) {
     if (!checkPinch && activeElement) {
-        dispatchPinchEvent("end", activeElement, null, false);
+        const detail = {
+            originalEvent: e,
+        };
+        dispatchPinchEvent("end", activeElement, detail, false);
         activeElement = undefined;
     }
 }

tsconfig.json

@@ -6,7 +6,7 @@
     // "incremental": true,                   /* Enable incremental compilation */
     "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
     // "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    "lib": ["DOM"],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
@@ -26,8 +26,8 @@
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
     /* Strict Type-Checking Options */
-    // "strict": true,                           /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,              /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
     // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */

types/global.d.ts

@@ -0,0 +1,11 @@
+/// <reference path="../lib/interfaces.ts" />
+
+interface HTMLElementEventMap {
+    ezgdragstart: EZGDragEvent;
+    ezgdragmove: EZGDragEvent;
+    ezgdragstop: EZGDragEvent;
+    ezgpinchstart: EZGPinchStartEvent;
+    ezgpinchmove: EZGPinchMoveEvent;
+    ezgpinchend: EZGPinchEndEvent;
+    ezglongpress: EZGLongPressEvent;
+}

types/interfaces.d.ts

@@ -0,0 +1,46 @@
+interface EZGDragEventDetail {
+    startX: number;
+    startY: number;
+    lastX: number;
+    lastY: number;
+    clientX: number;
+    clientY: number;
+    offsetX: number;
+    offsetY: number;
+    movementX: number;
+    movementY: number;
+    originalEvent: MouseEvent | TouchEvent;
+}
+interface EZGPinchBaseDetail {
+    startTouches: TouchList;
+    lastTouches: TouchList;
+    lastOffset: number;
+    lastDist: number;
+    lastAngle: number;
+    originalEvent: TouchEvent;
+}
+declare type EZGPinchEndDetail = EZGPinchBaseDetail;
+interface EZGPinchStartDetail {
+    startTouches: TouchEvent;
+    originalEvent: TouchEvent;
+}
+interface EZGPinchMoveDetail extends EZGPinchBaseDetail {
+    dx: number;
+    dy: number;
+    da: number;
+    dist: number;
+    angle: number;
+    offset: number;
+    midX: number;
+    midY: number;
+    dir: number;
+    touches: TouchList;
+}
+interface EZGLongPressDetail {
+    originalEvent: MouseEvent | TouchEvent;
+}
+declare type EZGDragEvent = CustomEvent<EZGDragEventDetail>;
+declare type EZGPinchStartEvent = CustomEvent<EZGPinchStartDetail>;
+declare type EZGPinchMoveEvent = CustomEvent<EZGPinchMoveDetail>;
+declare type EZGPinchEndEvent = CustomEvent<EZGPinchEndDetail>;
+declare type EZGLongPressEvent = CustomEvent<EZGLongPressDetail>;

types/pinch.d.ts

@@ -1,4 +1,4 @@
-export declare function enablePinchEvents(elm: Element, opt?: {
+export declare function enablePinchEvents(elm: HTMLElement, opt?: {
     distanceThreshold: number;
     angleThreshold: number;
 }): void;