Attachment 126605 Details for Bug 28180 – Bug 28180: (follow-up) Updates to styling of lightbox controls

[patch] Bug 28180: (follow-up) Updates to styling of lightbox controls

Bug-28180-follow-up-Updates-to-styling-of-lightbox.patch (text/plain), 23.01 KB, created by Katrin Fischer on 2021-10-20 20:42:34 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Katrin Fischer

Created: 2021-10-20 20:42:34 UTC

Size: 23.01 KB

patch

obsolete

>From 0bcde321a8bd62073fcbed51a08d0c7d9945c061 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Mon, 10 May 2021 18:21:14 +0000
>Subject: [PATCH] Bug 28180: (follow-up) Updates to styling of lightbox
> controls
>
>This patch adds style changes like the ones made in Bug 28179. It also
>addresses a bug with the way the verify_images() function was firing.
>I've moved the function outside of document.ready() and added a call to
>it on window load, consistent with how it works in the staff client.
>
>I've removed a redundant call to verify_images() from the footer include
>file, opac-bottom.inc.
>
>The cosmetic changes replace the Chocolat image icons with new SVG
>assets based on Bootstrap Icons (https://icons.getbootstrap.com/). The
>color changes I think help the controls to be more visible.
>
>Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
>
>Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
>---
> koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss    |   7 +-
> .../bootstrap/en/includes/opac-bottom.inc          |   5 -
> .../opac-tmpl/bootstrap/en/modules/opac-detail.tt  | 261 +++++++++++----------
> koha-tmpl/opac-tmpl/bootstrap/js/localcovers.js    |   4 +-
> koha-tmpl/opac-tmpl/lib/Chocolat/css/chocolat.css  |  39 +++
> 5 files changed, 177 insertions(+), 139 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>index 8641bc276f..5aa01f45af 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>@@ -629,7 +629,7 @@ th {
>     }
> 
>     img {
>-        margin: 0 1em 1em 0;
>+        margin: 1em;
>     }
> }
> 
>@@ -640,9 +640,10 @@ th {
> }
> 
> #biblio-cover-slider {
>+    background-color: #fff;
>     border: 1px solid #b9d8d9;
>     border-radius: 3px;
>-    margin: 5px;
>+    margin: 0 1em .5em 0;
>     padding: 10px 5px 5px 5px;
>     min-height: 175px;
> }
>@@ -651,7 +652,7 @@ th {
>     background: #FFF url("../img/spinner-small.gif") center center no-repeat;
> 
>     .hint {
>-        font-size: 90%;
>+        font-size: 80%;
>         padding: .5em 0;
>     }
> 
>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 e4aaccf54a..86b835a52d 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
>@@ -205,11 +205,6 @@ $.widget.bridge('uitooltip', $.ui.tooltip);
>         var query_cgi = "[% query_cgi | html %]";
>     [% END %]
> 
>-    [% IF ( OPACAmazonCoverImages || SyndeticsCoverImages ) %]
>-        $(window).load(function() {
>-            verify_images();
>-         });
>-    [% END %]
>     $(".print-large").on("click",function(){
>         window.print();
>         return false;
>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 090f4634ab..79224de9ee 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
>@@ -129,7 +129,7 @@
>                                             <img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | url %][% bt_id | uri %]" />
>                                         </a>
>                                     [% END %]
>-                                    <div class="hint">Image from BakerTaylor</div>
>+                                    <div class="hint">Image from Baker &amp; Taylor</div>
>                                 </div>
>                             [% END %]
> 
>@@ -1388,6 +1388,137 @@
>             }
>         [% END # /IF OpacHighlightedWords %]
> 
>+        function verify_images() {
>+            // Loop over each container in the template which contains covers
>+            $(".cover-slider").each(function( index ){
>+                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 && $(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") == "syndetics-coverimg" ){
>+                                lightbox_descriptions.push("Image from Syndetics")
>+                            } else if( div.attr("id") == "googlejacket-coverimg" ){
>+                                lightbox_descriptions.push(_("Image from Google Books (<a href='%s'>see the original image</a>)").format($(img).data('link')));
>+                            } else if( div.attr("id") == "openlibrary-coverimg" ){
>+                                lightbox_descriptions.push(_("Image from OpenLibrary (<a href='%s'>see the original image</a>)").format($(img).data('link')));
>+                            } 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") == "bakertaylor-coverimg" ){
>+                                lightbox_descriptions.push(_("Image from Baker &amp; Taylor"));
>+                            } 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 {
>+                                lightbox_descriptions.push(_("Cover image source unknown"));
>+                            }
>+                        }
>+                    } else {
>+                        div.remove();
>+                    }
>+                });
>+
>+                // 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';
>+                    }
>+                }
>+            });
>+        } /* /verify_images */
>+
>+        $(window).load(function() {
>+            verify_images();
>+        });
>+
>         $(document).ready(function() {
> 
>             [% IF ( Koha.Preference('OPACDetailQRCode') ) %]
>@@ -1529,134 +1660,6 @@
>                 KOHA.OpenLibrary.GetCoverFromIsbn();
>             [% 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") == "syndetics-coverimg" ){
>-                                lightbox_descriptions.push("Image from Syndetics")
>-                            } else if( div.attr("id") == "googlejacket-coverimg" ){
>-                                lightbox_descriptions.push(_("Image from Google Jacket (<a href='%s'>see the original image</a>)").format($(img).data('link')));
>-                            } else if( div.attr("id") == "openlibrary-coverimg" ){
>-                                lightbox_descriptions.push(_("Image from OpenLibrary (<a href='%s'>see the original image</a>)").format($(img).data('link')));
>-                            } 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") == "bakertaylor-coverimg" ){
>-                                lightbox_descriptions.push(_("Image from Baker Taylor"));
>-                            } 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 {
>-                                lightbox_descriptins.push(_("Cover image source unknown"));
>-                            }
>-                        }
>-                    }
>-                });
>-
>-                // 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/localcovers.js b/koha-tmpl/opac-tmpl/bootstrap/js/localcovers.js
>index 2c501f7520..21ffaf872f 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/js/localcovers.js
>+++ b/koha-tmpl/opac-tmpl/bootstrap/js/localcovers.js
>@@ -22,7 +22,7 @@ KOHA.LocalCover = {
>             var mydiv = this;
>             var message = document.createElement("span");
>             $(message).attr("class","no-image");
>-            $(message).html(NO_LOCAL_JACKET);
>+            $(message).html( __("No cover image available") );
>             $(mydiv).parent().find('.no-image').remove();
>             $(mydiv).append(message);
>             var img = $("<img />").attr('src',
>@@ -51,7 +51,7 @@ KOHA.LocalCover = {
>             var imagenumber  = $(mydiv).data("imagenumber");
>             var biblionumber = $(mydiv).data("biblionumber");
>             $(message).attr("class","no-image");
>-            $(message).html(NO_LOCAL_JACKET);
>+            $(message).html( __("No cover image available") );
>             $(mydiv).parent().find('.no-image').remove();
>             $(mydiv).append(message);
>             var img = $("<img />").attr('src',
>diff --git a/koha-tmpl/opac-tmpl/lib/Chocolat/css/chocolat.css b/koha-tmpl/opac-tmpl/lib/Chocolat/css/chocolat.css
>index e5ad53cd1a..b3e5b621da 100644
>--- a/koha-tmpl/opac-tmpl/lib/Chocolat/css/chocolat.css
>+++ b/koha-tmpl/opac-tmpl/lib/Chocolat/css/chocolat.css
>@@ -228,3 +228,42 @@ body.chocolat-open > .chocolat-image-wrapper {
>     opacity: 0;
> }
> */
>+
>+/* Local chnages for Koha */
>+.chocolat-wrapper {
>+    z-index: 1035;
>+}
>+
>+.chocolat-wrapper .chocolat-left {
>+    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-left-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z' style='fill:%2377b50f;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
>+    background-size: 35px;
>+}
>+
>+.chocolat-wrapper .chocolat-right {
>+    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z' style='fill:%2377b50f;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
>+    background-size: 35px;
>+}
>+
>+.chocolat-wrapper .chocolat-close {
>+    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z' style='fill:%2377b50f;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
>+    background-size: 35px;
>+}
>+
>+.chocolat-wrapper .chocolat-bottom {
>+    background: rgba(0, 0, 0, 0.8);
>+}
>+
>+.chocolat-wrapper .chocolat-bottom a {
>+    color: #FFF;
>+    text-decoration: underline;
>+}
>+
>+.chocolat-wrapper .chocolat-fullscreen {
>+    width: 40px;
>+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='currentColor' class='bi bi-arrow-down-left-square' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M14.357 3.656a.692.692 0 00-.691-.692H2.263a.692.692 0 00-.691.692v8.303c0 .382.31.692.691.692h11.403c.382 0 .691-.31.691-.692zm-13.477 0c0-.764.62-1.383 1.383-1.383h11.403c.764 0 1.383.62 1.383 1.383v8.303c0 .764-.62 1.383-1.383 1.383H2.263C1.5 13.342.88 12.723.88 11.96z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' d='M14.357 8.151a.692.692 0 00-.691-.692h-5.88a.692.692 0 00-.69.692v3.808c0 .382.309.692.69.692h5.88c.382 0 .691-.31.691-.692zm-7.954 0c0-.764.62-1.384 1.384-1.384h5.879c.764 0 1.383.62 1.383 1.384v3.808c0 .764-.62 1.383-1.383 1.383h-5.88c-.763 0-1.383-.619-1.383-1.383z' fill='%23fff'/%3E%3C/svg%3E");
>+    background-position: 50% 50%;
>+    background-repeat: no-repeat;
>+    background-size: 25px;
>+}
>+
>+/* End local changes for Koha */
>-- 
>2.11.0

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