1 | /*
|
---|
2 | * Timeliner.js
|
---|
3 | * @version 1.6
|
---|
4 | * @copyright Tarek Anandan (http://www.technotarek.com)
|
---|
5 | */
|
---|
6 | ;(function($) {
|
---|
7 |
|
---|
8 | $.timeliner = function(options) {
|
---|
9 | if ($.timeliners == null) {
|
---|
10 | $.timeliners = { options: [] };
|
---|
11 | $.timeliners.options.push(options);
|
---|
12 | }
|
---|
13 | else {
|
---|
14 | $.timeliners.options.push(options);
|
---|
15 | }
|
---|
16 | $(document).ready(function() {
|
---|
17 | for (var i=0; i<$.timeliners.options.length; i++) {
|
---|
18 | startTimeliner($.timeliners.options[i]);
|
---|
19 | }
|
---|
20 | });
|
---|
21 | }
|
---|
22 |
|
---|
23 | function startTimeliner(options){
|
---|
24 | var settings = {
|
---|
25 | timelineContainer: options['timelineContainer'] || '#timelineContainer', // value: selector of the main element holding the timeline's content, default to #timelineContainer
|
---|
26 | startState: options['closed'] || 'closed', // value: closed | open,
|
---|
27 | // default to closed; sets whether the timeline is
|
---|
28 | // initially collapsed or fully expanded
|
---|
29 | startOpen: options['startOpen'] || [], // value: array of IDs of
|
---|
30 | // single timelineEvents, default to empty; sets
|
---|
31 | // the minor events that you want to display open
|
---|
32 | // by default on page load
|
---|
33 | baseSpeed: options['baseSpeed'] || 200, // value: numeric, default to
|
---|
34 | // 200; sets the base speed for animation of the
|
---|
35 | // event marker
|
---|
36 | speed: options['speed'] || 4, // value: numeric, defalut to 4; a
|
---|
37 | // multiplier applied to the base speed that sets
|
---|
38 | // the speed at which an event's conents are
|
---|
39 | // displayed and hidden
|
---|
40 | fontOpen: options['fontOpen'] || '', // value: any valid CSS
|
---|
41 | // font-size value, defaults to 1em; sets the font
|
---|
42 | // size of an event after it is opened
|
---|
43 | fontClosed: options['fontClosed'] || '', // value: any valid CSS
|
---|
44 | // font-size value, defaults to 1em; sets the font
|
---|
45 | // size of an event after it is closed
|
---|
46 | expandAllText: options ['expandAllText'] || 'Expand All', // value:
|
---|
47 | // string, sets the text of the expandAll selector
|
---|
48 | // after the timeline is fully collapsed
|
---|
49 | collapseAllText: options['collapseAllText'] || 'Collapse All' // // value:
|
---|
50 | // string, sets the text of the expandAll selector
|
---|
51 | // after the timeline is fully expanded
|
---|
52 | };
|
---|
53 |
|
---|
54 | function openEvent(eventHeading,eventBody) {
|
---|
55 | $(eventHeading)
|
---|
56 | .removeClass('closed')
|
---|
57 | .addClass('open')
|
---|
58 | .animate({ fontSize: settings.fontOpen }, settings.baseSpeed);
|
---|
59 | $(eventBody).show(settings.speed*settings.baseSpeed);
|
---|
60 | }
|
---|
61 |
|
---|
62 | function closeEvent(eventHeading,eventBody) {
|
---|
63 | $(eventHeading)
|
---|
64 | .animate({ fontSize: settings.fontClosed }, 0)
|
---|
65 | .removeClass('open')
|
---|
66 | .addClass('closed');
|
---|
67 | $(eventBody).hide(settings.speed*settings.baseSpeed);
|
---|
68 | }
|
---|
69 |
|
---|
70 |
|
---|
71 | if ($(settings.timelineContainer).data('started')) {
|
---|
72 | return; // we already initialized this timelineContainer
|
---|
73 | } else {
|
---|
74 | $(settings.timelineContainer).data('started', true);
|
---|
75 | $(settings.timelineContainer+" "+".expandAll").html(settings.expandAllText);
|
---|
76 | $(settings.timelineContainer+" "+".collapseAll").html(settings.collapseAllText);
|
---|
77 |
|
---|
78 | // If startState option is set to closed, hide all the events; else, show fully expanded upon load
|
---|
79 | if(settings.startState==='closed')
|
---|
80 | {
|
---|
81 | // Close all items
|
---|
82 | $(settings.timelineContainer+" "+".timelineEvent").hide();
|
---|
83 |
|
---|
84 | // show startOpen events
|
---|
85 | $.each($(settings.startOpen), function(index, value) {
|
---|
86 | openEvent($(value).parent(settings.timelineContainer+" "+".timelineMinor").find("dt a"),$(value));
|
---|
87 | });
|
---|
88 |
|
---|
89 | }else{
|
---|
90 |
|
---|
91 | // Open all items
|
---|
92 | openEvent($(settings.timelineContainer+" "+".timelineMinor dt a"),$(settings.timelineContainer+" "+".timelineEvent"));
|
---|
93 |
|
---|
94 | }
|
---|
95 |
|
---|
96 | // Minor Event Click
|
---|
97 | $(settings.timelineContainer).on("click",".timelineMinor dt",function(){
|
---|
98 |
|
---|
99 | var currentId = $(this).attr('id');
|
---|
100 |
|
---|
101 | // if the event is currently open
|
---|
102 | if($(this).find('a').is('.open'))
|
---|
103 | {
|
---|
104 |
|
---|
105 | closeEvent($("a",this),$("#"+currentId+"EX"))
|
---|
106 |
|
---|
107 | } else{ // if the event is currently closed
|
---|
108 |
|
---|
109 | openEvent($("a", this),$("#"+currentId+"EX"));
|
---|
110 |
|
---|
111 | }
|
---|
112 |
|
---|
113 | });
|
---|
114 |
|
---|
115 | // Major Marker Click
|
---|
116 | $(settings.timelineContainer).on("click",".timelineMajorMarker",function()
|
---|
117 | {
|
---|
118 |
|
---|
119 | // number of minor events under this major event
|
---|
120 | var numEvents = $(this).parents(".timelineMajor").find(".timelineMinor").length;
|
---|
121 |
|
---|
122 | // number of minor events already open
|
---|
123 | var numOpen = $(this).parents(".timelineMajor").find('.open').length;
|
---|
124 |
|
---|
125 | if(numEvents > numOpen )
|
---|
126 | {
|
---|
127 |
|
---|
128 | openEvent($(this).parents(".timelineMajor").find("dt a","dl.timelineMinor"),$(this).parents(".timelineMajor").find(".timelineEvent"));
|
---|
129 |
|
---|
130 | } else{
|
---|
131 |
|
---|
132 | closeEvent($(this).parents(".timelineMajor").find("dl.timelineMinor a"),$(this).parents(".timelineMajor").find(".timelineEvent"));
|
---|
133 |
|
---|
134 | }
|
---|
135 | });
|
---|
136 |
|
---|
137 | // All Markers/Events
|
---|
138 | $(settings.timelineContainer+" "+".expandAll").click(function()
|
---|
139 | {
|
---|
140 | if($(this).hasClass('expanded'))
|
---|
141 | {
|
---|
142 |
|
---|
143 | closeEvent($(this).parents(settings.timelineContainer).find("dt a","dl.timelineMinor"),$(this).parents(settings.timelineContainer).find(".timelineEvent"));
|
---|
144 | $(this).removeClass('expanded').html(settings.expandAllText);
|
---|
145 |
|
---|
146 | } else{
|
---|
147 |
|
---|
148 | openEvent($(this).parents(settings.timelineContainer).find("dt a","dl.timelineMinor"),$(this).parents(settings.timelineContainer).find(".timelineEvent"));
|
---|
149 | $(this).addClass('expanded').html(settings.collapseAllText);
|
---|
150 |
|
---|
151 | }
|
---|
152 | });
|
---|
153 | }
|
---|
154 | };
|
---|
155 | })(jQuery);
|
---|