js lightbox séparé

2025-11-27 18:11:14 +01:00
parent 7a8abd9b5e
commit e3a31427d3
7 changed files with 263 additions and 255 deletions
--- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
@@ -518,132 +518,6 @@ document.addEventListener('DOMContentLoaded', function() {



-//////////////// start lightbox galerie image page site////////////////////////
-// Sélection des images à ouvrir dans la lightbox
-let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger, .field_field_images .lightbox-trigger');
-let currentIndex;
-
-// Création de la lightbox
-const lightbox = document.createElement('div');
-lightbox.id = 'lightbox';
-lightbox.classList.add('lightbox');
-document.body.appendChild(lightbox);
-
-// Image affichée dans la lightbox
-const img = document.createElement('img');
-img.classList.add('lightbox-content');
-lightbox.appendChild(img);
-
-// Légende
-const caption = document.createElement('p');
-caption.classList.add('caption');
-lightbox.appendChild(caption);
-
-// Bouton de fermeture
-const closeBtn = document.createElement('span');
-closeBtn.classList.add('close');
-closeBtn.innerHTML = '&times;';
-lightbox.appendChild(closeBtn);
-
-// Bouton précédent avec image
-const prevBtn = document.createElement('a');
-prevBtn.classList.add('prev');
-const prevImg = document.createElement('img');
-prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
-prevImg.alt = 'Précédent';
-prevBtn.appendChild(prevImg);
-lightbox.appendChild(prevBtn);
-
-// Bouton suivant avec image
-const nextBtn = document.createElement('a');
-nextBtn.classList.add('next');
-const nextImg = document.createElement('img');
-nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
-nextImg.alt = 'Suivant';
-nextBtn.appendChild(nextImg);
-lightbox.appendChild(nextBtn);
-
-// Fonction d'affichage
-function showImage(index) {
-  if (index < 0) index = images.length - 1;
-  if (index >= images.length) index = 0;
-  currentIndex = index;
-
-  const currentImg = images[currentIndex];
-
-  // 👉 1. Utiliser l'IMAGE ORIGINALE (href du <a>) si possible
-  const parentLink = currentImg.closest('a');
-  if (parentLink && parentLink.getAttribute('href')) {
-    img.src = parentLink.getAttribute('href');
-  } else {
-    img.src = currentImg.getAttribute('src');
-  }
-
-  // 👉 2. Trouver le conteneur qui porte la légende
-  // - Cas 1 : <div><div class="cadre-img-zoom"><img></div><blockquote class="image-field-caption">...</blockquote></div>
-  // - Cas 2 : <div class="images"><a><img></a><blockquote class="image-field-caption">...</blockquote></div>
-  const wrapper =
-    currentImg.closest('.cadre-img-zoom')?.parentElement || // cas 1
-    currentImg.closest('.images');                          // cas 2
-
-  let captionText =
-    wrapper?.querySelector('.image-field-caption p')?.textContent ||
-    currentImg.alt || // fallback si pas de blockquote
-    '';
-
-  caption.textContent = captionText;
-
-  lightbox.style.display = 'flex';
-}
-
-
-// Clic sur une image
-images.forEach((image, index) => {
-  image.addEventListener('click', (e) => {
-    e.preventDefault();     // empêche le <a> de s'ouvrir
-    e.stopPropagation();    // empêche des comportements externes
-    showImage(index);
-  });
-
-  // 🔒 Empêche le clic sur le <a> parent d'agir aussi
-  const parentLink = image.closest('a');
-  if (parentLink) {
-    parentLink.addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    });
-  }
-});
-
-
-// Navigation & fermeture
-closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
-prevBtn.addEventListener('click', (e) => {
-  e.stopPropagation();
-  showImage(currentIndex - 1);
-});
-nextBtn.addEventListener('click', (e) => {
-  e.stopPropagation();
-  showImage(currentIndex + 1);
-});
-
-// Clic en dehors de l'image pour fermer
-lightbox.addEventListener('click', (e) => {
-  if (e.target === lightbox) lightbox.style.display = 'none';
-});
-
-// Clavier
-document.addEventListener('keydown', (e) => {
-  if (lightbox.style.display === 'flex') {
-    if (e.key === 'Escape') lightbox.style.display = 'none';
-    else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
-    else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
-  }
-});
-
-
-//////////////// end lightbox galerie image page site////////////////////////
-


 //////////////////// start wrapper views-row  lessites /////////////////////////
@@ -1112,6 +986,138 @@ if (svg) {
  
 }

+}();
+// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
+!function() {
+/*!***********************************!*\
+  !*** ./src/assets/js/lightbox.js ***!
+  \***********************************/
+
+//////////////// start lightbox galerie image page site////////////////////////
+// Sélection des images à ouvrir dans la lightbox
+let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger, .field_field_images .lightbox-trigger');
+let currentIndex;
+
+// Création de la lightbox
+const lightbox = document.createElement('div');
+lightbox.id = 'lightbox';
+lightbox.classList.add('lightbox');
+document.body.appendChild(lightbox);
+
+// Image affichée dans la lightbox
+const img = document.createElement('img');
+img.classList.add('lightbox-content');
+lightbox.appendChild(img);
+
+// Légende
+const caption = document.createElement('p');
+caption.classList.add('caption');
+lightbox.appendChild(caption);
+
+// Bouton de fermeture
+const closeBtn = document.createElement('span');
+closeBtn.classList.add('close');
+closeBtn.innerHTML = '&times;';
+lightbox.appendChild(closeBtn);
+
+// Bouton précédent avec image
+const prevBtn = document.createElement('a');
+prevBtn.classList.add('prev');
+const prevImg = document.createElement('img');
+prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
+prevImg.alt = 'Précédent';
+prevBtn.appendChild(prevImg);
+lightbox.appendChild(prevBtn);
+
+// Bouton suivant avec image
+const nextBtn = document.createElement('a');
+nextBtn.classList.add('next');
+const nextImg = document.createElement('img');
+nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
+nextImg.alt = 'Suivant';
+nextBtn.appendChild(nextImg);
+lightbox.appendChild(nextBtn);
+
+// Fonction d'affichage
+function showImage(index) {
+  if (index < 0) index = images.length - 1;
+  if (index >= images.length) index = 0;
+  currentIndex = index;
+
+  const currentImg = images[currentIndex];
+
+  // 👉 1. Utiliser l'IMAGE ORIGINALE (href du <a>) si possible
+  const parentLink = currentImg.closest('a');
+  if (parentLink && parentLink.getAttribute('href')) {
+    img.src = parentLink.getAttribute('href');
+  } else {
+    img.src = currentImg.getAttribute('src');
+  }
+
+  // 👉 2. Trouver le conteneur qui porte la légende
+  // - Cas 1 : <div><div class="cadre-img-zoom"><img></div><blockquote class="image-field-caption">...</blockquote></div>
+  // - Cas 2 : <div class="images"><a><img></a><blockquote class="image-field-caption">...</blockquote></div>
+  const wrapper =
+    currentImg.closest('.cadre-img-zoom')?.parentElement || // cas 1
+    currentImg.closest('.images');                          // cas 2
+
+  let captionText =
+    wrapper?.querySelector('.image-field-caption p')?.textContent ||
+    currentImg.alt || // fallback si pas de blockquote
+    '';
+
+  caption.textContent = captionText;
+
+  lightbox.style.display = 'flex';
+}
+
+
+// Clic sur une image
+images.forEach((image, index) => {
+  image.addEventListener('click', (e) => {
+    e.preventDefault();     // empêche le <a> de s'ouvrir
+    e.stopPropagation();    // empêche des comportements externes
+    showImage(index);
+  });
+
+  // 🔒 Empêche le clic sur le <a> parent d'agir aussi
+  const parentLink = image.closest('a');
+  if (parentLink) {
+    parentLink.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+  }
+});
+
+
+// Navigation & fermeture
+closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
+prevBtn.addEventListener('click', (e) => {
+  e.stopPropagation();
+  showImage(currentIndex - 1);
+});
+nextBtn.addEventListener('click', (e) => {
+  e.stopPropagation();
+  showImage(currentIndex + 1);
+});
+
+// Clic en dehors de l'image pour fermer
+lightbox.addEventListener('click', (e) => {
+  if (e.target === lightbox) lightbox.style.display = 'none';
+});
+
+// Clavier
+document.addEventListener('keydown', (e) => {
+  if (lightbox.style.display === 'flex') {
+    if (e.key === 'Escape') lightbox.style.display = 'none';
+    else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
+    else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
+  }
+});
+
+
+//////////////// end lightbox galerie image page site////////////////////////
 }();
 // This entry need to be wrapped in an IIFE because it need to be in strict mode.
 !function() {
--- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map
--- a/web/themes/custom/quartiers_de_demain/package.json
+++ b/web/themes/custom/quartiers_de_demain/package.json
@@ -13,7 +13,8 @@
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "watch": "webpack --watch"
+    "watch": "webpack --watch",
+    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
--- a/web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme
+++ b/web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme
@@ -1,4 +1,4 @@
-a<<?php
+<?php


 use Drupal\Core\Url;
--- a/web/themes/custom/quartiers_de_demain/src/assets/js/lightbox.js
+++ b/web/themes/custom/quartiers_de_demain/src/assets/js/lightbox.js
@@ -0,0 +1,126 @@
+
+//////////////// start lightbox galerie image page site////////////////////////
+// Sélection des images à ouvrir dans la lightbox
+let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger, .field_field_images .lightbox-trigger');
+let currentIndex;
+
+// Création de la lightbox
+const lightbox = document.createElement('div');
+lightbox.id = 'lightbox';
+lightbox.classList.add('lightbox');
+document.body.appendChild(lightbox);
+
+// Image affichée dans la lightbox
+const img = document.createElement('img');
+img.classList.add('lightbox-content');
+lightbox.appendChild(img);
+
+// Légende
+const caption = document.createElement('p');
+caption.classList.add('caption');
+lightbox.appendChild(caption);
+
+// Bouton de fermeture
+const closeBtn = document.createElement('span');
+closeBtn.classList.add('close');
+closeBtn.innerHTML = '&times;';
+lightbox.appendChild(closeBtn);
+
+// Bouton précédent avec image
+const prevBtn = document.createElement('a');
+prevBtn.classList.add('prev');
+const prevImg = document.createElement('img');
+prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
+prevImg.alt = 'Précédent';
+prevBtn.appendChild(prevImg);
+lightbox.appendChild(prevBtn);
+
+// Bouton suivant avec image
+const nextBtn = document.createElement('a');
+nextBtn.classList.add('next');
+const nextImg = document.createElement('img');
+nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
+nextImg.alt = 'Suivant';
+nextBtn.appendChild(nextImg);
+lightbox.appendChild(nextBtn);
+
+// Fonction d'affichage
+function showImage(index) {
+  if (index < 0) index = images.length - 1;
+  if (index >= images.length) index = 0;
+  currentIndex = index;
+
+  const currentImg = images[currentIndex];
+
+  // 👉 1. Utiliser l'IMAGE ORIGINALE (href du <a>) si possible
+  const parentLink = currentImg.closest('a');
+  if (parentLink && parentLink.getAttribute('href')) {
+    img.src = parentLink.getAttribute('href');
+  } else {
+    img.src = currentImg.getAttribute('src');
+  }
+
+  // 👉 2. Trouver le conteneur qui porte la légende
+  // - Cas 1 : <div><div class="cadre-img-zoom"><img></div><blockquote class="image-field-caption">...</blockquote></div>
+  // - Cas 2 : <div class="images"><a><img></a><blockquote class="image-field-caption">...</blockquote></div>
+  const wrapper =
+    currentImg.closest('.cadre-img-zoom')?.parentElement || // cas 1
+    currentImg.closest('.images');                          // cas 2
+
+  let captionText =
+    wrapper?.querySelector('.image-field-caption p')?.textContent ||
+    currentImg.alt || // fallback si pas de blockquote
+    '';
+
+  caption.textContent = captionText;
+
+  lightbox.style.display = 'flex';
+}
+
+
+// Clic sur une image
+images.forEach((image, index) => {
+  image.addEventListener('click', (e) => {
+    e.preventDefault();     // empêche le <a> de s'ouvrir
+    e.stopPropagation();    // empêche des comportements externes
+    showImage(index);
+  });
+
+  // 🔒 Empêche le clic sur le <a> parent d'agir aussi
+  const parentLink = image.closest('a');
+  if (parentLink) {
+    parentLink.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+  }
+});
+
+
+// Navigation & fermeture
+closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
+prevBtn.addEventListener('click', (e) => {
+  e.stopPropagation();
+  showImage(currentIndex - 1);
+});
+nextBtn.addEventListener('click', (e) => {
+  e.stopPropagation();
+  showImage(currentIndex + 1);
+});
+
+// Clic en dehors de l'image pour fermer
+lightbox.addEventListener('click', (e) => {
+  if (e.target === lightbox) lightbox.style.display = 'none';
+});
+
+// Clavier
+document.addEventListener('keydown', (e) => {
+  if (lightbox.style.display === 'flex') {
+    if (e.key === 'Escape') lightbox.style.display = 'none';
+    else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
+    else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
+  }
+});
+
+
+//////////////// end lightbox galerie image page site////////////////////////
--- a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
+++ b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
@@ -460,132 +460,6 @@ document.addEventListener('DOMContentLoaded', function() {



-//////////////// start lightbox galerie image page site////////////////////////
-// Sélection des images à ouvrir dans la lightbox
-let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger, .paragraph--type--projet-diapo .lightbox-trigger, .field_field_images .lightbox-trigger');
-let currentIndex;
-
-// Création de la lightbox
-const lightbox = document.createElement('div');
-lightbox.id = 'lightbox';
-lightbox.classList.add('lightbox');
-document.body.appendChild(lightbox);
-
-// Image affichée dans la lightbox
-const img = document.createElement('img');
-img.classList.add('lightbox-content');
-lightbox.appendChild(img);
-
-// Légende
-const caption = document.createElement('p');
-caption.classList.add('caption');
-lightbox.appendChild(caption);
-
-// Bouton de fermeture
-const closeBtn = document.createElement('span');
-closeBtn.classList.add('close');
-closeBtn.innerHTML = '&times;';
-lightbox.appendChild(closeBtn);
-
-// Bouton précédent avec image
-const prevBtn = document.createElement('a');
-prevBtn.classList.add('prev');
-const prevImg = document.createElement('img');
-prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
-prevImg.alt = 'Précédent';
-prevBtn.appendChild(prevImg);
-lightbox.appendChild(prevBtn);
-
-// Bouton suivant avec image
-const nextBtn = document.createElement('a');
-nextBtn.classList.add('next');
-const nextImg = document.createElement('img');
-nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
-nextImg.alt = 'Suivant';
-nextBtn.appendChild(nextImg);
-lightbox.appendChild(nextBtn);
-
-// Fonction d'affichage
-function showImage(index) {
-  if (index < 0) index = images.length - 1;
-  if (index >= images.length) index = 0;
-  currentIndex = index;
-
-  const currentImg = images[currentIndex];
-
-  // 👉 1. Utiliser l'IMAGE ORIGINALE (href du <a>) si possible
-  const parentLink = currentImg.closest('a');
-  if (parentLink && parentLink.getAttribute('href')) {
-    img.src = parentLink.getAttribute('href');
-  } else {
-    img.src = currentImg.getAttribute('src');
-  }
-
-  // 👉 2. Trouver le conteneur qui porte la légende
-  // - Cas 1 : <div><div class="cadre-img-zoom"><img></div><blockquote class="image-field-caption">...</blockquote></div>
-  // - Cas 2 : <div class="images"><a><img></a><blockquote class="image-field-caption">...</blockquote></div>
-  const wrapper =
-    currentImg.closest('.cadre-img-zoom')?.parentElement || // cas 1
-    currentImg.closest('.images');                          // cas 2
-
-  let captionText =
-    wrapper?.querySelector('.image-field-caption p')?.textContent ||
-    currentImg.alt || // fallback si pas de blockquote
-    '';
-
-  caption.textContent = captionText;
-
-  lightbox.style.display = 'flex';
-}
-
-
-// Clic sur une image
-images.forEach((image, index) => {
-  image.addEventListener('click', (e) => {
-    e.preventDefault();     // empêche le <a> de s'ouvrir
-    e.stopPropagation();    // empêche des comportements externes
-    showImage(index);
-  });
-
-  // 🔒 Empêche le clic sur le <a> parent d'agir aussi
-  const parentLink = image.closest('a');
-  if (parentLink) {
-    parentLink.addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    });
-  }
-});
-
-
-// Navigation & fermeture
-closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
-prevBtn.addEventListener('click', (e) => {
-  e.stopPropagation();
-  showImage(currentIndex - 1);
-});
-nextBtn.addEventListener('click', (e) => {
-  e.stopPropagation();
-  showImage(currentIndex + 1);
-});
-
-// Clic en dehors de l'image pour fermer
-lightbox.addEventListener('click', (e) => {
-  if (e.target === lightbox) lightbox.style.display = 'none';
-});
-
-// Clavier
-document.addEventListener('keydown', (e) => {
-  if (lightbox.style.display === 'flex') {
-    if (e.key === 'Escape') lightbox.style.display = 'none';
-    else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
-    else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
-  }
-});
-
-
-//////////////// end lightbox galerie image page site////////////////////////
-


 //////////////////// start wrapper views-row  lessites /////////////////////////
--- a/web/themes/custom/quartiers_de_demain/webpack.config.js
+++ b/web/themes/custom/quartiers_de_demain/webpack.config.js
@@ -9,6 +9,7 @@ let config = {
       
        // "./src/assets/js/animated_logo.js",
        "./src/assets/js/animated_formes.js",
+        "./src/assets/js/lightbox.js",
        "./src/assets/scss/quartiers_de_demain.scss", 
        // "./src/assets/fonts/*",
        // "./src/assets/css/animated_logo.css",