From 10305e4cd8323929cfa0697830952aa95b93eac3 Mon Sep 17 00:00:00 2001 From: Owen Leonard <oleonard@myacpl.org> Date: Thu, 5 Jan 2023 12:54:42 +0000 Subject: [PATCH] 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> --- .../prog/en/includes/html_helpers.inc | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc index dd8682a2b7..abe7f111e1 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/html_helpers.inc @@ -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 %] -- 2.30.2