From aca6c6b011efa33fd16bc07ef05b70a975f54b7c Mon Sep 17 00:00:00 2001 From: Valentin Le Moign Date: Thu, 23 Jan 2025 02:52:00 +0100 Subject: [PATCH] optimisation des images --- composer.json | 1 + composer.lock | 67 ++++++++++++++++++- web/themes/custom/caravane/assets/js/main.js | 3 +- .../caravane/assets/js/stores/content.js | 53 +++++++++++++-- .../caravane/assets/js/stores/layout.js | 12 ++-- .../caravane/assets/js/utils/map-setup.js | 2 +- .../js/vuejs/components/EquipeContent.vue | 2 +- .../js/vuejs/components/ModaleFooter.vue | 4 +- .../js/vuejs/components/ModaleHeader.vue | 2 +- .../vuejs/components/PartenairesContent.vue | 2 +- .../parties/ModaleCarteSensible.vue | 6 +- .../components/parties/ModaleDiaporama.vue | 23 ++++--- .../components/parties/ModaleEntretien.vue | 2 +- .../custom/caravane/assets/scss/main.scss | 1 + web/themes/custom/caravane/package-lock.json | 12 ++-- 15 files changed, 153 insertions(+), 39 deletions(-) diff --git a/composer.json b/composer.json index 5bb925c..3aba8e8 100644 --- a/composer.json +++ b/composer.json @@ -28,6 +28,7 @@ "drupal/geocoder": "^4.24", "drupal/geofield": "^1.59", "drupal/image_field_caption": "^2.0", + "drupal/jsonapi_image_styles": "^3.0", "drupal/jsonapi_views": "^1.1", "drupal/leaflet": "^10.2", "drupal/leaflet_more_maps": "^2.2", diff --git a/composer.lock b/composer.lock index 5883e65..ddfc499 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": "06879b846031f4f705cc93ea8f4f2f7d", + "content-hash": "17284db796caf7967cb47bae1feb4a43", "packages": [ { "name": "asm89/stack-cors", @@ -5634,6 +5634,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", diff --git a/web/themes/custom/caravane/assets/js/main.js b/web/themes/custom/caravane/assets/js/main.js index e2e336e..7c79709 100644 --- a/web/themes/custom/caravane/assets/js/main.js +++ b/web/themes/custom/caravane/assets/js/main.js @@ -30,7 +30,8 @@ import '../scss/main.scss' initEdgeBuffer(L); let mapSettings = settings.leaflet[Object.keys(settings.leaflet)[0]].map; - mapSettings.layers.layer.edgeBufferTiles = 8; + mapSettings.layers.layer.edgeBufferTiles = 1; + // mapSettings.settings.fadeAnimation = false; $(context).on('leafletMapInit', function (e, settings, map, mapid, markers) { const { diff --git a/web/themes/custom/caravane/assets/js/stores/content.js b/web/themes/custom/caravane/assets/js/stores/content.js index 0b03838..623dfdc 100644 --- a/web/themes/custom/caravane/assets/js/stores/content.js +++ b/web/themes/custom/caravane/assets/js/stores/content.js @@ -85,7 +85,12 @@ 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 }; } @@ -129,7 +134,13 @@ 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, }; } @@ -152,13 +163,21 @@ 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, }); + console.log(partieContent.diaporama); + } } break; @@ -173,7 +192,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, }); @@ -227,7 +251,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') { @@ -241,7 +270,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({ @@ -285,7 +319,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, }, } diff --git a/web/themes/custom/caravane/assets/js/stores/layout.js b/web/themes/custom/caravane/assets/js/stores/layout.js index 9fcd819..008a901 100644 --- a/web/themes/custom/caravane/assets/js/stores/layout.js +++ b/web/themes/custom/caravane/assets/js/stores/layout.js @@ -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; + } } }); }, diff --git a/web/themes/custom/caravane/assets/js/utils/map-setup.js b/web/themes/custom/caravane/assets/js/utils/map-setup.js index f7a54db..32a377c 100644 --- a/web/themes/custom/caravane/assets/js/utils/map-setup.js +++ b/web/themes/custom/caravane/assets/js/utils/map-setup.js @@ -12,7 +12,7 @@ export function setupMapStore(mapStore, map, settings) { } // not working -// kept to maybe rework on it later +// may or may not rework on it later export async function preloadEtapesTiles(mapStore, map) { function waitForEvent(el, eventName) { return new Promise((resolve) => { diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/EquipeContent.vue b/web/themes/custom/caravane/assets/js/vuejs/components/EquipeContent.vue index f8f4c5b..707f9d8 100644 --- a/web/themes/custom/caravane/assets/js/vuejs/components/EquipeContent.vue +++ b/web/themes/custom/caravane/assets/js/vuejs/components/EquipeContent.vue @@ -14,7 +14,7 @@
- +

diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue b/web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue index 7385389..988ef92 100644 --- a/web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue +++ b/web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue @@ -17,7 +17,7 @@
Du {{ content.previous.dates.start.d }} {{ content.previous.dates.start.m }}
au {{ content.previous.dates.end.d }} {{ content.previous.dates.end.m }} {{ content.previous.dates.end.y }}
- +
@@ -33,7 +33,7 @@
Du {{ content.next.dates.start.d }} {{ content.next.dates.start.m }}
au {{ content.next.dates.end.d }} {{ content.next.dates.end.m }} {{ content.next.dates.end.y }}
- +
diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue b/web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue index 3bcc064..ce9c24e 100644 --- a/web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue +++ b/web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue @@ -1,7 +1,7 @@