add hold/holdpulse/release events

build.json

@@ -12,5 +12,6 @@
   "src/pointer.js",
   "src/platform-events.js",
   "src/track.js",
+  "src/hold.js",
   "src/tap.js"
 ]

polymer-gestures.js

@@ -23,6 +23,7 @@
     'src/pointer.js',
     'src/platform-events.js',
     'src/track.js',
+    'src/hold.js',
     'src/tap.js'
   ];
 

samples/simple/index.html

@@ -66,7 +66,10 @@
         'trackstart',
         'track',
         'trackend',
-        'tap'
+        'tap',
+        'hold',
+        'holdpulse',
+        'release'
       ];
       function find(/*...inEls*/) {
         [].forEach.call(arguments, function(e) {

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);