Added an example set selection. Some minor fixes and improvements in setSelection

10 years ago · 09cb25296d
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/dist/vis.map
+++ b/dist/vis.map
--- a/dist/vis.min.js
+++ b/dist/vis.min.js
--- a/examples/timeline/21_set_selection.html
+++ b/examples/timeline/21_set_selection.html
@ -0,0 +1,65 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Select items</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
  </style>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h1>Set selection</h1>
 <p style="max-width: 600px;">
  Enter one or multiple ids of items, then press select to select the items. This demo uses the function <code>Timeline.setSelection(ids)</code>. Optionally, the window can be moved to the selected items.
 </p>

 <p>
  Select item(s): <input type="text" id="selection" value="5, 6"><input type="button" id="select" value="Select"><br>
  <label><input type="checkbox" id="focus" checked> Focus on selection</label>
 </p>
 <div id="visualization"></div>

 <script>
  // create a dataset with items
  // we specify the type of the fields `start` and `end` here to be strings
  // containing an ISO date. The fields will be outputted as ISO dates
  // automatically getting data from the DataSet via items.get().
  var items = new vis.DataSet({
    type: { start: 'ISODate', end: 'ISODate' }
  });

  // add items to the DataSet
  items.add([
    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
  ]);

  var container = document.getElementById('visualization');
  var options = {
    editable: true
  };

  var timeline = new vis.Timeline(container, items, options);

  var selection = document.getElementById('selection');
  var select = document.getElementById('select');
  var focus = document.getElementById('focus');
  select.onclick = function () {
    var ids = selection.value.split(',').map(function (value) {
      return value.trim();
    });
    timeline.setSelection(ids, {focus: focus.checked});
  };
 </script>
 </body>
 </html>
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@ -32,6 +32,7 @@
  <p><a href="18_range_overflow.html">18_range_overflow.html</a></p>
  <p><a href="19_localization.html">19_localization.html</a></p>
  <p><a href="20_click_to_use.html">20_click_to_use.html</a></p>
  <p><a href="21_set_selection.html">21_set_selection.html</a></p>

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

--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@ -168,20 +168,18 @@ Timeline.prototype.setGroups = function(groups) {
 /**
 * Set selected items by their id. Replaces the current selection
 * Unknown id's are silently ignored.
 * @param {Array} [ids] An array with zero or more id's of the items to be
 *                      selected. If ids is an empty array, all items will be
 *                      unselected.
 * @param {Object} [options]  Available options:
 *                            `focus: boolean`  If true, focus will be set
 *                            to the selected item(s)
 * @param {string[] | string} [ids]  An array with zero or more id's of the items to be
 *                                selected. If ids is an empty array, all items will be
 *                                unselected.
 * @param {Object} [options]      Available options:
 *                                `focus: boolean`  If true, focus will be set
 *                                to the selected item(s)
 */
 Timeline.prototype.setSelection = function(ids, options) {
  this.itemSet && this.itemSet.setSelection(ids);

  if (ids && options) {
    if (options.focus) {
      this.focus(ids);
    }
  if (options && options.focus) {
    this.focus(ids);
  }
 };

@ -199,27 +197,24 @@ Timeline.prototype.getSelection = function() {
 * @param {String | String[]} id     An item id or array with item ids
 */
 Timeline.prototype.focus = function(id) {
  if (!this.itemsData) return;
  if (!this.itemsData || id == undefined) return;

  var ids = Array.isArray(id) ? id : [id];

  // get the specified item(s)
  var itemsData = this.itemsData.getDataSet().get(id, {
  var itemsData = this.itemsData.getDataSet().get(ids, {
    type: {
      start: 'Date',
      end: 'Date'
    }
  });

  // turn into an array in case of a single item
  if (!Array.isArray(itemsData)) {
    itemsData = [itemsData];
  }

  // calculate minimum start and maximum end of specified items
  var start = null;
  var end = null;
  itemsData.forEach(function (itemData) {
    var s = itemData.start.valueOf();
    var e = 'end' in itemData ? itemData.end.valueOf() :itemData.start.valueOf();
    var e = 'end' in itemData ? itemData.end.valueOf() : itemData.start.valueOf();

    if (start === null || s < start) {
      start = s;
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@ -376,34 +376,31 @@ ItemSet.prototype.show = function() {
 /**
 * Set selected items by their id. Replaces the current selection
 * Unknown id's are silently ignored.
 * @param {Array} [ids] An array with zero or more id's of the items to be
 *                      selected. If ids is an empty array, all items will be
 *                      unselected.
 * @param {string[] | string} [ids] An array with zero or more id's of the items to be
 *                                  selected, or a single item id. If ids is undefined
 *                                  or an empty array, all items will be unselected.
 */
 ItemSet.prototype.setSelection = function(ids) {
  var i, ii, id, item;

  if (ids) {
    if (!Array.isArray(ids)) {
      throw new TypeError('Array expected');
    }
  if (ids == undefined) ids = [];
  if (!Array.isArray(ids)) ids = [ids];

    // unselect currently selected items
    for (i = 0, ii = this.selection.length; i < ii; i++) {
      id = this.selection[i];
      item = this.items[id];
      if (item) item.unselect();
    }
  // unselect currently selected items
  for (i = 0, ii = this.selection.length; i < ii; i++) {
    id = this.selection[i];
    item = this.items[id];
    if (item) item.unselect();
  }

    // select items
    this.selection = [];
    for (i = 0, ii = ids.length; i < ii; i++) {
      id = ids[i];
      item = this.items[id];
      if (item) {
        this.selection.push(id);
        item.select();
      }
  // select items
  this.selection = [];
  for (i = 0, ii = ids.length; i < ii; i++) {
    id = ids[i];
    item = this.items[id];
    if (item) {
      this.selection.push(id);
      item.select();
    }
  }
 };