diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 4f332bcc..95378351 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -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,121 +148,103 @@ function Home({ hidden }) { const scrollableRef = useRef(); - 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( + 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( + '.status-link, .status-boost-link', + ); + const activeStatusRect = activeStatus?.getBoundingClientRect(); + const allStatusLinks = Array.from( + scrollableRef.current.querySelectorAll( '.status-link, .status-boost-link', - ); - const activeStatusRect = activeStatus?.getBoundingClientRect(); - const allStatusLinks = Array.from( - scrollableRef.current.querySelectorAll( - '.status-link, .status-boost-link', - ), - ); - if ( - activeStatus && - activeStatusRect.top < scrollableRef.current.clientHeight && - activeStatusRect.bottom > 0 - ) { - const activeStatusIndex = allStatusLinks.indexOf(activeStatus); - let nextStatus = allStatusLinks[activeStatusIndex + 1]; - if (handler.shift) { - // get next status that's not .status-boost-link - nextStatus = allStatusLinks.find( - (statusLink, index) => - index > activeStatusIndex && - !statusLink.classList.contains('status-boost-link'), - ); - } - if (nextStatus) { - nextStatus.focus(); - nextStatus.scrollIntoViewIfNeeded?.(); - } - } else { - // If active status is not in viewport, get the topmost status-link in viewport - const topmostStatusLink = allStatusLinks.find((statusLink) => { - const statusLinkRect = statusLink.getBoundingClientRect(); - return statusLinkRect.top >= 44 && statusLinkRect.left >= 0; // 44 is the magic number for header height, not real - }); - if (topmostStatusLink) { - topmostStatusLink.focus(); - topmostStatusLink.scrollIntoViewIfNeeded?.(); - } + ), + ); + if ( + activeStatus && + activeStatusRect.top < scrollableRef.current.clientHeight && + activeStatusRect.bottom > 0 + ) { + const activeStatusIndex = allStatusLinks.indexOf(activeStatus); + let nextStatus = allStatusLinks[activeStatusIndex + 1]; + if (handler.shift) { + // get next status that's not .status-boost-link + nextStatus = allStatusLinks.find( + (statusLink, index) => + index > activeStatusIndex && + !statusLink.classList.contains('status-boost-link'), + ); } - }, - { - enabled: isHomeLocation, - }, - ); + if (nextStatus) { + nextStatus.focus(); + nextStatus.scrollIntoViewIfNeeded?.(); + } + } else { + // If active status is not in viewport, get the topmost status-link in viewport + const topmostStatusLink = allStatusLinks.find((statusLink) => { + const statusLinkRect = statusLink.getBoundingClientRect(); + return statusLinkRect.top >= 44 && statusLinkRect.left >= 0; // 44 is the magic number for header height, not real + }); + if (topmostStatusLink) { + topmostStatusLink.focus(); + topmostStatusLink.scrollIntoViewIfNeeded?.(); + } + } + }); - 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( + 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( + '.status-link, .status-boost-link', + ); + const activeStatusRect = activeStatus?.getBoundingClientRect(); + const allStatusLinks = Array.from( + scrollableRef.current.querySelectorAll( '.status-link, .status-boost-link', - ); - const activeStatusRect = activeStatus?.getBoundingClientRect(); - const allStatusLinks = Array.from( - scrollableRef.current.querySelectorAll( - '.status-link, .status-boost-link', - ), - ); - if ( - activeStatus && - activeStatusRect.top < scrollableRef.current.clientHeight && - activeStatusRect.bottom > 0 - ) { - const activeStatusIndex = allStatusLinks.indexOf(activeStatus); - let prevStatus = allStatusLinks[activeStatusIndex - 1]; - if (handler.shift) { - // get prev status that's not .status-boost-link - prevStatus = allStatusLinks.findLast( - (statusLink, index) => - index < activeStatusIndex && - !statusLink.classList.contains('status-boost-link'), - ); - } - if (prevStatus) { - prevStatus.focus(); - prevStatus.scrollIntoViewIfNeeded?.(); - } - } else { - // If active status is not in viewport, get the topmost status-link in viewport - const topmostStatusLink = allStatusLinks.find((statusLink) => { - const statusLinkRect = statusLink.getBoundingClientRect(); - return statusLinkRect.top >= 44 && statusLinkRect.left >= 0; // 44 is the magic number for header height, not real - }); - if (topmostStatusLink) { - topmostStatusLink.focus(); - topmostStatusLink.scrollIntoViewIfNeeded?.(); - } + ), + ); + if ( + activeStatus && + activeStatusRect.top < scrollableRef.current.clientHeight && + activeStatusRect.bottom > 0 + ) { + const activeStatusIndex = allStatusLinks.indexOf(activeStatus); + let prevStatus = allStatusLinks[activeStatusIndex - 1]; + if (handler.shift) { + // get prev status that's not .status-boost-link + prevStatus = allStatusLinks.findLast( + (statusLink, index) => + index < activeStatusIndex && + !statusLink.classList.contains('status-boost-link'), + ); } - }, - { - enabled: isHomeLocation, - }, - ); + if (prevStatus) { + prevStatus.focus(); + prevStatus.scrollIntoViewIfNeeded?.(); + } + } else { + // If active status is not in viewport, get the topmost status-link in viewport + const topmostStatusLink = allStatusLinks.find((statusLink) => { + const statusLinkRect = statusLink.getBoundingClientRect(); + return statusLinkRect.top >= 44 && statusLinkRect.left >= 0; // 44 is the magic number for header height, not real + }); + if (topmostStatusLink) { + topmostStatusLink.focus(); + topmostStatusLink.scrollIntoViewIfNeeded?.(); + } + } + }); - useHotkeys( - ['enter', 'o'], - () => { - // open active status - const activeStatus = document.activeElement.closest( - '.status-link, .status-boost-link', - ); - if (activeStatus) { - activeStatus.click(); - } - }, - { - enabled: isHomeLocation, - }, - ); + const oRef = useHotkeys(['enter', 'o'], () => { + // open active status + const activeStatus = document.activeElement.closest( + '.status-link, .status-boost-link', + ); + if (activeStatus) { + activeStatus.click(); + } + }); 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" >