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 ( ) ;
2024-04-26 19:58:44 +02:00
console . log ( slickEl ) ;
2023-12-06 17:06:45 +01:00
$ ( 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 ;
}
}
2024-10-31 01:32:57 +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 {
2024-10-31 01:32:57 +01:00
menu . style . display = "flex" ;
toggleMenuItems ( 'show' ) ;
2023-12-17 16:49:23 +01:00
}
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
} ) ;
2024-10-31 01:32:57 +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' ) ;
2024-03-29 21:29:59 +01:00
} else if ( document . querySelector ( '.offre-content' ) ) {
2024-04-26 20:08:09 +02:00
fluoButtons = document . querySelectorAll ( '.liens_fixed > div, .file_fixed > div > div' ) ;
2023-12-15 20:04:59 +01:00
} else {
fluoButtons = document . querySelectorAll ( '.liens_fixed > div > div:not(.visually-hidden), .file_fixed > div > div' ) ;
}
2024-10-31 01:32:57 +01:00
2023-12-15 20:04:59 +01:00
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 {
2024-10-31 01:32:57 +01:00
fluoButtons [ i - 1 ] . style . bottom = i === fluoButtons . length ? '30px' : ` ${ prevButtonBottom + prevButtonHeight + 15 } px ` ;
2023-12-15 20:04:59 +01:00
}
}
}
if ( document . querySelector ( '.fullpage' ) ) {
2024-01-06 10:00:50 +01:00
let liens = document . querySelectorAll ( '.liens_fixed a, .file_fixed a, .content_partenaires a' ) ;
2024-01-06 09:39:13 +01:00
for ( let lien of liens ) {
lien . setAttribute ( 'target' , '_blank' ) ;
}
2023-12-15 20:04:59 +01:00
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
//
2024-01-22 15:25:26 +01:00
// Retirer paragraphes vides fullpage
// et ajouter de la marge pour les images en portrait
2023-12-20 06:48:35 +01:00
//
2023-12-21 12:48:12 +01:00
let currentPage ;
if ( document . querySelector ( '.fullpage:not(.actus)' ) ) currentPage = 'fullpage' ;
else if ( document . querySelector ( '.carousel_container' ) ) currentPage = 'home' ;
2024-01-22 15:25:26 +01:00
if ( currentPage === 'fullpage' ) {
let paragraphs = document . querySelectorAll ( 'p' ) ;
for ( let paragraph of paragraphs ) {
if ( ! /[a-zA-Z]/ . test ( paragraph . innerText ) ) {
paragraph . remove ( ) ;
}
}
let imgs = document . querySelectorAll ( '.fullpage img' ) ;
2024-04-09 10:54:31 +02:00
let meetup = document . querySelector ( '.meetup_list' ) ;
if ( ! meetup ) {
for ( let img of imgs ) {
if ( img . height > img . width ) {
img . parentElement . style . padding = '0 12vw' ;
}
2024-01-22 15:25:26 +01:00
}
}
}
2024-04-19 15:26:56 +02:00
//
// all meetup card is a link
//
let meetup = document . querySelector ( '.meetup_list' ) ;
if ( meetup ) {
let meetupCards = document . querySelectorAll ( '.meetup_list > .views-row' ) ;
for ( let card of meetupCards ) {
let meetupLink = card . querySelector ( '.offre-title' ) ;
meetupLink = meetupLink . getAttribute ( 'href' ) ;
let ficheLink = document . createElement ( 'a' ) ;
ficheLink . setAttribute ( 'href' , meetupLink ) ;
let cardArticle = card . querySelector ( 'article' ) ;
ficheLink . append ( cardArticle ) ;
card . append ( ficheLink ) ;
}
}
2024-01-22 15:25:26 +01:00
//
2024-10-31 01:32:57 +01:00
// Sous Menu display on hover
2024-01-22 15:25:26 +01:00
//
2024-10-31 01:32:57 +01:00
const programLink = document . querySelector ( "#block-erabletheme-navigationprincipale ul li:first-of-type" ) ;
const programSubmenu = document . querySelector ( "#block-erabletheme-leprogramme" ) ;
let isSubmenuOpen = false ;
2023-12-20 06:48:35 +01:00
2024-10-31 01:32:57 +01:00
function showSubmenu ( ) {
programLink . classList . add ( "submenu-open" ) ;
const rect = programLink . getBoundingClientRect ( ) ;
programSubmenu . style . top = ` ${ rect . bottom } px ` ;
programSubmenu . style . left = ` ${ rect . left } px ` ;
programSubmenu . style . display = "block" ;
2023-12-20 06:48:35 +01:00
2024-10-31 01:32:57 +01:00
programSubmenu . style . display = "block" ;
setTimeout ( ( ) => {
programSubmenu . style . maxHeight = "50vh" ;
} , 10 )
2023-12-20 06:48:35 +01:00
2024-10-31 01:32:57 +01:00
isSubmenuOpen = true ;
2023-12-20 06:48:35 +01:00
}
2024-10-31 01:32:57 +01:00
function hideSubmenu ( ) {
programLink . classList . remove ( "submenu-open" ) ;
programSubmenu . style . maxHeight = "0px" ;
isSubmenuOpen = false ;
setTimeout ( ( ) => {
if ( ! isSubmenuOpen ) {
programSubmenu . style . display = "none" ;
2023-12-20 06:48:35 +01:00
}
2024-10-31 01:32:57 +01:00
} , 600 ) ;
2023-12-20 06:48:35 +01:00
}
2024-10-31 01:32:57 +01:00
programLink . addEventListener ( "mouseenter" , showSubmenu ) ;
programLink . addEventListener ( "mouseleave" , hideSubmenu ) ;
programSubmenu . addEventListener ( "mouseenter" , showSubmenu ) ;
programSubmenu . addEventListener ( "mouseleave" , hideSubmenu ) ;
2023-12-20 06:48:35 +01:00
2023-11-30 17:33:32 +01:00
}
2024-10-31 01:32:57 +01:00
}
2023-11-30 17:33:32 +01:00
} ( Drupal ) ) ;