gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Owen Leonard 2023-01-05 12:54:42 +00:00 committed by Tomas Cohen Arazi
parent d00d07cae7
commit 9df8e02df0
No known key found for this signature in database
GPG Key ID: 0A272EA1B2F3C15F
1 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc
View File

@ -341,3 +341,62 @@
</table> <!-- /#itemst -->
</div>
[% END %]
[%# BOOTSTRAP TAB WRAPPER USAGE
[ 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 ]
%]
[% 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 %]
[% IF ( active ) %]
<li role="presentation" class="active">
[% ELSE %]
<li role="presentation">
[% END %]
<a href="#[% tabname | uri %]_panel" aria-controls="[% tabname | uri %]_panel" role="tab" data-toggle="tab">
[% content | $raw %]
</a>
<li>
[% END %]
[% BLOCK tab_panels %]
<div class="tab-content">
[% content | $raw %]
</div>
[% END %]
[% BLOCK tab_panel %]
[% IF ( active ) %]
<div role="tabpanel" class="tab-pane active" id="[% tabname | html %]_panel">
[% ELSE %]
<div role="tabpanel" class="tab-pane" id="[% tabname | html %]_panel">
[% END %]
[% content| $raw %]
</div>
[% END %]