templates/pages/_blocks/timeline_block.html.twig line 1

Open in your IDE?
  1. {# templates/blocks/timeline_block.html.twig #}
  3. {% set maxEvents = (content.maxNumberEvents|default(7)) %}
  4. {% set id = "timeline-block-" ~ random() %}
  5. {% set eventsRaw = content.events|default([]) %}
  6. {% set eventsSorted = eventsRaw|sort((a,b) => b.dateEvent <=> a.dateEvent) %}
  7. {% set totalEvents = eventsSorted|length %}
  9. {# 1) On prend uniquement les events visibles #}
  10. {% set visibleEvents = eventsSorted|slice(0, maxEvents) %}
  12. <div
  13. id="{{ id }}" class="timeline-block {{ content.isTextRight is defined and content.isTextRight == true ? 'col-lg-6 col-md-6 col-sm-12' : '' }}">
  15. {# ---------- Frise chronologique ---------- #}
  16. <div class="timeline-events">
  18. {% set lastYear = null %}
  19. {% for ev in visibleEvents %}
  20. {% set year = ev.dateEvent|slice(0,4) %}
  21. {% set side = (loop.index0 % 2 == 0) ? 'right' : 'left' %}
  23. {# Badge année seulement si on a un event visible cette année #}
  24. {% if year != lastYear %}
  25. <div class="timeline-year">
  26. <span class="timeline-year-badge">{{ year }}</span>
  27. </div>
  28. {% set lastYear = year %}
  29. {% endif %}
  31. {% set imgUrl = '' %}
  32. {% if ev.isExternalImageEvent is defined and ev.isExternalImageEvent and ev.externalImageEvent|default('') %}
  33. {% set imgUrl = ev.externalImageEvent %}
  34. {% elseif ev.internalImageEvent is defined and ev.internalImageEvent %}
  35. {% if ev.internalImageEvent.url is defined and ev.internalImageEvent.url %}
  36. {% set imgUrl = sulu_media_url(ev.internalImageEvent, '400x') %}
  37. {% elseif ev.internalImageEvent.id is defined and ev.internalImageEvent.id %}
  38. {% set resolvedEventImage = sulu_resolve_media(ev.internalImageEvent.id, app.request.locale) %}
  39. {% set imgUrl = resolvedEventImage ? sulu_media_url(resolvedEventImage, '400x') : '' %}
  40. {% endif %}
  41. {% endif %}
  43. <div class="timeline-item timeline-item--{{ side }}">
  44. <div class="timeline-item-line">
  45. <span class="timeline-dot" aria-hidden="true"></span>
  46. </div>
  48. <article class="timeline-card">
  49. <div class="timeline-card-body">
  50. <div class="timeline-card-top">
  51. <div class="timeline-pictogram">
  52. {{ getLucidIcon('medal') }}
  53. </div>
  55. <div class="timeline-text">
  56. <div class="timeline-title">{{ ev.titleTextEvent|default('') }}</div>
  57. <div class="timeline-desc">{{ ev.descTextEvent|default('') }}</div>
  58. </div>
  60. {% if imgUrl %}
  61. <figure class="timeline-logo">
  62. <img src="{{ imgUrl }}" alt="{{ ev.alternativeTextImageEvent|default(ev.titleTextEvent|default('')) }}" loading="lazy" decoding="async"/>
  63. </figure>
  64. {% endif %}
  65. </div>
  66. </div>
  67. </article>
  68. </div>
  69. {% endfor %}
  71. </div>
  73. {% if totalEvents > maxEvents %}
  74. <div class="timeline-footer">
  75. <button type="button" class="timeline-toggle">
  76. {{ 'timeline.see_all'|trans }}
  77. </button>
  78. </div>
  79. {% endif %}
  81. <script>
  82. (function () {
  83. // Initialiser la modale si elle n'est pas déjà initialisée
  84. function initTimelineModal() {
  85. const boxTimelineViewer = document.getElementById("box-timeline-viewer");
  86. if (!boxTimelineViewer || window.timelineModalInitialized) {
  87. return;
  88. }
  90. const eventsContainer = boxTimelineViewer.querySelector("#timeline-events-full");
  91. const closeBtn = boxTimelineViewer.querySelector("#close-timeline") || boxTimelineViewer.querySelector(".icon-x");
  93. let timelineData = {};
  95. // Charger les données depuis le script JSON
  96. function loadTimelineData() {
  97. const timelineDataScript = document.querySelector('script[type="application/json"][data-timeline-id="{{ id }}"]');
  98. if (timelineDataScript) {
  99. try {
  100. const dataText = timelineDataScript.textContent.trim();
  101. timelineData = JSON.parse(dataText);
  102. } catch (e) {
  103. {# console.error("Erreur lors du chargement des données de la timeline:", e); #}
  104. }
  105. }
  106. }
  108. // Appliquer les styles CSS depuis les données
  109. function applyStyles() {
  110. if (!timelineData.content || !boxTimelineViewer) {
  111. return;
  112. }
  114. const content = timelineData.content;
  116. // Créer un élément style pour les variables CSS
  117. let styleElement = boxTimelineViewer.querySelector('style[data-timeline-styles]');
  118. if (!styleElement) {
  119. styleElement = document.createElement('style');
  120. styleElement.setAttribute('data-timeline-styles', '');
  121. boxTimelineViewer.appendChild(styleElement);
  122. }
  124. const css = `
  125. #box-timeline-viewer.timeline-modal {
  126. --color-pictogram: ${content.colorPictogram || '#FF5C00'};
  127. --bg-color-pictogram: ${content.backgroundColorPictogram || '#42D7FF'};
  128. --color-title: ${content.colorTitle || '#6C6C6C'};
  129. --font-size-title: ${content.fontSizeTitle || '10px'};
  130. --font-weight-title: ${content.fontWeightTitle || '700'};
  131. --color-desc: ${content.colorDesc || '#1D1D1D'};
  132. --font-size-desc: ${content.fontSizeDesc || '14px'};
  133. --font-weight-desc: ${content.fontWeightDesc || '500'};
  134. }
  135. #box-timeline-viewer .timeline-events-full {
  136. --color-pictogram: ${content.colorPictogram || '#FF5C00'};
  137. --bg-color-pictogram: ${content.backgroundColorPictogram || '#42D7FF'};
  138. --color-title: ${content.colorTitle || '#6C6C6C'};
  139. --font-size-title: ${content.fontSizeTitle || '10px'};
  140. --font-weight-title: ${content.fontWeightTitle || '700'};
  141. --color-desc: ${content.colorDesc || '#1D1D1D'};
  142. --font-size-desc: ${content.fontSizeDesc || '14px'};
  143. --font-weight-desc: ${content.fontWeightDesc || '500'};
  144. }
  145. `;
  147. styleElement.textContent = css;
  148. }
  150. // Rendre la frise chronologique complète
  151. function renderTimeline() {
  152. if (!eventsContainer || !timelineData.events) {
  153. return;
  154. }
  156. // S'assurer que events est un tableau (peut être un objet si JSON mal sérialisé)
  157. let events = timelineData.events;
  158. if (!Array.isArray(events)) {
  159. // Convertir l'objet en tableau si nécessaire
  160. events = Object.values(events);
  161. }
  163. if (events.length === 0) {
  164. eventsContainer.innerHTML = "<p>{{ 'timeline.no_event'|trans }}</p>";
  165. return;
  166. }
  168. // Trier les événements par date décroissante
  169. const sortedEvents = [...events].sort((a, b) => {
  170. const dateA = a.dateEvent || "";
  171. const dateB = b.dateEvent || "";
  172. return dateB.localeCompare(dateA);
  173. });
  175. // Générer le HTML de la timeline
  176. let html = "";
  177. let lastYear = null;
  179. sortedEvents.forEach((ev, index) => {
  180. const year = ev.dateEvent ? ev.dateEvent.slice(0, 4) : "";
  181. const side = index % 2 === 0 ? "right" : "left";
  183. // Badge année seulement si on a un event visible cette année
  184. if (year && year !== lastYear) {
  185. html += `<div class="timeline-year"><span class="timeline-year-badge">${year}</span></div>`;
  186. lastYear = year;
  187. }
  189. // Récupérer l'URL de l'image
  190. let imgUrl = "";
  191. if (timelineData.eventImageUrls && timelineData.eventImageUrls[index]) {
  192. imgUrl = timelineData.eventImageUrls[index];
  193. } else if (ev.isExternalImageEvent && ev.externalImageEvent) {
  194. imgUrl = ev.externalImageEvent;
  195. } else if (ev.internalImageEvent && ev.internalImageEvent.url) {
  196. imgUrl = ev.internalImageEvent.url;
  197. }
  199. const title = ev.titleTextEvent || "";
  200. const desc = ev.descTextEvent || "";
  201. const alt = ev.alternativeTextImageEvent || title;
  203. // Échapper les caractères HTML pour éviter les injections XSS
  204. const escapeHtml = (text) => {
  205. const div = document.createElement('div');
  206. div.textContent = text;
  207. return div.innerHTML;
  208. };
  210. html += `
  211. <div class="timeline-item timeline-item--${side}">
  212. <div class="timeline-item-line">
  213. <span class="timeline-dot" aria-hidden="true"></span>
  214. </div>
  215. <article class="timeline-card">
  216. <div class="timeline-card-body">
  217. <div class="timeline-card-top">
  218. <div class="timeline-pictogram">
  219. ${timelineData.svgIcon || ""}
  220. </div>
  221. <div class="timeline-text">
  222. <div class="timeline-title">${escapeHtml(title)}</div>
  223. <div class="timeline-desc">${escapeHtml(desc)}</div>
  224. </div>
  225. ${imgUrl ? `<figure class="timeline-logo"><img src="${escapeHtml(imgUrl)}" alt="${escapeHtml(alt)}" loading="lazy" decoding="async"/></figure>` : ""}
  226. </div>
  227. </div>
  228. </article>
  229. </div>
  230. `;
  231. });
  233. eventsContainer.innerHTML = html;
  235. // Ajuster la hauteur de la ligne verticale pour qu'elle couvre tous les événements
  236. setTimeout(() => {
  237. const firstItem = eventsContainer.querySelector('.timeline-item');
  238. const lastItem = Array.from(eventsContainer.querySelectorAll('.timeline-item')).pop();
  239. if (firstItem && lastItem) {
  240. const firstRect = firstItem.getBoundingClientRect();
  241. const lastRect = lastItem.getBoundingClientRect();
  242. const containerRect = eventsContainer.getBoundingClientRect();
  243. // Calculer la position du premier point (centre du dot du premier item)
  244. const firstDot = firstItem.querySelector('.timeline-dot');
  245. const lastDot = lastItem.querySelector('.timeline-dot');
  246. if (firstDot && lastDot) {
  247. const firstDotRect = firstDot.getBoundingClientRect();
  248. const lastDotRect = lastDot.getBoundingClientRect();
  249. const lineTop = firstDotRect.top - containerRect.top;
  250. const lineBottom = containerRect.bottom - lastDotRect.bottom;
  251. const lineHeight = containerRect.height - lineTop - lineBottom;
  252. if (lineHeight > 0) {
  253. // Créer ou mettre à jour le style pour la ligne
  254. let styleElement = eventsContainer.querySelector('style[data-timeline-line-height]');
  255. if (!styleElement) {
  256. styleElement = document.createElement('style');
  257. styleElement.setAttribute('data-timeline-line-height', '');
  258. eventsContainer.appendChild(styleElement);
  259. }
  260. styleElement.textContent = `
  261. #box-timeline-viewer .timeline-events-full::before {
  262. top: ${lineTop}px !important;
  263. height: ${lineHeight}px !important;
  264. bottom: auto !important;
  265. }
  266. `;
  267. }
  268. }
  269. }
  270. }, 100);
  271. }
  273. // Gérer la fermeture
  274. function closeModal() {
  275. boxTimelineViewer.classList.remove("opened");
  276. boxTimelineViewer.classList.add("closing");
  277. document.body.classList.remove("modale_opened");
  279. setTimeout(() => {
  280. boxTimelineViewer.classList.remove("closing");
  281. // Utiliser la bonne transformation selon la taille d'écran
  282. const isMobile = window.innerWidth <= 768;
  283. boxTimelineViewer.style.transform = isMobile ? "translateY(100vh)" : "translate(-50%, 100vh)";
  284. }, 500);
  285. }
  287. if (closeBtn) {
  288. closeBtn.addEventListener("click", closeModal);
  289. }
  291. document.addEventListener("click", function (e) {
  292. if (!boxTimelineViewer.classList.contains("opened")) {
  293. return;
  294. }
  295. if (boxTimelineViewer.contains(e.target)) {
  296. return;
  297. }
  298. closeModal();
  299. });
  301. // Fermer avec Escape
  302. document.addEventListener("keydown", (e) => {
  303. if (e.key === "Escape" && boxTimelineViewer.classList.contains("opened")) {
  304. closeModal();
  305. }
  306. });
  308. // Charger les données au démarrage
  309. loadTimelineData();
  311. // Exposer la fonction d'ouverture globalement
  312. window.openTimelineModal = function (timelineDataParam) {
  313. if (timelineDataParam) {
  314. timelineData = timelineDataParam;
  315. } else {
  316. loadTimelineData();
  317. }
  319. // Appliquer les styles CSS
  320. applyStyles();
  322. // Ajouter la classe timeline-modal pour les styles spécifiques
  323. boxTimelineViewer.classList.add("timeline-modal");
  325. if (boxTimelineViewer.parentElement !== document.body) {
  326. document.body.appendChild(boxTimelineViewer);
  327. }
  329. boxTimelineViewer.classList.add("opened");
  330. boxTimelineViewer.classList.remove("closing");
  331. document.body.classList.add("modale_opened");
  333. // Rendre la timeline
  334. renderTimeline();
  335. };
  337. window.timelineModalInitialized = true;
  338. }
  340. // Initialiser la modale
  341. if (document.readyState === 'loading') {
  342. document.addEventListener('DOMContentLoaded', initTimelineModal);
  343. } else {
  344. initTimelineModal();
  345. }
  347. // Gestion du bouton "Voir tout"
  348. const root = document.currentScript.closest('.timeline-block');
  349. if (!root) return;
  351. const btn = root.querySelector('.timeline-toggle');
  352. if (!btn) return;
  354. btn.addEventListener('click', function (e) {
  355. e.stopPropagation();
  356. // Récupérer les données de la timeline depuis le script JSON
  357. const timelineDataScript = document.querySelector('script[type="application/json"][data-timeline-id="{{ id }}"]');
  358. let timelineData = {};
  360. if (timelineDataScript) {
  361. try {
  362. timelineData = JSON.parse(timelineDataScript.textContent);
  363. } catch (e) {
  364. {# console.error('Erreur lors du chargement des données de la timeline:', e); #}
  365. }
  366. }
  368. // S'assurer que la modale est initialisée
  369. if (!window.timelineModalInitialized) {
  370. initTimelineModal();
  371. }
  373. // Ouvrir la modale via la fonction globale
  374. if (window.openTimelineModal) {
  375. window.openTimelineModal(timelineData);
  376. } else {
  377. {# console.error('La fonction openTimelineModal n\'est pas disponible'); #}
  378. }
  379. });
  380. })();
  381. </script>
  383. </div>
  385. {% if content.isTextRight is defined and content.isTextRight == true %}
  386. <div class="timeline-text-right {{ content.isTextRight is defined and content.isTextRight == true ? 'col-lg-6 col-md-6 col-sm-12' : '' }}">
  387. {{ content.textToRight|default('')|raw }}
  388. </div>
  389. {% endif %}
  391. {# Modale "Voir tout" pour la frise chronologique #}
  392. {% include 'pages/_includes/details/_timeline-modal.html.twig' %}
  394. {# Réindexer le tableau pour garantir une sérialisation JSON en tableau et non en objet #}
  395. {% set eventsReindexed = [] %}
  396. {% set eventImageUrls = [] %}
  397. {% for ev in eventsSorted %}
  398. {% set evCdnUrl = '' %}
  399. {% if ev.isExternalImageEvent|default(false) and ev.externalImageEvent|default('') %}
  400. {% set evCdnUrl = ev.externalImageEvent %}
  401. {% elseif ev.internalImageEvent is defined and ev.internalImageEvent %}
  402. {% set evCdnUrl = sulu_media_url(ev.internalImageEvent, '400x') %}
  403. {% endif %}
  404. {% set eventsReindexed = eventsReindexed|merge([ev]) %}
  405. {% set eventImageUrls = eventImageUrls|merge([evCdnUrl]) %}
  406. {% endfor %}
  408. {% set timeline_modal_svg_icon_json = getLucidIcon('medal')|json_encode %}
  410. {# Données de la timeline complète pour JavaScript #}
  411. <script type="application/json" data-timeline-id="{{ id }}">
  412. {
  413. "events": {{ eventsReindexed|json_encode|raw }},
  414. "eventImageUrls": {{ eventImageUrls|json_encode|raw }},
  415. "svgIcon": {{ timeline_modal_svg_icon_json|raw }},
  416. "content": {
  417. "colorPictogram": "{{ content.colorPictogram|default('#FF5C00') }}",
  418. "backgroundColorPictogram": "{{ content.backgroundColorPictogram|default('#42D7FF') }}",
  419. "colorTitle": "{{ content.colorTitle|default('#6C6C6C') }}",
  420. "fontSizeTitle": "{{ content.fontSizeTitle|default('10') ~ content.fontSizeUnitTitle|default('px') }}",
  421. "fontWeightTitle": "{{ content.fontWeightTitle|default('700') }}",
  422. "colorDesc": "{{ content.colorDesc|default('#1D1D1D') }}",
  423. "fontSizeDesc": "{{ content.fontSizeDesc|default('14') ~ content.fontSizeUnitDesc|default('px') }}",
  424. "fontWeightDesc": "{{ content.fontWeightDesc|default('500') }}"
  425. }
  426. }
  427. </script>
  428. <style>
  429. .timeline-block#{{ id }}
  430. {
  431. --color-pictogram: {{content.colorPictogram|default('#FF5C00')}}
  432. ;
  433. --bg-color-pictogram: {{content.backgroundColorPictogram|default('#42D7FF')}}
  434. ;
  435. --color-title: {{content.colorTitle|default('#6C6C6C')}}
  436. ;
  437. --font-size-title: {{content.fontSizeTitle|default('10') ~ content.fontSizeUnitTitle|default('px')}}
  438. ;
  439. --font-weight-title: {{content.fontWeightTitle|default('700')}}
  440. ;
  441. --color-desc: {{content.colorDesc|default('#1D1D1D')}}
  442. ;
  443. --font-size-desc: {{content.fontSizeDesc|default('14') ~ content.fontSizeUnitDesc|default('px')}}
  444. ;
  445. --font-weight-desc: {{content.fontWeightDesc|default('500')}}
  446. ;
  447. }
  448. </style>