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 <[email protected]>
visjs · Jan 25, 2020 · dad6123 · dad6123
1 parent 2861085
commit dad6123
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -272,6 +272,7 @@ export interface TimelineOptions {
   itemsAlwaysDraggable?: TimelineOptionsItemsAlwaysDraggableType;
   locale?: string;
   locales?: any; // TODO
+  longSelectPressTime?: number,
   moment?: MomentConstructor;
   margin?: TimelineOptionsMarginType;
   max?: DateType;