|
|
@@ -4,23 +4,27 @@ const focusUrlParamName = 'focus' |
|
|
|
const focusChangedEventName = "focus-changed" |
|
|
|
const focusedElementClassName = 'focused-element' |
|
|
|
|
|
|
|
function triggerElementFocused(elementKey: string) { |
|
|
|
function triggerElementFocused(elementKey?: string) { |
|
|
|
const url = new URL(window.location.href); |
|
|
|
url.searchParams.set(focusUrlParamName, elementKey); |
|
|
|
const focusChangeEvent = new Event(focusChangedEventName); |
|
|
|
if (elementKey) { |
|
|
|
url.searchParams.set(focusUrlParamName, elementKey) |
|
|
|
} else { |
|
|
|
url.searchParams.delete(focusUrlParamName) |
|
|
|
} |
|
|
|
const focusChangeEvent = new Event(focusChangedEventName) |
|
|
|
history.pushState({}, "", url); |
|
|
|
window.dispatchEvent(focusChangeEvent) |
|
|
|
} |
|
|
|
|
|
|
|
export function useFocusedElement(elementKey: string) { |
|
|
|
const [isFocusedElement, setFocusedElement] = useState(false); |
|
|
|
const [isFocusedElement, setFocusedElement] = useState(false) |
|
|
|
const focusedClass = isFocusedElement ? focusedElementClassName : '' |
|
|
|
const elementRef = useRef<HTMLSpanElement>(null) |
|
|
|
|
|
|
|
function focusElement() { |
|
|
|
triggerElementFocused(elementKey) |
|
|
|
triggerElementFocused(isFocusedElement ? undefined : elementKey) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
function getFocusedState() { |
|
|
|
const params = new URLSearchParams(window.location.search) |
|
|
|