Attachment 83481 Details for Bug 22032 – Bug 22032: Improve local cover image tab on detail page

[patch] Bug 22032: Improve local cover image tab on detail page

Bug-22032-Improve-local-cover-image-tab-on-detail-.patch (text/plain), 8.65 KB, created by Lucas Gass (lukeg) on 2018-12-24 18:07:42 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Lucas Gass (lukeg)

Created: 2018-12-24 18:07:42 UTC

Size: 8.65 KB

patch

obsolete

>From 605aeba9252f9d93b642ff0a130f60047c2a7ea0 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Thu, 20 Dec 2018 16:32:34 +0000
>Subject: [PATCH] Bug 22032: Improve local cover image tab on detail page
>
>This patch makes a variety of improvements to the images tab of the
>staff client's bibliographic detail page.
>
>To test, apply the patch and regenerate the staff client CSS.
>
> - Enable the LocalCoverImages system preference.
> - Locate a bibliographic record which has no images attached.
>   - There should be a "no images" message and an upload button.
>     - Upload an image and return to the detail page.
>       - The "Images" tab should have a nicely-styled thumbnail of the
>         image you uploaded.
>         - Test the "Delete image" link: It should ask for a
>           confirmation. If you confirm, the image should disappear and
>           a "loading" spinner should appear.
>           - When the image has been deleted the thumbnail container
>             should disappear and the "no images" message should
>             reappear.
> - Test this process with AllowMultipleCovers enabled and disabled.
>
>Extra credit: Modify the AJAX url in the removeLocalImage
>function in detail.tt. After misspelling a parameter name or the URL
>path, clicking the "Delete image" link should trigger an alert and
>re-show the image thumbnail.
>
>Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
>---
> .../intranet-tmpl/prog/css/src/staff-global.scss   | 20 ++++++-
> .../prog/en/modules/catalogue/detail.tt            | 63 +++++++++++++---------
> 2 files changed, 56 insertions(+), 27 deletions(-)
>
>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 c1ed2a2..28b2381 100644
>--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>@@ -2233,10 +2233,28 @@ li {
> .thumbnail {
>     display: block;
>     margin: auto;
>+}
> 
>-    > li {
>+.thumbnails {
>+    li {
>+        display: inline-block;
>         list-style-type: none;
>     }
>+
>+    .remove {
>+        border-top: 1px solid #EEE;
>+        display: block;
>+        font-size: 90%;
>+        margin: 4px -4px 2px -4px;
>+        padding-top: .5em;
>+        text-align: center;
>+    }
>+
>+    & + p {
>+        border-top: 1px solid #eee;
>+        margin-top: 1em;
>+        padding-top: 1em;
>+    }
> }
> 
> #searchresults {
>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 e287d23..7bc314b 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
>@@ -807,26 +807,31 @@
> [% END %]
> 
> [% IF ( LocalCoverImages ) %]
>-<div id="images">
>-[% IF ( localimages.0 ) %]
>-    <p>Click on an image to view it in the image viewer</p>
>-    <ul class="thumbnails">
>-[% FOREACH image IN localimages %]
>-    [% IF image %]
>-        <li id="imagenumber-[% image | html %]">
>-            <a class="thumbnail" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&amp;imagenumber=[% image | html %]">
>-                <img alt="remove this image" src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image | html %]" />
>-                [% IF CAN_user_tools_upload_local_cover_images %]
>-                  <span class="remove" title="remove this image">Delete image</span>
>+    <div id="images">
>+        [% IF ( localimages.0 ) %]
>+            <p>Click on an image to view it in the image viewer</p>
>+            <ul class="thumbnails">
>+                [% FOREACH image IN localimages %]
>+                    [% IF image %]
>+                        <li id="imagenumber-[% image | html %]" class="thumbnail">
>+                            <a href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | uri %]&amp;imagenumber=[% image | uri %]">
>+                                <img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image | uri %]" />
>+                            </a>
>+                            [% IF CAN_user_tools_upload_local_cover_images %]
>+                                <a href="#" class="remove"><i class="fa fa-trash"></i> Delete image</a>
>+                            [% END %]
>+                        </li>
>+                    [% END %]
>                 [% END %]
>-            </a>
>-        </li>
>-    [% END %]
>-[% END %]
>-    </ul>
>-[%# ELSE - No image passed JavaScript takes care %]
>-[% END %]
>-</div>
>+            </ul>
>+        [% ELSE # - No image passed JavaScript takes care %]
>+            No images have been uploaded for this bibliographic record yet.
>+        [% END %]
>+        [% IF ( CAN_user_tools_upload_local_cover_images ) %]
>+            <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 %]
>+    </div>
> [% END %]
> 
> [% IF ( HTML5MediaEnabled ) %]
>@@ -904,6 +909,8 @@
>     [% Asset.js("js/catalog.js") | $raw %]
>     [% INCLUDE 'greybox.inc' %]
>     <script>
>+        var interface = "[% interface | html %]";
>+        var theme = "[% theme | html %]";
>         // http://www.oreillynet.com/pub/a/javascript/2003/10/21/amazonhacks.html
>         function verify_images() {
>             $("#bookcoverimg").each(function(i){
>@@ -936,12 +943,18 @@
>         }
> 
>         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>");
>             $.ajax({
>                 url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
>                 success: function(data) {
>                     $(data).each( function(i) {
>                         if ( this.deleted == 1 ) {
>-                            $('#imagenumber-' + this.imagenumber).remove();
>+                            thumbnail.remove();
>+                        } else {
>+                            thumbnail.html( copy );
>+                            alert(_("An error occurred on deleting this image"));
>                         }
>                         if ( $('ul.thumbnails > li').length == 0 ) {
>                             showNoImageMessage();
>@@ -949,6 +962,7 @@
>                     });
>                 },
>                 error: function(data) {
>+                    thumbnail.html( copy );
>                     alert(_("An error occurred on deleting this image"));
>                 }
>             });
>@@ -958,7 +972,7 @@
>             var no_images_msg = _("No images have been uploaded for this bibliographic record yet.");
>             no_images_msg = '<p>' + no_images_msg + '</p>';
>             [% IF ( CAN_user_tools_upload_local_cover_images ) %]
>-                var please_upload = _("Please select the image file to upload. %sUpload%s").format("<a class='btn btn-default btn-xs' href='/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber + "&amp;filetype=image'><i class='fa fa-upload' aria-hidden='true'></i> ","</a>");
>+                var please_upload = _("Upload an image file: %sUpload%s").format("<a class='btn btn-default btn-xs' href='/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber + "&amp;filetype=image'><i class='fa fa-upload' aria-hidden='true'></i> ","</a>");
>                 no_images_msg += "<p id='upload_image'>" + please_upload + '</p>';
>             [% END %]
>             $('#images').html(no_images_msg);
>@@ -1041,20 +1055,17 @@
>                 $('#bibliodetails').tabs("option", "active", 3);
>             [% END %]
>             $('#search-form').focus();
>-            $('.thumbnails > li > a > span.remove').click(function() {
>+            $('.thumbnails > li > .remove').click(function() {
>                 var result = confirm(_("Are you sure you want to delete this cover image?"));
> 
>                 if ( result == true ) {
>-                    var imagenumber = $(this).parent().parent().attr('id').split('-')[1];
>+                    var imagenumber = $(this).parent().attr('id').split('-')[1];
>                     removeLocalImage(imagenumber);
>                 }
> 
>                 return false;
>             });
>             [%# inject no images message %]
>-            [% IF ( LocalCoverImages && ! localimages.0 ) %]
>-                showNoImageMessage();
>-            [% END %]
>             [% IF LocalCoverImages %]
>                 KOHA.LocalCover.GetCoverFromBibnumber(true);
>             [% END %]
>-- 
>2.1.4

Actions: View | Diff | Splinter Review

Attachments on bug 22032: 83420 | 83481 | 86128 | 86739