102 lines
3.1 KiB
JavaScript
102 lines
3.1 KiB
JavaScript
"use strict";
|
|
|
|
// Class definition
|
|
var KTVisTimelineGroup = function () {
|
|
// Private functions
|
|
var exampleGroup = function () {
|
|
var now = Date.now();
|
|
|
|
var options = {
|
|
stack: true,
|
|
maxHeight: 640,
|
|
horizontalScroll: false,
|
|
verticalScroll: true,
|
|
zoomKey: "ctrlKey",
|
|
start: Date.now() - 1000 * 60 * 60 * 24 * 3, // minus 3 days
|
|
end: Date.now() + 1000 * 60 * 60 * 24 * 21, // plus 1 months aprox.
|
|
orientation: {
|
|
axis: "both",
|
|
item: "top",
|
|
},
|
|
};
|
|
var groups = new vis.DataSet();
|
|
var items = new vis.DataSet();
|
|
|
|
var count = 300;
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
var start = now + 1000 * 60 * 60 * 24 * (i + Math.floor(Math.random() * 7));
|
|
var end = start + 1000 * 60 * 60 * 24 * (1 + Math.floor(Math.random() * 5));
|
|
|
|
groups.add({
|
|
id: i,
|
|
content: "Task " + i,
|
|
order: i,
|
|
});
|
|
|
|
items.add({
|
|
id: i,
|
|
group: i,
|
|
start: start,
|
|
end: end,
|
|
type: "range",
|
|
content: "Item " + i,
|
|
});
|
|
}
|
|
|
|
// create a Timeline
|
|
var container = document.getElementById("kt_docs_vistimeline_group");
|
|
var timeline = new vis.Timeline(container, items, groups, options);
|
|
//timeline = new vis.Timeline(container, null, options);
|
|
timeline.setGroups(groups);
|
|
timeline.setItems(items);
|
|
|
|
function debounce(func, wait = 100) {
|
|
let timeout;
|
|
return function (...args) {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => {
|
|
func.apply(this, args);
|
|
}, wait);
|
|
};
|
|
}
|
|
|
|
let groupFocus = (e) => {
|
|
let vGroups = timeline.getVisibleGroups();
|
|
let vItems = vGroups.reduce((res, groupId) => {
|
|
let group = timeline.itemSet.groups[groupId];
|
|
if (group.items) {
|
|
res = res.concat(Object.keys(group.items));
|
|
}
|
|
return res;
|
|
}, []);
|
|
timeline.focus(vItems);
|
|
};
|
|
timeline.on("scroll", debounce(groupFocus, 200));
|
|
// Enabling the next line leads to a continuous since calling focus might scroll vertically even if it shouldn't
|
|
// this.timeline.on("scrollSide", debounce(groupFocus, 200))
|
|
|
|
// Handle button click
|
|
const button = document.getElementById('kt_docs_vistimeline_group_button');
|
|
button.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
|
|
var a = timeline.getVisibleGroups();
|
|
document.getElementById("visibleGroupsContainer").innerHTML = "";
|
|
document.getElementById("visibleGroupsContainer").innerHTML += a;
|
|
});
|
|
}
|
|
|
|
return {
|
|
// Public Functions
|
|
init: function () {
|
|
exampleGroup();
|
|
}
|
|
};
|
|
}();
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTVisTimelineGroup.init();
|
|
});
|