Merge pull request #123 from miripiruni/master

Fix for #99: Inner navigation should be also controlled by slide timing

shower.js

@@ -9,9 +9,164 @@ window.shower = window.shower || (function(window, document, undefined) {
 		body = document.body,
 		slides = [],
 		progress = [],
-		slideList = [],
 		timer,
-		isHistoryApiSupported = !!(window.history && history.pushState);
+		isHistoryApiSupported = !!(window.history && window.history.pushState);
+
+	/**
+	 * Slide constructor
+	 *
+	 * @param {Object} opts
+	 *	  @param {String} opts.id html id attribute or automaticaly assigned order number
+	 *	  @param {Number} opts.number slide number
+	 *	  @param {Boolean} opts.hasInnerNavigation
+	 *	  @param {Number} [opts.timing]
+	 *	  @param {Number} [opts.innerLength]
+	 *	  @param {Number} [opts.innerComplete = 0]
+	 * @constructor
+	 */
+	function Slide(opts) {
+		for (var prop in opts) {
+			if (opts.hasOwnProperty(prop)) {
+				this[prop] = opts[prop];
+			}
+		}
+	}
+
+	Slide.prototype = {
+		/**
+		 * Get slide number.
+		 * @returns {Number}
+		 */
+		getSlideNumber : function() {
+			return this.number;
+		},
+
+		isLast : function() {
+			return shower.slideList.length === this.number + 1
+		},
+
+		/**
+		 * Check if inner navigation is finished
+		 * @returns {boolean}
+		 */
+		isFinished : function() {
+			return this.innerComplete >= this.innerLength;
+		},
+
+		/**
+		 * Start inner navigation by timer or just switch slide after timer.
+		 * time sets in HTML: .slide[data-timing=MM:SS]
+		 * @returns {Object} Current slide
+		 */
+		process : function(shower) {
+			if (this.timing) {
+				this.initTimer(shower);
+				return this;
+			}
+
+			this.next(shower);
+			return this;
+		},
+
+		/**
+		 * Init timer for inner navigation or for just turn to next slide
+		 * @param shower
+		 * @returns {Object|Boolean} Current slide
+		 */
+		initTimer : function(shower) {
+			var slide = this;
+
+			if ( ! slide.timing) {
+				return false;
+			}
+
+			slide.stopTimer();
+
+			if (slide.isFinished()) {
+				timer = setInterval(function() {
+						slide.stopTimer();
+						shower.next();
+					},
+					slide.timing * (slide.innerLength || 1));
+			} else {
+				timer = setInterval(function() {
+						if (slide.isFinished()) {
+							slide.stopTimer();
+								shower.next();
+						} else {
+							slide.next(shower);
+						}
+					},
+					slide.timing);
+			}
+
+			return this;
+		},
+
+		/**
+		 * Stop timer
+		 */
+		stopTimer : function() {
+			if (timer) {
+				clearInterval(timer);
+				timer = false;
+			}
+
+			return this;
+		},
+
+		/**
+		 * Previous step of inner navigation or if current step is step 0 then go to previous slide.
+		 * @returns {Object|Boolean} Current slide
+		 */
+		prev : function(shower) {
+			var prevSteps,
+				slide = this;
+
+			if ( ! slide.hasInnerNavigation || slide.isFinished() || slide.innerComplete === 0) {
+				shower.prev();
+				return false;
+			}
+
+			prevSteps = document.getElementById(slide.id).querySelectorAll('.next.active');
+
+			if ( ! prevSteps || prevSteps.length < 1) {
+				return false;
+			}
+
+			if (slide.innerComplete > 0) {
+				slide.innerComplete--;
+				prevSteps[prevSteps.length - 1].classList.remove('active');
+			} else {
+				shower.prev();
+			}
+
+			return this;
+		},
+
+		/**
+		 * Next step of inner navigation or if current step is last then go to next slide.
+		 * @returns {Object|Boolean} Current slide
+		 */
+		next : function(shower) {
+			var nextSteps,
+				slide = this;
+
+			if ( ! slide.hasInnerNavigation || slide.isFinished()) {
+				shower.next();
+				return false;
+			}
+
+			if ( ! slide.isFinished()) {
+				nextSteps = document.getElementById(slide.id).querySelectorAll('.next:not(.active)');
+				nextSteps[0].classList.add('active');
+
+				slide.innerComplete++;
+			}
+
+			return this;
+		}
+	};
 
 	/**
 	* Get value at named data store for the DOM element.
@@ -24,19 +179,23 @@ window.shower = window.shower || (function(window, document, undefined) {
 		return element.dataset ? element.dataset[name] : element.getAttribute('data-' + name);
 	};
 
+
+	shower.slideList = [];
+
 	/**
-	 * Init
+	 * Shower initialization
-	 * @param {String} slideSelector
+	 * @param {String} [slideSelector]
-	 * @param {String} progressBarSelector
+	 * @param {String} [progressSelector]
 	 * @returns {Object} shower
 	 */
 	shower.init = function(slideSelector, progressSelector) {
+		var timing;
+
 		slideSelector = slideSelector || '.slide';
 		progressSelector = progressSelector || 'div.progress div';
 
 		slides = document.querySelectorAll(slideSelector);
 		progress = document.querySelector(progressSelector);
-		slideList = [];
 
 		for (var i = 0; i < slides.length; i++) {
 			// Slide IDs are optional. In case of missing ID we set it to the
@@ -45,16 +204,31 @@ window.shower = window.shower || (function(window, document, undefined) {
 				slides[i].id = i + 1;
 			}
 
-			slideList.push({
+			timing = shower._getData(slides[i], 'timing');
-				id: slides[i].id,
+
-				hasInnerNavigation: null !== slides[i].querySelector('.next'),
+			if (timing && timing.indexOf(':') !== -1) {
-				hasTiming: (shower._getData(slides[i], 'timing') && shower._getData(slides[i], 'timing').indexOf(':') !== -1)
+				timing = timing.split(':');
-			});
+				// Compute number of milliseconds from format "mm:ss"
+				timing = (parseInt(timing[0], 10) * 60 + parseInt(timing[1], 10)) * 1000;
+
+				if (slides[i].querySelector('.next')) {
+					timing = timing / (slides[i].querySelectorAll('.next').length + 1);
+				}
+			}
+
+			shower.slideList.push(new Slide({
+				id : slides[i].id,
+				number : i,
+				hasInnerNavigation : null !== slides[i].querySelector('.next'),
+				timing : parseInt(timing, 10) || undefined,
+				innerLength : slides[i].querySelectorAll('.next').length,
+				innerComplete : 0
+			}));
 		}
+
 		return shower;
 	};
 
-
 	/**
 	* Get slide scale value.
 	* @private
@@ -75,11 +249,15 @@ window.shower = window.shower || (function(window, document, undefined) {
 	* @returns {Boolean}
 	*/
 	shower._applyTransform = function(transform) {
-		body.style.WebkitTransform = transform;
+		[
-		body.style.MozTransform = transform;
+			'WebkitTransform',
-		body.style.msTransform = transform;
+			'MozTransform',
-		body.style.OTransform = transform;
+			'msTransform',
-		body.style.transform = transform;
+			'OTransform',
+			'transform'
+		].forEach(function(prop) {
+				body.style[prop] = transform;
+		});
 
 		return true;
 	};
@@ -109,8 +287,8 @@ window.shower = window.shower || (function(window, document, undefined) {
 			slideNumber = 0;
 		}
 
-		if (slideNumber >= slideList.length) {
+		if (slideNumber >= shower.slideList.length) {
-			slideNumber = slideList.length - 1;
+			slideNumber = shower.slideList.length - 1;
 		}
 
 		return slideNumber;
@@ -119,7 +297,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 	/**
 	* Get slide id from HTML element.
 	* @private
-	* @param {HTMLElement} el
+	* @param {Node} el
 	* @returns {String}
 	*/
 	shower._getSlideIdByEl = function(el) {
@@ -137,7 +315,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 	/**
 	* For touch devices: check if link is clicked.
 	*
-	* @TODO: add support for textareas/inputs/etc.
+	* @TODO: add support for textarea/input/etc.
 	*
 	* @private
 	* @param {HTMLElement} e
@@ -148,12 +326,12 @@ window.shower = window.shower || (function(window, document, undefined) {
 	};
 
 	/**
-	* Get slide number by slideId.
+	 * Get slide number by slideId.
-	* @param {String} slideId (HTML id or position in slideList)
+	 * @param {String} slideId
-	* @returns {Number}
+	 * @returns {Number}
-	*/
+	 */
 	shower.getSlideNumber = function(slideId) {
-		var i = slideList.length - 1,
+		var i = shower.slideList.length - 1,
 			slideNumber;
 
 		if (slideId === '') {
@@ -163,7 +341,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 		// As fast as you can ;-)
 		// http://jsperf.com/for-vs-foreach/46
 		for (; i >= 0; --i) {
-			if (slideId === slideList[i].id) {
+			if (slideId === shower.slideList[i].id) {
 				slideNumber = i;
 				break;
 			}
@@ -176,13 +354,19 @@ window.shower = window.shower || (function(window, document, undefined) {
 	* Go to slide number.
 	* @param {Number} slideNumber slide number (sic!). Attention: starts from zero.
 	* @param {Function} [callback] runs only if you not in List mode.
-	* @returns {Number}
+	* @returns {Number|Boolean}
 	*/
 	shower.go = function(slideNumber, callback) {
+		var slide;
+
 		if ( ! shower._isNumber(slideNumber)) {
 			throw new Error('Gimme slide number as Number, baby!');
 		}
 
+		if ( ! shower.slideList[slideNumber]) {
+			return false;
+		}
+
 		// Also triggers popstate and invoke shower.enter__Mode()
 		url.hash = shower.getSlideHash(slideNumber);
 
@@ -191,7 +375,10 @@ window.shower = window.shower || (function(window, document, undefined) {
 
 		if (shower.isSlideMode()) {
 			shower.showPresenterNotes(slideNumber);
-			shower.runInnerNavigation(slideNumber);
+			slide = shower.slideList[slideNumber];
+			if (slide.timing) {
+				slide.initTimer(shower);
+			}
 		}
 
 		if (typeof(callback) === 'function') {
@@ -203,87 +390,125 @@ window.shower = window.shower || (function(window, document, undefined) {
 
 	/**
 	* Show next slide or show next Inner navigation item.
-	* Returns false on a last slide, otherwise returns shown slide number.
+	* Returns false on a last slide, otherwise returns shower.
 	* @param {Function} [callback] runs only if shower.next() is successfully completed.
-	* @returns {Number|Boolean}
+	* @returns {Boolean}
 	*/
 	shower.next = function(callback) {
 		var currentSlideNumber = shower.getCurrentSlideNumber(),
-			ret = false;
+			nextSlide = shower.slideList[currentSlideNumber + 1];
 
-		// Only go to next slide if current slide have no inner
+		// If don't exist next slide
-		// navigation or inner navigation is fully shown
+		if (! nextSlide) {
-		// NOTE: But first of all check if there is no current slide
+			return false;
-		if (
-			(
-				-1 === currentSlideNumber ||
-				! slideList[currentSlideNumber].hasInnerNavigation ||
-				! shower.increaseInnerNavigation(currentSlideNumber)
-			) &&
-			// If exist next slide
-			(currentSlideNumber + 2) <= slideList.length
-		) {
-			shower.go(currentSlideNumber + 1);
-			// Slides starts from 0. So return next slide number.
-			ret = currentSlideNumber + 2;
 		}
 
+		shower.go(currentSlideNumber + 1);
+
+		if (typeof(callback) === 'function') {
+			callback();
+		}
+
+		return this;
+	};
+
+	/**
+	 *
+	 * @param {Function} [callback]
+	 */
+	shower._turnNextSlide = function(callback) {
+		var currentSlideNumber = shower.getCurrentSlideNumber(),
+			slide = shower.slideList[currentSlideNumber];
+
+
 		if (shower.isSlideMode()) {
-			shower.runInnerNavigation(currentSlideNumber + 1);
+			slide.stopTimer();
+			slide.next(shower);
+		} else {
+			shower.go(currentSlideNumber + 1);
 		}
 
 		if (typeof(callback) === 'function') {
 			callback();
 		}
 
-		return ret;
+		return;
 	};
 
 	/**
 	* Show previous slide. Returns false on a first slide, otherwise returns shown slide number.
 	* @param {Function} [callback] runs only if shower.previous() is successfully completed.
-	* @returns {Number|Boolean}
+	* @returns {Boolean}
 	*/
-	shower.previous = function(callback) {
+	shower.prev = shower.previous = function(callback) {
-		var currentSlideNumber = shower.getCurrentSlideNumber(),
+		var currentSlideNumber = shower.getCurrentSlideNumber();
-			ret = false;
 
-		// slides starts from 0
+		// Slides starts from 0
-		if (currentSlideNumber > 0) {
+		if (currentSlideNumber < 1) {
-			ret = currentSlideNumber;
+			return false;
-			shower.go(currentSlideNumber - 1);
-
-			if (typeof(callback) === 'function') {
-				callback();
-			}
 		}
 
-		return ret;
+		shower.go(currentSlideNumber - 1);
+
+		if (typeof(callback) === 'function') {
+			callback();
+		}
+
+		return true;
+	};
+
+	/**
+	 * Show previous slide. Returns false on a first slide, otherwise returns shown slide number.
+	 * @param {Function} [callback] runs only if shower.previous() is successfully completed.
+	 * @returns {Boolean}
+	 */
+	shower._turnPreviousSlide = function(callback) {
+		var currentSlideNumber = shower.getCurrentSlideNumber(),
+			slide = shower.slideList[currentSlideNumber];
+
+		slide.stopTimer();
+
+		if (shower.isSlideMode()) {
+			slide.prev(shower);
+		} else {
+			shower.go(currentSlideNumber - 1);
+		}
+
+		if (typeof(callback) === 'function') {
+			callback();
+		}
+
+		return true;
 	};
 
 	/**
 	* Show first slide.
 	* @param {Function} [callback]
-	* @returns {Number}
 	*/
 	shower.first = function(callback) {
+		var slide = shower.slideList[shower.getCurrentSlideNumber()];
+
+		slide.timing && slide.stopTimer();
+		shower.go(0);
+
 		if (typeof(callback) === 'function') {
 			callback();
 		}
-
-		return shower.go(0);
 	};
 
 	/**
 	* Show last slide.
 	* @param {Function} [callback]
-	* @returns {Number}
 	*/
 	shower.last = function(callback) {
+		var slide = shower.slideList[shower.getCurrentSlideNumber()];
+
+		slide.timing && slide.stopTimer();
+		shower.go(shower.slideList.length - 1);
+
 		if (typeof(callback) === 'function') {
 			callback();
 		}
-		return shower.go(slideList.length - 1);
 	};
 
 	/**
@@ -318,6 +543,8 @@ window.shower = window.shower || (function(window, document, undefined) {
 	* @returns {Boolean}
 	*/
 	shower.enterListMode = function(callback) {
+		var currentSlideNumber;
+
 		// Anyway: change body class (@TODO: refactoring)
 		body.classList.remove('full');
 		body.classList.add('list');
@@ -328,9 +555,9 @@ window.shower = window.shower || (function(window, document, undefined) {
 			return false;
 		}
 
-		var currentSlideNumber = shower.getCurrentSlideNumber();
+		currentSlideNumber = shower.getCurrentSlideNumber();
 
-		clearTimeout(timer);
+		shower.slideList[currentSlideNumber].stopTimer();
 
 		if (shower.isSlideMode() && isHistoryApiSupported) {
 			history.pushState(null, null, url.pathname + shower.getSlideHash(currentSlideNumber));
@@ -371,13 +598,13 @@ window.shower = window.shower || (function(window, document, undefined) {
 	* @returns {Number}
 	*/
 	shower.getCurrentSlideNumber = function() {
-		var i = slideList.length - 1,
+		var i = shower.slideList.length - 1,
 			currentSlideId = url.hash.substr(1);
 
 		// As fast as you can ;-)
 		// http://jsperf.com/for-vs-foreach/46
 		for (; i >= 0; --i) {
-			if (currentSlideId === slideList[i].id) {
+			if (currentSlideId === shower.slideList[i].id) {
 				return i;
 			}
 		}
@@ -407,8 +634,8 @@ window.shower = window.shower || (function(window, document, undefined) {
 			return ret;
 		}
 
-		if (slideList[slideNumber]) {
+		if (shower.slideList[slideNumber]) {
-			currentSlide = document.getElementById(slideList[slideNumber].id);
+			currentSlide = document.getElementById(shower.slideList[slideNumber].id);
 			window.scrollTo(0, currentSlide.offsetTop);
 			ret = true;
 		} else {
@@ -449,7 +676,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 			throw new Error('Gimme slide number as Number, baby!');
 		}
 
-		progress.style.width = (100 / (slideList.length - 1) * shower._normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
+		progress.style.width = (100 / (shower.slideList.length - 1) * shower._normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
 
 		return true;
 	};
@@ -462,7 +689,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 	shower.updateActiveAndVisitedSlides = function(slideNumber) {
 		var i,
 			slide,
-			l = slideList.length;
+			l = shower.slideList.length;
 
 		slideNumber = shower._normalizeSlideNumber(slideNumber);
 
@@ -471,7 +698,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 		}
 
 		for (i = 0; i < l; ++i) {
-			slide = document.getElementById(slideList[i].id);
+			slide = document.getElementById(shower.slideList[i].id);
 
 			if (i < slideNumber) {
 				slide.classList.remove('active');
@@ -507,8 +734,8 @@ window.shower = window.shower || (function(window, document, undefined) {
 		if (window.console) {
 			slideNumber = shower._normalizeSlideNumber(slideNumber);
 
-			var slideId = slideList[slideNumber].id,
+			var slideId = shower.slideList[slideNumber].id,
-				nextSlideId = slideList[slideNumber + 1] ? slideList[slideNumber + 1].id : null,
+				nextSlideId = shower.slideList[slideNumber + 1] ? shower.slideList[slideNumber + 1].id : null,
 				notes = document.getElementById(slideId).querySelector('footer');
 
 			if (notes && notes.innerHTML) {
@@ -539,63 +766,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 
 		slideNumber = shower._normalizeSlideNumber(slideNumber);
 
-		return '#' + slideList[slideNumber].id;
+		return '#' + shower.slideList[slideNumber].id;
-	};
-
-	/**
-	* Run slide show if presented.
-	* @param {Number} slideNumber
-	* @returns {Boolean}
-	*/
-	shower.runInnerNavigation = function(slideNumber) {
-		if ( ! shower._isNumber(slideNumber)) {
-			throw new Error('Gimme slide number as Number, baby!');
-		}
-
-		slideNumber = shower._normalizeSlideNumber(slideNumber);
-
-		clearTimeout(timer);
-
-		if (slideList[slideNumber].hasTiming) {
-			// Compute number of milliseconds from format "X:Y", where X is
-			// number of minutes, and Y is number of seconds
-			var timing = shower._getData(document.getElementById(slideList[slideNumber].id), 'timing').split(':');
-			timing = parseInt(timing[0], 10) * 60 * 1000 + parseInt(timing[1], 10) * 1000;
-
-			timer = setTimeout(function() {
-					shower.next();
-				},
-				timing);
-		}
-
-		return true;
-	};
-
-	/**
-	* Increases inner navigation by adding 'active' class to next inactive inner navigation item
-	* @param {Number} slideNumber
-	* @returns {Boolean}
-	*/
-	shower.increaseInnerNavigation = function(slideNumber) {
-		var nextNodes,
-			node;
-
-		if ( ! shower._isNumber(slideNumber)) {
-			throw new Error('Gimme slide number as Number, baby!');
-		}
-
-		// If inner navigation in this slide
-		if (slideList[slideNumber].hasInnerNavigation) {
-			nextNodes = document.getElementById(slideList[slideNumber].id).querySelectorAll('.next:not(.active)');
-
-			if (0 !== nextNodes.length) {
-				node = nextNodes[0];
-				node.classList.add('active');
-				return true;
-			}
-		}
-
-		return false;
 	};
 
 	// Event handlers
@@ -622,24 +793,31 @@ window.shower = window.shower || (function(window, document, undefined) {
 	}, false);
 
 	document.addEventListener('keydown', function(e) {
+		var currentSlideNumber,
+			slide;
+
 		// Shortcut for alt, ctrl and meta keys
 		if (e.altKey || e.ctrlKey || e.metaKey) { return; }
 
-		var currentSlideNumber = shower.getCurrentSlideNumber(),
+		currentSlideNumber = shower.getCurrentSlideNumber();
-			isInnerNavCompleted = true;
+		slide = shower.slideList[currentSlideNumber];
 
 		switch (e.which) {
 			case 116: // F5
 				e.preventDefault();
 
 				if (shower.isListMode()) {
-					var slideNumber = e.shiftKey ? currentSlideNumber : 0;
+					var slideNumber = e.shiftKey ? currentSlideNumber : 0,
+						slide;
 
 					// Warning: go must be before enterSlideMode.
 					// Otherwise there is a bug in Chrome
 					shower.go(slideNumber);
 					shower.enterSlideMode();
 					shower.showPresenterNotes(slideNumber);
+
+					slide = shower.slideList[currentSlideNumber];
+					slide.timing && slide.initTimer(shower);
 				} else {
 					shower.enterListMode();
 				}
@@ -650,7 +828,10 @@ window.shower = window.shower || (function(window, document, undefined) {
 					e.preventDefault();
 					shower.enterSlideMode();
 					shower.showPresenterNotes(currentSlideNumber);
-					shower.runInnerNavigation(currentSlideNumber);
+
+					if (slide.timing) {
+						slide.initTimer(shower);
+					}
 				}
 			break;
 
@@ -667,7 +848,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 			case 72: // H
 			case 75: // K
 				e.preventDefault();
-				shower.previous();
+				shower._turnPreviousSlide();
 			break;
 
 			case 34: // PgDown
@@ -676,7 +857,7 @@ window.shower = window.shower || (function(window, document, undefined) {
 			case 76: // L
 			case 74: // J
 				e.preventDefault();
-				shower.next();
+				shower._turnNextSlide();
 			break;
 
 			case 36: // Home
@@ -686,13 +867,14 @@ window.shower = window.shower || (function(window, document, undefined) {
 
 			case 35: // End
 				e.preventDefault();
+
 				shower.last();
 			break;
 
 			case 9: // Tab = +1; Shift + Tab = -1
 			case 32: // Space = +1; Shift + Space = -1
 				e.preventDefault();
-				shower[e.shiftKey ? 'previous' : 'next']();
+				shower[e.shiftKey ? '_turnPreviousSlide' : '_turnNextSlide']();
 			break;
 
 			default:
@@ -703,7 +885,8 @@ window.shower = window.shower || (function(window, document, undefined) {
 	shower.init();
 
 	document.addEventListener('click', function(e) {
-		var slideNumber = shower.getSlideNumber(shower._getSlideIdByEl(e.target));
+		var slideNumber = shower.getSlideNumber(shower._getSlideIdByEl(e.target)),
+			slide;
 
 		// Click on slide in List mode
 		if (shower.isListMode() && shower._getSlideIdByEl(e.target)) {
@@ -712,24 +895,41 @@ window.shower = window.shower || (function(window, document, undefined) {
 			shower.go(slideNumber);
 			shower.enterSlideMode();
 			shower.showPresenterNotes(slideNumber);
+
+			slide = shower.slideList[slideNumber];
+			if (slide.timing) {
+				slide.initTimer(shower);
+			}
 		}
 	}, false);
 
 	document.addEventListener('touchstart', function(e) {
+		var slideNumber = shower.getSlideNumber(shower._getSlideIdByEl(e.target)),
+			slide,
+			x;
+
 		if (shower._getSlideIdByEl(e.target)) {
 			if (shower.isSlideMode() && ! shower._checkInteractiveElement(e)) {
-				var x = e.touches[0].pageX;
+				x = e.touches[0].pageX;
 
 				if (x > window.innerWidth / 2) {
-					shower.next();
+                    shower._turnNextSlide();
 				} else {
-					shower.previous();
+                    shower._turnPreviousSlide();
 				}
 			}
 
 			if (shower.isListMode()) {
+				// Warning: go must be before enterSlideMode.
+				// Otherwise there is a bug in Chrome
 				shower.go(shower.getSlideNumber(shower._getSlideIdByEl(e.target)));
 				shower.enterSlideMode();
+				shower.showPresenterNotes(slideNumber);
+
+				slide = shower.slideList[slideNumber];
+				if (slide.timing) {
+					slide.initTimer(shower);
+				}
 			}
 		}