Update goto form to accept ids + add datalist
This commit is contained in:
parent
7f150a7e9e
commit
1b55cd8e48
8 changed files with 62 additions and 31 deletions
|
@ -4,7 +4,7 @@
|
|||
bottom: 10px;
|
||||
left: 50%;
|
||||
height: 1.75em;
|
||||
margin: 0 0 0 -7.125em;
|
||||
margin: 0 0 0 -9.125em;
|
||||
line-height: 1.75em;
|
||||
padding: 0.625em;
|
||||
display: none;
|
||||
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
|
||||
#goto-slide {
|
||||
width: 4.375em;
|
||||
width: 8.375em;
|
||||
margin: 0 0.625em;
|
||||
height: 1.4375em;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<!-- Place the following snippet at the bottom of the deck container. -->
|
||||
<form action="." method="get" class="goto-form">
|
||||
<label for="goto-slide">Go to slide:</label>
|
||||
<input type="number" name="slidenum" id="goto-slide">
|
||||
<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
|
||||
<datalist id="goto-datalist"></datalist>
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
|
@ -8,7 +8,7 @@ https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt
|
|||
|
||||
/*
|
||||
This module adds the necessary methods and key bindings to show and hide a form
|
||||
for jumping to any slide number in the deck (and processes that 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.
|
||||
*/
|
||||
|
@ -22,18 +22,23 @@ the deck container.
|
|||
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 in the gotoInput
|
||||
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 in the Go To Slide form.
|
||||
entering a slide number/id in the Go To Slide form.
|
||||
|
||||
options.keys.goto
|
||||
The numeric keycode used to toggle between showing and hiding the Go To
|
||||
Slide form.
|
||||
The numeric keycode used to show the Go To Slide form.
|
||||
*/
|
||||
$.extend(true, $[deck].defaults, {
|
||||
classes: {
|
||||
|
@ -41,6 +46,7 @@ the deck container.
|
|||
},
|
||||
|
||||
selectors: {
|
||||
gotoDatalist: '#goto-datalist',
|
||||
gotoForm: '.goto-form',
|
||||
gotoInput: '#goto-slide'
|
||||
},
|
||||
|
@ -68,8 +74,8 @@ the deck container.
|
|||
option from the deck container.
|
||||
*/
|
||||
$[deck]('extend', 'hideGoTo', function() {
|
||||
$[deck]('getContainer').removeClass($[deck]('getOptions').classes.goto);
|
||||
$($[deck]('getOptions').selectors.gotoInput).blur();
|
||||
$[deck]('getContainer').removeClass($[deck]('getOptions').classes.goto);
|
||||
});
|
||||
|
||||
/*
|
||||
|
@ -82,33 +88,43 @@ the deck container.
|
|||
});
|
||||
|
||||
$d.bind('deck.init', function() {
|
||||
var opts = $[deck]('getOptions'),
|
||||
$datalist = $(opts.selectors.gotoDatalist);
|
||||
|
||||
// Bind key events
|
||||
$d.unbind('keydown.deckgoto').bind('keydown.deckgoto', function(e) {
|
||||
var key = $[deck]('getOptions').keys.goto;
|
||||
|
||||
if (e.which === key ||$.inArray(e.which, key) > -1) {
|
||||
if (e.which === key || $.inArray(e.which, key) > -1) {
|
||||
e.preventDefault();
|
||||
$[deck]('toggleGoTo');
|
||||
}
|
||||
});
|
||||
|
||||
/* Populate datalist */
|
||||
$.each($[deck]('getSlides'), function(i, $slide) {
|
||||
var id = $slide.attr('id');
|
||||
|
||||
if (id) {
|
||||
$datalist.append('<option value="' + id + '">');
|
||||
}
|
||||
});
|
||||
|
||||
// Process form submittal, go to the slide entered
|
||||
$($[deck]('getOptions').selectors.gotoForm)
|
||||
$(opts.selectors.gotoForm)
|
||||
.unbind('submit.deckgoto')
|
||||
.bind('submit.deckgoto', function(e) {
|
||||
var $field = ($($[deck]('getOptions').selectors.gotoInput)),
|
||||
var $field = $($[deck]('getOptions').selectors.gotoInput),
|
||||
i = parseInt($field.val(), 10);
|
||||
|
||||
if (!(isNaN(i) || i < 1 || i > $[deck]('getSlides').length)) {
|
||||
$[deck]('go', i - 1);
|
||||
$[deck]('hideGoTo');
|
||||
$field.val('');
|
||||
}
|
||||
$[deck]('go', isNaN(i) ? $field.val() : i - 1);
|
||||
$[deck]('hideGoTo');
|
||||
$field.val('');
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$($[deck]('getOptions').selectors.gotoInput)
|
||||
$(opts.selectors.gotoInput)
|
||||
.unbind('keydown.deckgoto')
|
||||
.bind('keydown.deckgoto', function(e) {
|
||||
e.stopPropagation();
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
bottom:10px;
|
||||
left:50%;
|
||||
height:1.75em;
|
||||
margin:0 0 0 -7.125em;
|
||||
margin:0 0 0 -9.125em;
|
||||
line-height:1.75em;
|
||||
padding:0.625em;
|
||||
display:none;
|
||||
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
#goto-slide {
|
||||
width:4.375em;
|
||||
width:8.375em;
|
||||
margin:0 0.625em;
|
||||
height:1.4375em;
|
||||
}
|
||||
|
|
|
@ -194,7 +194,8 @@
|
|||
|
||||
<form action="." method="get" class="goto-form">
|
||||
<label for="goto-slide">Go to slide:</label>
|
||||
<input type="number" name="slidenum" id="goto-slide">
|
||||
<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
|
||||
<datalist id="goto-datalist"></datalist>
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
|
||||
|
@ -207,11 +208,11 @@
|
|||
|
||||
<!-- Deck Core and extensions -->
|
||||
<script src="../core/deck.core.js"></script>
|
||||
<script src="../extensions/hash/deck.hash.js"></script>
|
||||
<script src="../extensions/menu/deck.menu.js"></script>
|
||||
<script src="../extensions/goto/deck.goto.js"></script>
|
||||
<script src="../extensions/status/deck.status.js"></script>
|
||||
<script src="../extensions/navigation/deck.navigation.js"></script>
|
||||
<script src="../extensions/hash/deck.hash.js"></script>
|
||||
|
||||
<!-- Specific to this page -->
|
||||
<script src="introduction.js"></script>
|
||||
|
|
3
test/fixtures/standard.html
vendored
3
test/fixtures/standard.html
vendored
|
@ -20,7 +20,8 @@
|
|||
|
||||
<form action="." method="get" class="goto-form">
|
||||
<label for="goto-slide">Go to slide:</label>
|
||||
<input type="number" name="slidenum" id="goto-slide" value="">
|
||||
<input type="number" name="slidenum" id="goto-slide" value="" list="goto-datalist">
|
||||
<datalist id="goto-datalist"></datalist>
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
|
||||
|
|
|
@ -12,11 +12,11 @@
|
|||
|
||||
<!-- include source files here... -->
|
||||
<script type="text/javascript" src="../core/deck.core.js"></script>
|
||||
<script type="text/javascript" src="../extensions/hash/deck.hash.js"></script>
|
||||
<script type="text/javascript" src="../extensions/menu/deck.menu.js"></script>
|
||||
<script type="text/javascript" src="../extensions/goto/deck.goto.js"></script>
|
||||
<script type="text/javascript" src="../extensions/status/deck.status.js"></script>
|
||||
<script type="text/javascript" src="../extensions/navigation/deck.navigation.js"></script>
|
||||
<script type="text/javascript" src="../extensions/hash/deck.hash.js"></script>
|
||||
<script type="text/javascript" src="../extensions/scale/deck.scale.js"></script>
|
||||
|
||||
<!-- include spec files here... -->
|
||||
|
|
|
@ -61,32 +61,44 @@ describe('Deck JS Quick Go-To', function() {
|
|||
expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto);
|
||||
});
|
||||
|
||||
it('should go to the slide entered', function() {
|
||||
it('should go to the slide number entered', function() {
|
||||
$(defaults.selectors.gotoInput).val('3');
|
||||
$(defaults.selectors.gotoForm).submit();
|
||||
expect($.deck('getSlide')).toEqual($.deck('getSlide'), 2);
|
||||
});
|
||||
|
||||
it('should go nowhere if a number is not entered', function() {
|
||||
$(defaults.selectors.gotoInput).val('');
|
||||
it('should go to the slide id entered', function() {
|
||||
$(defaults.selectors.gotoInput).val('custom-id');
|
||||
$(defaults.selectors.gotoForm).submit();
|
||||
expect($(defaults.selectors.container)).toHaveClass(defaults.classes.goto);
|
||||
expect($.deck('getSlide')).toEqual($.deck('getSlide'), 0);
|
||||
expect($.deck('getSlide')).toEqual($.deck('getSlide'), 1);
|
||||
});
|
||||
|
||||
it('should go nowhere if the number is negative', function() {
|
||||
$(defaults.selectors.gotoInput).val('-2');
|
||||
$(defaults.selectors.gotoForm).submit();
|
||||
expect($(defaults.selectors.container)).toHaveClass(defaults.classes.goto);
|
||||
expect($.deck('getSlide')).toEqual($.deck('getSlide'), 0);
|
||||
});
|
||||
|
||||
it('should go nowhere if the number is greater than the number of slides', function() {
|
||||
$(defaults.selectors.gotoInput).val('9');
|
||||
$(defaults.selectors.gotoForm).submit();
|
||||
expect($(defaults.selectors.container)).toHaveClass(defaults.classes.goto);
|
||||
expect($.deck('getSlide')).toEqual($.deck('getSlide'), 0);
|
||||
});
|
||||
|
||||
it('should go nowhere if the id does not exist', function() {
|
||||
$(defaults.selectors.gotoInput).val('do-not-exist');
|
||||
$(defaults.selectors.gotoForm).submit();
|
||||
expect($.deck('getSlide')).toEqual($.deck('getSlide'), 0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Datalist population', function() {
|
||||
it('should fill in options with all the slide ids', function() {
|
||||
var $dataOptions = $(defaults.selectors.gotoDatalist).find('option');
|
||||
expect($dataOptions.length).toEqual(5);
|
||||
expect($dataOptions.eq(0).attr('value')).toEqual('slide-0');
|
||||
expect($dataOptions.eq(1).attr('value')).toEqual('custom-id');
|
||||
});
|
||||
});
|
||||
|
||||
describe('key bindings', function() {
|
||||
|
|
Loading…
Reference in a new issue