offcanvas.ftl
1 <#--
2 Macro: offcanvas
3
4 Description: Generates an off-canvas component for a sliding panel overlay.
5
6 Parameters:
7 - id (string, required): the ID of the off-canvas component.
8 - position (string, optional): the position of the off-canvas component ("start", "end", "top", or "bottom").
9 - title (string, optional): the title of the off-canvas component.
10 - btnColor (string, optional): the color of the toggle button.
11 - btnTitle (string, optional): the text on the toggle button.
12 - btnIcon (string, optional): the icon for the toggle button.
13 - backdrop (string, optional, default="true"): whether to show a backdrop when the off-canvas component is open.
14 - size (string, optional): the size of the off-canvas component ("full", "half", "auto", or "sm").
15 - btnSize (string, optional): the size of the toggle button.
16 - targetUrl (string, optional): the URL to load content from when the off-canvas component is opened.
17 - targetElement (string, optional): the ID of the element to load content into.
18 - redirectForm (boolean, optional): whether to redirect the form when submitted.
19 -->
20 <#macro offcanvas id position='start' title='' btnColor='primary' btnTitle='' btnIcon='' btnClass='' backdrop='true' btnSize='sm' targetUrl='' targetElement='' redirectForm=true size='auto'>
21 <@deprecatedWarning args=deprecated />
22
23 <a id="btn-${id}" class="btn<#if btnColor !=''> btn-${btnColor}</#if><#if btnSize!=''> btn-${btnSize}</#if>"<#if title !=''> title="${title}"</#if> data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="${backdrop}" href="#${id}" role="button" aria-controls="${id}" title="${title}">
24 <#if btnIcon!="">
25 <@icon style=btnIcon />
26 </#if>
27 <#-- <#if btnIcon!="" && btnTitle!=""> </#if> -->
28 <#if btnClass !=""><span class="${btnClass}"></#if>
29 ${btnTitle}
30 <#if btnClass !=""></span></#if>
31 <#if btnIcon="">
32 <i class="ti ti-arrow-narrow-right"></i>
33 </#if>
34 </a>
35 <div class="offcanvas offcanvas-end <#if size !=''>w-auto</#if>"
36 data-lutece-load-content-url="${targetUrl}" data-lutece-load-content-target="${targetElement}" data-lutece-redirectForm=<#if redirectForm>true<#else>false</#if> tabindex="-1" id="${id}" aria-labelledby="${id}Label">
37 <div class="offcanvas-header text-break <#if title=''>position-absolute end-0 px-2 pt-2 border-0<#else>px-2 py-2 py-md-4 px-md-4</#if>">
38 <#if title!=''><h2 class="offcanvas-title fw-bolder" id="${id}Label">${title}</h2></#if>
39 <button type="button" class="ms-3 border btn btn-light btn-rounded btn-icon" data-bs-dismiss="offcanvas" aria-label="Close">
40 <i class="ti ti-x fs-5"></i>
41 </button>
42 </div>
43 <div id="offcanvas-body-${id}" class="offcanvas-body p-0 px-1 px-md-4 text-break">
44 <#nested>
45 </div>
46 </div>
47 <#if targetUrl?has_content>
48 <script type="module">
49 import LuteceBSOffCanvas from "./themes/shared/modules/bootstrap/luteceBSOffCanvas.js";
50 new LuteceBSOffCanvas(`${id}`);
51 </script>
52 </#if>
53 </#macro>