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

   1 /*!
   2 Deck JS - deck.goto
   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 the necessary methods and key bindings to show and hide a form
  10 for jumping to any slide number/id in the deck (and processes that form
  11 accordingly). The form-showing state is indicated by the presence of a class on
  12 the deck container.
  13 */
  14 (function($, undefined) {
  15   var $document = $(document);
  16   var rootCounter;
  17
  18   var bindKeyEvents = function() {
  19     $document.unbind('keydown.deckgoto');
  20     $document.bind('keydown.deckgoto', function(event) {
  21       var key = $.deck('getOptions').keys.goto;
  22       if (event.which === key || $.inArray(event.which, key) > -1) {
  23         event.preventDefault();
  24         $.deck('toggleGoTo');
  25       }
  26     });
  27   };
  28
  29   var populateDatalist = function() {
  30     var options = $.deck('getOptions');
  31     var $datalist = $(options.selectors.gotoDatalist);
  32
  33     $.each($.deck('getSlides'), function(i, $slide) {
  34       var id = $slide.attr('id');
  35       if (id) {
  36         $datalist.append('<option value="' + id + '">');
  37       }
  38     });
  39   };
  40
  41   var markRootSlides = function() {
  42     var options = $.deck('getOptions');
  43     var slideTest = $.map([
  44       options.classes.before,
  45       options.classes.previous,
  46       options.classes.current,
  47       options.classes.next,
  48       options.classes.after
  49     ], function(el, i) {
  50       return '.' + el;
  51     }).join(', ');
  52
  53     rootCounter = 0;
  54     $.each($.deck('getSlides'), function(i, $slide) {
  55       var $parentSlides = $slide.parentsUntil(
  56         options.selectors.container,
  57         slideTest
  58       );
  59
  60       if ($parentSlides.length) {
  61         $slide.removeData('rootIndex');
  62       }
  63       else if (!options.countNested) {
  64         ++rootCounter;
  65         $slide.data('rootIndex', rootCounter);
  66       }
  67     });
  68   };
  69
  70   var handleFormSubmit = function() {
  71     var options = $.deck('getOptions');
  72     var $form = $(options.selectors.gotoForm);
  73
  74     $form.unbind('submit.deckgoto');
  75     $form.bind('submit.deckgoto', function(event) {
  76       var $field = $(options.selectors.gotoInput);
  77       var indexOrId = $field.val();
  78       var index = parseInt(indexOrId, 10);
  79
  80       if (!options.countNested) {
  81         if (!isNaN(index) && index >= rootCounter) {
  82           return false;
  83         }
  84         $.each($.deck('getSlides'), function(i, $slide) {
  85           if ($slide.data('rootIndex') === index) {
  86             index = i + 1;
  87             return false;
  88           }
  89         });
  90       }
  91
  92       $.deck('go', isNaN(index) ? indexOrId : index - 1);
  93       $.deck('hideGoTo');
  94       $field.val('');
  95       event.preventDefault();
  96     });
  97   };
  98
  99   /*
 100   Extends defaults/options.
 101
 102   options.classes.goto
 103     This class is added to the deck container when showing the Go To Slide
 104     form.
 105
 106   options.selectors.gotoDatalist
 107     The element that matches this selector is the datalist element that will
 108     be populated with options for each of the slide ids.  In browsers that
 109     support the datalist element, this provides a drop list of slide ids to
 110     aid the user in selecting a slide.
 111
 112   options.selectors.gotoForm
 113     The element that matches this selector is the form that is submitted
 114     when a user hits enter after typing a slide number/id in the gotoInput
 115     element.
 116
 117   options.selectors.gotoInput
 118     The element that matches this selector is the text input field for
 119     entering a slide number/id in the Go To Slide form.
 120
 121   options.keys.goto
 122     The numeric keycode used to show the Go To Slide form.
 123
 124   options.countNested
 125     If false, only top level slides will be counted when entering a
 126     slide number.
 127   */
 128   $.extend(true, $.deck.defaults, {
 129     classes: {
 130       goto: 'deck-goto'
 131     },
 132
 133     selectors: {
 134       gotoDatalist: '#goto-datalist',
 135       gotoForm: '.goto-form',
 136       gotoInput: '#goto-slide'
 137     },
 138
 139     keys: {
 140       goto: 71 // g
 141     },
 142
 143     countNested: true
 144   });
 145
 146   /*
 147   jQuery.deck('showGoTo')
 148
 149   Shows the Go To Slide form by adding the class specified by the goto class
 150   option to the deck container.
 151   */
 152   $.deck('extend', 'showGoTo', function() {
 153     var options = $.deck('getOptions');
 154     $.deck('getContainer').addClass(options.classes.goto);
 155     $(options.selectors.gotoForm).attr('aria-hidden', false);
 156     $(options.selectors.gotoInput).focus();
 157   });
 158
 159   /*
 160   jQuery.deck('hideGoTo')
 161
 162   Hides the Go To Slide form by removing the class specified by the goto class
 163   option from the deck container.
 164   */
 165   $.deck('extend', 'hideGoTo', function() {
 166     var options = $.deck('getOptions');
 167     $(options.selectors.gotoInput).blur();
 168     $.deck('getContainer').removeClass(options.classes.goto);
 169     $(options.selectors.gotoForm).attr('aria-hidden', true);
 170   });
 171
 172   /*
 173   jQuery.deck('toggleGoTo')
 174
 175   Toggles between showing and hiding the Go To Slide form.
 176   */
 177   $.deck('extend', 'toggleGoTo', function() {
 178     var options = $.deck('getOptions');
 179     var hasGotoClass = $.deck('getContainer').hasClass(options.classes.goto);
 180     $.deck(hasGotoClass ? 'hideGoTo' : 'showGoTo');
 181   });
 182
 183   $document.bind('deck.init', function() {
 184     bindKeyEvents();
 185     populateDatalist();
 186     markRootSlides();
 187     handleFormSubmit();
 188   });
 189 })(jQuery);
 190