Improve UX of slideshow menu

Also use the same show/hide mechanism used in gallery.js

2 files changed, 27 insertions, 12 deletions

diff --git a/js/slideshow.js b/js/slideshow.js
index f4c35f6a..75bd3451 100644
--- a/js/slideshow.js
+++ b/js/slideshow.js
@@ -108,7 +108,7 @@
 			return this.loadImage(this.images[index]).then(function (img) {
 				this.spinner.stop(this.spinnerDiv);
 				this.container.css('background-position', '-10000px 0');
-				this.controls.showBackgroundToggle();
+				this.controls.showActionButtons();
 
 				// check if we moved along while we were loading
 				if (currentImageId === index) {
@@ -313,6 +313,7 @@
 		_hideImage: function () {
 			this.zoomablePreviewContainer.empty();
 			this.spinner.spin(this.spinnerDiv);
+			this.controls.hideActionButtons();
 		},
 
 		/**
diff --git a/js/slideshowcontrols.js b/js/slideshowcontrols.js
index 5e54146a..d9103ea6 100644
--- a/js/slideshowcontrols.js
+++ b/js/slideshowcontrols.js
@@ -63,8 +63,8 @@
 			// Hide prev/next and play buttons when we only have one pic
 			this.container.find('.next, .previous, .play').toggle(this.images.length > 1);
 
-			// Hide the toggle background button until we have something to show
-			this.hideButton('.changeBackground');
+			// Hide the action buttons until we have something to show
+			this.hideActionButtons();
 
 			if (autoPlay) {
 				this._play();
@@ -109,21 +109,26 @@
 		},
 
 		/**
-		 * Shows the background colour switcher, if activated in the configuration
+		 * Shows the action buttons
 		 */
-		showBackgroundToggle: function () {
-			if (this.backgroundToggle) {
-				this.showButton('.changeBackground');
-			}
+		showActionButtons: function () {
+			this._showBackgroundToggle();
+			this.showButton('.downloadImage');
+		},
+
+		/**
+		 * Hides the action buttons
+		 */
+		hideActionButtons: function () {
+			this.hideButton('.changeBackground');
+			this.hideButton('.downloadImage');
 		},
 
 		/**
 		 * Shows a button which has been hidden
 		 */
 		showButton: function (button) {
-			if (this.backgroundToggle) {
-				this.container.find(button).show();
-			}
+			this.container.find(button).removeClass('hidden');
 		},
 
 		/**
@@ -132,7 +137,7 @@
 		 * @param button
 		 */
 		hideButton: function (button) {
-			this.container.find(button).hide();
+			this.container.find(button).addClass('hidden');
 		},
 
 		/**
@@ -179,6 +184,15 @@
 		},
 
 		/**
+		 * Shows the background colour switcher, if activated in the configuration
+		 */
+		_showBackgroundToggle: function () {
+			if (this.backgroundToggle) {
+				this.showButton('.changeBackground');
+			}
+		},
+
+		/**
 		 * Sets up the key based controls
 		 *
 		 * @param {Function} makeCallBack