cOffcanvas.ftl
1 <#--
2 Macro: cOffcanvas
3 Description: Generates an off-canvas component for a sliding panel overlay.
4 Parameters:
5 - id (string, required): the ID of the off-canvas component.
6 - position (string, optional): the position of the off-canvas component ("start", "end", "top", or "bottom").
7 - title (string, optional): the title of the off-canvas component.
8 - btnTitle (string, optional): the text on the toggle button.
9 - btnColor (string, optional): the color of the toggle button.
10 - btnIcon (string, optional): the icon for the toggle button.
11 - btnClass (string, optional): additional classes for the toggle button.
12 - bodyClass (string, optional): additional classes for the off-canvas body.
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 - badgeContent (string, optional): the content of the badge on the toggle button.
20 - badgeColor (string, optional): the color of the badge.
21 -->
22 <#macro cOffcanvas id position='end' title='' btnTitle='' btnColor='primary' btnTitleShow=true btnIcon='' btnClass='' bodyClass='' backdrop='true' size='auto' btnSize='' targetUrl='' targetElement='' redirectForm=true badgeContent='' badgeColor=''>
23 <@deprecatedWarning args=deprecated />
24 <#if btnTitle !=''>
25 <a id="btn-${id}" class="btn<#if btnColor !=''> btn-${btnColor} </#if><#if btnSize?has_content> btn-${btnSize}</#if> ${btnClass}<#if badgeContent?has_content> position-relative</#if>" onclick="event.preventDefault();" data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="${backdrop}" href="#${id}" role="button" aria-controls="${id}" <#if badgeContent?has_content>style="overflow:inherit"</#if> title="${btnTitle}">
26 <#if btnIcon!=''><@parisIcon name=btnIcon /></#if>
27 <#if btnIcon!='' && btnTitle!='' && btnTitleShow><span class="ms-xs"></#if>
28 <#if btnTitleShow>${btnTitle}</#if>
29 <span class="visually-hidden">${btnTitle}</span>
30 <#if btnIcon!='' && btnTitle!='' && btnTitleShow></span></#if>
31 <#if badgeContent?has_content><#if badgeColor?has_content><#assign bgColor="bg-" + badgeColor><#else><#assign bgColor="bg-light text-dark"></#if>
32 <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill shadow border ${bgColor}" style="transform: translate(-50%, -50%) !important;">${badgeContent}</span>
33 </#if>
34 </a>
35 </#if>
36 <div class="offcanvas offcanvas-${position} <#if size !=''>w-${size}</#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">
37 <div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center">
38 <#if title!=''><h2 class="h4 offcanvas-title p-0 pe-xl m-0 me-xl" id="${id}Label">${title}</h2></#if>
39 <button type="button" class="border btn btn-light btn-rounded btn-icon end-0 mx-sm p-0" data-bs-dismiss="offcanvas" aria-label="Fermer">
40 <@parisIcon name='close' class='mt-xs' />
41 </button>
42 </div>
43 <div id="offcanvas-body-${id}" class="offcanvas-body<#if bodyClass?has_content> ${bodyClass}</#if> text-break ps-xl">
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>