Horizontal scroll (#2201)

* Hide vertically hidden ranged items in groups that are not visible * Add vertical scroll when zoom is inactive * Fix review comments * Add horizontalScroll option
8 years ago · 178e9dc915
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@ -675,6 +675,15 @@ function (option, path) {
      </td>
    </tr>

    <tr>
      <td>horizontalScroll</td>
      <td>Boolean</td>
      <td>false</td>
      <td>This option allows you to scroll horizontally to move backwards and forwards in the time range.
       Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>.
      </td>
    </tr>

    <tr>
      <td>itemsAlwaysDraggable</td>
      <td>boolean</td>
--- a/examples/timeline/other/horizontalScroll.html
+++ b/examples/timeline/other/horizontalScroll.html
@ -0,0 +1,77 @@
 <html>
 <head>
  <title>Timeline | Horizontal Scroll Option</title>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />

  <script src="../../googleAnalytics.js"></script>
 </head>

 <body>

 <h1>Timeline horizontal scroll option</h1>

 <div id="mytimeline"></div>
 
 <script>

  // create groups
  var numberOfGroups = 25; 
  var groups = new vis.DataSet()
  for (var i = 0; i < numberOfGroups; i++) {
    groups.add({
      id: i,
      content: 'Truck&nbsp;' + i
    })
  }
  
  // create items
  var numberOfItems = 1000;
  var items = new vis.DataSet();

  var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);

  for (var truck = 0; truck < numberOfGroups; truck++) {
    var date = new Date();
    for (var order = 0; order < itemsPerGroup; order++) {
      date.setHours(date.getHours() +  4 * (Math.random() < 0.2));
      var start = new Date(date);

      date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
      var end = new Date(date);

      items.add({
        id: order + itemsPerGroup * truck,
        group: truck,
        start: start,
        end: end,
        content: 'Order ' + order
      });
    }
  }
  
  // specify options
  var options = {
    stack: true,
    horizontalScroll: true,
    zoomKey: 'ctrlKey',
    maxHeight: 400,
    start: new Date(),
    end: new Date(1000*60*60*24 + (new Date()).valueOf()),
    editable: true,
    margin: {
      item: 10, // minimal margin between items
      axis: 5   // minimal margin between items and the axis
    },
    orientation: 'top'
  };

  // create a Timeline
  var container = document.getElementById('mytimeline');
  timeline = new vis.Timeline(container, items, groups, options);

 </script>

 </body>
 </html>
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@ -161,6 +161,9 @@ Core.prototype._create = function (container) {
    // prevent scrolling when zoomKey defined or activated
    if (!me.options.zoomKey || event[me.options.zoomKey]) return

    // prevent scrolling vertically when horizontalScroll is true
    if (me.options.horizontalScroll) return

    var delta = 0;
    if (event.wheelDelta) { /* IE/Opera. */
      delta = event.wheelDelta / 120;
@ -254,7 +257,7 @@ Core.prototype.setOptions = function (options) {
    var fields = [
      'width', 'height', 'minHeight', 'maxHeight', 'autoResize',
      'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
      'locale', 'locales', 'moment', 'rtl', 'zoomKey'
      'locale', 'locales', 'moment', 'rtl', 'zoomKey', 'horizontalScroll'
    ];
    util.selectiveExtend(fields, this.options, options);

--- a/lib/timeline/Range.js
+++ b/lib/timeline/Range.js
@ -81,7 +81,7 @@ Range.prototype.setOptions = function (options) {
    // copy the options that we know
    var fields = [
      'direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable',
      'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl'
      'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl', 'horizontalScroll'
    ];
    util.selectiveExtend(fields, this.options, options);

@ -483,15 +483,10 @@ Range.prototype._onDragEnd = function (event) {
 * @private
 */
 Range.prototype._onMouseWheel = function(event) {
  // only allow zooming when configured as zoomable and moveable
  if (!(this.options.zoomable && this.options.moveable)) return;

  // only zoom when the mouse is inside the current range
  if (!this._isInsideRange(event)) return;
  // Prevent default actions caused by mouse wheel
  // (else the page and timeline both zoom and scroll)
  event.preventDefault();
  
  // only zoom when the according key is pressed and the zoomKey option is set
  if (this.options.zoomKey && !event[this.options.zoomKey]) return;

  // retrieve delta
  var delta = 0;
  if (event.wheelDelta) { /* IE/Opera. */
@ -502,6 +497,27 @@ Range.prototype._onMouseWheel = function(event) {
    delta = -event.detail / 3;
  }

  // don't allow zoom when the according key is pressed and the zoomKey option or not zoomable but movable
  if ((this.options.zoomKey && !event[this.options.zoomKey] && this.options.zoomable) 
    || (!this.options.zoomable && this.options.moveable)) {
    if (this.options.horizontalScroll) {
      // calculate a single scroll jump relative to the range scale
      var diff = delta * (this.end - this.start) / 20;
      // calculate new start and end
      var newStart = this.start - diff;
      var newEnd = this.end - diff;

      this.setRange(newStart, newEnd);
    }
    return;
  }

  // only allow zooming when configured as zoomable and moveable
  if (!(this.options.zoomable && this.options.moveable)) return;
  
  // only zoom when the mouse is inside the current range
  if (!this._isInsideRange(event)) return;

  // If delta is nonzero, handle it.
  // Basically, delta is now positive if wheel was scrolled up,
  // and negative, if wheel was scrolled down.
@ -524,10 +540,6 @@ Range.prototype._onMouseWheel = function(event) {

    this.zoom(scale, pointerDate, delta);
  }

  // Prevent default actions caused by mouse wheel
  // (else the page and timeline both zoom and scroll)
  event.preventDefault();
 };

 /**
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@ -26,6 +26,7 @@ let allOptions = {
  //globals :
  align: {string},
  rtl: {boolean, 'undefined': 'undefined'},
  horizontalScroll: {boolean, 'undefined': 'undefined'},
  autoResize: {boolean},
  clickToUse: {boolean},
  dataAttributes: {string, array},