Tom-Marble/deck.js/extensions/navigation/deck.navigation.js

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