/** * Popover exits in every engine: a popover marked `data-md-popover-exit` fades or shrinks out on * its own transitions, however it closes — `hidePopover()` from a component's script, Escape, a * press outside it, or another popover opening. * * A closed popover leaves the top layer and takes `display: none` at once. Chrome and Safari could * hold both for a transition (`transition-behavior: allow-discrete` on `display` and `overlay`); * Firefox transitions neither (MDN browser-compat-data, `display.is_transitionable`), so there every * exit vanished on its first frame. Nor can a script hold the popover open: `beforetoggle` cannot be * cancelled on the way out, and the browser's own light dismiss never asks. * * So the popover closes for real, at once — its focus, `aria-expanded` and `toggle` event are the * browser's as before — and a copy of it, taken in `beforetoggle` while it is still drawn, stands * in its place for the exit. The copy is decoration: `popover="manual"` (the top layer, above what * the popover was above, without closing any other popover), inert, hidden from assistive * technology, without ids or nested popovers, and `x-ignore`, so Alpine does not start the * components it holds. It is pinned to the popover's box, shown with its transitions off (its * `@starting-style` would otherwise replay the entry), and then marked `data-md-popover-closing`, * which the component's stylesheet turns into its closed values (`:popover-open:not(…)`), so the * copy moves on the component's own durations and springs. It is removed when the longest of them * has run; under reduced motion they are zero, and there is no copy at all. */ const EXIT = '[data-md-popover-exit]' const GHOST = 'data-md-popover-ghost' const CLOSING = 'data-md-popover-closing' /** The copy each popover's exit is showing, so opening the popover again takes it away. */ const ghosts = new WeakMap() /** The longest `transition-duration` + `transition-delay` pair on an element, in ms. */ const longestTransition = (element) => { const style = getComputedStyle(element) const durations = style.transitionDuration.split(',').map((value) => parseFloat(value) * (value.trim().endsWith('ms') ? 1 : 1000)) const delays = style.transitionDelay.split(',').map((value) => parseFloat(value) * (value.trim().endsWith('ms') ? 1 : 1000)) return Math.max(0, ...durations.map((duration, index) => duration + (delays[index % delays.length] || 0))) } /** Out of the DOM, which takes it off the top layer without a `beforetoggle` or `toggle` of its own. */ const remove = (ghost) => ghost.remove() /** * A still copy of the popover, pinned where it is drawn. Colours come from custom properties an * ancestor may set (a vibrant menu's `--material-menu-surface`), which the copy loses at the end of * ``, so the root's resolved colours travel with it. */ const copyOf = (popover) => { const box = popover.getBoundingClientRect() const style = getComputedStyle(popover) const ghost = popover.cloneNode(true) ghost.querySelectorAll('[popover]').forEach((nested) => nested.remove()) ghost.querySelectorAll('[id]').forEach((element) => element.removeAttribute('id')) ghost.removeAttribute('id') ghost.removeAttribute(EXIT.slice(1, -1)) ghost.setAttribute('popover', 'manual') ghost.setAttribute(GHOST, '') ghost.setAttribute('x-ignore', '') ghost.setAttribute('aria-hidden', 'true') ghost.inert = true Object.assign(ghost.style, { position: 'fixed', inset: 'auto', left: `${box.left}px`, top: `${box.top}px`, width: `${box.width}px`, height: `${box.height}px`, margin: '0', positionAnchor: 'none', positionArea: 'none', positionTryFallbacks: 'none', pointerEvents: 'none', backgroundColor: style.backgroundColor, color: style.color, }) return { ghost, scrollTop: popover.scrollTop } } const exit = ({ ghost, scrollTop }, popover) => { const still = [ghost, ...ghost.querySelectorAll('*')] const transitions = still.map((element) => element.style.transition) still.forEach((element) => (element.style.transition = 'none')) document.body.append(ghost) ghost.showPopover() ghost.scrollTop = scrollTop // Resolve the open values with no transition, then give the transitions back and close. still.forEach((element) => getComputedStyle(element).opacity) still.forEach((element, index) => (element.style.transition = transitions[index])) ghost.setAttribute(CLOSING, '') const duration = Math.max(...still.map(longestTransition)) ghosts.set(popover, ghost) setTimeout(() => { remove(ghost) if (ghosts.get(popover) === ghost) { ghosts.delete(popover) } }, duration) } document.addEventListener( 'beforetoggle', (event) => { const popover = event.target if (!(popover instanceof HTMLElement) || !popover.matches(EXIT)) { return } const previous = ghosts.get(popover) if (previous) { ghosts.delete(popover) remove(previous) } if (event.newState !== 'closed') { return } // Under reduced motion every duration token is zero: nothing to show on the way out. if (Math.max(...[popover, ...popover.querySelectorAll('*')].map(longestTransition)) === 0) { return } // Taken now, while the popover is still drawn; shown in the next frame, before it is // painted without the popover, so neither `showPopover()` runs inside the browser's own // hiding nor a frame goes by with nothing on screen. const copy = copyOf(popover) requestAnimationFrame(() => exit(copy, popover)) }, true, )