Commit | Line | Data |
---|---|---|
d0f6c3cd AE |
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 |