pointerEvents: add holdDuration option

Close #403

src/Eventable.js

@@ -1,4 +1,5 @@
 const { indexOf } = require('./utils/arr');
+const extend = require('./utils/extend.js');
 
 function fireUntilImmediateStopped (event, listeners) {
   for (let i = 0, len = listeners.length; i < len && !event.immediatePropagationStopped; i++) {
@@ -7,6 +8,11 @@ function fireUntilImmediateStopped (event, listeners) {
 }
 
 class Eventable {
+
+  constructor (options) {
+    this.options = extend({}, options || {});
+  }
+
   fire (event) {
     let listeners;
     const onEvent = 'on' + event.type;

src/Interaction.js

@@ -259,8 +259,6 @@ class Interaction {
   pointerUp (pointer, event, eventTarget, curEventTarget) {
     const pointerIndex = this.mouse? 0 : utils.indexOf(this.pointerIds, utils.getPointerId(pointer));
 
-    clearTimeout(this.holdTimers[pointerIndex]);
-
     signals.fire(/cancel$/i.test(event.type)? 'cancel' : 'up', {
       pointer,
       event,

src/defaultOptions.js

@@ -17,6 +17,4 @@ module.exports = {
       smoothEndDuration: 300,   // animate to snap/restrict endOnly if there's no inertia
     },
   },
-
-  _holdDuration: 600,
 };

src/pointerEvents/index.js

@@ -4,6 +4,7 @@ const utils       = require('../utils');
 const browser     = require('../utils/browser');
 const defaults    = require('../defaultOptions');
 const signals     = require('../utils/Signals').new();
+const { filter }  = require('../utils/arr');
 
 const simpleSignals = [ 'down', 'up', 'up', 'cancel' ];
 const simpleEvents = [ 'down', 'up', 'tap', 'cancel' ];
@@ -123,7 +124,7 @@ function collectEventTargets (interaction, pointer, event, eventTarget, eventTyp
     return;
   }
 
-  const targets = [];
+  let targets = [];
   const path = utils.getPath(eventTarget);
   const signalArg = {
     targets,
@@ -142,6 +143,13 @@ function collectEventTargets (interaction, pointer, event, eventTarget, eventTyp
     signals.fire('collect-targets', signalArg);
   }
 
+  if (eventType === 'hold') {
+    targets = filter(targets, function (target) {
+      return (target.eventable.options.holdDuration
+              === interaction.holdTimers[pointerIndex].duration);
+    });
+  }
+
   // create the tap event even if there are no listeners so that
   // doubletap can still be created and fired
   if (targets.length || eventType === 'tap') {
@@ -156,7 +164,7 @@ Interaction.signals.on('move', function ({ interaction, pointer, event, eventTar
 
   if (!duplicateMove && (!interaction.pointerIsDown || interaction.pointerWasMoved)) {
     if (interaction.pointerIsDown) {
-      clearTimeout(interaction.holdTimers[pointerIndex]);
+      clearTimeout(interaction.holdTimers[pointerIndex].timeout);
     }
 
     collectEventTargets(interaction, pointer, event, eventTarget, 'move');
@@ -166,16 +174,63 @@ Interaction.signals.on('move', function ({ interaction, pointer, event, eventTar
 Interaction.signals.on('down', function ({ interaction, pointer, event, eventTarget, pointerIndex }) {
   // copy event to be used in timeout for IE8
   const eventCopy = browser.isIE8? utils.extend({}, event) : event;
+  const timers = interaction.holdTimers;
+  const timeoutIndex = timers.length;
+
+  if (!timers[pointerIndex]) {
+    timers[pointerIndex] = { duration: Infinity, timeout: null };
+  }
+
+  const timer = timers[pointerIndex];
+  const path = utils.getPath(eventTarget);
+  const signalArg = {
+    interaction,
+    pointer,
+    event,
+    eventTarget,
+    eventType: 'hold',
+    targets: [],
+    path,
+    element: null,
+  };
+
+  for (const element of path) {
+    signalArg.element = element;
+
+    signals.fire('collect-targets', signalArg);
+  }
+
+  if (!signalArg.targets.length) { return; }
 
-  interaction.holdTimers[pointerIndex] = setTimeout(function () {
+  let minDuration = Infinity;
+
+  for (let i = 0; i < signalArg.targets.length; i++) {
+    const target = signalArg.targets[i];
+    const holdDuration = target.eventable.options.holdDuration;
+
+    if (holdDuration < minDuration) {
+      minDuration = holdDuration;
+    }
+  }
+
+  timer.duration = minDuration;
+  timer.timeout = setTimeout(function () {
 
     collectEventTargets(interaction,
                         browser.isIE8? eventCopy : pointer,
                         eventCopy,
                         eventTarget,
-                        'hold');
+                        'hold',
+                        minDuration);
+  }, minDuration);
+});
 
-  }, defaults._holdDuration);
+['up', 'cancel'].forEach(function (signalName) {
+  Interaction.signals.on(signalName, function ({ interaction, pointerIndex }) {
+    if (interaction.holdTimers[pointerIndex]) {
+      clearTimeout(interaction.holdTimers[pointerIndex].timeout);
+    }
+  });
 });
 
 function createSignalListener (event) {
@@ -197,6 +252,10 @@ Interaction.signals.on('new', function (interaction) {
   interaction.tapTime = 0;     // time of the most recent tap event
 });
 
+defaults.pointerEvents = {
+  holdDuration: 600,
+};
+
 module.exports = scope.pointerEvents = {
   firePointers,
   collectEventTargets,

src/pointerEvents/interactableTargets.js

@@ -4,6 +4,7 @@ const browser       = require('../utils/browser');
 const isType        = require('../utils/isType');
 const domUtils      = require('../utils/domUtils');
 const scope         = require('../scope');
+const extend        = require('../utils/extend');
 const { merge }     = require('../utils/arr');
 
 pointerEvents.signals.on('collect-targets', function ({ targets, element, eventType }) {
@@ -45,3 +46,9 @@ pointerEvents.signals.on('collect-targets', function ({ targets, element, eventT
 });
 
 merge(Interactable.eventTypes, pointerEvents.types);
+
+Interactable.prototype.pointerEvents = function (options) {
+  extend(this.events.options, options);
+
+  return this;
+};