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 if (document.querySelector('.offre-content')) {
        fluoButtons = document.querySelectorAll('.liens_fixed > div, .file_fixed > 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')) {
        let liens = document.querySelectorAll('.liens_fixed a, .file_fixed a, .content_partenaires a');
        for (let lien of liens) {
          lien.setAttribute('target', '_blank');
        }
        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);

      //
      // Retirer paragraphes vides fullpage
      // et ajouter de la marge pour les images en portrait
      //
      let currentPage;
      if (document.querySelector('.fullpage:not(.actus)')) currentPage = 'fullpage';
      else if (document.querySelector('.carousel_container')) currentPage = 'home';

      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');
        for (let img of imgs) {
          if (img.height > img.width) {
            img.parentElement.style.padding = '0 12vw';
          }
        }
      }

      //
      // Effets parallax
      //

      let ornements, scrollHeight;
      function getElementsAndPositions() {
        scrollHeight = document.body.scrollHeight;
        if (currentPage === 'fullpage') {
          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 : -36, top : -20 },
              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 }
            }
          };
        } else if (currentPage === 'home') {
          ornements = {
            carouselTop : {
              el : document.querySelector('.ornements_carousel_top'),
              values : window.innerWidth < 1080 ? { left : 3, top : -25 } : { left : -10, top : 20 },
            //  mobileValues : {}
            },
            carouselBottomFirst : {
              el : document.querySelector('.ornements_carousel_bottom > div:first-of-type'),
              values : window.innerWidth < 1080 ? { left : 0, top : 35 } : { left : 0, top : -16 },
            //  mobileValues : {}
            },
            carouselBottomSecond : {
              el : document.querySelector('.ornements_carousel_bottom > div:nth-of-type(2)'),
              values : window.innerWidth < 1080 ? { left : 12, top : 40 } : { left : 4, top : -8 },
            //  mobileValues : {}
            },
            presentationLeftFirst : {
              el : document.querySelector('.ornements_presentation_left > div:first-of-type'),
              values : { left : -20, bottom : -8 },
              mobileValues : { left : -20, bottom : -8 }
            },
            presentationLeftSecond : {
              el : document.querySelector('.ornements_presentation_left > div:nth-of-type(2)'),
              values : { left : -21, bottom : -3 },
              mobileValues : { left : -10, bottom : -5 }
            },
            presentationLeftThird : {
              el : document.querySelector('.ornements_presentation_left > div:nth-of-type(3)'),
              values : { left : -22, bottom : -3 },
              mobileValues : { left : -22, bottom : -3 }
            },
            presentationRightFirst : {
              el : document.querySelector('.ornements_presentation_right > div:first-of-type'),
              values : { right : -6, bottom : -3 },
              mobileValues : { right : -15, bottom : -6 }
            },
            presentationRightSecond : {
              el : document.querySelector('.ornements_presentation_right > div:nth-of-type(2)'),
              values : { right : -12, bottom : -12 },
              mobileValues : { right : -12, bottom : -12 }
            },
            consultationLeftFirst : {
              el : document.querySelector('.ornements_consultation_left > div:first-of-type'),
              values : window.innerWidth < 1080 ? { left : -30, bottom : -10 } : { left : 0, bottom : 5 },
              mobileValues : { left : -30, bottom : -10 }
            },
            consultationLeftSecond : {
              el : document.querySelector('.ornements_consultation_left > div:nth-of-type(2)'),
              values : window.innerWidth < 1080 ? { left : -12, top : 0 } : { left : -20, top : -5 },
              mobileValues : { left : -12, top : 0 }
            },
            consultationRightFirst : {
              el : document.querySelector('.ornements_consultation_right > div:first-of-type'),
              values : window.innerWidth < 1080 ? { right : -8, bottom : -2 } : { right : -3, bottom : 6 },
              mobileValues : { right : -8, bottom : -2 }
            },
            consultationRightSecond : {
              el : document.querySelector('.ornements_consultation_right > div:nth-of-type(2)'),
              values : { right : -4, bottom : 3 },
              mobileValues : { right : -4, bottom : 0 }
            }
          };
        }
      }

      function moveElementsOnScroll() {
        if (currentPage === 'fullpage') {
          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 / 5}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.bottom = `${ornements.bottomFirst.values.bottom * (window.innerHeight / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
        } else if (currentPage === 'home') {
          ornements.carouselTop.el.style.left = `${ornements.carouselTop.values.left * (window.innerWidth / 100) - window.scrollY / 4}px`;
          ornements.carouselTop.el.style.top = `${ornements.carouselTop.values.top * (window.innerHeight / 100) + window.scrollY / 8}px`;

          ornements.carouselBottomFirst.el.style.left = `${ornements.carouselBottomFirst.values.left * (window.innerWidth / 100) + window.scrollY / 5}px`;
          ornements.carouselBottomFirst.el.style.top = `${ornements.carouselBottomFirst.values.top * (window.innerHeight / 100) + window.scrollY / 1.3}px`;

          ornements.carouselBottomSecond.el.style.left = `${ornements.carouselBottomSecond.values.left * (window.innerWidth / 100) - window.scrollY / 8}px`;
          ornements.carouselBottomSecond.el.style.top = `${ornements.carouselBottomSecond.values.top * (window.innerHeight / 100) + window.scrollY / 1.2}px`;


          ornements.presentationLeftFirst.el.style.left = `${ornements.presentationLeftFirst.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 5)}px`;

          ornements.presentationLeftSecond.el.style.left = `${ornements.presentationLeftSecond.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 3)}px`;

          ornements.presentationLeftThird.el.style.left = `${ornements.presentationLeftThird.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;


          ornements.presentationRightFirst.el.style.right = `${ornements.presentationRightFirst.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 5)}px`;

          ornements.presentationRightSecond.el.style.right = `${ornements.presentationRightSecond.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 3)}px`;




          ornements.consultationLeftFirst.el.style.left = `${ornements.consultationLeftFirst.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 6)}px`;

          ornements.consultationLeftSecond.el.style.left = `${ornements.consultationLeftSecond.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;


          ornements.consultationRightFirst.el.style.right = `${ornements.consultationRightFirst.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 4)}px`;

          ornements.consultationRightSecond.el.style.right = `${ornements.consultationRightSecond.values.right * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;

        }
      }

      function resetElementsPosition() {
        if (currentPage === 'fullpage') {

          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`;

        } else if (currentPage === 'home') {

          ornements.carouselTop.el.style.left = `${ornements.carouselTop.values.left}vw`;
          ornements.carouselTop.el.style.top = `${ornements.carouselTop.values.top}vh`;

          ornements.carouselBottomFirst.el.style.left = `${ornements.carouselBottomFirst.values.left}vw`;
          ornements.carouselBottomFirst.el.style.top = `${ornements.carouselBottomFirst.values.top}vh`;

          ornements.carouselBottomSecond.el.style.left = `${ornements.carouselBottomSecond.values.left}vw`;
          ornements.carouselBottomSecond.el.style.top = `${ornements.carouselBottomSecond.values.top}vh`;

          ornements.presentationLeftFirst.el.style.left = `${ornements.presentationLeftFirst.values.left}vw`;
          ornements.presentationLeftFirst.el.style.bottom = `${ornements.presentationLeftFirst.values.bottom}vh`;

          ornements.presentationLeftSecond.el.style.left = `${ornements.presentationLeftSecond.values.left}vw`;
          ornements.presentationLeftSecond.el.style.bottom = `${ornements.presentationLeftSecond.values.bottom}vh`;

          ornements.presentationLeftThird.el.style.left = `${ornements.presentationLeftThird.values.left}vw`;
          ornements.presentationLeftThird.el.style.bottom = `${ornements.presentationLeftThird.values.bottom}vh`;

          ornements.presentationRightFirst.el.style.right = `${ornements.presentationRightFirst.values.right}vw`;
          ornements.presentationRightFirst.el.style.bottom = `${ornements.presentationRightFirst.values.bottom}vh`;

          ornements.presentationRightSecond.el.style.right = `${ornements.presentationRightSecond.values.right}vw`;
          ornements.presentationRightSecond.el.style.bottom = `${ornements.presentationRightSecond.values.bottom}vh`;

          ornements.consultationLeftFirst.el.style.left = `${ornements.consultationLeftFirst.values.left}vw`;
          ornements.consultationLeftFirst.el.style.bottom = `${ornements.consultationLeftFirst.values.bottom}vh`;

          ornements.consultationLeftSecond.el.style.left = `${ornements.consultationLeftSecond.values.left}vw`;
          ornements.consultationLeftSecond.el.style.top = `${ornements.consultationLeftSecond.values.top}vh`;

          ornements.consultationRightFirst.el.style.right = `${ornements.consultationRightFirst.values.right}vw`;
          ornements.consultationRightFirst.el.style.bottom = `${ornements.consultationRightFirst.values.bottom}vh`;

          ornements.consultationRightSecond.el.style.right = `${ornements.consultationRightSecond.values.right}vw`;
          ornements.consultationRightSecond.el.style.bottom = `${ornements.consultationRightSecond.values.bottom}vh`;
        }
      }

      function resetMobileElementsPosition() {
        if (currentPage === 'fullpage') {

          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`;

        } else if (currentPage === 'home') {

          ornements.presentationLeftFirst.el.style.left = `${ornements.presentationLeftFirst.mobileValues.left}vw`;
          ornements.presentationLeftFirst.el.style.bottom = `${ornements.presentationLeftFirst.mobileValues.bottom}vh`;

          ornements.presentationLeftSecond.el.style.left = `${ornements.presentationLeftSecond.mobileValues.left}vw`;
          ornements.presentationLeftSecond.el.style.bottom = `${ornements.presentationLeftSecond.mobileValues.bottom}vh`;

          ornements.presentationLeftThird.el.style.left = `${ornements.presentationLeftThird.mobileValues.left}vw`;
          ornements.presentationLeftThird.el.style.bottom = `${ornements.presentationLeftThird.mobileValues.bottom}vh`;

          ornements.presentationRightFirst.el.style.right = `${ornements.presentationRightFirst.mobileValues.right}vw`;
          ornements.presentationRightFirst.el.style.bottom = `${ornements.presentationRightFirst.mobileValues.bottom}vh`;

          ornements.presentationRightSecond.el.style.right = `${ornements.presentationRightSecond.mobileValues.right}vw`;
          ornements.presentationRightSecond.el.style.bottom = `${ornements.presentationRightSecond.mobileValues.bottom}vh`;

          ornements.consultationLeftFirst.el.style.left = `${ornements.consultationLeftFirst.mobileValues.left}vw`;
          ornements.consultationLeftFirst.el.style.bottom = `${ornements.consultationLeftFirst.mobileValues.bottom}vh`;

          ornements.consultationLeftSecond.el.style.left = `${ornements.consultationLeftSecond.mobileValues.left}vw`;
          ornements.consultationLeftSecond.el.style.top = `${ornements.consultationLeftSecond.mobileValues.top}vh`;

          ornements.consultationRightFirst.el.style.right = `${ornements.consultationRightFirst.mobileValues.right}vw`;
          ornements.consultationRightFirst.el.style.bottom = `${ornements.consultationRightFirst.mobileValues.bottom}vh`;

          ornements.consultationRightSecond.el.style.right = `${ornements.consultationRightSecond.mobileValues.right}vw`;
          ornements.consultationRightSecond.el.style.bottom = `${ornements.consultationRightSecond.mobileValues.bottom}vh`;
        }
      }

      function setupParallax() {
        getElementsAndPositions();
        resetElementsPosition();
        window.addEventListener("scroll", moveElementsOnScroll);
      }

      if (currentPage) {
        if (window.innerWidth > 760) setupParallax();
        
        window.addEventListener('resize', () => { 
          window.scrollTo(0, 0);
          window.removeEventListener("scroll", moveElementsOnScroll); 
          if (window.innerWidth > 760) {
            setupParallax();
          } else if (ornements) {
            resetMobileElementsPosition();
          }
        });
      }


    }
  };

} (Drupal));