269 lines
12 KiB
JavaScript
269 lines
12 KiB
JavaScript
// Sélection des éléments principaux
|
|
const svgElement = document.querySelector('#sites-map-container svg');
|
|
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érification de la page courante
|
|
const isHomePage = document.querySelector('main#home') !== null;
|
|
const isLessitesPage = document.querySelector('div#lessites') !== null;
|
|
const isNodeTypeSitePage = document.body.classList.contains('node-type-site');
|
|
const isCandidaturePage = document.querySelector('main#pour_candidater') !== null;
|
|
const isNodeTypeProjetPage = document.body.classList.contains('node-type-projet');
|
|
const isNodeTypeRessourcePage = document.body.classList.contains('node-type-ressource');
|
|
|
|
// Identifier le cercle de la page courante pour node-type-site
|
|
let currentPageCircle = null;
|
|
let lastHoveredCircle = null; // Variable pour conserver le dernier cercle survolé
|
|
|
|
if (isNodeTypeSitePage) {
|
|
const body = document.querySelector('body');
|
|
const pageIdMatch = body.className.match(/node-id-(\d+)/);
|
|
if (pageIdMatch) {
|
|
const pageId = pageIdMatch[1];
|
|
currentPageCircle = document.querySelector(`#site-${pageId} circle`);
|
|
if (currentPageCircle) {
|
|
currentPageCircle.setAttribute('fill', 'red'); // Met en rouge le cercle correspondant
|
|
}
|
|
}
|
|
}
|
|
|
|
// // Identifier le cercle du SITE lié quand on est sur une page node-type-projet
|
|
// if (isNodeTypeProjetPage && svgElement) {
|
|
// // On récupère le lien vers le site lié dans le bloc "Site lié"
|
|
// const linkedSiteLink = document.querySelector('.field_field_site_projet article.node-type-site a[href*="/sites/"]');
|
|
|
|
// if (linkedSiteLink) {
|
|
// // On normalise le chemin (sans domaine) de l'URL du site
|
|
// const sitePath = new URL(linkedSiteLink.getAttribute('href'), window.location.origin).pathname;
|
|
|
|
// // On cherche le cercle dont le data-url pointe vers le même site
|
|
// const correspondingCircle = Array.from(svgElement.querySelectorAll('circle.site-link')).find(circle => {
|
|
// const circleUrl = circle.getAttribute('data-url');
|
|
// if (!circleUrl) return false;
|
|
|
|
// const circlePath = new URL(circleUrl, window.location.origin).pathname;
|
|
// return circlePath === sitePath;
|
|
// });
|
|
|
|
// if (correspondingCircle) {
|
|
// currentPageCircle = correspondingCircle;
|
|
// currentPageCircle.setAttribute('fill', 'red'); // Met en rouge le cercle du site lié
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// // Identifier le cercle du SITE lié quand on est sur une page node-type-ressource
|
|
// if (isNodeTypeRessourcePage && svgElement) {
|
|
// // On récupère le(s) nom(s) de site dans le champ .field_field_site
|
|
// // Ici on part sur le premier (simple à gérer, extensible ensuite si besoin)
|
|
// const siteNameNode = document.querySelector('.field_field_site > div:not(.field) div');
|
|
|
|
// if (siteNameNode) {
|
|
// const rawSiteName = siteNameNode.textContent || '';
|
|
|
|
// // Normalisation basique pour éviter les soucis d'espaces / accents insécables
|
|
// const normalize = (str) =>
|
|
// str.replace(/\u00a0/g, ' ') // remplace les espaces insécables
|
|
// .replace(/\s+/g, ' ') // compresse les espaces multiples
|
|
// .trim()
|
|
// .toLowerCase();
|
|
|
|
// const targetName = normalize(rawSiteName);
|
|
|
|
// const circles = svgElement.querySelectorAll('circle.site-link');
|
|
|
|
// circles.forEach(circle => {
|
|
// const contentHtml = circle.getAttribute('data-content') || '';
|
|
|
|
// // On crée un élément temporaire pour parser le HTML de data-content
|
|
// const tmp = document.createElement('div');
|
|
// tmp.innerHTML = contentHtml;
|
|
|
|
// // En général, le nom est dans le <strong>
|
|
// const strong = tmp.querySelector('strong');
|
|
// const circleNameRaw = strong ? strong.textContent : tmp.textContent;
|
|
// const circleName = normalize(circleNameRaw || '');
|
|
|
|
// if (circleName === targetName) {
|
|
// currentPageCircle = circle;
|
|
// currentPageCircle.setAttribute('fill', 'red'); // surligne le site lié
|
|
// }
|
|
// });
|
|
// }
|
|
// }
|
|
|
|
// Fonction pour afficher le popup
|
|
function showPopup(content) {
|
|
popupContent.innerHTML = content;
|
|
popup.style.display = 'block';
|
|
modalBackground.style.display = 'block';
|
|
}
|
|
|
|
// Fonction pour fermer le popup
|
|
function closePopup() {
|
|
popup.style.display = 'none';
|
|
modalBackground.style.display = 'none';
|
|
}
|
|
|
|
// 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}"]`);
|
|
const correspondingProjetRow = document.querySelector(`.node-type-projet[data-id="${dataId}"]`);
|
|
|
|
|
|
// Interaction pour la page d'accueil
|
|
if (isHomePage) {
|
|
showPopup(content); // Affiche le popup
|
|
if (lastHoveredCircle && lastHoveredCircle !== event.target) {
|
|
lastHoveredCircle.setAttribute('fill', 'black'); // Remettre le dernier cercle survolé en noir
|
|
}
|
|
event.target.setAttribute('fill', 'red'); // Met le cercle en rouge
|
|
lastHoveredCircle = event.target; // Mettre à jour le cercle survolé
|
|
|
|
}
|
|
// Interaction pour la page de candidature
|
|
if (isCandidaturePage) {
|
|
showPopup(content); // Affiche le popup
|
|
if (lastHoveredCircle && lastHoveredCircle !== event.target) {
|
|
lastHoveredCircle.setAttribute('fill', 'black'); // Remettre le dernier cercle survolé en noir
|
|
}
|
|
event.target.setAttribute('fill', 'red'); // Met le cercle en rouge
|
|
lastHoveredCircle = event.target; // Mettre à jour le cercle survolé
|
|
}
|
|
|
|
// Interaction pour la page #lessites
|
|
if (isLessitesPage && correspondingRow && correspondingProjetRow) {
|
|
correspondingRow.style.border = '2px solid red'; // Bordure rouge autour du .views-row correspondant
|
|
}
|
|
}
|
|
|
|
// Applique une couleur rouge au cercle au survol, sauf pour le cercle de la page courante
|
|
if (event.target.tagName === 'circle' && event.target !== currentPageCircle) {
|
|
event.target.setAttribute('fill', 'red');
|
|
}
|
|
});
|
|
|
|
// Gérer la sortie de survol des cercles en fonction de la page, avec exception pour le cercle de la page courante
|
|
svgElement.addEventListener('mouseout', function(event) {
|
|
// Ignorer le mouseout pour le cercle correspondant à la page courante dans node-type-site
|
|
if (event.target === currentPageCircle) {
|
|
return;
|
|
}
|
|
|
|
if (event.target.classList.contains('site-link')) {
|
|
const dataId = event.target.getAttribute('data-id');
|
|
const correspondingRow = document.querySelector(`.views-row[data-id="${dataId}"]`);
|
|
const correspondingProjetRow = document.querySelector(`.node-type-projet[data-id="${dataId}"]`);
|
|
|
|
|
|
// Ferme le popup pour la page d'accueil
|
|
if (isHomePage || isCandidaturePage) {
|
|
// closePopup();
|
|
return;
|
|
}
|
|
|
|
// Supprime la bordure rouge autour du .views-row pour la page #lessites
|
|
if (isLessitesPage && correspondingRow && correspondingProjetRow) {
|
|
correspondingRow.style.border = 'none';
|
|
}
|
|
}
|
|
|
|
// Remet la couleur noire au cercle lorsqu'on quitte le survol, sauf pour le cercle de la page courante
|
|
if (event.target.tagName === 'circle' && event.target !== currentPageCircle) {
|
|
event.target.setAttribute('fill', 'black');
|
|
}
|
|
});
|
|
|
|
|
|
// Gérer les clics pour la page node-type-site uniquement
|
|
svgElement.addEventListener('click', function(event) {
|
|
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
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Fonction pour gérer l'agrandissement de views-row au survol des cercles
|
|
if (isLessitesPage) {
|
|
const circles = svgElement.querySelectorAll('circle.site-link');
|
|
|
|
circles.forEach(circle => {
|
|
// Récupérer l'URL du projet depuis le `data-url` du cercle
|
|
const projectUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
|
|
|
|
circle.addEventListener('mouseover', function() {
|
|
// Sélectionner le .views-row correspondant
|
|
const correspondingRow = Array.from(document.querySelectorAll('.views-row')).find(row => {
|
|
const rowLink = row.querySelector('a[href]');
|
|
return rowLink && new URL(rowLink.getAttribute('href'), window.location.origin).pathname === projectUrl;
|
|
});
|
|
|
|
// Si un .views-row correspondant est trouvé, on augmente sa taille
|
|
if (correspondingRow) {
|
|
correspondingRow.style.transform = 'scale(1.05)';
|
|
correspondingRow.style.transition = 'transform 0.2s ease'; // Animation fluide
|
|
}
|
|
});
|
|
|
|
circle.addEventListener('mouseout', function() {
|
|
// Sélectionner le .views-row correspondant
|
|
const correspondingRow = Array.from(document.querySelectorAll('.views-row')).find(row => {
|
|
const rowLink = row.querySelector('a[href]');
|
|
return rowLink && new URL(rowLink.getAttribute('href'), window.location.origin).pathname === projectUrl;
|
|
});
|
|
|
|
// Remettre la taille d'origine du .views-row
|
|
if (correspondingRow) {
|
|
correspondingRow.style.transform = 'scale(1)'; // Taille d'origine
|
|
}
|
|
});
|
|
});
|
|
|
|
// Gérer le survol des .views-row pour surligner le cercle correspondant
|
|
const viewsRows = document.querySelectorAll('.views-row');
|
|
|
|
viewsRows.forEach(row => {
|
|
// Récupère l'URL du projet dans le premier lien <a>
|
|
const link = row.querySelector('a[href]');
|
|
if (!link) return; // Passe si aucun lien n'est trouvé
|
|
const projectUrl = new URL(link.getAttribute('href'), window.location.origin).pathname;
|
|
|
|
row.addEventListener('mouseover', function() {
|
|
// Sélectionne le cercle qui a la même URL dans data-url
|
|
const correspondingCircle = Array.from(svgElement.querySelectorAll('circle')).find(circle => {
|
|
const circleUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
|
|
return circleUrl === projectUrl;
|
|
});
|
|
|
|
// Si un cercle correspondant est trouvé, le mettre en rouge
|
|
if (correspondingCircle) {
|
|
correspondingCircle.setAttribute('fill', 'red'); // Surligne le cercle correspondant
|
|
}
|
|
});
|
|
|
|
row.addEventListener('mouseout', function() {
|
|
// Sélectionne le cercle qui a la même URL dans data-url
|
|
const correspondingCircle = Array.from(svgElement.querySelectorAll('circle')).find(circle => {
|
|
const circleUrl = new URL(circle.getAttribute('data-url'), window.location.origin).pathname;
|
|
return circleUrl === projectUrl;
|
|
});
|
|
|
|
// Remettre le cercle à sa couleur initiale
|
|
if (correspondingCircle && correspondingCircle !== currentPageCircle) {
|
|
correspondingCircle.setAttribute('fill', 'black'); // Remet le cercle à sa couleur initiale
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
}
|
|
|