Bug 22035: Improve local cover image browser page

This patch makes changes to the way local cover images are handled on
the image viewer page in the staff client. From this page you can now
delete images or reach the upload images page.

The patch also modifies slightly the process for deleting an image from
the images tab on the bibliographic detail page.

To test, apply the patch and regenerate the staff client CSS.
LocalCoverImages and  AllowMultipleCovers should be enabled.

 - Open the detail view for a record which has multiple cover images
   attached. On the Images tab, click the "Delete image" link for an
   image. After confirming, the link should change to a spinner icon and
   image should fade out.
 - Click one of the cover images to open the image viewer page. The
   thumbnails should each have a delete link which looks like and
   behaves like the delete links on the biblio detail page.
 - Clicking an image thumbnail should load a spinner icon into the area
   where the full-sized image was, which should be replaced by the image
   you chose.
 - There should be a button for uploading images which takes you to the
   correct page for adding images to that record.
 - The page title and breadcrumbs should show the title of the record.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

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 2844424..7327eb3 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -2280,6 +2280,7 @@ li {
     li {
         display: inline-block;
         list-style-type: none;
+        margin: 4px;
     }
 
     .remove {

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 4b4c1da..6520134 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
@@ -789,7 +789,8 @@
         function removeLocalImage(imagenumber) {
             var thumbnail = $("#imagenumber-" + imagenumber );
             var copy = thumbnail.html();
-            thumbnail.html("<div><img style='padding:50px' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' /></div>");
+            thumbnail.find("img").css("opacity", ".2");
+            thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");
             $.ajax({
                 url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
                 success: function(data) {

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/imageviewer.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/imageviewer.tt
index 73af2f0..b5d95e7 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/imageviewer.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/imageviewer.tt
@@ -2,36 +2,24 @@
 [% USE Asset %]
 [% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
-<title>Koha &rsaquo; Catalog &rsaquo; Details for [% biblio.title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</title>
+<title>Koha &rsaquo; Catalog &rsaquo; [% biblio.title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %] &rsaquo; Images</title>
 [% INCLUDE 'doc-head-close.inc' %]
-[% IF ( LocalCoverImages == 1 ) %]
 <style>
+#largeCover {
+    background: transparent url("[% interface | html %]/[% theme | html %]/img/spinner-small.gif") center center no-repeat;
+}
 #largeCoverImg {
     border : 1px solid #CCCCCC;
     display : block;
     margin : auto;
     padding : 1em;
 }
-#thumbnails {
-    text-align : center;
-}
-#thumbnails a img {
-    border : 1px solid #0000CC;
-}
-img.thumbnail {
-    display : block;
-    float : none;
-    margin: 0 5px 5px 0;
-    padding : .5em;
-}
 
-#thumbnails a img.selected {
-    border-color: black;
+.thumbnails img.selected {
     cursor : default;
     opacity:0.4;
-    filter:alpha(opacity=40); /* For IE8 and earlier */
 }
-</style>[% END %]
+</style>
 </head>
 
 <body id="catalog_imageviewer" class="catalog">
@@ -39,7 +27,7 @@ img.thumbnail {
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>  &rsaquo; Images for <i>[% biblio.title | html %]  [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</i></div>
+<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>  &rsaquo; <a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% biblionumber | uri %]"><i>[% biblio.title | html %]  [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</i></a> &rsaquo; Images</div>
 
 <div class="main container-fluid">
     <div class="row">
@@ -54,28 +42,45 @@ img.thumbnail {
 [% IF ( LocalCoverImages == 1 ) %]
     [% IF ( images.size > 0 ) %]
         <div class="row">
-        <div class="col-md-8">
-        <div id="largeCover">
-            <img id="largeCoverImg" alt="" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% imagenumber | html %]" />
-        </div></div>
-
-        <div class="col-md-4"><div id="thumbnails">
-
-            [% FOREACH img IN images %]
-                [% IF img %]
-                <a class="show_cover" data-coverimg="[% img | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&amp;imagenumber=[% img | html %]">
-                    [% IF ( imagenumber == img ) %]
-                        <img class="thumbnail selected" id="[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&amp;thumbnail=1" alt="Thumbnail" />
-                    [% ELSE %]
-                        <img class="thumbnail" id="[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&amp;thumbnail=1" alt="Thumbnail" />
-                    [% END %]
-                </a>
+            <div class="col-md-8">
+                <div id="largeCover">
+                    <img id="largeCoverImg" alt="" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% imagenumber | html %]" />
+                </div>
+                [% IF ( CAN_user_tools_upload_local_cover_images ) %]
+                    <hr />
+                    <p>Upload an image file: <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&amp;filetype=image"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
+                    </p>
                 [% END %]
-            [% END %]
-        </div></div>
-        </div>
+            </div>
+
+            <div class="col-md-4">
+                <ul class="thumbnails">
+                    [% FOREACH img IN images %]
+                        [% IF img %]
+                            <li id="imagenumber-[% img | html %]" class="thumbnail">
+                                <a class="show_cover" data-coverimg="[% img | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&amp;imagenumber=[% img | html %]">
+                                    [% IF ( imagenumber == img ) %]
+                                        <img class="selected" id="thumbnail_[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&amp;thumbnail=1" alt="Thumbnail" />
+                                    [% ELSE %]
+                                        <img id="thumbnail_[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&amp;thumbnail=1" alt="Thumbnail" />
+                                    [% END %]
+                                </a>
+                                [% IF CAN_user_tools_upload_local_cover_images %]
+                                    <a href="#" class="remove" data-coverimg="[% img | html %]"><i class="fa fa-trash"></i> Delete image</a>
+                                [% END %]
+                            </li>
+                        [% END # /IF img %]
+                    [% END # /FOREACH img %]
+                </ul> <!-- /ul.thumbnails -->
+            </div> <!-- /.col-md-4 -->
+        </div> <!-- /.row -->
     [% ELSE %]
         <div class="dialog message">There are no images for this record.</div>
+        [% IF ( CAN_user_tools_upload_local_cover_images ) %]
+            <hr />
+            <p>Upload an image file: <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&amp;filetype=image"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
+            </p>
+        [% END %]
     [% END %]
 [% ELSE %]
     <div class="dialog message">Local images have not been enabled by your system administrator.</div>
@@ -95,19 +100,61 @@ img.thumbnail {
     [% INCLUDE 'catalog-strings.inc' %]
     [% Asset.js("js/catalog.js") | $raw %]
     <script>
+        var interface = "[% interface | html %]";
+        var theme = "[% theme | html %]";
         $(document).ready(function(){
             showCover([% imagenumber | html %]);
             $(".show_cover").on("click",function(e){
                 e.preventDefault();
-                var coverimg = $(this).data("coverimg");
-                showCover(coverimg);
+                if( $(this).find("img").hasClass("selected") ){
+                    return false;
+                } else {
+                    $("#largeCoverImg").attr( "src", interface + "/" + theme + "/img/spinner-small.gif");
+                    var imagenumber = $(this).data("coverimg");
+                    showCover( imagenumber );
+                }
             });
+
+            $('.thumbnails .remove').on("click", function(e) {
+                e.preventDefault();
+                var result = confirm(_("Are you sure you want to delete this cover image?"));
+                var imagenumber = $(this).data("coverimg");
+                if ( result == true ) {
+                    removeLocalImage(imagenumber);
+                }
+            });
+
         });
 
+        function removeLocalImage(imagenumber) {
+            var thumbnail = $("#imagenumber-" + imagenumber );
+            var copy = thumbnail.html();
+            thumbnail.find("img").css("opacity", ".2");
+            thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");
+
+            $.ajax({
+                url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
+                success: function(data) {
+                    $(data).each( function() {
+                        if ( this.deleted == 1 ) {
+                            location.href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=" + biblionumber;
+                        } else {
+                            thumbnail.html( copy );
+                            alert(_("An error occurred on deleting this image"));
+                        }
+                    });
+                },
+                error: function(data) {
+                    thumbnail.html( copy );
+                    alert(_("An error occurred on deleting this image"));
+                }
+            });
+        }
+
         function showCover(img) {
-            $('.thumbnail').attr('class', 'thumbnail');
-            $('#largeCoverImg').attr('src', '/cgi-bin/koha/catalogue/image.pl?imagenumber=' + img);
-            $('#' + img + '.thumbnail').attr('class', 'thumbnail selected');
+            $('.thumbnail img').removeClass("selected");
+            $('#largeCoverImg').attr("src","").attr('src', '/cgi-bin/koha/catalogue/image.pl?imagenumber=' + img);
+            $('#thumbnail_' + img).addClass("selected");
         }
     </script>
 [% END %]