{"version":3,"file":"header-Bqm-liNx.js","sources":["../../../app/javascript/entrypoints/js/header.js"],"sourcesContent":["import gsap from \"gsap\";\n\nexport default class Header {\n  constructor() {\n    this.isOpen = false;\n    this.header = document.querySelector(\"[data-js='header']\");\n    this.headerNavButtons = document.querySelectorAll(\n      \"[data-js='header-nav'] .header-btn\",\n    );\n    this.submenuWrapper = document.querySelector(\n      \"[data-js='header-submenu-wrapper']\",\n    );\n    this.submenuList = document.querySelectorAll(\"[data-js='header-submenu']\");\n    this.submenuContainer = document.querySelector(\n      \"[data-js='header-submenu__container']\",\n    );\n    this.submenuLinks = this.header.querySelectorAll(\"a\");\n    this.mobileMenuIcon = document.querySelector(\n      \"[data-js='header-mobile-open__menu']\",\n    );\n    this.mobileMenuClose = document.querySelector(\n      \"[data-js='header-mobile-menu__close']\",\n    );\n    this.submenuMobileWrapper = document.querySelector(\n      \"[data-js='header-submenu-mobile-wrapper']\",\n    );\n    this.submenuMobile = document.querySelectorAll(\n      \"[data-js='header-submenu-mobile']\",\n    );\n    this.submenuMobileLinks = document.querySelectorAll(\n      \"[data-js='header-submenu-mobile'] a\",\n    );\n    this.headerNavButtonsMobile = document.querySelectorAll(\n      \"[data-js='header-nav-mobile'] button\",\n    );\n    this.headerSubmenuMobileClose = document.querySelectorAll(\n      \"[data-js='header-submenu-mobile__close']\",\n    );\n    this.wishlistLink = document.querySelector(\"[data-js='wishlist-link']\");\n    this.searchButtonMobile = document.querySelector(\n      \"[data-js='header-search-mobile']\",\n    );\n    this.userLink = document.querySelector(\"[data-js='user-link']\");\n  }\n\n  init() {\n    // console.log(\"Header init\");\n    // console.log(this.headerNavButtons)\n    gsap.set([this.submenuWrapper, this.submenuList, this.submenuMobile], {\n      autoAlpha: 0,\n    });\n\n    this.headerNavButtons.forEach((button, i) => {\n      button.addEventListener(\"click\", (event) => {\n        this.toggleSubmenu(i);\n      });\n    });\n\n    this.submenuList.forEach((submenu) => {\n      submenu.addEventListener(\"click\", (event) => {\n        event.stopPropagation();\n\n        if (\n          this.isOpen &&\n          event.target.closest(\"[data-js='header-submenu__container']\") === null\n        ) {\n          this.closeSubmenu();\n        }\n      });\n    });\n\n    this.mobileMenuIcon.addEventListener(\"click\", () => {\n      if (this.isOpen) {\n        this.closeMobileMenu();\n      } else {\n        this.openMobileMenu();\n      }\n    });\n\n    this.mobileMenuClose.addEventListener(\"click\", () => {\n      this.closeMobileMenu();\n    });\n\n    this.headerNavButtonsMobile.forEach((button) => {\n      button.addEventListener(\"click\", (event) => {\n        const index = Array.from(this.headerNavButtonsMobile).indexOf(button);\n\n        gsap.set(this.submenuMobile, {\n          autoAlpha: 1,\n          xPercent: 100,\n        });\n\n        gsap.to(this.submenuMobile[index], {\n          xPercent: 0,\n        });\n      });\n    });\n\n    this.headerSubmenuMobileClose.forEach((el) => {\n      el.addEventListener(\"click\", () => {\n        gsap.to(this.submenuMobile, {\n          xPercent: 100,\n          onComplete: () => {\n            gsap.set(this.submenuMobile, {\n              autoAlpha: 0,\n            });\n          },\n        });\n      });\n    });\n\n    // this.submenuLinks.forEach((link) => {\n    //   link.addEventListener(\"click\", () => {\n    //     this.closeSubmenu();\n    //     this.closeMobileMenu();\n    //   });\n    // });\n\n    // this.submenuMobileLinks.forEach((link) => {\n    //   link.addEventListener(\"click\", () => {\n    //     this.closeMobileMenu();\n    //   });\n    // });\n  }\n\n  toggleSubmenu(index) {\n    if (this.isOpen && this.currentSubmenuIndex === index) {\n      this.closeSubmenu();\n    } else {\n      this.openSubmenu(index);\n    }\n  }\n\n  openSubmenu(index) {\n    document.body.style.overflow = \"hidden\";\n\n    this.isOpen = true;\n    this.currentSubmenuIndex = index;\n    this.submenuWrapper.style.display = \"flex\";\n\n    gsap.to(this.submenuWrapper, {\n      autoAlpha: 1,\n    });\n\n    this.submenuList.forEach((submenu, i) => {\n      if (i === index) {\n        const tl = gsap.timeline();\n        tl.set(submenu, {\n          display: \"flex\",\n        });\n        tl.to(submenu, {\n          autoAlpha: 1,\n        });\n      } else {\n        gsap.to(submenu, {\n          autoAlpha: 0,\n          onComplete: () => {\n            submenu.style.display = \"none\";\n          },\n        });\n      }\n    });\n  }\n\n  closeSubmenu() {\n    this.isOpen = false;\n\n    gsap.to(this.submenuList, {\n      autoAlpha: 0,\n      onComplete: () => {\n        document.body.style.overflow = \"auto\";\n\n        this.submenuList.forEach((submenu) => {\n          submenu.style.display = \"none\";\n        });\n      },\n    });\n\n    gsap.to(this.submenuWrapper, {\n      autoAlpha: 0,\n      onComplete: () => {\n        this.submenuWrapper.style.display = \"none\";\n      },\n    });\n\n    gsap.to(this.submenuMobile, {\n      autoAlpha: 0,\n    });\n  }\n\n  openMobileMenu() {\n    this.isOpen = true;\n    document.body.style.overflow = \"hidden\";\n    // this.mobileMenuIcon.style.display = \"none\";\n    // this.mobileMenuClose.style.display = \"block\";\n    // this.wishlistLink.style.display = \"block\";\n    // this.searchButtonMobile.style.display = \"none\";\n    // this.userLink.style.display = \"block\";\n    this.submenuMobileWrapper.style.display = \"flex\";\n\n    gsap.set(this.submenuMobileWrapper, {\n      xPercent: -100,\n    });\n\n    gsap.to(this.submenuMobileWrapper, {\n      xPercent: 0,\n    });\n  }\n\n  closeMobileMenu() {\n    // this.mobileMenuIcon.style.display = \"block\";\n    // this.mobileMenuClose.style.display = \"none\";\n    // this.wishlistLink.style.display = \"none\";\n    // this.searchButtonMobile.style.display = \"block\";\n    // this.userLink.style.display = \"none\";\n    document.body.style.overflow = \"auto\";\n\n    gsap.set(this.submenuMobile, {\n      autoAlpha: 0,\n    });\n\n    gsap.to(this.submenuMobileWrapper, {\n      xPercent: -100,\n      onComplete: () => {\n        this.submenuMobileWrapper.style.display = \"none\";\n        this.isOpen = false;\n      },\n    });\n  }\n}\n"],"names":["Header","gsap","button","i","event","submenu","index","el","tl"],"mappings":"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"}