Merge pull request #651 from aytech/develop

Multiple customTime vertical bars
9 years ago · 69576a57e2
--- a/docs/timeline.html
+++ b/docs/timeline.html
@ -854,6 +854,15 @@ var options = {
    <th>Description</th>
  </tr>

  <tr>
    <td>addCustomTime(time[, id])</td>
    <td>Number | String</td>
    <td>
      Only applicable when the option showCustomTime is true.<br>
      Add new vertical bar representing custom time that can be dragged by the user. Parameter <code>time</code> can be a Date, Number, or String. Parameter <code>id</code> can be Number or String. If <code>id</code> is provided, it will be used as ID for the new vertical bar, otherwise the ID will be auto generated.<br>
      Returns ID of the newly created bar.
    </td>
  </tr>
  <tr>
    <td>clear([what])</td>
    <td>none</td>
@ -903,9 +912,9 @@ timeline.clear({options: true}); // clear options only
  </tr>

  <tr>
    <td>getCustomTime()</td>
    <td>getCustomTime([id])</td>
    <td>Date</td>
    <td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
    <td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true. If parameter <code>id</code> is provided, time of the custom time bar under that ID is returned.
    </td>
  </tr>

@ -958,6 +967,14 @@ timeline.clear({options: true}); // clear options only
    </td>
  </tr>

  <tr>
    <td>removeCustomTime(id)</td>
    <td>none</td>
    <td>
      Remove vertical bars previously added to the timeline via <code>addCustomTime</code> method. Parameter <code>id</code> is the ID of the custom vertical bar returned by <code>addCustomTime</code> method.
    </td>
  </tr>

  <tr>
    <td>setCurrentTime(time)</td>
    <td>none</td>
@ -967,9 +984,9 @@ timeline.clear({options: true}); // clear options only
  </tr>

  <tr>
    <td>setCustomTime(time)</td>
    <td>setCustomTime(time [, id])</td>
    <td>none</td>
    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. Parameter <code>time</code> can be a Date object, numeric timestamp, or ISO date string. Parameter <code>id</code> represents ID of the custom time bar, provided by <code>addCustomTime</code> method and can be a Number or String.
    </td>
  </tr>

@ -1130,6 +1147,7 @@ timeline.off('select', onSelect);
    </td>
    <td>
      <ul>
        <li><code>id</code> (Number | String): Vertical bar ID.</li>
        <li><code>time</code> (Date): the current time.</li>
      </ul>
    </td>
@ -1142,6 +1160,7 @@ timeline.off('select', onSelect);
    </td>
    <td>
      <ul>
        <li><code>id</code> (Number | String): Vertical bar ID.</li>
        <li><code>time</code> (Date): the current time.</li>
      </ul>
    </td>
--- a/examples/timeline/34_add_custom_timebar.html
+++ b/examples/timeline/34_add_custom_timebar.html
@ -0,0 +1,74 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Show current and custom time bars</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
      font-size: 11pt;
    }
  </style>

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

 <p>
  <input type="button" id="add" value="Add custom vertical bar">
  <input type="text" id="barId" placeholder="custom bar ID">
 </p>
 <p>
  <input type="button" id="remove" value="Remove custom vertical bar">
  <input type="text" id="barIndex" value="1" placeholder="custom bar ID">
 </p>
 <p>
  <code><strong>timechange</strong></code> bar index: <span id="timechangeBar"></span>. Time: <span id="timechangeEvent"></span>
 </p>
 <p>
  <code><strong>timechanged</strong></code> bar index: <span id="timechangedBar"></span>. Time: <span id="timechangedEvent"></span>
 </p><br>

 <div id="visualization"></div>

 <script type="text/javascript">
  var container = document.getElementById('visualization');
  var items = new vis.DataSet();
  var customDate = new Date();
  var options = {
    showCurrentTime: true,
    showCustomTime: true,
    start: new Date(Date.now() - 1000 * 60 * 60 * 24),
    end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
  };
  var timeline = new vis.Timeline(container, items, options);

  // Set first time bar
  customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
  timeline.addCustomTime(customDate, 1);

  document.getElementById('add').onclick = function () {
    customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
    var barId = document.getElementById('barId').value || undefined;
    timeline.addCustomTime(customDate, barId);
    document.getElementById('barId').value = '';
  };

  document.getElementById('remove').onclick = function () {
    timeline.removeCustomTime(document.getElementById('barIndex').value);
    document.getElementById('barIndex').value = '';
  };

  timeline.on('timechange', function (properties) {
    document.getElementById('timechangeBar').innerHTML = properties.id;
    document.getElementById('timechangeEvent').innerHTML = properties.time;
  });
  timeline.on('timechanged', function (properties) {
    document.getElementById('timechangedBar').innerHTML = properties.id;
    document.getElementById('timechangedEvent').innerHTML = properties.time;
  });

 </script>
 </body>
 </html>
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@ -44,7 +44,7 @@
  <p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p>
  <p><a href="32_grid_styling.html">32_grid_styling.html</a></p>
  <p><a href="33_custom_snapping.html">33_custom_snapping.html</a></p>

  <p><a href="34_add_custom_timebar.html">34_add_custom_timebar.html</a></p>
  <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

 </div>
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@ -7,6 +7,7 @@ var Range = require('./Range');
 var ItemSet = require('./component/ItemSet');
 var Activator = require('../shared/Activator');
 var DateUtil = require('./DateUtil');
 var CustomTime = require('./component/CustomTime');

 /**
 * Create a timeline visualization
@ -281,25 +282,123 @@ Core.prototype.destroy = function () {
 /**
 * Set a custom time bar
 * @param {Date} time
 * @param {int} id
 */
 Core.prototype.setCustomTime = function (time) {
 Core.prototype.setCustomTime = function (time, id) {
  if (!this.customTime) {
    throw new Error('Cannot get custom time: Custom time bar is not enabled');
  }

  this.customTime.setCustomTime(time);
  var barId = id || 0;

  this.components.forEach(function (element, index, components) {
    if (element instanceof CustomTime && element.options.id === barId) {
      element.setCustomTime(time);
    }
  });
 };

 /**
 * Retrieve the current custom time.
 * @return {Date} customTime
 * @param {int} id
 */
 Core.prototype.getCustomTime = function() {
 Core.prototype.getCustomTime = function(id) {
  if (!this.customTime) {
    throw new Error('Cannot get custom time: Custom time bar is not enabled');
  }

  return this.customTime.getCustomTime();
  var barId = id || 0,
      customTime = this.customTime.getCustomTime();

  this.components.forEach(function (element, index, components) {
    if (element instanceof CustomTime && element.options.id === barId) {
      customTime = element.getCustomTime();
    }
  });

  return customTime;
 };

 /**
 * Add custom vertical bar
 * @param {Date | String | Number} time  A Date, unix timestamp, or
 *                                      ISO date string. Time point where the new bar should be placed
 * @param {Number | String} ID of the new bar
 * @return {Number | String} ID of the new bar
 */
 Core.prototype.addCustomTime = function (time, id) {
  if (!this.currentTime) {
    throw new Error('Option showCurrentTime must be true');
  }

  if (time === undefined) {
    throw new Error('Time parameter for the custom bar must be provided');
  }

  var ts = util.convert(time, 'Date').valueOf(),
      numIds, customTime, customBarId;

  // All bar IDs are kept in 1 array, mixed types
  // Bar with ID 0 is the default bar.
  if (!this.customBarIds || this.customBarIds.constructor !== Array) {
    this.customBarIds = [0];
  }

  // If the ID is not provided, generate one, otherwise just use it
  if (id === undefined) {

    numIds = this.customBarIds.filter(function (element) {
      return util.isNumber(element);
    });

    customBarId = numIds.length > 0 ? Math.max.apply(null, numIds) + 1 : 1;

  } else {
    
    // Check for duplicates
    this.customBarIds.forEach(function (element) {
      if (element === id) {
        throw new Error('Custom time ID already exists');
      }
    });

    customBarId = id;
  }

  this.customBarIds.push(customBarId);

  customTime = new CustomTime(this.body, {
    showCustomTime : true,
    time : ts,
    id : customBarId
  });

  this.components.push(customTime);
  this.redraw();

  return customBarId;
 };

 /**
 * Remove previously added custom bar
 * @param {int} id ID of the custom bar to be removed
 * @return {boolean} True if the bar exists and is removed, false otherwise
 */
 Core.prototype.removeCustomTime = function (id) {

  var me = this;

  this.components.forEach(function (bar, index, components) {
    if (bar instanceof CustomTime && bar.options.id === id) {
      // Only the lines added by the user will be removed
      if (bar.options.id !== 0) {
        me.customBarIds.splice(me.customBarIds.indexOf(id), 1);
        components.splice(index, 1);
        bar.destroy();
      }
    }
  });
 };


--- a/lib/timeline/component/CustomTime.js
+++ b/lib/timeline/component/CustomTime.js
@ -20,11 +20,17 @@ function CustomTime (body, options) {
  this.defaultOptions = {
    showCustomTime: false,
    locales: locales,
    locale: 'en'
    locale: 'en',
    id: 0
  };
  this.options = util.extend({}, this.defaultOptions);

  this.customTime = new Date();
  if (options && options.time) {
    this.customTime = options.time;
  } else {
    this.customTime = new Date();  
  }
  
  this.eventParams = {}; // stores state parameters while dragging the bar

  // create the DOM
@ -43,7 +49,12 @@ CustomTime.prototype = new Component();
 CustomTime.prototype.setOptions = function(options) {
  if (options) {
    // copy all options that we know
    util.selectiveExtend(['showCustomTime', 'locale', 'locales'], this.options, options);
    util.selectiveExtend(['showCustomTime', 'locale', 'locales', 'id'], this.options, options);

    // Triggered by addCustomTimeBar, redraw to add new bar
    if (this.options.id) {
      this.redraw();
    }
  }
 };

@ -169,6 +180,7 @@ CustomTime.prototype._onDrag = function (event) {

  // fire a timechange event
  this.body.emitter.emit('timechange', {
    id: this.options.id,
    time: new Date(this.customTime.valueOf())
  });

@ -186,6 +198,7 @@ CustomTime.prototype._onDragEnd = function (event) {

  // fire a timechanged event
  this.body.emitter.emit('timechanged', {
    id: this.options.id,
    time: new Date(this.customTime.valueOf())
  });