191 lines
5.1 KiB
JavaScript
191 lines
5.1 KiB
JavaScript
/*!
|
|
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);
|
|
|