popup fiche id site pilotes

web/themes/custom/reha/dist/css/bundle.css

@@ -1656,6 +1656,36 @@ aside.layout-sidebar-second footer.view-footer p {
     padding: 0;
   }
 }
+#popup-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+#popup-overlay img {
+  max-width: 90%;
+  max-height: 90%;
+  border-radius: 8px;
+  box-shadow: 0 0 20px #000;
+}
+
+#popup-overlay .popup-close {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  color: white;
+  font-size: 40px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
 /*pages*/
 .home-page-layout-content {
   width: 100%;

web/themes/custom/reha/dist/popup-file-sitepilote.js

@@ -0,0 +1,27 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const imageLinks = document.querySelectorAll(".file--image a");
+    const popupOverlay = document.getElementById("popup-overlay");
+    const popupImage = document.getElementById("popup-image");
+    const closeBtn = document.querySelector("#popup-overlay .popup-close");
+  
+    imageLinks.forEach(function(link) {
+      link.addEventListener("click", function(e) {
+        e.preventDefault();
+        popupImage.src = this.href;
+        popupOverlay.style.display = "flex";
+      });
+    });
+  
+    closeBtn.addEventListener("click", function() {
+      popupOverlay.style.display = "none";
+      popupImage.src = "";
+    });
+  
+    popupOverlay.addEventListener("click", function(e) {
+      if (e.target === popupOverlay) {
+        popupOverlay.style.display = "none";
+        popupImage.src = "";
+      }
+    });
+  });
+  

web/themes/custom/reha/reha.libraries.yml

@@ -3,6 +3,7 @@ global:
   js:
     dist/bundle.js: {}
     dist/menu-burger-auto.js: {}
+    dist/popup-file-sitepilote.js: {}
     # js/reha.js: {}
     librairies/slick-1.8.1/slick/slick.min.js: {}
 

web/themes/custom/reha/scss/partials/_pop-up_file_sitepilotes.scss

@@ -0,0 +1,28 @@
+#popup-overlay {
+    display: none;
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background: rgba(0,0,0,0.7);
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+  }
+  
+  #popup-overlay img {
+    max-width: 90%;
+    max-height: 90%;
+    border-radius: 8px;
+    box-shadow: 0 0 20px #000;
+  }
+  
+  #popup-overlay .popup-close {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    color: white;
+    font-size: 40px;
+    font-weight: bold;
+    cursor: pointer;
+  }
+  

web/themes/custom/reha/scss/reha.scss

@@ -26,7 +26,7 @@
 @import "partials/infos_content_actus.scss";
 @import "partials/links_content";
 @import "partials/_menu-burger-auto";
-
+@import "partials/_pop-up_file_sitepilotes.scss";
 
 /*pages*/
 @import "pages/home";

web/themes/custom/reha/templates/file-link.html.twig

@@ -0,0 +1,32 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a link to a file.
+ *
+ * Available variables:
+ * - attributes: The HTML attributes for the containing element.
+ * - link: A link to the file.
+ * - file_size: The size of the file.
+ * - file: L'objet fichier (si fourni).
+ *
+ * @see template_preprocess_file_link()
+ *
+ * @ingroup themeable
+ */
+#}
+<span{{ attributes }}>
+  {# Si c’est une image PNG ou JPG → ajouter la classe popup-link #}
+  {% if file.mime == 'image/png' or file.mime == 'image/jpeg' %}
+    {{ link|replace({'<a ': '<a class="popup-link" '})|raw }}
+  {% else %}
+    {{ link }}
+  {% endif %}
+</span>
+{% if file_size %}
+  <span>({{ file_size }})</span>
+{% endif %}
+
+<div id="popup-overlay">
+  <span class="popup-close">&times;</span>
+  <img id="popup-image" src="" alt="Aperçu"/>
+</div>