From b4a5875410ba5bd94f051c5f502f4ab1d6c5783c Mon Sep 17 00:00:00 2001 From: Daniel Freedman Date: Wed, 7 May 2014 16:10:43 -0700 Subject: [PATCH] add hold/holdpulse/release events --- build.json | 1 + polymer-gestures.js | 1 + samples/simple/index.html | 5 +- src/hold.js | 123 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 129 insertions(+), 1 deletion(-) create mode 100644 src/hold.js diff --git a/build.json b/build.json index 588cd61..68b03c1 100644 --- a/build.json +++ b/build.json @@ -12,5 +12,6 @@ "src/pointer.js", "src/platform-events.js", "src/track.js", + "src/hold.js", "src/tap.js" ] diff --git a/polymer-gestures.js b/polymer-gestures.js index bde0138..993c805 100644 --- a/polymer-gestures.js +++ b/polymer-gestures.js @@ -23,6 +23,7 @@ 'src/pointer.js', 'src/platform-events.js', 'src/track.js', + 'src/hold.js', 'src/tap.js' ]; diff --git a/samples/simple/index.html b/samples/simple/index.html index 699e154..bd9cce6 100644 --- a/samples/simple/index.html +++ b/samples/simple/index.html @@ -66,7 +66,10 @@ 'trackstart', 'track', 'trackend', - 'tap' + 'tap', + 'hold', + 'holdpulse', + 'release' ]; function find(/*...inEls*/) { [].forEach.call(arguments, function(e) { diff --git a/src/hold.js b/src/hold.js new file mode 100644 index 0000000..1d9f5f2 --- /dev/null +++ b/src/hold.js @@ -0,0 +1,123 @@ +/* + * Copyright (c) 2014 The Polymer Project Authors. All rights reserved. + * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt + * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt + * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt + * Code distributed by Google as part of the polymer project is also + * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt + */ + +/** + * This event is fired when a pointer is held down for 200ms. + * + * @module PointerGestures + * @submodule Events + * @class hold + */ +/** + * Type of pointer that made the holding event. + * @type String + * @property pointerType + */ +/** + * Screen X axis position of the held pointer + * @type Number + * @property clientX + */ +/** + * Screen Y axis position of the held pointer + * @type Number + * @property clientY + */ +/** + * Type of pointer that made the holding event. + * @type String + * @property pointerType + */ +/** + * This event is fired every 200ms while a pointer is held down. + * + * @class holdpulse + * @extends hold + */ +/** + * Milliseconds pointer has been held down. + * @type Number + * @property holdTime + */ +/** + * This event is fired when a held pointer is released or moved. + * + * @class released + */ + +(function(scope) { + var dispatcher = scope.dispatcher; + var eventFactory = scope.eventFactory; + var hold = { + // wait at least HOLD_DELAY ms between hold and pulse events + HOLD_DELAY: 200, + // pointer can move WIGGLE_THRESHOLD pixels before not counting as a hold + WIGGLE_THRESHOLD: 16, + events: [ + 'down', + 'move', + 'up', + ], + heldPointer: null, + holdJob: null, + pulse: function() { + var hold = Date.now() - this.heldPointer.timeStamp; + var type = this.held ? 'holdpulse' : 'hold'; + this.fireHold(type, hold); + this.held = true; + }, + cancel: function() { + clearInterval(this.holdJob); + if (this.held) { + this.fireHold('release'); + } + this.held = false; + this.heldPointer = null; + this.target = null; + this.holdJob = null; + }, + down: function(inEvent) { + if (inEvent.isPrimary && !this.heldPointer) { + this.heldPointer = inEvent; + this.target = inEvent.target; + this.holdJob = setInterval(this.pulse.bind(this), this.HOLD_DELAY); + } + }, + up: function(inEvent) { + if (this.heldPointer && this.heldPointer.pointerId === inEvent.pointerId) { + this.cancel(); + } + }, + move: function(inEvent) { + if (this.heldPointer && this.heldPointer.pointerId === inEvent.pointerId) { + var x = inEvent.clientX - this.heldPointer.clientX; + var y = inEvent.clientY - this.heldPointer.clientY; + if ((x * x + y * y) > this.WIGGLE_THRESHOLD) { + this.cancel(); + } + } + }, + fireHold: function(inType, inHoldTime) { + var p = { + bubbles: true, + cancelable: true, + pointerType: this.heldPointer.pointerType, + pointerId: this.heldPointer.pointerId, + x: this.heldPointer.clientX, + y: this.heldPointer.clientY + }; + if (inHoldTime) { + p.holdTime = inHoldTime; + } + var e = eventFactory.makeGestureEvent(inType, p); + this.target.dispatchEvent(e); + } + }; + dispatcher.registerGesture('hold', hold); +})(window.PolymerGestures);