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 */
.header--collapsed {
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 */
transition: all 1s ease-in-out;
}
@ -434,7 +434,7 @@ header .header:hover + .header_nav_container {
.header--collapsed-already {
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 */
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() {
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 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');
@ -76,16 +79,8 @@
}
});
});
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
if (!isFirstLoad || !isTargetPath) {
@ -99,11 +94,8 @@
}, 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 threshold = 100; // Change this value as needed
let isHidden = false;
@ -133,9 +125,9 @@
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
headerLeftContainer.classList.add('shrink');
header.classList.add('shrink');
} else {
headerLeftContainer.classList.remove('shrink');
header.classList.remove('shrink');
}
}
@ -167,12 +159,12 @@
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);
headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave);
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter);
headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave);
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) {
@ -180,12 +172,13 @@
} else {
slideOut();
}
});
//////// end 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(){
@ -240,14 +232,15 @@
scrollReaveal();
});
//////////////////////// end script smooth apparition des textes /////////////////
////////////////// Timeline ///////////////////////
//////////////////// start Timeline script ///////////////////////
document.addEventListener('DOMContentLoaded', function() {
let currentSlide = 0;
//// responsive ///
function getVisibleSlides() {
if (window.innerWidth <= 600) {
return 1; // Show 1 slide on small screens
@ -288,9 +281,6 @@
document.getElementById('arrowPrev').addEventListener('click', prevSlide);
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
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
@ -302,19 +292,7 @@
}
});
// Handle window resize
window.addEventListener('resize', function() {
showSlides(currentSlide); // Recalculate the slides on resize
});
// });
// Initialize
showSlides(currentSlide);
});
document.addEventListener('DOMContentLoaded', function() {
// Iterate over each .date element
// for each .date element add or remove ::before
document.querySelectorAll('.date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
@ -325,9 +303,20 @@
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/////////////////////////

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 */
.header--collapsed {
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 */
transition: all 1s ease-in-out;
.header_left_container{
@ -210,7 +210,7 @@ header{
}
.header--collapsed-already{
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 */
transition: all 0s ease-in-out;
.header_left_container{