Merge remote-tracking branch 'origin/master'
jsp ce que je fais
This commit is contained in:
Valentin
commit
d86a691985
|
|
@ -48,6 +48,7 @@ module:
|
||||||
entity_browser: 0
|
entity_browser: 0
|
||||||
entity_browser_enhanced: 0
|
entity_browser_enhanced: 0
|
||||||
entity_reference_revisions: 0
|
entity_reference_revisions: 0
|
||||||
|
erable_mod: 0
|
||||||
faq: 0
|
faq: 0
|
||||||
field: 0
|
field: 0
|
||||||
field_group: 0
|
field_group: 0
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ dependencies:
|
||||||
- views.view.actus
|
- views.view.actus
|
||||||
- views.view.home_blocks
|
- views.view.home_blocks
|
||||||
module:
|
module:
|
||||||
|
- erable_mod
|
||||||
- panels
|
- panels
|
||||||
- views
|
- views
|
||||||
id: home-panels_variant-0
|
id: home-panels_variant-0
|
||||||
|
|
@ -55,6 +56,15 @@ variant_settings:
|
||||||
region: content
|
region: content
|
||||||
weight: 1
|
weight: 1
|
||||||
uuid: 0e39f25a-d433-49bd-84d4-3e6c11c16c47
|
uuid: 0e39f25a-d433-49bd-84d4-3e6c11c16c47
|
||||||
|
41595e31-d8d6-4940-a1e5-8687c04af5a5:
|
||||||
|
id: sitesmap_block
|
||||||
|
label: 'Sites map Block'
|
||||||
|
label_display: '0'
|
||||||
|
provider: erable_mod
|
||||||
|
context_mapping: { }
|
||||||
|
region: content
|
||||||
|
weight: 0
|
||||||
|
uuid: 41595e31-d8d6-4940-a1e5-8687c04af5a5
|
||||||
page_title: ''
|
page_title: ''
|
||||||
layout: layout_onecol
|
layout: layout_onecol
|
||||||
layout_settings:
|
layout_settings:
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'gilroy-semibold';
|
||||||
|
src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
|
||||||
|
}
|
||||||
|
#sites-map-container {
|
||||||
|
background-color: transparent;
|
||||||
|
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 {
|
||||||
|
font-family: 'gilroy-light';
|
||||||
|
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;
|
||||||
|
font-family: 'gilroy-bold';
|
||||||
|
}
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,116 @@
|
||||||
|
// // 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');
|
||||||
|
|
||||||
|
|
||||||
|
// 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
name: erable_mod
|
||||||
|
type: module
|
||||||
|
description: Provides additional functionality for the site.
|
||||||
|
package: Custom
|
||||||
|
core_version_requirement: ^9 || ^10
|
||||||
|
dependencies:
|
||||||
|
- drupal:block
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
sites_map_block:
|
||||||
|
css:
|
||||||
|
theme:
|
||||||
|
assets/css/fontface.scss: {}
|
||||||
|
assets/css/carte-interactive.css: {}
|
||||||
|
js:
|
||||||
|
assets/js/carte-interactive.js: {}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Primary module hooks for reha module.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Implements hook_theme().
|
||||||
|
*/
|
||||||
|
function erable_mod_theme() {
|
||||||
|
return array(
|
||||||
|
'svg_mapsites' => array(
|
||||||
|
'variables' => array('vpw' => null, 'vph' => null, 'sites' => []),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Drupal\erable_mod\Plugin\Block;
|
||||||
|
|
||||||
|
use Drupal\Core\Block\BlockBase;
|
||||||
|
use Drupal\Core\Block\Attribute\Block;
|
||||||
|
// use Drupal\Core\StringTranslation\TranslatableMarkup;
|
||||||
|
use Drupal\Core\Link;
|
||||||
|
use Drupal\Core\Render\Markup;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Provides a 'Sites Map' Block.
|
||||||
|
* @Block(
|
||||||
|
* id = "sitesmap_block",
|
||||||
|
* admin_label = @Translation("Sites map Block"),
|
||||||
|
* )
|
||||||
|
*/
|
||||||
|
class SitesMap extends BlockBase {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* {@inheritdoc}
|
||||||
|
*/
|
||||||
|
public function build() {
|
||||||
|
$return = null;
|
||||||
|
|
||||||
|
$allSites = \Drupal::entityTypeManager()->getStorage('node')
|
||||||
|
->loadByProperties(['type' => 'projet', 'status' => 1]);
|
||||||
|
|
||||||
|
$sites_paths = "";
|
||||||
|
|
||||||
|
$vp_w = 600;
|
||||||
|
$vp_h = 600;
|
||||||
|
|
||||||
|
// Coordonnées géographiques des coins de la carte (France)
|
||||||
|
$latTop = 52.0; // Nord-Ouest (coin supérieur gauche)
|
||||||
|
$lonLeft = -6.0;
|
||||||
|
$latBottom = 40.0; // Sud-Est (coin inférieur droit)
|
||||||
|
$lonRight = 11.0;
|
||||||
|
|
||||||
|
|
||||||
|
foreach($allSites as $index => $site){
|
||||||
|
$title = $site->get('title')->getString();
|
||||||
|
$subtitle = $site->get('field_sous_titre')->getString();
|
||||||
|
|
||||||
|
$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();
|
||||||
|
|
||||||
|
$datacontent = htmlspecialchars("<strong>$title</strong><br>$subtitle<br>$link");
|
||||||
|
|
||||||
|
$geofield = $site->get('field_carte')->get(0);
|
||||||
|
$lon = $geofield->lon;
|
||||||
|
$lat = $geofield->lat;
|
||||||
|
$geofieldData = "$lon,$lat"; // Utiliser une chaîne pour stocker la position
|
||||||
|
|
||||||
|
$x = round(($lon - $lonLeft) / ($lonRight - $lonLeft) * $vp_w);
|
||||||
|
$y = round(($latTop - $lat) / ($latTop - $latBottom) * $vp_h);
|
||||||
|
|
||||||
|
$r = 10;
|
||||||
|
$m = -$r+4;
|
||||||
|
$l = $r*2-7;
|
||||||
|
$sites_paths .= <<<SVGSITEPATH
|
||||||
|
<g
|
||||||
|
id="projet-$index"
|
||||||
|
data-geofield="$geofieldData"
|
||||||
|
transform="translate($x,$y)"
|
||||||
|
style="cursor: pointer;" <!-- Change le curseur pour indiquer l'interaction -->
|
||||||
|
>
|
||||||
|
<rect width="10" height="10" transform="translate($x,$y)" fill="none" onclick="handleCircleClick('$datacontent')"></rect> <!-- Zone d'interaction invisible -->
|
||||||
|
|
||||||
|
<circle
|
||||||
|
class="site-link"
|
||||||
|
data-content="$datacontent"
|
||||||
|
cx="0" cy="0" r="$r"
|
||||||
|
style="fill-opacity:1;fill-rule:nonzero;" />
|
||||||
|
<path
|
||||||
|
id="path84"
|
||||||
|
d="m 0,$m v $l"
|
||||||
|
style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
|
<path
|
||||||
|
id="path85"
|
||||||
|
d="m $m,0 h $l"
|
||||||
|
style="pointer-events: none;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
|
|
||||||
|
</g>
|
||||||
|
SVGSITEPATH;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$return = [
|
||||||
|
'#cache' => [
|
||||||
|
'max-age' => 0,
|
||||||
|
],
|
||||||
|
'svg_mapsites' => [
|
||||||
|
'#theme' => 'svg_mapsites',
|
||||||
|
'#sites' => $sites_paths,
|
||||||
|
'#vpw' => $vp_w,
|
||||||
|
'#vph' => $vp_h,
|
||||||
|
'#attached' => [
|
||||||
|
'library' => [
|
||||||
|
'erable_mod/sites_map_block',
|
||||||
|
],
|
||||||
|
],
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
return $return;
|
||||||
|
// return [
|
||||||
|
// '#markup' => $this->t('Hello, Sites Map!'),
|
||||||
|
// ];
|
||||||
|
}
|
||||||
|
public function getCacheMaxAge() {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<div id="sites-map-container">
|
||||||
|
{# <svg {{ svg_attributes }}>
|
||||||
|
<path {{ path_attributes }}></path>
|
||||||
|
</svg> #}
|
||||||
|
<svg
|
||||||
|
width="100%"
|
||||||
|
height="auto"
|
||||||
|
viewBox="0 0 {{ vpw }} {{ vph }}"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
width="auto"
|
||||||
|
height="100%"
|
||||||
|
transform="
|
||||||
|
translate(-34,-43)
|
||||||
|
scale(3 3)"
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
id="g87"
|
||||||
|
transform="matrix(0.26458333,0,0,0.26458333,-117.12499,-462.76799)"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M 22.94948,0 24.34889,-18.0149 0,-25.72302 5.65439,-72.56693 20.36713,-85.65977 31.67962,-51.59929 30.80613,-4.91625 Z"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1086.6494,2370.4282)"
|
||||||
|
id="path86" />
|
||||||
|
<path
|
||||||
|
d="M 213.91022,-8.56159 245.88833,0 c 0,0 58.73522,-78.05274 188.63529,-102.77609 0,0 -13.72994,-23.9062 -20.7684,-68.77233 l -46.76509,-59.13289 22.59883,4.10628 9.98215,-59.15478 -15.22238,-6.69194 c 0,0 21.10627,-42.02694 33.11738,-51.15904 l -49.61728,-51.89156 c 0,0 -54.37257,40.3184 -83.08495,23.05862 -26.13166,-16.38332 -20.26669,-47.73592 -20.26669,-47.73592 l -84.48157,7.5286 -73.42912,23.87167 c 0,0 13.68285,68.86637 13.5616,120.85908 l 13.70164,-16.03089 -8.31311,25.90453 c -7.71795,24.04996 -30.44003,42.76792 -30.59939,44.58536 -3.6948,42.13802 -38.37183,51.8082 -82.82932,56.0101 L 0,-120.94655 l 48.38804,11.38921 63.90371,-13.15789 c 0,0 -1.62874,19.5427 -17.78042,51.54499 l 20.25382,7.61331 c 0,0 16.51357,-27.83033 25.80184,-26.51089 4.8781,0.69253 23.95695,21.70897 32.12568,26.76126 7.32295,4.5292 35.79484,10.58956 36.55389,13.534 2.94469,10.87069 4.66366,41.21097 4.66366,41.21097 z"
|
||||||
|
style="fill:#11ff77;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,543.93475,1857.6088)"
|
||||||
|
id="path87" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="layer2">
|
||||||
|
{{ sites|raw }}
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Fond du modal -->
|
||||||
|
<div id="modal-background" class="modal-background"></div>
|
||||||
|
|
||||||
|
<!-- Popup -->
|
||||||
|
<div id="popup" class="popup">
|
||||||
|
<p id="popup-content">Hello! I am a popup!</p>
|
||||||
|
<!--<button onclick="closePopup()">Close</button>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue