https://konurogstjornmal.is/wp-content/themes/saga100/js/views/TimelineView.js

1//	Normal view for the timeline (vis.js)
2var TimelineView = Backbone.View.extend({
3	timeLine: null,
4	groups: null,
5	timelineOptions: {
6		start: '1845-1-1',
7		end: '2015-1-1',
8		orientation: 'top',
9		showCurrentTime: false,
10		margin: {
11			item: 5
12		}
13	},
14
15	initialize: function() {
16		this.listenTo(this.collection, 'reset', this.render);
17	},
18
19	render: function() {
20		var dataItems = _.map(this.collection.models, function(item) {
21			return {
22				id: item.get('id'),
23				content: item.get('title'),
24				start: item.get('start'),
25				end: item.get('end'),
26				type: item.get('isPeriod') ? 'background' : item.get('end') != null ? 'range' : 'box',
27				group: item.get('group'),
28				className: item.get('periodColor')
29			};
30		});
31		if (this.collection.groupItems.length > 0) {
32			var groupItems = _.map(this.collection.groupItems.models, function(item) {
33				return {
34					id: item.get('id'),
35					content: item.get('title'),
36					start: item.get('start'),
37					end: item.get('end'),
38					type: item.get('isPeriod') ? 'background' : item.get('end') != null ? 'range' : 'box',
39					group: 'history-periods',
40					className: item.get('periodColor')
41				};
42			});
43			dataItems = _.union(dataItems, groupItems)
44		}
45
46		var eventDataItems = new vis.DataSet(dataItems);
47		if (this.collection.length > 0) {
48			this.timelineOptions.start = (this.collection.first().getYear()-5)+'-1-1';
49			this.timelineOptions.end = (this.collection.first().getYear()+20)+'-1-1';
50//			this.timelineOptions.end = ((new Date()).getFullYear()+100)+'-1-1';
51			this.groups = new vis.DataSet(this.collection.categories());
52			if (this.timeLine == undefined) {
53				this.timeLine = new vis.Timeline(this.el, eventDataItems, this.timelineOptions);
54				var _this = this;
55				this.timeLine.on('select', function(selected) {
56					if (selected.items.length > 0) {
57						if (!app.eventList.get(selected.items[0]).get('event_period')) {
58							_this.trigger('itemSelect', {
59								item: selected.items[0]
60							});
61						}
62					}
63				});
64				this.timeLine.on('rangechanged', function() {
65					if ($('#timelineContainer').height() > 280) {
66						$('#timelineContainer').css('transform', 'translate3d(0, '+($('#timelineContainer').height()-230)+'px, 0)');
67					}
68				});
69				this.timeLine.setGroups(this.groups);
70			}
71			else {
72				this.timeLine.setOptions(this.timelineOptions);
73				this.timeLine.setGroups(this.groups);
74				this.timeLine.setItems(eventDataItems);
75			}
76		}
77		else {
78			this.timeLine.clear()
79		}
80		this.trigger('render');
81	},
82	setSelection: function(itemId) {
83		if (this.timeLine != undefined) {	
84			this.timeLine.setSelection(itemId);
85			this.timeLine.moveTo(this.collection.get(itemId).get('start'));
86		}
87	}
88});