cStepper.ftl
1 <#-- Macro: cStepper
2
3 Description: permet d'afficher les différentes étapes d'une procédure à suivre.
4
5 Parameters:
6
7 @param - id - string - optional - l'ID du stepper
8 @param - class - string - optional - ajoute une classe CSS au stepper
9 @param - steps - object - required - définit l'objet comprenant les informations pour chaque étape
10 @param - haspicto - boolean - optional - permet de définir si le stepper doit afficher les images comprises dans l'objet 'steps' (par défaut: false)
11 @param - hasidx - boolean - optional - affiche un index sous forme de puce sur une étape (par défaut: false)
12 @param - title - boolean - optional - affiche le contenu de 'title' de l'objet 'steps' avec un style de titre (par défaut: false)
13 @param - showMore - boolean - optional - permet d'afficher un bouton pour afficher le contenu de steps (par defaut: false)
14 @param - labelMore - string - optional - Libellé du bouton pour afficher le contenu (par défaut: i18n("theme.labelShowMore"))
15 @param - a11StatusMsg - string - optional - Libellé pour accessibilité inclu un texte de statut masqué
16 @param - params - string - optional - permet d'ajouter des parametres HTML au stepper
17 -->
18
19 <#macro cStepper steps=steps haspicto=false hasidx=false title=false showMore=false labelMore=i18n("theme.labelShowMore") a11StatusMsg='' class='' id='' params='' deprecated...>
20 <@deprecatedWarning args=deprecated />
21 <div class="stepper">
22 <ol class="stepper-list <#if hasidx> list-idx</#if><#if class!=''> ${class}</#if>"<#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if> >
23 <#if steps?has_content>
24 <#list steps as step>
25 <#if class='pie'>
26 <li class="step-${step?index + 1}<#if step.status!=''> ${step.status!}</#if>">
27 <span>${step?index + 1} - ${step.title!}</span>
28 <#if step.status?contains('active')><span class="visually-hidden">${a11StatusMsg}</span></#if>
29 </li>
30 <li class="bs-stepper-line"></li>
31 <#else>
32 <li<#if step.status??> class="${step.status}"</#if><#if step.status?? && (step.status == 'in-progress')>aria-current="step"</#if>>
33 <#if haspicto>
34 <figure class="p-3" data-idx="${step?index + 1}" aria-hidden="true">
35 <img src="${step.url!}" class="img-fluid" title="" alt="${step.title!}" aria-hidden="true">
36 </figure>
37 <#else>
38 <div class="idx" data-idx="${step?index + 1}" aria-hidden="true">
39 <#if step.status?? && (step.status == 'done')>
40 <@parisIcon name='check' title='' class='main-color' params='aria-label="Etape Validée"' />
41 <#else>
42 <span>${step?index + 1}</span>
43 </#if>
44 </div>
45 </#if>
46 <#if step.content??>
47 <#if showMore>
48 <#local content>
49 <div class="infostep-more">
50 <span class="extra visually-hidden">${step.content}</span>
51 </div>
52 <button type='button' class='btn btn-infostep-more main-color' aria-label="Afficher le contenu">
53 <@parisIcon name='plus' />
54 <span class="button-label">${labelMore}</span>
55 </button>
56 </#local>
57 </#if>
58 </#if>
59 <#if title>
60 <div class="stepper-title">
61 <h2 id="step-title-${step?index + 1}" class="h3 text-center font-weight-bold mt-2">${step.title!}</h2>
62 <#if step.content??><p class="infostep-more">${content!}</p></#if>
63 </div>
64 <#else>
65 <p id="step-title-${step?index + 1}" class="mt-2">${step.title!}<#if step.content??> ${content!}</#if></p>
66 </#if>
67 </li>
68 <li class="bs-stepper-container">
69 <#if step.status?? && (step.status == 'in-progress')>
70 <div class="bs-stepper-line start"></div>
71 <div class="bs-stepper-line end"></div>
72 <#else>
73 <div class="bs-stepper-line <#if step.status??>${step.status}</#if>"></div>
74 </#if>
75 </li>
76 </#if>
77 </#list>
78 </#if>
79 <#nested>
80 </ol>
81 </div>
82 </#macro>