Vfrdtyky

I have multiple timelines in a project that uses vis.js, generated by a PHP code.

There is an option for timelines, called clickToUse, if which is set to True, it causes the specific timeline to get selected when the user clicks on the timeline, causing a shadowed outline appearing around it.

I'm using an additional div header with title and various information regarding to the timeline below it.

I would like to have the timeline selected from code (causing to have the shadowed outline) when I click on the header div, so something that happens when the user clicks on the timeline.

How can this be done? Any help would be appreciated.

Finally I've figured it out, this is my solution. First of all, I had to use stopPropagation, because basically vis.js deactivates a timeline when the user clicks anywhere else but on the timeline. So clicking on the header div would deactivate the timeline right after we activate it.

Looking in the vis.js code, I found that it uses an Activator object to handle activation/deactivation when clickToUse is set to true. If it is set to false, the Activator is not propagated in the Timeline object. The Activator object has an "activate" and "deactivate" function (and some others) that can be called (it's not written in the vis.js documentation).

So, I'm using the following code and it works:

document.getElementById('headerdiv').addEventListener('click', function() {

  event.stopPropagation();

  timeline.activator.activate();

});

If you call .activate(), it also deactivates the other timelines (if you have multiple), so no need to call any other functions, because everything is written in the activate() function: the css change, the emitters, the key binding.