Added option to supply ID for the new custom time bar

9 years ago · 9c469d02ba
--- a/docs/timeline.html
+++ b/docs/timeline.html
@ -855,10 +855,12 @@ var options = {
  </tr>

  <tr>
    <td>addCustomTime(time)</td>
    <td>Number</td>
    <td>addCustomTime(time[, id])</td>
    <td>Number | String</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.
      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>
@ -984,7 +986,7 @@ timeline.clear({options: true}); // clear options only
  <tr>
    <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. Parameter <code>id</code> represents ID of the custom time bar, provided by <code>addCustomTime</code> method.
    <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>

@ -1145,7 +1147,7 @@ timeline.off('select', onSelect);
    </td>
    <td>
      <ul>
        <li><code>id</code> (Number): Vertical bar ID.</li>
        <li><code>id</code> (Number | String): Vertical bar ID.</li>
        <li><code>time</code> (Date): the current time.</li>
      </ul>
    </td>
@ -1158,7 +1160,7 @@ timeline.off('select', onSelect);
    </td>
    <td>
      <ul>
        <li><code>id</code> (Number): Vertical bar ID.</li>
        <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
@ -16,18 +16,18 @@
 <body>

 <p>
  <input type="button" id="add" value="Add custom vertical bar" />
  <span id="addCustomTime"></span>
  <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" />
  <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> event: <span id="timechangeEvent"></span>
  <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> event: <span id="timechangedEvent"></span>
  <code><strong>timechanged</strong></code> bar index: <span id="timechangedBar"></span>. Time: <span id="timechangedEvent"></span>
 </p><br>

 <div id="visualization"></div>
@ -46,16 +46,18 @@

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

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

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

  timeline.on('timechange', function (properties) {
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@ -289,7 +289,7 @@ Core.prototype.setCustomTime = function (time, id) {
    throw new Error('Cannot get custom time: Custom time bar is not enabled');
  }

  var barId = util.option.asNumber(id) || 0;
  var barId = id || 0;

  this.components.forEach(function (element, index, components) {
    if (element instanceof CustomTime && element.options.id === barId) {
@ -308,8 +308,8 @@ Core.prototype.getCustomTime = function(id) {
    throw new Error('Cannot get custom time: Custom time bar is not enabled');
  }

  var barId = util.option.asNumber(id) || 0,
      customTime = 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) {
@ -322,11 +322,12 @@ Core.prototype.getCustomTime = function(id) {

 /**
 * Add custom vertical bar
 * param {Date | String | Number} time  A Date, unix timestamp, or
 * @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
 * @param {Number | String} ID of the new bar
 * @return {Number | String} ID of the new bar
 */
 Core.prototype.addCustomTime = function (time) {
 Core.prototype.addCustomTime = function (time, id) {
  if (!this.currentTime) {
    throw new Error('Option showCurrentTime must be true');
  }
@ -336,24 +337,47 @@ Core.prototype.addCustomTime = function (time) {
  }

  var ts = util.convert(time, 'Date').valueOf(),
      customTime, id;
      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;

  if ('customLastId' in this) {
    id = ++this.customLastId;
  } else {
    id = this.customLastId = 1;
    
    // 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 : id
    id : customBarId
  });

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

  return id;
  return customBarId;
 };

 /**
@ -362,20 +386,14 @@ Core.prototype.addCustomTime = function (time) {
 * @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--;
    }
  };
  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) {
        reduceLastId();
      if (bar.options.id !== 0) {
        me.customBarIds.splice(me.customBarIds.indexOf(id), 1);
        components.splice(index, 1);
        bar.destroy();
      }