diff options
Diffstat (limited to 'deck.js/extensions/navigation/deck.navigation.js')
-rw-r--r-- | deck.js/extensions/navigation/deck.navigation.js | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/deck.js/extensions/navigation/deck.navigation.js b/deck.js/extensions/navigation/deck.navigation.js new file mode 100644 index 0000000..a07f7ea --- /dev/null +++ b/deck.js/extensions/navigation/deck.navigation.js @@ -0,0 +1,92 @@ +/*! +Deck JS - deck.navigation +Copyright (c) 2011 Caleb Troughton +Dual licensed under the MIT license and GPL license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* +This module adds clickable previous and next links to the deck. +*/ +(function($, deck, undefined) { + var $d = $(document), + + /* Updates link hrefs, and disabled states if last/first slide */ + updateButtons = function(e, from, to) { + var opts = $[deck]('getOptions'), + last = $[deck]('getSlides').length - 1, + prevSlide = $[deck]('getSlide', to - 1), + nextSlide = $[deck]('getSlide', to + 1), + hrefBase = window.location.href.replace(/#.*/, ''), + prevId = prevSlide ? prevSlide.attr('id') : undefined, + nextId = nextSlide ? nextSlide.attr('id') : undefined; + + $(opts.selectors.previousLink) + .toggleClass(opts.classes.navDisabled, !to) + .attr('href', hrefBase + '#' + (prevId ? prevId : '')); + $(opts.selectors.nextLink) + .toggleClass(opts.classes.navDisabled, to === last) + .attr('href', hrefBase + '#' + (nextId ? nextId : '')); + }; + + /* + Extends defaults/options. + + options.classes.navDisabled + This class is added to a navigation link when that action is disabled. + It is added to the previous link when on the first slide, and to the + next link when on the last slide. + + options.selectors.nextLink + The elements that match this selector will move the deck to the next + slide when clicked. + + options.selectors.previousLink + The elements that match this selector will move to deck to the previous + slide when clicked. + */ + $.extend(true, $[deck].defaults, { + classes: { + navDisabled: 'deck-nav-disabled' + }, + + selectors: { + nextLink: '.deck-next-link', + previousLink: '.deck-prev-link' + } + }); + + $d.bind('deck.init', function() { + var opts = $[deck]('getOptions'), + slides = $[deck]('getSlides'), + $current = $[deck]('getSlide'), + ndx; + + // Setup prev/next link events + $(opts.selectors.previousLink) + .unbind('click.decknavigation') + .bind('click.decknavigation', function(e) { + $[deck]('prev'); + e.preventDefault(); + }); + + $(opts.selectors.nextLink) + .unbind('click.decknavigation') + .bind('click.decknavigation', function(e) { + $[deck]('next'); + e.preventDefault(); + }); + + // Find where we started in the deck and set initial states + $.each(slides, function(i, $slide) { + if ($slide === $current) { + ndx = i; + return false; + } + }); + updateButtons(null, ndx, ndx); + }) + .bind('deck.change', updateButtons); +})(jQuery, 'deck'); + |