From 4ccf515016cf7194388abf8fa4681ce35b1f9f5e Mon Sep 17 00:00:00 2001 From: setnes Date: Sat, 5 Dec 2015 11:31:43 -0600 Subject: [PATCH 1/2] 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 | 16 +++++++++++++--- js/galleryalbum.js | 19 +++++++++++-------- js/galleryimage.js | 26 ++++++++++++++++++++------ 3 files changed, 44 insertions(+), 17 deletions(-) diff --git a/css/styles.css b/css/styles.css index d4c9800c64..676fecfec4 100644 --- a/css/styles.css +++ b/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; } diff --git a/js/galleryalbum.js b/js/galleryalbum.js index 930936907f..fa301360a8 100644 --- a/js/galleryalbum.js +++ b/js/galleryalbum.js @@ -6,9 +6,12 @@ '
' + + ' ' + + '
' + + ' {{label}}' + + '
' + + ' ' + '
' + - ' {{label}}' + - ' ' + '
'; /** @@ -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) { diff --git a/js/galleryimage.js b/js/galleryimage.js index bdd21595dc..6acb6276c9 100644 --- a/js/galleryimage.js +++ b/js/galleryimage.js @@ -6,10 +6,11 @@ '
' + - ' ' + - ' {{label}}' + - ' ' + - ' ' + + ' ' + + '
' + + ' {{label}}' + + '
' + + ' ' + '
'; /** @@ -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. } }; From 6a1873ce2623bbd9659e4edf541b8c73bc6c8226 Mon Sep 17 00:00:00 2001 From: setnes Date: Mon, 18 Jan 2016 14:51:36 -0600 Subject: [PATCH 2/2] Made the anchor tag the outside container. --- css/styles.css | 2 +- js/galleryalbum.js | 18 +++++++++--------- js/galleryimage.js | 18 +++++++++--------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/css/styles.css b/css/styles.css index 676fecfec4..fa0ccedfd3 100644 --- a/css/styles.css +++ b/css/styles.css @@ -192,7 +192,7 @@ div.crumb.last a { opacity: .5; } -#gallery a.image > img { +#gallery .image-container .image > img { max-height: 200px; } diff --git a/js/galleryalbum.js b/js/galleryalbum.js index fa301360a8..50e78a359c 100644 --- a/js/galleryalbum.js +++ b/js/galleryalbum.js @@ -3,16 +3,16 @@ "use strict"; var TEMPLATE = - '
' + - ' ' + - '
' + - ' {{label}}' + - '
' + - ' ' + + 'data-width="{{targetWidth}}" data-height="{{targetHeight}}"' + + 'href="{{targetPath}}">' + + ' ' + + ' {{label}}' + + ' ' + '
' + - '
'; + ''; + /** * Creates a new album object to store information about an album @@ -247,7 +247,7 @@ */ _fillSubAlbum: function (targetHeight) { var album = this; - var a = this.domDef.children('a.album'); + var a = this.domDef; if (this.images.length >= 1) { this._getFourImages(this.images, targetHeight, a).fail(function (validImages) { diff --git a/js/galleryimage.js b/js/galleryimage.js index 6acb6276c9..0e1c02dc48 100644 --- a/js/galleryimage.js +++ b/js/galleryimage.js @@ -3,15 +3,15 @@ "use strict"; var TEMPLATE = - '
' + - ' ' + - '
' + - ' {{label}}' + - '
' + - ' ' + - '
'; + 'data-width="{{targetWidth}}" data-height="{{targetHeight}}"' + + 'href="{{targetPath}}">' + + ' ' + + ' {{label}}' + + ' ' + + ' ' + + ''; /** * Creates a new image object to store information about a media file @@ -114,7 +114,7 @@ 'height': targetHeight }); img.alt = encodeURI(image.path); - image.domDef.find('a.image').append(img); + image.domDef.find('.image').append(img); image.domDef.click(image._openImage.bind(image));