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

home projets map block

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2025-11-10 16:59:31 +01:00
parent 11c4c6d454
commit f73d86d81a
6 changed files with 244 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
config/sync/field.field.node.static.field_map_block.yml
View File

@@ -21,5 +21,6 @@ settings:
selection: blocks
selection_settings:
plugin_ids:
projetsmap_block: projetsmap_block
sitesmap_block: sitesmap_block
field_type: block_field

22
config/sync/pathauto.pattern.projets.yml Normal file
View File

@@ -0,0 +1,22 @@
uuid: 658b6e7b-ca66-4393-a395-48ceecd74eba
langcode: fr
status: true
dependencies:
module:
- node
id: projets
label: Projets
type: 'canonical_entities:node'
pattern: '/projets/[node:title]'
selection_criteria:
e4b92eaa-98ed-445e-af7f-d5f8f5f1ce4a:
id: 'entity_bundle:node'
negate: false
uuid: e4b92eaa-98ed-445e-af7f-d5f8f5f1ce4a
context_mapping:
node: node
bundles:
projet: projet
selection_logic: and
weight: -5
relationships: { }

7
web/modules/custom/q2d_mod/q2d_mod.libraries.yml
View File

@@ -1,4 +1,11 @@
sites_map_block:
css:
theme:
assets/css/fontface.css: {}
assets/css/carte-interactive-qdd.css: {}
js:
assets/js/carte-interactive-qdd.js: {}
projets_map_block:
css:
theme:
assets/css/fontface.css: {}

3
web/modules/custom/q2d_mod/q2d_mod.module
View File

@@ -13,5 +13,8 @@ function q2d_mod_theme() {
'svg_mapsites' => array(
'variables' => array('vpw' => null, 'vph' => null, 'sites' => [], 'label' => null),
),
'svg_mapprojets' => array(
'variables' => array('vpw' => null, 'vph' => null, 'sites' => [], 'label' => null),
),
);
}

156
web/modules/custom/q2d_mod/src/Plugin/Block/ProjetsMap.php Normal file
View File

@@ -0,0 +1,156 @@
<?php
namespace Drupal\q2d_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;
use Pel\Test\imagetests\CanonEos650dTest;
/**
* Provides a 'Sites Map' Block.
* @Block(
* id = "projetsmap_block",
* admin_label = @Translation("Projets map Block"),
* )
*/
class ProjetsMap extends BlockBase {
/**
* {@inheritdoc}
*/
public function build() {
$language = \Drupal::languageManager()->getCurrentLanguage()->getId();
$return = null;
$allSites = \Drupal::entityTypeManager()->getStorage('node')
->loadByProperties(['type' => 'site', '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){
$langcode = \Drupal::languageManager()->getCurrentLanguage()->getId();
// $title = $site->get('title')->getString();
$title = $site->hasTranslation($language) ? $site->getTranslation($language)->get('title')->getString() : $site->get('title')->getString();
// $subtitle = $site->get('field_sous_titre')->getString();
$subtitle = $site->hasTranslation($language) ? $site->getTranslation($language)->get('field_sous_titre')->getString() : $site->get('field_sous_titre')->getString();
$link_options = ['absolute' => TRUE, 'attributes' => ['class' => 'site-link'], 'language' => \Drupal::languageManager()->getLanguage($langcode)]; // Passer 'absolute' à TRUE
$site_url = $site->toUrl('canonical', $link_options)->toString(); // URL absolue pour le data-url
$site_link_object = Link::createFromRoute($title, 'entity.node.canonical', ['node' => $site->id()], $link_options);
$link = $site_link_object->toString()->getGeneratedLink();
$projets = \Drupal::entityTypeManager()->getStorage('node')
->loadByProperties([
'type' => 'projet',
'status' => 1,
'field_site_projet' => $site->id()
]);
$datahtml = "<strong>$link</strong><br>$subtitle<ul>";
foreach($projets as $j => $projet) {
$projet_title = $projet->hasTranslation($language) ? $projet->getTranslation($language)->get('title')->getString() : $projet->get('title')->getString();
$equipe = $projet->hasTranslation($language) ? $projet->getTranslation($language)->get('field_nom_de_l_equipe')->getString() : $projet->get('field_nom_de_l_equipe')->getString();
$laureats = $projet->get('field_laureats')->getString();
// $projet_url = $projet->toUrl('canonical', $link_options)->toString(); // URL absolue pour le data-url
$projet_link_object = Link::createFromRoute($projet_title, 'entity.node.canonical', ['node' => $projet->id()], $link_options);
$projet_link = $projet_link_object->toString()->getGeneratedLink();
$class = $laureats == "1" ? "laureat" : "";
$datahtml .= "<li class='$class'>$projet_link<br/>$equipe</li>";
}
$datahtml .= "</ul>";
$datacontent = htmlspecialchars($datahtml);
$geofield = $site->get('field_geofield')->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 = 12;
$m = -$r/1.5+3;
$l = $r/1.5 +2.5;
$sites_paths .= <<<SVGSITEPATH
<g
id="site-$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"
data-url="$site_url"
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_mapprojets',
'#label' => "Les 30 projets",
'#sites' => $sites_paths,
'#vpw' => $vp_w,
'#vph' => $vp_h,
'#attached' => [
'library' => [
'q2d_mod/projets_map_block',
],
],
]
];
return $return;
// return [
// '#markup' => $this->t('Hello, Sites Map!'),
// ];
}
public function getCacheMaxAge() {
return 0;
}
}

55
web/modules/custom/q2d_mod/templates/svg-mapprojets.html.twig Normal file
View File

@@ -0,0 +1,55 @@
<div id="sites-map-container">
<h2>{{label}}</h2>
{# <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:#ffffff;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>