| |
| |
| |
| |
| |
| |
| |
| |
|
|
| |
| export const CSS_PSEUDO_FULLSCREEN_TARGET_CLASS = 'css-pseudo-fullscreen-target'; |
|
|
| const BODY_LOCK_CLASS = 'css-pseudo-fullscreen-body-lock'; |
|
|
| |
| export const CSS_PSEUDO_FULLSCREEN_CHANGE_EVENT = 'css-pseudo-fullscreen-change'; |
|
|
| let activeTarget: HTMLElement | null = null; |
| let escapeListener: ((e: KeyboardEvent) => void) | null = null; |
|
|
| function teardownEscape(): void { |
| if (escapeListener) { |
| document.removeEventListener('keydown', escapeListener); |
| escapeListener = null; |
| } |
| } |
|
|
| function notifyChange(): void { |
| document.dispatchEvent(new CustomEvent(CSS_PSEUDO_FULLSCREEN_CHANGE_EVENT)); |
| } |
|
|
| export function cssPseudoFullscreenIsActive(el?: HTMLElement): boolean { |
| if (!activeTarget) return false; |
| return el === undefined ? true : activeTarget === el; |
| } |
|
|
| export function cssPseudoFullscreenEnter(el: HTMLElement): void { |
| if (activeTarget === el) return; |
| if (activeTarget && activeTarget !== el) cssPseudoFullscreenExit(); |
| activeTarget = el; |
| activeTarget.classList.add(CSS_PSEUDO_FULLSCREEN_TARGET_CLASS); |
| document.body.classList.add(BODY_LOCK_CLASS); |
| teardownEscape(); |
| |
| escapeListener = (e: KeyboardEvent): void => { |
| if (e.key === 'Escape') { |
| cssPseudoFullscreenExit(); |
| } |
| }; |
| document.addEventListener('keydown', escapeListener); |
| notifyChange(); |
| } |
|
|
| export function cssPseudoFullscreenExit(el?: HTMLElement): void { |
| if (!activeTarget) return; |
| if (el !== undefined && activeTarget !== el) return; |
| activeTarget.classList.remove(CSS_PSEUDO_FULLSCREEN_TARGET_CLASS); |
| document.body.classList.remove(BODY_LOCK_CLASS); |
| activeTarget = null; |
| teardownEscape(); |
| notifyChange(); |
| } |
|
|