2023-11-30 17:33:32 +01:00
/ * *
* @ file
* erabletheme behaviors .
* /
( function ( Drupal ) {
'use strict' ;
Drupal . behaviors . erabletheme = {
attach : function ( context , settings ) {
2023-12-15 20:04:59 +01:00
//
// Carrousel
//
2023-12-06 17:06:45 +01:00
( function ( $ , window ) {
let slickEl = $ ( '.slick-container' ) . children ( ) . first ( ) . children ( ) . first ( ) . children ( ) . first ( ) . children ( ) . first ( ) ;
$ ( slickEl ) . slick ( {
dots : true ,
appendDots : $ ( '#carousel_dots' )
} ) ;
} ) ( jQuery , window ) ;
2023-12-14 06:01:09 +01:00
//
// Toggle du menu
//
2023-12-06 05:01:23 +01:00
const hamburgerBtn = document . getElementById ( "hamburger" ) ;
2023-12-14 06:01:09 +01:00
const hamburgerIcon = document . querySelector ( ".burger-icon" ) ;
2023-12-06 05:01:23 +01:00
const menu = hamburgerBtn . nextElementSibling ;
2023-12-14 06:01:09 +01:00
const menuItems = menu . children ;
const opacityDelay = 50 ;
2023-12-17 16:49:23 +01:00
let inTransition = false ;
2023-12-14 06:01:09 +01:00
function toggleMenuItems ( action ) {
let delay = opacityDelay ;
for ( let i = 0 ; i < menuItems . length ; i ++ ) {
setTimeout ( ( ) => {
if ( action === 'show' ) {
menuItems [ i ] . classList . add ( 'visible' ) ;
} else if ( action === 'hide' ) {
menuItems [ menuItems . length - i - 1 ] . classList . remove ( 'visible' ) ;
}
} , delay ) ;
delay += opacityDelay ;
}
}
2023-12-15 20:04:59 +01:00
2023-12-06 05:01:23 +01:00
// Toggle menu visibility on hamburger click
hamburgerBtn . addEventListener ( "click" , function ( event ) {
event . stopPropagation ( ) ;
2023-12-17 16:49:23 +01:00
if ( ! inTransition ) {
inTransition = true ;
hamburgerIcon . classList . toggle ( 'open' ) ;
if ( menu . classList . contains ( 'active' ) ) {
setTimeout ( ( ) => {
menu . style . display = "none" ;
} , 700 ) ;
toggleMenuItems ( 'hide' ) ;
} else {
menu . style . display = "flex" ;
toggleMenuItems ( 'show' ) ;
}
2023-12-14 06:01:09 +01:00
setTimeout ( ( ) => {
2023-12-17 16:49:23 +01:00
menu . classList . toggle ( "active" ) ;
} , 1 ) ;
setTimeout ( ( ) => {
inTransition = false ;
2023-12-14 06:01:09 +01:00
} , 700 ) ;
}
2023-12-17 16:49:23 +01:00
2023-12-06 05:01:23 +01:00
} ) ;
// Close menu when clicking outside of the menu
document . addEventListener ( "click" , function ( event ) {
const isHamburgerClicked = event . target === hamburgerBtn ;
2023-12-14 06:01:09 +01:00
const isMenuClicked = event . target === menu || event . target . parentElement === menu ;
2023-12-17 16:49:23 +01:00
if ( ! isMenuClicked && ! isHamburgerClicked && ! inTransition ) {
inTransition = true ;
2023-12-14 06:01:09 +01:00
hamburgerIcon . classList . remove ( 'open' ) ;
2023-12-06 05:01:23 +01:00
menu . classList . remove ( "active" ) ;
2023-12-14 06:01:09 +01:00
toggleMenuItems ( 'hide' ) ;
2023-12-15 20:04:59 +01:00
setTimeout ( ( ) => {
menu . style . display = "none" ;
2023-12-17 16:49:23 +01:00
inTransition = false ;
2023-12-15 20:04:59 +01:00
} , 700 ) ;
2023-12-06 05:01:23 +01:00
}
} ) ;
2023-12-15 20:04:59 +01:00
//
// Fixed links
//
let fluoButtons ;
if ( document . querySelector ( '.actu_full' ) ) {
fluoButtons = document . querySelectorAll ( '.liens_fixed > div > div:nth-of-type(2):not(.visually-hidden), .file_fixed > div > .visually-hidden + div > div' ) ;
} else {
fluoButtons = document . querySelectorAll ( '.liens_fixed > div > div:not(.visually-hidden), .file_fixed > div > div' ) ;
}
let footer = document . querySelector ( '#footer_top' ) ;
function positionFluoLinks ( ) {
for ( let i = fluoButtons . length ; i > 0 ; i -- ) {
let prevButtonBottom = fluoButtons [ i ] ? parseInt ( fluoButtons [ i ] . style . bottom ) : 0 ;
let prevButtonHeight = fluoButtons [ i ] ? fluoButtons [ i ] . offsetHeight : 0 ;
if ( footer . offsetTop < window . innerHeight + window . scrollY && i === fluoButtons . length ) {
fluoButtons [ i - 1 ] . style . bottom = ` ${ window . innerHeight - footer . offsetTop + window . scrollY + 30 } px ` ;
} else {
fluoButtons [ i - 1 ] . style . bottom = i === fluoButtons . length ? '30px' : ` ${ prevButtonBottom + prevButtonHeight + 15 } px ` ;
}
}
}
if ( document . querySelector ( '.fullpage' ) ) {
positionFluoLinks ( ) ;
document . addEventListener ( 'scroll' , ( ) => {
positionFluoLinks ( ) ;
} ) ;
window . addEventListener ( 'resize' , ( ) => {
positionFluoLinks ( ) ;
} ) ;
}
//
// Ajouter les logos réseaux sociaux dans le menu togglable
//
let socials = document . querySelector ( '.social-media-links--platforms' ) ;
let socialsClone = socials . cloneNode ( true ) ;
socialsClone . id = 'socials-in-menu-wrapper' ;
let menuContainer = document . querySelector ( '#hamburger + ul' ) ;
let socialsContainer = document . createElement ( 'li' ) ;
socialsContainer . append ( socialsClone ) ;
menuContainer . append ( socialsContainer ) ;
2023-12-20 06:48:35 +01:00
//
// Effets parallax
//
let ornements , scrollHeight ;
function getElementsAndPositions ( ) {
scrollHeight = document . body . scrollHeight ;
ornements = {
topUnderFirst : {
el : document . querySelector ( '.ornements_top_under > div:first-of-type' ) ,
values : window . innerWidth < 1080 ? { left : - 45 , top : - 3 } : { left : - 50 , top : 1 } ,
mobileValues : { left : - 45 , top : - 3 }
} ,
topUnderSecond : {
el : document . querySelector ( '.ornements_top_under > div:last-of-type' ) ,
values : window . innerWidth < 1080 ? { left : - 60 , top : 0 } : { left : - 56.5 , top : 6 } ,
mobileValues : { left : - 60 , top : 0 }
} ,
topOver : {
el : document . querySelector ( '.ornements_top_over' ) ,
values : { left : - 40 , top : - 16 } ,
mobileValues : { right : - 55 , top : - 5 }
} ,
bottomFirst : {
el : document . querySelector ( '.ornements_bottom_over > div:first-of-type' ) ,
values : window . innerWidth < 1080 ? { left : - 8 , bottom : - 4 } : { left : - 20 , bottom : 6 } ,
mobileValues : { left : - 8 , bottom : - 4 }
} ,
bottomSecond : {
el : document . querySelector ( '.ornements_bottom_over > div:last-of-type' ) ,
values : window . innerWidth < 1080 ? { left : 18 , bottom : - 11 } : { left : 25 , bottom : - 9 } ,
mobileValues : { left : - 3 , bottom : - 15 }
}
}
}
function moveElementsOnScroll ( ) {
ornements . topOver . el . style . left = ` ${ ornements . topOver . values . left * ( window . innerWidth / 100 ) - window . scrollY / 4 } px ` ;
ornements . topOver . el . style . top = ` ${ ornements . topOver . values . top * ( window . innerHeight / 100 ) + window . scrollY / 1.1 } px ` ;
ornements . topUnderFirst . el . style . left = ` ${ ornements . topUnderFirst . values . left * ( window . innerWidth / 100 ) - window . scrollY / 5 } px ` ;
ornements . topUnderFirst . el . style . top = ` ${ ornements . topUnderFirst . values . top * ( window . innerHeight / 100 ) + window . scrollY / 1.3 } px ` ;
ornements . topUnderSecond . el . style . left = ` ${ ornements . topUnderSecond . values . left * ( window . innerWidth / 100 ) - window . scrollY / 8 } px ` ;
ornements . topUnderSecond . el . style . top = ` ${ ornements . topUnderSecond . values . top * ( window . innerHeight / 100 ) + window . scrollY / 1.2 } px ` ;
ornements . bottomFirst . el . style . right = ` ${ ornements . bottomFirst . values . left * ( window . innerWidth / 100 ) - ( ( scrollHeight - ( window . scrollY + window . innerHeight ) ) / 5 ) } px ` ;
ornements . bottomSecond . el . style . top = ` ${ ornements . bottomFirst . values . bottom * ( window . innerHeight / 100 ) + ( ( scrollHeight - ( window . scrollY + window . innerHeight ) ) / 2 ) } px ` ;
}
function resetElementsPosition ( ) {
ornements . topUnderFirst . el . style . left = ` ${ ornements . topUnderFirst . values . left } vw ` ;
ornements . topUnderFirst . el . style . top = ` ${ ornements . topUnderFirst . values . top } vh ` ;
ornements . topUnderSecond . el . style . left = ` ${ ornements . topUnderSecond . values . left } vw ` ;
ornements . topUnderSecond . el . style . top = ` ${ ornements . topUnderSecond . values . top } vh ` ;
ornements . topOver . el . style . left = ` ${ ornements . topOver . values . left } vw ` ;
ornements . topOver . el . style . top = ` ${ ornements . topOver . values . top } vh ` ;
ornements . bottomFirst . el . style . left = "unset" ,
ornements . bottomFirst . el . style . right = ` ${ ornements . bottomFirst . values . left } vw ` ;
ornements . bottomFirst . el . style . bottom = ` ${ ornements . bottomFirst . values . bottom } vh ` ;
ornements . bottomSecond . el . style . top = "unset" ;
ornements . bottomSecond . el . style . left = ` ${ ornements . bottomSecond . values . left } vw ` ;
ornements . bottomSecond . el . style . bottom = ` ${ ornements . bottomSecond . values . bottom } vh ` ;
}
function resetMobileElementsPosition ( ) {
ornements . topUnderFirst . el . style . left = ` ${ ornements . topUnderFirst . mobileValues . left } vw ` ;
ornements . topUnderFirst . el . style . top = ` ${ ornements . topUnderFirst . mobileValues . top } vh ` ;
ornements . topUnderSecond . el . style . left = ` ${ ornements . topUnderSecond . mobileValues . left } vw ` ;
ornements . topUnderSecond . el . style . top = ` ${ ornements . topUnderSecond . mobileValues . top } vh ` ;
ornements . topOver . el . style . left = "unset" ;
ornements . topOver . el . style . right = ` ${ ornements . topOver . mobileValues . right } vw ` ;
ornements . topOver . el . style . top = ` ${ ornements . topOver . mobileValues . top } vh ` ;
ornements . bottomFirst . el . style . left = "unset" ,
ornements . bottomFirst . el . style . right = ` ${ ornements . bottomFirst . mobileValues . left } vw ` ;
ornements . bottomFirst . el . style . bottom = ` ${ ornements . bottomFirst . mobileValues . bottom } vh ` ;
ornements . bottomSecond . el . style . top = "unset" ;
ornements . bottomSecond . el . style . left = ` ${ ornements . bottomSecond . mobileValues . left } vw ` ;
ornements . bottomSecond . el . style . bottom = ` ${ ornements . bottomSecond . mobileValues . bottom } vh ` ;
}
function setupResize ( ) {
getElementsAndPositions ( ) ;
resetElementsPosition ( ) ;
window . addEventListener ( "scroll" , moveElementsOnScroll ) ;
}
if ( document . querySelector ( '.fullpage:not(.actus)' ) ) {
if ( window . innerWidth > 760 ) setupResize ( ) ;
window . addEventListener ( 'resize' , ( ) => {
window . scrollTo ( 0 , 0 ) ;
window . removeEventListener ( "scroll" , moveElementsOnScroll ) ;
if ( window . innerWidth > 760 ) {
setupResize ( ) ;
} else if ( ornements ) {
resetMobileElementsPosition ( ) ;
}
} ) ;
}
2023-11-30 17:33:32 +01:00
}
} ;
} ( Drupal ) ) ;