Add inner navigation feature. Closes #4.

en.htm

@@ -172,7 +172,7 @@
 
 		After activation of the last child pressing next
 		button will turn next slide.
-
+	-->
 	<div class="slide" id="InnerNavigation"><div>
 		<section>
 			<header>
@@ -185,7 +185,7 @@
 				<li>Erase your hard drive.</li>
 			</ol>
 		</section>
-	</div></div> -->
+	</div></div>
 	<div class="slide" id="ThankYou"><div>
 		<section>
 			<header>
@@ -208,4 +208,4 @@
 	<script src="scripts/script.js"></script>
 	<!-- Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/ -->
 </body>
-</html>
\ No newline at end of file
+</html>

scripts/script.js

@@ -4,11 +4,13 @@
 		slides = document.querySelectorAll('div.slide'),
 		progress = document.querySelector('div.progress div'),
 		slideList = [],
-		l = slides.length,
-		i;
+		l = slides.length, i;
 
 	for (i = 0; i < l; i++) {
-		slideList.push(slides[i].id);
+		slideList.push({
+			id: slides[i].id,
+			hasInnerNavigation: null !== slides[i].querySelector('.inner')
+		});
 	}
 
 	function getTransform() {
@@ -28,62 +30,73 @@
 		body.style.transform = transform;
 	}
 
-	function enterSingleSlideMode() {
+	function enterSlideMode() {
 		body.className = 'full';
 		applyTransform(getTransform());
 	}
 
-	function enterSlideListMode() {
+	function enterListMode() {
 		body.className = 'list';
 		applyTransform('none');
 	}
 
 	function getCurrentSlideNumber() {
-		return slideList.indexOf(url.hash.substr(1));
+		var i, l = slideList.length,
+			currentSlideId = url.hash.substr(1);
+
+		for (i = 0; i < l; ++i) {
+			if (currentSlideId === slideList[i].id) {
+				return i;
+			}
+		}
+
+		return -1;
 	}
 
 	function scrollToCurrentSlide() {
-		var current_slide = document.getElementById(slideList[getCurrentSlideNumber()]);
+		var currentSlide = document.getElementById(
+			slideList[getCurrentSlideNumber()].id
+		);
 
-		if (null != current_slide) {
-			window.scrollTo(0, current_slide.offsetTop);
+		if (null != currentSlide) {
+			window.scrollTo(0, currentSlide.offsetTop);
 		}
 	}
 
-	function isSlideListMode() {
+	function isListMode() {
 		return 'full' !== url.search.substr(1);
 	}
 
-	function normalizeSlideNumber(slide_number) {
-		if (0 > slide_number) {
+	function normalizeSlideNumber(slideNumber) {
+		if (0 > slideNumber) {
 			return slideList.length - 1;
-		} else if (slideList.length <= slide_number) {
+		} else if (slideList.length <= slideNumber) {
 			return 0;
 		} else {
-			return slide_number;
+			return slideNumber;
 		}
 	}
 
-	function updateProgress(slide_number) {
-		if (!progress) return;
-		progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slide_number)).toFixed(2) + '%';
+	function updateProgress(slideNumber) {
+		if (null === progress) { return; }
+		progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
 	}
 
-	function getSlideHashByNumber(slide_number) {
-		return '#' + slideList[normalizeSlideNumber(slide_number)];
+	function getSlideHash(slideNumber) {
+		return '#' + slideList[normalizeSlideNumber(slideNumber)].id;
 	}
 
-	function goToSlide(slide_number) {
-		url.hash = getSlideHashByNumber(slide_number);
+	function goToSlide(slideNumber) {
+		url.hash = getSlideHash(slideNumber);
 
-		if (!isSlideListMode()) {
-			updateProgress(slide_number);
+		if (!isListMode()) {
+			updateProgress(slideNumber);
 		}
 	}
 
 	function getContainingSlideId(el) {
 		var node = el;
-		while ('BODY' !== node.nodeName) {
+		while ('BODY' !== node.nodeName && 'HTML' !== node.nodeName) {
 			if (-1 !== node.className.indexOf('slide')) {
 				return node.id;
 			} else {
@@ -93,82 +106,115 @@
 
 		return '';
 	}
-	
+
 	function dispatchSingleSlideMode(e) {
 		var slideId = getContainingSlideId(e.target);
 
-		if ('' !== slideId && isSlideListMode()) {
+		if ('' !== slideId && isListMode()) {
 			e.preventDefault();
-			
+
 			// NOTE: we should update hash to get things work properly
 			url.hash = '#' + slideId;
 			history.replaceState(null, null, url.pathname + '?full#' + slideId);
-			enterSingleSlideMode();
-			
+			enterSlideMode();
+
 			updateProgress(getCurrentSlideNumber());
 		}
 	}
 
+	// Increases inner navigation by adding 'active' class to next inactive
+	// inner navigation item.
+	function increaseInnerNavigation(slideNumber) {
+		// Shortcut for slides without inner navigation
+		if (true !== slideList[slideNumber].hasInnerNavigation) { return -1; }
+
+		var activeNodes = document.querySelectorAll(getSlideHash(slideNumber) + ' .active'),
+			// NOTE: we assume there is no other elements in inner navigation
+			node = activeNodes[activeNodes.length - 1].nextElementSibling;
+
+		if (null !== node) {
+			node.classList.add('active');
+			// NOTE: 'auto-added' class is used in resetInnerNavigation - to
+			// overcome problems with manually added 'active' class.
+			node.classList.add('auto-added');
+
+			return activeNodes.length + 1;
+		} else {
+			return -1;
+		}
+	}
+
+	// Resets inner navigation by removing 'active' class from all previously
+	// activated elements.
+	function resetInnerNavigation(slideNumber) {
+		// Shortcut for slides without inner navigation
+		if (true !== slideList[slideNumber].hasInnerNavigation) { return; }
+
+		var activeNodes = document.querySelectorAll(
+				getSlideHash(slideNumber) + ' .active.auto-added'
+			),
+			i = 0, l;
+
+		for (l = activeNodes.length; i < l; i++) {
+			activeNodes[i].classList.remove('active');
+			activeNodes[i].classList.remove('auto-added');
+		}
+	}
+
+	// Event handlers
+
 	window.addEventListener('DOMContentLoaded', function () {
-		if (!isSlideListMode()) {
-			// "?full" is present without slide hash so we should display first
+		if (!isListMode()) {
+			// "?full" is present without slide hash, so we should display first
 			// slide
-			if ( -1 === getCurrentSlideNumber() ) {
-				history.replaceState(null, null, url.pathname + '?full' + getSlideHashByNumber( 0 ) );
+			if (-1 === getCurrentSlideNumber()) {
+				history.replaceState(null, null, url.pathname + '?full' + getSlideHash(0));
 			}
 
-			enterSingleSlideMode();
+			enterSlideMode();
 			updateProgress(getCurrentSlideNumber());
 		}
 	}, false);
 
 	window.addEventListener('popstate', function (e) {
-		if (isSlideListMode()) {
-			enterSlideListMode();
+		if (isListMode()) {
+			enterListMode();
 			scrollToCurrentSlide();
 		} else {
-			enterSingleSlideMode();
+			enterSlideMode();
 		}
 	}, false);
 
 	window.addEventListener('resize', function (e) {
-		if (!isSlideListMode()) {
+		if (!isListMode()) {
 			applyTransform(getTransform());
 		}
 	}, false);
 
 	document.addEventListener('keydown', function (e) {
-		if (e.altKey || e.ctrlKey || e.metaKey) return;
-		
-		var current_slide_number = getCurrentSlideNumber();
+		// Shortcut for alt, shift and meta keys
+		if (e.altKey || e.ctrlKey || e.metaKey) { return; }
 
-		switch (e.which) {
-			case 9: // Tab = +1; Shift + Tab = -1
-				if (isSlideListMode()) {
-					e.preventDefault();
-
-					current_slide_number += e.shiftKey ? -1 : 1;
-					url.hash = getSlideHashByNumber(current_slide_number);
-				}
-			break;
+		var currentSlideNumber = getCurrentSlideNumber();
 
+		switch (e.which) {
 			case 13: // Enter
-				if (isSlideListMode()) {
+				if (isListMode()) {
 					e.preventDefault();
 
-					history.pushState(null, null, url.pathname + '?full' + getSlideHashByNumber(current_slide_number));
-					enterSingleSlideMode();
+					history.pushState(null, null, url.pathname + '?full' + getSlideHash(currentSlideNumber));
+					enterSlideMode();
 
-					updateProgress(current_slide_number);
+					updateProgress(currentSlideNumber);
 				}
 			break;
 
 			case 27: // Esc
-				if (!isSlideListMode()) {
+				if (!isListMode()) {
 					e.preventDefault();
 
-					history.pushState(null, null, url.pathname + getSlideHashByNumber(current_slide_number));
-					enterSlideListMode();
+					history.pushState(null, null, url.pathname + getSlideHash(currentSlideNumber));
+					enterListMode();
 					scrollToCurrentSlide();
 				}
 			break;
@@ -180,8 +226,9 @@
 			case 75: // k
 				e.preventDefault();
 
-				current_slide_number--;
-				goToSlide(current_slide_number);
+				resetInnerNavigation(currentSlideNumber);
+				currentSlideNumber--;
+				goToSlide(currentSlideNumber);
 			break;
 
 			case 34: // PgDown
@@ -191,29 +238,41 @@
 			case 74: // j
 				e.preventDefault();
 
-				current_slide_number++;
-				goToSlide(current_slide_number);
+				// Only go to next slide if current slide have no inner
+				// navigation or inner navigation is fully shown
+				if (
+					!slideList[currentSlideNumber].hasInnerNavigation ||
+					-1 === increaseInnerNavigation(currentSlideNumber)
+				) {
+					resetInnerNavigation(currentSlideNumber);
+					currentSlideNumber++;
+					goToSlide(currentSlideNumber);
+				}
 			break;
 
 			case 36: // Home
 				e.preventDefault();
 
-				current_slide_number = 0;
-				goToSlide(current_slide_number);
+				resetInnerNavigation(currentSlideNumber);
+				currentSlideNumber = 0;
+				goToSlide(currentSlideNumber);
 			break;
 
 			case 35: // End
 				e.preventDefault();
 
-				current_slide_number = slideList.length - 1;
-				goToSlide(current_slide_number);
+				resetInnerNavigation(currentSlideNumber);
+				currentSlideNumber = slideList.length - 1;
+				goToSlide(currentSlideNumber);
 			break;
 
+			case 9: // Tab = +1; Shift + Tab = -1
 			case 32: // Space = +1; Shift + Space = -1
 				e.preventDefault();
 
-				current_slide_number += e.shiftKey ? -1 : 1;
-				goToSlide(current_slide_number);
+				resetInnerNavigation(currentSlideNumber);
+				currentSlideNumber += e.shiftKey ? -1 : 1;
+				goToSlide(currentSlideNumber);
 			break;
 
 			default:
@@ -225,20 +284,21 @@
 	document.addEventListener('touchend', dispatchSingleSlideMode, false);
 
 	document.addEventListener('touchstart', function (e) {
-		if(!isSlideListMode()) {
-			var current_slide_number = getCurrentSlideNumber(),
+		if (!isListMode()) {
+			var currentSlideNumber = getCurrentSlideNumber(),
 				x = e.touches[0].pageX;
-			if (x > window.innerWidth/2) {
-				current_slide_number++;
+			if (x > window.innerWidth / 2) {
+				currentSlideNumber++;
 			} else {
-				current_slide_number--;
+				currentSlideNumber--;
 			}
-			goToSlide(current_slide_number);
+
+			goToSlide(currentSlideNumber);
 		}
 	}, false);
 
 	document.addEventListener('touchmove', function (e) {
-		if(!isSlideListMode()) {
+		if (!isListMode()) {
 			e.preventDefault();
 		}
 	}, false);