summaryrefslogtreecommitdiffstats
path: root/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.js
diff options
context:
space:
mode:
Diffstat (limited to 'doc/backends/deckjs/deck.js/extensions/goto/deck.goto.js')
-rw-r--r--doc/backends/deckjs/deck.js/extensions/goto/deck.goto.js190
1 files changed, 190 insertions, 0 deletions
diff --git a/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.js b/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.js
new file mode 100644
index 00000000..6a90f16c
--- /dev/null
+++ b/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.js
@@ -0,0 +1,190 @@
+/*!
+Deck JS - deck.goto
+Copyright (c) 2011-2014 Caleb Troughton
+Dual licensed under the MIT license.
+https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
+*/
+
+/*
+This module adds the necessary methods and key bindings to show and hide a form
+for jumping to any slide number/id in the deck (and processes that form
+accordingly). The form-showing state is indicated by the presence of a class on
+the deck container.
+*/
+(function($, undefined) {
+ var $document = $(document);
+ var rootCounter;
+
+ var bindKeyEvents = function() {
+ $document.unbind('keydown.deckgoto');
+ $document.bind('keydown.deckgoto', function(event) {
+ var key = $.deck('getOptions').keys.goto;
+ if (event.which === key || $.inArray(event.which, key) > -1) {
+ event.preventDefault();
+ $.deck('toggleGoTo');
+ }
+ });
+ };
+
+ var populateDatalist = function() {
+ var options = $.deck('getOptions');
+ var $datalist = $(options.selectors.gotoDatalist);
+
+ $.each($.deck('getSlides'), function(i, $slide) {
+ var id = $slide.attr('id');
+ if (id) {
+ $datalist.append('<option value="' + id + '">');
+ }
+ });
+ };
+
+ var markRootSlides = function() {
+ var options = $.deck('getOptions');
+ var slideTest = $.map([
+ options.classes.before,
+ options.classes.previous,
+ options.classes.current,
+ options.classes.next,
+ options.classes.after
+ ], function(el, i) {
+ return '.' + el;
+ }).join(', ');
+
+ rootCounter = 0;
+ $.each($.deck('getSlides'), function(i, $slide) {
+ var $parentSlides = $slide.parentsUntil(
+ options.selectors.container,
+ slideTest
+ );
+
+ if ($parentSlides.length) {
+ $slide.removeData('rootIndex');
+ }
+ else if (!options.countNested) {
+ ++rootCounter;
+ $slide.data('rootIndex', rootCounter);
+ }
+ });
+ };
+
+ var handleFormSubmit = function() {
+ var options = $.deck('getOptions');
+ var $form = $(options.selectors.gotoForm);
+
+ $form.unbind('submit.deckgoto');
+ $form.bind('submit.deckgoto', function(event) {
+ var $field = $(options.selectors.gotoInput);
+ var indexOrId = $field.val();
+ var index = parseInt(indexOrId, 10);
+
+ if (!options.countNested) {
+ if (!isNaN(index) && index >= rootCounter) {
+ return false;
+ }
+ $.each($.deck('getSlides'), function(i, $slide) {
+ if ($slide.data('rootIndex') === index) {
+ index = i + 1;
+ return false;
+ }
+ });
+ }
+
+ $.deck('go', isNaN(index) ? indexOrId : index - 1);
+ $.deck('hideGoTo');
+ $field.val('');
+ event.preventDefault();
+ });
+ };
+
+ /*
+ Extends defaults/options.
+
+ options.classes.goto
+ This class is added to the deck container when showing the Go To Slide
+ form.
+
+ options.selectors.gotoDatalist
+ The element that matches this selector is the datalist element that will
+ be populated with options for each of the slide ids. In browsers that
+ support the datalist element, this provides a drop list of slide ids to
+ aid the user in selecting a slide.
+
+ options.selectors.gotoForm
+ The element that matches this selector is the form that is submitted
+ when a user hits enter after typing a slide number/id in the gotoInput
+ element.
+
+ options.selectors.gotoInput
+ The element that matches this selector is the text input field for
+ entering a slide number/id in the Go To Slide form.
+
+ options.keys.goto
+ The numeric keycode used to show the Go To Slide form.
+
+ options.countNested
+ If false, only top level slides will be counted when entering a
+ slide number.
+ */
+ $.extend(true, $.deck.defaults, {
+ classes: {
+ goto: 'deck-goto'
+ },
+
+ selectors: {
+ gotoDatalist: '#goto-datalist',
+ gotoForm: '.goto-form',
+ gotoInput: '#goto-slide'
+ },
+
+ keys: {
+ goto: 71 // g
+ },
+
+ countNested: true
+ });
+
+ /*
+ jQuery.deck('showGoTo')
+
+ Shows the Go To Slide form by adding the class specified by the goto class
+ option to the deck container.
+ */
+ $.deck('extend', 'showGoTo', function() {
+ var options = $.deck('getOptions');
+ $.deck('getContainer').addClass(options.classes.goto);
+ $(options.selectors.gotoForm).attr('aria-hidden', false);
+ $(options.selectors.gotoInput).focus();
+ });
+
+ /*
+ jQuery.deck('hideGoTo')
+
+ Hides the Go To Slide form by removing the class specified by the goto class
+ option from the deck container.
+ */
+ $.deck('extend', 'hideGoTo', function() {
+ var options = $.deck('getOptions');
+ $(options.selectors.gotoInput).blur();
+ $.deck('getContainer').removeClass(options.classes.goto);
+ $(options.selectors.gotoForm).attr('aria-hidden', true);
+ });
+
+ /*
+ jQuery.deck('toggleGoTo')
+
+ Toggles between showing and hiding the Go To Slide form.
+ */
+ $.deck('extend', 'toggleGoTo', function() {
+ var options = $.deck('getOptions');
+ var hasGotoClass = $.deck('getContainer').hasClass(options.classes.goto);
+ $.deck(hasGotoClass ? 'hideGoTo' : 'showGoTo');
+ });
+
+ $document.bind('deck.init', function() {
+ bindKeyEvents();
+ populateDatalist();
+ markRootSlides();
+ handleFormSubmit();
+ });
+})(jQuery);
+