modif settings backend style map et ajout field étape couleurs

This commit is contained in:
Valentin 2024-08-09 17:04:53 +02:00
parent f61c81c714
commit bdf8011dd2
26 changed files with 1130 additions and 88 deletions

View File

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

46
composer.lock generated
View File

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically" "This file is @generated automatically"
], ],
"content-hash": "b6ebb6bbd614bba5487d0d043fe1dbdd", "content-hash": "d918655a40cf26c711d6e65b635d0c9b",
"packages": [ "packages": [
{ {
"name": "asm89/stack-cors", "name": "asm89/stack-cors",
@ -2504,6 +2504,50 @@
"source": "https://git.drupalcode.org/project/bulkdelete" "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", "name": "drupal/config_devel",
"version": "dev-1.x", "version": "dev-1.x",

View File

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

View File

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

View File

@ -6,8 +6,10 @@ dependencies:
- block_content.type.logo_link - block_content.type.logo_link
- field.field.block_content.logo_link.field_lien - field.field.block_content.logo_link.field_lien
- field.field.block_content.logo_link.field_logo - field.field.block_content.logo_link.field_logo
- field.field.block_content.logo_link.field_losange_etape
- image.style.large - image.style.large
module: module:
- file
- image - image
- linked_field - linked_field
id: block_content.logo_link.default id: block_content.logo_link.default
@ -32,6 +34,14 @@ content:
token: '' token: ''
weight: 0 weight: 0
region: content 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: hidden:
field_lien: true field_lien: true
langcode: true langcode: true

View File

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

View File

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

View File

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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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: { }

View File

@ -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'

View File

@ -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: { }

View File

@ -3,12 +3,14 @@ langcode: fr
status: true status: true
dependencies: dependencies:
config: config:
- field.storage.node.field_couleur
- field.storage.node.field_dates - field.storage.node.field_dates
- field.storage.node.field_geofield - field.storage.node.field_geofield
- field.storage.node.field_vignette - field.storage.node.field_vignette
- image.style.medium - image.style.medium
- node.type.etape - node.type.etape
module: module:
- color_pickr
- date_range_formatter - date_range_formatter
- geofield - geofield
- image - image
@ -216,7 +218,7 @@ display:
value: '' value: ''
options: '{"maxWidth":"300","minWidth":"50","autoPan":true}' options: '{"maxWidth":"300","minWidth":"50","autoPan":true}'
view_mode: teaser view_mode: teaser
leaflet_map: esri-world_imagery leaflet_map: osm-outdoors
height: '100' height: '100'
height_unit: vh height_unit: vh
hide_empty_map: false hide_empty_map: false
@ -234,19 +236,19 @@ display:
options: '{"position":"topright","setView":"untilPanOrZoom","returnToPrevBounds":true,"keepCurrentZoomLevel":true,"strings":{"title":"Locate my position"}}' options: '{"position":"topright","setView":"untilPanOrZoom","returnToPrevBounds":true,"keepCurrentZoomLevel":true,"strings":{"title":"Locate my position"}}'
automatic: false automatic: false
map_position: map_position:
force: false force: true
center: 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 maxZoom: 18
zoomFiner: 0 zoomFiner: 0
weight: '' weight: ''
icon: icon:
iconType: marker iconType: html
iconUrl: '' iconUrl: /sites/default/files/2024-08/test.svg
shadowUrl: '' shadowUrl: ''
className: '' className: ''
iconSize: iconSize:
@ -264,8 +266,8 @@ display:
popupAnchor: popupAnchor:
x: '' x: ''
'y': '' '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}' circle_marker_options: '{"radius":100,"color":"red","fillColor":"#f03","fillOpacity":0.5}'
leaflet_markercluster: leaflet_markercluster:
control: false control: false
@ -464,6 +466,186 @@ display:
multi_type: separator multi_type: separator
separator: ', ' separator: ', '
field_api_classes: false 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: style:
type: html_list type: html_list
options: options:
@ -490,7 +672,9 @@ display:
- url - url
- 'user.node_grants:view' - 'user.node_grants:view'
- user.permissions - user.permissions
tags: { } tags:
- 'config:field.storage.node.field_couleur'
- 'config:field.storage.node.field_dates'
block_2: block_2:
id: block_2 id: block_2
display_title: Map display_title: Map
@ -811,6 +995,134 @@ display:
multi_type: separator multi_type: separator
separator: ', ' separator: ', '
field_api_classes: false 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: defaults:
fields: false fields: false
display_description: '' display_description: ''
@ -824,6 +1136,7 @@ display:
- 'user.node_grants:view' - 'user.node_grants:view'
- user.permissions - user.permissions
tags: tags:
- 'config:field.storage.node.field_couleur'
- 'config:field.storage.node.field_dates' - 'config:field.storage.node.field_dates'
- 'config:field.storage.node.field_geofield' - 'config:field.storage.node.field_geofield'
- 'config:field.storage.node.field_vignette' - 'config:field.storage.node.field_vignette'

View File

@ -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

View File

@ -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);
}
}
}
?>

View File

@ -53,27 +53,24 @@ import router from './router/router';
app.mount('#content-modale'); app.mount('#content-modale');
processEtapeLinks(store); processEtapeLinks(store);
processStaticLinks(store) processStaticLinks(store);
setupEtapeMapPopup(store);
} }
function onClickContentLink(e, store, category){ function onClickContentLink(e, store, category){
e.preventDefault(); e.preventDefault();
let a;
const li = e.target.closest('li');
a = li.querySelector('a');
let a = e.currentTarget;
let nid = a.dataset.nodeNid; let nid = a.dataset.nodeNid;
// console.log(nid);
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') { if (category === 'etape') {
store.fetchEtapeData(nid); store.fetchEtapeData(nid);
} else if (category === 'static') { } else if (category === 'static') {
e.currentTarget.classList.add('is-active');
store.fetchStaticData(nid); store.fetchStaticData(nid);
} }
@ -92,8 +89,9 @@ import router from './router/router';
function processEtapeLinks(store){ 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 nid = null;
let classList = field.classList; let classList = field.classList;
classList.forEach((classe) => { classList.forEach((classe) => {
@ -101,17 +99,19 @@ import router from './router/router';
let result = classe.match(reg); let result = classe.match(reg);
if (result) { if (result) {
nid = result[1]; nid = result[1];
console.log(nid);
} }
}) })
if (nid) { if (nid) {
let a = field.querySelector('a'); let a = field.querySelector('a');
a.setAttribute('data-node-nid', nid); 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 menuBurger = document.querySelector('#hamburger');
const menuH2 = document.querySelector('#menu > h2'); const menuH2 = document.querySelector('#menu > h2');
menuButton.addEventListener('click', (e) => { menuButton.addEventListener('click', (e) => {
// e.preventDefault();
setTimeout(() => { setTimeout(() => {
menuContainer.classList.toggle('open'); menuContainer.classList.toggle('open');
menuTitle.classList.toggle('open'); menuTitle.classList.toggle('open');
@ -141,6 +140,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() init()
} // end CaravaneTheme() } // end CaravaneTheme()

View File

@ -43,18 +43,19 @@ export const useContentStore = defineStore('content', {
this.etape.etape_number = etape.attributes.field_arret_numero; this.etape.etape_number = etape.attributes.field_arret_numero;
this.etape.dates = etape.attributes.field_dates; this.etape.dates = etape.attributes.field_dates;
this.etape.geofield = etape.attributes.field_geofield; 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 = [] let partiesArray = []
for (let partie of partiesFetch) { for (let partie of partiesFetch) {
partiesArray.push({ title: partie.attributes.field_titre, text: partie.attributes.field_texte.value }); partiesArray.push({ title: partie.attributes.field_titre, text: partie.attributes.field_texte.value });
} }
this.etape.parties = partiesArray; 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.etape.vignette = { url: vignetteFetch.attributes.uri.url, alt: etape.attributes.field_vignette_alt };
this.setActiveItemInMenu();
break; break;
} }
} }
@ -76,7 +77,7 @@ export const useContentStore = defineStore('content', {
if (staticContent.attributes.drupal_internal__nid == nid) { if (staticContent.attributes.drupal_internal__nid == nid) {
staticContent.attributes.metatag.forEach(item => { staticContent.attributes.metatag.forEach(item => {
if (item.tag === 'meta') { if (item.tag === 'meta') {
this.page.title = item.attributes.content; this.page.title = item.attributes.content.split(' |')[0];
} }
if (item.tag === 'link') { if (item.tag === 'link') {
this.href = item.attributes.href; this.href = item.attributes.href;
@ -85,6 +86,7 @@ export const useContentStore = defineStore('content', {
this.page.text = staticContent.attributes.field_texte.value; this.page.text = staticContent.attributes.field_texte.value;
} }
} }
this.setActiveItemInMenu();
} catch (error) { } catch (error) {
this.error = 'Failed to fetch data'; this.error = 'Failed to fetch data';
console.error('Issue with getNodeData', error); console.error('Issue with getNodeData', error);
@ -95,11 +97,44 @@ export const useContentStore = defineStore('content', {
emptyAll() { emptyAll() {
this.etape = {}; this.etape = {};
this.page = {}; this.page = {};
this.setActiveItemInMenu();
}, },
}, setActiveItemInMenu() {
}); const title = this.etape.title || this.page.title;
async function fetchEtapeContent(field, relationships) { 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) { if (relationships[field].data) {
try { try {
const contentLink = relationships[field].links.related.href; const contentLink = relationships[field].links.related.href;
@ -110,4 +145,7 @@ async function fetchEtapeContent(field, relationships) {
console.error('Issue with getNodeData', error); console.error('Issue with getNodeData', error);
} }
} }
} }
},
});

View File

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

View File

@ -2,6 +2,7 @@
$body-margin-x: 30px; $body-margin-x: 30px;
$body-margin-y: 5px; $body-margin-y: 5px;
$body-margin-bottom: 4vh;
$sm-font-size: 0.8rem; $sm-font-size: 0.8rem;
$m-font-size: 1.4rem; $m-font-size: 1.4rem;
@ -20,6 +21,7 @@ body{
color: $main-color; color: $main-color;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-y: scroll;
.layout-container { .layout-container {
> header { > header {
z-index: 2; z-index: 2;
@ -242,6 +244,138 @@ body{
width: 100vw; width: 100vw;
.leaflet-container { .leaflet-container {
// add map style here // 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 { > .layout__region--third {
@ -259,9 +393,28 @@ body{
pointer-events: auto; pointer-events: auto;
ul { ul {
list-style: none; list-style: none;
> li > div { > li {
display: flex; display: flex;
justify-content: flex-end; justify-content: end;
align-items: center;
margin: 30px 0;
transform: scale(1);
opacity: 1;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
cursor: pointer;
> .infos-arret {
display: grid;
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 { a {
text-decoration: none; text-decoration: none;
color: $main-color; color: $main-color;
@ -269,10 +422,70 @@ body{
font-weight: bold; font-weight: bold;
font-size: $m-font-size; font-size: $m-font-size;
display: inline-block; display: inline-block;
margin: 15px 0;
text-align: right; 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;
}
} }
} }
} }

View File

@ -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';
}
}

View File

@ -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>

View File

@ -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

View File

@ -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>