extensions/goto/deck.goto.js

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