Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding the course/access per course timeline (not finished yet)
- Loading branch information
jmontoya
authored and
jmontoya
committed
Feb 23, 2012
1 parent
b44e6ea
commit 3cc034f
Showing
6 changed files
with
328 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,215 @@ | ||
| /* ---------------------------------- | ||
| jQuery Timelinr 0.9.5 | ||
| tested with jQuery v1.6+ | ||
| Copyright 2011, CSSLab.cl | ||
| Free under the MIT license. | ||
| http://www.opensource.org/licenses/mit-license.php | ||
| instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/ | ||
| ---------------------------------- */ | ||
|
|
||
| jQuery.fn.timelinr = function(options){ | ||
| // default plugin settings | ||
| settings = jQuery.extend({ | ||
| orientation: 'horizontal', // value: horizontal | vertical, default to horizontal | ||
| containerDiv: '#timeline', // value: any HTML tag or #id, default to #timeline | ||
| datesDiv: '#dates', // value: any HTML tag or #id, default to #dates | ||
| datesSelectedClass: 'selected', // value: any class, default to selected | ||
| datesSpeed: 'normal', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal | ||
| issuesDiv: '#issues', // value: any HTML tag or #id, default to #issues | ||
| issuesSelectedClass: 'selected', // value: any class, default to selected | ||
| issuesSpeed: 'fast', // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast | ||
| issuesTransparency: 0.2, // value: integer between 0 and 1 (recommended), default to 0.2 | ||
| issuesTransparencySpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) | ||
| prevButton: '#prev', // value: any HTML tag or #id, default to #prev | ||
| nextButton: '#next', // value: any HTML tag or #id, default to #next | ||
| arrowKeys: 'false', // value: true | false, default to false | ||
| startAt: 1, // value: integer, default to 1 (first) | ||
| autoPlay: 'false', // value: true | false, default to false | ||
| autoPlayDirection: 'forward', // value: forward | backward, default to forward | ||
| autoPlayPause: 2000 // value: integer (1000 = 1 seg), default to 2000 (2segs) | ||
|
|
||
| }, options); | ||
|
|
||
| $(function(){ | ||
| // setting variables... many of them | ||
| var howManyDates = $(settings.datesDiv+' li').length; | ||
| var howManyIssues = $(settings.issuesDiv+' li').length; | ||
| var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); | ||
| var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass); | ||
| var widthContainer = $(settings.containerDiv).width(); | ||
| var heightContainer = $(settings.containerDiv).height(); | ||
| var widthIssues = $(settings.issuesDiv).width(); | ||
| var heightIssues = $(settings.issuesDiv).height(); | ||
| var widthIssue = $(settings.issuesDiv+' li').width(); | ||
| var heightIssue = $(settings.issuesDiv+' li').height(); | ||
| var widthDates = $(settings.datesDiv).width(); | ||
| var heightDates = $(settings.datesDiv).height(); | ||
| var widthDate = $(settings.datesDiv+' li').width(); | ||
| var heightDate = $(settings.datesDiv+' li').height(); | ||
|
|
||
| // set positions! | ||
| if(settings.orientation == 'horizontal') { | ||
| $(settings.issuesDiv).width(widthIssue*howManyIssues); | ||
| $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2); | ||
| var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); | ||
| } else if(settings.orientation == 'vertical') { | ||
| $(settings.issuesDiv).height(heightIssue*howManyIssues); | ||
| $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2); | ||
| var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); | ||
| } | ||
|
|
||
| $(settings.datesDiv+' a').click(function(event){ | ||
| event.preventDefault(); | ||
| // first vars | ||
| var whichIssue = $(this).text(); | ||
| var currentIndex = $(this).parent().prevAll().length; | ||
|
|
||
| // moving the elements | ||
| if(settings.orientation == 'horizontal') { | ||
| $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); | ||
| } else if(settings.orientation == 'vertical') { | ||
| $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); | ||
| } | ||
| $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1); | ||
|
|
||
| // now moving the dates | ||
| $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass); | ||
| $(this).addClass(settings.datesSelectedClass); | ||
| if(settings.orientation == 'horizontal') { | ||
| $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'}); | ||
| } else if(settings.orientation == 'vertical') { | ||
| $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'}); | ||
| } | ||
| }); | ||
|
|
||
| $(settings.nextButton).bind('click', function(event){ | ||
| event.preventDefault(); | ||
| if(settings.orientation == 'horizontal') { | ||
| var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); | ||
| var currentIssueIndex = currentPositionIssues/widthIssue; | ||
| var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); | ||
| var currentIssueDate = currentPositionDates-widthDate; | ||
| if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) { | ||
| $(settings.issuesDiv).stop(); | ||
| $(settings.datesDiv+' li:last-child a').click(); | ||
| } else { | ||
| if (!$(settings.issuesDiv).is(':animated')) { | ||
| $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues-widthIssue},{queue:false, duration:settings.issuesSpeed}); | ||
| $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); | ||
| $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); | ||
| $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:'settings.datesSpeed'}); | ||
| $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); | ||
| } | ||
| } | ||
| } else if(settings.orientation == 'vertical') { | ||
| var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px'))); | ||
| var currentIssueIndex = currentPositionIssues/heightIssue; | ||
| var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); | ||
| var currentIssueDate = currentPositionDates-heightDate; | ||
| if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) { | ||
| $(settings.issuesDiv).stop(); | ||
| $(settings.datesDiv+' li:last-child a').click(); | ||
| } else { | ||
| if (!$(settings.issuesDiv).is(':animated')) { | ||
| $(settings.issuesDiv).animate({'marginTop':currentPositionIssues-heightIssue},{queue:false, duration:settings.issuesSpeed}); | ||
| $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); | ||
| $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); | ||
| $(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:'settings.datesSpeed'}); | ||
| $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| $(settings.prevButton).click(function(event){ | ||
| event.preventDefault(); | ||
| if(settings.orientation == 'horizontal') { | ||
| var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); | ||
| var currentIssueIndex = currentPositionIssues/widthIssue; | ||
| var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); | ||
| var currentIssueDate = currentPositionDates+widthDate; | ||
| if(currentPositionIssues >= 0) { | ||
| $(settings.issuesDiv).stop(); | ||
| $(settings.datesDiv+' li:first-child a').click(); | ||
| } else { | ||
| if (!$(settings.issuesDiv).is(':animated')) { | ||
| $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues+widthIssue},{queue:false, duration:settings.issuesSpeed}); | ||
| $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); | ||
| $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); | ||
| $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:'settings.datesSpeed'}); | ||
| $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); | ||
| } | ||
| } | ||
| } else if(settings.orientation == 'vertical') { | ||
| var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px'))); | ||
| var currentIssueIndex = currentPositionIssues/heightIssue; | ||
| var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); | ||
| var currentIssueDate = currentPositionDates+heightDate; | ||
| if(currentPositionIssues >= 0) { | ||
| $(settings.issuesDiv).stop(); | ||
| $(settings.datesDiv+' li:first-child a').click(); | ||
| } else { | ||
| if (!$(settings.issuesDiv).is(':animated')) { | ||
| $(settings.issuesDiv).animate({'marginTop':currentPositionIssues+heightIssue},{queue:false, duration:settings.issuesSpeed}); | ||
| $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); | ||
| $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); | ||
| $(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:'settings.datesSpeed'},{queue:false, duration:settings.issuesSpeed}); | ||
| $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| // keyboard navigation, added since 0.9.1 | ||
| if(settings.arrowKeys=='true') { | ||
| if(settings.orientation=='horizontal') { | ||
| $(document).keydown(function(event){ | ||
| if (event.keyCode == 39) { | ||
| $(settings.nextButton).click(); | ||
| } | ||
| if (event.keyCode == 37) { | ||
| $(settings.prevButton).click(); | ||
| } | ||
| }); | ||
| } else if(settings.orientation=='vertical') { | ||
| $(document).keydown(function(event){ | ||
| if (event.keyCode == 40) { | ||
| $(settings.nextButton).click(); | ||
| } | ||
| if (event.keyCode == 38) { | ||
| $(settings.prevButton).click(); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| // default position startAt, added since 0.9.3 | ||
| $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click'); | ||
|
|
||
| // autoPlay, added since 0.9.4 | ||
| if(settings.autoPlay == 'true') { | ||
| setInterval("autoPlay()", settings.autoPlayPause); | ||
| } | ||
| }); | ||
|
|
||
| }; | ||
|
|
||
| // autoPlay, added since 0.9.4 | ||
| function autoPlay(){ | ||
| var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); | ||
| if(settings.autoPlayDirection == 'forward') { | ||
| if(currentDate.parent().is('li:last-child')) { | ||
| $(settings.datesDiv+' li:first-child').find('a').trigger('click'); | ||
| } else { | ||
| currentDate.parent().next().find('a').trigger('click'); | ||
| } | ||
| } else if(settings.autoPlayDirection == 'backward') { | ||
| if(currentDate.parent().is('li:first-child')) { | ||
| $(settings.datesDiv+' li:last-child').find('a').trigger('click'); | ||
| } else { | ||
| currentDate.parent().prev().find('a').trigger('click'); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters