divers css

2024-11-07 23:26:33 +01:00
parent ea811fccb5
commit 69d8e216cf
5 changed files with 80 additions and 84 deletions
--- a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
+++ b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js
@@ -4,13 +4,13 @@ const popup = document.querySelector('#sites-map-container #popup');
 const popupContent = document.querySelector('#sites-map-container #popup-content');
 const modalBackground = document.querySelector('#sites-map-container #modal-background');

-// Vérifiez si la page contient la classe '.node-type-site'
-const isSitePage = document.body.classList.contains('node-type-site');
-const isLessitesPage = document.querySelector('#lessites') !== null;
+// Vérification de la page courante
+const isHomePage = document.querySelector('#home') !== null;
+const isLessitesPage = document.querySelector('main#lessites') !== null;
+const isNodeTypeSitePage = document.body.classList.contains('node-type-site');

 // Fonction pour afficher le popup
-function showPopup(content, x, y, isLeftHalf) {
-    if (isSitePage || isLessitesPage) return;
+function showPopup(content) {
    popupContent.innerHTML = content;
    popup.style.display = 'block';
    modalBackground.style.display = 'block';
@@ -22,93 +22,72 @@ function closePopup() {
    modalBackground.style.display = 'none';
 }

-// Gérer le survol des cercles
+// Gérer le survol des cercles en fonction de la page
 svgElement.addEventListener('mouseover', function(event) {
    if (event.target.classList.contains('site-link')) {
        const content = event.target.getAttribute('data-content');
        const dataId = event.target.getAttribute('data-id');
        const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
-        showPopup(content);
-        if (correspondingRow) correspondingRow.style.border = '2px solid red';
+
+        // Interaction pour la page d'accueil
+        if (isHomePage) {
+            showPopup(content);  // Affiche le popup
        }
+
+        // Interaction pour la page #lessites
+        if (isLessitesPage && correspondingRow) {
+            correspondingRow.style.border = '2px solid red';  // Bordure rouge autour du .views-row correspondant
+        }
+    }
+
+    // Applique une couleur rouge au cercle au survol
    if (event.target.tagName === 'circle') {
        event.target.setAttribute('fill', 'red');
    }
 });

-// Fermer le popup et retirer la bordure rouge lorsque la souris quitte le cercle
+// Gérer la sortie de survol des cercles en fonction de la page
 svgElement.addEventListener('mouseout', function(event) {
    if (event.target.classList.contains('site-link')) {
-        closePopup();
        const dataId = event.target.getAttribute('data-id');
        const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
-        if (correspondingRow) correspondingRow.style.border = 'none';
+
+        // Ferme le popup pour la page d'accueil
+        if (isHomePage) {
+            closePopup();
        }
+
+        // Supprime la bordure rouge autour du .views-row pour la page #lessites
+        if (isLessitesPage && correspondingRow) {
+            correspondingRow.style.border = 'none';
+        }
+    }
+
+    // Remet la couleur noire au cercle lorsqu'on quitte le survol
    if (event.target.tagName === 'circle') {
        event.target.setAttribute('fill', 'black');
    }
 });

-// Fonction pour recalculer les positions des sites
-function recalculateSitePositions() {
-    const allSites = document.querySelectorAll('.site-link');
-    allSites.forEach((site) => {
-        const geofield = site.getAttribute('data-geofield');
-        const lon = parseFloat(geofield.split(',')[0]);
-        const lat = parseFloat(geofield.split(',')[1]);
-        const x = Math.round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
-        const y = Math.round((latTop - lat) / (latTop - latBottom) * vp_h);
-        site.setAttribute('transform', `translate(${x}, ${y})`);
-    });
-}
-
-window.addEventListener('resize', function() {
-    recalculateSitePositions();
-    if (popup.style.display === 'block') {
-        const currentPopupRect = popup.getBoundingClientRect();
-        const rect = svgElement.getBoundingClientRect();
-        showPopup(popupContent.innerHTML, currentPopupRect.left - rect.left, currentPopupRect.top - rect.top);
-    }
-});
-
-// Gérer le clic ou le toucher des cercles
-function handleCircleClick(content) {
-    showPopup(content, event.clientX, event.clientY, event.target.getAttribute('data-left-half') === 'true');
-}
-
-// Écouter les événements de clic sur le SVG
+// Gérer les clics pour la page node-type-site
 svgElement.addEventListener('click', function(event) {
+    if (isNodeTypeSitePage) {
        if (event.target.classList.contains('site-link')) {
-        const content = event.target.getAttribute('data-content');
-        handleCircleClick(content);
-    } else if (event.target.tagName === 'circle') {
-        const circleId = event.target.id;  // Récupérer l'ID du cercle cliqué
-        
-        if (circleId.startsWith('site-')) {
-            const pageId = circleId.split('-')[1];  // Extraire l'ID numérique du site
-            window.location.href = `sites/node/${pageId}`;  // Rediriger vers la page correspondante
+            const targetUrl = event.target.getAttribute('data-url');
+            if (targetUrl) {
+                window.location.href = targetUrl;  // Redirige vers le data-url correspondant
+            }
        }
-       
    }
-    
 });

-// Mise en évidence du point rouge correspondant à la page courante
-const body = document.querySelector('body');
-const pageIdMatch = body.className.match(/node-id-(\d+)/);
-if (pageIdMatch) {
+// Mise en évidence du cercle correspondant à la page courante pour node-type-site
+if (isNodeTypeSitePage) {
+    const body = document.querySelector('body');
+    const pageIdMatch = body.className.match(/node-id-(\d+)/);
+    if (pageIdMatch) {
        const pageId = pageIdMatch[1];
        const matchingCircle = document.querySelector(`#site-${pageId} circle`);
        if (matchingCircle) matchingCircle.setAttribute('fill', 'red');
+    }
 }
-
-
-// Écouter les événements de clic sur le SVG
-svgElement.addEventListener('click', function(event) {
-    if (event.target.tagName === 'circle' && event.target.classList.contains('site-link')) {
-        const targetUrl = event.target.getAttribute('data-url'); // Récupérer l'URL de redirection
-        if (targetUrl) {
-            window.location.href = targetUrl;  // Rediriger vers l'URL cible
-        }
-    }
-});
--- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
@@ -3019,10 +3019,6 @@ body {
 .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) h2, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .visually-hidden, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field--label-above, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) span:not(.file) {
  display: none;
 }
-.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site {
-  background: black;
-  padding-left: 0.5rem;
-}
@media (max-width: 810px) {
  .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_liens_site) .field_field_liens_site {
    max-width: 50%;
@@ -3033,6 +3029,8 @@ body {
  display: inline-flex;
  align-items: center;
  color: white;
+  background: black;
+  padding-left: 0.5rem;
  text-transform: uppercase;
  font-size: 0.6rem;
 }
--- a/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.png
+++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.png
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="18.174984"
+   height="14.947381"
+   viewBox="0 0 5.4690765 4.497851"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-102.27891,-146.15662)">
+    <path
+       d="m 105.44397,146.39759 1.82265,1.86476 h -4.84236 a 0.14436835,0.14436835 0 1 0 0,0.28873 h 4.84236 l -1.82265,1.86476 a 0.14436835,0.14436835 0 0 0 0,0.19851 0.1503837,0.1503837 0 0 0 0.20452,0 l 2.06326,-2.10537 a 0.1624144,0.1624144 0 0 0 0,-0.20452 l -2.06326,-2.10538 a 0.14436835,0.14436835 0 0 0 -0.20452,0 0.14436835,0.14436835 0 0 0 0,0.19851 z"
+       id="path2-2"
+       style="fill:#ffffff;stroke-width:0.0601533" />
+  </g>
+</svg>
--- a/web/themes/custom/quartiers_de_demain/src/assets/img/noun-arrow-to-right.svg
+++ b/web/themes/custom/quartiers_de_demain/src/assets/img/noun-arrow-to-right.svg
@@ -2,8 +2,8 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->

 <svg
-   width="7mm"
-   height="7mm"
+   width="35px"
+   height="35px"
   viewBox="0 0 10.531931 10.531931"
   version="1.1"
   id="svg1"
@@ -39,12 +39,7 @@
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-99.747912,-143.13958)">
-    <circle
-       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
-       id="path3-3"
-       cx="105.01388"
-       cy="148.40555"
-       r="5.0013819" />
+  
    <path
       d="m 105.44397,146.39759 1.82265,1.86476 h -4.84236 a 0.14436835,0.14436835 0 1 0 0,0.28873 h 4.84236 l -1.82265,1.86476 a 0.14436835,0.14436835 0 0 0 0,0.19851 0.1503837,0.1503837 0 0 0 0.20452,0 l 2.06326,-2.10537 a 0.1624144,0.1624144 0 0 0 0,-0.20452 l -2.06326,-2.10538 a 0.14436835,0.14436835 0 0 0 -0.20452,0 0.14436835,0.14436835 0 0 0 0,0.19851 z"
       id="path2-2"
--- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss
+++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss
@@ -74,6 +74,7 @@
                        color: white;
                        text-transform: uppercase;
                        font-size: 0.6rem;
+                        
                        svg{
                            display: none;
                        }
@@ -99,8 +100,6 @@
                    display: none;
                }
                .field_field_liens_site{
-                    background: black;
-                    padding-left: 0.5rem;
                    @media (max-width:810px) {  
                        // margin-left: 0;
                        max-width: 50%;
@@ -111,8 +110,11 @@
                        display: inline-flex;
                        align-items: center;
                        color: white;
+                        background: black;
+                        padding-left: 0.5rem;
                        text-transform: uppercase;
                        font-size: 0.6rem;
+                        
                        svg{
                            display: none;
                        }