-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathexample.html
161 lines (138 loc) · 5.02 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="simpleTimeline.css" />
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="resize.js"></script>
<script src="simpleTimeline.js"></script>
<style>
#timeline {
position: relative;
margin-top: 350px;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid dimgray;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.75);
}
#timeline .selected {
font-weight: bold;
box-shadow: 0px 0px 3px 1px gray;
}
#timeline-collapse {
top: 355px
}
.styleA {
color: darkgreen;
background-color: lightgreen;
}
.styleB {
color: darkred;
background-color: mistyrose;
}
.styleC {
color: darkblue;
background-color: lightblue;
}
.timeline-unused-phase {
background: repeating-linear-gradient(
-45deg,
rgba(255,255,255,0.85),
rgba(255,255,255,0.85) 10px,
rgba(235,235,235,0.85) 10px,
rgba(235,235,235,0.85) 20px
);
}
/* NOTE: YOU MIGHT ALSO NEED TO ADAPT THE COLLAPSE/EXPAND TOGGLE POSITIONS IN simpleTimeline.css
</style>
</head>
<body>
<div id="timeline"></div>
<p>Play with the timeline:</p>
<ul>
<li>Click the items in the timeline. <span id='clicked-item'></span></li>
<li><a href="#" onclick="bind_popup()">Attach popup text to selected item</a></li>
<li><a href="#" onclick="add_item()">Add an item</a></li>
<li><a href="#" onclick="remove_selected_item()">Remove selected item</a></li>
</ul>
<script>
var timeline;
$(document).ready(timeline_init);
function timeline_init() {
var options = {
phases: [
{ start: -50000, end: -30000, indicatorsEvery: 20000, share: .2 },
{ start: -30000, end: -5000, indicatorsEvery: 25000, share: .07, className: 'timeline-unused-phase' },
{ start: -5000, end: 2000, indicatorsEvery: 1000, share: .73 }
],
formatHeader: function (v) {
if(v < 0) return -v + ' BC';
if(v > 0) return v + ' AD';
return 'AD';
},
barHeight: 25,
fontSize: 16
};
// note: item 'Lonely' has a popup text attached
var data = [
[{ id: 'Dingo', start: -50000, end: -32000, className: 'styleA' },
{ id: 'Ringo', start: -3000, end: 0, className: 'styleA' }],
[{ id: 'Looong', start: -42000, end: -1492, className: 'styleB' },
{ id: 'Hoko', start: -980, end: -332, className: 'styleB' }],
[{ id: 'Lonely', start: -3500, end: 733, className: 'styleB', popup_html: 'I am <b>really, really</b> lonely!' }],
[{ id: 'Wunz', start: -4700, end: -2000, className: 'styleC' },
{ id: 'Inzi', start: -2000, end: -1000, className: 'styleC' },
{ id: 'Misi', start: -2000, end: 1500, className: 'styleC' }]
];
timeline = $('#timeline');
timeline.simpleTimeline(options, data);
timeline.on('timeline:barclick', timeline_clicked);
}
function timeline_clicked(e) {
var clicked_item = $(e.target);
var sel = $('.selected');
sel.removeClass('selected');
$('#clicked-item').empty();
if(sel.length == 0 || sel.data('id') != clicked_item.data('id')) {
clicked_item.addClass('selected');
$('#clicked-item').text("You clicked " + clicked_item.data('id'));
}
}
function add_item() {
var data = timeline.getTimelineData();
data.push([
{
id: 'New One',
start: -1978,
end: 1978,
className: 'styleA'
}
]);
timeline.setTimelineData(data).refreshTimeline();
}
function remove_selected_item() {
var sel_item_id = $('.selected').data('id');
var data = timeline.getTimelineData();
for(var l = 0; l < data.length; l++) {
for(var i = 0; i < data[l].length; i++) {
if(data[l][i].id == sel_item_id) {
data[l].splice(i,1);
if(data[l].length == 0)
data.splice(l,1);
timeline.setTimelineData(data).refreshTimeline();
return;
}
}
}
}
function bind_popup() {
var sel_item_id = $('.selected').data('id');
if(typeof sel_item_id == 'undefined') {
alert('Ain\'t nothin\' selected, yo!');
return;
}
timeline.bindPopup(sel_item_id, '<p><b>Yo it\'s great</b></p><p>Lorem ipsum dolizzle da bomb da bomb, consectetuer adipiscing elit. Nullam sapien velit, boom shackalack volutpizzle, suscipizzle daahng dawg, gravida vel, hizzle. Pellentesque go to hizzle tortor. Sed eros. Izzle at dolizzle dapibus turpis tempizzle gangster. Maurizzle fo shizzle my nizzle nibh et turpizzle. Owned in tortizzle. Pellentesque away rhoncizzle nizzle.</p><p>For sure bizzle massa go to hizzle shizzlin dizzle. Boom shackalack tellivizzle ipsum primis in crunk gangster luctizzle et stuff yo mamma izzle Break yo neck, yall; Nizzle sure. Pellentesque stuff check out this get down get down senectizzle et netizzle bow wow wow malesuada fizzle ac gangster egestas. Funky fresh tempor cool crackalackin. Fizzle erizzle mah nizzle.</p>');
}
</script>
</body>
</html>