Scoped keyboard shortcuts

pull/54/head
Lim Chee Aun 2023-02-06 23:47:58 +08:00
rodzic 4520822f1f
commit db428c04d1
1 zmienionych plików z 103 dodań i 111 usunięć

Wyświetl plik

@ -21,7 +21,6 @@ function Home({ hidden }) {
useTitle('Home', '/');
const { masto, instance } = api();
const snapStates = useSnapshot(states);
const isHomeLocation = snapStates.currentLocation === '/';
const [uiState, setUIState] = useState('default');
const [showMore, setShowMore] = useState(false);
@ -149,9 +148,7 @@ function Home({ hidden }) {
const scrollableRef = useRef();
useHotkeys(
'j, shift+j',
(_, handler) => {
const jRef = useHotkeys('j, shift+j', (_, handler) => {
// focus on next status after active status
// Traverses .timeline li .status-link, focus on .status-link
const activeStatus = document.activeElement.closest(
@ -193,15 +190,9 @@ function Home({ hidden }) {
topmostStatusLink.scrollIntoViewIfNeeded?.();
}
}
},
{
enabled: isHomeLocation,
},
);
});
useHotkeys(
'k, shift+k',
(_, handler) => {
const kRef = useHotkeys('k, shift+k', (_, handler) => {
// focus on previous status after active status
// Traverses .timeline li .status-link, focus on .status-link
const activeStatus = document.activeElement.closest(
@ -243,15 +234,9 @@ function Home({ hidden }) {
topmostStatusLink.scrollIntoViewIfNeeded?.();
}
}
},
{
enabled: isHomeLocation,
},
);
});
useHotkeys(
['enter', 'o'],
() => {
const oRef = useHotkeys(['enter', 'o'], () => {
// open active status
const activeStatus = document.activeElement.closest(
'.status-link, .status-boost-link',
@ -259,11 +244,7 @@ function Home({ hidden }) {
if (activeStatus) {
activeStatus.click();
}
},
{
enabled: isHomeLocation,
},
);
});
const {
scrollDirection,
@ -306,6 +287,12 @@ function Home({ hidden }) {
const [showUpdatesButton, setShowUpdatesButton] = useState(false);
useEffect(() => {
const isNewAndTop = snapStates.homeNew.length > 0 && reachStart;
console.log(
'isNewAndTop',
isNewAndTop,
snapStates.homeNew.length,
reachStart,
);
setShowUpdatesButton(isNewAndTop);
}, [snapStates.homeNew.length]);
@ -315,7 +302,12 @@ function Home({ hidden }) {
id="home-page"
class="deck-container"
hidden={hidden}
ref={scrollableRef}
ref={(node) => {
scrollableRef.current = node;
jRef.current = node;
kRef.current = node;
oRef.current = node;
}}
tabIndex="-1"
>
<div class="timeline-deck deck">