https://www.hardvogue.com/assets/js/unit/type-tabs.js

1class ScriptTypeTabs extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    this.$swiperButtonPrev = this.$dom.querySelector('.swiper-button-prev')
6    this.$swiperButtonNext = this.$dom.querySelector('.swiper-button-next')
7    this.$tabsHeader = this.$dom.querySelector(`.unit-type-tabs__header`)
8    this.$tabsNavWrap = this.$dom.querySelector(`.unit-type-tabs__nav-wrap`)
9    this.$tabItems = this.$dom.querySelectorAll('.unit-type-tabs__nav-item')
10
11    this.pageInfo = JSON.parse(decodeURIComponent(params.pageInfo || '{}'))
12    this.config = JSON.parse(this.utilts.htmlDecode(params.config))
13    this.tab_list = JSON.parse(this.utilts.htmlDecode(params.tab_list).replace(/\n<\s*br\s*\/*\s*>/ig, '<br/>').replace(/\n<\s*p\s*>/ig, '<p>').replace(/<\s*p\s*>\n/ig, '<p>').replace(/\n<\s*\/p\s*>/ig, '</p>'))
14
15    this.activeIndex = 0
16    if (window.app.info.faq_type_id) {
17      Array.prototype.some.call(this.$tabItems, (item, index) => {
18        if (item.getAttribute('content-id') === window.app.info.faq_type_id) {
19          this.activeIndex = index
20          return true
21        }
22      })
23    }
24  }
25
26  async init() {
27    // siwper
28    if (!window.Swiper) await new Load('/assets/plugins/swiper.min.js')
29    this.initTab()
30  }
31  initTab() {
32    this.$tabsSwiper?.destroy(true, true)
33    this.$tabItems.forEach((it, i) => {
34      if (i === this.activeIndex) {
35        it.classList.add('active')
36      } else {
37        it.classList.remove('active')
38      }
39    })
40
41    const swiperConfig = {
42      slidesPerView: 'auto',
43      spaceBetween: 0,
44      initialSlide: this.activeIndex,
45      freeMode: true,
46      navigation: {
47        prevEl: '.swiper-button-prev',
48        nextEl: '.swiper-button-next',
49      },
50      on: {}
51    }
52    swiperConfig.spaceBetween = this.initBetween()
53    this.$tabsSwiper = new Swiper(`#${this.attrId} .unit-type-tabs__header`, swiperConfig)
54    this.$tabsSwiper.on('resize', this.utilts.debounce((swiper) => {
55      swiper.params.spaceBetween = this.initBetween()
56      swiper.update()
57    }))
58    this.initEvent()
59  }
60  initBetween() { // 去掉间距，读取间距的值传给swiper处理
61    this.$dom.querySelector(`#initBetween_${this.attrId}`)?.remove()
62    const itemClass = 'unit-type-tabs__nav-item'
63    const $itemFirst = this.$dom.querySelector(`.${itemClass}`)
64    if (!$itemFirst) return
65    const style = this.utilts.getNodeStyle($itemFirst)
66    const item_pr = parseFloat(style.paddingRight) || 0
67    const item_pl = parseFloat(style.paddingLeft) || 0
68    // const item_mr = parseFloat(style.marginRight) || 0
69    // const item_ml = parseFloat(style.marginLeft) || 0
70    
71    // console.log(item_pr , item_pl , item_mr , item_ml);
72    
73    const $style = document.createElement('style')
74    $style.setAttribute('id', `initBetween_${this.attrId}`)
75    /* 如果nav-item超过宽度，清空居中 */
76    let itemWidthSum = 0
77    let isClearJustifyContent = false
78    this.$dom.querySelectorAll('.unit-type-tabs__nav-item').forEach(item => {
79      itemWidthSum += item.offsetWidth
80    })
81    itemWidthSum -= item_pr + item_pl;
82    if (itemWidthSum > this.$tabsHeader.offsetWidth) {
83      isClearJustifyContent = true
84    }
85    
86    let html = `#${this.attrId} .unit-type-tabs__header .unit-type-tabs__nav-wrap {margin:0!important;width: calc(100% + ${item_pr + item_pl}px);${isClearJustifyContent? 'justify-content: flex-start;': ''}}
87    #${this.attrId} .unit-type-tabs__header .${itemClass}{margin-left:0!important;padding:0!important}`
88    
89    $style.innerHTML = html
90    this.$dom.appendChild($style)
91    return item_pr + item_pl /*+ item_mr + item_ml*/
92  }
93  initEvent() {
94    this.$tabItems.forEach((item, index) => {
95      const handleClick = (e) => this.tabClick(e, index)
96      if (this.utilts.checkDesign()) {
97        if (typeof item.removeMyEvent === 'function') item.removeMyEvent()
98        item.removeMyEvent = () => item.removeEventListener('click', handleClick)
99      }
100      item.addEventListener('click', handleClick)
101    })
102    if (!this.utilts.checkDesign()) {
103      const handleSticky = () => {
104        let offsetTop = 0
105        let headerBlock = document.querySelector(`[package-block-type="header"]`)
106        if (['2'].includes(headerBlock?.getAttribute('position')) || (['3'].includes(headerBlock?.getAttribute('position')) && this.utilts.getScreen() !== 'xl')) {
107          offsetTop = headerBlock.offsetHeight
108        } else if (['3'].includes(headerBlock?.getAttribute('position'))){
109          offsetTop = () => {
110            if (headerBlock.classList.contains('header-hide')) {
111              return 0
112            }
113            return headerBlock.offsetHeight
114          }
115        }
116        this.utilts.stickyByViewport(this.$dom, offsetTop, 999)
117      }
118      handleSticky()
119      window.addEventListener('resize', this.utilts.debounce(handleSticky));
120    }
121  }
122  tabChange(e, index) {
123    this.activeIndex = index

124    this.$tabItems.forEach(it => it.classList.remove('active'))
125    this.$tabItems[index].classList.add('active')
126
127    window.app.info.pagination.page_number = 1
128    window.app.info.faq_type_id = this.$tabItems[index].getAttribute('content-id')
129    window.app.info.renderFAQList({
130			keyword: '',
131			page_number:1,
132      page_size: this.pageInfo.page_size,
133      faq_type_id: window.app.info.faq_type_id,
134      page_category_id: window.app.info.page.page_category_id,
135		})
136  }
137  tabClick(e, index) {
138    this.tabChange(e, index)
139  }
140}