Added option to change the visibility of a group (#2315)

* Added group option to change the visibility of a group * updated the groupsEditable example page to demo the use of this feature * updated the timeline documentation to describe this option
8 years ago · e79d709df6
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@ -455,6 +455,12 @@ var groups = [
        The title can only contain plain text.
      </td>
    </tr>
    <tr>
      <td>visible</td>
      <td>Boolean</td>
      <td>no</td>
      <td>Provides a means to toggle the whether a group is displayed or not. Defaults to <code>true</code>.</td>
    </tr>
  </table>


--- a/examples/timeline/groups/groupsEditable.html
+++ b/examples/timeline/groups/groupsEditable.html
@ -28,7 +28,8 @@
 </head>
 <body>
 <p>
  This example demonstrates editable groups (for now only reordering).
  This example demonstrates editable groups (reordering and hiding).
  <button onclick="showAllGroups()">Restore Hidden</button>
 </p>
 <div id="visualization"></div>

@ -55,7 +56,14 @@
 	{"content": "WEC", "id": "WEC", "value": 18, className:'endurance'},
 	{"content": "GP2", "id": "GP2", "value": 19, className:'openwheel'}
  ]);
  

  // function to make all groups visible again
  function showAllGroups(){
    groups.forEach(function(group){
      groups.update({id: group.id, visible: true});
    })
  };

  // create a dataset with items
  // note that months are zero-based in the JavaScript Date object, so month 3 is April
  var items = new vis.DataSet([
@ -299,6 +307,20 @@
    	a.value = b.value;
    	b.value = v;
    },
    groupTemplate: function(group){
      var container = document.createElement('div');
      var label = document.createElement('span');
      label.innerHTML = group.content + ' ';
      container.insertAdjacentElement('afterBegin',label);
      var hide = document.createElement('button');
      hide.innerHTML = 'hide';
      hide.style.fontSize = 'small';
      hide.addEventListener('click',function(){
        groups.update({id: group.id, visible: false});
      });
      container.insertAdjacentElement('beforeEnd',hide);
      return container;
    },
    orientation: 'both',
    editable: true,
    groupEditable: true,
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@ -259,14 +259,22 @@ Timeline.prototype.setGroups = function(groups) {
  if (!groups) {
    newDataSet = null;
  }
  else if (groups instanceof DataSet || groups instanceof DataView) {
    newDataSet = groups;
  }
  else {
    // turn an array into a dataset
    newDataSet = new DataSet(groups);
    var filter = {
      filter : function(group){
        return group.visible !== false;
      }
    }
    if (groups instanceof DataSet || groups instanceof DataView) {
      newDataSet = new DataView(groups,filter);
    }
    else {
      // turn an array into a dataset
      newDataSet = new DataSet(groups.filter(filter));
    }
  }


  this.groupsData = newDataSet;
  this.itemSet.setGroups(newDataSet);
 };