From 69d8e216cf45f37c0f453fde26f336c54dc57a18 Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 7 Nov 2024 23:26:33 +0100 Subject: [PATCH] divers css --- .../assets/js/carte-interactive-qdd.js | 119 ++++++++---------- .../dist/assets/css/bundle.css | 6 +- .../dist/assets/img/noun-arrow-to-right.png | 22 ++++ .../src/assets/img/noun-arrow-to-right.svg | 11 +- .../src/assets/scss/pages/node-type-site.scss | 6 +- 5 files changed, 80 insertions(+), 84 deletions(-) create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.png diff --git a/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js b/web/modules/custom/q2d_mod/assets/js/carte-interactive-qdd.js index 2ecdc8d..d7a0cb0 100644 --- 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 (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 - } - - } - -}); - -// 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) { - 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 + if (isNodeTypeSitePage) { + if (event.target.classList.contains('site-link')) { + const targetUrl = event.target.getAttribute('data-url'); + if (targetUrl) { + window.location.href = targetUrl; // Redirige vers le data-url correspondant + } } } }); + +// 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'); + } +} diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index b8a41d2..5aa3932 100644 --- 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; } diff --git 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 new file mode 100644 index 0000000..e6e842e --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.png @@ -0,0 +1,22 @@ + + + + + + + + + diff --git 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 index 05d69b4..3084e74 100644 --- 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 @@ - +