generated from gitea_admin/default
417 lines
13 KiB
Vue
417 lines
13 KiB
Vue
<template>
|
||
<div class="scolaire--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">
|
||
{{scolaire_donnees_servies.header_titre}}
|
||
</DsHeading>
|
||
</div>
|
||
|
||
<DsText as="p" align="justify">
|
||
{{scolaire_donnees_servies.header_text}}
|
||
</DsText>
|
||
</div>
|
||
<div class="fiche_header_img">
|
||
<DsMedia
|
||
v-if="scolaire_donnees_servies?.header_illustration?.[0]?.url"
|
||
:src="scolaire_donnees_servies.header_illustration[0].url"
|
||
:alt="scolaire_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= "scolaire_donnees_servies?.chiffres_scolaires?.[0]?.Titre"
|
||
:items="scolairesChiffres"
|
||
/>
|
||
</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="scolaires-details"
|
||
:lien-cta="t.lien_cta"
|
||
:text-cta="t.text_cta"
|
||
>
|
||
<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="scolaires-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="description_wp 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>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- RESSOURCES PEDAGOGIQUES -->
|
||
<section>
|
||
<PageSection :content="false">
|
||
<Decalage
|
||
tone="brand"
|
||
title-tone="invert"
|
||
position="left"
|
||
button-tone="invert"
|
||
:ensavoirplus-target="ressourcesSectionId"
|
||
ensavoirplus-group="ressources"
|
||
>
|
||
<template #title>
|
||
RESSOURCES PÉDAGOGIQUES
|
||
</template>
|
||
<DsText as="p" tone="invert" align="justify">
|
||
Accompagner la préparation des activités musicales et la découverte des concerts.
|
||
</DsText>
|
||
<DsText as="p" tone="invert" align="justify">
|
||
Des outils pour tous les âges de se familiariser avec l'Orchestre, les instruments, la musique symphonique et les compositeurs.
|
||
</DsText>
|
||
</Decalage>
|
||
</PageSection>
|
||
<PageSection
|
||
:id="ressourcesSectionId"
|
||
data-ensavoirplus-group="ressources"
|
||
tone=""
|
||
content-size="default"
|
||
padded_size="md"
|
||
class="decalage_ensavoirplus--hidden"
|
||
>
|
||
<section class="ressources-pedagogiques__list">
|
||
<RessourcesCard
|
||
v-for="ressource in ressourcesPedagogiques"
|
||
:key="ressource.id"
|
||
:title="ressource.title"
|
||
:description="ressource.description"
|
||
:img-src="ressource.imgSrc"
|
||
:img-alt="ressource.imgAlt"
|
||
:badge="ressource.badge"
|
||
:file-label="ressource.fileLabel"
|
||
:file-size="ressource.fileSize"
|
||
:file-url="ressource.fileUrl"
|
||
:file-name="ressource.fileName"
|
||
:link-type="ressource.linkType"
|
||
:actions="ressource.actions"
|
||
/>
|
||
</section>
|
||
</PageSection>
|
||
</section>
|
||
|
||
|
||
|
||
<!-- ================== -->
|
||
<!-- 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=""
|
||
mail="vanessa.gasztowtt@orchestre-ile.com"
|
||
adresse=""
|
||
/>
|
||
</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__/scolaires"
|
||
const populate = {
|
||
header_illustration: true,
|
||
chiffres_scolaires: {chiffres: true},
|
||
tiroirs_scolaires: {
|
||
decalage_parametres: true,
|
||
tiroir_galerie: true,
|
||
tiroir_videos: true,
|
||
},
|
||
}
|
||
|
||
const { items: scolaires, pending, error } = useStrapi(
|
||
endpoint,
|
||
{
|
||
locale: "fr-FR",
|
||
populate,
|
||
limit: 1,
|
||
}
|
||
)
|
||
|
||
const { items: ressourcesPedagogiquesItems } = useStrapi(
|
||
"/api/__strapi__/ressources-pedagogiques",
|
||
{
|
||
locale: "fr-FR",
|
||
populate: {
|
||
illustration_ressource: true,
|
||
document_ressource: true,
|
||
},
|
||
sort: "ordre_ressource:asc",
|
||
fetchAll: true,
|
||
}
|
||
)
|
||
|
||
// ======================================
|
||
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
|
||
// ======================================
|
||
const scolaire_donnees_servies = computed(() => scolaires.value?.[0] || {})
|
||
const ressourcesSectionId = "texte_cache_ressources"
|
||
const ressourcesPedagogiques = computed(() =>
|
||
(ressourcesPedagogiquesItems.value || []).map((ressource) => {
|
||
const document = ressource.document_ressource
|
||
const webUrl = ressource.web_ressource || ""
|
||
const actions = [
|
||
document?.url
|
||
? {
|
||
id: "pdf",
|
||
type: "file",
|
||
label: "Télécharger le document (PDF)",
|
||
size: formatFileSize(document.size),
|
||
url: document.url,
|
||
fileName: document.name || "",
|
||
}
|
||
: null,
|
||
webUrl
|
||
? {
|
||
id: "web",
|
||
type: "web",
|
||
label: "Ouvrir la ressource web",
|
||
url: webUrl,
|
||
}
|
||
: null,
|
||
].filter(Boolean)
|
||
|
||
return {
|
||
id: ressource.documentId || ressource.id,
|
||
title: ressource.titre_ressource,
|
||
description: ressource.description_ressource,
|
||
imgSrc: ressource.illustration_ressource?.url || "",
|
||
imgAlt:
|
||
ressource.illustration_ressource?.alternativeText ||
|
||
ressource.titre_ressource ||
|
||
"Ressource pédagogique",
|
||
badge: getResourceBadge(actions),
|
||
actions,
|
||
}
|
||
})
|
||
)
|
||
|
||
const scolairesChiffres = computed(() =>
|
||
(scolaires.value?.[0]?.chiffres_scolaires?.[0]?.chiffres || []).map((item) => ({
|
||
value: item.chiffre,
|
||
label: item.label,
|
||
}))
|
||
)
|
||
|
||
const tiroirs = computed(() =>
|
||
(scolaires.value?.[0]?.tiroirs_scolaires || []).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",
|
||
lien_cta: tiroir_item.decalage_parametres?.lien_cta || "",
|
||
text_cta: tiroir_item.decalage_parametres?.text_cta || undefined,
|
||
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),
|
||
}))
|
||
)
|
||
|
||
|
||
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
|
||
}
|
||
}
|
||
|
||
function getResourceBadge(actions = []) {
|
||
const hasPdf = actions.some((action) => action.type === "file")
|
||
const hasWeb = actions.some((action) => action.type === "web")
|
||
|
||
if (hasPdf && hasWeb) return "PDF + WEB"
|
||
if (hasWeb) return "WEB"
|
||
return "PDF"
|
||
}
|
||
|
||
function formatFileSize(sizeInKo) {
|
||
const size = Number(sizeInKo)
|
||
if (!Number.isFinite(size) || size <= 0) return ""
|
||
|
||
if (size >= 1024) {
|
||
return `${formatNumber(size / 1024)} Mo`
|
||
}
|
||
|
||
return `${formatNumber(size)} Ko`
|
||
}
|
||
|
||
function formatNumber(value) {
|
||
return new Intl.NumberFormat("fr-FR", {
|
||
maximumFractionDigits: value >= 10 ? 0 : 1,
|
||
}).format(value)
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// =======================
|
||
// SPÉCIFIQUE À CETTE PAGE
|
||
// =======================
|
||
.scolaire--page {
|
||
.chiffres_wp {
|
||
background-color: var(--c-background-jaune);
|
||
margin-bottom: 50px;
|
||
}
|
||
.fiche_description {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
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-top: 50px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.ressources-pedagogiques__list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 392px));
|
||
gap: 24px;
|
||
justify-content: center;
|
||
}
|
||
.strapi-blocks {
|
||
h2 {
|
||
color: var(--c-bleu);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ============================ */
|
||
/* GALERIES */
|
||
/* ============================ */
|
||
|
||
</style>
|