From b754eb5b5a616fa54e721ac71c8049f0f00a52e8 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 31 May 2023 17:51:46 +0000
Subject: [PATCH] Bug 33891: Use template wrapper for tabs: OPAC advanced
 search

This patch adds the tab WRAPPER markup to the OPAC, adapted for the
Bootstrap version used by the OPAC (4.5.0). The advanced search page is
updated to use the wrapper construction.

Unrelated markup fix: an empty size attribute is removed from an
<input>.

To test, apply the patch and view the the advanced search page in the
OPAC. The tabs for item type, shelving location, and collection should
all look correct and work correctly.

In the staff interface, go to Administration -> System preferences ->
OpacAdvancedSearchTypes and try various configurations, confirming each
time that the OPAC page adjustes correctly.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../bootstrap/en/includes/html_helpers.inc    | 65 +++++++++++++++++++
 .../bootstrap/en/modules/opac-advsearch.tt    | 40 ++++++------
 2 files changed, 84 insertions(+), 21 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/html_helpers.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/html_helpers.inc
index d849154a37..5196f3beca 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/html_helpers.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/html_helpers.inc
@@ -33,3 +33,68 @@
     [%- END -%]
     [%- this_biblio_href | url %][% biblionumber | url -%]
 [%- END %]
+
+[% # BOOTSTRAP TAB WRAPPER USAGE                                                                         %]
+[% #     [ WRAPPER tabs id= "tabs_container_id" ]                                                        %]
+[% #         [ WRAPPER tabs_nav ]                                                                        %]
+[% #             [ WRAPPER tab_item tabname= "tab_name_1" bt_active= 1 ] <span>Tab text 1</span> [ END ] %]
+[% #             [ WRAPPER tab_item tabname= "tab_name_2" ] <span>Tab text 2</span> [ END ]              %]
+[% #             ...                                                                                     %]
+[% #         [ END ]                                                                                     %]
+[% #         [ WRAPPER tab_panels ]                                                                      %]
+[% #             [ WRAPPER tab_panel tabname="tab_name_1" bt_active= 1 ] Panel contents 1 [ END ]        %]
+[% #             [ WRAPPER tab_panel tabname="tab_name_2" ] Panel contents 2 [ END ]                     %]
+[% #             ...                                                                                     %]
+[% #         [ END ]                                                                                     %]
+[% #     [ END ]                                                                                         %]
+
+[% BLOCK tabs %]
+    [% IF ( id ) %]
+        <div id="[% id | html %]" class="toptabs">
+    [% ELSE %]
+        <div class="toptabs">
+    [% END %]
+        [% content | $raw %]
+    </div>
+[% END %]
+
+[% BLOCK tabs_nav %]
+    <ul class="nav nav-tabs" role="tablist">
+        [% content | $raw %]
+    </ul>
+[% END %]
+
+[% BLOCK tab_item %]
+    <li class="nav-item" role="presentation">
+        [% IF ( bt_active ) %]
+            [% SET link_class="nav-link active" %]
+            [% SET aria_selected="true" %]
+        [% ELSE %]
+            [% SET link_class="nav-link" %]
+            [% SET aria_selected="false" %]
+        [% END %]
+        <a href="#[% tabname | uri %]_panel" class="[% link_class | html %]" id="[% tabname | html %]-tab" data-toggle="tab" data-target="#[% tabname | html %]_panel" data-tabname="[% tabname | uri %]" aria-controls="[% tabname | uri %]_panel" role="tab" aria-selected="[% aria_selected | html %]">
+            [% content | $raw %]
+        </a>
+    </li>
+[% END %]
+
+[% BLOCK tab_panels %]
+    [% IF ( id ) %]
+        <div class="tab-content" id="[% id | html %]_content">
+    [% ELSE %]
+        <div class="tab-content">
+    [% END %]
+        [% content | $raw %]
+    </div>
+[% END %]
+
+[% BLOCK tab_panel %]
+    [% IF ( bt_active ) %]
+        <div role="tabpanel" class="tab-pane show active" id="[% tabname | html %]_panel" aria-labelledby="[% tabname | html %]-tab">
+    [% ELSE %]
+        <div role="tabpanel" class="tab-pane" id="[% tabname | html %]_panel" aria-labelledby="[% tabname | html %]-tab">
+    [% END %]
+        [% content| $raw %]
+    </div>
+[% END %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
index 7e09f3911f..eb1edd78bc 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
@@ -112,7 +112,7 @@
                                             </select> <!-- /#search-field_[% loop.index | html %] -->
                                         </div> <!-- .search-term-input -->
                                         <div class="search-term-input">
-                                            <input class="form-control" type="text" size="" name="q" title="Enter search terms" value="" />
+                                            <input class="form-control" type="text" name="q" title="Enter search terms" value="" />
                                         </div> <!-- .search-term-input -->
                                         [% IF ( expanded_options ) %]
                                             <div class="search-term-input">
@@ -144,7 +144,7 @@
                                         See from (non-preferred form) headings are included
                                     </div>
                                 [% END %]
-                            </div> <!-- /.search-terms -->
+                            </div> <!-- /.advanced-search-terms -->
                         </fieldset>
                     </div> <!-- /#booleansearch -->
                 </div> <!-- / .col -->
@@ -162,23 +162,21 @@
                 [%# Following on one line for translatability %]
                 [% IF ( ( OpacAdvSearchOptions and OpacAdvSearchOptions.grep('itemtype').size > 0 and not expanded_options ) or ( OpacAdvSearchMoreOptions and OpacAdvSearchMoreOptions.grep('itemtype').size > 0 and expanded_options ) ) %]
                     <div class="col order-first order-md-first order-lg-2">
-                        <div id="advsearches" class="toptabs">
-                            <ul class="nav nav-tabs" role="tablist">
+                        [% WRAPPER tabs id= "advsearches" %]
+                            [% WRAPPER tabs_nav %]
                                 [% FOREACH advsearchloo IN advancedsearchesloop %]
-                                    <li class="nav-item" role="presentation" id="advsearch-tab-[% advsearchloo.advanced_search_type | html %]">
-                                        <a href="#advsearch-[% advsearchloo.advanced_search_type | uri %]" class="nav-link" aria-controls="advsearch-[% advsearchloo.advanced_search_type | html %]" aria-selected="false" role="tab" data-toggle="tab">
-                                            [% IF ( advsearchloo.advanced_search_type == 'itemtypes' ) %]<span>Item type</span>
-                                            [% ELSIF ( advsearchloo.advanced_search_type == 'ccode' ) %]<span>Collection</span>
-                                            [% ELSIF ( advsearchloo.advanced_search_type == 'loc' ) %]<span>Shelving location</span>
-                                            [% ELSE %]<span>Something else</span>
-                                            [% END %]
-                                        </a>
-                                    </li>
+                                    [% WRAPPER tab_item tabname= "advsearch-tab-${advsearchloo.advanced_search_type}" bt_active= "0" %]
+                                        [% IF ( advsearchloo.advanced_search_type == 'itemtypes' ) %]<span>Item type</span>
+                                        [% ELSIF ( advsearchloo.advanced_search_type == 'ccode' ) %]<span>Collection</span>
+                                        [% ELSIF ( advsearchloo.advanced_search_type == 'loc' ) %]<span>Shelving location</span>
+                                        [% ELSE %]<span>Something else</span>
+                                        [% END %]
+                                    [% END %]
                                 [% END %]
-                            </ul>
-                            <div class="tab-content">
+                            [% END # /WRAPPER tabs_nav %]
+                            [% WRAPPER tab_panels id= "advsearches" %]
                                 [% FOREACH advsearchloo IN advancedsearchesloop %]
-                                    <div role="tabpanel" class="tab-pane" id="advsearch-[% advsearchloo.advanced_search_type | html %]" class="advsearch" aria-labelledby="advsearch-tab-[% advsearchloo.advanced_search_type | html %]">
+                                    [% WRAPPER tab_panel tabname="advsearch-tab-${advsearchloo.advanced_search_type}" %]
                                         <fieldset>
                                             <legend>Limit to any of the following:</legend>
                                             <div class="row">
@@ -204,13 +202,13 @@
                                                     [% END %]
                                                 [% END %]
                                         </fieldset>
-                                    </div> <!-- / #advsearch-[% advsearchloo.advanced_search_type | html %] -->
+                                    [% END # /tab_panel#advsearch-advsearchloo.advanced_search_type %]
                                 [% END # / FOREACH advancedsearchesloop %]
-                            </div> <!-- /.tab-content -->
-                        </div> <!-- / #advsearches -->
+                            [% END # /tab_panels %]
+                        [% END # /WRAPPER tabs#advsearches %]
                     </div> <!-- / .col -->
                 [% END # /IF OpacAdvSearchOptions %]
-            </div>
+            </div> <!-- /.row -->
 
             <div id="advsearch_limits" class="row">
 
@@ -483,7 +481,7 @@ $(document).ready(function() {
     [% END %]
 
     if( $("#advsearches .tab-pane.active").length < 1 ){
-        $("#advsearches a:first").tab("show");
+        $("#advsearches li:first a").tab("show");
     }
 
     $('.search-term-row .search-term-input select[name="op"]').first().prop("disabled",true).hide();
-- 
2.39.5