bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

equipe panel toggle en js

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-12-01 10:02:04 +01:00
parent 02231b8e17
commit cbc0053467
5 changed files with 204 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

@@ -595,42 +595,120 @@ $(document).ready(function () {
////////////// start toggle page node projet ////////////////// ////////////// start toggle page node projet //////////////////
// document.addEventListener('DOMContentLoaded', function () {
// const photo = document.querySelector('.field_field_equipe_photo');
// const pres = document.querySelector('.field_field_equipe_presentation');
// if (!pres) return;
// // Création du bouton
// const btn = document.createElement('button');
// btn.className = 'btn-equipe-toggle';
// btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
// btn.setAttribute('aria-expanded', false);
// // Insertion du bouton juste après le bloc présentation
// pres.insertAdjacentElement('afterend', btn);
// // 3. Ajout de la ligne après le bouton
// const separator = document.createElement('div');
// separator.className = 'equipe-separator';
// btn.insertAdjacentElement('afterend', separator);
// // Toggle
// btn.addEventListener('click', function () {
// const isOpen = pres.classList.toggle('is-open');
// if (photo) photo.classList.toggle('is-open');
// btn.textContent = isOpen
// ? "FERMER LA PRÉSENTATION DE L'ÉQUIPE"
// : "EN SAVOIR PLUS SUR L'ÉQUIPE";
// btn.setAttribute('aria-expanded', isOpen);
// });
// });
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const photo = document.querySelector('.field_field_equipe_photo'); const photo = document.querySelector('.field_field_equipe_photo');
const pres = document.querySelector('.field_field_equipe_presentation'); const pres = document.querySelector('.field_field_equipe_presentation');
if (!pres) return; if (!photo || !pres) return;
// Création du bouton // 1. Créer un wrapper autour de photo + présentation
const panel = document.createElement('div');
panel.className = 'equipe-panel';
// Insérer le panel avant la photo, puis y déplacer photo + pres
photo.parentNode.insertBefore(panel, photo);
panel.appendChild(photo);
panel.appendChild(pres);
// 2. Préparer le panel pour l'animation
panel.style.overflow = 'hidden';
panel.style.maxHeight = '0px';
// 3. Création du bouton
const btn = document.createElement('button'); const btn = document.createElement('button');
btn.className = 'btn-equipe-toggle'; btn.className = 'btn-equipe-toggle';
btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE"; btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', false); btn.setAttribute('aria-expanded', 'false');
// Insertion du bouton juste après le bloc présentation // Insertion du bouton juste après le panel (et plus après "pres")
pres.insertAdjacentElement('afterend', btn); panel.insertAdjacentElement('afterend', btn);
// 3. Ajout de la ligne après le bouton // Ligne de séparation après le bouton
const separator = document.createElement('div'); const separator = document.createElement('div');
separator.className = 'equipe-separator'; separator.className = 'equipe-separator';
btn.insertAdjacentElement('afterend', separator); btn.insertAdjacentElement('afterend', separator);
// Toggle // --- Fonctions ouverture / fermeture ---
function openPanel() {
panel.classList.add('is-open');
photo.classList.add('is-open');
pres.classList.add('is-open');
const fullHeight = panel.scrollHeight; // inclut photo + texte
panel.style.maxHeight = fullHeight + 'px';
btn.textContent = "FERMER LA PRÉSENTATION DE L'ÉQUIPE";
btn.setAttribute('aria-expanded', 'true');
}
function closePanel() {
const fullHeight = panel.scrollHeight;
panel.style.maxHeight = fullHeight + 'px';
requestAnimationFrame(() => {
panel.style.maxHeight = '0px';
panel.classList.remove('is-open');
photo.classList.remove('is-open');
pres.classList.remove('is-open');
});
btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', 'false');
}
// --- Toggle bouton ---
btn.addEventListener('click', function () { btn.addEventListener('click', function () {
const isOpen = pres.classList.toggle('is-open'); const isOpen = btn.getAttribute('aria-expanded') === 'true';
if (isOpen) {
if (photo) photo.classList.toggle('is-open'); closePanel();
} else {
btn.textContent = isOpen openPanel();
? "FERMER LA PRÉSENTATION DE L'ÉQUIPE" }
: "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', isOpen);
}); });
}); });
//////////////end toggle page node projet ////////////////// //////////////end toggle page node projet //////////////////

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map vendored
View File

File diff suppressed because one or more lines are too long

9
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -4469,16 +4469,14 @@ body {
font-family: "gilroy-light"; font-family: "gilroy-light";
font-size: 0.6rem; font-size: 0.6rem;
} }
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo, .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .equipe-panel {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_presentation {
overflow: hidden; overflow: hidden;
max-height: 0; max-height: 0;
opacity: 0; opacity: 0;
margin-top: 1rem;
transition: max-height 1s ease, opacity 0.8s ease; transition: max-height 1s ease, opacity 0.8s ease;
} }
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo.is-open, .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .equipe-panel.is-open {
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_presentation.is-open {
max-height: 1500px;
opacity: 1; opacity: 1;
} }
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle { .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle {
@@ -4492,7 +4490,6 @@ body {
margin: auto; margin: auto;
display: flex; display: flex;
border: none; border: none;
margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle svg { .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle svg {

116
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@@ -537,42 +537,120 @@ $(document).ready(function () {
////////////// start toggle page node projet ////////////////// ////////////// start toggle page node projet //////////////////
// document.addEventListener('DOMContentLoaded', function () {
// const photo = document.querySelector('.field_field_equipe_photo');
// const pres = document.querySelector('.field_field_equipe_presentation');
// if (!pres) return;
// // Création du bouton
// const btn = document.createElement('button');
// btn.className = 'btn-equipe-toggle';
// btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
// btn.setAttribute('aria-expanded', false);
// // Insertion du bouton juste après le bloc présentation
// pres.insertAdjacentElement('afterend', btn);
// // 3. Ajout de la ligne après le bouton
// const separator = document.createElement('div');
// separator.className = 'equipe-separator';
// btn.insertAdjacentElement('afterend', separator);
// // Toggle
// btn.addEventListener('click', function () {
// const isOpen = pres.classList.toggle('is-open');
// if (photo) photo.classList.toggle('is-open');
// btn.textContent = isOpen
// ? "FERMER LA PRÉSENTATION DE L'ÉQUIPE"
// : "EN SAVOIR PLUS SUR L'ÉQUIPE";
// btn.setAttribute('aria-expanded', isOpen);
// });
// });
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const photo = document.querySelector('.field_field_equipe_photo'); const photo = document.querySelector('.field_field_equipe_photo');
const pres = document.querySelector('.field_field_equipe_presentation'); const pres = document.querySelector('.field_field_equipe_presentation');
if (!pres) return; if (!photo || !pres) return;
// Création du bouton // 1. Créer un wrapper autour de photo + présentation
const panel = document.createElement('div');
panel.className = 'equipe-panel';
// Insérer le panel avant la photo, puis y déplacer photo + pres
photo.parentNode.insertBefore(panel, photo);
panel.appendChild(photo);
panel.appendChild(pres);
// 2. Préparer le panel pour l'animation
panel.style.overflow = 'hidden';
panel.style.maxHeight = '0px';
// 3. Création du bouton
const btn = document.createElement('button'); const btn = document.createElement('button');
btn.className = 'btn-equipe-toggle'; btn.className = 'btn-equipe-toggle';
btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE"; btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', false); btn.setAttribute('aria-expanded', 'false');
// Insertion du bouton juste après le bloc présentation // Insertion du bouton juste après le panel (et plus après "pres")
pres.insertAdjacentElement('afterend', btn); panel.insertAdjacentElement('afterend', btn);
// 3. Ajout de la ligne après le bouton // Ligne de séparation après le bouton
const separator = document.createElement('div'); const separator = document.createElement('div');
separator.className = 'equipe-separator'; separator.className = 'equipe-separator';
btn.insertAdjacentElement('afterend', separator); btn.insertAdjacentElement('afterend', separator);
// Toggle // --- Fonctions ouverture / fermeture ---
function openPanel() {
panel.classList.add('is-open');
photo.classList.add('is-open');
pres.classList.add('is-open');
const fullHeight = panel.scrollHeight; // inclut photo + texte
panel.style.maxHeight = fullHeight + 'px';
btn.textContent = "FERMER LA PRÉSENTATION DE L'ÉQUIPE";
btn.setAttribute('aria-expanded', 'true');
}
function closePanel() {
const fullHeight = panel.scrollHeight;
panel.style.maxHeight = fullHeight + 'px';
requestAnimationFrame(() => {
panel.style.maxHeight = '0px';
panel.classList.remove('is-open');
photo.classList.remove('is-open');
pres.classList.remove('is-open');
});
btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', 'false');
}
// --- Toggle bouton ---
btn.addEventListener('click', function () { btn.addEventListener('click', function () {
const isOpen = pres.classList.toggle('is-open'); const isOpen = btn.getAttribute('aria-expanded') === 'true';
if (isOpen) {
if (photo) photo.classList.toggle('is-open'); closePanel();
} else {
btn.textContent = isOpen openPanel();
? "FERMER LA PRÉSENTATION DE L'ÉQUIPE" }
: "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', isOpen);
}); });
}); });
//////////////end toggle page node projet ////////////////// //////////////end toggle page node projet //////////////////

12
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss
View File

@@ -195,20 +195,20 @@
font-size: 0.6rem; font-size: 0.6rem;
} }
} }
.field_field_equipe_photo, .equipe-panel {
.field_field_equipe_presentation {
overflow: hidden; overflow: hidden;
max-height: 0; max-height: 0;
opacity: 0; opacity: 0;
margin-top: 1rem;
transition: transition:
max-height 1s ease, max-height 1s ease,
opacity 0.8s ease; opacity 0.8s ease;
} }
.field_field_equipe_photo.is-open, .equipe-panel.is-open {
.field_field_equipe_presentation.is-open { // max-height: 1500px;
max-height: 1500px;
opacity: 1; opacity: 1;
} }
.btn-equipe-toggle{ .btn-equipe-toggle{
@@ -222,7 +222,7 @@
margin: auto; margin: auto;
display: flex; display: flex;
border: none; border: none;
margin-top: 1rem; // margin-top: 1rem;
svg{ svg{
display: none; display: none;