{"version":3,"sources":["header.ts"],"names":["HTMLElement","prototype","onOutsideClick","handler","otherDependenceElement","listener","event","target","_this","contains","some","r","this","document","addEventListener","bind","toggleMenu","expandLink","show","ls","querySelector","ma","classList","add","lsh","scrollHeight","style","height","transform","remove","wrap","headerTop","burger","expandLinks","initUserMenu","init","_this2","headerUser","_this$wrap","button","menu","menuItems","querySelectorAll","menuitemNodes","forEach","call","item","_this2$menuitemNodes","onMenuitemKeydown","push","firstMenuitem","lastMenuitem","handleClick","onButtonKeydown","closePopup","_this$button","menuItem","currentTarget","flag","key","window","location","href","focus","setFocusToPreviousMenuitem","setFocusToNextMenuitem","setFocusToFirstMenuitem","setFocusToLastMenuitem","stopPropagation","preventDefault","isOpen","_this$button2","getAttribute","openPopup","_this$button3","_this$menu","setAttribute","_this$button4","_this$menu2","setFocusToMenuitem","newMenuitem","tabIndex","currentMenuitem","index","_this$menuitemNodes","indexOf","undefined","_this$menuitemNodes2","at","_this$menuitemNodes3","_this$menuitemNodes4","_this$button5","quantity","newValue","textContent","_document","elem","setProperty","e","body","toggle","exp","_exp$closest","closest"],"mappings":"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","file":"header.js","sourcesContent":["interface UserMenuModel {\n  init: () => void;\n  onMenuitemKeydown: (event: KeyboardEvent) => void;\n  onButtonKeydown: (event: KeyboardEvent) => void;\n  isOpen: () => boolean;\n  openPopup: () => void;\n  closePopup: () => void;\n  setFocusToMenuitem: (item: HTMLElement) => void;\n  handleClick: (event: Event) => void;\n  setFocusToFirstMenuitem: () => void;\n  setFocusToLastMenuitem: () => void;\n  setFocusToPreviousMenuitem: (currentMenuitem: HTMLElement) => void;\n  setFocusToNextMenuitem: (currentMenuitem: HTMLElement) => void;\n  wrap?: HTMLElement | null;\n  button?: HTMLElement | null;\n  menu?: HTMLElement | null;\n  menuItems?: NodeListOf<HTMLAnchorElement> | null;\n  firstMenuitem?: HTMLElement;\n  lastMenuitem?: HTMLElement;\n  menuitemNodes?: HTMLElement[];\n}\n\ninterface HTMLElement {\n  onOutsideClick: (handler: (e: Event) => void, otherDependenceElement?: HTMLElement[]) => void;\n}\n\n\n\nHTMLElement.prototype.onOutsideClick =\n  HTMLElement.prototype.onOutsideClick ||\n  function (this: HTMLElement, handler: (e: MouseEvent | TouchEvent) => void, otherDependenceElement?: HTMLElement[]) {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      // Do nothing if clicking ref's element or descendent elements\n      if (!event.target || !this || this.contains(event.target as Node)) {\n        return;\n      }\n\n      if (otherDependenceElement && otherDependenceElement.some((r) => r?.contains(event.target as Node))) {\n        return;\n      }\n\n      handler(event);\n    };\n\n    document.addEventListener('mousedown', listener.bind(this));\n    document.addEventListener('touchstart', listener.bind(this));\n  };\n\n(() => {\n  const toggleMenu = (expandLink: HTMLElement, show: boolean) => {\n    let ls: HTMLElement | null = expandLink.querySelector('ul');\n    let ma: HTMLElement | null = expandLink.querySelector('.menuarrow');\n\n    if (show) {\n      expandLink.classList.add('showLinks');\n\n      if (ls) {\n        let lsh = ls.scrollHeight;\n        ls.style.height = lsh + \"px\";\n      }\n\n      if (ma) {\n        ma.style.transform = 'rotate(180deg)';\n      }\n    } else {\n      expandLink.classList.remove('showLinks');\n\n      if (ls) {\n        ls.style.height = 0 + 'px';\n      }\n\n      if (ma) {\n        ma.style.transform = 'rotate(0deg)';\n      }\n    }\n  }\n\n  const setExpandMenu = () => {\n    const expandLinks = document.querySelectorAll('.expandLinks .menu-title');\n    [].forEach.call(expandLinks, (exp: HTMLElement) => {\n      exp.addEventListener('click', function (e: MouseEvent) {\n        e.preventDefault();\n\n        if (exp.closest('.expandLinks')?.classList.contains('showLinks')) {\n          toggleMenu(exp.closest('.expandLinks') as HTMLElement, false);\n          return;\n        }\n\n        // close all menu before expand\n        [].forEach.call(expandLinks, (expandLink: HTMLElement) => toggleMenu(expandLink.closest('.expandLinks') as HTMLElement, false));\n\n        // expand menu\n        toggleMenu(exp.closest('.expandLinks') as HTMLElement, true);\n      })\n    });\n  }\n\n  const setToggleMobileNavigation = () => {\n    const burger = document.querySelector('.burger');\n    if (!burger) {\n      return;\n    }\n\n    burger.addEventListener('click', (e) => {\n      e.preventDefault();\n      document.body.classList.toggle('open-mobile-navigation');\n    });\n  }\n\n  /**\n   * This function process data come from when storage area modified in the context of another document\n   * For cart quantity modifier\n   *    - we need to call window.localStorage.setItem('MSG_CART_QUANTITY', value)\n   *    - And because the event isn't fire in the current context of the current document so we need to trigger the event manually by call window.dispatchEvent(new StorageEvent('storage', { key: 'MSG_CART_QUANTITY', oldValue: '0', newValue: quantity.toString() }));\n   *        + Only key and newValue parameters are required\n   *        + Because window.dispaychEvent invoke event synchronously so you should place it in asynchronously callback as setTimeout\n   */\n  const handleStoreModified = (event: StorageEvent) => {\n    switch (event.key) {\n      case 'MSG_CART_QUANTITY':\n        const quantity = event.newValue;\n        const headerCartQuantity = document.querySelectorAll('.header-cart-quantity');\n\n        headerCartQuantity.forEach(item => {\n          item!.textContent = `${quantity}`;\n        })\n        break;\n      default:\n        break;\n    }\n  };\n\n  const setHeightHeaderTop = () => {\n    const wrap = document.querySelectorAll<HTMLElement>('.header-wrapper');\n    const headerTop = document?.querySelector('.header-top');\n\n    if (headerTop) {\n      [].forEach.call(wrap, (elem: HTMLElement) => {\n        elem?.style.setProperty('--header-top-height', `${headerTop.scrollHeight}px`);\n      });\n    }\n  };\n\n  const initUserMenu: UserMenuModel = {\n    wrap: document.querySelector<HTMLElement>('.header-top'),\n    init() {\n      const headerUser = this.wrap?.querySelector<HTMLElement>('.header-user');\n      this.button = headerUser?.querySelector<HTMLAnchorElement>('#user-menu-parent');\n      this.menu = headerUser?.querySelector<HTMLElement>('#user-menu-links');\n\n      if (!this.button || !this.menu || !headerUser) {\n        return;\n      };\n\n      this.menuItems = this.menu.querySelectorAll<HTMLAnchorElement>('li a');\n      this.menuitemNodes = [];\n\n      [].forEach.call(this.menuItems, (item: HTMLAnchorElement) => {\n        item.addEventListener('keydown', this.onMenuitemKeydown.bind(this));\n        this.menuitemNodes?.push(item);\n\n        if (!this.firstMenuitem) {\n          this.firstMenuitem = item;\n        }\n\n        this.lastMenuitem = item;\n      });\n\n      this.button.addEventListener('click', this.handleClick.bind(this));\n      this.button.addEventListener('keydown', this.onButtonKeydown.bind(this));\n      headerUser?.onOutsideClick(() => {\n        this.closePopup();\n      });\n    },\n    onMenuitemKeydown(event: KeyboardEvent) {\n      const menuItem = event.currentTarget as HTMLAnchorElement;\n      let flag = false;\n\n      switch (event.key) {\n        case ' ':\n          window.location.href = menuItem.href;\n          break;\n\n        case 'Tab':\n          this.closePopup();\n          break;\n\n        case 'Esc':\n        case 'Escape':\n          this.closePopup();\n          this.button?.focus();\n          flag = true;\n          break;\n\n        case 'Up':\n        case 'ArrowUp':\n          this.setFocusToPreviousMenuitem(menuItem);\n          flag = true;\n          break;\n\n        case 'ArrowDown':\n        case 'Down':\n          this.setFocusToNextMenuitem(menuItem);\n          flag = true;\n          break;\n\n        case 'Home':\n        case 'PageUp':\n          this.setFocusToFirstMenuitem();\n          break;\n\n        case 'End':\n        case 'PageDown':\n          this.setFocusToLastMenuitem();\n          flag = true;\n          break;\n\n        default:\n          break;\n      }\n\n      if (flag) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    isOpen() {\n      return this.button?.getAttribute('aria-expanded') === 'true';\n    },\n    openPopup() {\n      this.menu?.classList.add('open');\n      this.button?.setAttribute('aria-expanded', 'true');\n    },\n    closePopup() {\n      this.menu?.classList.remove('open');\n      this.button?.setAttribute('aria-expanded', 'false');\n    },\n    setFocusToMenuitem(newMenuitem: HTMLElement) {\n      [].forEach.call(this.menuItems, (item: HTMLElement) => {\n        if (item === newMenuitem) {\n          item.tabIndex = 0;\n          newMenuitem.focus();\n        } else {\n          item.tabIndex = -1;\n        }\n      });\n    },\n    setFocusToFirstMenuitem() {\n      this.firstMenuitem && this.setFocusToMenuitem(this.firstMenuitem);\n    },\n    handleClick(event: Event) {\n      event.preventDefault();\n\n      if (this.isOpen()) {\n        this.closePopup();\n      } else {\n        this.openPopup();\n      }\n    },\n    setFocusToPreviousMenuitem(currentMenuitem: HTMLElement) {\n      var newMenuitem, index;\n\n      if (currentMenuitem === this.firstMenuitem) {\n        newMenuitem = this.lastMenuitem;\n      } else {\n        index = this.menuitemNodes?.indexOf(currentMenuitem);\n        index !== -1 && index !== undefined && (newMenuitem = this.menuitemNodes?.at(index - 1));\n      }\n\n      newMenuitem && this.setFocusToMenuitem(newMenuitem);\n\n      return newMenuitem;\n    },\n    setFocusToNextMenuitem(currentMenuitem: HTMLElement) {\n      var newMenuitem, index;\n\n      if (currentMenuitem === this.lastMenuitem) {\n        newMenuitem = this.firstMenuitem;\n      } else {\n        index = this.menuitemNodes?.indexOf(currentMenuitem);\n        index !== -1 && index !== undefined && (newMenuitem = this.menuitemNodes?.at(index + 1));\n      }\n\n      newMenuitem && this.setFocusToMenuitem(newMenuitem);\n\n      return newMenuitem;\n    },\n    setFocusToLastMenuitem() {\n      this.lastMenuitem && this.setFocusToMenuitem(this.lastMenuitem);\n    },\n    onButtonKeydown(event: KeyboardEvent) {\n      let flag = false;\n\n      switch (event.key) {\n        case ' ':\n        case 'Enter':\n        case 'ArrowDown':\n        case 'Down':\n          this.openPopup();\n          this.setFocusToFirstMenuitem();\n          flag = true;\n          break;\n\n        case 'Esc':\n        case 'Escape':\n          this.closePopup();\n          this.button?.focus();\n          flag = true;\n          break;\n\n        case 'Up':\n        case 'ArrowUp':\n          this.openPopup();\n          this.setFocusToLastMenuitem();\n          flag = true;\n          break;\n\n        default:\n          break;\n      }\n\n      if (flag) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    }\n  };\n\n\n\n  // Listener storage event*\n  window.addEventListener('storage', handleStoreModified);\n\n  setHeightHeaderTop();\n  setToggleMobileNavigation();\n  setExpandMenu();\n  initUserMenu.init();\n})();"]}