generated from gitea_admin/default
dev
This commit is contained in:
@@ -56,7 +56,7 @@ git push origin main
|
||||
2. cd /var/www/wondif_vue
|
||||
3.
|
||||
git pull origin main # récupère le dernier code
|
||||
si besoin
|
||||
si besoin (ajout de dépendances)
|
||||
npm ci # installe / met à jour les dépendances (à exécuter uniquement si nouvelle dépendances installées dans package json)
|
||||
npm run build # rebuild Nuxt
|
||||
pm2 reload ecosystem.config.cjs --only wondif_vue # redémarre le process avec les nouvelles variables d'environnement de ecosystem
|
||||
|
||||
@@ -29,6 +29,8 @@
|
||||
agenda: 'Agenda',
|
||||
saison: 'Saison',
|
||||
orchestre: "L'Orchestre",
|
||||
mediation: "Médiation",
|
||||
mecenat: "Mécénat",
|
||||
professionnels: "Professionnels"
|
||||
}
|
||||
|
||||
@@ -72,7 +74,7 @@
|
||||
? props.currentLabel
|
||||
: (labelMap[part] || humanize(decodeURIComponent(part)))
|
||||
|
||||
const noLink = part === 'orchestre' || part === 'concerts'
|
||||
const noLink = part === 'orchestre' || part === 'concerts' || part === 'mediation' || part === 'mecenat'
|
||||
crumbs.push({ to: resolveTo(part, index, parts, acc), label, noLink })
|
||||
|
||||
if (part === 'concerts') {
|
||||
|
||||
@@ -43,7 +43,6 @@
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -52,9 +51,7 @@
|
||||
<ul class="header_nav_sub_menu">
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/saison">Saison</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/jeune-public">Jeune public</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/mode-emploi">Concert mode d'emploi</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/mag">ONDIF MAG</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/live">ONDIF LIVE !</NuxtLink></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -74,9 +71,9 @@
|
||||
<li class="header_nav_item nav_focus_black" :class="{ 'is-active': isMecenat }">
|
||||
Nous soutenir
|
||||
<ul class="header_nav_sub_menu decalage_gauche c--noir margin_top_3">
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/valeurs">Nos valeurs</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/projets">Les projets</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/particuliers">Particuliers</NuxtLink></li>
|
||||
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/mecenes">Ils nous font confiance</NuxtLink></li>
|
||||
</ul>
|
||||
@@ -175,7 +172,6 @@
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -188,9 +184,7 @@
|
||||
<ul class="header_drawer_sub_menu">
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/saison">Saison</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/jeune-public">Jeune public</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/mode-emploi">Concert mode d'emploi</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/mag">ONDIF MAG</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/live">ONDIF LIVE !</NuxtLink></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -218,9 +212,9 @@
|
||||
>
|
||||
Nous soutenir
|
||||
<ul class="header_drawer_sub_menu">
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/valeurs">Nos valeurs</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/projets">Les projets</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/particuliers">Particuliers</NuxtLink></li>
|
||||
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/mecenes">Ils nous font confiance</NuxtLink></li>
|
||||
</ul>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="concert--page">
|
||||
<section v-if="pending" aria-busy="true" aria-live="polite">
|
||||
<p>en cours de chargement...</p>
|
||||
</section>
|
||||
@@ -766,21 +766,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================ */
|
||||
/* DESCRIPTION */
|
||||
/* ============================ */
|
||||
.description_wp {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 40px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
> * {
|
||||
max-width: 570px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
/* ============================ */
|
||||
/* GALERIES */
|
||||
/* ============================ */
|
||||
@@ -876,8 +861,33 @@
|
||||
}
|
||||
|
||||
.youtube-item iframe {
|
||||
|
||||
aspect-ratio: 16 / 9;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// =======================
|
||||
// SPÉCIFIQUE À CETTE PAGE
|
||||
// =======================
|
||||
/* ============================ */
|
||||
/* DESCRIPTION */
|
||||
/* ============================ */
|
||||
.concert--page {
|
||||
.description_wp {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 40px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
> * {
|
||||
max-width: 570px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -1,13 +1,294 @@
|
||||
<template>
|
||||
<div class="projets--page">
|
||||
<!-- ================== -->
|
||||
<!-- FILS D'ARIANE -->
|
||||
<!-- ================== -->
|
||||
<PageSection tone="" content-size="default" class="breadcrum_wp">
|
||||
<Breadcrumb/>
|
||||
</PageSection>
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- EN-TêTE -->
|
||||
<!-- ================== -->
|
||||
<section class="fiche_header_simple_wp">
|
||||
<div class="fiche_header_wp_gauche"></div>
|
||||
|
||||
<div class="fiche_header_inner">
|
||||
<div class="fiche_header_titres">
|
||||
<div>
|
||||
<DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
|
||||
{{projets_donnees_servies.header_titre}}
|
||||
</DsHeading>
|
||||
</div>
|
||||
|
||||
<DsText as="p" align="justify">
|
||||
{{projets_donnees_servies.header_text}}
|
||||
</DsText>
|
||||
</div>
|
||||
<div class="fiche_header_img">
|
||||
<DsMedia
|
||||
v-if="projets_donnees_servies?.header_illustration?.url"
|
||||
:src="projets_donnees_servies.header_illustration.url"
|
||||
:alt="projets_donnees_servies.header_illustration.alternativeText || ''"
|
||||
fit="cover"
|
||||
ratio="square"
|
||||
/>
|
||||
|
||||
<div v-else class="img_placeholder" aria-hidden="true" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="fiche_header_wp_droite"></div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- CHIFFRES -->
|
||||
<!-- ================== -->
|
||||
<PageSection
|
||||
v-if="hasProjetsChiffres"
|
||||
tone=""
|
||||
content-size="default"
|
||||
padded_size="md"
|
||||
class="chiffres_wp"
|
||||
>
|
||||
<Chiffres
|
||||
:title="projets_donnees_servies?.chiffres_projets?.Titre"
|
||||
:items="projetsChiffres"
|
||||
/>
|
||||
</PageSection>
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
|
||||
<!-- ================== -->
|
||||
<template v-for="(t, index) in tiroirs" :key="index">
|
||||
<PageSection :content="false">
|
||||
<Decalage
|
||||
:tone="t.decalage_couleur"
|
||||
title-tone="invert"
|
||||
:position="t.decalage_sens"
|
||||
button-tone="invert"
|
||||
:ensavoirplus-target="`texte_cache_${index + 3}`"
|
||||
ensavoirplus-group="projets-details"
|
||||
>
|
||||
<template #title>
|
||||
{{ t.decalage_titre }}
|
||||
</template>
|
||||
<DsText as="p" tone="invert" align="justify">
|
||||
{{ t.decalage_texte }}
|
||||
</DsText>
|
||||
</Decalage>
|
||||
</PageSection>
|
||||
<PageSection
|
||||
:id="`texte_cache_${index + 3}`"
|
||||
data-ensavoirplus-group="projets-details"
|
||||
tone=""
|
||||
content-size="default"
|
||||
padded_size="md"
|
||||
class="decalage_ensavoirplus--hidden"
|
||||
>
|
||||
<section v-if="t.tiroir_galerie.length" class="img-gallery_wp">
|
||||
<div class="img-gallery">
|
||||
<DsMedia
|
||||
v-for="img in t.tiroir_galerie"
|
||||
:key="img.id || img.url"
|
||||
:src="img.url"
|
||||
:alt="img.alternativeText"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<SectionContent class="fiche_description">
|
||||
<StrapiBlocksConvert :blocks="t.tiroir_description" />
|
||||
</SectionContent>
|
||||
<section v-if="t.tiroir_videos.length" class="youtube_wp">
|
||||
<div class="youtube-list">
|
||||
<div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
|
||||
<iframe
|
||||
:src="v.lien_youtube"
|
||||
title="Vidéo YouTube"
|
||||
loading="lazy"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</PageSection>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- CONTACT -->
|
||||
<!-- ================== -->
|
||||
|
||||
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
|
||||
<ContactSpecifique
|
||||
titre="Contacter le service des actions culturelles"
|
||||
nom="Vanessa Gasztowtt"
|
||||
poste="Responsable de l’action éducative et culturelle
|
||||
et de la programmation jeune public"
|
||||
numero="01 41 79 03 43"
|
||||
mail="vanessa.gasztowtt@orchestre-ile.com"
|
||||
/>
|
||||
</PageSection>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
// ======================================
|
||||
// RÉCUPÉRATION DES DONNÉES DANS STRAPI
|
||||
// ======================================
|
||||
|
||||
const endpoint = "/api/__strapi__/projet"
|
||||
const populate = {
|
||||
header_illustration: true,
|
||||
chiffres_projets: {chiffres: true},
|
||||
tiroirs_projets: {
|
||||
decalage_parametres: true,
|
||||
tiroir_galerie: true,
|
||||
tiroir_videos: true,
|
||||
},
|
||||
}
|
||||
|
||||
const { items: projets, pending, error } = useStrapi(
|
||||
endpoint,
|
||||
{
|
||||
locale: "fr-FR",
|
||||
populate,
|
||||
limit: 1,
|
||||
}
|
||||
)
|
||||
console.log("projets:", projets.value)
|
||||
watchEffect(() => {
|
||||
console.log("client ?", import.meta.client)
|
||||
console.log("server ?", import.meta.server)
|
||||
console.log("pending:", pending.value)
|
||||
console.log("error:", error.value)
|
||||
console.log("projets:", projets.value)
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
if (!pending.value && projets.value?.length) {
|
||||
console.log("projets dans le watch effect:", projets.value)
|
||||
console.log("projets header_titre :", projets.value[0].header_titre)
|
||||
console.log("projets illustration url :", projets.value[0].header_illustration?.url)
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
console.log("projets header_titre :", projets.value?.[0]?.header_titre)
|
||||
|
||||
// ======================================
|
||||
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
|
||||
// ======================================
|
||||
const projets_donnees_servies = computed(() => projets.value?.[0] || {})
|
||||
watchEffect(() => {
|
||||
console.log("projets_donnees_servies JSON:", JSON.stringify(projets_donnees_servies.value, null, 2))
|
||||
})
|
||||
|
||||
const projetsChiffres = computed(() =>
|
||||
(projets.value?.[0]?.chiffres_projets?.chiffres || []).map((item) => ({
|
||||
value: item.chiffre,
|
||||
label: item.label,
|
||||
}))
|
||||
)
|
||||
|
||||
const hasProjetsChiffres = computed(() => (
|
||||
Boolean(projets_donnees_servies.value?.chiffres_projets?.Titre)
|
||||
|| projetsChiffres.value.length > 0
|
||||
))
|
||||
|
||||
const tiroirs = computed(() =>
|
||||
(projets.value?.[0]?.tiroirs_projets || []).map((tiroir_item) => ({
|
||||
decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
|
||||
decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
|
||||
decalage_sens:
|
||||
tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
|
||||
decalage_couleur:
|
||||
tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
|
||||
? "brand"
|
||||
: tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
|
||||
? "brandreverse"
|
||||
: tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
|
||||
? "jaune"
|
||||
: "dark",
|
||||
tiroir_description: tiroir_item.tiroir_description,
|
||||
tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
|
||||
id: tiroir_item_img.id,
|
||||
url: tiroir_item_img.url,
|
||||
alt: tiroir_item_img.alternativeText,
|
||||
})),
|
||||
tiroir_videos: (tiroir_item.tiroir_videos || [])
|
||||
.map((tiroir_item_video) => {
|
||||
const id = getYoutubeId(tiroir_item_video?.lien_youtube)
|
||||
if (!id) return null
|
||||
|
||||
return {
|
||||
id: tiroir_item_video.id || id,
|
||||
lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
|
||||
}
|
||||
})
|
||||
.filter(Boolean),
|
||||
}))
|
||||
)
|
||||
|
||||
watchEffect(() => {
|
||||
console.log("projetsChiffres JSON:", JSON.stringify(projetsChiffres.value, null, 2))
|
||||
console.log("tiroirs JSON:", JSON.stringify(tiroirs.value, null, 2))
|
||||
})
|
||||
|
||||
|
||||
function getYoutubeId(url = "") {
|
||||
try {
|
||||
const u = new URL(url)
|
||||
if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
|
||||
if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
|
||||
if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
|
||||
return u.searchParams.get("v")
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// =======================
|
||||
// SPÉCIFIQUE À CETTE PAGE
|
||||
// =======================
|
||||
.projets--page {
|
||||
.chiffres_wp {
|
||||
background-color: var(--c-background-vert);
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.fiche_description {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 70px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
> * {
|
||||
max-width: 640px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.contact_spe_wp {
|
||||
background-color: var(--c-background-jaune-clair);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================ */
|
||||
/* GALERIES */
|
||||
/* ============================ */
|
||||
|
||||
</style>
|
||||
@@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
283
app/pages/mecenat/valeurs.vue
Normal file
283
app/pages/mecenat/valeurs.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<div class="valeurs--page">
|
||||
<!-- ================== -->
|
||||
<!-- FILS D'ARIANE -->
|
||||
<!-- ================== -->
|
||||
<PageSection tone="" content-size="default" class="breadcrum_wp">
|
||||
<Breadcrumb/>
|
||||
</PageSection>
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- EN-TêTE -->
|
||||
<!-- ================== -->
|
||||
<section class="fiche_header_simple_wp">
|
||||
<div class="fiche_header_wp_gauche"></div>
|
||||
|
||||
<div class="fiche_header_inner">
|
||||
<div class="fiche_header_titres">
|
||||
<div>
|
||||
<DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
|
||||
{{valeurs_donnees_servies.header_titre}}
|
||||
</DsHeading>
|
||||
</div>
|
||||
|
||||
<DsText as="p" align="justify">
|
||||
{{valeurs_donnees_servies.header_text}}
|
||||
</DsText>
|
||||
</div>
|
||||
<div class="fiche_header_img">
|
||||
<DsMedia
|
||||
v-if="valeurs_donnees_servies?.header_illustration?.[0]?.url"
|
||||
:src="valeurs_donnees_servies.header_illustration[0].url"
|
||||
:alt="valeurs_donnees_servies.header_illustration[0].alternativeText || ''"
|
||||
fit="cover"
|
||||
ratio="square"
|
||||
/>
|
||||
|
||||
<div v-else class="img_placeholder" aria-hidden="true" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="fiche_header_wp_droite"></div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- CHIFFRES -->
|
||||
<!-- ================== -->
|
||||
<PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
|
||||
<Chiffres
|
||||
:title="valeurs_donnees_servies?.chiffres_valeurs?.Titre"
|
||||
:items="valeursChiffres"
|
||||
/>
|
||||
</PageSection>
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
|
||||
<!-- ================== -->
|
||||
<template v-for="(t, index) in tiroirs" :key="index">
|
||||
<PageSection :content="false">
|
||||
<Decalage
|
||||
:tone="t.decalage_couleur"
|
||||
title-tone="invert"
|
||||
:position="t.decalage_sens"
|
||||
button-tone="invert"
|
||||
:ensavoirplus-target="`texte_cache_${index + 3}`"
|
||||
ensavoirplus-group="valeurs-details"
|
||||
>
|
||||
<template #title>
|
||||
{{ t.decalage_titre }}
|
||||
</template>
|
||||
<DsText as="p" tone="invert" align="justify">
|
||||
{{ t.decalage_texte }}
|
||||
</DsText>
|
||||
</Decalage>
|
||||
</PageSection>
|
||||
<PageSection
|
||||
:id="`texte_cache_${index + 3}`"
|
||||
data-ensavoirplus-group="valeurs-details"
|
||||
tone=""
|
||||
content-size="default"
|
||||
padded_size="md"
|
||||
class="decalage_ensavoirplus--hidden"
|
||||
>
|
||||
<section v-if="t.tiroir_galerie.length" class="img-gallery_wp">
|
||||
<div class="img-gallery">
|
||||
<DsMedia
|
||||
v-for="img in t.tiroir_galerie"
|
||||
:key="img.id || img.url"
|
||||
:src="img.url"
|
||||
:alt="img.alternativeText"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<SectionContent class="fiche_description">
|
||||
<StrapiBlocksConvert :blocks="t.tiroir_description" />
|
||||
</SectionContent>
|
||||
<section v-if="t.tiroir_videos.length" class="youtube_wp">
|
||||
<div class="youtube-list">
|
||||
<div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
|
||||
<iframe
|
||||
:src="v.lien_youtube"
|
||||
title="Vidéo YouTube"
|
||||
loading="lazy"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</PageSection>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- CONTACT -->
|
||||
<!-- ================== -->
|
||||
|
||||
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
|
||||
<ContactSpecifique
|
||||
titre="Contacter le service des actions culturelles"
|
||||
nom="Vanessa Gasztowtt"
|
||||
poste="Responsable de l’action éducative et culturelle
|
||||
et de la programmation jeune public"
|
||||
numero="01 41 79 03 43"
|
||||
mail="vanessa.gasztowtt@orchestre-ile.com"
|
||||
/>
|
||||
</PageSection>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||||
import DsText from '@root/design-system/primitives/DsText.vue'
|
||||
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
// ======================================
|
||||
// RÉCUPÉRATION DES DONNÉES DANS STRAPI
|
||||
// ======================================
|
||||
|
||||
const endpoint = "/api/__strapi__/valeurs"
|
||||
const populate = {
|
||||
header_illustration: true,
|
||||
chiffres_valeurs: {chiffres: true},
|
||||
tiroirs_valeurs: {
|
||||
decalage_parametres: true,
|
||||
tiroir_galerie: true,
|
||||
tiroir_videos: true,
|
||||
},
|
||||
}
|
||||
|
||||
const { items: valeurs, pending, error } = useStrapi(
|
||||
endpoint,
|
||||
{
|
||||
locale: "fr-FR",
|
||||
populate,
|
||||
limit: 1,
|
||||
}
|
||||
)
|
||||
console.log("valeurs:", valeurs.value)
|
||||
watchEffect(() => {
|
||||
console.log("client ?", import.meta.client)
|
||||
console.log("server ?", import.meta.server)
|
||||
console.log("pending:", pending.value)
|
||||
console.log("error:", error.value)
|
||||
console.log("valeurs:", valeurs.value)
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
if (!pending.value && valeurs.value?.length) {
|
||||
console.log("valeurs dans le watch effect:", valeurs.value)
|
||||
console.log("valeurs header_titre :", valeurs.value[0].header_titre)
|
||||
console.log("valeurs illustration url :", valeurs.value[0].header_illustration[0].url)
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
console.log("valeurs header_titre :", valeurs.value?.[0]?.header_titre)
|
||||
|
||||
// ======================================
|
||||
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
|
||||
// ======================================
|
||||
const valeurs_donnees_servies = computed(() => valeurs.value?.[0] || {})
|
||||
watchEffect(() => {
|
||||
console.log("valeurs_donnees_servies JSON:", JSON.stringify(valeurs_donnees_servies.value, null, 2))
|
||||
})
|
||||
|
||||
const valeursChiffres = computed(() =>
|
||||
(valeurs.value?.[0]?.chiffres_valeurs?.chiffres || []).map((item) => ({
|
||||
value: item.chiffre,
|
||||
label: item.label,
|
||||
}))
|
||||
)
|
||||
|
||||
const tiroirs = computed(() =>
|
||||
(valeurs.value?.[0]?.tiroirs_valeurs || []).map((tiroir_item) => ({
|
||||
decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
|
||||
decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
|
||||
decalage_sens:
|
||||
tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
|
||||
decalage_couleur:
|
||||
tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
|
||||
? "brand"
|
||||
: tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
|
||||
? "brandreverse"
|
||||
: tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
|
||||
? "jaune"
|
||||
: "dark",
|
||||
tiroir_description: tiroir_item.tiroir_description,
|
||||
tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
|
||||
id: tiroir_item_img.id,
|
||||
url: tiroir_item_img.url,
|
||||
alt: tiroir_item_img.alternativeText,
|
||||
})),
|
||||
tiroir_videos: (tiroir_item.tiroir_videos || [])
|
||||
.map((tiroir_item_video) => {
|
||||
const id = getYoutubeId(tiroir_item_video?.lien_youtube)
|
||||
if (!id) return null
|
||||
|
||||
return {
|
||||
id: tiroir_item_video.id || id,
|
||||
lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
|
||||
}
|
||||
})
|
||||
.filter(Boolean),
|
||||
}))
|
||||
)
|
||||
|
||||
watchEffect(() => {
|
||||
console.log("valeursChiffres JSON:", JSON.stringify(valeursChiffres.value, null, 2))
|
||||
console.log("tiroirs JSON:", JSON.stringify(tiroirs.value, null, 2))
|
||||
})
|
||||
|
||||
|
||||
function getYoutubeId(url = "") {
|
||||
try {
|
||||
const u = new URL(url)
|
||||
if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
|
||||
if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
|
||||
if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
|
||||
return u.searchParams.get("v")
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// =======================
|
||||
// SPÉCIFIQUE À CETTE PAGE
|
||||
// =======================
|
||||
.valeurs--page {
|
||||
.chiffres_wp {
|
||||
background-color: var(--c-background-vert);
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.fiche_description {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 70px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
> * {
|
||||
max-width: 640px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.contact_spe_wp {
|
||||
background-color: var(--c-background-jaune-clair);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================ */
|
||||
/* GALERIES */
|
||||
/* ============================ */
|
||||
|
||||
</style>
|
||||
@@ -91,7 +91,7 @@
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<SectionContent class="description_wp">
|
||||
<SectionContent class="description_wp fiche_description">
|
||||
<StrapiBlocksConvert :blocks="t.tiroir_description" />
|
||||
</SectionContent>
|
||||
<section v-if="t.tiroir_videos.length" class="youtube_wp">
|
||||
@@ -257,6 +257,19 @@ et de la programmation jeune public"
|
||||
background-color: var(--c-background-jaune);
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.fiche_description {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 70px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
> * {
|
||||
max-width: 640px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.contact_spe_wp {
|
||||
background-color: var(--c-background-jaune-clair);
|
||||
margin-bottom: 20px;
|
||||
|
||||
@@ -145,7 +145,13 @@
|
||||
</PageSection>
|
||||
|
||||
<PageSection tone="" content-size="default" padded_size="" class="fiche_description">
|
||||
<div id="texte_cache" class="decalage_ensavoirplus--hidden"><StrapiBlocksConvert :blocks="missions.partie_ouvrable_4" /></div>
|
||||
<div
|
||||
v-if="missions?.partie_ouvrable_4"
|
||||
id="texte_cache"
|
||||
class="decalage_ensavoirplus--hidden"
|
||||
>
|
||||
<StrapiBlocksConvert :blocks="missions.partie_ouvrable_4 || []" />
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<!-- ================== -->
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
--c-background-blanc-casse: #FCFCFC;
|
||||
--c-background-jaune: #fac020;
|
||||
--c-background-jaune-clair: #fac0201f;
|
||||
--c-background-vert: #51d43d;
|
||||
--c-background-vert: #c8ffda;
|
||||
|
||||
/* États */
|
||||
--c-success: green;
|
||||
|
||||
@@ -8,6 +8,8 @@ const COLLECTION_MAP = {
|
||||
missions: "/api/mission",
|
||||
mission: "/api/mission",
|
||||
scolaires: "/api/scolaire",
|
||||
valeurs: "/api/valeurs",
|
||||
projet: "/api/projet",
|
||||
}
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
Reference in New Issue
Block a user