From 99d5b8b92840b0db6c5d6c956223cee0751fae50 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 31 Mar 2020 21:37:18 +0000 Subject: [PATCH] Bug 25031: Improve handling of multiple covers on the biblio detail page in the staff client This patch modifies the template, JS, and CSS for the bibliographic detail page in order to gracefully handle multiple cover images. The changed version loops through any cover images which might be embedded and checks that they are successfully loaded. Only successfully-loaded images are shown. Only the first image is shown, and the others can be "paged through" using generated navigation controls. To test, apply the page and rebuild the staff client CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). Enable multiple cover image services. The patch was developed with these services available: - Amazon - Local cover images (including multiple local cover images) - Coce (serving up Amazon, Google, and OpenLibrary images) - Images from the CustomCoverImages preference View a variety of titles and confirm that the cover images are displaying correctly, whether there be 0, 1, 2, or more covers available. Signed-off-by: Lucas Gass --- koha-tmpl/intranet-tmpl/js/coce.js | 78 +++++----- .../intranet-tmpl/prog/css/src/staff-global.scss | 37 +++++ .../intranet-tmpl/prog/en/includes/js_includes.inc | 3 - .../prog/en/modules/catalogue/detail.tt | 172 +++++++++++++++------ koha-tmpl/intranet-tmpl/prog/js/localcovers.js | 50 +++--- 5 files changed, 219 insertions(+), 121 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/js/coce.js b/koha-tmpl/intranet-tmpl/js/coce.js index 930d7c1647..f6815ac5bd 100644 --- a/koha-tmpl/intranet-tmpl/js/coce.js +++ b/koha-tmpl/intranet-tmpl/js/coce.js @@ -6,45 +6,45 @@ if (KOHA === undefined || !KOHA) { var KOHA = {}; } */ KOHA.coce = { - /** - * Search all: - *
- * or - *
- * and run a search with all collected isbns to coce cover service. - * The result is asynchronously returned, and used to append . - */ - getURL: function(host,provider,newWindow) { - var ids = []; - $("[id^=coce-thumbnail]").each(function(i) { - var id = $(this).attr("class"); // id=isbn - if ( id !== '' ) { ids.push(id); } - }); - if (ids.length == 0) return; - ids = ids.join(','); - var coceURL = host + '/cover?id=' + ids + '&provider=' + provider; - $.ajax({ - url: coceURL, - dataType: 'jsonp', - success: function(urlPerID){ - for (var id in urlPerID) { - var url = urlPerID[id]; - $("[id^=coce-thumbnail]."+id).each(function() { - var img = document.createElement("img"); - img.src = url; - img.classList.add("thumbnail"); - img.alt = "Cover image"; - img.onload = function(){ - // image dimensions can't be known until image has loaded - if( img.height == 1 && img.width == 1 ){ - $(this).remove(); + /** + * Search all: + *
+ * or + *
+ * and run a search with all collected isbns to coce cover service. + * The result is asynchronously returned, and used to append . + */ + getURL: function(host, provider, newWindow) { + var ids = []; + $("[id^=coce-thumbnail]").each(function(i) { + var id = $(this).attr("class"); // id=isbn + if (id !== '') { ids.push(id); } + }); + if (ids.length == 0) return; + ids = ids.join(','); + var coceURL = host + '/cover?id=' + ids + '&provider=' + provider; + $.ajax({ + url: coceURL, + dataType: 'jsonp', + success: function(urlPerID) { + for (var id in urlPerID) { + var url = urlPerID[id]; + $("[id^=coce-thumbnail]." + id).each(function() { + var img = document.createElement("img"); + img.src = url; + img.alt = "Cover image"; + img.onload = function() { + // image dimensions can't be known until image has loaded + if (img.height == 1 && img.width == 1) { + $(this).remove(); + } + }; + $(this).html(img); + }); } - } - $(this).html(img); - }); - } - } - }); - } + }, + + }); + } }; diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 277255888e..50ff01e905 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -2091,6 +2091,43 @@ li { } } +#cover-slides { + background: #FFF url("[% interface | html %]/[% theme | html %]/img/spinner-small.gif") center center no-repeat; + border: 1px solid #b9d8d9; + border-radius: 3px; + margin: 5px; + padding: 10px 5px 5px 5px; + min-height: 175px; + + .hint { + font-size: 90%; + padding: .5em 0; + } + + a { + &.nav-active { + &:link, + &:visited { + color: #85ca11; + } + } + } +} + +.cover-image { + display: none; + + img { + height: auto; + max-width: 100%; + } +} + +.cover-nav { + display: inline-block; + padding: 3px 4px; +} + .searchhighlightblob { font-size: 75%; font-style: italic; diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc index daf0dc7935..9fce02ac1a 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc @@ -57,9 +57,6 @@ [% IF LocalCoverImages %] [% Asset.js("js/localcovers.js") | $raw %] - [% END %] [% IF Koha.Preference('AudioAlerts') || AudioAlertsPage %] diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt index 1091b50059..38d1a612ee 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt @@ -137,36 +137,63 @@ [% END %] [% IF ( AmazonCoverImages || LocalCoverImages || AdlibrisEnabled || IntranetCoce || (Koha.Preference('CustomCoverImages') && Koha.Preference('CustomCoverImagesURL')) ) %] -
- [% IF ( LocalCoverImages ) %] -
- [% END %] - [% IF ( AdlibrisEnabled && normalized_isbn ) %] - Adlibris cover image - [% END %] - [% IF ( AmazonCoverImages && normalized_isbn) %] - - [% END %] - [% IF ( IntranetCoce && CoceProviders ) %] - [% coce_id = normalized_ean || normalized_isbn %] - - [% IF ( coce_id ) %] - - [% ELSE %] - No cover image available - [% END %] - - [% END %] +
+
+
+ [% IF ( LocalCoverImages ) %] + [% IF ( localimages.0 ) %] + [% FOREACH image IN localimages %] + [% IF image %] +
+ + Local cover image + +
Local cover image
+
+ [% END %] + [% END %] + [% END %] + [% END %] - [% IF Koha.Preference('CustomCoverImages') && Koha.Preference('CustomCoverImagesURL') %] - Cover image - [% END %] - [% END %] + [% IF ( AdlibrisEnabled && normalized_isbn ) %] +
+ + Adlibris cover image + +
Image from Adlibris
+
+ [% END %] + [% IF ( AmazonCoverImages && normalized_isbn) %] +
+ + Amazon cover image + +
Image from Amazon.com
+
+ [% END %] + [% IF ( IntranetCoce && CoceProviders && normalized_isbn ) %] + [% coce_id = normalized_ean || normalized_isbn %] +
+ [% IF ( coce_id ) %] + + [% ELSE %] + No cover image available + [% END %] +
Image from Coce
+
+ [% END %] -
+ [% IF Koha.Preference('CustomCoverImages') && Koha.Preference('CustomCoverImagesURL') %] +
+ + Custom cover image + +
Custom cover image
+
+ [% END %] +
+ + [% END %]
@@ -901,30 +928,73 @@ Note that permanent location is a code, and location may be an authval. var theme = "[% theme | html %]"; // http://www.oreillynet.com/pub/a/javascript/2003/10/21/amazonhacks.html function verify_images() { - $("#bookcoverimg").each(function(i){ - $(this).find('img').each(function(i){ - if ((this.src.indexOf('images.amazon.com') >= 0) || (this.src.indexOf('g-images.amazon.com') >=0) || (this.src.indexOf('images-na.ssl-images-amazon.com'))) { - w = this.width; - h = this.height; - if ((w == 1) || (h == 1)) { - $("#amazon-bookcoverimg").remove(); - } else if ((this.complete != null) && (!this.complete)) { - $("#amazon-bookcoverimg").remove(); + // Loop over each container in the template which contains covers + var coverSlides = $(".cover-image"); + coverSlides.each( function( index ){ + var div = $(this); + // Find the image in the container + var img = div.find("img")[0]; + if( $(img).length > 0 ){ + if( (img.complete != null) && (!img.complete) || img.naturalHeight == 0 ){ + // No image loaded in the container. Remove the slide + div.remove(); + } else { + // All slides start hidden. If this is the first one, show it. + if( index == 0 ){ + div.show(); + } + // Check if Amazon image is present + if ( div.attr("id") == "amazon-bookcoverimg" ) { + w = img.width; + h = img.height; + if ((w == 1) || (h == 1)) { + // Amazon returned single-pixel placeholder + // Remove the container + div.remove(); + } + } + if( div.attr("id") == "custom-img" ){ + if ( (img.complete != null) && (!img.complete) || img.naturalHeight == 0 ) { + // No image was loaded via the CustomCoverImages system preference + // Remove the container + div.remove(); + } + } + if( div.attr("id") == "coce-coverimg" ){ + // Identify which service's image is being loaded by Coce + if( $(img).attr("src").indexOf('amazon.com') >= 0 ){ + div.find(".hint").html(_("Coce image from Amazon.com")); + } else if( $(img).attr("src").indexOf('google.com') >= 0 ){ + div.find(".hint").html(_("Coce image from Google Books")); + } else if( $(img).attr("src").indexOf('openlibrary.org') >= 0 ){ + div.find(".hint").html(_("Coce image from Open Library")); + } + } + // If more that one slide is present, add a navigation link + // for activating the slide + if( coverSlides.length > 1 ){ + var covernav = $(""); + if( index == 0 ){ + // Set the first navigation link as active + $(covernav).addClass("nav-active"); + } + $(covernav).html(""); + $("#cover-slides").append( covernav ); } } - }); - if( $(this).find('img').length < 1 ){ - $(this).remove(); - $("#catalogue_detail_biblio").attr("class","col-xs-12"); } }); + if( $(".cover-image:visible").length < 1 ){ + $("#cover-slides").remove(); + } + $("#editions img").each(function(i){ - if ((this.src.indexOf('images.amazon.com') >= 0) || (this.src.indexOf('g-images.amazon.com') >=0) || (this.src.indexOf('images-na.ssl-images-amazon.com'))) { + if ( this.src.indexOf('amazon.com') >= 0 ) { w = this.width; h = this.height; if ((w == 1) || (h == 1)) { this.src = 'https://images-na.ssl-images-amazon.com/images/G/01/x-site/icons/no-img-sm.gif'; - } else if ((this.complete != null) && (!this.complete)) { + } else if ( (this.complete != null) && (!this.complete) || this.naturalHeight == 0 ) { this.src = 'https://images-na.ssl-images-amazon.com/images/G/01/x-site/icons/no-img-sm.gif'; } } @@ -1057,10 +1127,6 @@ Note that permanent location is a code, and location may be an authval. return false; }); - [%# inject no images message %] - [% IF LocalCoverImages %] - KOHA.LocalCover.GetCoverFromBibnumber(true); - [% END %] [% IF ( IntranetCoce && CoceProviders ) %] KOHA.coce.getURL('[% CoceHost | html %]', '[% CoceProviders | html %]'); [% END %] @@ -1093,11 +1159,19 @@ Note that permanent location is a code, and location may be an authval. link = $(this).attr("href"); openWindow(link,"Print spine label",400,400); }); + $("#cover-slides").on("click",".cover-nav", function(){ + // Adding click handler for cover image navigation links + var num = $(this).data("num"); + $(".cover-nav").removeClass("nav-active"); + $(this).addClass("nav-active"); + $(".cover-image").hide(); + $(".cover-image").eq( num ).show(); + }); }); - [% IF ( AmazonCoverImages || LocalCoverImages ) %]$(window).load(function() { + $(window).load(function() { verify_images(); - });[% END %] + }); [% IF ( Koha.Preference('NovelistSelectStaffEnabled') && Koha.Preference('NovelistSelectStaffProfile') && ( normalized_isbn || normalized_upc ) ) %] diff --git a/koha-tmpl/intranet-tmpl/prog/js/localcovers.js b/koha-tmpl/intranet-tmpl/prog/js/localcovers.js index fe6aeac897..a25d7c73f4 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/localcovers.js +++ b/koha-tmpl/intranet-tmpl/prog/js/localcovers.js @@ -1,3 +1,5 @@ +/* global _ */ + if (typeof KOHA == "undefined" || !KOHA) { var KOHA = {}; } @@ -18,42 +20,30 @@ KOHA.LocalCover = { * olCallBack(). */ GetCoverFromBibnumber: function(uselink) { - $("div [id^=local-thumbnail]").each(function(i) { - var mydiv = this; - var message = document.createElement("span"); - $(message).attr("class","no-image"); - $(message).html(NO_LOCAL_JACKET); - $(mydiv).parent().find('.no-image').remove(); - $(mydiv).append(message); - var img = $("").attr('src', - '/cgi-bin/koha/catalogue/image.pl?thumbnail=1&biblionumber=' + $(mydiv).attr("class")) - .load(function () { - if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth <= 1) { - //IE HACK - try { - $(mydiv).remove(); - } - catch(err){ - } - } else { - if (uselink) { - var a = $("").attr('href', '/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=' + $(mydiv).attr("class")); - $(a).append(img); - $(mydiv).append(a); - } else { - $(mydiv).append(img); - } - $(mydiv).children('.no-image').remove(); - } - }); - }); + var mydiv = $("#local-thumbnail-preview"); + var biblionumber = mydiv.data("biblionumber"); + var img = document.createElement("img"); + img.src = "/cgi-bin/koha/catalogue/image.pl?thumbnail=1&biblionumber=" + biblionumber; + img.onload = function() { + // image dimensions can't be known until image has loaded + if ( (img.complete != null) && (!img.complete) ) { + mydiv.remove(); + } + }; + if (uselink) { + var a = $("").attr('href', '/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=' + $(mydiv).attr("class")); + $(a).append(img); + mydiv.append(a); + } else { + mydiv.append(img); + } }, LoadResultsCovers: function(){ $("div [id^=local-thumbnail]").each(function(i) { var mydiv = this; var message = document.createElement("span"); $(message).attr("class","no-image thumbnail"); - $(message).html(NO_LOCAL_JACKET); + $(message).html( _("No cover image available") ); $(mydiv).append(message); var img = $(""); img.attr('src','/cgi-bin/koha/catalogue/image.pl?thumbnail=1&biblionumber=' + $(mydiv).attr("class")) -- 2.11.0