-
Notifications
You must be signed in to change notification settings - Fork 177
/
timeliner.js
155 lines (123 loc) · 6.04 KB
/
timeliner.js
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
/*
* Timeliner.js
* @version 1.6.1
* @copyright Tarek Anandan (http://www.technotarek.com)
*/
;(function($) {
$.timeliner = function(options) {
if ($.timeliners == null) {
$.timeliners = { options: [] };
$.timeliners.options.push(options);
}
else {
$.timeliners.options.push(options);
}
$(document).ready(function() {
for (var i=0; i<$.timeliners.options.length; i++) {
startTimeliner($.timeliners.options[i]);
}
});
}
function startTimeliner(options){
var settings = {
timelineContainer: options['timelineContainer'] || '#timelineContainer', // value: selector of the main element holding the timeline's content, default to #timelineContainer
startState: options['startState'] || 'closed', // value: closed | open,
// default to closed; sets whether the timeline is
// initially collapsed or fully expanded
startOpen: options['startOpen'] || [], // value: array of IDs of
// single timelineEvents, default to empty; sets
// the minor events that you want to display open
// by default on page load
baseSpeed: options['baseSpeed'] || 200, // value: numeric, default to
// 200; sets the base speed for animation of the
// event marker
speed: options['speed'] || 4, // value: numeric, defalut to 4; a
// multiplier applied to the base speed that sets
// the speed at which an event's conents are
// displayed and hidden
fontOpen: options['fontOpen'] || '1.2em', // value: any valid CSS
// font-size value, defaults to 1em; sets the font
// size of an event after it is opened
fontClosed: options['fontClosed'] || '1em', // value: any valid CSS
// font-size value, defaults to 1em; sets the font
// size of an event after it is closed
expandAllText: options ['expandAllText'] || '+ expand all', // value:
// string, sets the text of the expandAll selector
// after the timeline is fully collapsed
collapseAllText: options['collapseAllText'] || '- collapse all' // // value:
// string, sets the text of the expandAll selector
// after the timeline is fully expanded
};
function openEvent(eventHeading,eventBody) {
$(eventHeading)
.removeClass('closed')
.addClass('open')
.animate({ fontSize: settings.fontOpen }, settings.baseSpeed);
$(eventBody).show(settings.speed*settings.baseSpeed);
}
function closeEvent(eventHeading,eventBody) {
$(eventHeading)
.animate({ fontSize: settings.fontClosed }, 0)
.removeClass('open')
.addClass('closed');
$(eventBody).hide(settings.speed*settings.baseSpeed);
}
if ($(settings.timelineContainer).data('started')) {
return; // we already initialized this timelineContainer
} else {
$(settings.timelineContainer).data('started', true);
$(settings.timelineContainer+" "+".expandAll").html(settings.expandAllText);
$(settings.timelineContainer+" "+".collapseAll").html(settings.collapseAllText);
// If startState option is set to closed, hide all the events; else, show fully expanded upon load
if(settings.startState==='closed')
{
// Close all items
$(settings.timelineContainer+" "+".timelineEvent").hide();
// show startOpen events
$.each($(settings.startOpen), function(index, value) {
openEvent($(value).parent(settings.timelineContainer+" "+".timelineMinor").find("dt a"),$(value));
});
}else{
// Open all items
openEvent($(settings.timelineContainer+" "+".timelineMinor dt a"),$(settings.timelineContainer+" "+".timelineEvent"));
}
// Minor Event Click
$(settings.timelineContainer).on("click",".timelineMinor dt",function(){
var currentId = $(this).attr('id');
// if the event is currently open
if($(this).find('a').is('.open'))
{
closeEvent($("a",this),$("#"+currentId+"EX"))
} else{ // if the event is currently closed
openEvent($("a", this),$("#"+currentId+"EX"));
}
});
// Major Marker Click
$(settings.timelineContainer).on("click",".timelineMajorMarker",function()
{
// number of minor events under this major event
var numEvents = $(this).parents(".timelineMajor").find(".timelineMinor").length;
// number of minor events already open
var numOpen = $(this).parents(".timelineMajor").find('.open').length;
if(numEvents > numOpen )
{
openEvent($(this).parents(".timelineMajor").find("dt a","dl.timelineMinor"),$(this).parents(".timelineMajor").find(".timelineEvent"));
} else{
closeEvent($(this).parents(".timelineMajor").find("dl.timelineMinor a"),$(this).parents(".timelineMajor").find(".timelineEvent"));
}
});
// All Markers/Events
$(settings.timelineContainer+" "+".expandAll").click(function()
{
if($(this).hasClass('expanded'))
{
closeEvent($(this).parents(settings.timelineContainer).find("dt a","dl.timelineMinor"),$(this).parents(settings.timelineContainer).find(".timelineEvent"));
$(this).removeClass('expanded').html(settings.expandAllText);
} else{
openEvent($(this).parents(settings.timelineContainer).find("dt a","dl.timelineMinor"),$(this).parents(settings.timelineContainer).find(".timelineEvent"));
$(this).addClass('expanded').html(settings.collapseAllText);
}
});
}
};
})(jQuery);