simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Scoped keyboard shortcuts

Browse source
This commit is contained in:
Lim Chee Aun 2023-02-06 23:47:58 +08:00
parent 4520822f1f
commit db428c04d1
1 changed files with 103 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/pages/home.jsx
View file

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