cCarousel.ftl
1 <#-- Macro: cCarousel
2
3 Description: affiche un carousel d'image ou de vidéo.
4
5 Parameters:
6
7 @param - id - string - optional - l'ID du carousel (par défaut: 'manege')
8 @param - class - string - optional - permet d'ajouter une classe CSS au carousel
9 @param - items - string - optional - définit la liste des images du carousel. Si vide le contenu "#nested" sera utilisé.
10 @param - indicatorSize - number - optional - Si supérieur à 1 affiche des puces égales au nombre d'image -il sera toujours égal au nombre d'image !- Si items n'est pas vide le calcul se fera sur la longueur de la séquence (par défaut: 1)
11 @param - controls - boolean - optional - permet d'afficher les boutons 'Previous' et 'Next' pour naviguer dans le carousel (par défaut: false)
12 @param - slideControls - boolean - optional - permet d'afficher les boutons 'pause', 'play' et 'stop' dans le carousel (par défaut: false)
13 @param - pagination - boolean - optional - permet d'afficher la pagination pour naviguer dans le carousel (par défaut: false)
14 @param - label - string - optional - permet de définir l'aria-label du carousel (par défaut: 'Carousel')
15 @param - labelPrev - string - optional - permet de définir le titre du bouton 'Previous'
16 @param - labelNext - string - optional - permet de définir le titre du bouton 'Next'
17 @param - params - string - optional - permet d'ajouter des parametres HTML au carousel
18 -->
19 <#macro cCarousel id='manege' items='' indicatorSize=1 controls=false slideControls=false pagination=false label='Carousel' labelPrev='' labelNext='' class='' params='' deprecated...>
20 <@deprecatedWarning args=deprecated />
21 <#local itemSize = indicatorSize />
22 <#if items != ''><#local itemSize = items?size - 1 /></#if>
23 <#if slideControls>
24 <div id="carouselButtons-${id}" class="d-flex justify-content-center py-2">
25 <button id="playButton-${id}" type="button" class="btn btn-tertiary" size="mini" aria-label="Démarrer la lecture du carrousel">
26 <@parisIcon name='play' />
27 </button>
28 <button id="pauseButton-${id}" type="button" class="btn btn-tertiary" size="mini" aria-label="Mettre le carrousel en pause">
29 <@parisIcon name='refresh' />
30 </button>
31 <button id="stopButton-${id}" type="button" class="btn btn-tertiary" size="mini" aria-label="Arrêter le carrousel et revenir à la première diapositive">
32 <@parisIcon name='close' />
33 </button>
34 </div>
35 </#if>
36 <div id="${id!}" class="carousel slide carousel-themed show-neighbors" data-bs-ride="carousel" aria-roledescription="carousel" aria-label="${label}">
37 <#if pagination>
38 <#if itemSize > 1>
39 <ol class="carousel-indicators pagination">
40 <#list 0..( itemSize - 1) as idx>
41 <li class="page-item<#if idx=0> active</#if>" data-bs-target="#${id!}" data-bs-slide-to="${idx}" aria-label="Slide ${idx}" aria-selected="false" aria-controls="carousel-item-${idx}" tabindex="0"><span class="page-link">${idx+1}</span></li>
42 </#list>
43 </ol>
44 </#if>
45 </#if>
46 <div class="carousel-inner">
47 <#if items != ''>
48 <#local itemIdx = 1>
49 <#local isActive = true>
50 <#list items as cItem>
51 <@cCarouselItem img=cItem.img active=isActive idx=itemIdx max=itemSize alt=cItem.alt title=cItem.title subtitle=cItem.subTitle class=cItem.class params=cItem.class />
52 <#local itemIdx = itemIdx + 1 />
53 <#local isActive = false />
54 </#list>
55 <#else>
56 <#nested>
57 </#if>
58 </div>
59 <#if controls>
60 <button class="carousel-control-prev" data-bs-target="#${id!}" data-bs-slide="prev" aria-label="élément précédent">
61 <span class="carousel-bg-control">
62 <@parisIcon name='arrow-left' />
63 <span class="visually-hidden">${labelPrev}</span>
64 </span>
65 </button>
66 <button class="carousel-control-next" data-bs-target="#${id!}" data-bs-slide="next" aria-label="élément suivant">
67 <span class="carousel-bg-control">
68 <@parisIcon name='arrow-right' />
69 <span class="visually-hidden">${labelNext}</span>
70 </span>
71 </button>
72
73 </#if>
74 </div>
75
76 <script type="module" src="${commonsSiteThemePath}${commonsSiteJsPath}/modules/theme-carousel.js"></script>
77 <#if slideControls>
78 <script>
79 document.addEventListener("DOMContentLoaded", function (event) {
80 var carouselElement = document.getElementById('${id}');
81 var carousel = bootstrap.Carousel.getOrCreateInstance(carouselElement);
82
83 document.getElementById('playButton-${id}').addEventListener('click', function () {
84 carousel.cycle();
85 });
86
87 document.getElementById('pauseButton-${id}').addEventListener('click', function () {
88 carousel.pause();
89 });
90
91 document.getElementById('stopButton-${id}').addEventListener('click', function () {
92 carousel.pause();
93 carousel.to(0);
94 });
95 });
96 </script>
97 </#if>
98 </#macro>