Skip to content

Commit

Permalink
v2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@biodiv
biodiv committed Sep 5, 2022
1 parent 2077bd4 commit 37292fd
Show file tree
Hide file tree
Showing 12 changed files with 153 additions and 99 deletions.
6 changes: 5 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,8 @@ Pointer gestures for your webapp.
[Documentation](https://biodiv.github.io/contactjs/)

# v2.0 Changelog

- written in TypeScript instead of JavaScript
- added easy-to-use options for `Pess` and `Tap`
- added the option `simultaneousGestures` to `PointerListener`
- added the option `consecutiveGestures` to `PointerListener`
- The `Contact` class has been replaced with the `PointerManager` class
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "contactjs",
"version": "1.4.1",
"version": "2.0",
"description": "Pointer gestures for your webapp",
"main": "dist/index.js",
"module": "dist/contact.module.js",
"module": "dist/contact.js",
"types": "dist/index.d.ts",
"source": "src/index.ts",
"directories": {
Expand Down
5 changes: 4 additions & 1 deletion src/PointerListener.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import { Gesture } from "./gestures/Gesture";
import { Tap } from "./gestures/Tap";
import { Press } from "./gestures/Press";
import { Pan } from "./gestures/Pan";
import { Pinch } from "./gestures/Pinch";
import { Rotate } from "./gestures/Rotate";
import { TwoFingerPan } from "./gestures/TwoFingerPan";
import { PointerManager } from "./PointerManager";
import {
PointerListenerState,
Expand All @@ -27,7 +30,7 @@ import {

type GestureConstructor = new (...args: ConstructorParameters<typeof Gesture>) => Gesture;

const ALL_GESTURE_CLASSES: GestureConstructor[] = [Tap, Press, Pan]; //, Pinch, Rotate, TwoFingerPan];
const ALL_GESTURE_CLASSES: GestureConstructor[] = [Tap, Press, Pan, Pinch, Rotate, TwoFingerPan];

type Timer = ReturnType<typeof setInterval>;

Expand Down
4 changes: 2 additions & 2 deletions src/gestures/Pan.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,8 @@ export class Pan extends SinglePointerGesture {
console.log("[Pan] preventing touchmove default");
}

event.preventDefault();
event.stopPropagation();
//event.preventDefault();
//event.stopPropagation();
}
}
}
28 changes: 24 additions & 4 deletions src/gestures/Press.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ import { PointerManager } from "../PointerManager";
import { SinglePointerInput } from "../SinglePointerInput";
import { GestureState } from "../input-consts";


interface PressOptions extends GestureOptions {
minDuration: number,
maxDistance: number,
}
/*
* press should only be fired once
* if global duration is below Press.initialMinMaxParameters["duration"][0], set the Press to possible
Expand All @@ -15,15 +20,30 @@ export class Press extends SinglePointerGesture {

private static minDuration = 600;

constructor(domElement: HTMLElement, options?: Partial<GestureOptions>) {
constructor(domElement: HTMLElement, options?: Partial<PressOptions>) {
super(domElement, options);

this.eventBaseName = "press";

this.initialParameters.global.min["duration"] = 600; // milliseconds. after a certain touch duration, it is not a TAP anymore
let globalMinDuration = 600;
let globalMaxDistance = 10;
let globalMaxMaximumDistance = 20;

if (options){
if ("minDuration" in options){
globalMinDuration = options["minDuration"];
}

if ("maxDistance" in options){
globalMaxMaximumDistance = options["maxDistance"];
globalMaxDistance = options["maxDistance"];
}
}

this.initialParameters.global.min["duration"] = globalMinDuration; // milliseconds. after a certain touch duration, it is not a TAP anymore

this.initialParameters.global.max["distance"] = 10; // if the pointer moved a certain distance, Press becomes impossible
this.initialParameters.global.max["maximumDistance"] = 20;
this.initialParameters.global.max["distance"] = globalMaxDistance; // if the pointer moved a certain distance, Press becomes impossible
this.initialParameters.global.max["maximumDistance"] = globalMaxMaximumDistance;
// only Press has this parameter
this.hasBeenEmitted = false;

Expand Down
29 changes: 25 additions & 4 deletions src/gestures/Tap.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ import { PointerManager } from "../PointerManager";
import { SinglePointerInput } from "../SinglePointerInput";
import { PointerManagerState } from "../input-consts";


interface TapOptions extends GestureOptions {
maxDuration: number;
maxDistance: number;
}

/*
* TAP DEFINITION
* - user touches the screen with one finger or presses the mouse button down
Expand All @@ -13,17 +19,32 @@ import { PointerManagerState } from "../input-consts";
*/
export class Tap extends SinglePointerGesture {

constructor(domElement: HTMLElement, options?: Partial<GestureOptions>) {
constructor(domElement: HTMLElement, options?: Partial<TapOptions>) {
super(domElement, options);

this.validPointerManagerState = PointerManagerState.NoPointer;

this.eventBaseName = "tap";

this.initialParameters.global.max["duration"] = 200; // milliseconds. after a certain touch duration, it is not a TAP anymore
let globalMaxDuration = 200;
let liveMaxDistance = 30;
let globalMaxDistance = 30;

if (options){
if ("maxDuration" in options){
globalMaxDuration = options["maxDuration"];
}

if ("maxDistance" in options){
liveMaxDistance = options["maxDistance"];
globalMaxDistance = options["maxDistance"];
}
}

this.initialParameters.global.max["duration"] = globalMaxDuration; // milliseconds. after a certain touch duration, it is not a TAP anymore

this.initialParameters.live.max["distance"] = 30; // if a certain distance is detected, TAP becomes impossible
this.initialParameters.global.max["distance"] = 30; // if a certain distance is detected, TAP becomes impossible
this.initialParameters.live.max["distance"] = liveMaxDistance; // if a certain distance is detected, TAP becomes impossible
this.initialParameters.global.max["distance"] = globalMaxDistance; // if a certain distance is detected, TAP becomes impossible

}

Expand Down
18 changes: 9 additions & 9 deletions tests/block/test-block.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
"use strict";
import { PointerListener, Press, Pan } from '../../dist/contact.module.js';
import { PointerListener, Press, Pan } from "../../dist/contact.js";

var animationFrameId = null;

Expand Down Expand Up @@ -46,7 +46,7 @@ function loadContact() {
pointerup: function (event, pointerListener) {
if (pointerListener.pointerManager.hasPointersOnSurface() == false) {
resetElementTransform();
};
}
}
});

Expand Down Expand Up @@ -86,11 +86,11 @@ function resetElementTransform() {
z: 0,
angle: 0
}
}
};

if (ticking == true) {
setTimeout(function () {
resetElementTransform(element)
resetElementTransform(element);
}, 1000 / 60);
}
else {
Expand All @@ -101,12 +101,12 @@ function resetElementTransform() {

function requestElementUpdate(wait) {

var wait = wait || false;
wait = wait || false;

var transformValues = [
'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
'scale3d(' + transform.scale.x + ', ' + transform.scale.y + ', ' + transform.scale.z + ')',
'rotate3d(' + transform.rotate.x + ',' + transform.rotate.y + ',' + transform.rotate.z + ',' + transform.rotate.angle + 'deg)'
"translate3d(" + transform.translate.x + "px, " + transform.translate.y + "px, 0)",
"scale3d(" + transform.scale.x + ", " + transform.scale.y + ", " + transform.scale.z + ")",
"rotate3d(" + transform.rotate.x + "," + transform.rotate.y + "," + transform.rotate.z + "," + transform.rotate.angle + "deg)"
];

var transformString = transformValues.join(" ");
Expand Down Expand Up @@ -136,7 +136,7 @@ function onPan(event) {
element.className = '';

var deltaX = event.detail.global.deltaX;
var deltaY = event.detail.global.deltaY
var deltaY = event.detail.global.deltaY;

transform.translate = {
x: deltaX,
Expand Down
20 changes: 10 additions & 10 deletions tests/bubbling/test-bubbling.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
"use strict";
import { PointerListener, Tap } from '../../dist/contact.module.js';
import { PointerListener, Tap } from "../../dist/contact.js";

var animationFrameId = null;

Expand Down Expand Up @@ -42,7 +42,7 @@ function loadContact (){
pointerup: function (event, pointerListener){
if(pointerListener.pointerManager.hasPointersOnSurface() == false && TAP_ACTIVE == false){
resetElementTransform();
};
}
}
});

Expand All @@ -67,7 +67,7 @@ function loadContact (){
pointerup: function (event, pointerListener){
if(pointerListener.pointerManager.hasPointersOnSurface() == false && TAP_ACTIVE == false){
resetElementTransform();
};
}
}
});

Expand Down Expand Up @@ -113,11 +113,11 @@ function resetElementTransform (element){
z : 0,
angle: 0
}
}
};

if (ticking == true){
setTimeout(function(){
resetElementTransform(element)
resetElementTransform(element);
}, 1000/60);
}
else {
Expand All @@ -128,12 +128,12 @@ function resetElementTransform (element){

function requestElementUpdate(element, wait) {

var wait = wait || false;
wait = wait || false;

var transformValues = [
'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
'scale3d(' + transform.scale.x + ', ' + transform.scale.y + ', ' + transform.scale.z + ')',
'rotate3d('+ transform.rotate.x +','+ transform.rotate.y +','+ transform.rotate.z +','+ transform.rotate.angle + 'deg)'
"translate3d(" + transform.translate.x + "px, " + transform.translate.y + "px, 0)",
"scale3d(" + transform.scale.x + ", " + transform.scale.y + ", " + transform.scale.z + ")",
"rotate3d(" + transform.rotate.x + "," + transform.rotate.y + "," + transform.rotate.z + "," + transform.rotate.angle + "deg)"
];

var transformString = transformValues.join(" ");
Expand Down Expand Up @@ -161,7 +161,7 @@ function requestElementUpdate(element, wait) {

function onTap (event) {

let element = event.target
let element = event.target;

element.className = "animate";

Expand Down
28 changes: 16 additions & 12 deletions tests/consecutive/test-consecutive.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
"use strict";
import { PointerListener, Press, Pan, TwoFingerPan, Pinch } from '../../dist/contact.module.js';
import { PointerListener, Press, Pan, TwoFingerPan, Pinch } from "../../dist/contact.js";

var animationFrameId = null;

Expand Down Expand Up @@ -46,7 +46,7 @@ function loadContact() {
pointerup: function (event, pointerListener) {
if (pointerListener.pointerManager.hasPointersOnSurface() == false) {
resetElementTransform();
};
}
}
});

Expand Down Expand Up @@ -118,11 +118,11 @@ function resetElementTransform() {
z: 0,
angle: 0
}
}
};

if (ticking == true) {
setTimeout(function () {
resetElementTransform(element)
resetElementTransform(element);
}, 1000 / 60);
}
else {
Expand All @@ -133,12 +133,12 @@ function resetElementTransform() {

function requestElementUpdate(wait) {

var wait = wait || false;
wait = wait || false;

var transformValues = [
'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
'scale3d(' + transform.scale.x + ', ' + transform.scale.y + ', ' + transform.scale.z + ')',
'rotate3d(' + transform.rotate.x + ',' + transform.rotate.y + ',' + transform.rotate.z + ',' + transform.rotate.angle + 'deg)'
"translate3d(" + transform.translate.x + "px, " + transform.translate.y + "px, 0)",
"scale3d(" + transform.scale.x + ", " + transform.scale.y + ", " + transform.scale.z + ")",
"rotate3d(" + transform.rotate.x + "," + transform.rotate.y + "," + transform.rotate.z + "," + transform.rotate.angle + "deg)"
];

var transformString = transformValues.join(" ");
Expand All @@ -165,10 +165,10 @@ function requestElementUpdate(wait) {

function onPan(event) {

element.className = '';
element.className = "";

var deltaX = event.detail.global.deltaX;
var deltaY = event.detail.global.deltaY
var deltaY = event.detail.global.deltaY;

transform.translate = {
x: deltaX,
Expand All @@ -185,7 +185,9 @@ function onPanEnd(event) {

function onTwoFingerPan(event) {

rectangle.className = '';
var rectangle = document.getElementById("rectangle");

rectangle.className = "";

var deltaX = event.detail.global.deltaX;
var deltaY = event.detail.global.deltaY;
Expand All @@ -203,6 +205,8 @@ function onTwoFingerPan(event) {

function onPinch(event) {

var rectangle = document.getElementById("rectangle");

rectangle.className = "";

var relativeDistanceChange = event.detail.global.scale;
Expand All @@ -216,7 +220,7 @@ function onPinch(event) {
z: 1
};

console.log(transform)
console.log(transform);

requestElementUpdate();

Expand Down
Loading

0 comments on commit 37292fd

Please sign in to comment.