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='' btnSize='' backdrop='true'targetUrl='' targetElement='' redirectForm=true size='auto'>
21 <@deprecatedWarning args=deprecated />
22 <a id="btn-${id}" class="btn btn-primary<#if btnColor !=''> btn-${btnColor}</#if><#if btnSize!=''> btn-${btnSize}</#if><#if btnClass!=''> ${btnClass}</#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}">
23 <#if btnIcon!="">
24 <@icon style=btnIcon />
25 </#if>
26 <#-- <#if btnIcon!="" && btnTitle!=""> </#if> -->
27 <span class="<#if btnClass !=''>${btnClass} </#if>d-none d-md-block">${btnTitle}</span> <#if btnIcon=""><i class="ti ti-arrow-narrow-right"></i></#if>
28 </a>
29 <div class="offcanvas offcanvas-end <#if size !=''>w-auto</#if>" 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">
30 <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>">
31 <#if title!=''><h2 class="offcanvas-title fw-bolder" id="${id}Label">${title}</h2></#if>
32 <button type="button" class="ms-3 border btn btn-light btn-rounded btn-icon" data-bs-dismiss="offcanvas" aria-label="Close">
33 <i class="ti ti-x fs-5"></i>
34 </button>
35 </div>
36 <div id="offcanvas-body-${id}" class="offcanvas-body p-0 px-1 px-md-4 text-break">
37 <#nested>
38 </div>
39 </div>
40 <#if targetUrl?has_content>
41 <script type="module">
42 import LuteceBSOffCanvas from "./themes/shared/modules/bootstrap/luteceBSOffCanvas.js";
43 new LuteceBSOffCanvas(`${id}`);
44 </script>
45 </#if>
46 </#macro>