Fix the slideshowcontrols callback and the spacebar event

Fix for #341

1 files changed, 16 insertions, 28 deletions

diff --git a/js/slideshowcontrols.js b/js/slideshowcontrols.js
index d9103ea6..b0df091c 100644
--- a/js/slideshowcontrols.js
+++ b/js/slideshowcontrols.js
@@ -40,6 +40,7 @@
 						return;
 					}
 					evt.stopPropagation();
+					evt.preventDefault();
 					handler.call(this);
 				}.bind(this);
 			}.bind(this);
@@ -58,7 +59,9 @@
 		update: function (images, autoPlay) {
 			this.images = images;
 			this.active = true;
+			this.showButton('.play');
 			this.hideButton('.pause');
+			this.playing = false;
 
 			// Hide prev/next and play buttons when we only have one pic
 			this.container.find('.next, .previous, .play').toggle(this.images.length > 1);
@@ -67,7 +70,7 @@
 			this.hideActionButtons();
 
 			if (autoPlay) {
-				this._play();
+				this._playPauseToggle();
 			}
 		},
 
@@ -159,8 +162,7 @@
 			this.container.children('.next').click(makeCallBack(this._next));
 			this.container.children('.previous').click(makeCallBack(this._previous));
 			this.container.children('.exit').click(makeCallBack(this._exit));
-			this.container.children('.pause').click(makeCallBack(this._pause));
-			this.container.children('.play').click(makeCallBack(this._play));
+			this.container.find('.pause, .play').click(makeCallBack(this._playPauseToggle));
 		},
 
 		/**
@@ -214,7 +216,7 @@
 				} else if (evt.keyCode === rightKey) {
 					makeCallBack(this._next)(evt);
 				} else if (evt.keyCode === spaceKey) {
-					makeCallBack(this._play)(evt);
+					makeCallBack(this._playPauseToggle)(evt);
 				} else if (evt.keyCode === fKey) {
 					makeCallBack(this._fullScreenToggle)(evt);
 				} else if (this._hasKeyBeenPressed(evt, zoomOutKeys)) {
@@ -272,34 +274,20 @@
 		},
 
 		/**
-		 * Starts the timed slideshow
+		 * Starts/stops autoplay and shows/hides the play/pause buttons
 		 *
 		 * @private
 		 */
-		_play: function () {
-			this.playing = true;
-			this._playPauseButtonToggle();
-			this._setTimeout();
-		},
-
-		/**
-		 * Pauses the timed slideshow
-		 *
-		 * @private
-		 */
-		_pause: function () {
-			this.playing = false;
-			this._playPauseButtonToggle();
-			this._clearTimeout();
-		},
+		_playPauseToggle: function () {
+			if (this.playing === true) {
+				this.playing = false;
+				this._clearTimeout();
+			} else {
+				this.playing = true;
+				this._setTimeout();
+			}
 
-		/**
-		 * Shows the play or pause button depending on circumstances
-		 *
-		 * @private
-		 */
-		_playPauseButtonToggle: function () {
-			this.container.find('.play, .pause').toggle();
+			this.container.find('.play, .pause').toggleClass('hidden');
 		},
 
 		/**