cToast.ftl
1 <#-- Macro: initToast
2
3 Description: Initializes a Polipop instance for displaying Bootstrap toast notifications.
4
5 Parameters:
6 @param - class - string - optionnel : Permet d'ajouter des classes CSS supplémentaires au conteneur de toasts.
7 @param - id - string - optionnel : Identifiant unique du conteneur de toasts.
8 @param - position - string - optionnel (par défaut : 'position-fixed') : Position CSS du conteneur de toasts. Valeurs possibles : 'position-fixed', 'position-static', etc.
9 @param - showAll - boolean - optionnel (par défaut : true) : Indique si tous les toasts doivent être affichés au chargement de la page.
10 @param - animation - boolean - optionnel (par défaut : true) : Active les animations des toasts si true.
11 @param - duration - number - optionnel (par défaut : 2000) : Durée d'affichage des toasts en millisecondes.
12 @param - triggerId - string - optionnel : Identifiant de l'élément déclencheur (par exemple un bouton) pour afficher les toasts.
13 @param - params - string - optionnel : Paramètres supplémentaires à ajouter au conteneur de toasts.
14 @param - deprecated - string - optionnel : Paramètres deprecated.
15 -->
16 <#macro cInitToast class='' id='' position='position-fixed' showAll=true animation=true duration=2000 triggerId='' params='' deprecated...>
17 <@deprecatedWarning args=deprecated />
18 <#assign styleParams='' />
19 <#assign toastParams=params />
20 <#if duration?number == 0><#assign autohide=false ><#else><#assign autohide=true ></#if>
21 <#if position !=''><#assign styleParams> style="${position}"</#assign></#if>
22 <#if styleParams !=''><#assign toastParams += styleParams /></#if>
23 <div<#if id !=''> id="${id}"</#if> class="toast-container ${position} p-3<#if class !=''> ${class}</#if>"<#if toastParams !=''> ${toastParams}</#if>>
24 <#nested>
25 </div>
26 <script>
27 document.addEventListener("DOMContentLoaded", function() {
28 // Récupérer le conteneur spécifique par son identifiant
29 var container = document.getElementById('${id}');
30 var toastElList = [].slice.call(container.querySelectorAll('.toast'));
31 var option = { delay: ${duration}, animation: ${animation?c}, autohide: ${autohide?c} };
32 var toastList = toastElList.map(function(toastEl) {
33 return new bootstrap.Toast(toastEl, option);
34 });
35
36 // Afficher les toasts au chargement si showAll est vrai
37 <#if showAll>
38 toastList.forEach(function(toast) {
39 toast.show();
40 });
41 </#if>
42
43 // Ajouter un écouteur d'événement sur le bouton spécifié si triggerId est fourni
44 <#if triggerId?has_content>
45 var toastTrigger = document.getElementById('${triggerId}');
46 if (toastTrigger) {
47 toastTrigger.addEventListener('click', function() {
48 toastList.forEach(function(toast) {
49 toast.show();
50 });
51 });
52 }
53 </#if>
54 });
55 </script>
56 </#macro>
57 <#-- Macro: addToast
58
59 Description: Adds a Bootstrap toast notification to the page.
60
61 Parameters:
62 @param - title - string - optional : titre de la notification toast.
63 @param - content - string - optional : contenu de la notification toast.
64 @param - imgUrl - string - optional : url de l'image à afficher dans le head de la notification toast.
65 @param - type - string - optional : type de notification toast. Peut être "info", "success", "warning" ou "error".
66 @param - delay - number - required : durée de l'apparition de la notification toast.
67 @param - dismiss - boolean - required : affichage de l'icone de fermeture, à true par défaut.
68 @param - id - string - optional - l'ID de la notification toast
69 @param - class - string - optional - permet d'ajouter une classe CSS au tableau
70 @param - deprecated - string - optionnel : paramètres deprecated.
71 -->
72 <#macro cToast title='' content='' imgUrl='' type='' delay=2000 dismiss=true class='' id='' params='' deprecated...>
73 <@deprecatedWarning args=deprecated />
74 <div<#if id !=''> id="${id}"</#if> class="toast<#if class !=''> ${class}</#if><#if type !=''> ${type}</#if>" role="alert" data-autohide="${(delay gt 0)?string('true','false')}"<#if delay gt 0> data-delay="${delay}"</#if> aria-live="assertive" aria-atomic="true"<#if params !=''> ${params}"</#if>>
75 <#if title !=''>
76 <div class="toast-header">
77 <#if imgUrl !=''><img src="${imgUrl}" class="rounded me-2"></#if>
78 <strong class="me-auto">${title}</strong>
79 <#if delay = 0><button type="button" class="ms-auto btn-close" data-bs-dismiss="toast" aria-label="#i18n{portal.util.labelClose}">×</button></#if>
80 </div>
81 <div class="toast-body">
82 ${content}
83 <#nested>
84 </div>
85 <#else>
86 <div class="d-flex align-items-center">
87 <div class="toast-body me-auto<#if !dismiss> w-100</#if>">
88 ${content}
89 <#nested>
90 </div>
91 <#if dismiss><button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="#i18n{portal.util.labelClose}"></button></#if>
92 </div>
93 </#if>
94 </div>
95 </#macro>