yogsototh/ycategories-presentation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update goto form to accept ids + add datalist

Browse source
This commit is contained in:
imakewebthings 2011-11-05 17:06:26 +08:00
parent 7f150a7e9e
commit 1b55cd8e48
8 changed files with 62 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
extensions/goto/deck.goto.css
View file

@ -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;
}

3
extensions/goto/deck.goto.html
View file

@ -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>

46
extensions/goto/deck.goto.js
View file

@ -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();

4
extensions/goto/deck.goto.scss
View file

@ -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;
}

5
introduction/index.html
View file

@ -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
View file

@ -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>

2
test/index.html
View file

@ -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... -->

26
test/spec.goto.js
View file

@ -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() {