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

max-height presentation en js

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-12-01 09:37:55 +01:00
parent fa8e32bef9
commit 811e6b5ca8
5 changed files with 110 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -605,35 +605,74 @@ document.addEventListener('DOMContentLoaded', function () {
if (!pres) return;
// On s’assure que le bloc est animé via max-height
pres.style.overflow = 'hidden';
pres.style.maxHeight = '0px';
// 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);
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);
// Ligne de séparation après le bouton
const separator = document.createElement('div');
separator.className = 'equipe-separator';
btn.insertAdjacentElement('afterend', separator);
function openPanel() {
pres.classList.add('is-open');
if (photo) photo.classList.add('is-open');
// On force le navigateur à appliquer la classe avant de mesurer
requestAnimationFrame(() => {
// S’assurer que le bloc n’est pas en display:none via le CSS
// Si tu veux être ultra safe :
pres.style.maxHeight = 'none'; // on enlève l’ancienne contrainte
const h = pres.scrollHeight; // hauteur réelle du contenu
pres.style.maxHeight = '0px'; // on repart de 0 pour l’animation
requestAnimationFrame(() => {
pres.style.maxHeight = h + 'px';
});
});
btn.textContent = "FERMER LA PRÉSENTATION DE L'ÉQUIPE";
btn.setAttribute('aria-expanded', 'true');
}
function closePanel() {
// Hauteur actuelle (contenu visible)
const h = pres.scrollHeight;
pres.style.maxHeight = h + 'px';
requestAnimationFrame(() => {
pres.style.maxHeight = '0px';
pres.classList.remove('is-open');
if (photo) photo.classList.remove('is-open');
});
btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', 'false');
}
// Toggle
btn.addEventListener('click', function () {
const isOpen = pres.classList.toggle('is-open');
const isOpen = btn.getAttribute('aria-expanded') === 'true';
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);
if (isOpen) {
closePanel();
} else {
openPanel();
}
});
});
//////////////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

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

@@ -4478,7 +4478,6 @@ body {
}
.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 .field_field_equipe_presentation.is-open {
max-height: 1500px;
opacity: 1;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle {
@@ -4492,6 +4491,7 @@ body {
margin: auto;
display: flex;
border: none;
margin-top: 1rem;
margin-bottom: 1rem;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle svg {

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

@@ -547,35 +547,74 @@ document.addEventListener('DOMContentLoaded', function () {
if (!pres) return;
// On s’assure que le bloc est animé via max-height
pres.style.overflow = 'hidden';
pres.style.maxHeight = '0px';
// 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);
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);
// Ligne de séparation après le bouton
const separator = document.createElement('div');
separator.className = 'equipe-separator';
btn.insertAdjacentElement('afterend', separator);
function openPanel() {
pres.classList.add('is-open');
if (photo) photo.classList.add('is-open');
// On force le navigateur à appliquer la classe avant de mesurer
requestAnimationFrame(() => {
// S’assurer que le bloc n’est pas en display:none via le CSS
// Si tu veux être ultra safe :
pres.style.maxHeight = 'none'; // on enlève l’ancienne contrainte
const h = pres.scrollHeight; // hauteur réelle du contenu
pres.style.maxHeight = '0px'; // on repart de 0 pour l’animation
requestAnimationFrame(() => {
pres.style.maxHeight = h + 'px';
});
});
btn.textContent = "FERMER LA PRÉSENTATION DE L'ÉQUIPE";
btn.setAttribute('aria-expanded', 'true');
}
function closePanel() {
// Hauteur actuelle (contenu visible)
const h = pres.scrollHeight;
pres.style.maxHeight = h + 'px';
requestAnimationFrame(() => {
pres.style.maxHeight = '0px';
pres.classList.remove('is-open');
if (photo) photo.classList.remove('is-open');
});
btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', 'false');
}
// Toggle
btn.addEventListener('click', function () {
const isOpen = pres.classList.toggle('is-open');
const isOpen = btn.getAttribute('aria-expanded') === 'true';
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);
if (isOpen) {
closePanel();
} else {
openPanel();
}
});
});
//////////////end toggle page node projet //////////////////

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

@@ -207,7 +207,7 @@
.field_field_equipe_photo.is-open,
.field_field_equipe_presentation.is-open {
max-height: 1500px;
// max-height: 1500px;
opacity: 1;
}
@@ -222,8 +222,8 @@
margin: auto;
display: flex;
border: none;
// padding-top: 0.3rem;
// padding-bottom: 0.3rem;
margin-top: 1rem;
svg{
display: none;
}
@@ -232,7 +232,6 @@
content: url("../img/arrow-down-white.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
// padding-bottom: 0.2rem;
height: 12px;
}
margin-bottom: 1rem;
@@ -240,6 +239,7 @@
}
.btn-equipe-toggle[aria-expanded="true"]::after {
content: url("../img/arrow-up-white.svg");
}
.equipe-separator {
border-bottom: 1px solid black;