generated from boboko/starter
29 lines
938 B
JavaScript
29 lines
938 B
JavaScript
|
import { Controller } from '@hotwired/stimulus'
|
||
|
|
|
||
|
|
// The search overlay is a [popover] that must sit exactly over the header. The
|
||
|
|
// header has no fixed height below `lg`, so on open we copy its current height
|
||
|
|
// onto --search-overlay-h and move focus into the field. Escape / click-away
|
||
|
|
// close come from the Popover API; the fade is CSS (#search-overlay).
|
||
|
|
export default class extends Controller {
|
||
|
|
static targets = ['input']
|
||
|
|
|
||
|
|
connect() {
|
||
|
|
this.element.addEventListener('toggle', this.#onToggle)
|
||
|
|
}
|
||
|
|
|
||
|
|
disconnect() {
|
||
|
|
this.element.removeEventListener('toggle', this.#onToggle)
|
||
|
|
}
|
||
|
|
|
||
|
|
#onToggle = (event) => {
|
||
|
|
if (event.newState !== 'open') return
|
||
|
|
|
||
|
|
const header = this.element.closest('header')
|
||
|
|
if (header) {
|
||
|
|
this.element.style.setProperty('--search-overlay-h', `${header.offsetHeight}px`)
|
||
|
|
}
|
||
|
|
|
||
|
|
requestAnimationFrame(() => this.inputTarget.focus())
|
||
|
|
}
|
||
|
|
}
|