Merge pull request #342 from owncloud/js-fixes

Js fixes

5 files changed, 76 insertions, 46 deletions

diff --git a/css/slideshow.css b/css/slideshow.css
index b8fe19c7..ad8d5ec1 100644
--- a/css/slideshow.css
+++ b/css/slideshow.css
@@ -47,7 +47,8 @@
 
 #slideshow.inactive > input,
 #slideshow.inactive > .progress,
-#slideshow.inactive > .menu input {
+#slideshow.inactive > .menu input,
+#slideshow.inactive > .name {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	filter: alpha(opacity=0);
 	opacity: 0;
@@ -84,7 +85,8 @@
 }
 
 #slideshow > input:hover,
-#slideshow > .menu input:hover {
+#slideshow > .menu input:hover,
+#slideshow.inactive > .name:hover {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
 	filter: alpha(opacity=75);
 	opacity: .75;
@@ -114,14 +116,8 @@
 	margin-top: -21px;
 }
 
-#slideshow > .play {
-}
-
-#slideshow > .pause {
-	display: none;
-}
-
 #slideshow > .progress {
+	z-index: 1100;
 	position: fixed;
 	bottom: 13px;
 	right: 13px;
@@ -158,6 +154,28 @@
 	margin-right: 10px;
 }
 
+#slideshow > .name {
+	position: fixed;
+	bottom: 18px;
+	z-index: 1099;
+	width: 100%;
+}
+
+#slideshow > .name .title {
+	padding: 0px 50px;
+	text-align: center;
+	color: #FFF;
+	font-size: 18px;
+	font-weight: bold;
+	line-height: normal;
+	text-overflow: ellipsis;
+	overflow:hidden;
+	white-space:nowrap;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	filter: alpha(opacity=50);
+	opacity: .5;
+}
+
 #slideshow > .notification {
 	margin: 0 auto;
 	max-width: 60%;
diff --git a/js/slideshow.js b/js/slideshow.js
index 75bd3451..0b28d79e 100644
--- a/js/slideshow.js
+++ b/js/slideshow.js
@@ -15,6 +15,7 @@
 		zoomablePreviewContainer: null,
 		controls: null,
 		imageCache: {},
+		/** {Image} */
 		currentImage: null,
 		errorLoadingImage: false,
 		onStop: null,
@@ -193,6 +194,19 @@
 		},
 
 		/**
+		 * Shows a new image in the slideshow and preloads the next in the list
+		 *
+		 * @param {number} current
+		 * @param {Object} next
+		 */
+		next: function (current, next) {
+			this.show(current).then(function () {
+				// Preloads the next image in the list
+				this.loadImage(next);
+			}.bind(this));
+		},
+
+		/**
 		 * Stops the slideshow
 		 */
 		stop: function () {
diff --git a/js/slideshowcontrols.js b/js/slideshowcontrols.js
index d9103ea6..33267aa9 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();
 			}
 		},
 
@@ -77,11 +80,13 @@
 		 * @param {number} currentImageId
 		 */
 		show: function (currentImageId) {
+			var currentImage = this.images[currentImageId];
 			this.current = currentImageId;
 			this.errorLoadingImage = false;
 			if (this.playing) {
 				this._setTimeout();
 			}
+			this._setName(currentImage.name);
 		},
 
 		/**
@@ -159,8 +164,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.children('.pause, .play').click(makeCallBack(this._playPauseToggle));
 		},
 
 		/**
@@ -214,7 +218,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 +276,20 @@
 		},
 
 		/**
-		 * Starts the timed slideshow
-		 *
-		 * @private
-		 */
-		_play: function () {
-			this.playing = true;
-			this._playPauseButtonToggle();
-			this._setTimeout();
-		},
-
-		/**
-		 * Pauses the timed slideshow
+		 * Starts/stops autoplay and shows/hides the play/pause buttons
 		 *
 		 * @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');
 		},
 
 		/**
@@ -334,16 +324,13 @@
 		},
 
 		/**
-		 * Shows a new image in the slideshow and preloads the next in the list
+		 * Asks the slideshow for the next image
 		 *
 		 * @param {number} imageId
 		 * @private
 		 */
 		_updateSlideshow: function (imageId) {
-			this.slideshow.show(this.current).then(function () {
-				// Preloads the next image in the list
-				this.slideshow.loadImage(this.images[imageId]);
-			}.bind(this));
+			this.slideshow.next(this.current, this.images[imageId]);
 		},
 
 		/**
@@ -409,8 +396,17 @@
 		 */
 		_toggleBackground: function () {
 			this.slideshow.toggleBackground();
-		}
+		},
 
+		/**
+		 * Shows the filename of the current image
+		 * @param {string} imageName
+		 * @private
+		 */
+		_setName: function (imageName) {
+			var nameElement = this.container.find('.title');
+			nameElement.text(imageName);
+		}
 	};
 
 	SlideShow.Controls = Controls;
diff --git a/templates/authenticate.php b/templates/authenticate.php
index e324cd49..ba1c6d4f 100644
--- a/templates/authenticate.php
+++ b/templates/authenticate.php
@@ -27,7 +27,7 @@ style('gallery', 'authenticate');
 			<img class="svg" id="password-icon" src="<?php print_unescaped(
 				image_path('', 'actions/password.svg')
 			); ?>" alt=""/>
-			<input type="submit" value="" class="svg icon-confirm"/>
+			<input type="submit" value="" class="svg icon-confirm input-button-inline"/>
 		</p>
 	</fieldset>
 </form>
diff --git a/templates/slideshow.php b/templates/slideshow.php
index 9c41321c..8442d904 100644
--- a/templates/slideshow.php
+++ b/templates/slideshow.php
@@ -1,15 +1,17 @@
 <div id="slideshow">
 	<input type="button" class="svg next icon-view-next"/>
 	<input type="button" class="svg play icon-view-play"/>
-	<input type="button" class="svg pause icon-view-pause"/>
+	<input type="button" class="svg pause icon-view-pause hidden"/>
 	<input type="button" class="svg previous icon-view-previous"/>
 	<input type="button" class="svg exit icon-view-close"/>
 
 	<div class="menu">
 		<input type="button" class="menuItem svg downloadImage icon-view-download hidden"/>
-		<input type="button" class="menuItem svg changeBackground icon-view-toggle-background hidden"/>
+		<input type="button"
+			   class="menuItem svg changeBackground icon-view-toggle-background hidden"/>
 	</div>
 	<div class="progress icon-view-pause"/>
+	<div class="name"><div class="title"></div></div>
 	<div class="notification"></div>
 	<div class="bigshotContainer"></div>
 </div>