|
| 1 | +interface MatchFunction { |
| 2 | + (item: HTMLElement, itemText: string, query: string): MatchResult |
| 3 | +} |
| 4 | + |
| 5 | +interface MatchResult { |
| 6 | + match: boolean |
| 7 | + hideNew?: boolean |
| 8 | +} |
| 9 | + |
1 | 10 | class FilterInputElement extends HTMLElement { |
| 11 | + currentQuery: string | null |
| 12 | + debounceInputChange: () => void |
| 13 | + boundFilterResults: () => void |
| 14 | + filter: MatchFunction | null |
| 15 | + |
2 | 16 | constructor() { |
3 | 17 | super() |
| 18 | + this.currentQuery = null |
| 19 | + this.filter = null |
| 20 | + this.debounceInputChange = debounce(() => filterResults(this, true)) |
| 21 | + this.boundFilterResults = () => { |
| 22 | + filterResults(this, false) |
| 23 | + } |
| 24 | + } |
| 25 | + |
| 26 | + static get observedAttributes() { |
| 27 | + return ['aria-owns'] |
| 28 | + } |
| 29 | + |
| 30 | + attributeChangedCallback(name: string, oldValue: string) { |
| 31 | + if (oldValue && name === 'aria-owns') { |
| 32 | + filterResults(this, false) |
| 33 | + } |
4 | 34 | } |
5 | 35 |
|
6 | 36 | connectedCallback() { |
7 | | - this.textContent = ':wave:' |
| 37 | + const input = this.input |
| 38 | + if (!input) return |
| 39 | + |
| 40 | + input.setAttribute('autocomplete', 'off') |
| 41 | + input.setAttribute('spellcheck', 'false') |
| 42 | + |
| 43 | + input.addEventListener('focus', this.boundFilterResults) |
| 44 | + input.addEventListener('change', this.boundFilterResults) |
| 45 | + input.addEventListener('input', this.debounceInputChange) |
| 46 | + } |
| 47 | + |
| 48 | + disconnectedCallback() { |
| 49 | + const input = this.input |
| 50 | + if (!input) return |
| 51 | + |
| 52 | + input.removeEventListener('focus', this.boundFilterResults) |
| 53 | + input.removeEventListener('change', this.boundFilterResults) |
| 54 | + input.removeEventListener('input', this.debounceInputChange) |
| 55 | + } |
| 56 | + |
| 57 | + get input(): HTMLInputElement | null { |
| 58 | + const input = this.querySelector('input') |
| 59 | + return input instanceof HTMLInputElement ? input : null |
| 60 | + } |
| 61 | + |
| 62 | + reset() { |
| 63 | + const input = this.input |
| 64 | + if (input) { |
| 65 | + input.value = '' |
| 66 | + input.dispatchEvent(new Event('change', {bubbles: true})) |
| 67 | + } |
| 68 | + } |
| 69 | +} |
| 70 | + |
| 71 | +async function filterResults(filterInput: FilterInputElement, checkCurrentQuery: boolean = false) { |
| 72 | + const input = filterInput.input |
| 73 | + if (!input) return |
| 74 | + const query = input.value.toLowerCase() |
| 75 | + const id = filterInput.getAttribute('aria-owns') |
| 76 | + if (!id) return |
| 77 | + const container = document.getElementById(id) |
| 78 | + if (!container) return |
| 79 | + const list = container.hasAttribute('data-filter-list') ? container : container.querySelector('[data-filter-list]') |
| 80 | + if (!list) return |
| 81 | + |
| 82 | + filterInput.dispatchEvent( |
| 83 | + new CustomEvent('filter-input-start', { |
| 84 | + bubbles: true |
| 85 | + }) |
| 86 | + ) |
| 87 | + |
| 88 | + if (checkCurrentQuery && filterInput.currentQuery === query) return |
| 89 | + filterInput.currentQuery = query |
| 90 | + |
| 91 | + const filter = filterInput.filter || matchSubstring |
| 92 | + const total = list.childElementCount |
| 93 | + let count = 0 |
| 94 | + let hideNew = false |
| 95 | + |
| 96 | + for (const item of Array.from(list.children)) { |
| 97 | + if (!(item instanceof HTMLElement)) continue |
| 98 | + const itemText = getText(item) |
| 99 | + const result = filter(item, itemText, query) |
| 100 | + if (result.hideNew === true) hideNew = result.hideNew |
| 101 | + |
| 102 | + item.hidden = !result.match |
| 103 | + if (result.match) count++ |
| 104 | + } |
| 105 | + |
| 106 | + const newItem = container.querySelector('[data-filter-new-item]') |
| 107 | + const showCreateOption = !!newItem && query.length > 0 && !hideNew |
| 108 | + if (newItem instanceof HTMLElement) { |
| 109 | + newItem.hidden = !showCreateOption |
| 110 | + if (showCreateOption) updateNewItem(newItem, query) |
| 111 | + } |
| 112 | + |
| 113 | + toggleBlankslate(container, count > 0 || showCreateOption) |
| 114 | + |
| 115 | + filterInput.dispatchEvent( |
| 116 | + new CustomEvent('filter-input-updated', { |
| 117 | + bubbles: true, |
| 118 | + detail: { |
| 119 | + count, |
| 120 | + total |
| 121 | + } |
| 122 | + }) |
| 123 | + ) |
| 124 | +} |
| 125 | + |
| 126 | +function matchSubstring(_item: HTMLElement, itemText: string, query: string): MatchResult { |
| 127 | + const match = itemText.indexOf(query) !== -1 |
| 128 | + return { |
| 129 | + match, |
| 130 | + hideNew: itemText === query |
| 131 | + } |
| 132 | +} |
| 133 | + |
| 134 | +function getText(filterableItem: HTMLElement) { |
| 135 | + const target = filterableItem.querySelector('[data-filter-item-text]') || filterableItem |
| 136 | + return (target.textContent || '').trim().toLowerCase() |
| 137 | +} |
| 138 | + |
| 139 | +function updateNewItem(newItem: HTMLElement, query: string) { |
| 140 | + const newItemText = newItem.querySelector('[data-filter-new-item-text]') |
| 141 | + if (newItemText) newItemText.textContent = query |
| 142 | + const newItemValue = newItem.querySelector('[data-filter-new-item-value]') |
| 143 | + if (newItemValue instanceof HTMLInputElement || newItemValue instanceof HTMLButtonElement) { |
| 144 | + newItemValue.value = query |
| 145 | + } |
| 146 | +} |
| 147 | + |
| 148 | +function toggleBlankslate(container: HTMLElement, force: boolean) { |
| 149 | + const emptyState = container.querySelector('[data-filter-empty-state]') |
| 150 | + if (emptyState instanceof HTMLElement) emptyState.hidden = force |
| 151 | +} |
| 152 | + |
| 153 | +function debounce(callback: () => void) { |
| 154 | + let timeout: number |
| 155 | + return function() { |
| 156 | + clearTimeout(timeout) |
| 157 | + timeout = setTimeout(() => { |
| 158 | + clearTimeout(timeout) |
| 159 | + callback() |
| 160 | + }, 300) |
8 | 161 | } |
9 | 162 | } |
10 | 163 |
|
|
0 commit comments