Bug 32571

Summary: Use template wrapper to build tabbed components
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: REOPENED --- QA Contact: Katrin Fischer <katrin.fischer>
Severity: enhancement    
Priority: P5 - low CC: david, dcook, fridolin.somers, kyle, lucas, testopia
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.05.00,22.11.03
Bug Depends on: 32562, 33891, 33892, 33893, 33894, 33895, 33897, 34012    
Bug Blocks: 33178, 33186, 33524, 33526, 35838, 35850, 32649, 32658, 32660, 32661, 32662, 32698, 32912, 32914, 32956, 33126, 33154, 33157, 33158, 33180, 33181, 33185, 33187, 33293, 33294, 33307, 33310, 33324, 33332, 33333, 33525, 33527, 33528, 33590, 33591    
Attachments: Bug 32571: Use template wrapper to build tabbed components
Bug 32571: (follow-up) Implement abstracted tabs on About page
Bug 32571: Use template wrapper to build tabbed components
Bug 32571: (follow-up) Implement abstracted tabs on About page
Bug 32571: Use template wrapper to build tabbed components
Bug 32571: Use template wrapper to build tabbed components
Bug 32571: (follow-up) Implement abstracted tabs on About page
Bug 32571: (follow-up) Use more unique variable name to avoid collisions
Bug 32571: (follow-up) Use more unique variable name to avoid collisions
Bug 32571: Use template wrapper to build tabbed components
Bug 32571: (follow-up) Implement abstracted tabs on About page
Bug 32571: (follow-up) Use more unique variable name to avoid collisions

Description Owen Leonard 2023-01-05 12:53:45 UTC
In preparation for an upgrade to Bootstrap 5 I propose that we try to abstract the way we build some components. This will help reduce the number of template changes required during the update.

Using Template::Toolkit WRAPPERs we can create the structural components for tabs separately from the tab content:

- Main tab container
- Tab links container
- Individual tab links
- Tab panel container
- Individual tab panels

This can be done gradually before the Bootstrap upgrade without causing any disruption.
Comment 1 Owen Leonard 2023-01-05 13:12:43 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2023-01-05 13:12:48 UTC Comment hidden (obsolete)
Comment 3 David Nind 2023-01-05 23:21:31 UTC Comment hidden (obsolete)
Comment 4 David Nind 2023-01-05 23:21:36 UTC Comment hidden (obsolete)
Comment 5 David Nind 2023-01-05 23:22:30 UTC
Testing notes (using KTD):

1. Everything looks OK to me after applying the patches and viewing the About page tabs.
Comment 6 Kyle M Hall 2023-01-06 16:08:03 UTC Comment hidden (obsolete)
Comment 7 Owen Leonard 2023-01-20 15:52:22 UTC Comment hidden (obsolete)
Comment 8 Owen Leonard 2023-01-20 15:52:27 UTC Comment hidden (obsolete)
Comment 9 Owen Leonard 2023-01-20 15:52:32 UTC Comment hidden (obsolete)
Comment 10 Owen Leonard 2023-01-20 16:04:08 UTC Comment hidden (obsolete)
Comment 11 Katrin Fischer 2023-02-05 12:38:45 UTC
Created attachment 146199 [details] [review]
Bug 32571: Use template wrapper to build tabbed components

This patch adds Template::Toolkit WRAPPER blocks to html_helpers.inc so
that templates can build tabbed components while keeping tab structural
markup separate.

Each individual component of a Bootstrap tabbed interface is defined:

- Main tab container
- Tab links container
- Individual tab links
- Tab panel container
- Individual tab panels

Included is a usage example:

  [ WRAPPER tabs id= "tabs container id" ]
      [ WRAPPER tabs_nav ]
        [ WRAPPER tab_item tabname= "tab name 1" ] [ content ] [ END ]
          [ WRAPPER tab_item tabname= "tab name 2" ] [ content ] [ END ]
            ...
        [ END ]
        [ WRAPPER tab_panels ]
          [ WRAPPER tab_panel id="tab name 1"] [ content ] [ END ]
          [ WRAPPER tab_panel id="tab name 2"] [ content ] [ END ]
            ...
      [ END ]
  [ END ]

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

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 12 Katrin Fischer 2023-02-05 12:38:49 UTC
Created attachment 146200 [details] [review]
Bug 32571: (follow-up) Implement abstracted tabs on About page

This patch implements the proposed system for building tabs on the About
page.

To test, apply the patch and view the About page. It should look the
same as before and all tabs should function correctly.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 13 Katrin Fischer 2023-02-05 12:38:54 UTC
Created attachment 146201 [details] [review]
Bug 32571: (follow-up) Use more unique variable name to avoid collisions

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 14 Tomás Cohen Arazi 2023-02-07 18:29:27 UTC
Pushed to master for 23.05.

Nice work everyone, thanks!
Comment 15 Jacob O'Mara 2023-02-08 16:53:16 UTC
Nice work, thanks everyone!

Pushed to 22.11.x for the next release.
Comment 16 Lucas Gass 2023-02-15 21:34:12 UTC
Enhancement will not be backported to 22.05.x.
Comment 17 Fridolin Somers 2023-03-02 05:40:27 UTC
Shouldn't we add a coding guideline for this ?
Comment 18 Owen Leonard 2023-03-07 13:17:53 UTC
(In reply to Fridolin Somers from comment #17)
> Shouldn't we add a coding guideline for this ?

I updated this page:

https://wiki.koha-community.org/wiki/Interface_patterns#Tabs