From a3c28771ed6c89c803cf7d682e1cfbb8a1a33c8c Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 10 Jan 2022 16:21:11 +0000
Subject: [PATCH] Bug 24415: Authority enhancement - Improve access to tabs

This patch makes style changes to the authority record editor in order
to make it easier to navigate among tabs and tags. This change matches
the one made to the basic MARC editor in Bug 22045.

Tabs are now part of the page's toolbar, which floats as the page
scrolls. In addition to the numbered tabs, there is also a section
showing in-page links to the MARC tags which are available on that page.

To test, apply the patch and clear your browser cache if necessary.

Open a blank or existing record in the authority record editor. Test
the redesigned tabs, the floating toolbar, and the in-page tag links.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
---
 .../intranet-tmpl/prog/css/addbiblio.css      |  3 +-
 .../en/modules/authorities/authorities.tt     | 91 ++++++++++++++++++-
 2 files changed, 92 insertions(+), 2 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
index 634f2b2af6..f964b2a089 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
@@ -6,7 +6,8 @@ div#toolbar {
     border: 0;
 }
 
-#addbibliotabs .ui-tabs-nav {
+#addbibliotabs .ui-tabs-nav,
+#authoritytabs .ui-tabs-nav {
     display: none;
 }
 
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 71a935a5bc..b40b8fb358 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/authorities/authorities.tt
@@ -21,7 +21,17 @@
     });
     var Sticky;
     $(document).ready(function() {
-        var tabs = $('#authoritytabs').tabs();
+        var tabs = $('#authoritytabs').tabs().bind('show.ui-tabs', function(e, ui) {
+            $("#"+ui.panel.id+" input:eq(0)").focus();
+        });
+
+        $( "ul.sortable_field", tabs ).sortable();
+        $( "ul.sortable_subfield", tabs ).sortable();
+
+        [% IF tab %]
+            link = $("a[href='#[% tab | html %]']");
+            selectTab( link );
+        [% END %]
         $( "ul.sortable_field", tabs ).sortable();
         $( "ul.sortable_subfield", tabs ).sortable();
         Sticky = $("#toolbar");
@@ -42,8 +52,60 @@
             }
             return false;
         });
+        $(".toolbar-tabs a").on("click",function(e){
+            e.preventDefault();
+            selectTab( $(this ) );
+        });
+
+        $(".tag_anchor").on("click", function(e){
+            e.preventDefault();
+            $(".tag_anchor").removeClass("selected");
+            $(this).addClass("selected");
+            var link = this.href;
+            var linkid = link.substring( link.indexOf("#") + 1 );
+            window.scrollTo( 0, getScrollto( linkid, "toolbar" ) );
+        });
+
+        $("body").on("click", ".linkfield", function(e){
+            e.preventDefault();
+            var tab = $(this).data("tab");
+            var field = $(this).data("field");
+            var tablink = $("a[data-tabid='" + tab + "']" );
+            selectTab( tablink );
+            window.scrollTo( 0, getScrollto( field, "toolbar" ) );
+        });
     });
 
+    function selectTab( tablink ){
+        $(".toolbar-tabs li").removeClass("selected");
+        tablink.parent().addClass("selected");
+        var tabid = tablink.data("tabid");
+        $('#authoritytabs').selectTabByID("#tab" + tabid + "XX");
+        $(".tag_anchors").removeClass("tab_selected").hide();
+        $(".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
     */
@@ -262,6 +324,33 @@
                                 <a class="btn btn-default" id="cancel" href="/cgi-bin/koha/authorities/authorities-home.pl">Cancel</a>
                             [% END %]
                         </div>
+                        <div class="toolbar-tabs-container">
+                            [% IF ( BIG_LOOP && BIG_LOOP.size > 1 ) %]
+                                <ul class="toolbar-tabs">
+                                    [%- FOREACH BIG_LOO IN BIG_LOOP -%]
+                                        [% IF loop.first %]
+                                            <li class="selected">
+                                        [% ELSE %]
+                                            <li>
+                                        [% END %]
+                                            <a data-tabid="[% BIG_LOO.number | html %]" href="#tab[% BIG_LOO.number | html %]XX">[% BIG_LOO.number | html %]</a>
+                                        </li>
+                                    [%- END -%]
+                                </ul>
+                            [% END %]
+                            <ul class="tag_anchors_list">
+                                [% FOREACH BIG_LOO IN BIG_LOOP %]
+                                    [% IF loop.first %][% SET tab_selected = "tab_selected" %][% ELSE %][% SET tab_selected = "" %][% END %]
+                                    [% FOREACH innerloo IN BIG_LOO.innerloop %]
+                                        [% IF ( innerloo.tag ) %]
+                                            <li class="tag_anchors tag_anchors_[% BIG_LOO.number | html %] [% tab_selected | html %]">
+                                                <a class="tag_anchor" id="tag_anchor_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]" title="tag_anchor_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]" href="#div_indicator_tag_[% innerloo.tag | uri %]_[% innerloo.index | uri %][% innerloo.random | uri %]">[% innerloo.tag | uri %]</a>
+                                            </li>
+                                        [% END %]
+                                    [% END %]
+                                [% END %]
+                            </ul>
+                        </div>
                     </div> <!-- /#toolbar -->
 
                     <div id="authoritytabs" class="toptabs numbered">
-- 
2.39.5