f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-11 11:12:44 +00:00
Code Wiki Activity

Call scrollToHash from our existing "frameDidMount`

Browse Source 
`frameDidMount` is equivalent to using iframe.addEventListener('load');

Let's not add a new listener and just use the existing event we already have. Functionality still works.
This commit is contained in:
Trevor Buckner
2024-10-22 13:03:12 -04:00
parent 8ef88a4799
commit 5b136f651c
1 changed files with 22 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -77,48 +77,31 @@ const BrewRenderer = (props)=>{
rawPages = props.text.split(/^\\page$/gm); rawPages = props.text.split(/^\\page$/gm);
} }
useEffect(() => { const scrollToHash = (hash) => {
const iframe = document.getElementById('BrewRenderer'); const iframe = document.getElementById('BrewRenderer');
const hash = window.location.hash; const iframeDoc = iframe?.contentDocument || iframe?.contentWindow?.document;
let anchor = iframeDoc.querySelector(hash);
const scrollToHash = () => {
const iframeDoc = iframe?.contentDocument || iframe?.contentWindow?.document;
let anchor = iframeDoc.querySelector(hash);
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth' });
} else {
// Use MutationObserver to wait for the element if it's not immediately available
const observer = new MutationObserver((mutations, obs) => {
anchor = iframeDoc.querySelector(hash);
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth' });
obs.disconnect();
}
});
if (iframeDoc.body) { if (anchor) {
observer.observe(iframeDoc.body, { anchor.scrollIntoView({ behavior: 'smooth' });
childList: true, } else {
subtree: true, // Use MutationObserver to wait for the element if it's not immediately available
}); const observer = new MutationObserver((mutations, obs) => {
anchor = iframeDoc.querySelector(hash);
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth' });
obs.disconnect();
} }
} });
};
if (iframeDoc.body) {
if (hash) { observer.observe(iframeDoc.body, {
iframe.addEventListener('load', scrollToHash); childList: true,
subtree: true,
if (iframe.contentDocument?.readyState === 'complete') { });
scrollToHash();
} }
} }
};
return ()=>{
iframe.removeEventListener('load', scrollToHash);
window.removeEventListener('resize', updateSize);
};
}, []);
const updateCurrentPage = useCallback(_.throttle((e)=>{ const updateCurrentPage = useCallback(_.throttle((e)=>{
const { scrollTop, clientHeight, scrollHeight } = e.target; const { scrollTop, clientHeight, scrollHeight } = e.target;
@@ -193,6 +176,8 @@ const BrewRenderer = (props)=>{
}; };
const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount" const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount"
scrollToHash(window.location.hash);
setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
renderPages(); //Make sure page is renderable before showing renderPages(); //Make sure page is renderable before showing
setState((prevState)=>({ setState((prevState)=>({