2023-05-25 04:42:30 +00:00
|
|
|
import { useState, useRef, useEffect } from "react";
|
|
|
|
|
|
|
|
const focusUrlParamName = 'focus'
|
|
|
|
const focusChangedEventName = "focus-changed"
|
|
|
|
const focusedElementClassName = 'focused-element'
|
|
|
|
|
2023-05-25 09:44:35 +00:00
|
|
|
function triggerElementFocused(elementKey?: string) {
|
2023-05-25 04:42:30 +00:00
|
|
|
const url = new URL(window.location.href);
|
2023-05-25 09:44:35 +00:00
|
|
|
if (elementKey) {
|
|
|
|
url.searchParams.set(focusUrlParamName, elementKey)
|
|
|
|
} else {
|
|
|
|
url.searchParams.delete(focusUrlParamName)
|
|
|
|
}
|
|
|
|
const focusChangeEvent = new Event(focusChangedEventName)
|
2023-05-25 04:42:30 +00:00
|
|
|
history.pushState({}, "", url);
|
|
|
|
window.dispatchEvent(focusChangeEvent)
|
|
|
|
}
|
|
|
|
|
|
|
|
export function useFocusedElement(elementKey: string) {
|
2023-05-25 09:44:35 +00:00
|
|
|
const [isFocusedElement, setFocusedElement] = useState(false)
|
2023-05-25 04:42:30 +00:00
|
|
|
const focusedClass = isFocusedElement ? focusedElementClassName : ''
|
|
|
|
const elementRef = useRef<HTMLSpanElement>(null)
|
|
|
|
|
|
|
|
function focusElement() {
|
2023-05-25 09:44:35 +00:00
|
|
|
triggerElementFocused(isFocusedElement ? undefined : elementKey)
|
2023-05-25 04:42:30 +00:00
|
|
|
}
|
2023-05-25 09:44:35 +00:00
|
|
|
|
2023-05-25 04:42:30 +00:00
|
|
|
useEffect(() => {
|
|
|
|
function getFocusedState() {
|
|
|
|
const params = new URLSearchParams(window.location.search)
|
|
|
|
const focusedElement = params.get(focusUrlParamName)
|
|
|
|
const focused: boolean = focusedElement && focusedElement == elementKey || false
|
|
|
|
setFocusedElement(focused)
|
|
|
|
}
|
|
|
|
|
|
|
|
getFocusedState()
|
|
|
|
addEventListener(focusChangedEventName, getFocusedState)
|
|
|
|
return () => {
|
|
|
|
removeEventListener(focusChangedEventName, getFocusedState)
|
|
|
|
}
|
|
|
|
}, [elementKey, setFocusedElement])
|
|
|
|
|
|
|
|
isFocusedElement && elementRef.current?.scrollIntoView()
|
|
|
|
|
|
|
|
return {isFocusedElement, focusedClass, elementRef, focusElement}
|
|
|
|
}
|