modif settings backend style map et ajout field étape couleurs

composer.json

@@ -16,6 +16,7 @@
     ],
     "require": {
         "composer/installers": "^2.0",
+        "drupal/color_pickr": "^1.1",
         "drupal/config_rewrite": "^1.6",
         "drupal/core-composer-scaffold": "^10.2",
         "drupal/core-project-message": "^10.2",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "b6ebb6bbd614bba5487d0d043fe1dbdd",
+    "content-hash": "d918655a40cf26c711d6e65b635d0c9b",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -2504,6 +2504,50 @@
                 "source": "https://git.drupalcode.org/project/bulkdelete"
             }
         },
+        {
+            "name": "drupal/color_pickr",
+            "version": "1.1.2",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/color_pickr.git",
+                "reference": "1.1.2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/color_pickr-1.1.2.zip",
+                "reference": "1.1.2",
+                "shasum": "3e7a797155709d5a52203daf4388e3eed0c187ca"
+            },
+            "require": {
+                "drupal/core": "^8 || ^9 || ^10"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "1.1.2",
+                    "datestamp": "1710084892",
+                    "security-coverage": {
+                        "status": "not-covered",
+                        "message": "Project has not opted into security advisory coverage!"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "sujan shrestha",
+                    "homepage": "https://www.drupal.org/user/3475737"
+                }
+            ],
+            "description": "Provides color pickr types, widgets, and formatters for drupal 9/10",
+            "homepage": "https://www.drupal.org/project/color_pickr",
+            "support": {
+                "source": "https://git.drupalcode.org/project/color_pickr"
+            }
+        },
         {
             "name": "drupal/config_devel",
             "version": "dev-1.x",

config/sync/core.entity_form_display.block_content.logo_link.default.yml

@@ -6,8 +6,10 @@ dependencies:
     - block_content.type.logo_link
     - field.field.block_content.logo_link.field_lien
     - field.field.block_content.logo_link.field_logo
+    - field.field.block_content.logo_link.field_losange_etape
     - image.style.thumbnail
   module:
+    - file
     - image
     - link
 id: block_content.logo_link.default
@@ -31,6 +33,13 @@ content:
       progress_indicator: throbber
       preview_image_style: thumbnail
     third_party_settings: {  }
+  field_losange_etape:
+    type: file_generic
+    weight: 28
+    region: content
+    settings:
+      progress_indicator: throbber
+    third_party_settings: {  }
   info:
     type: string_textfield
     weight: -5

config/sync/core.entity_form_display.node.etape.default.yml

@@ -5,6 +5,7 @@ dependencies:
   config:
     - field.field.node.etape.field_adresse
     - field.field.node.etape.field_arret_numero
+    - field.field.node.etape.field_couleur
     - field.field.node.etape.field_dates
     - field.field.node.etape.field_galleries
     - field.field.node.etape.field_geofield
@@ -17,6 +18,7 @@ dependencies:
   module:
     - address
     - autocomplete_deluxe
+    - color_pickr
     - datetime_range
     - field_group
     - geofield
@@ -66,6 +68,14 @@ content:
     settings:
       placeholder: ''
     third_party_settings: {  }
+  field_couleur:
+    type: color_pickr_default
+    weight: 26
+    region: content
+    settings:
+      theme: classic
+      hide_description: false
+    third_party_settings: {  }
   field_dates:
     type: daterange_default
     weight: 14

config/sync/core.entity_view_display.block_content.logo_link.default.yml

@@ -6,8 +6,10 @@ dependencies:
     - block_content.type.logo_link
     - field.field.block_content.logo_link.field_lien
     - field.field.block_content.logo_link.field_logo
+    - field.field.block_content.logo_link.field_losange_etape
     - image.style.large
   module:
+    - file
     - image
     - linked_field
 id: block_content.logo_link.default
@@ -32,6 +34,14 @@ content:
         token: ''
     weight: 0
     region: content
+  field_losange_etape:
+    type: file_default
+    label: above
+    settings:
+      use_description_as_link_text: true
+    third_party_settings: {  }
+    weight: 1
+    region: content
 hidden:
   field_lien: true
   langcode: true

config/sync/core.entity_view_display.node.etape.default.yml

@@ -5,6 +5,7 @@ dependencies:
   config:
     - field.field.node.etape.field_adresse
     - field.field.node.etape.field_arret_numero
+    - field.field.node.etape.field_couleur
     - field.field.node.etape.field_dates
     - field.field.node.etape.field_galleries
     - field.field.node.etape.field_geofield
@@ -15,6 +16,7 @@ dependencies:
     - node.type.etape
   module:
     - address
+    - color_pickr
     - date_range_formatter
     - entity_reference_revisions
     - image
@@ -40,6 +42,13 @@ content:
     third_party_settings: {  }
     weight: 5
     region: content
+  field_couleur:
+    type: color_pickr_default
+    label: visually_hidden
+    settings: {  }
+    third_party_settings: {  }
+    weight: 9
+    region: content
   field_dates:
     type: date_range_without_time
     label: visually_hidden

config/sync/core.entity_view_display.node.etape.teaser.yml

@@ -6,6 +6,7 @@ dependencies:
     - core.entity_view_mode.node.teaser
     - field.field.node.etape.field_adresse
     - field.field.node.etape.field_arret_numero
+    - field.field.node.etape.field_couleur
     - field.field.node.etape.field_dates
     - field.field.node.etape.field_galleries
     - field.field.node.etape.field_geofield
@@ -29,6 +30,7 @@ content:
 hidden:
   field_adresse: true
   field_arret_numero: true
+  field_couleur: true
   field_dates: true
   field_galleries: true
   field_geofield: true

config/sync/core.extension.yml

@@ -7,6 +7,7 @@ module:
   admin_toolbar: 0
   admin_toolbar_links_access_filter: 0
   advanced_text_formatter: 0
+  alter_routing: 0
   audiofield: 0
   autocomplete_deluxe: 0
   ban: 0
@@ -17,6 +18,7 @@ module:
   breakpoint: 0
   bulkdelete: 0
   ckeditor5: 0
+  color_pickr: 0
   config: 0
   config_devel: 0
   config_filter: 0
@@ -34,6 +36,7 @@ module:
   ctools: 0
   ctools_block: 0
   ctools_views: 0
+  custom_content: 0
   date_range_formatter: 0
   datetime: 0
   datetime_range: 0

config/sync/field.field.block_content.logo_link.field_losange_etape.yml

@@ -0,0 +1,27 @@
+uuid: 94631641-f244-46e7-8d50-57f3b06307a4
+langcode: fr
+status: true
+dependencies:
+  config:
+    - block_content.type.logo_link
+    - field.storage.block_content.field_losange_etape
+  module:
+    - file
+id: block_content.logo_link.field_losange_etape
+field_name: field_losange_etape
+entity_type: block_content
+bundle: logo_link
+label: 'losange étape'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  handler: 'default:file'
+  handler_settings: {  }
+  file_directory: '[date:custom:Y]-[date:custom:m]'
+  file_extensions: svg
+  max_filesize: ''
+  description_field: false
+field_type: file

config/sync/field.field.node.etape.field_couleur.yml

@@ -0,0 +1,21 @@
+uuid: 00afcd92-55e1-4b1f-be01-29629d7650dc
+langcode: fr
+status: true
+dependencies:
+  config:
+    - field.storage.node.field_couleur
+    - node.type.etape
+  module:
+    - color_pickr
+id: node.etape.field_couleur
+field_name: field_couleur
+entity_type: node
+bundle: etape
+label: Couleur
+description: ''
+required: true
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: color_pickr_code

config/sync/field.storage.block_content.field_losange_etape.yml

@@ -0,0 +1,23 @@
+uuid: 723c21f0-51f2-4f7b-a5a1-80948dbdb42d
+langcode: fr
+status: true
+dependencies:
+  module:
+    - block_content
+    - file
+id: block_content.field_losange_etape
+field_name: field_losange_etape
+entity_type: block_content
+type: file
+settings:
+  target_type: file
+  display_field: false
+  display_default: false
+  uri_scheme: public
+module: file
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

config/sync/field.storage.node.field_couleur.yml

@@ -0,0 +1,19 @@
+uuid: 9173617a-6409-4a9f-bc43-05fdbd168431
+langcode: fr
+status: true
+dependencies:
+  module:
+    - color_pickr
+    - node
+id: node.field_couleur
+field_name: field_couleur
+entity_type: node
+type: color_pickr_code
+settings: {  }
+module: color_pickr
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

config/sync/page_manager.page.node.yml

@@ -0,0 +1,12 @@
+uuid: 882ea961-8c51-44d1-ad7f-0c49a5ae6019
+langcode: fr
+status: true
+dependencies: {  }
+id: node
+label: node
+description: ''
+use_admin_theme: false
+path: '/node/[id]'
+access_logic: and
+access_conditions: {  }
+parameters: {  }

config/sync/page_manager.page.node_view.yml

@@ -1,18 +0,0 @@
-uuid: b2417728-ce2c-4a17-b699-76bf65be60eb
-langcode: fr
-status: true
-dependencies: {  }
-_core:
-  default_config_hash: RCVWP-yHwxSNiQORMIabDgHMEVqOMW58w80BQgRFJ4k
-id: node_view
-label: 'Vue du nœud'
-description: 'When enabled, this overrides the default Drupal behavior for displaying nodes at <em>/node/{node}</em>. If you add variants, you may use selection criteria such as node type or language or user access to provide different views of nodes. If no variant is selected, the default Drupal node view will be used. This page only affects nodes viewed as pages, it will not affect nodes viewed in lists or at other locations.'
-use_admin_theme: false
-path: '/node/{node}'
-access_logic: and
-access_conditions: {  }
-parameters:
-  node:
-    machine_name: node
-    label: Nœud
-    type: 'entity:node'

config/sync/page_manager.page_variant.node-panels_variant-0.yml

@@ -0,0 +1,101 @@
+uuid: 3afb7005-30db-46c4-a484-e588d2d69c56
+langcode: fr
+status: true
+dependencies:
+  config:
+    - page_manager.page.node
+    - views.view.etapes
+    - views.view.saisons
+    - views.view.thematiques
+  module:
+    - panels
+    - views
+id: node-panels_variant-0
+label: Panels
+weight: 0
+variant: panels_variant
+variant_settings:
+  id: panels_variant
+  label: null
+  weight: 0
+  uuid: df541d5f-f6d1-4438-9cc5-9ccedd22dbd0
+  blocks:
+    85ea1b9b-276f-482f-9551-e69a9525c797:
+      id: 'views_block:saisons-block_1'
+      label: ''
+      label_display: visible
+      provider: views
+      context_mapping: {  }
+      views_label: ''
+      items_per_page: none
+      exposed: {  }
+      region: first
+      weight: 0
+      uuid: 85ea1b9b-276f-482f-9551-e69a9525c797
+      css_classes:
+        - ''
+      html_id: ''
+      css_styles: ''
+    db9a883e-fef3-445f-94d8-d7dd1d12dbb0:
+      id: 'views_block:thematiques-block_1'
+      label: ''
+      label_display: visible
+      provider: views
+      context_mapping: {  }
+      views_label: ''
+      items_per_page: none
+      exposed: {  }
+      region: first
+      weight: 0
+      uuid: db9a883e-fef3-445f-94d8-d7dd1d12dbb0
+      css_classes:
+        - ''
+      html_id: ''
+      css_styles: ''
+    5a493cf9-9740-4903-90d5-261c1831a099:
+      id: 'views_block:etapes-block_2'
+      label: ''
+      label_display: visible
+      provider: views
+      context_mapping: {  }
+      views_label: ''
+      items_per_page: none
+      exposed: {  }
+      region: second
+      weight: 0
+      uuid: 5a493cf9-9740-4903-90d5-261c1831a099
+      css_classes:
+        - ''
+      html_id: ''
+      css_styles: ''
+    141a2da6-bca2-48b5-8877-3dd63534cb72:
+      id: 'views_block:etapes-block_1'
+      label: ''
+      label_display: visible
+      provider: views
+      context_mapping: {  }
+      views_label: ''
+      items_per_page: none
+      exposed: {  }
+      region: third
+      weight: 0
+      uuid: 141a2da6-bca2-48b5-8877-3dd63534cb72
+      css_classes:
+        - ''
+      html_id: ''
+      css_styles: ''
+  page_title: ''
+  layout: layout_threecol_25_50_25
+  layout_settings:
+    label: ''
+  builder: standard
+  storage_type: page_manager
+  storage_id: node-panels_variant-0
+  css_classes:
+    - ''
+  html_id: ''
+  css_styles: ''
+page: node
+selection_criteria: {  }
+selection_logic: and
+static_context: {  }

config/sync/views.view.etapes.yml

@@ -3,12 +3,14 @@ langcode: fr
 status: true
 dependencies:
   config:
+    - field.storage.node.field_couleur
     - field.storage.node.field_dates
     - field.storage.node.field_geofield
     - field.storage.node.field_vignette
     - image.style.medium
     - node.type.etape
   module:
+    - color_pickr
     - date_range_formatter
     - geofield
     - image
@@ -216,7 +218,7 @@ display:
             value: ''
             options: '{"maxWidth":"300","minWidth":"50","autoPan":true}'
             view_mode: teaser
-          leaflet_map: esri-world_imagery
+          leaflet_map: osm-outdoors
           height: '100'
           height_unit: vh
           hide_empty_map: false
@@ -234,19 +236,19 @@ display:
             options: '{"position":"topright","setView":"untilPanOrZoom","returnToPrevBounds":true,"keepCurrentZoomLevel":true,"strings":{"title":"Locate my position"}}'
             automatic: false
           map_position:
-            force: false
+            force: true
             center:
-              lat: 0.0
+              lat: 46.99
-              lon: 0.0
+              lon: 2.8
-            zoomControlPosition: topleft
+            zoomControlPosition: bottomleft
-            zoom: 5
+            zoom: 6
-            minZoom: 1
+            minZoom: 6
             maxZoom: 18
             zoomFiner: 0
           weight: ''
           icon:
-            iconType: marker
+            iconType: html
-            iconUrl: ''
+            iconUrl: /sites/default/files/2024-08/test.svg
             shadowUrl: ''
             className: ''
             iconSize:
@@ -264,8 +266,8 @@ display:
             popupAnchor:
               x: ''
               'y': ''
-            html: '<div></div>'
+            html: "<div></div>\r\n<div></div>\r\n<div></div>\r\n<div class=\"nid\">{{ nid }}</div>\r\n<div class=\"couleur\">{{ field_couleur }}</div>"
-            html_class: leaflet-map-divicon
+            html_class: 'leaflet-map-divicon '
             circle_marker_options: '{"radius":100,"color":"red","fillColor":"#f03","fillOpacity":0.5}'
           leaflet_markercluster:
             control: false
@@ -464,6 +466,186 @@ display:
           multi_type: separator
           separator: ', '
           field_api_classes: false
+        field_adresse_postal_code:
+          id: field_adresse_postal_code
+          table: node__field_adresse
+          field: field_adresse_postal_code
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: standard
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+        field_dates:
+          id: field_dates
+          table: node__field_dates
+          field: field_dates
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: date_range_without_time
+          settings:
+            timezone_override: ''
+            one_day: 'd F Y'
+            one_month: 'd - {d} F Y'
+            several_months: 'd F - {d} {F} Y'
+            several_years: 'd F Y - {d} {F} {Y}'
+            single: 'd F Y'
+            single_all_day: 'd F Y'
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        field_couleur:
+          id: field_couleur
+          table: node__field_couleur
+          field: field_couleur
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: color_pickr
+          type: color_pickr_default
+          settings: {  }
+          group_column: color_pickr
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
       style:
         type: html_list
         options:
@@ -490,7 +672,9 @@ display:
         - url
         - 'user.node_grants:view'
         - user.permissions
-      tags: {  }
+      tags:
+        - 'config:field.storage.node.field_couleur'
+        - 'config:field.storage.node.field_dates'
   block_2:
     id: block_2
     display_title: Map
@@ -811,6 +995,134 @@ display:
           multi_type: separator
           separator: ', '
           field_api_classes: false
+        field_couleur:
+          id: field_couleur
+          table: node__field_couleur
+          field: field_couleur
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: color_pickr
+          type: color_pickr_default
+          settings: {  }
+          group_column: color_pickr
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        nid:
+          id: nid
+          table: node_field_data
+          field: nid
+          relationship: none
+          group_type: group
+          admin_label: ''
+          entity_type: node
+          entity_field: nid
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: number_integer
+          settings:
+            thousand_separator: ''
+            prefix_suffix: true
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
       defaults:
         fields: false
       display_description: ''
@@ -824,6 +1136,7 @@ display:
         - 'user.node_grants:view'
         - user.permissions
       tags:
+        - 'config:field.storage.node.field_couleur'
         - 'config:field.storage.node.field_dates'
         - 'config:field.storage.node.field_geofield'
         - 'config:field.storage.node.field_vignette'

web/modules/custom/alter_routing/alter_routing.info.yml

@@ -0,0 +1,5 @@
+name: 'Alter Routing'
+type: module
+description: 'Custom module to alter routing and redirect node/2 to the homepage.'
+core_version_requirement: ^8 || ^9 || ^10
+package: Custom

web/modules/custom/alter_routing/alter_routing.module

@@ -0,0 +1,26 @@
+<?php
+
+/**
+ * Implements hook_preprocess_page().
+ */
+function alter_routing_preprocess_page(&$variables) {
+    // Check if the current page is a node page.
+    if (isset($page['#node']) && $page['#node'] instanceof \Drupal\node\NodeInterface) {
+      // Load the front page content directly from its path.
+      $front_page_path = \Drupal::config('system.site')->get('url');
+      $front_page_node = \Drupal\node\Entity\Node::load(\Drupal::entityTypeManager()->getStorage('node')->getQuery()
+        ->condition('type', 'page') // Change this to the content type if needed
+        ->condition('status', 1)
+        ->sort('created', 'DESC')
+        ->execute()
+      );
+  
+      // If front page content is found, replace node content with front page content.
+      if ($front_page_node) {
+        $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
+        $rendered_content = $view_builder->view($front_page_node, 'full');
+        $page['content']['#markup'] = \Drupal::service('renderer')->render($rendered_content);
+      }
+    }
+}
+?>

web/themes/custom/caravane/assets/js/main.js

@@ -53,27 +53,24 @@ import router from './router/router';
       app.mount('#content-modale');
 
       processEtapeLinks(store);
-      processStaticLinks(store)
+      processStaticLinks(store);
+
+      setupEtapeMapPopup(store);
     }
 
 
     function onClickContentLink(e, store, category){
       e.preventDefault();
-      
+      let a;
-      let a = e.currentTarget;
+
-      let nid = a.dataset.nodeNid;
+      const li = e.target.closest('li');
-      // console.log(nid);
+      a = li.querySelector('a');
+    
+      let nid = a.dataset.nodeNid;
 
-      let general_link_fields = document.querySelectorAll('#menu > ul > li > a');
-      for (let field of general_link_fields) {
-        if (field.classList.contains('is-active')) {
-          field.classList.remove('is-active');
-        }
-      }
       if (category === 'etape') {
         store.fetchEtapeData(nid);
       } else if (category === 'static') {
-        e.currentTarget.classList.add('is-active');
         store.fetchStaticData(nid);
       }
 
@@ -92,8 +89,9 @@ import router from './router/router';
 
 
     function processEtapeLinks(store){
-      let etape_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
+      let etape_li = document.querySelectorAll('#etapes-liste li');
-      etape_link_fields.forEach((field) => {
+      etape_li.forEach((li) => {
+        let field = li.querySelector('div.views-field-title');
         let nid = null;
         let classList = field.classList;
         classList.forEach((classe) => {
@@ -101,18 +99,20 @@ import router from './router/router';
           let result = classe.match(reg);
           if (result) {
             nid = result[1];
-            console.log(nid);
           }
         })
         
         if (nid) {
           let a = field.querySelector('a');
           a.setAttribute('data-node-nid', nid);
-          a.addEventListener('click', (e) => onClickContentLink(e, store, 'etape'));
+          li.addEventListener('click', (e) => onClickContentLink(e, store, 'etape'));
         }
-        
+        let couleur = li.querySelector('.views-field-field-couleur .snippets-description').innerText;
-        
+        let iconElements = li.querySelectorAll('.icone-arret > div');
-        
+        for (let element of iconElements) {
+          element.style.backgroundColor = couleur;
+        }
+
       })
     }
 
@@ -123,7 +123,6 @@ import router from './router/router';
       const menuBurger = document.querySelector('#hamburger');
       const menuH2 = document.querySelector('#menu > h2');
       menuButton.addEventListener('click', (e) => { 
-        // e.preventDefault();
         setTimeout(() => {
           menuContainer.classList.toggle('open');
           menuTitle.classList.toggle('open');
@@ -140,6 +139,42 @@ import router from './router/router';
         }
       })
     }
+
+    function setupEtapeMapPopup(store) {
+      setTimeout(() => {
+        const icons = document.querySelectorAll('.leaflet-map-divicon');
+        for (let icon of icons) {
+          const colorContainer = icon.querySelector('.couleur');
+          const colorDiv = colorContainer.querySelector('div > div:nth-of-type(4)');
+          const color = colorDiv.innerText.substring(colorDiv.innerText.indexOf('>') + 1, colorDiv.innerText.indexOf('<', colorDiv.innerText.indexOf('>') + 1)).trim();
+          
+          const nid = icon.querySelector('.nid');
+          const nidValue = nid.querySelector('div > div').innerText;
+
+          icon.addEventListener('click', function(event) {
+            store.fetchEtapeData(nidValue);
+          });
+          
+          colorContainer.remove();
+          nid.remove();
+          const iconElements = icon.querySelectorAll('div');
+          for (let iconElement of iconElements) {
+            iconElement.style.backgroundColor = color;
+          }
+          icon.removeAttribute('title');
+
+          icon.addEventListener('mouseenter', function (event) {
+            icon.style.transform = `${icon.style.transform} scale(1.1)`;
+            const popup = document.querySelector('.leaflet-tooltip-center > div');
+            popup.style.opacity = "1";
+          });
+
+          icon.addEventListener('mouseleave', function (event) {
+            icon.style.transform = icon.style.transform.split(' ')[0] + icon.style.transform.split(' ')[1] + icon.style.transform.split(' ')[2];
+          })
+        }
+      }, 500);
+    }
     
     init()
   } // end CaravaneTheme()

web/themes/custom/caravane/assets/js/stores/content.js

@@ -43,18 +43,19 @@ export const useContentStore = defineStore('content', {
               this.etape.etape_number = etape.attributes.field_arret_numero;
               this.etape.dates = etape.attributes.field_dates;
               this.etape.geofield = etape.attributes.field_geofield;
-              this.etape.galeries = await fetchEtapeContent('field_galleries', etape.relationships);
+              this.etape.galeries = await this.fetchEtapeContent('field_galleries', etape.relationships);
-              const partiesFetch = await fetchEtapeContent('field_parties', etape.relationships);
+              const partiesFetch = await this.fetchEtapeContent('field_parties', etape.relationships);
               let partiesArray = []
               for (let partie of partiesFetch) {
                 partiesArray.push({ title: partie.attributes.field_titre, text: partie.attributes.field_texte.value });
               }
               this.etape.parties = partiesArray;
-              this.etape.saison = await fetchEtapeContent('field_saison', etape.relationships);
+              this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships);
-              this.etape.saison = await fetchEtapeContent('field_saison', etape.relationships);
+              this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships);
-              this.etape.thematiques = await fetchEtapeContent('field_thematiques', etape.relationships);
+              this.etape.thematiques = await this.fetchEtapeContent('field_thematiques', etape.relationships);
-              const vignetteFetch = await fetchEtapeContent('field_vignette', etape.relationships);
+              const vignetteFetch = await this.fetchEtapeContent('field_vignette', etape.relationships);
               this.etape.vignette = { url: vignetteFetch.attributes.uri.url, alt: etape.attributes.field_vignette_alt };
+              this.setActiveItemInMenu();
               break;
             }
           }
@@ -76,7 +77,7 @@ export const useContentStore = defineStore('content', {
             if (staticContent.attributes.drupal_internal__nid == nid) {
               staticContent.attributes.metatag.forEach(item => {
                 if (item.tag === 'meta') {
-                  this.page.title = item.attributes.content;
+                  this.page.title = item.attributes.content.split(' |')[0];
                 }
                 if (item.tag === 'link') {
                   this.href = item.attributes.href;
@@ -85,6 +86,7 @@ export const useContentStore = defineStore('content', {
               this.page.text = staticContent.attributes.field_texte.value;
             }
           }
+          this.setActiveItemInMenu();
         } catch (error) {
           this.error = 'Failed to fetch data';
           console.error('Issue with getNodeData', error);
@@ -95,19 +97,55 @@ export const useContentStore = defineStore('content', {
       emptyAll() {
         this.etape = {};
         this.page = {};
+        this.setActiveItemInMenu();
       },
+      setActiveItemInMenu() {
+        const title = this.etape.title || this.page.title;
+
+        const generalLinks = document.querySelectorAll('#menu > ul > li > a');
+        if (Object.entries(this.etape).length === 0 && Object.entries(this.page).length === 0) {
+          for (let link of generalLinks) {
+            link.classList.remove('is-active');
+          }
+          generalLinks[0].classList.add('is-active');
+        } else {
+          for (let link of generalLinks) {
+            if (link.innerText === title) {
+              link.classList.add('is-active');
+            } else {
+              link.classList.remove('is-active');
+            }
+          }
+        }
+
+        const etapeLinks = document.querySelectorAll('#etapes-liste li');
+        for (let link of etapeLinks) {
+          const a = link.querySelector('a');
+          if (a.innerText === title) {
+            link.classList.remove('inactive');
+          } else {
+            link.classList.add('inactive');
+          }
+        }
+        const inactiveLinks = document.querySelectorAll('#etapes-liste li.inactive');
+        if (inactiveLinks.length === etapeLinks.length) {
+          for (let link of inactiveLinks) {
+            link.classList.remove('inactive');
+          }
+        }
+      },
+      async fetchEtapeContent(field, relationships) {
+        if (relationships[field].data) {
+          try {
+            const contentLink = relationships[field].links.related.href;
+            const contentFetch = await REST.get(contentLink);
+            return contentFetch.data.data;
+          } catch (error) {
+            this.error = 'Failed to fetch data';
+            console.error('Issue with getNodeData', error);
+          }
+        }
+      }
     },
   });
 
-async function fetchEtapeContent(field, relationships) {
-  if (relationships[field].data) {
-    try {
-      const contentLink = relationships[field].links.related.href;
-      const contentFetch = await REST.get(contentLink);
-      return contentFetch.data.data;
-    } catch (error) {
-      this.error = 'Failed to fetch data';
-      console.error('Issue with getNodeData', error);
-    }
-  }
-}

web/themes/custom/caravane/assets/js/vuejs/Modale.vue

@@ -26,6 +26,7 @@
   
       
       <div><pre><b>GEOFIELD</b>{{etape.geofield}}</pre></div>
+      <div><pre><b>VIGNETTE</b>{{etape.vignette}}</pre></div>
       <div><pre><b>GALERIES</b>{{etape.galeries}}</pre></div>
       <div><pre><b>PARTIES</b>{{etape.parties}}</pre></div>
       <div><pre><b>SAISON</b>{{etape.saison}}</pre></div>
@@ -61,9 +62,14 @@ const route = useRoute();
 const { loading, error, href, etape, page } = storeToRefs(store);
 
 watch(() => route.params.id, (newId) => {
-  store.fetchEtapeData(newId);
+  if (!newId) {
-  if (!etape.value.data) {
+    store.emptyAll();
-    store.fetchStaticData(newId);
+    } else {
+      store.fetchEtapeData(newId);
+    if (!etape.value.data) {
+      store.fetchStaticData(newId);
+    }
+    window.scrollTo({top: 0, behavior: 'smooth'});
   }
 });
 
@@ -71,12 +77,9 @@ watch(() => href.value, (newHref) => {
   const relativePath = newHref.split('.fr')[1];
   if (relativePath && (relativePath !== '' || relativePath !== '/')) {
     router.push(relativePath);
-  } else {
-    store.emptyAll();
   }
 });
 
-
 const isEtapeValid = computed(() => {
   return etape.value && !isObjectEmpty(etape.value);
 });

web/themes/custom/caravane/assets/scss/main.scss

@@ -2,6 +2,7 @@
 
 $body-margin-x: 30px;
 $body-margin-y: 5px;
+$body-margin-bottom: 4vh;
 
 $sm-font-size: 0.8rem;
 $m-font-size: 1.4rem;
@@ -20,6 +21,7 @@ body{
   color: $main-color;
   margin: 0;
   padding: 0;
+  overflow-y: scroll;
   .layout-container {
     > header {
       z-index: 2;
@@ -242,6 +244,138 @@ body{
               width: 100vw;
               .leaflet-container {
                 // add map style here
+                .leaflet-control-zoom {
+                  border: none;
+                  margin: 0;
+                  left: $body-margin-x;
+                  bottom: $body-margin-bottom;
+                  > a {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: $m-font-size;
+                    font-family: 'marianne', sans-serif;
+                    font-weight: lighter;
+                    width: 4vh;
+                    height: 4vh;
+                  }
+                  > a:first-of-type {
+                    border-top-left-radius: 2vh;
+                    border-top-right-radius: 2vh;
+
+                  }
+                  > a:last-of-type {
+                    border-bottom-left-radius: 2vh;
+                    border-bottom-right-radius: 2vh;
+                    > span {
+                      padding-bottom: 10px;
+                    }
+                  }
+                }
+                .leaflet-right {
+                  right: unset;
+                  left: 0;
+                }
+                .leaflet-map-divicon {
+                  width: 10px;
+                  height: 30px;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  align-items: center;
+                  transition: transform 0.3s ease-out;
+                  > div {
+                    background-color: red;
+                    display: block;
+                    width: 20px;
+                    height: 10px;
+                    }
+                  > div:first-of-type {
+                    height: 8px;
+                    clip-path: polygon(0 0, 100% 0, 50% 100%);
+                    transform: rotate(180deg);
+                  }
+                  > div:last-of-type {
+                    height: 8px;
+                    clip-path: polygon(0 0, 100% 0, 50% 100%);
+                  }
+                }
+              }
+              .leaflet-tooltip-center {
+                width: 20vw;
+                padding: 0;
+                border-radius: none;
+                box-shadow: none;
+                opacity: 1 !important;
+                border-radius: 0 !important;
+                background-color: transparent;
+                border: none;
+                pointer-events: none;
+                > div {
+                  display: grid;
+                  grid-template-columns: minmax(10px, 10vw) 10vw;
+                  grid-template-rows: 1.5fr 0.5fr;
+                  transform: translateY(-60%);
+                  background-color: white;
+                  opacity: 0;
+                  transition: opacity 0.3s ease-out;
+                  > div:first-of-type {
+                    grid-column: 1 / span 1;
+                    grid-row: 1 / span 1;
+                    font-family: 'Joost', sans-serif;
+                    font-size: $m-font-size;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    padding-top: 10px;
+                    padding-left: 20px;
+                    padding-right: 20px;
+                    text-wrap: wrap;
+                    > a {
+                      font-weight: bold;
+                      text-decoration: none;
+                      color: $main-color;
+                      padding-right: 10px;
+                    }
+                  }
+                  > div:nth-of-type(2) {
+                    grid-column: 1 / span 1;
+                    grid-row: 2 / span 1;
+                    text-align: center;
+                    padding: 10px 0;
+                    > time {
+                      font-size: $sm-font-size;
+                      font-family: 'Marianne', sans-serif;
+                      font-weight: lighter;
+                    }
+                  }
+                  > a {
+                    display: block;
+                    grid-column: 2 / span 1;
+                    grid-row: 1 / span 2;
+                    overflow: hidden;
+                    width: 100%;
+                    height: 100%;
+                    padding: 0;
+                    > div {
+                      width: 100%;
+                      display: block;
+                      padding: 0;
+                      background-color: blue;
+                      max-height: 0;
+                      > img {
+                        padding: 0;
+                        width: 100%;
+                        height: auto;
+                        object-fit: cover;
+                        margin: 0;
+                        display: block;
+                      }
+                    }
+                  }
+
+                }
               }
             } 
             > .layout__region--third {
@@ -259,19 +393,98 @@ body{
                 pointer-events: auto;
                 ul {
                   list-style: none;
-                  > li > div {
+                  > li {
                     display: flex;
-                    justify-content: flex-end;
+                    justify-content: end;
-                    a {
+                    align-items: center;
-                      text-decoration: none;
+                    margin: 30px 0;
-                      color: $main-color;
+                    transform: scale(1);
-                      font-family: 'Joost', sans-serif;
+                    opacity: 1;
-                      font-weight: bold;
+                    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
-                      font-size: $m-font-size;
+                    cursor: pointer;
-                      display: inline-block;
+                    > .infos-arret {
-                      margin: 15px 0;
+                      display: grid;
-                      text-align: right;
+                      grid-template-columns: auto auto;
+                      grid-template-rows: auto auto;
+                      justify-content: end;
+                      margin-right: 20px;
+                      p {
+                        margin: 0;
+                      }
+                      > .views-field-title {
+                        grid-column: 1 / span 1;
+                        grid-row: 1 / span 1;
+                        margin-right: 10px;
+                        a {
+                          text-decoration: none;
+                          color: $main-color;
+                          font-family: 'Joost', sans-serif;
+                          font-weight: bold;
+                          font-size: $m-font-size;
+                          display: inline-block;
+                          text-align: right;
+                        }
+                      }
+                      > .views-field-field-adresse-postal-code {
+                        grid-column: 2 / span 1;
+                        grid-row: 1 / span 1;
+                        color: $main-color;
+                        font-family: 'Joost', sans-serif;
+                        font-weight: lighter;
+                        font-size: $m-font-size;
+                        align-self: end;
+                        > span {
+                          > p::before {
+                            content: '(';
+                          }
+                          > p::after {
+                            content: ')';
+                          }
+                        }
+                        
+                      }
+                      > .views-field-field-dates {
+                        grid-column: 1 / span 2;
+                        grid-row: 2 / span 1;
+                        font-size: $sm-font-size;
+                        font-family: 'Marianne', sans-serif;
+                        font-weight: lighter;
+                        text-align: right;
+                        margin-top: 7px;
+                      }
+                      > .views-field-field-couleur {
+                        display: none;
+                      }
                     }
+                    > .icone-arret {
+                      width: 10px;
+                      height: 30px;
+                      display: flex;
+                      flex-direction: column;
+                      justify-content: center;
+                      align-items: center;
+                      > div {
+                        background-color: red;
+                        display: block;
+                        width: 20px;
+                        height: 10px;
+                        }
+                      > div:first-of-type {
+                        height: 8px;
+                        clip-path: polygon(0 0, 100% 0, 50% 100%);
+                        transform: rotate(180deg);
+                      }
+                      > div:last-of-type {
+                        height: 8px;
+                        clip-path: polygon(0 0, 100% 0, 50% 100%);
+                      }
+                    }
+                  }
+                  > li:hover {
+                    transform: scale(1.05);
+                  }
+                  > li.inactive {
+                    opacity: 0.6;
                   }
                 }
               }

web/themes/custom/caravane/caravane.theme

@@ -36,6 +36,26 @@ function caravane_preprocess_node(&$variables) {
 
 }
 
-function your_theme_preprocess_block(&$variables) {
+function cavarane_preprocess_block(&$variables) {
 
+}
+
+function caravane_theme_suggestions_views_view_field_alter(array &$suggestions, array $variables) {
+  $view = $variables['view'];
+  $display_id = $variables['view']->current_display;
+  if ($display_id == 'block_1' && $view->id() == 'etapes') {
+    $suggestions[] = 'views_view_field__block_1__etape_list';
+  }
+  if ($display_id == 'block_2') {
+    $suggestions[] = 'views_view_field__block_2__popup_map';
+  }
+}
+
+function caravane_theme_suggestions_views_view_fields_alter(array &$suggestions, array $variables) {
+  $view = $variables['view'];
+  $display_id = $variables['view']->current_display;
+  $view_id = $view->id();
+  if ($display_id == 'block_1' && $view_id == 'etapes') {
+    $suggestions[] = 'views_view_fields__block_2__liste_etapes';
+  }
 }

web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig

@@ -0,0 +1,23 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a single field in a view.
+ *
+ * Available variables:
+ * - view: The view that the field belongs to.
+ * - field: The field handler that can process the input.
+ * - row: The raw result of the database query that generated this field.
+ * - output: The processed output that will normally be used.
+ *
+ * When fetching output from the row this construct should be used:
+ * data = row[field.field_alias]
+ *
+ * The above will guarantee that you'll always get the correct data, regardless
+ * of any changes in the aliasing that might happen if the view is modified.
+ *
+ * @see template_preprocess_views_view_field()
+ *
+ * @ingroup themeable
+ */
+#}
+<p>{{- output -}}</p>

web/themes/custom/caravane/templates/views-view-field--block-2--popup-map.html.twig

@@ -0,0 +1,32 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a single field in a view.
+ *
+ * Available variables:
+ * - view: The view that the field belongs to.
+ * - field: The field handler that can process the input.
+ * - row: The raw result of the database query that generated this field.
+ * - output: The processed output that will normally be used.
+ *
+ * When fetching output from the row this construct should be used:
+ * data = row[field.field_alias]
+ *
+ * The above will guarantee that you'll always get the correct data, regardless
+ * of any changes in the aliasing that might happen if the view is modified.
+ *
+ * @see template_preprocess_views_view_field()
+ *
+ * @ingroup themeable
+ */
+#}
+<div>
+    {% if output %}
+        {% set separated_contents = output|split('\n') %}
+        {% for content in separated_contents %}
+            {% if content != '' %}
+                <div class="separated-content">{{ content|trim }}</div>
+            {% endif %}
+        {% endfor %}
+    {% endif %}
+</div

web/themes/custom/caravane/templates/views-view-fields--block-2--liste-etapes.html.twig

@@ -0,0 +1,61 @@
+{#
+/**
+ * @file
+ * Default view template to display all the fields in a row.
+ *
+ * Available variables:
+ * - view: The view in use.
+ * - fields: A list of fields, each one contains:
+ *   - content: The output of the field.
+ *   - raw: The raw data for the field, if it exists. This is NOT output safe.
+ *   - class: The safe class ID to use.
+ *   - handler: The Views field handler controlling this field.
+ *   - inline: Whether or not the field should be inline.
+ *   - wrapper_element: An HTML element for a wrapper.
+ *   - wrapper_attributes: List of attributes for wrapper element.
+ *   - separator: An optional separator that may appear before a field.
+ *   - label: The field's label text.
+ *   - label_element: An HTML element for a label wrapper.
+ *   - label_attributes: List of attributes for label wrapper.
+ *   - label_suffix: Colon after the label.
+ *   - element_type: An HTML element for the field content.
+ *   - element_attributes: List of attributes for HTML element for field content.
+ *   - has_label_colon: A boolean indicating whether to display a colon after
+ *     the label.
+ *   - element_type: An HTML element for the field content.
+ *   - element_attributes: List of attributes for HTML element for field content.
+ * - row: The raw result from the query, with all data it fetched.
+ *
+ * @see template_preprocess_views_view_fields()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="infos-arret">
+    {% for field in fields -%}
+    {{ field.separator }}
+    {%- if field.wrapper_element -%}
+        <{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
+    {%- endif %}
+    {%- if field.label -%}
+        {%- if field.label_element -%}
+        <{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
+        {%- else -%}
+        {{ field.label }}{{ field.label_suffix }}
+        {%- endif %}
+    {%- endif %}
+    {%- if field.element_type -%}
+        <{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}>
+    {%- else -%}
+        {{ field.content }}
+    {%- endif %}
+    {%- if field.wrapper_element -%}
+        </{{ field.wrapper_element }}>
+    {%- endif %}
+    {%- endfor %}
+</div>
+<div class="icone-arret">
+    <div></div>
+    <div></div>
+    <div></div>
+</div>