bachir/drupal-erable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

index page projets

Browse Source
This commit is contained in:
Valentin
2024-11-05 01:44:18 +01:00
parent 018960837d
commit bd1b450a45
34 changed files with 1084 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/modules/custom/erable_mod/assets/css/carte-interactive.css
View File

@@ -1,7 +1,7 @@
#sites-map-container {
position: relative;
margin: 0 auto;
max-width: 40vw;
width: 100%;
}
#map_base {

91
web/modules/custom/erable_mod/assets/css/carte-interactive.old.css
View File

@@ -1,91 +0,0 @@
#sites-map-container {
text-align: center;
position: relative;
width: 100%; /* Prend toute la largeur du conteneur parent */
max-width: 800px; /* Optionnel : Limiter la largeur maximale */
margin: 0 auto; /* Centrer le conteneur */
height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
@media (max-width: 810px) {
width: 80%; /* Prend toute la largeur du conteneur parent */
}
@media (max-width: 530px) {
width: 100%; /* Prend toute la largeur du conteneur parent */
height: 485px;
}
@media (max-width: 400px) {
width: 100%; /* Prend toute la largeur du conteneur parent */
height: 430px;
}
}
/* Changer la couleur au survol (hover) */
#sites-map-container .site-link:hover{
cursor: pointer;
}
/* Styles du popup (caché par défaut) */
#sites-map-container #popup {
display: none;
position: absolute;
z-index: 1000;
text-align: left;
padding-left: 1rem;
pointer-events: none;
@media (max-width: 1090px) {
bottom: 20px;
}
}
/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
@media (min-width: 1090px) {
#sites-map-container #popup {
top: 50%; /* Centrer verticalement */
left: 80%; /* Placer le popup à droite de la carte */
transform: translateY(-50%); /* Ajuster pour centrer verticalement */
width: 300px;
}
}
#sites-map-container strong{
color: #f7002b;
}
#sites-map-container a{
display: none;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.8rem;
padding-left: 0.5rem;
text-decoration: none;
margin-top: 0.7rem;
height: 1.3rem;
}
#sites-map-container a:after{
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
#popup-content{
width: 300px;
padding-right: 30px;
p{
font-size: 0.7rem;
}
@media (max-width : 810px) {
width: 300px;
background-color: white;
border-radius: 5px;
padding: 0.5rem;
padding-left: 1rem;
}
}

9
web/modules/custom/erable_mod/assets/js/carte-interactive.js
View File

@@ -186,7 +186,7 @@ function placeProjectsIcons(projectsIcons) {
const territory = findTerritory(lat, lon);
console.log(icon.dataset.title, territory);
// console.log(icon.dataset.title, territory);
if (territory && localisationMapPlacements[territory]) {
@@ -261,8 +261,11 @@ function hidePopup(){
placeProjectsIcons(projectsIcons);
// debugMapPlacement();
window.addEventListener('resize', placeProjectsIcons(projectsIcons));
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('resize', () => {
placeProjectsIcons(projectsIcons)
});
});
function debugMapPlacement() {
const container = document.querySelector('#sites-map-container');

115
web/modules/custom/erable_mod/assets/js/carte-interactive.js.old
View File

@@ -1,115 +0,0 @@
// // 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érifiez si la page contient la classe '.node-type-site'
const isSitePage = document.body.classList.contains('node-type-site');
console.log(isSitePage);
// Fonction pour afficher le popup
function showPopup(content, x, y, isLeftHalf) {
// Si on est sur une page avec la classe 'node-type-site', ne pas afficher le popup
if (isSitePage) return;
popupContent.innerHTML = content;
// Afficher le popup et le fond de modal
popup.style.display = 'block';
modalBackground.style.display = 'block';
}
// Fonction pour fermer le popup
function closePopup() {
popup.style.display = 'none';
modalBackground.style.display = 'none'; // Désactiver le fond modal
}
// Gérer le survol des cercles (au lieu du clic)
svgElement.addEventListener('mouseover', function(event) {
if (event.target.classList.contains('site-link')) {
const content = event.target.getAttribute('data-content');
// Afficher le popup avec la position et l'alignement adaptés
showPopup(content);
}
// Gestion du changement de couleur sur le cercle
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'red');
}
});
// Fermer le popup lorsque la souris quitte le cercle
svgElement.addEventListener('mouseout', function(event) {
if (event.target.classList.contains('site-link')) {
closePopup();
}
// Réinitialiser la couleur du cercle au survol de la souris
if (event.target.tagName === 'circle') {
event.target.setAttribute('fill', 'black'); // Remettre en noir
}
});
// Mettre à jour la logique de calcul des positions
function recalculateSitePositions() {
const allSites = document.querySelectorAll('.site-link');
allSites.forEach((site, index) => {
const geofield = site.getAttribute('data-geofield'); // Assurez-vous que ces attributs sont bien définis
const lon = parseFloat(geofield.split(',')[0]);
const lat = parseFloat(geofield.split(',')[1]);
const x = round((lon - lonLeft) / (lonRight - lonLeft) * vp_w);
const y = 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 et de toucher sur le SVG
svgElement.addEventListener('click', function(event) {
if (event.target.classList.contains('site-link') || event.target.tagName === 'rect') {
const content = event.target.getAttribute('data-content');
handleCircleClick(content);
}
});
///////////////////// page site point rouge quand sur page ///////////////////////
// Récupérer l'ID de la page depuis la classe du body
const body = document.querySelector('body');
const pageId = body.className.match(/node-id-(\d+)/)[1]; // Extraire l'ID de la page
// Sélectionner le groupe SVG qui a l'ID correspondant
const matchingGroup = document.querySelector(`#site-${pageId}`);
// Si un groupe correspondant est trouvé, changer la couleur du cercle à l'intérieur
if (matchingGroup) {
const circle = matchingGroup.querySelector('circle'); // Sélectionner le cercle à l'intérieur du groupe
if (circle) {
circle.setAttribute('fill', 'red'); // Changer la couleur du cercle
}
}

3
web/modules/custom/erable_mod/erable_mod.libraries.yml
View File

@@ -1,7 +1,6 @@
sites_map_block:
css:
theme:
assets/css/fontface.scss: {}
assets/css/carte-interactive.css: {}
js:
assets/js/carte-interactive.js: {}
assets/js/carte-interactive.js: {}

4
web/modules/custom/erable_mod/erable_mod.module
View File

@@ -11,7 +11,7 @@
function erable_mod_theme() {
return array(
'svg_mapsites' => array(
'variables' => array('vpw' => null, 'vph' => null, 'sites' => []),
'variables' => array('sites' => [], 'intro' => null),
),
);
}
}

10
web/modules/custom/erable_mod/src/Plugin/Block/SitesMap.php
View File

@@ -26,6 +26,9 @@ class SitesMap extends BlockBase {
$allSites = \Drupal::entityTypeManager()->getStorage('node')
->loadByProperties(['type' => 'projet', 'status' => 1]);
$intro_text = \Drupal::entityTypeManager()->getStorage('config_pages')
->load('2')->get('field_intro')-> value;
$sites_paths = "";
foreach($allSites as $index => $site){
@@ -35,11 +38,8 @@ class SitesMap extends BlockBase {
$link_options = ['absolute' => FALSE, 'attributes' => ['class' => 'site-link']];
$site_link_object = Link::createFromRoute("voir le site", 'entity.node.canonical', ['node' => $site->id()], $link_options);
// $link = $site_link_object->toString()->getGeneratedLink();
$href = $site_link_object->getUrl()->toString();
// $datacontent = htmlspecialchars("<strong>$title</strong><br>$subtitle<br>$link");
$geofield = $site->get('field_carte')->get(0);
$lon = $geofield->lon;
$lat = $geofield->lat;
@@ -60,6 +60,7 @@ class SitesMap extends BlockBase {
'svg_mapsites' => [
'#theme' => 'svg_mapsites',
'#sites' => $sites_paths,
'#intro' => $intro_text,
'#attached' => [
'library' => [
'erable_mod/sites_map_block',
@@ -69,9 +70,6 @@ class SitesMap extends BlockBase {
];
return $return;
// return [
// '#markup' => $this->t('Hello, Sites Map!'),
// ];
}
public function getCacheMaxAge() {
return 0;

3
web/modules/custom/erable_mod/templates/svg-mapsites.html.twig
View File

@@ -1,3 +1,6 @@
<div class="projets_intro">
{{ intro|raw }}
</div>
<div id="sites-map-container">
{# <svg {{ svg_attributes }}>
<path {{ path_attributes }}></path>