https://cengli88.pages.dev/assets/js/search-form.js

1/** Shopify CDN: Minification failed
2
3Line 12:0 Transforming class syntax to the configured target environment ("es5") is not supported yet
4Line 13:13 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
5Line 29:19 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
6Line 30:4 Transforming const to the configured target environment ("es5") is not supported yet
7Line 38:10 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
8Line 42:17 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
9Line 46:13 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
10
11**/
12class SearchForm extends HTMLElement {
13  constructor() {
14    super();
15    this.input = this.querySelector('input[type="search"]');
16    this.resetButton = this.querySelector('button[type="reset"]');
17
18    if (this.input) {
19      this.input.form.addEventListener('reset', this.onFormReset.bind(this));
20      this.input.addEventListener(
21        'input',
22        debounce((event) => {
23          this.onChange(event);
24        }, 300).bind(this)
25      );
26    }
27  }
28
29  toggleResetButton() {
30    const resetIsHidden = this.resetButton.classList.contains('hidden');
31    if (this.input.value.length > 0 && resetIsHidden) {
32      this.resetButton.classList.remove('hidden');
33    } else if (this.input.value.length === 0 && !resetIsHidden) {
34      this.resetButton.classList.add('hidden');
35    }
36  }
37
38  onChange() {
39    this.toggleResetButton();
40  }
41
42  shouldResetForm() {
43    return !document.querySelector('[aria-selected="true"] a');
44  }
45
46  onFormReset(event) {
47    // Prevent default so the form reset doesn't set the value gotten from the url on page load
48    event.preventDefault();
49    // Don't reset if the user has selected an element on the predictive search dropdown
50    if (this.shouldResetForm()) {
51      this.input.value = '';
52      this.input.focus();
53      this.toggleResetButton();
54    }
55  }
56}
57
58customElements.define('search-form', SearchForm);