Move the click handlers to the top level

Fixes #466 Thanks to @setnes for debugging this
owncloud · Feb 25, 2016 · 4c2a374 · 4c2a374
1 parent dcb79b7
commit 4c2a374
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 55 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -87,11 +87,11 @@ div.crumb.last a {
 	margin-top: 2px;
 }
 
-#gallery .row .item-container:first-child {
+#gallery .row a:first-child {
 	margin-left: 4px;
 }
 
-#gallery .row > .item-container {
+#gallery .row > a {
 	position: relative;
 	display: inline-block;
 	height: auto;
@@ -100,8 +100,13 @@ div.crumb.last a {
 	vertical-align: top;
 }
 
-#gallery .row > .album-container > .album-loader,
-#gallery .row > .image-container > .image-loader{
+#gallery .row > a .container {
+	-webkit-transition: all .2s ease-in-out;
+	transition: all .2s ease-in-out;
+}
+
+#gallery .row > a > .album-loader,
+#gallery .row > a > .image-loader {
 	position: absolute;
 	z-index: 11;
 	top: 0;
@@ -110,7 +115,7 @@ div.crumb.last a {
 	right: 0;
 }
 
-#gallery .item-container .album-label {
+#gallery .row > a > .album-label {
 	color: #fff;
 	position: absolute;
 	left: 0;
@@ -126,7 +131,7 @@ div.crumb.last a {
 	z-index: 11;
 }
 
-#gallery .item-container .image-label {
+#gallery .row > a > .image-label {
 	display: none;
 	position: absolute;
 	left: 0;
@@ -139,12 +144,12 @@ div.crumb.last a {
 	word-break: break-all;
 }
 
-#gallery .item-container .album-label,
-#gallery .item-container .image-label {
+#gallery .row > a > .album-label,
+#gallery .row > a > .image-label {
 	background: rgba(0, 0, 0, 0.4);
 }
 
-#gallery .item-container .image-label .title {
+#gallery .row > a > .image-label .title {
 	display: inline-block;
 	color: #fff;
 	text-align: center;
@@ -156,40 +161,26 @@ div.crumb.last a {
 	text-overflow: ellipsis;
 }
 
-#gallery .item-container .image-label .title:hover {
+#gallery .row > a > .image-label .title:hover {
 	overflow: visible;
 	white-space: normal;
 }
 
-#gallery a.album > img {
+#gallery .row > a > .album > img {
 	max-width: 200px;
 	max-height: 200px;
 	position: relative;
 	float: left;
 	margin: 1px;
 }
 
-#gallery a {
-	display: inline-block;
-	margin: 0;
-	position: relative;
-	vertical-align: top;
-	*display: inline;
-	zoom: 1;
-}
-
 /* make focus visible for keyboard users */
-#gallery a:focus,
-#gallery a.album:focus {
+#gallery .row > a:focus,
+#gallery .row > a > .album:focus {
 	opacity: .5;
 }
 
-#gallery a {
-	-webkit-transition: all .2s ease-in-out;
-	transition: all .2s ease-in-out;
-}
-
-#gallery a.image > img {
+#gallery .row > a .image > img {
 	max-height: 200px;
 }
 
@@ -200,16 +191,16 @@ div.crumb.last a {
 	transition: opacity 500ms;
 }
 
-#gallery a.album .cropped {
+#gallery .row > a .album .cropped {
 	position: relative;
 	float: left;
 	margin: 1px;
 	background-position: center;
 	background-size: cover;
 }
 
-#gallery a.album .icon-loading,
-#gallery .image-container .icon-loading {
+#gallery .row > a .album .icon-loading,
+#gallery .row > a .icon-loading {
 	margin: auto;
 	position: absolute;
 	top: 0;

diff --git a/js/galleryalbum.js b/js/galleryalbum.js
@@ -3,14 +3,14 @@
 	"use strict";
 
 	var TEMPLATE =
-		'<div class="item-container album-container" ' +
-		'style="width: {{targetWidth}}px; height: {{targetHeight}}px;" ' +
-		'data-width="{{targetWidth}}" data-height="{{targetHeight}}">' +
+		'<a style="width: {{targetWidth}}px; height: {{targetHeight}}px;" ' +
+		'data-width="{{targetWidth}}" data-height="{{targetHeight}}"' +
+		'href="{{targetPath}}">' +
 		'	<div class="album-loader loading"></div>' +
 		'	<span class="album-label">{{label}}</span>' +
-		'	<a class="album" href="{{targetPath}}" ' +
-		'	style="width: {{targetWidth}}px; height: {{targetHeight}}px;" ></a>' +
-		'</div>';
+		'	<div class="album container" style="width: {{targetWidth}}px; height: {{targetHeight}}px;" >' +
+		'	</div>' +
+		'</a>';
 
 	/**
 	 * Creates a new album object to store information about an album
@@ -70,7 +70,7 @@
 				this.domDef = $(albumElement);
 				this.loader = this.domDef.children('.album-loader');
 				this.loader.hide();
-				this.domDef.click(this._showLoader.bind(this));
+				this.domDef.click(this._openAlbum.bind(this));
 
 				// Define a if you don't want to set the style in the template
 				//a.width(targetHeight);
@@ -146,13 +146,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();
 		},
 
@@ -268,16 +269,16 @@
 		 */
 		_fillSubAlbum: function (targetHeight) {
 			var album = this;
-			var a = this.domDef.children('a');
+			var subAlbum = this.domDef.children('.album');
 
 			if (this.images.length >= 1) {
-				this._getFourImages(this.images, targetHeight, a).fail(function (validImages) {
+				this._getFourImages(this.images, targetHeight, subAlbum).fail(function (validImages) {
 					album.images = validImages;
-					album._fillSubAlbum(targetHeight, a);
+					album._fillSubAlbum(targetHeight, subAlbum);
 				});
 			} else {
 				var imageHolder = $('<div class="cropped">');
-				a.append(imageHolder);
+				subAlbum.append(imageHolder);
 				this._showFolder(targetHeight, imageHolder);
 			}
 		},

diff --git a/js/galleryimage.js b/js/galleryimage.js
@@ -3,14 +3,13 @@
 	"use strict";
 
 	var TEMPLATE =
-		'<div class="item-container image-container" ' +
-		'style="width: {{targetWidth}}px; height: {{targetHeight}}px;">' +
+		'<a style="width: {{targetWidth}}px; height: {{targetHeight}}px;" href="">' +
 		'	<div class="image-loader loading"></div>' +
 		'	<span class="image-label">' +
 		'		<span class="title">{{label}}</span>' +
 		'	</span>' +
-		'	<a class="image" href="" data-path="{{path}}"></a>' +
-		'</div>';
+		'	<div class="image container" data-path="{{path}}"></div>' +
+		'</a>';
 
 	/**
 	 * Creates a new image object to store information about a media file
@@ -119,17 +118,18 @@
 					.attr('data-height', targetHeight);
 
 				var url = this._getLink();
-				var a = this.domDef.children('a');
-				a.attr('href', url)
-					.attr('data-path', this.path);
+				var image = this.domDef.children('.image');
+				this.domDef.attr('href', url);
 
 				// This will stretch wide images to make them reach targetHeight
 				$(img).css({
 					'width': newWidth,
 					'height': targetHeight
 				});
 				img.alt = encodeURI(this.path);
-				a.append(img);
+				image.append(img);
+
+				this.domDef.click(this._openImage.bind(this));
 			}
 		},
 
@@ -168,6 +168,17 @@
 			}
 
 			return url;
+		},
+
+		/**
+		 * Call when the image is clicked on.
+		 *
+		 * @param event
+		 * @private
+		 */
+		_openImage: function (event) {
+			event.stopPropagation();
+			// click function for future use.
 		}
 	};
 

diff --git a/js/galleryrow.js b/js/galleryrow.js
@@ -85,12 +85,12 @@
 			this.domDef.width(this.width * scaleRatio);
 
 			// Resizes and scales all photowall elements to make them fit within the window's width
-			this.domDef.find('.item-container').each(function () {
+			this.domDef.find('a').each(function () {
 				// Necessary since DOM elements are not resized when CSS transform is used
 				$(this).css('width', $(this).data('width') * scaleRatio)
 					.css('height', $(this).data('height') * scaleRatio);
-				// This scales the anchors inside the item-container divs
-				$(this).children('a').css('transform-origin', 'left top')
+				// This scales the containers inside the anchors
+				$(this).children('.container').css('transform-origin', 'left top')
 					.css('-webkit-transform-origin', 'left top')
 					.css('-ms-transform-origin', 'left top')
 					.css('transform', 'scale(' + scaleRatio + ')')