From bdf8011dd2c7a58350dab42bfe3af04d4375b3c6 Mon Sep 17 00:00:00 2001 From: Valentin Date: Fri, 9 Aug 2024 17:04:53 +0200 Subject: [PATCH] =?UTF-8?q?modif=20settings=20backend=20style=20map=20et?= =?UTF-8?q?=20ajout=20field=20=C3=A9tape=20couleurs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- composer.json | 1 + composer.lock | 46 ++- ...isplay.block_content.logo_link.default.yml | 9 + ...entity_form_display.node.etape.default.yml | 10 + ...isplay.block_content.logo_link.default.yml | 10 + ...entity_view_display.node.etape.default.yml | 9 + ....entity_view_display.node.etape.teaser.yml | 2 + config/sync/core.extension.yml | 3 + ..._content.logo_link.field_losange_etape.yml | 27 ++ .../field.field.node.etape.field_couleur.yml | 21 ++ ...rage.block_content.field_losange_etape.yml | 23 ++ .../sync/field.storage.node.field_couleur.yml | 19 + config/sync/page_manager.page.node.yml | 12 + config/sync/page_manager.page.node_view.yml | 18 - ...ger.page_variant.node-panels_variant-0.yml | 101 ++++++ config/sync/views.view.etapes.yml | 337 +++++++++++++++++- .../alter_routing/alter_routing.info.yml | 5 + .../custom/alter_routing/alter_routing.module | 26 ++ web/themes/custom/caravane/assets/js/main.js | 75 ++-- .../caravane/assets/js/stores/content.js | 76 +++- .../caravane/assets/js/vuejs/Modale.vue | 15 +- .../custom/caravane/assets/scss/main.scss | 235 +++++++++++- web/themes/custom/caravane/caravane.theme | 22 +- ...-view-field--block-1--etape-list.html.twig | 23 ++ ...s-view-field--block-2--popup-map.html.twig | 32 ++ ...ew-fields--block-2--liste-etapes.html.twig | 61 ++++ 26 files changed, 1130 insertions(+), 88 deletions(-) create mode 100644 config/sync/field.field.block_content.logo_link.field_losange_etape.yml create mode 100644 config/sync/field.field.node.etape.field_couleur.yml create mode 100644 config/sync/field.storage.block_content.field_losange_etape.yml create mode 100644 config/sync/field.storage.node.field_couleur.yml create mode 100644 config/sync/page_manager.page.node.yml delete mode 100644 config/sync/page_manager.page.node_view.yml create mode 100644 config/sync/page_manager.page_variant.node-panels_variant-0.yml create mode 100644 web/modules/custom/alter_routing/alter_routing.info.yml create mode 100644 web/modules/custom/alter_routing/alter_routing.module create mode 100644 web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig create mode 100644 web/themes/custom/caravane/templates/views-view-field--block-2--popup-map.html.twig create mode 100644 web/themes/custom/caravane/templates/views-view-fields--block-2--liste-etapes.html.twig diff --git a/composer.json b/composer.json index d6a8d40..140b617 100644 --- a/composer.json +++ b/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", diff --git a/composer.lock b/composer.lock index 382c705..f77f7d4 100644 --- a/composer.lock +++ b/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", diff --git a/config/sync/core.entity_form_display.block_content.logo_link.default.yml b/config/sync/core.entity_form_display.block_content.logo_link.default.yml index 0ca6d0a..f6e8e9e 100644 --- a/config/sync/core.entity_form_display.block_content.logo_link.default.yml +++ b/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 diff --git a/config/sync/core.entity_form_display.node.etape.default.yml b/config/sync/core.entity_form_display.node.etape.default.yml index 5e6f6e1..c95956a 100644 --- a/config/sync/core.entity_form_display.node.etape.default.yml +++ b/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 diff --git a/config/sync/core.entity_view_display.block_content.logo_link.default.yml b/config/sync/core.entity_view_display.block_content.logo_link.default.yml index 5d707b3..276318d 100644 --- a/config/sync/core.entity_view_display.block_content.logo_link.default.yml +++ b/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 diff --git a/config/sync/core.entity_view_display.node.etape.default.yml b/config/sync/core.entity_view_display.node.etape.default.yml index 6613473..ec4f177 100644 --- a/config/sync/core.entity_view_display.node.etape.default.yml +++ b/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 diff --git a/config/sync/core.entity_view_display.node.etape.teaser.yml b/config/sync/core.entity_view_display.node.etape.teaser.yml index f3f1c1c..e6b07a4 100644 --- a/config/sync/core.entity_view_display.node.etape.teaser.yml +++ b/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 diff --git a/config/sync/core.extension.yml b/config/sync/core.extension.yml index 64e2b80..c47ff7f 100644 --- a/config/sync/core.extension.yml +++ b/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 diff --git a/config/sync/field.field.block_content.logo_link.field_losange_etape.yml b/config/sync/field.field.block_content.logo_link.field_losange_etape.yml new file mode 100644 index 0000000..244b1de --- /dev/null +++ b/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 diff --git a/config/sync/field.field.node.etape.field_couleur.yml b/config/sync/field.field.node.etape.field_couleur.yml new file mode 100644 index 0000000..aa0b0b4 --- /dev/null +++ b/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 diff --git a/config/sync/field.storage.block_content.field_losange_etape.yml b/config/sync/field.storage.block_content.field_losange_etape.yml new file mode 100644 index 0000000..727a6d3 --- /dev/null +++ b/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 diff --git a/config/sync/field.storage.node.field_couleur.yml b/config/sync/field.storage.node.field_couleur.yml new file mode 100644 index 0000000..72d439b --- /dev/null +++ b/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 diff --git a/config/sync/page_manager.page.node.yml b/config/sync/page_manager.page.node.yml new file mode 100644 index 0000000..340f6ee --- /dev/null +++ b/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: { } diff --git a/config/sync/page_manager.page.node_view.yml b/config/sync/page_manager.page.node_view.yml deleted file mode 100644 index 7b60d1a..0000000 --- a/config/sync/page_manager.page.node_view.yml +++ /dev/null @@ -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 /node/{node}. 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' diff --git a/config/sync/page_manager.page_variant.node-panels_variant-0.yml b/config/sync/page_manager.page_variant.node-panels_variant-0.yml new file mode 100644 index 0000000..6c00978 --- /dev/null +++ b/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: { } diff --git a/config/sync/views.view.etapes.yml b/config/sync/views.view.etapes.yml index 638856d..aea320c 100644 --- a/config/sync/views.view.etapes.yml +++ b/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 - lon: 0.0 - zoomControlPosition: topleft - zoom: 5 - minZoom: 1 + lat: 46.99 + lon: 2.8 + zoomControlPosition: bottomleft + zoom: 6 + minZoom: 6 maxZoom: 18 zoomFiner: 0 weight: '' icon: - iconType: marker - iconUrl: '' + iconType: html + iconUrl: /sites/default/files/2024-08/test.svg shadowUrl: '' className: '' iconSize: @@ -264,8 +266,8 @@ display: popupAnchor: x: '' 'y': '' - html: '
' - html_class: leaflet-map-divicon + html: "
\r\n
\r\n
\r\n
{{ nid }}
\r\n
{{ field_couleur }}
" + 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' diff --git a/web/modules/custom/alter_routing/alter_routing.info.yml b/web/modules/custom/alter_routing/alter_routing.info.yml new file mode 100644 index 0000000..bf2f5d5 --- /dev/null +++ b/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 diff --git a/web/modules/custom/alter_routing/alter_routing.module b/web/modules/custom/alter_routing/alter_routing.module new file mode 100644 index 0000000..d2134fb --- /dev/null +++ b/web/modules/custom/alter_routing/alter_routing.module @@ -0,0 +1,26 @@ +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); + } + } +} +?> \ No newline at end of file diff --git a/web/themes/custom/caravane/assets/js/main.js b/web/themes/custom/caravane/assets/js/main.js index 14d296d..2303d5d 100644 --- a/web/themes/custom/caravane/assets/js/main.js +++ b/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 = e.currentTarget; - let nid = a.dataset.nodeNid; - // console.log(nid); + let a; + + const li = e.target.closest('li'); + 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'); - etape_link_fields.forEach((field) => { + let etape_li = document.querySelectorAll('#etapes-liste li'); + 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() diff --git a/web/themes/custom/caravane/assets/js/stores/content.js b/web/themes/custom/caravane/assets/js/stores/content.js index cb09e4a..c9ada95 100644 --- a/web/themes/custom/caravane/assets/js/stores/content.js +++ b/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); - const partiesFetch = await fetchEtapeContent('field_parties', etape.relationships); + this.etape.galeries = await this.fetchEtapeContent('field_galleries', 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 fetchEtapeContent('field_saison', etape.relationships); - this.etape.thematiques = await fetchEtapeContent('field_thematiques', etape.relationships); - const vignetteFetch = await fetchEtapeContent('field_vignette', etape.relationships); + this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships); + this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships); + this.etape.thematiques = await this.fetchEtapeContent('field_thematiques', 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); - } - } -} \ No newline at end of file diff --git a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue index 01c1ce6..eb0c0cc 100644 --- a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue +++ b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue @@ -26,6 +26,7 @@ 
GEOFIELD{{etape.geofield}}
+ 
VIGNETTE{{etape.vignette}}
GALERIES{{etape.galeries}}
PARTIES{{etape.parties}}
SAISON{{etape.saison}}
@@ -61,9 +62,14 @@ const route = useRoute(); const { loading, error, href, etape, page } = storeToRefs(store); watch(() => route.params.id, (newId) => { - store.fetchEtapeData(newId); - if (!etape.value.data) { - store.fetchStaticData(newId); + if (!newId) { + store.emptyAll(); + } 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); }); diff --git a/web/themes/custom/caravane/assets/scss/main.scss b/web/themes/custom/caravane/assets/scss/main.scss index 78c04e0..50051cf 100644 --- a/web/themes/custom/caravane/assets/scss/main.scss +++ b/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; - a { - text-decoration: none; - color: $main-color; - font-family: 'Joost', sans-serif; - font-weight: bold; - font-size: $m-font-size; - display: inline-block; - margin: 15px 0; - text-align: right; + 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 { + 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; } } } diff --git a/web/themes/custom/caravane/caravane.theme b/web/themes/custom/caravane/caravane.theme index bde9983..8c72c33 100644 --- a/web/themes/custom/caravane/caravane.theme +++ b/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'; + } } \ No newline at end of file diff --git a/web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig b/web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig new file mode 100644 index 0000000..280abef --- /dev/null +++ b/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 + */ +#} +

{{- output -}}

diff --git a/web/themes/custom/caravane/templates/views-view-field--block-2--popup-map.html.twig b/web/themes/custom/caravane/templates/views-view-field--block-2--popup-map.html.twig new file mode 100644 index 0000000..11c68c5 --- /dev/null +++ b/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 + */ +#} +
+ {% if output %} + {% set separated_contents = output|split('\n') %} + {% for content in separated_contents %} + {% if content != '' %} +
{{ content|trim }}
+ {% endif %} + {% endfor %} + {% endif %} +
+ {% 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 }} + {%- else -%} + {{ field.label }}{{ field.label_suffix }} + {%- endif %} + {%- endif %} + {%- if field.element_type -%} + <{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }} + {%- else -%} + {{ field.content }} + {%- endif %} + {%- if field.wrapper_element -%} + + {%- endif %} + {%- endfor %} + +
+
+
+
+
\ No newline at end of file