Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Toggle Group Visibility #2303

Closed
wants to merge 1 commit into from
Closed

Toggle Group Visibility #2303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/timeline/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -436,6 +436,12 @@ <h3 id="groups">Groups</h3>
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>


Expand Down
28 changes: 26 additions & 2 deletions examples/timeline/groups/groupsEditable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

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


// loop through groups and convert content strings into elements with hide buttons.
groups.forEach(function(group){
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're better off using the options.groupTemplate to achieve this. This seems kind of hacky and unclear...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hadn't considered that. I'll give that a shot.

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);
groups.update({id: group.id, content: container});
});

// 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([
Expand Down
22 changes: 22 additions & 0 deletions lib/timeline/component/Group.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,9 @@ Group.prototype._create = function() {
this.dom.marker.style.visibility = 'hidden';
this.dom.marker.innerHTML = '?';
this.dom.background.appendChild(this.dom.marker);

// set isHidden to default
this.isHidden = false;
};

/**
Expand Down Expand Up @@ -113,6 +116,12 @@ Group.prototype.setData = function(data) {
// update title
this.dom.label.title = data && data.title || '';

// update manupulated visibility
if (data && data.visible != undefined){
this._toggleVisibility(data.visible);
}


if (!this.dom.inner.firstChild) {
util.addClassName(this.dom.inner, 'vis-hidden');
}
Expand Down Expand Up @@ -155,6 +164,16 @@ Group.prototype.getLabelWidth = function() {
return this.props.label.width;
};

/**
* Set the manupulated visibility of the group
* @private
*/
Group.prototype._toggleVisibility = function(visible){
this.isHidden = !visible;
var display = visible ? '' : 'none';
this.dom.label.style.display = this.dom.foreground.style.display
= this.dom.background.style.display = this.dom.axis.style.display = display;
};

/**
* Repaint this group
Expand Down Expand Up @@ -299,6 +318,9 @@ Group.prototype._isGroupVisible = function (range, margin) {
* @private
*/
Group.prototype._calculateHeight = function (margin) {
if (this.isHidden){
return 0;
}
// recalculate the height of the group
var height;
var visibleItems = this.visibleItems;
Expand Down