https://www.pioneerplastechs.com/assets/js/unit/header.js

1class ScriptHeader extends Script {
2  constructor(params) {
3    super(params)
4    this.headDom = document.querySelector(`#${this.attrId}`)
5    this.navDom = document.querySelector(`#swiper-${this.attrId}`)
6    this.delayTime = null
7    this.winWidth = document.body.offsetWidth || document.documentElement.offsetWidth
8    this.bodyDom = this.headDom.querySelector('.unit-header__body-wrap')
9    this.subNavWrap = this.headDom.querySelector('.unit-header__sub-nav')
10    this.mHeadDom = this.bodyDom.querySelector('.unit-header__body-m')
11    this.blockHeader = document.querySelector('[package-block-type="header"]')
12    this.oldScrollY = 3
13  }
14  /** 初始化，支持异步 */
15  async init() {
16    // 初始化栏目展开二级的事件
17    this.initNavEvent()
18    // 初始化查找信息,装修状态下不用初始
19    if (!Utilts.ins().checkDesign()) {
20      this.initSearch()
21    }
22  }
23  /** 初始化查找信息 */
24  initSearch() {
25    const $search = document.querySelector('.unit-header__search')
26    const $showSearch = document.querySelector('.search-show')
27    const searchGround = document.querySelector('.search-form')
28    const $closeSearch = document.querySelector('.search-close')
29
30    if ($showSearch) {
31      $showSearch.addEventListener('click', function (self) {
32        searchGround.classList.add('active')
33      })
34    }
35    if ($closeSearch) {
36      $closeSearch.addEventListener('click', function (self) {
37        searchGround.classList.remove('active')
38      })
39    }
40    this._initClickSearch($search)
41  }
42
43  // m端搜索
44  _initPhoneSearch() {
45    const $search = document.querySelector('.unit-header__search-m')
46    this._initClickSearch($search)
47  }
48
49  // 初始化搜索点击、回车事件
50  _initClickSearch(parentNode) {
51    const $btn = parentNode.querySelector('.search-btn')
52    const $input = parentNode.querySelector('.search-input')
53    if ($btn) {
54      $btn.addEventListener('click', () => this._goSearchPage($input))
55      $input.onkeypress = (event) => {
56        if (event.key === 'Enter') {
57          this._goSearchPage($input)
58        }
59      }
60    }
61  }
62
63  // 搜索回车结果
64  _goSearchPage(node) {
65    let keyword = ''
66    if (node && node.value) keyword = node.value
67    // 清除缓存里的搜索参数
68    this.utilts.removeItem('search-pattern')
69    window.location.href = globalThis.Server.getRinseHref(`/search.html?keyword=${keyword}`, window.app.info.site)
70  }
71  // 节点绑定事件
72  initNavEvent() {
73    if (this.winWidth > 1200) {
74      this._initPcEvent()
75      return
76    }
77    this._initPhoneEvent()
78    this.toggleMenu()
79  }
80
81  // pc端绑定事件初始化
82  _initPcEvent() {
83    let nav = this.headDom.querySelectorAll('.unit-header__nav-item')
84    for (const nav_item of nav) {
85      this._firstMenuShowOrHide(nav_item)
86    }
87    this._subMenuShowOrHide()
88  }
89
90  /** 一级菜单绑定鼠标经过和离开事件 */
91  _firstMenuShowOrHide(nav_item) {
92    // 一级菜单绑定鼠标经过事件
93    nav_item.addEventListener('mouseenter', () => {
94      this._headerAddzIndex()
95      clearTimeout(this.delayTime)
96      // 清空临时下拉栏目内容
97      this.subNavWrap.innerHTML = ''
98      this.subNavWrap.style.cssText = "height: auto; opacity: 1;"
99      const navSon = nav_item.querySelector('.unit-header__nav-son-wrap')
100      if (navSon) {
101        let cloneNode = navSon.cloneNode(true)
102        // 栏目内容位置对应触发元素
103        this._setStyleText(nav_item, cloneNode)
104        this._setSonItem(cloneNode)
105        // 填充鼠标经过栏目对应二级栏目的内容
106        this.subNavWrap.appendChild(cloneNode)
107      }
108    })
109    // 一级菜单绑定鼠标离开事件
110    nav_item.addEventListener('mouseleave', () => {
111      this._headerResetzIndex()
112      this.delayTime = setTimeout(() => {
113        //二级栏目隐藏
114        this.subNavWrap.style.cssText = 'height: 0; opacity: 0'
115      }, 200)
116    })
117  }
118
119  /** 二级栏目保持显示或隐藏并清空状态 */
120  _subMenuShowOrHide() {
121    //鼠标放在二级栏目上， 二级栏目保持显示状态
122    this.subNavWrap.addEventListener('mouseenter', () => {
123      this._headerAddzIndex()
124      clearTimeout(this.delayTime)
125      this.subNavWrap.style.cssText = 'height: auto; opacity: 1'
126    })
127    //鼠标离开二级栏目， 二级栏目隐藏并清空
128    this.subNavWrap.addEventListener('mouseleave', () => {
129      this._headerResetzIndex()
130      this.subNavWrap.style.cssText = 'height: 0; opacity: 0'
131      this.subNavWrap.innerHTML = ''
132    })
133  }
134
135  /** 栏目内容位置对应触发元素 */
136  _setStyleText(nav_item, cloneNode) {
137    // 栏目内容位置对应触发元素
138    const top = `top: ${nav_item.offsetHeight}px;`
139    const outLeft = Utilts.ins().getOffset(nav_item).left
140    const outRight = nav_item.getBoundingClientRect().right
141    const innerNode = this.headDom.querySelector('.unit-header__nav-inner')
142    const innerLeft = Utilts.ins().getOffset(innerNode).left
143    let left = `left: ${outLeft - innerLeft}px;`
144    if ((outLeft + 250) > window.innerWidth)  left = `left: ${outRight - innerLeft -250}px;`
145    cloneNode.style.cssText = `${top}${left}opacity: 1;`
146  }
147
148  /** 二级菜单绑定鼠标经过事件 */
149  _setSonItem(cloneNode) {
150    let sons = cloneNode.querySelectorAll('.unit-header__nav-son-item')
151    for (const son_item of sons) {
152      // 二级菜单绑定鼠标经过事件
153      son_item.addEventListener('mouseenter', () => {
154        // 栏目内容位置对应触发元素
155        const navGrandson = son_item.querySelector('.unit-header__nav-grandson')
156        const topNum = Utilts.ins().getOffset(son_item).top - Utilts.ins().getOffset(cloneNode).top - 2;
157        if (navGrandson && navGrandson.style) {
158          const leftNum = Utilts.ins().getOffset(navGrandson).left
159          const grandsonWidth = navGrandson.offsetWidth
160          navGrandson.style.cssText = `opacity: 1; height:auto; overflow: inherit; top: ${topNum}px; max-height: calc(100vh - ${topNum + this.headDom.offsetHeight}px); overflow-y: auto;`
161          // 三级导航栏定位超出屏幕，改成左定位
162          if ((leftNum + grandsonWidth) > window.innerWidth) {
163            navGrandson.style.left = '-100%'
164          }
165        }
166        for (const bro of Utilts.ins().getSiblings(son_item)) {
167          // 其他兄弟元素下的三级栏目隐藏
168          const broNavGrandson = bro.querySelector('.unit-header__nav-grandson')
169          if (broNavGrandson && broNavGrandson.style) {
170            broNavGrandson.style.cssText = 'opacity: 0; height: 0;overflow: hidden;'
171          }
172        }
173      })
174    }
175  }
176
177  // m端绑定事件初始化
178  _initPhoneEvent() {
179    let mHeadDom = this.headDom.querySelector('.unit-header__body-m')
180    // 一级栏目显示下拉栏目
181    let nav = mHeadDom.querySelectorAll('.unit-header__nav-item')
182    for (const nav_item of nav) {
183      const navDrowmenu = nav_item.querySelector('.unit-header__nav-item-inner .icon-drowmenu')
184      if (navDrowmenu) {
185        navDrowmenu.addEventListener('click', () => {
186          // 判断当前栏目是否显示下拉栏目
187          if (Utilts.ins().hasClass(nav_item, 'active')) {
188            nav_item.classList.remove('active')
189          } else {
190            nav_item.classList.add('active')
191            for (const item of Utilts.ins().getSiblings(nav_item)) {
192              item.classList.remove('active')
193            }
194          }
195        })
196      }
197    }
198    // 二级栏目显示下拉栏目
199    let sons = mHeadDom.querySelectorAll('.unit-header__nav-son-item')
200    for (const son_item of sons) {
201      if (son_item.querySelector('.unit-header__nav-son-item-inner .icon-drowmenu')) {
202        son_item.querySelector('.unit-header__nav-son-item-inner .icon-drowmenu').addEventListener('click', () => {
203          if (Utilts.ins().hasClass(son_item, 'active')) {
204            son_item.classList.remove('active')
205          } else {
206            son_item.classList.add('active')
207            for (const item of Utilts.ins().getSiblings(son_item)) {
208              item.classList.remove('active')
209            }
210          }
211        })
212      }
213    }
214    this._initPhoneSearch()
215  }
216
217  // 显示二级菜单时，添加z-index为了不被挡住
218  _headerAddzIndex() {
219    this.blockHeader.classList.add('header-hover-index')
220  }
221
222  // 菜单离开时，恢复header 层级
223  _headerResetzIndex() {
224    this.blockHeader.classList.remove('header-hover-index')
225  }
226
227  // m端展开侧边栏
228  toggleMenu() {
229    this.headDom.querySelector('.unit-header__switch').addEventListener('click', () => {
230      if (Utilts.ins().hasClass(this.mHeadDom, 'body-hide')) {
231        this.mHeadDom.classList.remove('body-hide')
232        this.mHeadDom.classList.add('body-show')
233        document.querySelector('body').style.overflow = 'hidden'
234        let mask = Utilts.ins().createDom(this.bodyDom, 'div', [])
235        mask.style.cssText = 'width:100vw;height:100vh;background-color: rgba(0,0,0,.4); position: fixed; top:0; left:0; z-index: 1999;'
236        mask.setAttribute('id', 'nav_mask')
237        mask.addEventListener('click', () => {
238          this.mHeadDom.classList.add('body-hide')
239          this.mHeadDom.classList.remove('body-show')
240          document.querySelector('body').style.overflow = 'initial'
241          Utilts.ins().removeNode(mask)
242        })
243      } else {
244        this.mHeadDom.classList.add('body-hide')
245        this.mHeadDom.classList.remove('body-show')
246        document.querySelector('body').style.overflow = 'initial'
247        Utilts.ins().removeNode(mask)
248      }
249    })
250  }
251
252  toggleUserLogout() {
253    document.querySelector('[login-show]').addEventListener('click', function () {
254      console.log(this.querySelector('.dropdown-menu'))
255    })
256  }
257}