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 <#if cancel || color = 'default' || color='btn-default' || color='btn-secondary' || color='secondary'>
35 <#local buttonColor = 'default' />
36 <#elseif !cancel && color=''>
37 <#local buttonColor = 'primary' />
38 <#else>
39 <#local buttonColor = color />
40 </#if>
41 <#-- Visibility of button title -->
42 <#local displayTitleClass = displaySettings( hideTitle,'inline-flex') />
43 <#-- Visibility of button title: backwards compatibility with Lutece v6, BS3 only -->
44 <#local showTitleClass = '' />
45 <#if style != ''>
46 <#if style?contains('card-control')>
47 <#if style?contains('collapse')>
48 <#local widgetAction = 'collapse' />
49 <script>
50 $( function() {
51 <#if buttonIcon = 'minus'>
52 $("${buttonTargetId}").addClass("show");
53 <#else>
54 $("${buttonTargetId}").addClass("collapse");
55 </#if>
56 });
57 </script>
58 <#elseif style?contains('remove')>
59 <#local widgetAction = 'remove' />
60 </#if>
61 <#local btnStyle = style?replace('collapse|remove', '', 'r')?trim />
62 <#elseif style?contains('modal')>
63 <#local widgetAction = 'modal' />
64 <#local btnStyle = style?replace('modal', '', 'r')?trim />
65 <#else>
66 <#local btnStyle = style />
67 </#if>
68 </#if>
69 <#-- Size class -->
70 <#if size == 'xs'>
71 <#local buttonSize = 'sm' />
72 <#elseif size == 'sm' || size == ''>
73 <#local buttonSize = '' />
74 <#elseif size == 'lg'>
75 <#local buttonSize = size />
76 <#else>
77 <#local buttonSize = '' />
78 </#if>
79 <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>>
80 <#if buttonIcon!='' && iconPosition='left'>
81 <#local buttonIcon = buttonIcon />
82 <@icon style=buttonIcon />
83 </#if>
84 <#local nestedContent><#nested /></#local>
85 <#local nestedContent = nestedContent?trim />
86 <#if nestedContent=''>
87 <#if displayTitleClass!=''><span class="${displayTitleClass}"></#if>
88 ${title}
89 <#if displayTitleClass!=''></span></#if>
90 </#if>
91 <#if nestedContent!='' && !dropdownMenu><#if displayTitleClass!=''><span class="${displayTitleClass}"></#if><#nested><#if displayTitleClass!=''></span></#if></#if>
92 <#if buttonIcon!='' && iconPosition='right'>
93 <#local buttonIcon = buttonIcon />
94 <@icon style=buttonIcon />
95 </#if>
96 </button>
97 <#if dropdownMenu>
98 <ul class="dropdown-menu"<#if id!=''> id="${id}-content" aria-labelledby="${id}-content"</#if>>
99 <#nested>
100 </ul>
101 </#if>
102 </#macro>