Click handlers and label gradients

Added click handler for images. (_openImage)
Renamed click handler for albums. (_openAlbum)
Cherry picked label gradients from #456.
Refactored links so they are not hidden by other elements.

css/styles.css

@@ -139,10 +139,16 @@ div.crumb.last a {
 
 #gallery .item-container .album-label,
 #gallery .item-container .image-label {
-	background: rgba(0, 0, 0, 0.4);
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	transition: opacity 200ms linear;
+	opacity: 1;
+	background-image: linear-gradient(rgba(0,0,0,0) 65%,rgba(0,0,0,0.35));
 }
 
-#gallery .item-container .image-label .title {
+#gallery .item-container .image-label .title,
+#gallery .item-container .album-label .title {
 	display: inline-block;
 	color: #fff;
 	text-align: center;
@@ -152,9 +158,13 @@ div.crumb.last a {
 	overflow-x: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	left: 0;
+	bottom: 10px;
+	position: absolute;
 }
 
-#gallery .item-container .image-label .title:hover {
+#gallery .item-container .image-label .title:hover,
+#gallery .item-container .album-label .title:hover {
 	overflow: visible;
 	white-space: normal;
 }

js/galleryalbum.js

@@ -6,9 +6,12 @@
 		'<div class="item-container album-container" ' +
 		'style="width: {{targetWidth}}px; height: {{targetHeight}}px;" ' +
 		'data-width="{{targetWidth}}" data-height="{{targetHeight}}">' +
+		'	<a class="album" href="{{targetPath}}">' +
+		'		<div class="album-label">' +
+		'			<span class="title">{{label}}</span>' +
+		'		</div>' +
+		'	</a>' +
 		'	<div class="album-loader loading"></div>' +
-		'	<span class="album-label">{{label}}</span>' +
-		'	<a class="album" href="{{targetPath}}"></a>' +
 		'</div>';
 
 	/**
@@ -59,10 +62,9 @@
 				album.domDef = $(template);
 				album.loader = album.domDef.children('.album-loader');
 				album.loader.hide();
-				album.domDef.click(album._showLoader.bind(album));
+				album.domDef.click(album._openAlbum.bind(album));
 
 				album._fillSubAlbum(targetHeight);
-
 				return album.domDef;
 			});
 		},
@@ -126,13 +128,14 @@
 		},
 
 		/**
-		 * Shows a loading animation
+		 * Call when the album is clicked on.
 		 *
 		 * @param event
 		 * @private
 		 */
-		_showLoader: function (event) {
+		_openAlbum: function (event) {
 			event.stopPropagation();
+			// show loading animation
 			this.loader.show();
 		},
 
@@ -222,7 +225,7 @@
 				// At least one thumbnail could not be retrieved
 				if (fail) {
 					// Clean up the album
-					a.children().remove();
+					a.children('div.cropped').remove();
 					// Send back the list of images which have thumbnails
 					def.reject(validImages);
 				}
@@ -244,7 +247,7 @@
 		 */
 		_fillSubAlbum: function (targetHeight) {
 			var album = this;
-			var a = this.domDef.children('a');
+			var a = this.domDef.children('a.album');
 
 			if (this.images.length >= 1) {
 				this._getFourImages(this.images, targetHeight, a).fail(function (validImages) {

js/galleryimage.js

@@ -6,10 +6,11 @@
 		'<div class="item-container image-container" ' +
 		'style="width: {{targetWidth}}px; height: {{targetHeight}}px;" ' +
 		'data-width="{{targetWidth}}" data-height="{{targetHeight}}">' +
-		'	<span class="image-label">' +
-		'		<span class="title">{{label}}</span>' +
-		'	</span>' +
-		'	<a class="image" href="{{targetPath}}" data-path="{{path}}"></a>' +
+		'	<a class="image" href="{{targetPath}}" data-path="{{path}}">' +
+		'		<div class="image-label">' +
+		'			<span class="title">{{label}}</span>' +
+		'		</div>' +
+		'	</a>' +
 		'</div>';
 
 	/**
@@ -113,7 +114,9 @@
 						'height': targetHeight
 					});
 					img.alt = encodeURI(image.path);
-					image.domDef.children('a').append(img);
+					image.domDef.find('a.image').append(img);
+
+					image.domDef.click(image._openImage.bind(image));
 
 					return image.domDef;
 				});
@@ -127,7 +130,7 @@
 		 * @private
 		 */
 		_addLabel: function () {
-			var imageLabel = this.domDef.children('.image-label');
+			var imageLabel = this.domDef.find('.image-label');
 			this.domDef.hover(function () {
 				imageLabel.slideToggle(OC.menuSpeed);
 			}, function () {
@@ -156,6 +159,17 @@
 			}
 
 			return url;
+		},
+
+		/**
+		 * Call when the image is clicked on.
+		 *
+		 * @param event
+		 * @private
+		 */
+		_openImage: function (event) {
+			event.stopPropagation();
+			// click function for future use.
 		}
 	};