https://www.zywell.net/assets/js/unit/breadcrumb.js

1class ScriptBreadcrumb extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    this.$olDom = this.$dom.querySelector('.unit-breadcrumb')
6    this.$liDom = this.$dom.querySelectorAll('.unit-breadcrumb__item')
7    this.liDomLen = this.$liDom.length
8    this.navWidth = this.$olDom.offsetWidth
9    this.liWidth = 0
10    this.video_config = JSON.parse(this.utilts.htmlDecode(params.video_config))
11    // 视频播放方式
12    let methodMap = {
13      default: this.video_config.method,
14      md: this.video_config.method_md,
15      xl: this.video_config.method_xl
16    }
17    this.method = methodMap[this.utilts.getScreen()]
18  }
19  async init() {
20    // 渲染
21    this._initRender()
22    this._setOmitShowOrHide()
23    this.initHoverImg()
24    this.initPrevClick()
25  }
26  initPrevClick() {
27    const gifHoverImages = this.$dom.querySelectorAll('.unit-list-hover__image')
28    if (gifHoverImages.length) {
29      gifHoverImages.forEach(val => {
30        val.addEventListener('click', () => {
31					if (this.method === '2') val.classList.add('d-none')
32          val.parentNode.parentNode.click()
33        })
34      })
35    }
36  }
37  initHoverImg() {
38    const videoDom = this.$dom.querySelector('[video-gif]')
39    if (!videoDom) return
40    setTimeout(() => {
41      this.renderHoverImg(videoDom)
42      videoDom.parentNode.onmouseover = e => {
43        const originImg = videoDom.children[0].children[1].querySelector('.base-image__item') // hover原图的效果
44        const h_dom = videoDom.querySelector('.unit-list-hover__image')
45        if (h_dom && h_dom.classList.contains('hover_img_before_load')) {
46          h_dom.classList.remove('hover_img_before_load')
47        }
48        if (originImg) originImg.classList.add('opacity0')
49        videoDom.querySelector('.base-video__play')?.classList.add('d-none')
50      }
51      videoDom.parentNode.onmouseout = e => {
52        const originImg = videoDom.children[0].children[1].querySelector('.base-image__item') // hover原图的效果
53        const h_dom = videoDom.querySelector('.unit-list-hover__image')
54        if (originImg) originImg.classList.remove('opacity0')
55        if (h_dom) {
56          h_dom.classList.add('hover_img_before_load')
57        }
58        videoDom.querySelector('.base-video__play')?.classList.remove('d-none')
59      }
60    }, 0)
61	}
62  renderHoverImg(node) {
63		node.setAttribute('hover-img', true)
64    const video_gif = node.getAttribute('video-gif')
65		let hoverImgEl = ''
66		if (node.querySelector('.unit-list-hover__image img')) {
67			hoverImgEl = node.querySelector('.unit-list-hover__image img')
68			hoverImgEl.setAttribute('lazy-src', video_gif)
69			const wrapper = node.children[0].querySelector('.base-video__thumb').cloneNode(true)
70      wrapper.querySelector('.base-image__item').innerHTML = hoverImgEl.outerHTML
71			node.querySelector('.unit-list-hover__image').innerHTML = wrapper.outerHTML
72			const hoverImg = node.querySelector('.unit-list-hover__image img')
73			new LazyImg(hoverImg)
74			// node.querySelector('.unit-list-hover__image img').setAttribute('lazy-type', '')
75		} else {
76			hoverImgEl = document.createElement('div')
77			hoverImgEl.classList.add('unit-list-hover__image', 'hover_img_before_load')
78			const wrapper = node.children[0].querySelector('.base-video__thumb').cloneNode(true)
79      wrapper.querySelector('.base-image__item').innerHTML = `<img class="base-image__img img-fluid" lazy-src="${video_gif}"  alt="">`
80			hoverImgEl.innerHTML = wrapper.outerHTML
81			const hoverImg = hoverImgEl.querySelector('.unit-list-hover__image img')
82			new LazyImg(hoverImg)
83      node.querySelector('.base-video__preview').appendChild(hoverImgEl)
84		}
85	}
86  /** 初始化渲染 */
87  _initRender() {
88    if (Utilts.ins().checkDesign()) {
89      // 设计模式下不考虑设置折叠，以免反复添加节点
90      return
91    }
92    // 计算折叠面包屑
93    const $omt = document.createElement('li')
94    $omt.classList.add('unit-breradcrumb__omit', 'breadcrumb-item')
95    $omt.innerHTML = `<span class="icon-base-dot iconfont"></span><ul class="unit-breradcrumb__omit-ul">${this.$olDom.innerHTML}</ul>`
96    // 面包屑长度
97    Array.from(this.$liDom).forEach($el => this.liWidth += $el.offsetWidth)
98    // 面包屑小于盒子的长度， 不操作
99    if (this.liWidth < this.navWidth) return
100    Array.from(this.$liDom).forEach(($li, index) => {
101      if (index < this.liDomLen - 1 && index ) $li.style.display = 'none'
102    })
103    if(this.liDomLen > 2) Utilts.ins().afterNode(this.$liDom[0], $omt)
104  }
105  /** 展开功能 */
106  _setOmitShowOrHide() {
107    const $omit = this.$olDom.querySelector('.unit-breradcrumb__omit span')
108    const $omit_ul = this.$olDom.querySelector('.unit-breradcrumb__omit-ul')
109    if (!$omit) return
110    $omit.addEventListener('click', () => {
111      if (!$omit_ul.classList.contains('active'))  $omit_ul.classList.add('active')
112      else $omit_ul.classList.remove('active')
113    })
114    document.body.addEventListener('click', (e) => {
115      if (e.target === $omit) return
116      $omit_ul.classList.remove('active')
117    })
118  }
119}