Attachment 169102 Details for Bug 7508 – Bug 7508: Collapsable items on items tab

[patch] Bug 7508: Collapsable items on items tab

Bug-7508-Collapsable-items-on-items-tab.patch (text/plain), 8.90 KB, created by Owen Leonard on 2024-07-17 16:19:28 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2024-07-17 16:19:28 UTC

Size: 8.90 KB

patch

obsolete

>From 78d9f1cabe5e0ac62f3ad8ef645b199aaa014a17 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Tue, 18 Jun 2024 18:47:08 +0000
>Subject: [PATCH] Bug 7508: Collapsable items on items tab
>
>Since we recently updated the patron entry form in the staff interface
>to have more visibly-collapsible sections I thought there might be
>interest in picking up this old bug.
>
>The patch implements collapsible sections on the item detail page,
>allowing the user to hide sections by clicking the item barcode header.
>The patch includes relocation of some JS code from the authority and
>MARC editors into the global JS file. This is the code that helps jump
>the user to a certain scroll point on the page.
>
>To test, apply the patch and clear your browser cache.
>
>- In the staff interface, locate a bibliographic record with items and
>  view the detail page.
>- Click the "Items" tab in the sidebar.
>- On the item detail page, each section should have an icon indicating
>  that they are expanded. Hovering your mouse over the section heading
>  should highlight the clickable area.
>- Test that each section collapses correctly and that the next section
>  is moved into view.
>
>- Go to Cataloging -> New record. Test that the links to specific tags
>  under the main tab bar still work to jump you to the correct part of
>  the page.
>- Go to Authorities -> New authority and perform the same test.
>
>Sponsored-by: Athens County Public Libraries
>---
> .../en/modules/authorities/authorities.tt     | 21 -------
> .../prog/en/modules/catalogue/moredetail.tt   | 56 +++++++++++++++++--
> .../prog/en/modules/cataloguing/addbiblio.tt  | 20 -------
> .../intranet-tmpl/prog/js/staff-global.js     | 20 +++++++
> 4 files changed, 70 insertions(+), 47 deletions(-)
>
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt
>index 230b683801..80b9f55b0c 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt
>@@ -186,27 +186,6 @@
>         $(".tag_anchors_" + tabid ).addClass("tab_selected").show();
>     }
> 
>-    /**
>-    * Returns a roughly ideal position to scroll an element into view
>-    * @param {string} target - The HTML id of the element to scroll into view
>-    * @param {string} elemid - The HTML id of the element which might obscure
>-    *                          the view of the target element e.g. a floating toolbar
>-    * @return {number} - The y-coordinate to pass to window.scrollTo()
>-    */
>-    function getScrollto( target, elemid ){
>-        var dest = $("#" + target );
>-        var yoffset = dest.offset();
>-
>-        if( elemid != "" ){
>-            var element = $("#" + elemid );
>-            var elem_height = element.outerHeight();
>-        } else {
>-            elem_height = 0;
>-        }
>-        return yoffset.top - elem_height - 20;
>-    }
>-
>-
>     /**
>     * check if z3950 mandatories are set or not
>     */
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt
>index 6ef020cecb..817eb604a5 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/moredetail.tt
>@@ -15,7 +15,31 @@
>     [% t("Koha") | html %]
> [% END %]</title>
> [% INCLUDE 'doc-head-close.inc' %]
>-<style>.listgroup .rows{margin-left:1em;}</style>
>+[% FILTER collapse %]
>+    <style>
>+        .listgroup .rows{
>+            margin-left: 1em;
>+        }
>+        h3 {
>+            background-color: #FFF;
>+            border: 1px solid #FFF;
>+            margin-bottom: 0;
>+            padding: 1rem;
>+        }
>+        h3:hover {
>+            border: 1px solid #6FAF44;
>+            cursor: pointer;
>+        }
>+        h3 i {
>+            color: #4C7AA8;
>+            font-size: 80%;
>+            padding-right: .2rem;
>+        }
>+        h3.collapsed i.fa.fa-caret-down::before {
>+           content: "\f0da";
>+        }
>+    </style>
>+[% END %]
> </head>
> <body id="catalog_moredetail" class="catalog">
> [% USE KohaDates %]
>@@ -108,6 +132,10 @@
>                     [% END %]
> 
>                     [% FOREACH ITEM_DAT IN ITEM_DATA %]
>+                        <h3 id="item[% ITEM_DAT.itemnumber | html %]" class="expanded">
>+                            <i class="fa fa-caret-down" title="Collapse this section"></i>
>+                            Barcode [% ITEM_DAT.barcode | html %]  [% IF not_for_loan %][% not_for_loan_description | html %] [% END %]
>+                        </h3>
>                         <div class="page-section clearfix">
>                             [% SET not_for_loan = 0 %]
>                             [% IF ITEM_DAT.notforloan || ITEM_DAT.effective_itemtype.notforloan %]
>@@ -115,9 +143,6 @@
>                                 [% SET not_for_loan_description = AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.notforloan', authorised_value => item.notforloan ) %]
>                             [% END %]
>                             <div class="listgroup">
>-                                <h3 id="item[% ITEM_DAT.itemnumber | html %]">
>-                                    Barcode [% ITEM_DAT.barcode | html %]  [% IF not_for_loan %][% not_for_loan_description | html %] [% END %]
>-                                </h3>
> 
>                                 <h4>
>                                     Item information
>@@ -533,8 +558,27 @@
>         [% Asset.js("js/modals/add_catalog_concern.js") | $raw %]
>     [% END %]
>     <script>
>-        var browser = KOHA.browser('[% searchid | html %]', parseInt('[% biblionumber | html %]', 10));
>-        browser.show();
>+        $(document).ready(function(){
>+            var browser = KOHA.browser('[% searchid | html %]', parseInt('[% biblionumber | html %]', 10));
>+            browser.show();
>+            $(".collapsed, .expanded").on("click",function(e){
>+                e.preventDefault();
>+                var linkid = this.id;
>+                window.scrollTo( 0, getScrollto( linkid, "" ) );
>+                togglePanel( $(this) );
>+            });
>+        });
>+
>+        function togglePanel( node ){
>+            var panel = node.next( ".page-section" );
>+            if(panel.is(":visible")){
>+                node.addClass("collapsed").removeClass("expanded").attr("title", __("Click to expand this section") );
>+                panel.hide();
>+            } else {
>+                node.addClass("expanded").removeClass("collapsed").attr("title", __("Click to collapse this section") );
>+                panel.show();
>+            }
>+        }
>     </script>
> [% END %]
> [% INCLUDE 'intranet-bottom.inc' %]
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
>index 85b41b2daf..06dc78a93b 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
>@@ -219,26 +219,6 @@
>         $(".tag_anchors_" + tabid ).addClass("tab_selected").show();
>     }
> 
>-    /**
>-    * Returns a roughly ideal position to scroll an element into view
>-    * @param {string} target - The HTML id of the element to scroll into view
>-    * @param {string} elemid - The HTML id of the element which might obscure
>-    *                          the view of the target element e.g. a floating toolbar
>-    * @return {number} - The y-coordinate to pass to window.scrollTo()
>-    */
>-    function getScrollto( target, elemid ){
>-        var dest = $("#" + target );
>-        var yoffset = dest.offset();
>-
>-        if( elemid != "" ){
>-            var element = $("#" + elemid );
>-            var elem_height = element.outerHeight();
>-        } else {
>-            elem_height = 0;
>-        }
>-        return yoffset.top - elem_height - 20;
>-    }
>-
>     function redirect(dest){
>         $("#redirect").attr("value",dest);
>         return Check();
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
>index ceaf8b8d57..813b6d6223 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
>+++ b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
>@@ -879,3 +879,23 @@ function toggleBtnIcon( element, start, replacement ){
>         });
>     });
> }
>+
>+/**
>+* Returns a roughly ideal position to scroll an element into view
>+* @param {string} target - The HTML id of the element to scroll into view
>+* @param {string} elemid - The HTML id of the element which might obscure
>+*                          the view of the target element e.g. a floating toolbar
>+* @return {number} - The y-coordinate to pass to window.scrollTo()
>+*/
>+function getScrollto( target, elemid ){
>+    var dest = $("#" + target );
>+    var yoffset = dest.offset();
>+
>+    if( elemid != "" ){
>+        var element = $("#" + elemid );
>+        var elem_height = element.outerHeight();
>+    } else {
>+        elem_height = 0;
>+    }
>+    return yoffset.top - elem_height - 20;
>+}
>-- 
>2.39.2

Actions: View | Diff | Splinter Review

Attachments on bug 7508: 88025 | 169102 | 170575