From 1b55cd8e487d5433b3e8abaf7e214a75fca50c89 Mon Sep 17 00:00:00 2001
From: imakewebthings <caleb@imakewebthings.com>
Date: Sat, 5 Nov 2011 17:06:26 +0800
Subject: [PATCH] Update goto form to accept ids + add datalist

---
 extensions/goto/deck.goto.css  |  4 +--
 extensions/goto/deck.goto.html |  3 ++-
 extensions/goto/deck.goto.js   | 46 +++++++++++++++++++++++-----------
 extensions/goto/deck.goto.scss |  4 +--
 introduction/index.html        |  5 ++--
 test/fixtures/standard.html    |  3 ++-
 test/index.html                |  2 +-
 test/spec.goto.js              | 26 +++++++++++++------
 8 files changed, 62 insertions(+), 31 deletions(-)

diff --git a/extensions/goto/deck.goto.css b/extensions/goto/deck.goto.css
index 4d04dd2..108e4f9 100644
--- a/extensions/goto/deck.goto.css
+++ b/extensions/goto/deck.goto.css
@@ -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;
 }
diff --git a/extensions/goto/deck.goto.html b/extensions/goto/deck.goto.html
index da96066..e3b6a18 100644
--- a/extensions/goto/deck.goto.html
+++ b/extensions/goto/deck.goto.html
@@ -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>
\ No newline at end of file
diff --git a/extensions/goto/deck.goto.js b/extensions/goto/deck.goto.js
index 78e368f..21ec43c 100644
--- a/extensions/goto/deck.goto.js
+++ b/extensions/goto/deck.goto.js
@@ -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();
diff --git a/extensions/goto/deck.goto.scss b/extensions/goto/deck.goto.scss
index b25d13b..9170d5d 100755
--- a/extensions/goto/deck.goto.scss
+++ b/extensions/goto/deck.goto.scss
@@ -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;
 }
diff --git a/introduction/index.html b/introduction/index.html
index 2915418..0c4715a 100644
--- a/introduction/index.html
+++ b/introduction/index.html
@@ -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>
diff --git a/test/fixtures/standard.html b/test/fixtures/standard.html
index 1adc57f..b9e307b 100644
--- a/test/fixtures/standard.html
+++ b/test/fixtures/standard.html
@@ -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>
 	
diff --git a/test/index.html b/test/index.html
index a41e699..baf331f 100644
--- a/test/index.html
+++ b/test/index.html
@@ -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... -->
diff --git a/test/spec.goto.js b/test/spec.goto.js
index a65c927..b96bdc6 100644
--- a/test/spec.goto.js
+++ b/test/spec.goto.js
@@ -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() {