https://www.daniel-moquet.fr/dist/js/libs.js

1const bodyDOM = document.querySelector('body');
2const menuDOM = document.querySelector('[data-interact="mainmenu"]');
3const closeMenuDOM = document.querySelector('[data-interact="closemainmenu"]');
4function openMenu(){
5  bodyDOM.setAttribute('data-menu-state', 'opened');
6  gsap.timeline({
7    defaults: {
8      opacity: 0,
9      ease: "power3.out"
10    }
11  }).to(menuDOM, {
12    opacity:1,
13    x: 620,
14    duration: .8,
15  }).from(menuDOM.querySelectorAll(":scope > *"), {
16    opacity: 0,
17    stagger: 0.15,
18    y: 40
19  }, ">-0.6");
20}
21function closeMenu(){
22  bodyDOM.setAttribute('data-menu-state', 'closed');
23  gsap.timeline({
24    defaults: {
25      opacity: 0,
26      ease: "power3.out"
27    }
28  }).to(menuDOM, {
29    opacity:0,
30    x: -620,
31    duration: 1.2,
32  });
33}
34function initMenu(){
35  const triggerMenu = document.querySelector('[data-event="togglemenu"]');
36  triggerMenu.addEventListener('click', e => {
37    e.preventDefault();
38    bodyDOM.getAttribute('data-menu-state') === "closed"?
39      openMenu():
40      closeMenu;
41
42  })
43  closeMenuDOM.addEventListener('click', e => {
44    e.preventDefault();
45    closeMenu();
46  })
47}
48function isMobile() {
49  varisMobile = (!window.matchMedia("(min-width:60em)").matches);
50  const mainMenu = document.querySelector(".js__mainMenu");
51  const recepMenuDesktop = document.querySelector(".l-recepDesktop");
52  const recepMenuMobile = document.querySelector(".l-recepMobile");
53  const btnTopTel = document.querySelector('[data-responsive="cta-top-tel"]');
54  const btnTopDevis = document.querySelector('[data-responsive="cta-top-devis"]');
55  const btnTopContact = document.querySelector('[data-responsive="cta-top-contact"]');
56  const recepCtasDesktop = document.querySelector('[data-menu="desktop"]');
57  //console.log(varisMobile);
58  if (varisMobile) {
59    //recepProfilsMobile.appendChild(boxProfils);
60    bodyDOM.classList.remove("u-hover-on");
61    bodyDOM.classList.add("u-hover-off");
62    recepMenuMobile.append(mainMenu);
63    recepMenuMobile.append(btnTopTel);
64    recepMenuMobile.append(btnTopDevis);
65    recepMenuMobile.append(btnTopContact);
66  } else {
67    //recepProfilsDesktop.appendChild(boxProfils);
68    bodyDOM.classList.remove("u-hover-off");
69    bodyDOM.classList.add("u-hover-on");
70    if (recepMenuDesktop){
71      recepMenuDesktop.prepend(mainMenu);
72      recepCtasDesktop.append(btnTopTel);
73      recepCtasDesktop.append(btnTopDevis);
74      recepCtasDesktop.append(btnTopContact);
75    }
76  }
77}
78function askIsMobile(){
79  return (!window.matchMedia("(min-width:60em)").matches);
80}
81// gestion du positionnement des informations telephones de contact
82// sur desktop dans le header à côté du logo
83// sur mobile dans le menu latéral
84const recepDesktopContactNumber = document.querySelector('[data-interact="recepDesktopContactNumber"]');
85const recepMobileContactNumber = document.querySelector('[data-interact="recepMobileContactNumber"]');
86const contactNumberDOM = document.querySelector('[data-interact="contactNumberDOM"]');
87function positionContactNumber(){
88  if(askIsMobile()){
89    recepMobileContactNumber.append(contactNumberDOM);
90  }else{
91    recepDesktopContactNumber.append(contactNumberDOM);
92  }
93}
94window.addEventListener('resize', positionContactNumber);
95positionContactNumber();