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> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This commit is contained in:
parent
1273921e45
commit
00e09e3f96
5 changed files with 177 additions and 139 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@
|
|||
<img alt="See Baker & Taylor" src="[% BakerTaylorImageURL | url %][% bt_id | uri %]" />
|
||||
</a>
|
||||
[% END %]
|
||||
<div class="hint">Image from BakerTaylor</div>
|
||||
<div class="hint">Image from Baker & 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 & 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(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
Loading…
Reference in a new issue