extensions/navigation/deck.navigation.js

   1 /*!
   2 Deck JS - deck.navigation
   3 Copyright (c) 2011 Caleb Troughton
   4 Dual licensed under the MIT license and GPL license.
   5 https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
   6 https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt
   7 */
   8
   9 /*
  10 This module adds clickable previous and next links to the deck.
  11 */
  12 (function($, deck, undefined) {
  13         var $d = $(document),
  14
  15         /* Updates link hrefs, and disabled states if last/first slide */
  16         updateButtons = function(e, from, to) {
  17                 var opts = $[deck]('getOptions'),
  18                 last = $[deck]('getSlides').length - 1,
  19                 prevSlide = $[deck]('getSlide', to - 1),
  20                 nextSlide = $[deck]('getSlide', to + 1),
  21                 hrefBase = window.location.href.replace(/#.*/, ''),
  22                 prevId = prevSlide ? prevSlide.attr('id') : undefined,
  23                 nextId = nextSlide ? nextSlide.attr('id') : undefined;
  24
  25                 $(opts.selectors.previousLink)
  26                         .toggleClass(opts.classes.navDisabled, !to)
  27                         .attr('href', hrefBase + '#' + (prevId ? prevId : ''));
  28                 $(opts.selectors.nextLink)
  29                         .toggleClass(opts.classes.navDisabled, to === last)
  30                         .attr('href', hrefBase + '#' + (nextId ? nextId : ''));
  31         };
  32
  33         /*
  34         Extends defaults/options.
  35
  36         options.classes.navDisabled
  37                 This class is added to a navigation link when that action is disabled.
  38                 It is added to the previous link when on the first slide, and to the
  39                 next link when on the last slide.
  40
  41         options.selectors.nextLink
  42                 The elements that match this selector will move the deck to the next
  43                 slide when clicked.
  44
  45         options.selectors.previousLink
  46                 The elements that match this selector will move to deck to the previous
  47                 slide when clicked.
  48         */
  49         $.extend(true, $[deck].defaults, {
  50                 classes: {
  51                         navDisabled: 'deck-nav-disabled'
  52                 },
  53
  54                 selectors: {
  55                         nextLink: '.deck-next-link',
  56                         previousLink: '.deck-prev-link'
  57                 }
  58         });
  59
  60         $d.bind('deck.init', function() {
  61                 var opts = $[deck]('getOptions'),
  62                 slides = $[deck]('getSlides'),
  63                 $current = $[deck]('getSlide'),
  64                 ndx;
  65
  66                 // Setup prev/next link events
  67                 $(opts.selectors.previousLink)
  68                 .unbind('click.decknavigation')
  69                 .bind('click.decknavigation', function(e) {
  70                         $[deck]('prev');
  71                         e.preventDefault();
  72                 });
  73
  74                 $(opts.selectors.nextLink)
  75                 .unbind('click.decknavigation')
  76                 .bind('click.decknavigation', function(e) {
  77                         $[deck]('next');
  78                         e.preventDefault();
  79                 });
  80
  81                 // Find where we started in the deck and set initial states
  82                 $.each(slides, function(i, $slide) {
  83                         if ($slide === $current) {
  84                                 ndx = i;
  85                                 return false;
  86                         }
  87                 });
  88                 updateButtons(null, ndx, ndx);
  89         })
  90         .bind('deck.change', updateButtons);
  91 })(jQuery, 'deck');
  92