I have implemented a timeline using vis.js with the following options :
var timeline_items = new vis.DataSet();
var timeline_groups = new vis.DataSet();
var start = new Date(1970, 0, 1, 0, 0, 0, 0);
var end = new Date(1970, 00, 01, 0, 1, 0, 0);
var options = {
zoomKey: "ctrlKey",
horizontalScroll: true,
verticalScroll: true,
orientation: "top",
moveable: true,
zoomable : true,
editable: true,
min: start,
max: end,
start: start,
end: end,
zoomMax: 10000000,
zoomMin: 1000,
stack:false,
showCurrentTime: true,
multiselect: true,
multiselectPerGroup: true,
};
The timeline works perfectly for a video editor timeline with the options. Now I intend to get the latest available date in the timeline for the case of a drag & drop action :
function handleDragStart(event) {
event.target.id = event.currentTarget.id;
event.target.addEventListener('dragend', handleDragEnd, false);
}
function handleDragEnd(event) {
newItem_dropped = $("#" + event.target.id);
var latest_date = options.min;
for (var i = 0; i < timeline_items.get().length; i++) {
if (latest_date < timeline_items.get()[i].end) {
latest_date = timeline_items.get()[i].end;
}
}
var start = Math.round((latest_date - options.min));
var end = Math.round((latest_date - options.min)) +
$(newItem_dropped).attr('data-entity-segment-end') -
$(newItem_dropped).attr('data-entity-segment-start');
var link = $(newItem_dropped).attr('data-src');
parsed_start = parseMillisecondsIntoReadableTime(start);
parsed_end = parseMillisecondsIntoReadableTime(end);
timeline_items.add({
id: $(newItem_dropped).attr('id'),
group: "timeline_video_group_id", // truck,
start: new Date(1970, 0, 1, parsed_start[0], parsed_start[1], parsed_start[2],
parsed_start[3]),
end: new Date(1970, 0, 1, parsed_end[0], parsed_end[1], parsed_end[2],
parsed_end[3]),
content: "<img src='" + link + "'></img>",
className: 'imagecontainer'
});
}
Particularly, in the DragEnd function I try to to calculate latest date for the items in the DataSet for the timeline, but it does not calculate it correctly.
How should I get the latest available date in the timeline ?
Adding this function for getting latest date available solved my problem :
function rearrange_timeline_min_max_value()
{
console.log("timeline_get_latest_date start");
var rearranged_timeline_date = timeline_get_latest_date();
if (rearranged_timeline_date < new Date(1970, 0, 1, 00, 01, 00, 000)) {
rearranged_timeline_date.setSeconds(60);
} else if (options.max < timeline_get_latest_date()) {
console.log("timeline_get_latest_date atest data before : " + timeline_get_latest_date());
rearranged_timeline_date.setSeconds(
rearranged_timeline_date.getSeconds() + 30
);
console.log("timeline_get_latest_date atest data after : " + timeline_get_latest_date());
}
timeline.setOptions({min: new Date(1970, 0, 1, 00, 00, 00, 000),
max: rearranged_timeline_date});
timeline.fit();
timeline.redraw();
console.log("timeline_get_latest_date end");
}