Browse Source

Second click removes focus

master
Dejvino 1 year ago
parent
commit
902f7b289f
1 changed files with 10 additions and 6 deletions
  1. +10
    -6
      src/app/FocusedElement.tsx

+ 10
- 6
src/app/FocusedElement.tsx View File

@@ -4,23 +4,27 @@ const focusUrlParamName = 'focus'
const focusChangedEventName = "focus-changed" const focusChangedEventName = "focus-changed"
const focusedElementClassName = 'focused-element' const focusedElementClassName = 'focused-element'


function triggerElementFocused(elementKey: string) {
function triggerElementFocused(elementKey?: string) {
const url = new URL(window.location.href); 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); history.pushState({}, "", url);
window.dispatchEvent(focusChangeEvent) window.dispatchEvent(focusChangeEvent)
} }


export function useFocusedElement(elementKey: string) { export function useFocusedElement(elementKey: string) {
const [isFocusedElement, setFocusedElement] = useState(false);
const [isFocusedElement, setFocusedElement] = useState(false)
const focusedClass = isFocusedElement ? focusedElementClassName : '' const focusedClass = isFocusedElement ? focusedElementClassName : ''
const elementRef = useRef<HTMLSpanElement>(null) const elementRef = useRef<HTMLSpanElement>(null)


function focusElement() { function focusElement() {
triggerElementFocused(elementKey)
triggerElementFocused(isFocusedElement ? undefined : elementKey)
} }
useEffect(() => { useEffect(() => {
function getFocusedState() { function getFocusedState() {
const params = new URLSearchParams(window.location.search) const params = new URLSearchParams(window.location.search)


Loading…
Cancel
Save