[31793] | 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);
|
---|