https://www.eccody.com/assets/js/unit/header-nav.js?v=1

1class ScriptHeaderNav extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    if (!this.$dom) return
6    this.headerConfig = JSON.parse(this.utilts.htmlDecode(params.config))
7    this.$firstNav = this.$dom.querySelectorAll('.unit-header-nav__item')
8    this.$subNavBox = this.$dom.querySelector('.unit-header-nav__subNav')
9    this.$navBox = this.$dom.querySelector('.unit-header-nav')
10    this.$mobOverlay = null
11    this.header_type = JSON.parse(params.config).header_type
12  }
13  init() {
14    if (!this.$dom) return
15    if (!window.app.info.utilts.checkDesign()) {
16      this.$mobOverlay = document.querySelector('.mobile_menu_overlay')
17      if (!this.$mobOverlay) {
18        const $overlay = document.createElement('div')
19        $overlay.classList.add('mobile_menu_overlay')
20        $overlay.style.height = document.body.offsetHeight - document.querySelector('[package-type="header"]').offsetHeight + 'px'
21        $overlay.style.top = document.querySelector('[package-type="header"]').offsetHeight + 'px'
22        document.body.append($overlay)
23        this.$mobOverlay = document.querySelector('.mobile_menu_overlay')
24      }
25
26      // 导航出现二级栏目时候 显示隐藏遮罩层的判断
27      if (this.$subNavBox && parseInt(this.$subNavBox.getAttribute('header-type'))) {
28        if (blockHeader.classList.contains('header-hide')) {
29          this.$mobOverlay.style.display = 'none'
30        } else {
31          if (this.$subNavBox && this.$subNavBox.classList.contains('show')) {
32            this.$mobOverlay.style.display = 'block'
33            this.$mobOverlay.style.height = (document.body.offsetHeight - document.querySelector('[package-type="header"]').offsetHeight - window.pageYOffset) + 'px'
34            this.$mobOverlay.style.top = (document.querySelector('[package-type="header"]').offsetHeight + window.pageYOffset) + 'px'
35          }
36        }
37      }
38    }
39    this.initFirstNavEvent()
40  }
41
42  showUniversalFn($el) {
43    if ($el.getAttribute('header-type') == 2) {
44      for (let key of this.$firstNav) {
45        key.classList.remove('is-active')
46      }
47      $el.classList.add('is-active')
48    }
49    this.$subNavBox.classList.remove('show')
50    if (this.$mobOverlay) this.$mobOverlay.style.display = 'none'
51    const $content = $el.querySelector('.unit-header-nav__item-content')
52    if ($content) {
53      const headerType = parseInt($content.getAttribute('header-type'))
54      if (headerType === 2) {
55        this.setFlatTwoFun($content, headerType)
56      } else {
57        this.$subNavBox.innerHTML = $content.innerHTML
58        this.$subNavBox.classList.add('show')
59        this.$subNavBox.setAttribute('sub-menu-type', headerType)
60        this.setSecondPosition(this.$subNavBox, $el, headerType)
61        let $subNav = null
62        if (headerType === 1) {
63          this.$subNavBox.innerHTML += '<div id="unit-header-nav-flat-dropdown"></div>'
64          $subNav = this.$subNavBox.querySelectorAll('.unit-header-nav-flat__item-son')
65        } else {
66          $subNav = this.$subNavBox.querySelectorAll('.unit-header-nav__item-son')
67        }
68        if ($subNav) this.initSubNavEvent($subNav, headerType, 1)
69
70        // 显示遮罩层
71        if (headerType == 1 && this.$mobOverlay) {
72          this.$mobOverlay.style.display = 'block'
73          this.$mobOverlay.style.height = (document.body.offsetHeight - document.querySelector('[package-type="header"]').offsetHeight - window.pageYOffset) + 'px'
74          this.$mobOverlay.style.top = (document.querySelector('[package-type="header"]').offsetHeight + window.pageYOffset) + 'px'
75        }
76      }
77    } else {
78      let flatTwoNav = document.querySelector('.unit-header-nav__subNav-flattwo')
79      if (flatTwoNav) flatTwoNav.classList.remove('show')
80    }
81  }
82
83  setFlatTwoFun(contentEle, headerType, initname) {
84    let flatTwoNav = document.querySelector('.unit-header-nav__subNav-flattwo')
85    if (!flatTwoNav) {
86      flatTwoNav = document.createElement('div')
87      flatTwoNav.classList.add('unit-header-nav__subNav-flattwo')
88    }
89    if (contentEle) flatTwoNav.innerHTML = contentEle.innerHTML
90    setTimeout(() => {
91      if (!initname) flatTwoNav.classList.add('show')

92      flatTwoNav.setAttribute('sub-menu-type', headerType)
93      flatTwoNav.setAttribute('subMenu', true)
94      if (contentEle) flatTwoNav.setAttribute('style', contentEle.getAttribute('style'))
95    }, 100);
96    const parentsEle = this.utilts.getParentsByAttr(this.$dom, 'package-item', 'module')
97    let containerWidth = 0
98    if (parentsEle && parentsEle.length) {
99      containerWidth = window.getComputedStyle(parentsEle[0].querySelector('.container'), null).maxWidth.slice(0, -2) * 1
100      parentsEle[0].appendChild(flatTwoNav)
101    }
102    let flattwoSonContent = parentsEle[0].querySelectorAll('.unit-header-nav-flattwo_item-son-content')
103    const setFlattwoSonContentPadding = () => {
104      Array.from(flattwoSonContent).forEach(item => {
105        item.style.paddingLeft = window.innerWidth < containerWidth ? '0px' : '5px'
106      })
107    }
108    setFlattwoSonContentPadding()
109    window.addEventListener('resize', setFlattwoSonContentPadding)
110  }
111
112  initFirstNavEvent() {
113    let logoHeight = 0
114    document.querySelectorAll('[package-type="header"] .unit-logo').forEach(_val => {
115      if (_val.offsetHeight) logoHeight = _val.offsetHeight
116    })
117    this.setFlatTwoFun('', 2, 'init')
118    for (let $el of this.$firstNav) {
119      if ($el.querySelector('.unit-header-nav__item-content') && $el.querySelector('.unit-header-nav__item-content').getAttribute('header-type') == 2 && $el.querySelector('.unit-header-nav__item-link.active')) this.showUniversalFn($el)
120      if (logoHeight) $el.style.height = logoHeight + 20 + 'px'
121      $el.addEventListener('mouseenter', () => {
122        this.showUniversalFn($el)
123      })
124      this.$navBox.addEventListener('mouseleave', () => {
125        this.$subNavBox.classList.remove('show')
126        if (this.$mobOverlay) this.$mobOverlay.style.display = 'none'
127      })
128    }
129    // 移出header，收起整个下拉菜单
130    if (this.header_type === 2) {
131      document.querySelector('[package-type="header"]').addEventListener('mouseleave', function (e) {
132        document.querySelector('.unit-header-nav__subNav-flattwo').classList.remove('show')
133        document.querySelectorAll('.unit-header-nav__item').forEach(item => item.classList.remove('is-active'))
134      })
135    }
136  }
137
138  // 导航的二级事件
139  initSubNavEvent($subNav, headerType = 0, level) {
140    level++
141    if (headerType === 1) {
142      // 添加更多箭头
143      for (let $el of $subNav) {
144        if (($el.querySelector('.item-list-container > a')?.offsetHeight || 0) + ($el.querySelector('.item-list-container > div')?.offsetHeight || 0) > 310) {
145          let $itemContainer = $el.querySelector('.item-list-container')
146          let $more = $el.querySelector('.unit-nav-flat_more')
147          $more.style.visibility = 'visible'
148          $more.addEventListener('click', () => {
149            $itemContainer.style.maxHeight = 'inherit'
150            if ($el.querySelector('.show')) {
151              $more.classList.remove('show')
152              $itemContainer.style.maxHeight = ''
153            } else {
154              $more.classList.add('show')
155            }
156          })
157        }
158
159        if (level === 2) {
160          const $sonNav = $el.querySelectorAll('.unit-header-nav__item-grandson-tile')
161          $sonNav.forEach(item => {
162            item.addEventListener('mouseenter', () => {
163              this.$subNavBox.querySelector('#unit-header-nav-flat-dropdown').innerHTML = ''
164              const $content = item.querySelector('.unit-header-nav__item-sub-content')
165              if ($content) {
166                const pLeft = this.utilts.getOffset(item).left + item.querySelector('.unit-nav-flat_son_name').offsetWidth + 27
167                const pTop = this.utilts.getOffset(item).top - this.utilts.getOffset(this.$subNavBox).top + this.$subNavBox.scrollTop - 5
168                this.$subNavBox.querySelector('#unit-header-nav-flat-dropdown').innerHTML = '<div parent-id="' + item.dataset.id + '" class="unit-nav-flat_dropdown" style="left: ' + pLeft + 'px; top: ' + pTop + 'px">' + $content.innerHTML + '</div>'
169
170                const $dropdown = this.$subNavBox.querySelector('.unit-nav-flat_dropdown')
171                $dropdown.classList.add('show')
172                $dropdown.addEventListener('mouseleave', () => {
173                  $dropdown.classList.remove('show')
174                  $el.querySelector('[data-id="' + item.dataset.id + '"]').classList.remove('active')
175                })
176                $dropdown.addEventListener('mouseenter', () => {
177                  $dropdown.classList.add('show')
178                  $el.querySelector('[data-id="' + item.dataset.id + '"]').classList.add('active')
179                })
180              }
181            })
182            item.addEventListener('mouseleave', () => {
183              const $dropdown = this.$subNavBox.querySelector('.unit-nav-flat_dropdown')
184              if ($dropdown) {
185                $dropdown.classList.remove('show')
186              }
187            })
188          })
189        }
190      }
191    } else {
192      for (let $el of $subNav) {
193        const $content = $el.querySelector('.unit-header-nav__item-sub-content')
194        $el.addEventListener('mouseenter', () => {
195          this.$subNavBox.classList.add('show')
196          if ($content) {
197            const pLeft = this.utilts.getOffset($el).left
198            if (pLeft + 250 > window.innerWidth) {
199              $content.style.left = 'auto'
200              $content.style.right = '100%'
201            } else {
202              $content.style.left = '100%'
203              $content.style.right = 'auto'
204            }
205            $content.classList.add('show')
206
207            if (level === 2) {
208              const $sonNav = $content.querySelectorAll('.unit-header-nav__item-grandson')
209              if ($sonNav) this.initSubNavEvent($sonNav, headerType, level)
210            }
211          }
212        })
213        $el.addEventListener('mouseleave', () => {
214          if ($content) $content.classList.remove('show')
215          this.$subNavBox.classList.remove('show')
216        })
217      }
218    }
219  }
220  /** 二级菜单定位 */
221  setSecondPosition($target, $parent, headerType = 0) {
222    const pLeft = this.utilts.getOffset($parent).left
223    const boxLeft = this.utilts.getOffset(this.$navBox).left
224    if (+headerType === 1 || +headerType === 2) {
225      $target.style.left = -1 * boxLeft + 'px'
226      $target.style.width = window.innerWidth + 'px'
227      if (+headerType === 2) $target.style.width = document.querySelector('[package-type="header"]').offsetWidth + 'px'
228      $target.style.removeProperty('top')
229    } else {
230      if (pLeft + 250 > window.innerWidth) {
231        $target.style.left = (pLeft + $parent.offsetWidth - boxLeft - $target.offsetWidth) + 'px'
232        $target.classList.add('show_right')
233      } else {
234        $target.style.left = (pLeft - boxLeft) + 'px'
235        $target.classList.remove('show_right')
236      }
237      $target.style.width = 'auto'
238      const linkDom = $parent.querySelector('.unit-header-nav__item-link ')
239      console.log('/*--', linkDom.getAttribute('show-line-height'))
240      if (linkDom.getAttribute('show-line-height')) {
241        const parentHeight = $parent.offsetHeight
242        const navlinkHeight = linkDom.offsetHeight
243        $target.style.top = `calc(100% - ${(parentHeight - navlinkHeight) / 2}px)`
244      }
245    }
246  }
247}