js timelin et header séparé
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -355,99 +147,11 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
//////////////////////// 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 //////////////////////////
|
||||
|
||||
$(document).ready(function(){
|
||||
let diapohome = $('.config_pages--type--diaporama-home .diaporama');
|
||||
|
||||
if (diapohome.length) {
|
||||
@@ -1119,6 +823,314 @@ document.addEventListener('keydown', (e) => {
|
||||
|
||||
//////////////// 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.
|
||||
!function() {
|
||||
"use strict";
|
||||
|
||||
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
205
web/themes/custom/quartiers_de_demain/src/assets/js/header.js
Normal 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 ////////////
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -297,99 +89,11 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
//////////////////////// 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 //////////////////////////
|
||||
|
||||
$(document).ready(function(){
|
||||
let diapohome = $('.config_pages--type--diaporama-home .diaporama');
|
||||
|
||||
if (diapohome.length) {
|
||||
|
||||
@@ -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);
|
||||
@@ -10,6 +10,8 @@ let config = {
|
||||
// "./src/assets/js/animated_logo.js",
|
||||
"./src/assets/js/animated_formes.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/fonts/*",
|
||||
// "./src/assets/css/animated_logo.css",
|
||||
|
||||
Reference in New Issue
Block a user