Multiple customTime vertical bars

10 years ago · 1c848f1f2d
--- a/docs/timeline.html
+++ b/docs/timeline.html
@ -854,6 +854,13 @@ var options = {
    <th>Description</th>
  </tr>

  <tr>
    <td>addCustomTime(time)</td>
    <td>Number</td>
    <td>
      Add new vertical bar representing custom time. Each new line is assigned a unique ID and can be dragged by the user. Parameter <code>time</code> can be a Date, Number, or String. Returns ID of the newly created bar. Only applicable when the option showCustomTime is true.
    </td>
  </tr>
  <tr>
    <td>clear([what])</td>
    <td>none</td>
@ -1130,6 +1137,7 @@ timeline.off('select', onSelect);
    </td>
    <td>
      <ul>
        <li><code>id</code> (Number): Vertical bar ID.</li>
        <li><code>time</code> (Date): the current time.</li>
      </ul>
    </td>
@ -1142,6 +1150,7 @@ timeline.off('select', onSelect);
    </td>
    <td>
      <ul>
        <li><code>id</code> (Number): 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,68 @@
 <!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" />
  <span id="addCustomTime"></span>
 </p>
 <p>
  <input type="button" id="remove" value="Remove custom vertical bar" />
  <input type="text" id="barIndex" value="0" />
 </p>
 <p>
  <code><strong>timechange</strong></code> bar index: <span id="timechangeBar"></span> event: <span id="timechangeEvent"></span>
 </p>
 <p>
  <code><strong>timechanged</strong></code> bar index: <span id="timechangedBar"></span> event: <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);

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

  document.getElementById('remove').onclick = function () {
    var index = document.getElementById('barIndex');
    timeline.removeCustomTime(parseInt(index.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
@ -302,6 +303,65 @@ Core.prototype.getCustomTime = function() {
  return this.customTime.getCustomTime();
 };

 /**
 * 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
 * @return {int} ID of the new bar
 */
 Core.prototype.addCustomTime = function (time) {
  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(),
      customTime, id;

  if ('customLastId' in this) {
    id = ++this.customLastId;
  } else {
    id = this.customLastId = 1;
  }

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

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

  return id;
 };

 /**
 * 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;

  var reduceLastId = function() {
    if ('customLastId' in me && me.customLastId > 0) {
      me.customLastId--;
    }
  };

  this.components.forEach(function (bar, index, components) {
    if (bar instanceof CustomTime && bar.options.id === id) {
      reduceLastId();
      components.splice(index, 1);
      bar.destroy();
    }
  });
 };


 /**
 * Get the id's of the currently visible items.
--- 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())
  });