divers css
This commit is contained in:
parent
ea811fccb5
commit
69d8e216cf
|
@ -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,78 +22,67 @@ 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
|
||||
// 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) {
|
||||
|
@ -101,14 +90,4 @@ if (pageIdMatch) {
|
|||
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
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
22
web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.png
vendored
Normal file
22
web/themes/custom/quartiers_de_demain/dist/assets/img/noun-arrow-to-right.png
vendored
Normal file
|
@ -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>
|
After Width: | Height: | Size: 871 B |
|
@ -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"
|
||||
|
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.7 KiB |
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue