https://www.hongzhousmart.com/assets/js/unit/header-menu.js

1class ScriptHeaderMenu extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    this.$switch = this.$dom.querySelector('.unit-header-menu__switch')
6    this.$sidebar = this.$dom.querySelector('.unit-header-menu__box')
7    this.$close = this.$dom.querySelector('.unit-header-menu__close')
8    this.$drop = this.$dom.querySelectorAll('.unit-header-menu__nav__item-drop')
9    this.$searchBtn = this.$dom.querySelector('.unit-header-menu__search-btn')
10    this.$searchInput = this.$dom.querySelector('.unit-header-menu__search-input')
11  }
12  init() {
13    this.initSideBar()
14  }
15  checkoutLoginOpen() {
16    if (window.app.info.user.is_open === 1) {
17      const isShop = window.app.info.site.is_shop
18      const loginStr = `
19      <div class="unit-header-menu__login">
20        <div class="unit-header-menu-login__box" login-hide>
21          <a href="${globalThis.Server.getRinseHref('/login.html', window.app.info.site)}">
22            <span class="iconfont icon-base-user pr-1"></span>
23            <span class="unit-header-menu__text text-capitalize">
24              ${this.utilts.$t('sign in')}
25            </span>
26          </a>
27        </div>
28        <div class="unit-header-menu-login__box" login-show>
29          <a href="javascript:;" class="unit-header-menu-login__icon">
30            <span class="iconfont icon-base-user pr-1"></span>
31            <span class="unit-header-menu__text text-capitalize">
32              ${this.utilts.$t('author')}
33            </span>
34          </a>
35          <div class="unit-header-menu-login__list">
36            <a class="unit-header-menu-login__item ${isShop ? '' : 'item-is__hidden'}" href="${globalThis.Server.getRinseHref('/user.html', window.app.info.site)}">${this.utilts.$t('Profile')}</a>
37            <a class="unit-header-menu-login__item" href="javascript:;" onclick="window.app.utilts.logout()">${this.utilts.$t('Log out')}</a>
38          </div>
39        </div>
40      </div>
41      `
42      const $loginBox = document.querySelector('#unit-header-mobile__login')
43      if ($loginBox) $loginBox.innerHTML = loginStr
44      setTimeout(() => {
45        this.initLoginPopver(5)
46      }, 200)
47    }
48  }
49  initSideBar() {
50    this.initPopEvent()
51    this.initDropEvent()
52    this.initSearchEvent()
53    if (this.$sidebar) {
54      if (window.app.info.utilts.checkDesign()) {
55        const appMenu = document.getElementById('app').querySelector('.app-unit-header-menu__box')
56        if (appMenu) appMenu.remove()
57        this.$sidebar.classList.add('app-unit-header-menu__box')
58      }
59
60      const parents = this.utilts.getParentsByAttr(this.$dom, 'package-item', 'module')
61      const headerStyle = window.getComputedStyle(parents[0] || document.querySelector('[package-block-type="header"]'))
62      let styleStr = this.$sidebar.getAttribute('style')
63      styleStr = (styleStr ? styleStr + ' ' : '') + '--header-bg: ' + headerStyle['backgroundColor'] + ';'
64      styleStr += ' --header-color: ' + headerStyle['color'] + ';'
65      this.$sidebar.setAttribute('style', styleStr)
66      document.getElementById('app').append(this.$sidebar)
67      const multiLanguage = this.$sidebar.querySelector('.unit-header-menu__box-item a');
68      if(multiLanguage){
69        multiLanguage.addEventListener('click',(e)=>{
70          e.preventDefault();
71          sessionStorage.setItem("languageUrl", window.app.info.page.page_url);
72          window.location.href =  globalThis.Server.getRinseHref('/multi-language.html', window.app.info.site)
73        })
74      }
75
76    }
77  }
78  /** 弹窗事件 */
79  initPopEvent() {
80    this.$switch.addEventListener('click', () => {
81      setTimeout(()=>{
82        // 为了防止window.app.info.user未更新完就开始判断,所以加上定时器延迟执行判断
83        this.checkoutLoginOpen()
84      },100)
85      
86      this.$sidebar.classList.add('show')
87      document.body.style.overflow = 'hidden'
88    })
89    if (this.$close) {
90      this.$close.addEventListener('click', () => {
91        this.$sidebar.classList.remove('show')
92        document.body.style.overflow = 'auto'
93      })
94    }
95    if (window.app.info.client.is_mobile) {
96      this.initWindowHeight()
97      window.addEventListener('resize', () => {
98        this.initWindowHeight()
99      })
100    }
101  }
102  initWindowHeight() {
103    this.$sidebar.style.height = window.innerHeight + 'px'
104    this.$sidebar.querySelector('.unit-header-menu__nav').style.height = window.innerHeight - 184 + 'px'
105  }
106  /** 下拉事件 */
107  initDropEvent() {
108    for (let $el of this.$drop) {
109      $el.addEventListener('click', (e) => {
110        e.stopPropagation()
111        e.preventDefault()
112        $el.classList.toggle('active')
113        const $content = $el.parentNode.parentNode.children[1] || null
114        if ($content) {
115          $content.classList.toggle('show')
116        }
117      })
118    }
119  }
120  /** 搜索事件 */
121  initSearchEvent() {
122    if (this.$searchBtn) {
123      this.$searchBtn.addEventListener('click', () => {
124        const content = this.$searchInput.value
125        if (content) {
126          // 清除缓存里的搜索参数
127          this.utilts.removeItem('search-pattern')
128          window.location.href = globalThis.Server.getRinseHref(`/search.html?keyword=${content}`, window.app.info.site)
129        }
130      })
131    }
132    if (this.$searchInput) {
133      this.$searchInput.addEventListener('keypress', (e) => {
134        if (e.key === 'Enter') {
135          const content = this.$searchInput.value
136          if (content) {
137            // 清除缓存里的搜索参数
138            this.utilts.removeItem('search-pattern')
139            window.location.href = globalThis.Server.getRinseHref(`/search.html?keyword=${content}`, window.app.info.site)
140          }
141        }
142      })
143    }
144  }
145  /** 登录弹窗 */
146  initLoginPopver(n) {
147    if (window.app.info.utilts.checkDesign()) return
148    const $login = document.querySelector('.unit-header-menu-login__icon')
149    if (!$login && n > 0) {
150      n--
151      setTimeout(this.initLoginPopver(n), 500)
152    }
153    const $login_list = document.querySelector('.unit-header-menu-login__list')
154    if ($login && $login_list) $login.addEventListener('click', () => $login_list.classList.toggle('show'))
155  }
156}