Set better initial states in deck.navigation, closes imakewebthings#55

Author: imakewebthings

extensions/navigation/deck.navigation.js

@@ -10,7 +10,24 @@ https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt
 This module adds clickable previous and next links to the deck.
 */
 (function($, deck, undefined) {
-	var $d = $(document);
+	var $d = $(document),
+	
+	/* Updates link hrefs, and disabled states if last/first slide */
+	updateButtons = function(e, from, to) {
+		var opts = $[deck]('getOptions'),
+		last = $[deck]('getSlides').length - 1,
+		prevSlide = $[deck]('getSlide', to - 1),
+		nextSlide = $[deck]('getSlide', to + 1),
+		prevId = prevSlide ? prevSlide.attr('id') : undefined;
+		nextId = nextSlide ? nextSlide.attr('id') : undefined;
+		
+		$(opts.selectors.previousLink)
+			.toggleClass(opts.classes.navDisabled, !to)
+			.attr('href', '#' + (prevId ? prevId : ''));
+		$(opts.selectors.nextLink)
+			.toggleClass(opts.classes.navDisabled, to === last)
+			.attr('href', '#' + (nextId ? nextId : ''));
+	};
 
 	/*
 	Extends defaults/options.
@@ -41,8 +58,9 @@ This module adds clickable previous and next links to the deck.
 
 	$d.bind('deck.init', function() {
 		var opts = $[deck]('getOptions'),
-		nextSlide = $[deck]('getSlide', 1),
-		nextId = nextSlide ? nextSlide.attr('id') : undefined;
+		slides = $[deck]('getSlides'),
+		$current = $[deck]('getSlide'),
+		ndx;
 
 		// Setup prev/next link events
 		$(opts.selectors.previousLink)
@@ -59,25 +77,15 @@ This module adds clickable previous and next links to the deck.
 			e.preventDefault();
 		});
 
-		// Start on first slide, previous link is disabled, set next link href
-		$(opts.selectors.previousLink).addClass(opts.classes.navDisabled);
-		$(opts.selectors.nextLink).attr('href', '#' + (nextId ? nextId : ''));
+		// Find where we started in the deck and set initial states
+		$.each(slides, function(i, $slide) {
+			if ($slide === $current) {
+				ndx = i;
+				return false;
+			}
+		});
+		updateButtons(null, ndx, ndx);
 	})
-	/* Updates link hrefs, and disabled states if last/first slide */
-	.bind('deck.change', function(e, from, to) {
-		var opts = $[deck]('getOptions'),
-		last = $[deck]('getSlides').length - 1,
-		prevSlide = $[deck]('getSlide', to - 1),
-		nextSlide = $[deck]('getSlide', to + 1),
-		prevId = prevSlide ? prevSlide.attr('id') : undefined;
-		nextId = nextSlide ? nextSlide.attr('id') : undefined;
-		
-		$(opts.selectors.previousLink)
-			.toggleClass(opts.classes.navDisabled, !to)
-			.attr('href', '#' + (prevId ? prevId : ''));
-		$(opts.selectors.nextLink)
-			.toggleClass(opts.classes.navDisabled, to === last)
-			.attr('href', '#' + (nextId ? nextId : ''));
-	});
+	.bind('deck.change', updateButtons);
 })(jQuery, 'deck');
 

test/spec.navigation.js

@@ -35,6 +35,12 @@ describe('Deck JS Navigation Buttons', function() {
 		expect($(defaults.selectors.nextLink)).toHaveClass(defaults.classes.navDisabled);
 	});
 
+	it('should not start disabled if deck initialized in the middle', function() {
+		$.deck('go', 2);
+		$.deck('.slide');
+		expect($(defaults.selectors.previousLink)).not.toHaveClass(defaults.classes.navDisabled);
+	});
+	
 	it('should update the links hrefs with real fragment ids', function() {
 		expect($(defaults.selectors.previousLink)).toHaveAttr('href', '#');
 		expect($(defaults.selectors.nextLink)).toHaveAttr('href', '#custom-id');