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 @@ See Baker & Taylor [% END %] -
Image from BakerTaylor
+
Image from Baker & Taylor
[% 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 (see the original image)").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 (see the original image)").format($(img).data('link'))); + } else if( div.attr("id") == "openlibrary-coverimg" ){ + lightbox_descriptions.push(_("Image from OpenLibrary (see the original image)").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 (see the original image)").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 = $(""); + if( index == 0 ){ + // Set the first navigation link as active + $(covernav).addClass("nav-active"); + } + $(covernav).html(""); + $(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 (see the original image)").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 (see the original image)").format($(img).data('link'))); - } else if( div.attr("id") == "openlibrary-coverimg" ){ - lightbox_descriptions.push(_("Image from OpenLibrary (see the original image)").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 (see the original image)").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 = $(""); - if( index == 0 ){ - // Set the first navigation link as active - $(covernav).addClass("nav-active"); - } - $(covernav).html(""); - $(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 = $("").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 = $("").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 */