Compare commits
15 Commits
f575ae894f
...
4f1cc2760c
| Author | SHA1 | Date | |
|---|---|---|---|
| 4f1cc2760c | |||
| 1b88937a6f | |||
| eeb4702e96 | |||
| 298bafce49 | |||
| 2e26680eaf | |||
| f20350a10a | |||
| 2e47c8dd1b | |||
| faa98fbec0 | |||
| f2d48ab583 | |||
| 42fb439e3d | |||
| f106602e73 | |||
| aca6c6b011 | |||
| c11b90f235 | |||
| d8785d830c | |||
| ca00aa0822 |
@ -28,6 +28,8 @@
|
||||
"drupal/geocoder": "^4.24",
|
||||
"drupal/geofield": "^1.59",
|
||||
"drupal/image_field_caption": "^2.0",
|
||||
"drupal/imagestyleflush": "^1.0",
|
||||
"drupal/jsonapi_image_styles": "^3.0",
|
||||
"drupal/jsonapi_views": "^1.1",
|
||||
"drupal/leaflet": "^10.2",
|
||||
"drupal/leaflet_more_maps": "^2.2",
|
||||
|
||||
118
composer.lock
generated
118
composer.lock
generated
@ -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": "06879b846031f4f705cc93ea8f4f2f7d",
|
||||
"content-hash": "6aaebccef7482e701328a3c4349f9ac6",
|
||||
"packages": [
|
||||
{
|
||||
"name": "asm89/stack-cors",
|
||||
@ -5121,6 +5121,57 @@
|
||||
"source": "https://git.drupalcode.org/project/imagemagick"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "drupal/imagestyleflush",
|
||||
"version": "1.0.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://git.drupalcode.org/project/imagestyleflush.git",
|
||||
"reference": "1.0.0"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://ftp.drupal.org/files/projects/imagestyleflush-1.0.0.zip",
|
||||
"reference": "1.0.0",
|
||||
"shasum": "6493ae4b662131f291bbd02b7dcf46f27475ff8c"
|
||||
},
|
||||
"require": {
|
||||
"drupal/core": "^9 || ^10"
|
||||
},
|
||||
"type": "drupal-module",
|
||||
"extra": {
|
||||
"drupal": {
|
||||
"version": "1.0.0",
|
||||
"datestamp": "1730107375",
|
||||
"security-coverage": {
|
||||
"status": "covered",
|
||||
"message": "Covered by Drupal's security advisory policy"
|
||||
}
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packages.drupal.org/8/downloads",
|
||||
"license": [
|
||||
"GPL-2.0-or-later"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "dcimorra",
|
||||
"homepage": "https://www.drupal.org/user/3623423"
|
||||
},
|
||||
{
|
||||
"name": "hargobind",
|
||||
"homepage": "https://www.drupal.org/user/216765"
|
||||
},
|
||||
{
|
||||
"name": "to.stepan.kuzmin@gmail.com",
|
||||
"homepage": "https://www.drupal.org/user/858626"
|
||||
}
|
||||
],
|
||||
"homepage": "https://www.drupal.org/project/imagestyleflush",
|
||||
"support": {
|
||||
"source": "https://git.drupalcode.org/project/imagestyleflush"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "drupal/inline_entity_form",
|
||||
"version": "1.0.0-rc17",
|
||||
@ -5634,6 +5685,71 @@
|
||||
"source": "https://git.drupalcode.org/project/js_cookie"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "drupal/jsonapi_image_styles",
|
||||
"version": "3.0.2",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://git.drupalcode.org/project/jsonapi_image_styles.git",
|
||||
"reference": "3.0.2"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://ftp.drupal.org/files/projects/jsonapi_image_styles-3.0.2.zip",
|
||||
"reference": "3.0.2",
|
||||
"shasum": "63d52eb96eb4b8df241ca9b1e1fbb06707ba8a6c"
|
||||
},
|
||||
"require": {
|
||||
"drupal/core": "^9 || ^10 || ^11"
|
||||
},
|
||||
"require-dev": {
|
||||
"drupal/coder": "^8.3",
|
||||
"phpcompatibility/php-compatibility": "10.x-dev"
|
||||
},
|
||||
"type": "drupal-module",
|
||||
"extra": {
|
||||
"drupal": {
|
||||
"version": "3.0.2",
|
||||
"datestamp": "1727189318",
|
||||
"security-coverage": {
|
||||
"status": "covered",
|
||||
"message": "Covered by Drupal's security advisory policy"
|
||||
}
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packages.drupal.org/8/downloads",
|
||||
"license": [
|
||||
"GPL-2.0-or-later"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Alona O'neill",
|
||||
"homepage": "https://www.drupal.org/u/alonaoneill"
|
||||
},
|
||||
{
|
||||
"name": "Timo Kirkkala",
|
||||
"homepage": "https://www.drupal.org/u/kirkkala"
|
||||
},
|
||||
{
|
||||
"name": "Jeffrey Bertoen",
|
||||
"homepage": "https://www.drupal.org/u/jefuri"
|
||||
},
|
||||
{
|
||||
"name": "Chrsitopher C. Wells (wells)",
|
||||
"homepage": "https://www.drupal.org/user/2452278",
|
||||
"email": "drupal.org@chris-wells.net"
|
||||
}
|
||||
],
|
||||
"description": "JSON:API Image Styles provides a means to expose image styles to JSON:API.",
|
||||
"homepage": "https://www.drupal.org/project/jsonapi_image_styles",
|
||||
"keywords": [
|
||||
"Drupal"
|
||||
],
|
||||
"support": {
|
||||
"source": "https://git.drupalcode.org/project/jsonapi_image_styles",
|
||||
"issues": "https://www.drupal.org/project/issues/jsonapi_image_styles"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "drupal/jsonapi_resources",
|
||||
"version": "1.2.0",
|
||||
|
||||
@ -4,6 +4,7 @@ module:
|
||||
actions_permissions: 0
|
||||
address: 0
|
||||
admin_toolbar: 0
|
||||
admin_toolbar_links_access_filter: 0
|
||||
advanced_text_formatter: 0
|
||||
audiofield: 0
|
||||
autocomplete_deluxe: 0
|
||||
@ -54,6 +55,7 @@ module:
|
||||
file: 0
|
||||
filter: 0
|
||||
filter_perms: 0
|
||||
flush_single_image: 0
|
||||
footnotes: 0
|
||||
formatter_suite: 0
|
||||
geocoder: 0
|
||||
@ -67,6 +69,7 @@ module:
|
||||
image_field_caption: 0
|
||||
inline_entity_form: 0
|
||||
jsonapi: 0
|
||||
jsonapi_image_styles: 0
|
||||
jsonapi_resources: 0
|
||||
jsonapi_views: 0
|
||||
language: 0
|
||||
@ -82,6 +85,7 @@ module:
|
||||
linkit: 0
|
||||
locale: 0
|
||||
maillog: 0
|
||||
matomo: 0
|
||||
maxlength: 0
|
||||
media: 0
|
||||
menu_block: 0
|
||||
|
||||
15
config/sync/image.style.content_large.yml
Normal file
15
config/sync/image.style.content_large.yml
Normal file
@ -0,0 +1,15 @@
|
||||
uuid: 51021857-f408-4a97-96ac-95916834465c
|
||||
langcode: fr
|
||||
status: true
|
||||
dependencies: { }
|
||||
name: content_large
|
||||
label: content-large
|
||||
effects:
|
||||
9e838862-ccce-4fff-8f63-836c9dbf3da8:
|
||||
uuid: 9e838862-ccce-4fff-8f63-836c9dbf3da8
|
||||
id: image_scale
|
||||
weight: 1
|
||||
data:
|
||||
width: 2048
|
||||
height: null
|
||||
upscale: false
|
||||
15
config/sync/image.style.content_medium.yml
Normal file
15
config/sync/image.style.content_medium.yml
Normal file
@ -0,0 +1,15 @@
|
||||
uuid: 39e71e90-a87c-43de-b679-ba663dcb1e9a
|
||||
langcode: fr
|
||||
status: true
|
||||
dependencies: { }
|
||||
name: content_medium
|
||||
label: content-medium
|
||||
effects:
|
||||
9430838c-1da4-412b-ade1-d6e02ab9ecd2:
|
||||
uuid: 9430838c-1da4-412b-ade1-d6e02ab9ecd2
|
||||
id: image_scale
|
||||
weight: 1
|
||||
data:
|
||||
width: 1024
|
||||
height: null
|
||||
upscale: false
|
||||
15
config/sync/image.style.content_small.yml
Normal file
15
config/sync/image.style.content_small.yml
Normal file
@ -0,0 +1,15 @@
|
||||
uuid: f77750f4-4cb6-4cdb-9796-4acfa169105a
|
||||
langcode: fr
|
||||
status: true
|
||||
dependencies: { }
|
||||
name: content_small
|
||||
label: content-small
|
||||
effects:
|
||||
d2acf93c-5264-4ce5-a11c-bfaeaa7a7279:
|
||||
uuid: d2acf93c-5264-4ce5-a11c-bfaeaa7a7279
|
||||
id: image_scale
|
||||
weight: 1
|
||||
data:
|
||||
width: 512
|
||||
height: null
|
||||
upscale: false
|
||||
15
config/sync/image.style.content_x_large.yml
Normal file
15
config/sync/image.style.content_x_large.yml
Normal file
@ -0,0 +1,15 @@
|
||||
uuid: fd11611a-e6eb-4843-b104-982932b90392
|
||||
langcode: fr
|
||||
status: true
|
||||
dependencies: { }
|
||||
name: content_x_large
|
||||
label: 'content x-large'
|
||||
effects:
|
||||
7bc2e7f9-1c41-4d60-85b3-16a795691e3e:
|
||||
uuid: 7bc2e7f9-1c41-4d60-85b3-16a795691e3e
|
||||
id: image_scale
|
||||
weight: 1
|
||||
data:
|
||||
width: 2500
|
||||
height: null
|
||||
upscale: false
|
||||
12
config/sync/jsonapi_image_styles.settings.yml
Normal file
12
config/sync/jsonapi_image_styles.settings.yml
Normal file
@ -0,0 +1,12 @@
|
||||
_core:
|
||||
default_config_hash: wOZVD8Wsf3NSSsAU36-FVkO7zaC4TgH_Buj0Up6vHYQ
|
||||
image_styles:
|
||||
content_large: content_large
|
||||
content_medium: content_medium
|
||||
content_small: content_small
|
||||
content_x_large: content_x_large
|
||||
large: '0'
|
||||
linkit_result_thumbnail: '0'
|
||||
medium: '0'
|
||||
thumbnail: '0'
|
||||
wide: '0'
|
||||
59
config/sync/matomo.settings.yml
Normal file
59
config/sync/matomo.settings.yml
Normal file
@ -0,0 +1,59 @@
|
||||
_core:
|
||||
default_config_hash: mKwnhF-0ryfftZZP6jyqW8q9MEo9glyRkvRzSddrc0k
|
||||
site_id: '9'
|
||||
url_http: 'http://analytics.figureslibres.io/'
|
||||
url_https: 'https://analytics.figureslibres.io/'
|
||||
domain_mode: 0
|
||||
visibility:
|
||||
request_path_mode: 0
|
||||
request_path_pages: "/admin\r\n/admin/*\r\n/batch\r\n/node/add*\r\n/node/*/*\r\n/user/*/*"
|
||||
user_role_mode: 0
|
||||
user_role_roles: { }
|
||||
user_account_mode: 1
|
||||
track:
|
||||
mailto: true
|
||||
files: true
|
||||
files_extensions: '7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip'
|
||||
colorbox: true
|
||||
userid: false
|
||||
messages: { }
|
||||
site_search: false
|
||||
privacy:
|
||||
donottrack: true
|
||||
disablecookies: false
|
||||
custom:
|
||||
variable:
|
||||
1:
|
||||
slot: 1
|
||||
name: ''
|
||||
value: ''
|
||||
scope: visit
|
||||
2:
|
||||
slot: 2
|
||||
name: ''
|
||||
value: ''
|
||||
scope: visit
|
||||
3:
|
||||
slot: 3
|
||||
name: ''
|
||||
value: ''
|
||||
scope: visit
|
||||
4:
|
||||
slot: 4
|
||||
name: ''
|
||||
value: ''
|
||||
scope: visit
|
||||
5:
|
||||
slot: 5
|
||||
name: ''
|
||||
value: ''
|
||||
scope: visit
|
||||
codesnippet:
|
||||
before: ''
|
||||
after: ''
|
||||
translation_set: false
|
||||
disable_tracking: false
|
||||
cache: false
|
||||
page_title_hierarchy: false
|
||||
page_title_hierarchy_exclude_home: true
|
||||
status_codes_disabled: { }
|
||||
@ -10,6 +10,7 @@ dependencies:
|
||||
module:
|
||||
- config_pages
|
||||
- filter
|
||||
- matomo
|
||||
- media
|
||||
- rest
|
||||
- system
|
||||
@ -21,6 +22,7 @@ weight: 1
|
||||
is_admin: false
|
||||
permissions:
|
||||
- 'access content'
|
||||
- 'opt-in or out of matomo tracking'
|
||||
- 'restful get rest_menu_item'
|
||||
- 'use text format footnote'
|
||||
- 'use text format simple'
|
||||
|
||||
@ -49,6 +49,7 @@ permissions:
|
||||
- 'edit any partenaire content'
|
||||
- 'edit any static content'
|
||||
- 'edit intro_gouvernance config page entity'
|
||||
- 'edit intro_partenaire config page entity'
|
||||
- 'edit own etape content'
|
||||
- 'edit own gallerie_photo content'
|
||||
- 'edit own partenaire content'
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
_core:
|
||||
default_config_hash: RzCmzrx-T-Sy8JX5OmtGKV_V_MxRlrxRkrI9c9igTHI
|
||||
display_extenders: { }
|
||||
display_extenders:
|
||||
- matomo
|
||||
sql_signature: false
|
||||
ui:
|
||||
show:
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
export default function (L) {
|
||||
L.EdgeBuffer = {
|
||||
previousMethods: {
|
||||
getTiledPixelBounds: L.GridLayer.prototype._getTiledPixelBounds,
|
||||
}
|
||||
};
|
||||
|
||||
L.GridLayer.include({
|
||||
_getTiledPixelBounds: function (center, zoom, tileZoom) {
|
||||
var pixelBounds = L.EdgeBuffer.previousMethods.getTiledPixelBounds.call(this, center, zoom, tileZoom);
|
||||
|
||||
var edgeBufferTiles = this.options.edgeBufferTiles ?? 1;
|
||||
if (edgeBufferTiles > 0) {
|
||||
var pixelEdgeBuffer = L.GridLayer.prototype.getTileSize.call(this).multiplyBy(edgeBufferTiles);
|
||||
pixelBounds = new L.Bounds(pixelBounds.min.subtract(pixelEdgeBuffer), pixelBounds.max.add(pixelEdgeBuffer));
|
||||
}
|
||||
return pixelBounds;
|
||||
}
|
||||
});
|
||||
|
||||
return L;
|
||||
}
|
||||
|
||||
@ -2,7 +2,9 @@ import { initVueContentModale } from './utils/vue-setup';
|
||||
import { processClickableElements } from './utils/process-clickable-elements';
|
||||
import { handleReactiveness, setMenuToggle, setHamburgerWhenLogged } from './utils/layout-setup';
|
||||
import { initFirstLoadRouting, handleClickableElements, handleBrowserNavigation } from './utils/handle-navigation';
|
||||
import { setupMapStore } from './utils/map-setup';
|
||||
import { setupMapStore, preloadEtapesTiles } from './utils/map-setup';
|
||||
|
||||
import initEdgeBuffer from './libs/leaflet.edgebuffer';
|
||||
|
||||
import '../scss/main.scss'
|
||||
|
||||
@ -11,8 +13,8 @@ import '../scss/main.scss'
|
||||
(function ($, Drupal, drupalSettings) {
|
||||
const CaravaneTheme = function () {
|
||||
function init () {
|
||||
console.log('DrupalSettings', drupalSettings);
|
||||
|
||||
// console.log('DrupalSettings', drupalSettings);
|
||||
|
||||
const baseUrl = window.location.protocol + "//" + window.location.host;
|
||||
const siteName = document.querySelector('#site_name').innerText;
|
||||
const { store, mapStore, router, route } = initVueContentModale();
|
||||
@ -25,7 +27,13 @@ import '../scss/main.scss'
|
||||
|
||||
Drupal.behaviors.customLeafletInteraction = {
|
||||
attach: function(context, settings) {
|
||||
$(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {
|
||||
|
||||
initEdgeBuffer(L);
|
||||
let mapSettings = settings.leaflet[Object.keys(settings.leaflet)[0]].map;
|
||||
mapSettings.layers.layer.edgeBufferTiles = 1;
|
||||
// mapSettings.settings.fadeAnimation = false;
|
||||
|
||||
$(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {
|
||||
const {
|
||||
etapeListLinks,
|
||||
generalListLinks,
|
||||
@ -36,6 +44,8 @@ import '../scss/main.scss'
|
||||
|
||||
setupMapStore(mapStore, map, settings);
|
||||
|
||||
// preloadEtapesTiles(mapStore, map);
|
||||
|
||||
initFirstLoadRouting(store, router, baseUrl, siteName);
|
||||
|
||||
handleClickableElements(clickableElements, store, router, baseUrl, siteName, mapStore);
|
||||
|
||||
@ -18,6 +18,8 @@ export const useContentStore = defineStore('content', {
|
||||
next: {},
|
||||
vignette: {},
|
||||
parties: [],
|
||||
liens: [],
|
||||
pieces_jointes: [],
|
||||
|
||||
intro: '',
|
||||
partenaires: [],
|
||||
@ -28,6 +30,7 @@ export const useContentStore = defineStore('content', {
|
||||
}),
|
||||
actions: {
|
||||
async fetchContentData(path) {
|
||||
console.log('start fetch content');
|
||||
this.resetStore(false);
|
||||
const contentTypes = [ 'etape', 'static', 'gouvernance', 'partenaire' ];
|
||||
try {
|
||||
@ -42,6 +45,8 @@ export const useContentStore = defineStore('content', {
|
||||
);
|
||||
|
||||
if (content) {
|
||||
console.log('content found');
|
||||
|
||||
return {
|
||||
contentType: type,
|
||||
rawContent: content,
|
||||
@ -60,17 +65,20 @@ export const useContentStore = defineStore('content', {
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const { contentType, rawContent } = await findContentByPath(contentTypes, path);
|
||||
};
|
||||
|
||||
const { contentType, rawContent } = await findContentByPath(contentTypes, path);
|
||||
this.contentType = contentType;
|
||||
|
||||
// console.log(`current type: ${contentType}`);
|
||||
|
||||
// TO DEBUG
|
||||
const cleanContentMethod = 'original';
|
||||
|
||||
|
||||
if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire') {
|
||||
if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire'
|
||||
&& cleanContentMethod === 'original'
|
||||
) {
|
||||
console.time('etape content processing');
|
||||
// pageTitle
|
||||
for (let tag of rawContent.attributes.metatag) {
|
||||
if (tag.tag === "meta") {
|
||||
@ -85,11 +93,41 @@ export const useContentStore = defineStore('content', {
|
||||
const vignetteFetch = await this.fetchFromRelationships('field_vignette', rawContent.relationships);
|
||||
if (vignetteFetch) {
|
||||
this.content.vignette = {
|
||||
url: vignetteFetch.attributes.uri.url,
|
||||
url: {
|
||||
original: vignetteFetch.attributes.uri.url,
|
||||
small: vignetteFetch.attributes.image_style_uri.content_small,
|
||||
medium: vignetteFetch.attributes.image_style_uri.content_medium,
|
||||
large: vignetteFetch.attributes.image_style_uri.content_large,
|
||||
},
|
||||
alt: rawContent.relationships.field_vignette.data.meta.alt
|
||||
};
|
||||
}
|
||||
|
||||
// liens
|
||||
if (rawContent.attributes.field_liens.length) {
|
||||
this.content.liens = [];
|
||||
for (let lien of rawContent.attributes.field_liens) {
|
||||
this.content.liens.push({
|
||||
title: lien.title,
|
||||
url: lien.uri,
|
||||
});
|
||||
}
|
||||
}
|
||||
// pièces jointes
|
||||
if (rawContent.relationships.field_pieces_jointes.data.length) {
|
||||
this.content.pieces_jointes = [];
|
||||
for (let pieceJointe of rawContent.relationships.field_pieces_jointes.data) {
|
||||
if (pieceJointe.meta.display) {
|
||||
const uuid = pieceJointe.id;
|
||||
const response = await REST.get(`/jsonapi/file/file/${uuid}`);
|
||||
this.content.pieces_jointes.push({
|
||||
title: pieceJointe.meta.description,
|
||||
url: response.data.data.attributes.uri.url,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (contentType === 'etape') {
|
||||
// coordinates
|
||||
this.content.coordinates = {
|
||||
@ -115,7 +153,8 @@ export const useContentStore = defineStore('content', {
|
||||
// parties
|
||||
const fieldParties = contentType === 'etape' ? 'field_parties' : 'field_parties_static';
|
||||
const partiesFetch = await this.fetchFromRelationships(fieldParties, rawContent.relationships);
|
||||
|
||||
console.log(this.content);
|
||||
console.timeEnd('etape content processing');
|
||||
if (partiesFetch) {
|
||||
this.content.parties = [];
|
||||
for (let partie of partiesFetch) {
|
||||
@ -129,14 +168,47 @@ export const useContentStore = defineStore('content', {
|
||||
const carteSensibleFetch = await this.fetchFromRelationships('field_image_carte', partie.relationships);
|
||||
if (carteSensibleFetch) {
|
||||
partieContent.carteSensible = {
|
||||
url: carteSensibleFetch.attributes.uri.url,
|
||||
url: {
|
||||
original: carteSensibleFetch.attributes.uri.url,
|
||||
small: carteSensibleFetch.attributes.image_style_uri.content_small,
|
||||
medium: carteSensibleFetch.attributes.image_style_uri.content_medium,
|
||||
large: carteSensibleFetch.attributes.image_style_uri.content_large,
|
||||
xlarge: carteSensibleFetch.attributes.image_style_uri.content_x_large,
|
||||
},
|
||||
alt: partie.relationships.field_image_carte.data.meta.alt,
|
||||
};
|
||||
}
|
||||
break;
|
||||
case 'titre_texte':
|
||||
console.time('get images from text original')
|
||||
partieContent.titre = partie.attributes.field_titre;
|
||||
partieContent.texte = partie.attributes.field_texte.value;
|
||||
partieContent.texte = partie.attributes.field_texte.value;
|
||||
|
||||
// get the resized images from the text
|
||||
const imgRegex = /<img[^>]+>/g;
|
||||
const uuidRegex = /data-entity-uuid="([^"]+)"/;
|
||||
|
||||
const imgTags = partieContent.texte.match(imgRegex);
|
||||
|
||||
if (imgTags) {
|
||||
for (const imgTag of imgTags) {
|
||||
const uuidMatch = imgTag.match(uuidRegex);
|
||||
if (uuidMatch && uuidMatch[1]) {
|
||||
const uuid = uuidMatch[1];
|
||||
|
||||
const response = await REST.get(`/jsonapi/file/file/${uuid}`);
|
||||
const imagesFetch = response.data.data;
|
||||
|
||||
const newImgTag = imgTag
|
||||
.replace(/src="[^"]+"/,`src="${imagesFetch.attributes.image_style_uri.content_medium}"`)
|
||||
.replace('>',' data-large-src="' + imagesFetch.attributes.image_style_uri.content_large + '">');
|
||||
partieContent.texte = partieContent.texte.replace(imgTag, newImgTag);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
console.timeEnd('get images from text original')
|
||||
break;
|
||||
case 'chiffres_cles':
|
||||
const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships);
|
||||
@ -152,18 +224,26 @@ export const useContentStore = defineStore('content', {
|
||||
break;
|
||||
case 'diaporama':
|
||||
const diaporamaFetch = await this.fetchFromRelationships('field_diaporama', partie.relationships);
|
||||
|
||||
if (diaporamaFetch) {
|
||||
partieContent.diaporama = [];
|
||||
for (let [index, image] of diaporamaFetch.entries()) {
|
||||
partieContent.diaporama.push({
|
||||
url: image.attributes.uri.url,
|
||||
url: {
|
||||
original: image.attributes.uri.url,
|
||||
small: image.attributes.image_style_uri.content_small,
|
||||
medium: image.attributes.image_style_uri.content_medium,
|
||||
large: image.attributes.image_style_uri.content_large,
|
||||
},
|
||||
alt: partie.relationships.field_diaporama.data[index].meta.alt,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
break;
|
||||
case 'entretien':
|
||||
partieContent.entretien = {};
|
||||
partieContent.entretien.titre = partie.attributes.field_titre;
|
||||
const personnesFetch = await this.fetchFromRelationships('field_personne_s', partie.relationships);
|
||||
const questionsReponsesFetch = await this.fetchFromRelationships('field_questions_reponses', partie.relationships);
|
||||
if (personnesFetch && questionsReponsesFetch) {
|
||||
@ -172,7 +252,12 @@ export const useContentStore = defineStore('content', {
|
||||
const portraitFetch = await this.fetchFromRelationships('field_portrait', personne.relationships);
|
||||
if (portraitFetch) {
|
||||
partieContent.entretien.personnes.push({
|
||||
portrait: portraitFetch.attributes.uri.url,
|
||||
portrait: {
|
||||
original: portraitFetch.attributes.uri.url,
|
||||
small: portraitFetch.attributes.image_style_uri.content_small,
|
||||
medium: portraitFetch.attributes.image_style_uri.content_medium,
|
||||
large: portraitFetch.attributes.image_style_uri.content_large,
|
||||
},
|
||||
alt: personne.relationships.field_portrait.data.meta.alt,
|
||||
description: personne.attributes.field_description,
|
||||
});
|
||||
@ -202,6 +287,153 @@ export const useContentStore = defineStore('content', {
|
||||
this.content.parties.push(partieContent);
|
||||
}
|
||||
}
|
||||
console.log('content cleaned');
|
||||
} else if (this.contentType !== 'gouvernance' && this.contentType !== 'partenaire'
|
||||
&& cleanContentMethod === 'promise'
|
||||
) {
|
||||
|
||||
|
||||
|
||||
|
||||
console.time('etape content promise processing');
|
||||
|
||||
|
||||
const vignettePromise = this.fetchFromRelationships('field_vignette', rawContent.relationships);
|
||||
const partiesPromise = this.fetchFromRelationships('field_parties', rawContent.relationships);
|
||||
|
||||
const previousEtapePromise = contentType === 'etape'? this.getRelatedEtape('previous', path) : null;
|
||||
const nextEtapePromise = contentType === 'etape' ? this.getRelatedEtape('next', path) : null;
|
||||
|
||||
if (contentType === 'etape') {
|
||||
// coordinates
|
||||
this.content.coordinates = {
|
||||
lat: rawContent.attributes.field_geofield.lat,
|
||||
lon: rawContent.attributes.field_geofield.lon,
|
||||
};
|
||||
// adresse
|
||||
this.content.adresse = rawContent.attributes.field_adresse;
|
||||
// étape number
|
||||
this.content.etape_number = rawContent.attributes.field_arret_numero;
|
||||
// couleur
|
||||
this.content.couleur = rawContent.attributes.field_couleur;
|
||||
// dates
|
||||
this.content.dates = {
|
||||
start: this.getCleanDate(rawContent.attributes.field_dates.value),
|
||||
end: this.getCleanDate(rawContent.attributes.field_dates.end_value),
|
||||
}
|
||||
}
|
||||
|
||||
// pageTitle
|
||||
for (let tag of rawContent.attributes.metatag) {
|
||||
if (tag.tag === "meta") {
|
||||
this.pageTitle = tag.attributes.content;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// contentTitle
|
||||
this.content.contentTitle = rawContent.attributes.title;
|
||||
|
||||
const [vignetteData, partiesData] = await Promise.all([vignettePromise, partiesPromise]);
|
||||
|
||||
if (vignetteData) {
|
||||
this.content.vignette = {
|
||||
url: {
|
||||
original: vignetteData.attributes.uri.url,
|
||||
small: vignetteData.attributes.image_style_uri.content_small,
|
||||
medium: vignetteData.attributes.image_style_uri.content_medium,
|
||||
large: vignetteData.attributes.image_style_uri.content_large,
|
||||
},
|
||||
alt: rawContent.relationships.field_vignette.data.meta.alt
|
||||
};
|
||||
}
|
||||
|
||||
if (partiesData) {
|
||||
const partiesPromises = partiesData.map(async (partie) => {
|
||||
const partieType = partie.type.replace(/^paragraph--/, "");
|
||||
let partieContent = { type: partieType };
|
||||
|
||||
switch(partieType) {
|
||||
case 'carte_sensible':
|
||||
const carteSensiblePromise = this.fetchFromRelationships('field_image_carte', partie.relationships);
|
||||
|
||||
const carteSensibleData = await carteSensiblePromise;
|
||||
if (carteSensibleData) {
|
||||
partieContent.carteSensible = {
|
||||
url: {
|
||||
original: carteSensibleData.attributes.uri.url,
|
||||
small: carteSensibleData.attributes.image_style_uri.content_small,
|
||||
medium: carteSensibleData.attributes.image_style_uri.content_medium,
|
||||
large: carteSensibleData.attributes.image_style_uri.content_large,
|
||||
xlarge: carteSensibleData.attributes.image_style_uri.content_x_large,
|
||||
},
|
||||
alt: partie.relationships.field_image_carte.data.meta.alt,
|
||||
};
|
||||
}
|
||||
|
||||
break;
|
||||
case 'titre_texte':
|
||||
partieContent.titre = partie.attributes.field_titre;
|
||||
partieContent.texte = partie.attributes.field_texte.value;
|
||||
|
||||
// get the resized images from the text
|
||||
const imgRegex = /<img[^>]+>/g;
|
||||
const uuidRegex = /data-entity-uuid="([^"]+)"/;
|
||||
const imgTags = partieContent.texte.match(imgRegex);
|
||||
|
||||
if (imgTags) {
|
||||
const imagePromises = imgTags.map(imgTag => {
|
||||
const uuidMatch = imgTag.match(uuidRegex);
|
||||
if (uuidMatch && uuidMatch[1]) {
|
||||
return REST.get(`/jsonapi/file/file/${uuidMatch[1]}`)
|
||||
.then(response => ({
|
||||
originalTag: imgTag,
|
||||
imageData: response.data.data
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
const images = await Promise.all(imagePromises);
|
||||
images.forEach(({originalTag, imageData}) => {
|
||||
const newImgTag = originalTag
|
||||
.replace(/src="[^"]+"/,`src="${imageData.attributes.image_style_uri.content_medium}"`)
|
||||
.replace('>',' data-large-src="' + imageData.attributes.image_style_uri.content_large + '">');
|
||||
partieContent.texte = partieContent.texte.replace(originalTag, newImgTag);
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'chiffres_cles':
|
||||
const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships);
|
||||
if (chiffresClesFetch) {
|
||||
partieContent.chiffresCles = [];
|
||||
for (let chiffre of chiffresClesFetch) {
|
||||
partieContent.chiffresCles.push({
|
||||
chiffre: chiffre.attributes.field_chiffre,
|
||||
description: chiffre.attributes.field_description,
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'diaporama':
|
||||
break;
|
||||
case 'entretien':
|
||||
break;
|
||||
case 'exergue':
|
||||
break;
|
||||
case 'video':
|
||||
break;
|
||||
}
|
||||
return partieContent;
|
||||
});
|
||||
|
||||
this.content.parties = await Promise.all(partiesPromises);
|
||||
}
|
||||
|
||||
// related étapes
|
||||
if (contentType === 'etape') await Promise.all([previousEtapePromise, nextEtapePromise]);
|
||||
|
||||
console.log(this.content);
|
||||
console.timeEnd('etape content promise processing');
|
||||
} else {
|
||||
// pages gouvernance (contact) et partenaire
|
||||
// ont plusieurs items par pages
|
||||
@ -212,7 +444,7 @@ export const useContentStore = defineStore('content', {
|
||||
`${introContent.attributes.field_titre} ${introContent.attributes.metatag.find(tag => tag.tag === "meta")?.attributes.content}`;
|
||||
|
||||
this.content.contentTitle = introContent.attributes.field_titre;
|
||||
this.content.intro = introContent.attributes.field_intro.value;
|
||||
this.content.intro = introContent.attributes.field_intro?.value;
|
||||
|
||||
const multiItemPageArray = [];
|
||||
|
||||
@ -226,7 +458,12 @@ export const useContentStore = defineStore('content', {
|
||||
weight: item.attributes.field_poid,
|
||||
link_url: item.attributes.field_lien.uri ,
|
||||
logo_alt: item.relationships.field_logo.data.meta.alt,
|
||||
logo_url: logoFetch.data.data.attributes.uri.url,
|
||||
logo_url: {
|
||||
original: logoFetch.data.data.attributes.uri.url,
|
||||
small: logoFetch.data.data.attributes.image_style_uri.content_small,
|
||||
medium: logoFetch.data.data.attributes.image_style_uri.content_medium,
|
||||
large: logoFetch.data.data.attributes.image_style_uri.content_large,
|
||||
},
|
||||
});
|
||||
}
|
||||
} else if (this.contentType === 'gouvernance') {
|
||||
@ -240,7 +477,12 @@ export const useContentStore = defineStore('content', {
|
||||
prenom: personne.attributes.field_prenom,
|
||||
description: personne.attributes.field_description,
|
||||
photo_meta: personne.relationships.field_portrait.data?.meta.alt,
|
||||
photo_url: portraitFetch.data.data?.attributes.uri.url,
|
||||
photo_url: portraitFetch.data.data ? {
|
||||
original: portraitFetch.data.data.attributes.uri.url,
|
||||
small: portraitFetch.data.data.attributes.image_style_uri.content_small,
|
||||
medium: portraitFetch.data.data.attributes.image_style_uri.content_medium,
|
||||
large: portraitFetch.data.data.attributes.image_style_uri.content_large,
|
||||
} : null
|
||||
});
|
||||
}
|
||||
multiItemPageArray.push({
|
||||
@ -253,7 +495,7 @@ export const useContentStore = defineStore('content', {
|
||||
|
||||
this.content[`${this.contentType}s`] = multiItemPageArray;
|
||||
|
||||
console.log(this.content);
|
||||
// console.log(this.content);
|
||||
}
|
||||
} catch (error) {
|
||||
this.error = 'Failed to fetch data';
|
||||
@ -284,7 +526,12 @@ export const useContentStore = defineStore('content', {
|
||||
end: this.getCleanDate(relatedEtapeData.attributes.field_dates.end_value),
|
||||
},
|
||||
vignette: {
|
||||
url: vignetteFetch.data.data.attributes.uri.url,
|
||||
url: {
|
||||
original: vignetteFetch.data.data.attributes.uri.url,
|
||||
small: vignetteFetch.data.data.attributes.image_style_uri.content_small,
|
||||
medium: vignetteFetch.data.data.attributes.image_style_uri.content_medium,
|
||||
large: vignetteFetch.data.data.attributes.image_style_uri.content_large,
|
||||
},
|
||||
alt: relatedEtapeData.relationships.field_vignette.data.meta.alt,
|
||||
},
|
||||
}
|
||||
@ -303,18 +550,61 @@ export const useContentStore = defineStore('content', {
|
||||
}
|
||||
}
|
||||
},
|
||||
async getRelatedEtape(direction, path) {
|
||||
const getRelatedEtapeContent = (relatedEtapeData) => {
|
||||
if (relatedEtapeData) {
|
||||
return this.fetchFromRelationships('field_vignette', relatedEtapeData.relationships)
|
||||
.then(vignetteFetch => {
|
||||
if (vignetteFetch) {
|
||||
this.content[direction] = {
|
||||
url: relatedEtapeData.attributes.metatag.find(tag => tag.tag === "link")?.attributes.href,
|
||||
couleur: relatedEtapeData.attributes.field_couleur,
|
||||
title: relatedEtapeData.attributes.title,
|
||||
postalCode: relatedEtapeData.attributes.field_adresse.postal_code,
|
||||
dates: {
|
||||
start: this.getCleanDate(relatedEtapeData.attributes.field_dates.value),
|
||||
end: this.getCleanDate(relatedEtapeData.attributes.field_dates.end_value),
|
||||
},
|
||||
vignette: {
|
||||
url: {
|
||||
original: vignetteFetch.attributes.uri.url,
|
||||
small: vignetteFetch.attributes.image_style_uri.content_small,
|
||||
medium: vignetteFetch.attributes.image_style_uri.content_medium,
|
||||
large: vignetteFetch.attributes.image_style_uri.content_large,
|
||||
},
|
||||
alt: relatedEtapeData.relationships.field_vignette.data.meta.alt,
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const allEtapesPromise = REST.get('/jsonapi/views/etapes/block_1/');
|
||||
|
||||
return allEtapesPromise.then(allEtapesData => {
|
||||
for (let [index, etape] of allEtapesData.data.data.entries()) {
|
||||
if (etape.attributes.metatag.some(tag =>
|
||||
tag.tag === "link" && tag.attributes.href === path
|
||||
)) {
|
||||
const relatedEtapeIndex = direction === 'next' ? index + 1 : index - 1;
|
||||
return getRelatedEtapeContent(allEtapesData.data.data[relatedEtapeIndex]);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
async fetchFromRelationships(field, relationships) {
|
||||
if (relationships[field].links) {
|
||||
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);
|
||||
}
|
||||
return REST.get(contentLink)
|
||||
.then(contentFetch => contentFetch.data.data)
|
||||
.catch(error => {
|
||||
this.error = 'Failed to fetch data';
|
||||
console.error('Issue with getNodeData', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
return null;
|
||||
},
|
||||
resetStore(forFrontDisplay) {
|
||||
this.contentType = '';
|
||||
this.pageTitle = '';
|
||||
|
||||
@ -75,12 +75,12 @@ export const useLayoutStore = defineStore('layout', {
|
||||
menuTitle.classList.remove('open');
|
||||
menuBurger.classList.remove('open');
|
||||
menuH2.classList.remove('open');
|
||||
setTimeout(() => {
|
||||
if (this.isHamburgerMenuOpen) {
|
||||
menuContainer.style.display = 'none';
|
||||
}
|
||||
}, 300);
|
||||
this.isHamburgerMenuOpen = false;
|
||||
if (this.isHamburgerMenuOpen) {
|
||||
setTimeout(() => {
|
||||
menuContainer.style.display = 'none';
|
||||
}, 300);
|
||||
this.isHamburgerMenuOpen = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@ -17,18 +17,18 @@ export const useMapStore = defineStore('mapState', {
|
||||
}),
|
||||
actions: {
|
||||
zoomToPlace(lat, long) {
|
||||
if (useLayoutStore().isDesktop) long = long - 0.03;
|
||||
if (useLayoutStore().isDesktop) long = long - 0.03;
|
||||
this.map.flyTo(
|
||||
[lat, long],
|
||||
this.maxZoom,
|
||||
{ animate: this.animationsAreEnabled, animationDuration: this.animationDuration });
|
||||
{ animate: this.animationsAreEnabled, duration: this.animationDuration });
|
||||
this.currentZoom = this.maxZoom;
|
||||
},
|
||||
resetMap() {
|
||||
resetMap(animate = this.animationsAreEnabled, duration = this.animationDuration) {
|
||||
this.map.flyTo(
|
||||
this.defaultMapCenter,
|
||||
useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile,
|
||||
{ animate: this.animationsAreEnabled, animationDuration: this.animationDuration });
|
||||
{ animate, duration });
|
||||
this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
|
||||
},
|
||||
lockMap() {
|
||||
|
||||
@ -23,6 +23,8 @@ export function handleClickableElements(clickableElements, store, router, baseUr
|
||||
if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
|
||||
|
||||
link.onclick = async function (e) {
|
||||
console.log('click on link, route push');
|
||||
|
||||
router.push(href);
|
||||
if (href !== window.location.pathname) {
|
||||
pageChange(href, store, siteName, mapStore, baseUrl);
|
||||
@ -38,6 +40,7 @@ export async function handleBrowserNavigation(store, baseUrl, siteName, mapStore
|
||||
}
|
||||
|
||||
export async function pageChange(href, store, siteName, mapStore, baseUrl) {
|
||||
console.log('trigger page change');
|
||||
if (href === '/') {
|
||||
store.resetStore(true);
|
||||
document.title = siteName;
|
||||
@ -51,5 +54,6 @@ export async function pageChange(href, store, siteName, mapStore, baseUrl) {
|
||||
setActiveNavItem(store.contentType, href);
|
||||
|
||||
const listeEtape = document.querySelector('#etapes-liste');
|
||||
if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape);
|
||||
const animationToggle = document.querySelector('#animation-toggle');
|
||||
if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape, animationToggle);
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { useLayoutStore } from '../stores/layout';
|
||||
import REST from '../api/rest-axios';
|
||||
|
||||
export function setupMapStore(mapStore, map, settings) {
|
||||
mapStore.map = map;
|
||||
@ -8,4 +9,58 @@ export function setupMapStore(mapStore, map, settings) {
|
||||
mapStore.defaultZoomMobile = settings.settings.minZoom - 1;
|
||||
mapStore.map.flyTo([mapStore.defaultMapCenter.lat, mapStore.defaultMapCenter.lng], useLayoutStore().isDesktop ? mapStore.defaultZoomDesktop : mapStore.defaultZoomMobile);
|
||||
mapStore.checkReducedMotion();
|
||||
}
|
||||
}
|
||||
|
||||
// not working
|
||||
// may or may not rework on it later
|
||||
export async function preloadEtapesTiles(mapStore, map) {
|
||||
function waitForEvent(el, eventName) {
|
||||
return new Promise((resolve) => {
|
||||
el.once(eventName, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
const tilesSource = map._layers.layer._url;
|
||||
|
||||
const response = await REST.get(`/jsonapi/node/etape/`);
|
||||
|
||||
const defaultZoom = useLayoutStore().isDesktop ? mapStore.defaultZoomDesktop : mapStore.defaultZoomMobile;
|
||||
|
||||
let tilesCached = new Set();
|
||||
|
||||
for (const etape of response.data.data) {
|
||||
const etapeCoords = {
|
||||
title: etape.attributes.title,
|
||||
lat: etape.attributes.field_geofield.lat,
|
||||
lng: etape.attributes.field_geofield.lon,
|
||||
};
|
||||
|
||||
for (let zoom = defaultZoom; zoom <= mapStore.maxZoom; zoom++) {
|
||||
map.flyTo([etapeCoords.lat, etapeCoords.lng], zoom, { animate: true, duration: 0.001 });
|
||||
await waitForEvent(map, 'moveend zoomend');
|
||||
|
||||
let allTilesCached = Object.keys(map._layers.layer._tiles).every(tile => tilesCached.has(tile));
|
||||
|
||||
const tileLayer = Object.values(map._layers).find(layer => layer instanceof L.TileLayer);
|
||||
|
||||
if (!allTilesCached && tileLayer._loading) {
|
||||
await waitForEvent(tileLayer, 'load');
|
||||
Object.keys(map._layers.layer._tiles).forEach(tile => {
|
||||
if (!tilesCached.has(tile)) {
|
||||
/* const tileObject = map._layers.layer._tiles[tile];
|
||||
let img = new Image();
|
||||
const url = tilesSource
|
||||
.replace('{z}', tileObject.coords.z)
|
||||
.replace('{x}', tileObject.coords.x)
|
||||
.replace('{y}', tileObject.coords.y);
|
||||
img.src = url; */
|
||||
tilesCached.add(tile)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// console.log(tilesCached);
|
||||
mapStore.resetMap(false, 0);
|
||||
}
|
||||
|
||||
@ -51,11 +51,15 @@
|
||||
v-if="contentType === 'partenaire'"
|
||||
:content="content" />
|
||||
</main>
|
||||
<PiecesJointes
|
||||
:content="content"
|
||||
:couleur="content.couleur || brandColor"
|
||||
/>
|
||||
<ModaleFooter
|
||||
:contentType="contentType"
|
||||
:content="content"
|
||||
:couleur="content.couleur || brandColor"
|
||||
/>
|
||||
:contentType="contentType"
|
||||
:content="content"
|
||||
:couleur="content.couleur || brandColor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
@ -72,6 +76,7 @@ import ModaleHeader from './components/ModaleHeader.vue';
|
||||
import ModaleFooter from './components/ModaleFooter.vue';
|
||||
import EquipeContent from './components/EquipeContent.vue';
|
||||
import PartenairesContent from './components/PartenairesContent.vue';
|
||||
import PiecesJointes from './components/PiecesJointes.vue';
|
||||
|
||||
import ModaleCarteSensible from './components/parties/ModaleCarteSensible.vue';
|
||||
import ModaleTitreTexte from './components/parties/ModaleTitreTexte.vue';
|
||||
@ -113,68 +118,70 @@ const handleMapMovement = () => {
|
||||
() => loading.value,
|
||||
() => {
|
||||
if (!loading.value) {
|
||||
isModaleEtape = contentType.value === 'etape';
|
||||
console.log('loading done');
|
||||
isModaleEtape = contentType.value === 'etape';
|
||||
|
||||
// Define helper functions in variables
|
||||
const disableModaleTransition = () => {
|
||||
document.documentElement.style.setProperty('margin-top', '0');
|
||||
document.documentElement.style.setProperty('transition', 'none');
|
||||
}
|
||||
const setModaleTransition = (enterDelay) => {
|
||||
document.documentElement.style.setProperty('--modale-enter-delay', `${enterDelay}s`);
|
||||
};
|
||||
// Define helper functions in variables
|
||||
const disableModaleTransition = () => {
|
||||
document.documentElement.style.setProperty('margin-top', '0');
|
||||
document.documentElement.style.setProperty('transition', 'none');
|
||||
}
|
||||
const setModaleTransition = (enterDelay) => {
|
||||
document.documentElement.style.setProperty('--modale-enter-delay', `${enterDelay}s`);
|
||||
};
|
||||
|
||||
const zoomToContentPlace = () => {
|
||||
mapState.zoomToPlace(
|
||||
content.value.coordinates.lat ? content.value.coordinates.lat : defaultMapCenter.value.lat,
|
||||
content.value.coordinates.lon ? content.value.coordinates.lon : defaultMapCenter.value.lng
|
||||
);
|
||||
};
|
||||
const zoomToContentPlace = () => {
|
||||
mapState.zoomToPlace(
|
||||
content.value.coordinates.lat ? content.value.coordinates.lat : defaultMapCenter.value.lat,
|
||||
content.value.coordinates.lon ? content.value.coordinates.lon : defaultMapCenter.value.lng
|
||||
);
|
||||
};
|
||||
|
||||
if (animationsAreEnabled.value) {
|
||||
if (animationsAreEnabled.value) {
|
||||
|
||||
if (isModaleEtape) {
|
||||
if (!wasModaleEtape) {
|
||||
// national -> détail
|
||||
setModaleTransition(animationDuration.value);
|
||||
zoomToContentPlace();
|
||||
} else {
|
||||
// détail -> détail
|
||||
setModaleTransition(animationDuration.value);
|
||||
zoomToContentPlace();
|
||||
}
|
||||
} else {
|
||||
if (wasModaleEtape) {
|
||||
// détail -> national
|
||||
setModaleTransition(animationDuration.value);
|
||||
mapState.resetMap();
|
||||
} else {
|
||||
// national -> national
|
||||
setModaleTransition(0);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (isModaleEtape) {
|
||||
if (isModaleEtape) {
|
||||
if (!wasModaleEtape) {
|
||||
// national -> détail
|
||||
setModaleTransition(animationDuration.value);
|
||||
zoomToContentPlace();
|
||||
} else {
|
||||
mapState.resetMap();
|
||||
// détail -> détail
|
||||
setModaleTransition(animationDuration.value);
|
||||
zoomToContentPlace();
|
||||
}
|
||||
} else {
|
||||
if (wasModaleEtape) {
|
||||
// détail -> national
|
||||
setModaleTransition(animationDuration.value);
|
||||
mapState.resetMap();
|
||||
} else {
|
||||
// national -> national
|
||||
setModaleTransition(0);
|
||||
}
|
||||
disableModaleTransition();
|
||||
}
|
||||
} else {
|
||||
if (isModaleEtape) {
|
||||
zoomToContentPlace();
|
||||
} else {
|
||||
mapState.resetMap();
|
||||
}
|
||||
disableModaleTransition();
|
||||
}
|
||||
|
||||
scrollTo(0, 0);
|
||||
scrollTo(0, 0);
|
||||
|
||||
wasModaleEtape = isModaleEtape;
|
||||
wasModaleEtape = isModaleEtape;
|
||||
}
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
isModaleEtape = contentType.value === 'etape';
|
||||
wasModaleEtape = isModaleEtape;
|
||||
handleColorChange();
|
||||
handleMapMovement();
|
||||
console.log('modale mounted');
|
||||
isModaleEtape = contentType.value === 'etape';
|
||||
wasModaleEtape = isModaleEtape;
|
||||
handleColorChange();
|
||||
handleMapMovement();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div v-if="content.intro" class="intro">
|
||||
<p v-html="content.intro"></p>
|
||||
</div>
|
||||
<div v-for="equipe in content.gouvernances" class="equipe-item">
|
||||
<div v-for="equipe in [...content.gouvernances].sort((a, b) => a.weight - b.weight)" class="equipe-item">
|
||||
<div class="partie-title">
|
||||
<h3>
|
||||
<p
|
||||
@ -12,9 +12,9 @@
|
||||
</p>
|
||||
</h3>
|
||||
</div>
|
||||
<div v-for="personne in equipe.personnes" class="personne">
|
||||
<div v-for="personne in equipe.personnes" class="personne" :style="personne.photo_url ? '' : { gridTemplateColumns: '0 1fr', gridGap: '0' }">
|
||||
<figure>
|
||||
<img :src="personne.photo_url" :alt="personne.photo_alt">
|
||||
<img v-if="personne.photo_url" :src="personne.photo_url.small" :alt="personne.photo_alt">
|
||||
</figure>
|
||||
<div class="name"><p v-html="personne.prenom + ' ' + personne.nom"></p></div>
|
||||
<div class="description"><p v-html="personne.description" style="white-space: pre-wrap;"></p></div>
|
||||
|
||||
@ -1,51 +1,52 @@
|
||||
<template>
|
||||
<Transition name="fade">
|
||||
<div v-if="isOpen" class="image-viewer-wrapper">
|
||||
<div v-if="isOpen" class="image-viewer-wrapper" @click="(e) => checkOutsideClick(e.target)">
|
||||
<div v-if="!swiperContent" class="img-modale simple-viewer">
|
||||
<figure class="img-wrapper">
|
||||
<img :src="image.src" :alt="image.alt">
|
||||
<figcaption>{{ image.alt }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div v-else class="img-modale swiper-viewer">
|
||||
<div class="swiper-wrapper">
|
||||
<swiper-container
|
||||
:slidesPerView="1"
|
||||
:centeredSlides="true"
|
||||
:loop="true"
|
||||
:navigation="true"
|
||||
:pagination="true"
|
||||
:initialSlide="currentImgIndex"
|
||||
:injectStyles="[`
|
||||
.swiper-button-next, .swiper-button-prev {
|
||||
color: white;
|
||||
top: 50%;
|
||||
}
|
||||
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
|
||||
background: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
`]"
|
||||
>
|
||||
<swiper-slide v-for="media in swiperContent">
|
||||
<figure class="popup-figure">
|
||||
<img :src="media.src" :alt="media.alt" class="popup-img">
|
||||
<figcaption>{{ media.alt }}</figcaption>
|
||||
</figure>
|
||||
</swiper-slide>
|
||||
</swiper-container>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="close" class="close-button">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</button>
|
||||
<figure class="img-wrapper">
|
||||
<img :src="image.src" :alt="image.alt">
|
||||
<figcaption>{{ image.alt }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</Transition>
|
||||
<div v-else class="img-modale swiper-viewer">
|
||||
<div class="swiper-wrapper">
|
||||
<swiper-container
|
||||
:slidesPerView="1"
|
||||
:centeredSlides="true"
|
||||
:loop="true"
|
||||
:navigation="true"
|
||||
:pagination="true"
|
||||
:initialSlide="currentSlideIndex"
|
||||
:injectStyles="[`
|
||||
.swiper-button-next, .swiper-button-prev {
|
||||
color: white;
|
||||
top: 50%;
|
||||
}
|
||||
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
|
||||
background: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
`]"
|
||||
>
|
||||
<swiper-slide v-for="media in swiperContent">
|
||||
<figure class="popup-figure">
|
||||
<img :src="media.src" :alt="media.alt" class="popup-img">
|
||||
<figcaption>{{ media.alt }}</figcaption>
|
||||
</figure>
|
||||
</swiper-slide>
|
||||
</swiper-container>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="close" class="close-button">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { nextTick, ref, watch } from 'vue';
|
||||
import { useWaitForImages } from '../composables/useWaitForImages';
|
||||
const props = defineProps({
|
||||
isOpen: Boolean,
|
||||
image: {
|
||||
@ -58,28 +59,83 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const currentImgIndex = ref(0);
|
||||
const currentSlideIndex = ref(0);
|
||||
|
||||
watch(
|
||||
() => props.isOpen,
|
||||
() => {
|
||||
if (props.isOpen && props.swiperContent?.length) {
|
||||
for (let i = 0; i < props.swiperContent.length; i++) {
|
||||
const currentImgSrc = props.image.src;
|
||||
const truncatedSrc = currentImgSrc.substring(currentImgSrc.indexOf("/sites"));
|
||||
if (props.swiperContent[i].src === truncatedSrc) {
|
||||
currentImgIndex.value = i;
|
||||
break;
|
||||
toggleElementsOver(props.isOpen);
|
||||
if (props.isOpen) {
|
||||
nextTick(() => {
|
||||
const swiperContainer = document.querySelector('.image-viewer-wrapper');
|
||||
setCaptions(swiperContainer);
|
||||
})
|
||||
if (props.swiperContent?.length) {
|
||||
checkCurrentImage();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
function toggleElementsOver(isOpen) {
|
||||
const header = document.querySelector('.layout-container > header');
|
||||
const retractedList = document.querySelector('.retracted');
|
||||
if (isOpen) {
|
||||
header.style.opacity = 0;
|
||||
setTimeout(() => {
|
||||
header.style.display = 'none';
|
||||
}, 300);
|
||||
if (retractedList) {
|
||||
retractedList.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
header.style.display = 'block';
|
||||
header.style.opacity = 1;
|
||||
if (retractedList) {
|
||||
retractedList.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function checkCurrentImage() {
|
||||
for (let i = 0; i < props.swiperContent.length; i++) {
|
||||
if (props.swiperContent[i].src.split('/').pop().split('?')[0] === props.image.src.split('/').pop().split('?')[0]) {
|
||||
currentSlideIndex.value = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setCaptions(container) {
|
||||
useWaitForImages(container, () => {
|
||||
const slides = container.querySelectorAll('swiper-slide');
|
||||
if (slides.length) {
|
||||
slides.forEach((slide) => {
|
||||
const img = slide.querySelector('img');
|
||||
const caption = slide.querySelector('figcaption');
|
||||
caption.style.width = `${img.offsetWidth}px`;
|
||||
});
|
||||
} else {
|
||||
const img = container.querySelector('img');
|
||||
const caption = container.querySelector('figcaption');
|
||||
caption.style.width = `${img.offsetWidth}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
};
|
||||
|
||||
function checkOutsideClick(target) {
|
||||
if (target.classList.contains('swiper-wrapper')
|
||||
|| target.tagName === 'SWIPER-SLIDE'
|
||||
|| target.tagName === 'FIGURE') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -108,18 +164,33 @@ const close = () => {
|
||||
align-items: center;
|
||||
}
|
||||
> .simple-viewer {
|
||||
> .img-wrapper {
|
||||
max-width: 60%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> figure.img-wrapper {
|
||||
margin-top: 3%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10vw;
|
||||
box-sizing: border-box;
|
||||
> img {
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
margin-bottom: -5px;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
> figcaption {
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
font-size: 0.8rem; /* cf main.scss */
|
||||
padding: 0.5rem 1.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -133,26 +204,37 @@ const close = () => {
|
||||
swiper-slide {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
figure {
|
||||
margin-top: 3%;
|
||||
max-width: 60%;
|
||||
height: 80%;
|
||||
max-height: 80vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10vw;
|
||||
box-sizing: border-box;
|
||||
img {
|
||||
height: -webkit-fill-available !important;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
margin-bottom: -5px;
|
||||
object-fit: cover;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
figcaption {
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
font-size: 0.8rem; /* cf main.scss */
|
||||
padding: 0.5rem 1.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::part(pagination) {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<div class="date">Du {{ content.previous.dates.start.d }} {{ content.previous.dates.start.m }}<br>au {{ content.previous.dates.end.d }} {{ content.previous.dates.end.m }} {{ content.previous.dates.end.y }}</div>
|
||||
</div>
|
||||
<div class="vignette">
|
||||
<img :src="content.previous.vignette.url" :alt="content.previous.vignette.alt">
|
||||
<img :src="content.previous.vignette.url.small" :alt="content.previous.vignette.alt">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,7 +33,7 @@
|
||||
<div class="date">Du {{ content.next.dates.start.d }} {{ content.next.dates.start.m }}<br>au {{ content.next.dates.end.d }} {{ content.next.dates.end.m }} {{ content.next.dates.end.y }}</div>
|
||||
</div>
|
||||
<div class="vignette">
|
||||
<img :src="content.next.vignette.url" :alt="content.next.vignette.alt">
|
||||
<img :src="content.next.vignette.url.small" :alt="content.next.vignette.alt">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<header :class="{ 'not-etape': contentType !== 'etape' }">
|
||||
<div class="cover">
|
||||
<img v-if="content.vignette" :src="content.vignette.url" :alt="content.vignette.alt">
|
||||
<img v-if="content.vignette" :src="content.vignette.url.medium" :alt="content.vignette.alt">
|
||||
</div>
|
||||
<div v-if="contentType === 'etape' && content.dates" class="cartouche" :style="{ backgroundColor: couleur }">
|
||||
<p>Étape n°{{content.etape_number}}</p>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<div v-if="content.intro" class="intro">
|
||||
<p v-html="content.intro"></p>
|
||||
</div>
|
||||
<div v-for="partenaire in content.partenaires" class="partenaire">
|
||||
<div v-for="partenaire in [...content.partenaires].sort((a, b) => a.weight - b.weight)" class="partenaire">
|
||||
<figure>
|
||||
<a :href="partenaire.link_url" target="_blank">
|
||||
<img :src="partenaire.logo_url" :alt="partenaire.logo_alt">
|
||||
<img :src="partenaire.logo_url.small" :alt="partenaire.logo_alt">
|
||||
</a>
|
||||
</figure>
|
||||
<div class="title"><p v-html="partenaire.title"></p></div>
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="pieces-jointes">
|
||||
<div v-for="pj in content.pieces_jointes">
|
||||
<a class="pj-link" :href="pj.url" target="_blank" rel="noopener noreferrer" :style="{ backgroundColor: couleur }">{{ pj.title }}</a>
|
||||
</div>
|
||||
<div v-for="lien in content.liens">
|
||||
<a class="lien-link" :href="lien.url" target="_blank" rel="noopener noreferrer" :style="{ backgroundColor: couleur }">{{ lien.title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
content: Object,
|
||||
couleur: String,
|
||||
});
|
||||
</script>
|
||||
@ -1,21 +1,39 @@
|
||||
<template>
|
||||
<figure class="sensible-map">
|
||||
<vue-image-zoomer
|
||||
:regular="partie.carteSensible.url"
|
||||
:zoom="partie.carteSensible.url"
|
||||
:zoom-amount="3.5"
|
||||
:regular="partie.carteSensible.url.large"
|
||||
:zoom="partie.carteSensible.url.xlarge"
|
||||
:zoom-amount="2.5"
|
||||
alt="Carte sensible du territoire"
|
||||
hover-message="Survolez pour zoomer dans la carte"
|
||||
@regular-loaded="setVerticalImages()"
|
||||
/>
|
||||
<figcaption class="caption">{{ partie.carteSensible.alt }}</figcaption>
|
||||
</figure>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted } from 'vue';
|
||||
import { VueImageZoomer } from 'vue-image-zoomer';
|
||||
import 'vue-image-zoomer/dist/style.css';
|
||||
|
||||
const props = defineProps({
|
||||
partie: Object
|
||||
});
|
||||
|
||||
function setVerticalImages() {
|
||||
const zoomer = document.querySelector('.sensible-map');
|
||||
setTimeout(() => {
|
||||
if (zoomer.offsetWidth / zoomer.offsetHeight < 1) {
|
||||
zoomer.style.padding = '0 7vw';
|
||||
const caption = zoomer.querySelector('figcaption');
|
||||
caption.style.marginLeft = 0;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const zoomer = document.querySelector('.sensible-map');
|
||||
// console.log('mounted');
|
||||
});
|
||||
</script>
|
||||
@ -7,11 +7,12 @@
|
||||
:navigation="true"
|
||||
:pagination="true"
|
||||
:injectStyles="[`.swiper-button-next, .swiper-button-prev { z-index: 11; }`]"
|
||||
@swiperresize="(e) => setupSwiper(e.target)"
|
||||
>
|
||||
<swiper-slide v-for="image in partie.diaporama" style="width: 100%">
|
||||
<figure>
|
||||
<img
|
||||
:src="image.url"
|
||||
:src="image.url.medium"
|
||||
:alt="image.alt"
|
||||
@click="handleImageClick">
|
||||
<figcaption class="caption">{{ image.alt }}</figcaption>
|
||||
@ -28,6 +29,7 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { useImageModal } from '../../composables/useImageModale';
|
||||
import { useWaitForImages } from '../../composables/useWaitForImages';
|
||||
import ImageModale from '../ImageModale.vue';
|
||||
// WebComponent
|
||||
// https://swiperjs.com/element
|
||||
@ -56,15 +58,63 @@ const handleImageClick = (event) => {
|
||||
if (isSwiper) {
|
||||
const swiperEl = img.closest('swiper-container');
|
||||
swiperEl.querySelectorAll('swiper-slide').forEach((slide) => {
|
||||
const image = slide.querySelector('img');
|
||||
const altText = slide.querySelector('figcaption')?.textContent || '';
|
||||
swiperMedia.push({ src: image.getAttribute('src'), alt: altText });
|
||||
const img = slide.querySelector('img');
|
||||
const altText = slide.querySelector('figcaption')?.textContent || '';
|
||||
Object.values(props.partie.diaporama).forEach((image) => {
|
||||
if (image.url.medium === img.src) {
|
||||
swiperMedia.push({ src: image.url.large, alt: altText });
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
openImageModale(img.src, img.alt, swiperMedia);
|
||||
}
|
||||
};
|
||||
|
||||
function setupSwiper(swiper) {
|
||||
centerCaptionOnVerticalImgs(swiper);
|
||||
setVerticalImages(swiper);
|
||||
window.addEventListener('resize', () => {
|
||||
setTimeout(() => {
|
||||
setVerticalImages(swiper);
|
||||
}, 50);
|
||||
});
|
||||
}
|
||||
|
||||
function centerCaptionOnVerticalImgs(swiper) {
|
||||
const slides = swiper.querySelectorAll('swiper-slide');
|
||||
slides.forEach((slide) => {
|
||||
const img = slide.querySelector('img');
|
||||
const caption = slide.querySelector('figcaption');
|
||||
if (img.naturalHeight > img.naturalWidth) {
|
||||
caption.style.textAlign = 'center';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setVerticalImages(swiper) {
|
||||
const slides = swiper.querySelectorAll('swiper-slide');
|
||||
let imageHeight = 0;
|
||||
useWaitForImages(swiper, () => {
|
||||
|
||||
for (let i = 0; i < slides.length; i++) {
|
||||
const slide = slides[i];
|
||||
const img = slide.querySelector('img');
|
||||
if (img.offsetHeight < img.naturalWidth) {
|
||||
imageHeight = img.offsetHeight;
|
||||
break;
|
||||
}
|
||||
}
|
||||
slides.forEach((slide) => {
|
||||
const img = slide.querySelector('img');
|
||||
if (img.naturalHeight > img.naturalWidth) {
|
||||
img.style.height = `${imageHeight}px`;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.documentElement.style.setProperty('--etape-couleur', props.couleur);
|
||||
});
|
||||
@ -82,17 +132,7 @@ onMounted(() => {
|
||||
--swiper-navigation-size: 1.5rem;
|
||||
}
|
||||
|
||||
swiper-slide figure:not(.popup-figure) {
|
||||
max-height: 40vh;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
swiper-slide figure:not(.popup-figure) figcaption {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
swiper-slide img:not(.popup-img) { /* cf main.scss */
|
||||
max-height: 35vh;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease-out;
|
||||
object-fit: contain !important;
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="entretien">
|
||||
<h3>
|
||||
<p
|
||||
:style="{ background: `linear-gradient(transparent 70%, ${couleur} 70%)` }"
|
||||
>Entretien</p>
|
||||
<p :style="{ background: `linear-gradient(transparent 70%, ${couleur} 70%)` }">
|
||||
{{ partie.entretien.titre || "Entretien" }}
|
||||
</p>
|
||||
</h3>
|
||||
<div class="personnes">
|
||||
<div v-for="personne in partie.entretien.personnes" class="personne">
|
||||
<figure>
|
||||
<img :src="personne.portrait" :alt="personne.alt">
|
||||
<img :src="personne.portrait.small" :alt="personne.alt">
|
||||
</figure>
|
||||
<div class="description"><p v-html="personne.description"></p></div>
|
||||
</div>
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
ref="partieContent"
|
||||
class="partie-content"
|
||||
v-alt
|
||||
v-setVerticalImgs
|
||||
:style="{ '--couleur': couleur }"
|
||||
@click="handleImageClick">
|
||||
</div>
|
||||
@ -48,6 +49,18 @@ const vAlt = {
|
||||
}
|
||||
};
|
||||
|
||||
const vSetVerticalImgs = {
|
||||
mounted : (el) => {
|
||||
const images = el.querySelectorAll('img');
|
||||
images.forEach((img) => {
|
||||
if (img.offsetHeight > img.offsetWidth) {
|
||||
img.style.padding = '0 7vw';
|
||||
img.nextElementSibling.style.padding = '0 7vw';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const partieContent = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
@ -96,7 +109,7 @@ const {
|
||||
const handleImageClick = (event) => {
|
||||
const img = event.target;
|
||||
if (img.tagName === 'IMG') {
|
||||
openImageModale(img.src, img.alt);
|
||||
openImageModale(img.dataset.largeSrc, img.alt);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -131,6 +144,7 @@ const handleImageClick = (event) => {
|
||||
|
||||
.partie-content {
|
||||
img {
|
||||
box-sizing: border-box;
|
||||
margin-top: 2rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease-out;
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
export function useWaitForImages(container, callback) {
|
||||
const images = container.querySelectorAll('img');
|
||||
const imagePromises = Array.from(images).map(img => {
|
||||
return new Promise(resolve => {
|
||||
if (img.complete) {
|
||||
resolve();
|
||||
} else {
|
||||
img.onload = img.onerror = resolve;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all(imagePromises).then(callback);
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>
|
||||
|
After Width: | Height: | Size: 190 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
|
||||
|
After Width: | Height: | Size: 278 B |
@ -53,6 +53,7 @@ body{
|
||||
.layout-container {
|
||||
> header {
|
||||
z-index: 2;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
> div {
|
||||
padding: $body-margin-y $body-margin-x 0 $body-margin-x;
|
||||
display: grid;
|
||||
@ -301,6 +302,7 @@ body{
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
.leaflet-container {
|
||||
background-color: $main-color-light;
|
||||
.leaflet-popup {
|
||||
display: none;
|
||||
}
|
||||
@ -384,33 +386,33 @@ body{
|
||||
border: none;
|
||||
width: 100%;
|
||||
> div {
|
||||
max-height: 15vh;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10px, 12.5vw) 12.5vw;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
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 {
|
||||
line-height: 1.2;
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-size: $m-font-size-mobile;
|
||||
/* display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
*/
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
text-wrap: wrap;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
> a {
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
@ -425,7 +427,9 @@ body{
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 2 / span 1;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
padding: 10px 0 20px 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
> time {
|
||||
font-size: $sm-font-size-mobile;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
@ -435,27 +439,27 @@ body{
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-of-type(3) {
|
||||
> div:nth-of-type(3),
|
||||
> div:nth-of-type(3) > a {
|
||||
max-height: 20vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 1 / span 2;
|
||||
overflow: hidden;
|
||||
> a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> img,
|
||||
> a > img {
|
||||
padding: 0;
|
||||
> img {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
object-fit: cover;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
height: auto;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
margin: 0;
|
||||
display: block;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -931,6 +935,7 @@ body{
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
> .sensible-map {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
width: calc(100% + $modale-x-padding);
|
||||
margin-left: calc(($modale-x-padding / 2) * -1);
|
||||
@ -1081,6 +1086,7 @@ body{
|
||||
width: 100%;
|
||||
}
|
||||
> figcaption {
|
||||
line-height: 1.5;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@ -1102,26 +1108,29 @@ body{
|
||||
> #partenaires {
|
||||
margin-top: 3vh;
|
||||
> div.intro {
|
||||
margin-bottom: 6vh;
|
||||
margin-bottom: 4vh;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
}
|
||||
}
|
||||
> div.equipe-item {
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
margin-bottom: 7vh;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
> .partie-title {
|
||||
margin-bottom: 3vh;
|
||||
margin-bottom: 1.5vh;
|
||||
}
|
||||
}
|
||||
> div.equipe-item > div.personne,
|
||||
> div.partenaire {
|
||||
display: grid;
|
||||
grid-template-columns: 0.4fr 1fr;
|
||||
column-gap: 3rem;
|
||||
grid-template-columns: 0.3fr 1fr;
|
||||
column-gap: 2rem;
|
||||
grid-template-rows: auto;
|
||||
justify-items: start;
|
||||
margin-bottom: 6vh;
|
||||
margin-bottom: 3vh;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
grid-template-columns: 0.3fr 1fr;
|
||||
}
|
||||
> figure {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2;
|
||||
@ -1168,12 +1177,71 @@ body{
|
||||
}
|
||||
}
|
||||
}
|
||||
> .pieces-jointes {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
padding: 0 $modale-x-padding;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.8rem 1rem;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 3rem;
|
||||
> div {
|
||||
padding-top: 5px;
|
||||
> a {
|
||||
background-color: white;
|
||||
padding: 0.8rem 1rem;
|
||||
padding-left: 1.2rem;
|
||||
border-radius: 10rem;
|
||||
text-decoration: none;
|
||||
color: $main-color;
|
||||
display: flex;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
transform: translateY(0px);
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
> a.pj-link {
|
||||
&::after {
|
||||
mask: url('/themes/custom/caravane/assets/pictograms/download.svg') no-repeat center;
|
||||
content: '';
|
||||
mask-size: contain;
|
||||
background-color: $main-color;
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 0.3rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
> a.lien-link {
|
||||
&::after {
|
||||
mask: url('/themes/custom/caravane/assets/pictograms/arrow_forward.svg') no-repeat center;
|
||||
content: '';
|
||||
mask-size: contain;
|
||||
background-color: $main-color;
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 0.3rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> footer {
|
||||
z-index: 0;
|
||||
.pattern-bottom {
|
||||
mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
|
||||
height: $modale-bottom-padding;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
|
||||
background-size: 300px;
|
||||
background-size: repeat;
|
||||
}
|
||||
.related-etape-links {
|
||||
position: absolute;
|
||||
|
||||
12
web/themes/custom/caravane/package-lock.json
generated
12
web/themes/custom/caravane/package-lock.json
generated
@ -1350,9 +1350,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "11.1.14",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
|
||||
"integrity": "sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==",
|
||||
"version": "11.2.1",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.1.tgz",
|
||||
"integrity": "sha512-62G69+iQRIfUqTmJkWpZDcX891Ra8O9050ckt1/JI2H+0483g+gq0m7gINecDqMtDh2zt5dK+uzBRxGhGOOvQA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
@ -1472,9 +1472,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vue-image-zoomer": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-image-zoomer/-/vue-image-zoomer-2.4.1.tgz",
|
||||
"integrity": "sha512-n0icSuYf51MgNakZ331j4pShIpgzVjSd25leVtiiMWEgwjNshDgAkvggfvj0slTD/CEqjNXuijZAN55me6CEWw==",
|
||||
"version": "2.4.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-image-zoomer/-/vue-image-zoomer-2.4.4.tgz",
|
||||
"integrity": "sha512-hCDgBEitR/8m4/yDcgTWi5elR40Si2TATaYcpSh0395NpQ1LoHCFXizeXxp2MoYHzO3BpO3T4Q8+SNco/UITlg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue": "^3.2.25"
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if content != '' %}
|
||||
{% if content|render|striptags|trim is not empty or content|render matches '/<img/' %}
|
||||
<div class="separated-content">{{ content|trim }}</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user