button.ftl
1 <#-- Macro: button
2
3 Description: Generates a button with customizable attributes.
4
5 Parameters:
6 - name (string, optional): the name attribute of the button.
7 - id (string, optional): the ID attribute of the button.
8 - type (string, optional): the type of the button, defaults to 'button'.
9 - size (string, optional): the size of the button.
10 - color (string, optional): the color of the button.
11 - style (string, optional): the style of the button.
12 - class (string, optional): additional CSS classes to add to the button.
13 - params (string, optional): additional parameters to add to the button.
14 - value (string, optional): the value attribute of the button.
15 - title (string, optional): the title attribute of the button.
16 - tabIndex (string, optional): the tab index of the button.
17 - hideTitle (array, optional): an array of breakpoints to hide the button title.
18 - showTitle (boolean, optional): whether to show the button title.
19 - showTitleXs (boolean, optional): whether to show the button title on XS breakpoint.
20 - showTitleSm (boolean, optional): whether to show the button title on SM breakpoint.
21 - showTitleMd (boolean, optional): whether to show the button title on MD breakpoint.
22 - showTitleLg (boolean, optional): whether to show the button title on LG breakpoint.
23 - buttonIcon (string, optional): the icon to display in the button.
24 - disabled (boolean, optional): whether the button is disabled.
25 - iconPosition (string, optional): the position of the icon, either 'left' or 'right'.
26 - dropdownMenu (boolean, optional): whether the button is part of a dropdown menu.
27 - cancel (boolean, optional): whether the button cancels a form.
28 - formId (string, optional): the ID of the form the button belongs to.
29 - buttonTargetId (string, optional): the ID of the target element the button controls.
30 - deprecated (string, optional): a message indicating that the macro is deprecated.
31 -->
32 <#macro button name='' id='' type='button' size='' color='' style='' class='' value='' title='' tooltip='' tabIndex='' hideTitle=[] showTitle=true showTitleXs=true showTitleSm=true showTitleMd=true showTitleLg=true buttonIcon='' disabled=false iconPosition='left' dropdownMenu=false cancel=false formId='' buttonTargetId='' params='' deprecated...>
33 <@deprecatedWarning args=deprecated />
34 <#local params = params />
35 <#if cancel || color = 'default' || color='btn-default' || color='btn-secondary' || color='secondary'>
36 <#local buttonColor = 'default' />
37 <#elseif !cancel && color=''>
38 <#local buttonColor = 'primary' />
39 <#else>
40 <#local buttonColor = color />
41 </#if>
42 <#-- Visibility of button title -->
43 <#local displayTitleClass = displaySettings( hideTitle,'inline-flex') />
44 <#-- Visibility of button title: backwards compatibility with Lutece v6, BS3 only -->
45 <#local showTitleClass = '' />
46 <#if style != ''>
47 <#if style?contains('card-control')>
48 <#if style?contains('collapse')>
49 <#local widgetAction = 'collapse' />
50 <script>
51 $( function() {
52 <#if buttonIcon = 'minus'>
53 $("${buttonTargetId}").addClass("show");
54 <#else>
55 $("${buttonTargetId}").addClass("collapse");
56 </#if>
57 });
58 </script>
59 <#elseif style?contains('remove')>
60 <#local widgetAction = 'remove' />
61 </#if>
62 <#local btnStyle = style?replace('collapse|remove', '', 'r')?trim />
63 <#elseif style?contains('modal')>
64 <#local widgetAction = 'modal' />
65 <#local btnStyle = style?replace('modal', '', 'r')?trim />
66 <#else>
67 <#local btnStyle = style />
68 </#if>
69 </#if>
70 <#-- Size class -->
71 <#local buttonSize = '' />
72 <#if size?starts_with('style') == true >
73 <#local params = params + ' ' + size />
74 <#else>
75 <#local buttonSize = size />
76 </#if>
77 <button class="<#if style!='close'>btn</#if><#if buttonSize!=''> btn-${buttonSize}</#if><#if buttonColor!=''> btn-${buttonColor}</#if><#if btnStyle?? && btnStyle!=''> ${btnStyle}</#if><#if dropdownMenu> dropdown-toggle</#if><#if class!=''> ${class}</#if>" type="${type}"<#if tooltip!=''>title="${tooltip}"<#else><#if title!=''> title="${title}"</#if></#if><#if name!=''> name="${name}"</#if><#if id!=''> id="${id}"</#if><#if value!=''> value="${value}"</#if><#if params!=''> ${params}</#if><#if disabled> disabled</#if><#if dropdownMenu> data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"</#if><#if widgetAction?? && widgetAction!=''><#if widgetAction = 'collapse' || widgetAction = 'modal'> data-bs-toggle="${widgetAction}"<#elseif widgetAction = 'remove'> data-bs-dismiss="alert"</#if></#if><#if buttonTargetId!=''> data-bs-target="${buttonTargetId}"</#if><#if cancel> formnovalidate</#if><#if formId!=''> form="${formId}"</#if>>
78 <#if buttonIcon!='' && iconPosition='left'>
79 <#local buttonIcon = buttonIcon + ' me-1' />
80 <@icon style=buttonIcon />
81 </#if>
82 <#local nestedContent><#nested /></#local>
83 <#local nestedContent = nestedContent?trim />
84 <#if nestedContent=''>
85 <#if displayTitleClass!=''><span class="${displayTitleClass}"></#if>
86 ${title}
87 <#if displayTitleClass!=''></span></#if>
88 </#if>
89 <#if nestedContent!='' && !dropdownMenu><#if displayTitleClass!=''><span class="${displayTitleClass}"></#if><#nested><#if displayTitleClass!=''></span></#if></#if>
90 <#if buttonIcon!='' && iconPosition='right'>
91 <#local buttonIcon = buttonIcon + ' ms-1' />
92 <@icon style=buttonIcon />
93 </#if>
94 </button>
95 <#if dropdownMenu>
96 <ul class="dropdown-menu"<#if id!=''> id="${id}-content" aria-labelledby="${id}-content"</#if>>
97 <#nested>
98 </ul>
99 </#if>
100 </#macro>