From dad6123ee8dcb89d75264fa354e7fe7439760f64 Mon Sep 17 00:00:00 2001
From: Dallas Fraser <dallas.fraser.waterloo@gmail.com>
Date: Sat, 25 Jan 2020 08:08:10 -0500
Subject: [PATCH] feat: configure the long press time (#245)

* Attempt at configuring the long press time

The default is 251 since I beleive that is the default of hammer
Added it to the documentation
I had to set it at Core and ItemSet

* Add the type

* Update index.html

* Change the variable to longSelectPressTime

Did some testing against the default and 251 does seem to be the default right now

* Merge branch 'master' of https://github.com/fras2560/vis-timeline.git

Conflicts:
	docs/timeline/index.html

* Remove the logging I was using during debugging

Co-authored-by: Yotam Berkowitz <yotamberk@gmail.com>
---
 docs/timeline/index.html          |  9 +++++++++
 lib/timeline/Core.js              | 11 ++++++++---
 lib/timeline/Timeline.js          |  1 +
 lib/timeline/component/ItemSet.js |  5 ++++-
 lib/timeline/optionsTimeline.js   |  2 ++
 types/index.d.ts                  |  1 +
 6 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 990e69e6b7..8b1112e673 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -807,6 +807,15 @@ <h2 id="Configuration_Options">Configuration Options</h2>
       <td>A map with i18n locales. See section <a href="#Localization">Localization</a> for more information.</td>
     </tr>
 
+    <tr>
+      <td>longSelectPressTime</td>
+      <td>number</td>
+      <td><code>251</code></td>
+      <td>
+        The minimal press time in ms for an event to be considered a (long) press.
+      </td>
+    </tr>
+
     <tr>
       <td>moment</td>
       <td>function</td>
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 4c534e739c..9772a0bf7c 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -410,10 +410,10 @@ class Core {
       const fields = [
         'width', 'height', 'minHeight', 'maxHeight', 'autoResize',
         'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
-        'locale', 'locales', 'moment', 'preferZoom', 'rtl', 'zoomKey', 'horizontalScroll', 'verticalScroll'
+        'locale', 'locales', 'moment', 'preferZoom', 'rtl', 'zoomKey',
+        'horizontalScroll', 'verticalScroll', 'longSelectPressTime'
       ];
-      util.selectiveExtend(fields, this.options, options); 
-
+      util.selectiveExtend(fields, this.options, options);
       this.dom.rollingModeBtn.style.visibility = 'hidden';
 
       if (this.options.rtl) {
@@ -1050,6 +1050,11 @@ class Core {
       direction: contentsOverflow ? Hammer.DIRECTION_ALL : Hammer.DIRECTION_HORIZONTAL
     });
 
+    // set the long press time
+    this.hammer.get('press').set({
+      time: this.options.longSelectPressTime
+    });
+
     // redraw all components
     this.components.forEach(component => {
       resized = component.redraw() || resized;
diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
index 9fbddf2aac..a7f450b89c 100644
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@@ -53,6 +53,7 @@ export default class Timeline extends Core {
     const me = this;
     this.defaultOptions = {
       autoResize: true,
+      longSelectPressTime: 251,
       orientation: {
         axis: 'bottom',   // axis orientation: 'bottom', 'top', or 'both'
         item: 'bottom'    // not relevant
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index e552fe68db..9e1a5ebfec 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -56,6 +56,7 @@ class ItemSet extends Component {
 
       selectable: true,
       multiselect: false,
+      longSelectPressTime: 251,
       itemsAlwaysDraggable: {
         item: false,
         range: false,
@@ -392,7 +393,7 @@ class ItemSet extends Component {
       // copy all options that we know
       const fields = [
         'type', 'rtl', 'align', 'order', 'stack', 'stackSubgroups', 'selectable', 'multiselect', 'sequentialSelection',
-        'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate',
+        'multiselectPerGroup', 'longSelectPressTime', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'visibleFrameTemplate',
         'hide', 'snap', 'groupOrderSwap', 'showTooltips', 'tooltip', 'tooltipOnItemUpdateTime', 'groupHeightMode', 'onTimeout'
       ];
       util.selectiveExtend(fields, this.options, options);
@@ -870,6 +871,8 @@ class ItemSet extends Component {
       this.dom.axis.style.left = '0';
     }
 
+    this.hammer.get('press').set({time: this.options.longSelectPressTime});
+
     this.initialItemSetDrawn = true;
     // check if this component is resized
     resized = this._isResized() || resized;
diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js
index c74a18e776..1a0d0ba934 100644
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@@ -107,6 +107,7 @@ let allOptions = {
     __any__: {any},
     __type__: {object}
   },
+  longSelectPressTime: {number},
   margin: {
     axis: {number},
     item: {
@@ -235,6 +236,7 @@ let configureOptions = {
     height: '',
     //hiddenDates: {object, array},
     locale: '',
+    longSelectPressTime: 251,
     margin: {
       axis: [20, 0, 100, 1],
       item: {
diff --git a/types/index.d.ts b/types/index.d.ts
index 1574379f81..5c32a14ce7 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -272,6 +272,7 @@ export interface TimelineOptions {
   itemsAlwaysDraggable?: TimelineOptionsItemsAlwaysDraggableType;
   locale?: string;
   locales?: any; // TODO
+  longSelectPressTime?: number,
   moment?: MomentConstructor;
   margin?: TimelineOptionsMarginType;
   max?: DateType;