Attachment 126507 Details for Bug 28180 – Bug 28180: Add a lightbox gallery to display cover images - detail page, OPAC interface

[patch] Bug 28180: Add a lightbox gallery to display cover images - detail page, OPAC interface

Bug-28180-Add-a-lightbox-gallery-to-display-cover-.patch (text/plain), 28.20 KB, created by Jonathan Druart on 2021-10-19 14:45:42 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Jonathan Druart

Created: 2021-10-19 14:45:42 UTC

Size: 28.20 KB

patch

obsolete

>From bb389eb6e84293ee8a10a0cac05f41567e77af3f Mon Sep 17 00:00:00 2001
>From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
>Date: Tue, 20 Apr 2021 09:26:43 +0200
>Subject: [PATCH] Bug 28180: Add a lightbox gallery to display cover images -
> detail page, OPAC interface
>MIME-Version: 1.0
>Content-Type: text/plain; charset=UTF-8
>Content-Transfer-Encoding: 8bit
>
>This patch is the OPAC version of
>  Bug 28179: Add a lightbox gallery to display cover images - detail page, staff interface
>
>But there were several difficulties as the staff and OPAC code diverged
>a lot.
>First we are going to apply the different enhancements that have been
>made staff-side:
>- Display all the local cover image on the bibliographic detail pages
>(before this patch only the first one was displayed)
>- The slider functionality added by bug 25031
>
>Test plan:
>All the cover images are affected, all the different sources will be
>tested.
>All the steps will be done on the same bibliographic record.
>1. Local cover images
> a. Turn on OPACLocalCoverImages and AllowMultipleCover
> b. Add several local cover images to a bibliographic record
> c. Add several local cover images to an item
> d. Click on an image and confirm that it is displayed in a gallery and
> you can navigate see all the images attached to the bibliographic
> record
> e. Same for items
>2. Adlibris
> a. Turn on AdlibrisCoversEnabled
> b. Edit the biliographic record and add an ISBN that will return a
> cover image for this service (9780670026623 for instance)
> c. Display the cover images in the gallery
> d. Note the link to the adlibris.com website at the bottom
>3. Amazon
> a. Turn on OPACAmazonCoverImages
> b. Display the cover images in the gallery
>4. Coce
> a. Turn on OpacCoce, set CoceHost to "http://coce.tamil.fr:8080"
> and select some values for CoceProviders.
> b. Display the cover images in the gallery
>5. Custom cover images
> a. Turn on OPACCustomCoverImages and set CustomCoverImagesURL to https://covers.openlibrary.org/b/isbn/{isbn}-M.jpg
> of anything else meaningful
> b. Display the cover images in the gallery
>
>QA Note: Other sources have been removed by this patch but will be
>re-added by follow-ups
>
>Sponsored-by: Gerhard Sondermann Dialog e.K. (presseplus.de, presseshop.at, presseshop.ch)
>
>Signed-off-by: Rasmus LeiÃner <rasmus.leissner@solutions-factory.de>
>---
> .../opac-tmpl/bootstrap/css/src/opac.scss     |  59 ++++-
> .../bootstrap/en/includes/opac-bottom.inc     |   5 -
> .../bootstrap/en/modules/opac-detail.tt       | 248 +++++++++++++-----
> koha-tmpl/opac-tmpl/bootstrap/js/coce.js      |  74 +++---
> .../opac-tmpl/bootstrap/js/localcovers.js     |   8 +-
> 5 files changed, 279 insertions(+), 115 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>index 746674515b0..24c9c4f7dc8 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>@@ -617,10 +617,11 @@ th {
>     width: 75px;
> }
> 
>-#bookcover {
>+.bookcover {
>     float: left;
>     margin: 0;
>     padding: 0;
>+    text-align: center;
> 
>     .no-image {
>         margin-bottom: 10px;
>@@ -638,6 +639,62 @@ th {
>     }
> }
> 
>+#biblio-cover-slider {
>+    border: 1px solid #b9d8d9;
>+    border-radius: 3px;
>+    margin: 5px;
>+    padding: 10px 5px 5px 5px;
>+    min-height: 175px;
>+}
>+
>+.cover-slides {
>+    background: #FFF url("../img/spinner-small.gif") center center no-repeat;
>+
>+    .hint {
>+        font-size: 90%;
>+        padding: .5em 0;
>+    }
>+
>+    a {
>+        &.nav-active {
>+            &:link,
>+            &:visited {
>+                color: #85ca11;
>+            }
>+        }
>+    }
>+}
>+
>+td {
>+    &.bookcover {
>+        background: #FFF url("../img/spinner-small.gif") center center no-repeat;
>+        min-width: 120px;
>+        text-align: center;
>+    }
>+
>+    .cover-slides {
>+        background: transparent none;
>+        border: 0;
>+        margin: 0;
>+        min-height: unset;
>+        padding: 0;
>+    }
>+}
>+
>+.cover-image {
>+    display: none;
>+
>+    img {
>+        height: auto;
>+        max-width: 100%;
>+    }
>+}
>+
>+.cover-nav {
>+    display: inline-block;
>+    padding: 3px 4px;
>+}
>+
> div {
>     &.required_label {
>         display: none;
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
>index e4aaccf54a5..2a3a33175f9 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
>@@ -262,11 +262,6 @@ $.widget.bridge('uitooltip', $.ui.tooltip);
> 
> [% IF OPACLocalCoverImages %]
>     [% Asset.js("js/localcovers.js") | $raw %]
>-    <script>
>-
>-    var NO_LOCAL_JACKET = _("No cover image available");
>-
>-    </script>
> [% END %]
> 
> [% IF ( BakerTaylorEnabled ) %]
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
>index 05266aa1ae7..70dc307b88c 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
>@@ -34,6 +34,7 @@
>     [% IF ( Koha.Preference('OPACShowMusicalInscripts') ) %]
>         [% Asset.css("lib/verovio/midiplayer.css") | $raw %]
>     [% END %]
>+    [% Asset.css("lib/Chocolat/css/chocolat.css") | $raw %]
> </head>
> [% BLOCK cssinclude %][% END %]
> [% INCLUDE 'bodytag.inc' bodyid='opac-detail' bodyclass='scrollto' %]
>@@ -56,67 +57,55 @@
>             <div class="col-lg-9">
>                 <div id="catalogue_detail_biblio" class="maincontent" data-biblionumber="[% biblio.biblionumber | html %]">
> 
>-                    <div id="bookcover">
>-                        [% IF ( biblio.title ) %]
>-                            [% img_title = biblio.title %]
>-                        [% ELSE %]
>-                            [% img_title = biblio.biblionumber %]
>-                        [% END %]
>+                    <div class="bookcover">
> 
>-                        [% IF ( OPACLocalCoverImages ) %]
>-                            <div title="[% img_title | html %]" class="[% biblio.biblionumber | html %]" id="local-thumbnail-preview"></div>
>-                        [% END %]
>-
>-                        [% IF ( OPACAmazonCoverImages ) %]
>-                            [% IF ( OPACURLOpenInNewWindow ) %]
>-                                <a href="http://www.amazon[% AmazonTld | uri %]/gp/reader/[% normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link" target="_blank" rel="noreferrer">
>-                            [% ELSE %]
>-                                <a href="http://www.amazon[% AmazonTld | uri %]/dp/[% normalized_isbn | uri %][% AmazonAssocTag | uri %]">
>+                        <div id="biblio-cover-slider" class="cover-slider">
>+                            [% IF ( OPACLocalCoverImages ) %]
>+                                [% IF localimages.count %]
>+                                    [% FOREACH image IN localimages %]
>+                                        <div class="cover-image local-coverimg">
>+                                            <a href="/cgi-bin/koha/opac-image.pl?imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
>+                                                <img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" data-link="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblionumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" />
>+                                            </a>
>+                                            <div class="hint">Local cover image</div>
>+                                        </div>
>+                                    [% END %]
>+                                [% END %]
>                             [% END %]
>-                            <img src="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | html %].01.MZZZZZZZ.jpg" alt="Cover image" /></a>
>-                        [% END %]
> 
>-                        [% IF ( SyndeticsEnabled && SyndeticsCoverImages ) %]
>-                            [% IF ( content_identifier_exists ) %]
>-                                <img src="https://secure.syndetics.com/index.aspx?isbn=[% normalized_isbn | html %]/[% SyndeticsCoverImageSize | html %].GIF&amp;client=[% SyndeticsClientCode | html %]&amp;type=xw10&amp;upc=[% normalized_upc | html %]&amp;oclc=[% normalized_oclc | html %]" alt="" class="thumbnail" />
>-                            [% ELSE %]
>-                                <span class="no-image">No cover image available</span>
>+                            [% IF ( OPACAmazonCoverImages && normalized_isbn) %]
>+                                <div class="cover-image" id="amazon-bookcoverimg">
>+                                    <a href="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | uri %].01.LZZZZZZZ.jpg" title="Amazon cover image">
>+                                        <img src="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | uri %].01.MZZZZZZZ.jpg" alt="Amazon cover image" data-link="http://www.amazon[% AmazonTld | uri %]/gp/reader/[% normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link"/>
>+                                    </a>
>+                                    <div class="hint">Image from Amazon.com</div>
>+                                </div>
>                             [% END %]
>-                        [% END %]
> 
>-                        [% IF ( GoogleJackets ) %]
>-                            <div title="[% img_title | html %]" class="[% normalized_isbn | html %]" id="gbs-thumbnail-preview"></div>
>-                        [% END %]
>-                        [% IF ( Koha.Preference('OpacCoce') && Koha.Preference('CoceProviders') ) %]
>-                            [% coce_id = normalized_ean || normalized_isbn | html %]
>-                            <div title="[% img_title | html %]" class="[% coce_id | html %]" id="coce-thumbnail-preview"></div>
>-                        [% END %]
>-                        [% IF OpenLibraryCovers %]
>-                            <div title="[% img_title | html %]" class="[% normalized_isbn | html %]" id="openlibrary-thumbnail-preview"></div>
>-                        [% END %]
>-                        [% bt_id = ( normalized_upc || normalized_isbn ) %]
>-                        [% IF ( BakerTaylorEnabled && bt_id ) %]
>-                            [% IF BakerTaylorBookstoreURL %]
>-                                [% IF ( OPACURLOpenInNewWindow ) %]
>-                                    <a href="https://[% BakerTaylorBookstoreURL | url %][% bt_id | url %]" target="_blank" rel="noreferrer"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" /></a>
>-                                [% ELSE %]
>-                                    <a href="https://[% BakerTaylorBookstoreURL | url %][% bt_id | url %]"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" /></a>
>-                                [% END %]
>-                            [% ELSE %]
>-                                <img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" />
>+                            [% IF ( Koha.Preference('OPACCoce') && Koha.Preference('CoceProviders') && normalized_isbn ) %]
>+                                [% coce_id = normalized_ean || normalized_isbn %]
>+                                <div class="cover-image" id="coce-coverimg">
>+                                    [% IF ( coce_id ) %]
>+                                        <a title="Image from Coce" class="[% coce_id | html %]" id="coce-thumbnail-preview"></a>
>+                                    [% END %]
>+                                    <div class="hint">Image from Coce</div>
>+                                </div>
>                             [% END %]
>-                        [% END %]
>-                        [% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]
>-                            [% SET custom_cover_image_url = biblio.custom_cover_image_url %]
>-                            [% IF custom_cover_image_url %]
>-                                [% IF ( OPACURLOpenInNewWindow ) %]
>-                                    <a class="custom_cover_image" href="[% custom_cover_image_url | url %]" target="_blank" rel="noreferrer"><img alt="Cover image" src="[% custom_cover_image_url | url %]" /></a>
>-                                [% ELSE %]
>-                                    <a class="custom_cover_image" href="[% custom_cover_image_url | url %]"><img alt="Cover image" src="[% custom_cover_image_url | url %]" /></a>
>+
>+                            [% IF Koha.Preference('OPACCustomCoverImages') && Koha.Preference('CustomCoverImagesURL') %]
>+                                [% SET custom_cover_image_url = biblio.custom_cover_image_url %]
>+                                [% IF custom_cover_image_url %]
>+                                    <div class="cover-image" id="custom-coverimg">
>+                                        <a class="custom_cover_image" href="[% custom_cover_image_url | url %]" title="Custom cover image">
>+                                            <img id="custom-img" alt="Custom cover image" src="[% custom_cover_image_url | url %]" />
>+                                        </a>
>+                                        <div class="hint">Custom cover image</div>
>+                                    </div>
>                                 [% END %]
>                             [% END %]
>-                        [% END %]
>-                    </div>
>+                        </div> 
>+
>+                    </div>
> 
>                     <abbr class="unapi-id" title="koha:biblionumber:[% biblio.biblionumber | html %]"></abbr>
>                     [% IF ( ocoins ) # COinS / Openurl %]
>@@ -868,7 +857,9 @@
>                             <div id="images">
>                                 <p>Click on an image to view it in the image viewer</p>
>                                 [% FOREACH image IN localimages %]
>-                                    <a class="localimage" href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblio.biblionumber | html %]&amp;imagenumber=[% image.imagenumber | html %]"><img alt="" src="/cgi-bin/koha/opac-image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | html %]" /></a>
>+                                    <a href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblio.biblionumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
>+                                        <img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" />
>+                                    </a>
>                                 [% END %]
>                             </div>
>                         [% END # / IF OPACLocalCoverImages && localimages.size %]
>@@ -1116,9 +1107,17 @@
> 
>                 [% IF Koha.Preference('OPACLocalCoverImages') && ( tab == 'holdings' && itemloop_has_images || tab == 'otherholdings' && otheritemloop_has_images ) %]
>                     <td class="cover">
>-                        [% FOR image IN ITEM_RESULT.cover_images %]
>-                            <div title="[% ITEM_RESULT.itemnumber | html %]" data-imagenumber="[% image.imagenumber | html %]" data-biblionumber="[% ITEM_RESULT.biblionumber | html %]" class="local-thumbnail-preview"></div>
>-                        [% END %]
>+                        <div class="bookcover">
>+                            <div class="cover-slider">
>+                                [% FOR image IN ITEM_RESULT.cover_images %]
>+                                    <div class="cover-image local-coverimg">
>+                                        <a href="/cgi-bin/koha/opac-image.pl?itemnumber=[% image.itemnumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
>+                                            <img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" />
>+                                        </a>
>+                                    </div>
>+                                [% END %]
>+                            </div>
>+                        </div>
>                     </td>
>                 [% END %]
> 
>@@ -1300,6 +1299,8 @@
>         [% Asset.js("lib/kjua/kjua.min.js") | $raw %]
>     [% END %]
> 
>+    [% Asset.js("lib/Chocolat/js/chocolat.js") | $raw %]
>+
>     [% IF ( Koha.Preference('OPACShowMusicalInscripts') ) %]
>         <script>
>             var interface = "[% interface | html %]";
>@@ -1474,22 +1475,131 @@
>                     $("#highlight_toggle_off").show().click(function() {highlightOff(); return false;});
>                 [% END %]
>             [% END %]
>-            [% IF ( GoogleJackets ) %]
>-                KOHA.Google.GetCoverFromIsbn([% covernewwindow | html %]);
>-            [% END %]
>+
>             [% IF ( Koha.Preference('OpacCoce') && Koha.Preference('CoceProviders') ) %]
>                 KOHA.coce.getURL('[% Koha.Preference('CoceHost') | html %]', '[% Koha.Preference('CoceProviders') | html %]',[% covernewwindow | html %]);
>             [% END %]
> 
>-            [% IF OpenLibraryCovers %]
>-                KOHA.OpenLibrary.GetCoverFromIsbn();
>-            [% END %]
>-            [% IF OPACLocalCoverImages %]
>-                KOHA.LocalCover.GetCoverFromBibnumber(true);
>-                [% IF itemloop_has_images OR oheritemloop_has_images %]
>-                    KOHA.LocalCover.GetCoverFromItemnumber(true);
>-                [% END %]
>-            [% END %]
>+        function verify_images() {
>+            // Loop over each container in the template which contains covers
>+            $(".cover-slider").each(function(){
>+                var lightbox_descriptions = [];
>+                $(this).find(".cover-image").each( function( index ){
>+                    var div = $(this);
>+                    // Find the image in the container
>+                    var img = div.find("img")[0];
>+                    if( $(img).length > 0 ){
>+                        var description = "";
>+                        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();
>+                                } else {
>+                                    lightbox_descriptions.push(_("Amazon cover image (<a href='%s'>see the original image</a>)").format($(img).data('link')));
>+                                }
>+                            } else if( div.attr("id") == "custom-coverimg" ){
>+                                if ( (img.complete != null) && (!img.complete) || img.naturalHeight == 0 ) {
>+                                    // No image was loaded via the CustomCoverImages system preference
>+                                    // Remove the container
>+                                    div.remove();
>+                                } else {
>+                                    lightbox_descriptions.push("Custom cover image");
>+                                }
>+                            } else if( div.attr("id") == "coce-coverimg" ){
>+                                // Identify which service's image is being loaded by Coce
>+                                var coce_description;
>+                                if( $(img).attr("src").indexOf('amazon.com') >= 0 ){
>+                                    coce_description = ("Coce image from Amazon.com");
>+                                } else if( $(img).attr("src").indexOf('google.com') >= 0 ){
>+                                    coce_description = _("Coce image from Google Books");
>+                                } else if( $(img).attr("src").indexOf('openlibrary.org') >= 0 ){
>+                                    coce_description = _("Coce image from Open Library");
>+                                }
>+                                div.find(".hint").html(coce_description);
>+                                lightbox_descriptions.push(coce_description);
>+                            } else if ( div.attr("id") == "adlibris-coverimg" ){
>+                                lightbox_descriptions.push(_("Image from Adlibris (<a href='%s'>see the original image</a>)").format($(img).data('link')));
>+                            } else if ( div.attr("class") == "cover-image local-coverimg" ) {
>+                                lightbox_descriptions.push(_("Local cover image"));
>+                            } else {
>+                                console.log("Source of the image cannot be guessed.")
>+                            }
>+                        }
>+                    }
>+                });
>+
>+                // Lightbox for cover images
>+                Chocolat(this.querySelectorAll('.cover-image a'), {
>+                    description: function(){
>+                        return lightbox_descriptions[this.settings.currentImageIndex];
>+                    }
>+                });
>+
>+            });
>+
>+            $(".cover-slider").each(function(){
>+                var coverSlide = this;
>+                var coverImages = $(this).find(".cover-image");
>+                if( coverImages.length > 1 ){
>+                    coverImages.each(function( index ){
>+                        // If more that one image is present, add a navigation link
>+                        // for activating the slide
>+                        var covernav = $("<a href=\"#\" data-num=\"" + index + "\" class=\"cover-nav\"></a>");
>+                        if( index == 0 ){
>+                            // Set the first navigation link as active
>+                            $(covernav).addClass("nav-active");
>+                        }
>+                        $(covernav).html("<i class=\"fa fa-circle\"></i>");
>+                        $(coverSlide).append( covernav );
>+                    });
>+                }
>+
>+                if( $(coverSlide).find(".cover-image:visible").length < 1 ){
>+                    $(coverSlide).remove();
>+                } else {
>+                    $(coverSlide).addClass("cover-slides");
>+                }
>+            });
>+
>+            $(".cover-slider").on("click",".cover-nav", function(e){
>+                e.preventDefault();
>+                var cover_slider = $(this).parent();
>+                // Adding click handler for cover image navigation links
>+                var num = $(this).data("num");
>+                $(cover_slider).find(".cover-nav").removeClass("nav-active");
>+                $(this).addClass("nav-active");
>+                $(cover_slider).find(".cover-image").hide();
>+                $(cover_slider).find(".cover-image").eq( num ).show();
>+            });
>+
>+            $("#editions img").each(function(i){
>+                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) || this.naturalHeight == 0 ) {
>+                        this.src = 'https://images-na.ssl-images-amazon.com/images/G/01/x-site/icons/no-img-sm.gif';
>+                    }
>+                }
>+            });
>+        }
>+
>+        $(window).load(function() {
>+            verify_images();
>+        });
>             [% IF ( NovelistSelectProfile && ( normalized_isbn || normalized_upc ) ) %]
>                 novSelect.loadContentForQuery(
>                     {
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/coce.js b/koha-tmpl/opac-tmpl/bootstrap/js/coce.js
>index 95669a0f2eb..a56ca61fefc 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/js/coce.js
>+++ b/koha-tmpl/opac-tmpl/bootstrap/js/coce.js
>@@ -6,38 +6,46 @@ if (KOHA === undefined || !KOHA) { var KOHA = {}; }
>  */
> KOHA.coce = {
> 
>-  /**
>-   * Search all:
>-   *    <div title="biblionumber" id="isbn" class="coce-thumbnail"></div>
>-   * or
>-   *    <div title="biblionumber" id="isbn" class="coce-thumbnail-preview"></div>
>-   * and run a search with all collected isbns to coce cover service.
>-   * The result is asynchronously returned, and used to append <img>.
>-   */
>-  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.title = url; //FIXME: to delete
>-            $(this).html(img);
>-         });
>-        }
>-      }
>-    });
>-  }
>+    /**
>+     * Search all:
>+     *    <div title="biblionumber" id="isbn" class="coce-thumbnail"></div>
>+     * or
>+     *    <div title="biblionumber" id="isbn" class="coce-thumbnail-preview"></div>
>+     * and run a search with all collected isbns to coce cover service.
>+     * The result is asynchronously returned, and used to append <img>.
>+     */
>+    getURL: function(host, provider) {
>+        var ids = [];
>+        $("[id^=coce-thumbnail]").each(function() {
>+            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).closest(".coce-coverimg").remove();
>+                            }
>+                        };
>+                        $(this).attr('href', url);
>+                        $(this).append(img);
>+                    });
>+                }
>+            },
>+
>+        });
>+    }
> 
> };
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/localcovers.js b/koha-tmpl/opac-tmpl/bootstrap/js/localcovers.js
>index 94c29e78a23..2c501f75208 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/js/localcovers.js
>+++ b/koha-tmpl/opac-tmpl/bootstrap/js/localcovers.js
>@@ -38,13 +38,7 @@ KOHA.LocalCover = {
>                         catch(err){
>                         };
>                     } else if (this.width > 1) { // don't show the silly 1px "no image" img
>-                        if (uselink) {
>-                            var a = $("<a />").attr('href', '/cgi-bin/koha/opac-imageviewer.pl?biblionumber=' + $(mydiv).attr("class"));
>-                            $(a).append(img);
>-                            $(mydiv).empty().append(a);
>-                        } else {
>-                            $(mydiv).empty().append(img);
>-                        }
>+                        $(mydiv).empty().append(img);
>                         $(mydiv).children('.no-image').remove();
>                     }
>                 })
>-- 
>2.25.1

Actions: View | Diff | Splinter Review

Attachments on bug 28180: 119918 | 119919 | 119920 | 119921 | 119922 | 119923 | 119924 | 120444 | 120445 | 120446 | 120447 | 120448 | 120449 | 120450 | 120464 | 120465 | 120466 | 120467 | 120468 | 120469 | 120470 | 120753 | 120754 | 120805 | 122783 | 122784 | 123178 | 123790 | 123792 | 123793 | 123794 | 124819 | 125666 | 126041 | 126042 | 126506 | 126507 | 126508 | 126509 | 126510 | 126511 | 126512 | 126513 | 126514 | 126515 | 126516 | 126517 | 126518 | 126519 | 126520 | 126596 | 126597 | 126598 | 126599 | 126600 | 126601 | 126602 | 126603 | 126604 | 126605 | 126606 | 126607 | 126608 | 126609 | 126610