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

js timelin et header séparé

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-11-27 18:43:33 +01:00
parent e3a31427d3
commit 7ba0a0ec05
6 changed files with 609 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,214 +74,6 @@ var __webpack_exports__ = {};
//////// start header ////////////
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header[role="banner"]');
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
const headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// Fonction pour démarrer l'animation du logo SVG
function startLogoAnimation() {
logo.classList.add('animated');
}
// Fonction pour arrêter l'animation du logo SVG
function stopLogoAnimation() {
logo.classList.remove('animated');
}
// Vérifier si le header a la classe header--collapse
function checkHeaderCollapse() {
if (header.classList.contains('header--collapsed')) {
stopLogoAnimation();
} else if (header.classList.contains('header--collapsed-already')) {
stopLogoAnimation();
} else {
startLogoAnimation();
}
}
// Appeler la fonction au chargement initial
checkHeaderCollapse();
// Observer les changements de classe sur le header
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
checkHeaderCollapse();
}
});
});
observer.observe(header, { attributes: true });
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
if (!isFirstLoad || !isTargetPath) {
header.classList.add('header--collapsed-already');
// logo.classList.remove('animated');
stopLogoAnimation();
// } else {
// // Sinon, appliquer la transition après un délai
// setTimeout(() => {
// header.classList.add('header--collapsed');
// }, 5000);
// }
} else {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
let isHidden = false;
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
// headerNavContainer.style.display = 'block';
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';
};
isHidden = true;
}
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
function handleTouchAndMouseEnter() {
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
} else {
if (window.innerWidth < 811) {
slideUp();
} else {
slideIn();
}
}
});
//////// end header ////////////
(function($, window) { (function($, window) {
@@ -355,99 +147,11 @@ document.addEventListener('DOMContentLoaded', function() {
//////////////////////// end script smooth apparition des textes ///////////////// //////////////////////// end script smooth apparition des textes /////////////////
// //////////////////// start Timeline script ///////////////////////
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) {
const monthText = monthField.textContent.trim();
if (monthText === "juillet") {
monthField.textContent = monthText.slice(0, 4);
monthField.classList.add('after');
} else if (monthText === "juin") {
monthField.textContent = monthText.slice(0, 4);
} else if (monthText.length > 3) {
monthField.textContent = monthText.slice(0, 3);
monthField.classList.add('after');
}
}
});
// Fonction pour ajouter ou retirer la classe .only
function updateDateClasses() {
document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
if (date2Element && !date2Element.textContent.trim()) {
if (yearElement) {
yearElement.classList.add('only');
}
} else {
if (yearElement) {
yearElement.classList.remove('only');
}
}
});
}
// Exécuter la fonction une première fois pour le contenu déjà présent
updateDateClasses();
// MutationObserver pour surveiller les changements dans le DOM
const observer = new MutationObserver(function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
updateDateClasses();
}
}
});
$(document).ready(function(){
// ////////////////////// start calendrier home /////////////////////////////////
// Aller au 9e élément à l'initialisation
$('.__timeline-content').on('init', function(event, slick){
slick.slickGoTo(11); // Index 8 = 9e item
});
$('.__timeline-content').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: false,
draggable: true,
infinite: false,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: false,
infinite: false,
}
}]
});
console.log('salut slick calendrier');
//////////////////////// end calendrier home /////////////////////////////////
//////////////////////// end Timeline script /////////////////////////////////////////////
//////////// start slideshow images home ////////////////////////// //////////// start slideshow images home //////////////////////////
$(document).ready(function(){
let diapohome = $('.config_pages--type--diaporama-home .diaporama'); let diapohome = $('.config_pages--type--diaporama-home .diaporama');
if (diapohome.length) { if (diapohome.length) {
@@ -1119,6 +823,314 @@ document.addEventListener('keydown', (e) => {
//////////////// end lightbox galerie image page site//////////////////////// //////////////// end lightbox galerie image page site////////////////////////
}(); }();
// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
!function() {
/*!*********************************!*\
!*** ./src/assets/js/header.js ***!
\*********************************/
//////// start header ////////////
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header[role="banner"]');
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
const headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// Fonction pour démarrer l'animation du logo SVG
function startLogoAnimation() {
logo.classList.add('animated');
}
// Fonction pour arrêter l'animation du logo SVG
function stopLogoAnimation() {
logo.classList.remove('animated');
}
// Vérifier si le header a la classe header--collapse
function checkHeaderCollapse() {
if (header.classList.contains('header--collapsed')) {
stopLogoAnimation();
} else if (header.classList.contains('header--collapsed-already')) {
stopLogoAnimation();
} else {
startLogoAnimation();
}
}
// Appeler la fonction au chargement initial
checkHeaderCollapse();
// Observer les changements de classe sur le header
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
checkHeaderCollapse();
}
});
});
observer.observe(header, { attributes: true });
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
if (!isFirstLoad || !isTargetPath) {
header.classList.add('header--collapsed-already');
// logo.classList.remove('animated');
stopLogoAnimation();
// } else {
// // Sinon, appliquer la transition après un délai
// setTimeout(() => {
// header.classList.add('header--collapsed');
// }, 5000);
// }
} else {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
let isHidden = false;
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
// headerNavContainer.style.display = 'block';
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';
};
isHidden = true;
}
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
function handleTouchAndMouseEnter() {
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
} else {
if (window.innerWidth < 811) {
slideUp();
} else {
slideIn();
}
}
});
//////// end header ////////////
}();
// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
!function() {
/*!***********************************!*\
!*** ./src/assets/js/timeline.js ***!
\***********************************/
(function($, window) {
// //////////////////// start Timeline script ///////////////////////
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) {
const monthText = monthField.textContent.trim();
if (monthText === "juillet") {
monthField.textContent = monthText.slice(0, 4);
monthField.classList.add('after');
} else if (monthText === "juin") {
monthField.textContent = monthText.slice(0, 4);
} else if (monthText.length > 3) {
monthField.textContent = monthText.slice(0, 3);
monthField.classList.add('after');
}
}
});
// Fonction pour ajouter ou retirer la classe .only
function updateDateClasses() {
document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
if (date2Element && !date2Element.textContent.trim()) {
if (yearElement) {
yearElement.classList.add('only');
}
} else {
if (yearElement) {
yearElement.classList.remove('only');
}
}
});
}
// Exécuter la fonction une première fois pour le contenu déjà présent
updateDateClasses();
// MutationObserver pour surveiller les changements dans le DOM
const observer = new MutationObserver(function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
updateDateClasses();
}
}
});
$(document).ready(function(){
// ////////////////////// start calendrier home /////////////////////////////////
// Aller au 9e élément à l'initialisation
$('.__timeline-content').on('init', function(event, slick){
slick.slickGoTo(11); // Index 8 = 9e item
});
$('.__timeline-content').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: false,
draggable: true,
infinite: false,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: false,
infinite: false,
}
}]
});
console.log('salut slick calendrier');
});
//////////////////////// end calendrier home /////////////////////////////////
//////////////////////// end Timeline script /////////////////////////////////////////////
})(jQuery, window);
}();
// This entry need to be wrapped in an IIFE because it need to be in strict mode. // This entry need to be wrapped in an IIFE because it need to be in strict mode.
!function() { !function() {
"use strict"; "use strict";

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

205
web/themes/custom/quartiers_de_demain/src/assets/js/header.js Normal file
View File

@@ -0,0 +1,205 @@
//////// start header ////////////
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header[role="banner"]');
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
const headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// Fonction pour démarrer l'animation du logo SVG
function startLogoAnimation() {
logo.classList.add('animated');
}
// Fonction pour arrêter l'animation du logo SVG
function stopLogoAnimation() {
logo.classList.remove('animated');
}
// Vérifier si le header a la classe header--collapse
function checkHeaderCollapse() {
if (header.classList.contains('header--collapsed')) {
stopLogoAnimation();
} else if (header.classList.contains('header--collapsed-already')) {
stopLogoAnimation();
} else {
startLogoAnimation();
}
}
// Appeler la fonction au chargement initial
checkHeaderCollapse();
// Observer les changements de classe sur le header
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
checkHeaderCollapse();
}
});
});
observer.observe(header, { attributes: true });
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
if (!isFirstLoad || !isTargetPath) {
header.classList.add('header--collapsed-already');
// logo.classList.remove('animated');
stopLogoAnimation();
// } else {
// // Sinon, appliquer la transition après un délai
// setTimeout(() => {
// header.classList.add('header--collapsed');
// }, 5000);
// }
} else {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
let isHidden = false;
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
// headerNavContainer.style.display = 'block';
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';
};
isHidden = true;
}
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
function handleTouchAndMouseEnter() {
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
} else {
if (window.innerWidth < 811) {
slideUp();
} else {
slideIn();
}
}
});
//////// end header ////////////

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

@@ -16,214 +16,6 @@
//////// start header ////////////
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header[role="banner"]');
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
const headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// Fonction pour démarrer l'animation du logo SVG
function startLogoAnimation() {
logo.classList.add('animated');
}
// Fonction pour arrêter l'animation du logo SVG
function stopLogoAnimation() {
logo.classList.remove('animated');
}
// Vérifier si le header a la classe header--collapse
function checkHeaderCollapse() {
if (header.classList.contains('header--collapsed')) {
stopLogoAnimation();
} else if (header.classList.contains('header--collapsed-already')) {
stopLogoAnimation();
} else {
startLogoAnimation();
}
}
// Appeler la fonction au chargement initial
checkHeaderCollapse();
// Observer les changements de classe sur le header
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class') {
checkHeaderCollapse();
}
});
});
observer.observe(header, { attributes: true });
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
if (!isFirstLoad || !isTargetPath) {
header.classList.add('header--collapsed-already');
// logo.classList.remove('animated');
stopLogoAnimation();
// } else {
// // Sinon, appliquer la transition après un délai
// setTimeout(() => {
// header.classList.add('header--collapsed');
// }, 5000);
// }
} else {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
let isHidden = false;
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
// headerNavContainer.style.display = 'block';
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';
};
isHidden = true;
}
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
function handleTouchAndMouseEnter() {
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
} else {
if (window.innerWidth < 811) {
slideUp();
} else {
slideIn();
}
}
});
//////// end header ////////////
(function($, window) { (function($, window) {
@@ -297,99 +89,11 @@ document.addEventListener('DOMContentLoaded', function() {
//////////////////////// end script smooth apparition des textes ///////////////// //////////////////////// end script smooth apparition des textes /////////////////
// //////////////////// start Timeline script ///////////////////////
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) {
const monthText = monthField.textContent.trim();
if (monthText === "juillet") {
monthField.textContent = monthText.slice(0, 4);
monthField.classList.add('after');
} else if (monthText === "juin") {
monthField.textContent = monthText.slice(0, 4);
} else if (monthText.length > 3) {
monthField.textContent = monthText.slice(0, 3);
monthField.classList.add('after');
}
}
});
// Fonction pour ajouter ou retirer la classe .only
function updateDateClasses() {
document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
if (date2Element && !date2Element.textContent.trim()) {
if (yearElement) {
yearElement.classList.add('only');
}
} else {
if (yearElement) {
yearElement.classList.remove('only');
}
}
});
}
// Exécuter la fonction une première fois pour le contenu déjà présent
updateDateClasses();
// MutationObserver pour surveiller les changements dans le DOM
const observer = new MutationObserver(function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
updateDateClasses();
}
}
});
$(document).ready(function(){
// ////////////////////// start calendrier home /////////////////////////////////
// Aller au 9e élément à l'initialisation
$('.__timeline-content').on('init', function(event, slick){
slick.slickGoTo(11); // Index 8 = 9e item
});
$('.__timeline-content').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: false,
draggable: true,
infinite: false,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: false,
infinite: false,
}
}]
});
console.log('salut slick calendrier');
//////////////////////// end calendrier home /////////////////////////////////
//////////////////////// end Timeline script /////////////////////////////////////////////
//////////// start slideshow images home ////////////////////////// //////////// start slideshow images home //////////////////////////
$(document).ready(function(){
let diapohome = $('.config_pages--type--diaporama-home .diaporama'); let diapohome = $('.config_pages--type--diaporama-home .diaporama');
if (diapohome.length) { if (diapohome.length) {

91
web/themes/custom/quartiers_de_demain/src/assets/js/timeline.js Normal file
View File

@@ -0,0 +1,91 @@
(function($, window) {
// //////////////////// start Timeline script ///////////////////////
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) {
const monthText = monthField.textContent.trim();
if (monthText === "juillet") {
monthField.textContent = monthText.slice(0, 4);
monthField.classList.add('after');
} else if (monthText === "juin") {
monthField.textContent = monthText.slice(0, 4);
} else if (monthText.length > 3) {
monthField.textContent = monthText.slice(0, 3);
monthField.classList.add('after');
}
}
});
// Fonction pour ajouter ou retirer la classe .only
function updateDateClasses() {
document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
if (date2Element && !date2Element.textContent.trim()) {
if (yearElement) {
yearElement.classList.add('only');
}
} else {
if (yearElement) {
yearElement.classList.remove('only');
}
}
});
}
// Exécuter la fonction une première fois pour le contenu déjà présent
updateDateClasses();
// MutationObserver pour surveiller les changements dans le DOM
const observer = new MutationObserver(function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
updateDateClasses();
}
}
});
$(document).ready(function(){
// ////////////////////// start calendrier home /////////////////////////////////
// Aller au 9e élément à l'initialisation
$('.__timeline-content').on('init', function(event, slick){
slick.slickGoTo(11); // Index 8 = 9e item
});
$('.__timeline-content').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
centerMode: false,
draggable: true,
infinite: false,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
centerMode: false,
infinite: false,
}
}]
});
console.log('salut slick calendrier');
});
//////////////////////// end calendrier home /////////////////////////////////
//////////////////////// end Timeline script /////////////////////////////////////////////
})(jQuery, window);

2
web/themes/custom/quartiers_de_demain/webpack.config.js
View File

@@ -10,6 +10,8 @@ let config = {
// "./src/assets/js/animated_logo.js", // "./src/assets/js/animated_logo.js",
"./src/assets/js/animated_formes.js", "./src/assets/js/animated_formes.js",
"./src/assets/js/lightbox.js", "./src/assets/js/lightbox.js",
"./src/assets/js/header.js",
"./src/assets/js/timeline.js",
"./src/assets/scss/quartiers_de_demain.scss", "./src/assets/scss/quartiers_de_demain.scss",
// "./src/assets/fonts/*", // "./src/assets/fonts/*",
// "./src/assets/css/animated_logo.css", // "./src/assets/css/animated_logo.css",