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

annule max-height presentation en js

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-12-01 09:50:04 +01:00
parent 811e6b5ca8
commit 02231b8e17
5 changed files with 147 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -485,79 +485,76 @@ $(document).ready(function () {
/////////////////// start voir plus... actualite dans /actualites & /home //////////////////// /////////////////// start voir plus... actualite dans /actualites & /home ////////////////////
if ($("#actualites").length > 0 || $("#home").length > 0) { if ($("#actualites" ).length > 0 || $("#home").length > 0) {
$(".node-type-actualite").each(function () { $(".node-type-actualite").each(function () {
let article = $(this); let article = $(this);
let body = article.find(".field_body"); let body = article.find(".field_body");
let links = article.find(".field_field_liens"); let links = article.find(".field_field_liens");
body.hide(); body.hide();
links.hide(); links.hide();
let toggleButton = $("<button>") let toggleButton = $("<button>")
.addClass("toggle-actualite") .addClass("toggle-actualite")
.insertAfter(article); .insertAfter(article);
// Fonction commune toggleButton.on("click", function () {
function toggleActu () { body.slideToggle();
body.slideToggle(); links.slideToggle();
links.slideToggle(); $(this).toggleClass("open");
toggleButton.toggleClass("open"); });
}
// Clic sur la flèche // Clic sur la flèche
toggleButton.on("click", function (e) { toggleButton.on("click", function (e) {
e.stopPropagation(); e.stopPropagation(); // évite des conflits éventuels
toggleActu(); toggleActu();
});
// Clic n'importe où sur le node
article.on("click", function (e) {
// Optionnel : ne pas toggle si on clique sur un lien
if ($(e.target).closest("a").length) {
return;
}
toggleActu();
});
}); });
// slimselect
// Clic n'importe où sur le node // duplicated due to embeded view (archives)
article.on("click", function (e) { let actu_type_select = new SlimSelect({
// Ne rien faire si clic sur un lien select: '#edit-field-type-d-actualite-target-id--2',
if ($(e.target).closest("a").length) { settings:{
return; placeholderText: 'choisir',
searchPlaceholder: 'choisir'
} }
toggleActu(); })
}); let actu_type_select2 = new SlimSelect({
}); select: '#edit-field-type-d-actualite-target-id--3',
settings:{
// slimselect placeholderText: 'choisir',
// duplicated due to embeded view (archives) searchPlaceholder: 'choisir'
let actu_type_select = new SlimSelect({ }
select: '#edit-field-type-d-actualite-target-id--2', })
settings:{ let actu_site_select = new SlimSelect({
placeholderText: 'choisir', select: '#edit-field-site-target-id-verf--2',
searchPlaceholder: 'choisir' settings:{
} placeholderText: 'choisir',
}) searchPlaceholder: 'choisir'
let actu_type_select2 = new SlimSelect({ }
select: '#edit-field-type-d-actualite-target-id--3', })
settings:{ let actu_site_select2 = new SlimSelect({
placeholderText: 'choisir', select: '#edit-field-site-target-id-verf--3',
searchPlaceholder: 'choisir' settings:{
} placeholderText: 'choisir',
}) searchPlaceholder: 'choisir'
let actu_site_select = new SlimSelect({ }
select: '#edit-field-site-target-id-verf--2', })
settings:{ }
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_site_select2 = new SlimSelect({
select: '#edit-field-site-target-id-verf--3',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
}
/////////////////// end voir plus... actualite dans /actualites & /home //////////////////// /////////////////// end voir plus... actualite dans /actualites & /home ////////////////////
/////////////// start class à view-rows-ressources //////// /////////////// start class à view-rows-ressources ////////
$(".view-rows-wrapper").each(function () { $(".view-rows-wrapper").each(function () {
@@ -605,74 +602,35 @@ document.addEventListener('DOMContentLoaded', function () {
if (!pres) return; 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 // 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 bloc présentation
pres.insertAdjacentElement('afterend', btn); pres.insertAdjacentElement('afterend', btn);
// Ligne de séparation après le bouton // 3. Ajout de la ligne 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);
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 // Toggle
btn.addEventListener('click', function () { btn.addEventListener('click', function () {
const isOpen = btn.getAttribute('aria-expanded') === 'true'; const isOpen = pres.classList.toggle('is-open');
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

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

@@ -4478,6 +4478,7 @@ 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_photo.is-open,
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_presentation.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 {

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

@@ -427,79 +427,76 @@ $(document).ready(function () {
/////////////////// start voir plus... actualite dans /actualites & /home //////////////////// /////////////////// start voir plus... actualite dans /actualites & /home ////////////////////
if ($("#actualites").length > 0 || $("#home").length > 0) { if ($("#actualites" ).length > 0 || $("#home").length > 0) {
$(".node-type-actualite").each(function () { $(".node-type-actualite").each(function () {
let article = $(this); let article = $(this);
let body = article.find(".field_body"); let body = article.find(".field_body");
let links = article.find(".field_field_liens"); let links = article.find(".field_field_liens");
body.hide(); body.hide();
links.hide(); links.hide();
let toggleButton = $("<button>") let toggleButton = $("<button>")
.addClass("toggle-actualite") .addClass("toggle-actualite")
.insertAfter(article); .insertAfter(article);
// Fonction commune toggleButton.on("click", function () {
function toggleActu () { body.slideToggle();
body.slideToggle(); links.slideToggle();
links.slideToggle(); $(this).toggleClass("open");
toggleButton.toggleClass("open"); });
}
// Clic sur la flèche // Clic sur la flèche
toggleButton.on("click", function (e) { toggleButton.on("click", function (e) {
e.stopPropagation(); e.stopPropagation(); // évite des conflits éventuels
toggleActu(); toggleActu();
});
// Clic n'importe où sur le node
article.on("click", function (e) {
// Optionnel : ne pas toggle si on clique sur un lien
if ($(e.target).closest("a").length) {
return;
}
toggleActu();
});
}); });
// slimselect
// Clic n'importe où sur le node // duplicated due to embeded view (archives)
article.on("click", function (e) { let actu_type_select = new SlimSelect({
// Ne rien faire si clic sur un lien select: '#edit-field-type-d-actualite-target-id--2',
if ($(e.target).closest("a").length) { settings:{
return; placeholderText: 'choisir',
searchPlaceholder: 'choisir'
} }
toggleActu(); })
}); let actu_type_select2 = new SlimSelect({
}); select: '#edit-field-type-d-actualite-target-id--3',
settings:{
// slimselect placeholderText: 'choisir',
// duplicated due to embeded view (archives) searchPlaceholder: 'choisir'
let actu_type_select = new SlimSelect({ }
select: '#edit-field-type-d-actualite-target-id--2', })
settings:{ let actu_site_select = new SlimSelect({
placeholderText: 'choisir', select: '#edit-field-site-target-id-verf--2',
searchPlaceholder: 'choisir' settings:{
} placeholderText: 'choisir',
}) searchPlaceholder: 'choisir'
let actu_type_select2 = new SlimSelect({ }
select: '#edit-field-type-d-actualite-target-id--3', })
settings:{ let actu_site_select2 = new SlimSelect({
placeholderText: 'choisir', select: '#edit-field-site-target-id-verf--3',
searchPlaceholder: 'choisir' settings:{
} placeholderText: 'choisir',
}) searchPlaceholder: 'choisir'
let actu_site_select = new SlimSelect({ }
select: '#edit-field-site-target-id-verf--2', })
settings:{ }
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
let actu_site_select2 = new SlimSelect({
select: '#edit-field-site-target-id-verf--3',
settings:{
placeholderText: 'choisir',
searchPlaceholder: 'choisir'
}
})
}
/////////////////// end voir plus... actualite dans /actualites & /home //////////////////// /////////////////// end voir plus... actualite dans /actualites & /home ////////////////////
/////////////// start class à view-rows-ressources //////// /////////////// start class à view-rows-ressources ////////
$(".view-rows-wrapper").each(function () { $(".view-rows-wrapper").each(function () {
@@ -547,74 +544,35 @@ document.addEventListener('DOMContentLoaded', function () {
if (!pres) return; 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 // 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 bloc présentation
pres.insertAdjacentElement('afterend', btn); pres.insertAdjacentElement('afterend', btn);
// Ligne de séparation après le bouton // 3. Ajout de la ligne 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);
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 // Toggle
btn.addEventListener('click', function () { btn.addEventListener('click', function () {
const isOpen = btn.getAttribute('aria-expanded') === 'true'; const isOpen = pres.classList.toggle('is-open');
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/src/assets/scss/pages/node-type-projet.scss
View File

@@ -207,7 +207,7 @@
.field_field_equipe_photo.is-open, .field_field_equipe_photo.is-open,
.field_field_equipe_presentation.is-open { .field_field_equipe_presentation.is-open {
// max-height: 1500px; max-height: 1500px;
opacity: 1; opacity: 1;
} }