drupal-erable/web/themes/erabletheme/js/erabletheme.js

/**
 * @file
 * erabletheme behaviors.
 */
(function (Drupal) {

  'use strict';

  Drupal.behaviors.erabletheme = {
    attach: function (context, settings) {

      //
      // Carrousel
      //
      (function($, window) {
        let slickEl = $('.slick-container').children().first().children().first().children().first().children().first();
        $(slickEl).slick({
          dots: true,
          appendDots: $('#carousel_dots')
        });
      })(jQuery, window);

      //
      // Toggle du menu
      //
      const hamburgerBtn = document.getElementById("hamburger");
      const hamburgerIcon = document.querySelector(".burger-icon");
      const menu = hamburgerBtn.nextElementSibling;
      const menuItems = menu.children;
      const opacityDelay = 50;
      let inTransition = false;

      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;
        }
      }
      
      // Toggle menu visibility on hamburger click
      hamburgerBtn.addEventListener("click", function(event) {
        event.stopPropagation();
        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');       
          }
          setTimeout(() => {
            menu.classList.toggle("active");
          }, 1);
          setTimeout(() => {
            inTransition = false;
          }, 700);
        }


      });
    
      // Close menu when clicking outside of the menu
      document.addEventListener("click", function(event) {
        const isHamburgerClicked = event.target === hamburgerBtn;
        const isMenuClicked = event.target === menu || event.target.parentElement === menu;
        if (!isMenuClicked && !isHamburgerClicked && !inTransition) {
          inTransition = true;
          hamburgerIcon.classList.remove('open');
          menu.classList.remove("active");
          toggleMenuItems('hide');
          setTimeout(() => {
            menu.style.display = "none";
            inTransition = false;
          }, 700);
        }
      });

      //
      // 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);
    }
  };

} (Drupal));