Initial commit

.gitignore

@@ -0,0 +1,7 @@
+# Webstorm
+.idea
+
+# Dependency directories
+node_modules/
+
+.rpt2_cache

.npmignore

@@ -0,0 +1,3 @@
+.rpt2_cache
+rollup.config.js
+src

.npmrc

@@ -0,0 +1 @@
+package-lock=false

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Adam LaCombe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,33 @@
+# st-press
+Adds the `onPress` event to your Stencil app. Press is recognized when the pointer is down for 251ms without any movement.
+
+Add the following to your `global-script.tsx` file:
+```ts
+import '@edgeworkscreative/st-press';
+```
+
+`example-component.tsx`:
+```ts
+@Component({
+  tag:      'example-component',
+  styleUrl: 'example-component.scss',
+  shadow:   true
+})
+export class ExampleComponent {
+
+  onPress(e) {
+    console.log('item was pressed', e);
+  }
+
+  render() {
+    return [
+      <ion-list lines={'full'}>
+        <ion-item onPress={(e) => this.onPress(e)}>One</ion-item>
+        <ion-item onPress={(e) => this.onPress(e)}>Two</ion-item>
+        <ion-item onPress={(e) => this.onPress(e)}>Three</ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+

dist/index.d.ts

@@ -0,0 +1,16 @@
+interface HTMLAttributes {
+    'onPress'?: (event: CustomEvent<void>) => void;
+}
+declare class PressEvents {
+    private time;
+    private threshold;
+    private hasStarted;
+    private startX;
+    private startY;
+    private moveX;
+    private moveY;
+    constructor(time?: number, threshold?: number);
+    onStart(ev: MouseEvent | TouchEvent): void;
+    onEnd(): void;
+    onMove(ev: MouseEvent | TouchEvent): void;
+}

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@edgeworkscreative/st-press",
+  "version": "1.0.2",
+  "description": "",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "npm run rollup && npm run uglify",
+    "rollup": "rollup -c",
+    "uglify": "uglifyjs --compress --mangle -o ./dist/index.js -- ./dist/index.js",
+    "lint": "tslint --project tsconfig.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/edgeworkscreative/st-press.git"
+  },
+  "keywords": [
+    "Stencil",
+    "StencilJS",
+    "JSX",
+    "Ionic4",
+    "event"
+  ],
+  "author": "Edgeworks Creative",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/edgeworkscreative/st-press"
+  },
+  "homepage": "https://github.com/edgeworkscreative/st-press",
+  "devDependencies": {
+    "@studio/changes": "^1.5.2",
+    "@types/jasmine": "^2.8.8",
+    "@types/node": "^8.5.1",
+    "rollup": "^0.56.2",
+    "rollup-plugin-commonjs": "^9.1.4",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.2.1",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-typescript2": "^0.16.1",
+    "tcs": "^10.0.0",
+    "tslint": "^5.10.0",
+    "tslint-ionic-rules": "0.0.14",
+    "typescript": "2.9.1",
+    "uglify-es": "^3.3.9"
+  }
+}

rollup.config.js

@@ -0,0 +1,29 @@
+import builtins from 'rollup-plugin-node-builtins';
+import globals from 'rollup-plugin-node-globals';
+import resolve from 'rollup-plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+
+export default {
+    input: 'src/index.ts',
+    plugins: [
+        typescript({
+            tsconfigOverride: {
+                compilerOptions: {
+                    module: 'esnext',
+                    declaration: true
+                }
+            }
+        }),
+        resolve({
+            browser: true,
+        }),
+        globals(),
+        builtins()
+    ],
+    output: {
+        extend: true,
+        file: `dist/index.js`,
+        format: 'es',
+        sourcemap: true
+    }
+}

src/index.ts

@@ -0,0 +1,58 @@
+interface HTMLAttributes {
+	'onPress'?: (event: CustomEvent<void>) => void;
+}
+
+class PressEvents {
+	private time: any;
+	private threshold: any;
+	private hasStarted: boolean;
+	private startX: number;
+	private startY: number;
+	private moveX: number;
+	private moveY: number;
+
+	constructor(time: number = 251, threshold: number = 9) {
+		this.time      = time;
+		this.threshold = threshold;
+		document.addEventListener('touchstart', this.onStart.bind(this), true);
+		document.addEventListener('mousedown', this.onStart.bind(this), true);
+		document.addEventListener('touchend', this.onEnd.bind(this), true);
+		document.addEventListener('mouseup', this.onEnd.bind(this), true);
+		document.addEventListener('touchmove', this.onMove.bind(this), true);
+		document.addEventListener('mousemove', this.onMove.bind(this), true);
+	}
+
+	onStart(ev: MouseEvent | TouchEvent) {
+		if (!this.hasStarted) {
+			this.moveX = this.startX = (ev instanceof MouseEvent) ? ev.pageX : ev.touches[0].pageX;
+			this.moveY = this.startY = (ev instanceof MouseEvent) ? ev.pageY : ev.touches[0].pageY;
+			setTimeout(() => {
+				if (this.hasStarted && Math.abs(this.startX - this.moveX) <= this.threshold && Math.abs(this.startY - this.moveY) <= this.threshold) {
+					const path = (ev as any).path;
+					for (let i = 0; i < path.length - 2; i++) {
+						const el    = path[i];
+						const event = new CustomEvent('press', {
+							bubbles: false,
+							detail:  el
+						});
+						el.dispatchEvent(event);
+					}
+					this.hasStarted = false;
+				}
+			}, this.time);
+			this.hasStarted = true;
+		}
+	}
+
+	onEnd() {
+		this.hasStarted = false;
+	}
+
+	onMove(ev: MouseEvent | TouchEvent) {
+		this.moveX = (ev instanceof MouseEvent) ? ev.pageX : ev.changedTouches[0].pageX;
+		this.moveY = (ev instanceof MouseEvent) ? ev.pageY : ev.changedTouches[0].pageY;
+	}
+
+}
+
+new PressEvents();

tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "es2017",
+    "declaration": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "dom",
+      "es2017"
+    ],
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "isolatedModules": false,
+    "moduleResolution": "node"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}