https://www.endlesslypools.com/assets/js/unit/header-search.js

1class ScriptHeaderSearch extends Script {
2  constructor(params) {
3    super(params)
4    this.showInput = params.showInput
5    this.$dom = document.querySelector(`#${this.attrId}`)
6    this.$box = this.$dom.querySelector('.unit-header-search__box')
7    this.$btn = this.$dom.querySelector('.unit-header-search__btn')
8    this.$input = this.$dom.querySelector('.unit-header-search__input')
9    this.$modal = this.$dom.querySelector('.unit-header-search__modal')
10    this.$modalBtn = this.$dom.querySelector('.unit-header-search__modal-btn')
11    this.$modalInput = this.$dom.querySelector('.unit-header-search__modal-input')
12    this.$close = this.$dom.querySelector('.unit-header-search__modal-close')
13    this.isGroup = this.$box.hasAttribute('group')
14    this.$cSearchMask = null
15    this.$cSearchBox = null
16  }
17  init() {
18    if (!window.app.info.utilts.checkDesign()) {
19      this.initBtnEvent()
20      this.initInputEvent()
21      if (!this.isGroup) this.initCloseSearchPop()
22    }
23  }
24  initBtnEvent() {
25    if (this.$btn) {
26      this.$btn.addEventListener('click', (e) => {
27        if (this.showInput !== '1') {
28          e.stopPropagation()
29          this.setSearchMask()
30        }
31        if (this.isGroup) this.toSearch()
32      })
33    }
34    if (this.$modalBtn) this.$modalBtn.addEventListener('click', (e) => this.toSearch())
35    window.addEventListener('scroll', () => {
36      this.hideSearchBox()
37    })
38    window.addEventListener('click', (e) => {
39      if (this.$cSearchBox && !this.$cSearchBox.contains(e.target) && e.target !== this.$btn && !this.$btn.contains(e.target)) this.hideSearchBox()
40    })
41  }
42  setSearchMask() {
43    if (this.$cSearchBox && this.$cSearchBox.querySelector('.unit-header-search__modal.show')) {
44      this.hideSearchBox()
45      return false
46    }
47    this.$cSearchMask = document.querySelector('.search-mask')
48    if (!this.$cSearchMask) {
49      this.$cSearchMask = document.createElement('div')
50      this.$cSearchMask.classList.add('search-mask')
51      this.$cSearchMask.innerHTML = `<div class="search-mask-body"></div>`
52      document.body.appendChild(this.$cSearchMask)
53    }
54    this.$cSearchMask.querySelector('.search-mask-body').classList.add('show')
55    this.$cSearchMask.style.top = document.querySelector(`[package-type="header"]`).offsetHeight + 'px'
56    this.$cSearchBox = document.querySelector('.unit-header-search__modal-box')
57    if (!this.$cSearchBox) {
58      this.$cSearchBox = document.createElement('div')
59      this.$cSearchBox.classList.add('unit-header-search__modal-box')
60      document.querySelector(`[package-type="header"] [package-group="module"]`).appendChild(this.$cSearchBox)
61    }
62    this.$cSearchBox.innerHTML = `<div class="unit-header-search__modal">${this.$modal.innerHTML}</div>`
63    this.$cSearchBox.querySelector('.unit-header-search__modal').classList.add('show')
64    this.$cSearchBox.querySelector('.unit-header-search__modal .unit-header-search__modal-input').focus()
65    document.querySelector(`[package-type="header"]`).style['background-color'] = `var(--header-bg) !important`
66    this.searchInputEvent()
67  }
68  searchInputEvent() {

69    let cSearchBoxInput = this.$cSearchBox.querySelector('.unit-header-search__modal .unit-header-search__modal-input')
70    if (cSearchBoxInput) {
71      cSearchBoxInput.addEventListener('keypress', (e) => {
72        if (e.key === 'Enter') this.toSearch(cSearchBoxInput.value)
73      })
74    }
75    let cSearchBoxSearchBtn = this.$cSearchBox.querySelector('.unit-header-search__modal .unit-header-search__modal-btn')
76    if (cSearchBoxSearchBtn) cSearchBoxSearchBtn.addEventListener('click', (e) => this.toSearch(cSearchBoxInput.value))
77    let cSearchBoxClose = this.$cSearchBox.querySelector('.unit-header-search__modal .unit-header-search__modal-close')
78    if (cSearchBoxClose) {
79      cSearchBoxClose.classList.add('d-none')
80      cSearchBoxClose.addEventListener('click', () => {
81        cSearchBoxInput.value = ''
82        cSearchBoxClose.classList.add('d-none')
83      })
84      cSearchBoxInput.addEventListener('keyup', (e) => {
85        if (cSearchBoxInput.value.trim()) cSearchBoxClose.classList.remove('d-none')
86        else cSearchBoxClose.classList.add('d-none')
87      })
88    }
89  }
90  hideSearchBox() {
91    if (this.$cSearchBox && this.$cSearchBox.querySelector('.unit-header-search__modal.show')) {
92      if (this.$cSearchMask) this.$cSearchMask.querySelector('.search-mask-body').classList.remove('show')
93      this.$cSearchBox.innerHTML = ''
94      // document.querySelector(`[package-type="header"]`).removeAttribute('style')
95      document.querySelector(`[package-type="header"]`).style['background-color'] = ``
96    }
97  }
98  initInputEvent() {
99    if (this.$input) {
100      this.$input.addEventListener('keypress', (e) => {
101        if (e.key === 'Enter') this.toSearch()
102      })
103    }
104    if (this.$modalInput) {
105      this.$modalInput.addEventListener('keypress', (e) => {
106        if (e.key === 'Enter') this.toSearch()
107      })
108    }
109  }
110  initCloseSearchPop() {
111    if (this.$close) {
112      this.$close.addEventListener('click', () => {
113        this.$modalInput.value = ''
114      })
115    }
116  }
117  toSearch(value) {
118    const content = value || this.$input.value || this.$modalInput.value
119    // 清除缓存里的搜索参数
120    this.utilts.removeItem('search-pattern')
121    if (content) window.location.href = globalThis.Server.getRinseHref(`/search.html?keyword=${content}`, window.app.info.site)
122  }
123}