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

js header

This commit is contained in:
ouidade 2024-07-10 10:38:41 +02:00
parent 48a928428d
commit c7f5338a71
4 changed files with 37 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@ -419,7 +419,7 @@ header .header:hover + .header_nav_container {
/* Taille définitive du header après l'animation */ /* Taille définitive du header après l'animation */
.header--collapsed { .header--collapsed {
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */ height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 50%; width: 45%;
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */ transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
} }
@ -434,7 +434,7 @@ header .header:hover + .header_nav_container {
.header--collapsed-already { .header--collapsed-already {
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */ height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 50%; width: 45%;
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */ transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
transition: all 0s ease-in-out; transition: all 0s ease-in-out;
} }

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

@ -37,12 +37,15 @@
// }); // });
//////// header //////////// //////// start header ////////////
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header'); const header = document.querySelector('header');
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 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 // Fonction pour démarrer l'animation du logo SVG
function startLogoAnimation() { function startLogoAnimation() {
logo.classList.add('animated'); logo.classList.add('animated');
@ -76,16 +79,8 @@
} }
}); });
}); });
observer.observe(header, { attributes: true }); observer.observe(header, { attributes: true });
});
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement // 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) { if (!isFirstLoad || !isTargetPath) {
@ -99,11 +94,8 @@
}, 5000); }, 5000);
} }
//////////////
// Gestion du scroll pour afficher/masquer le header nav
const headerNavContainer = document.querySelector('.header_nav_container');
const headerLeftContainer = document.querySelector('header');
let lastScrollTop = 0; let lastScrollTop = 0;
let threshold = 100; // Change this value as needed let threshold = 100; // Change this value as needed
let isHidden = false; let isHidden = false;
@ -133,9 +125,9 @@
// Fonction pour ajuster la hauteur du header lors du défilement // Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() { function adjustHeaderHeight() {
if (window.scrollY > 0) { if (window.scrollY > 0) {
headerLeftContainer.classList.add('shrink'); header.classList.add('shrink');
} else { } else {
headerLeftContainer.classList.remove('shrink'); header.classList.remove('shrink');
} }
} }
@ -167,12 +159,12 @@
window.addEventListener('scroll', adjustHeaderHeight); window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop // Mouse events for desktop
headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter); header.addEventListener('mouseenter', handleTouchAndMouseEnter);
headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave); header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices // Touch events for tablets and mobile devices
headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter); header.addEventListener('touchstart', handleTouchAndMouseEnter);
headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave); header.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page // Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) { if (window.pageYOffset <= threshold) {
@ -180,12 +172,13 @@
} else { } else {
slideOut(); slideOut();
} }
}); });
//////// end header ////////////
// /////////////////
//// ancre dans texte au click parragraphe correspondant arrive en dessous du header //// ancre dans texte au click parragraphe correspondant arrive en dessous du header
@ -203,8 +196,7 @@
}); });
//////////////////////// smooth apparition des textes //////////////////////// start script smooth apparition des textes /////////////////
function scrollReaveal(){ function scrollReaveal(){
@ -240,14 +232,15 @@
scrollReaveal(); scrollReaveal();
}); });
//////////////////////// end script smooth apparition des textes /////////////////
//////////////////// start Timeline script ///////////////////////
////////////////// Timeline ///////////////////////
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
let currentSlide = 0; let currentSlide = 0;
//// responsive ///
function getVisibleSlides() { function getVisibleSlides() {
if (window.innerWidth <= 600) { if (window.innerWidth <= 600) {
return 1; // Show 1 slide on small screens return 1; // Show 1 slide on small screens
@ -288,9 +281,6 @@
document.getElementById('arrowPrev').addEventListener('click', prevSlide); document.getElementById('arrowPrev').addEventListener('click', prevSlide);
document.getElementById('arrowNext').addEventListener('click', nextSlide); document.getElementById('arrowNext').addEventListener('click', nextSlide);
// Initialize the first view of the slides
showSlides(currentSlide);
// Update month field to only show the first 3 letters // Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) { document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)'); const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
@ -302,19 +292,7 @@
} }
}); });
// Handle window resize // for each .date element add or remove ::before
window.addEventListener('resize', function() {
showSlides(currentSlide); // Recalculate the slides on resize
});
// });
// Initialize
showSlides(currentSlide);
});
document.addEventListener('DOMContentLoaded', function() {
// Iterate over each .date element
document.querySelectorAll('.date').forEach(function(dateElement) { document.querySelectorAll('.date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2'); const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee'); const yearElement = dateElement.querySelector('.field_field_date_de_annee');
@ -325,9 +303,20 @@
yearElement.classList.add('only'); yearElement.classList.add('only');
} }
}); });
// Handle window resize
window.addEventListener('resize', function() {
showSlides(currentSlide); // Recalculate the slides on resize
});
// });
// Initialize
showSlides(currentSlide);
}); });
//////////////////////// end Timeline script /////////////////////////////////////////////
/////////////////// caracteres body actus///////////////////////// /////////////////// caracteres body actus/////////////////////////

4
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

@ -195,7 +195,7 @@ header{
/* Taille définitive du header après l'animation */ /* Taille définitive du header après l'animation */
.header--collapsed { .header--collapsed {
height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */ height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
width: 50%; width: 45%;
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */ transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
.header_left_container{ .header_left_container{
@ -210,7 +210,7 @@ header{
} }
.header--collapsed-already{ .header--collapsed-already{
height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */ height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
width: 50%; width: 45%;
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */ transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
transition: all 0s ease-in-out; transition: all 0s ease-in-out;
.header_left_container{ .header_left_container{