f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-12 06:42:40 +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

57
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 = () => { if (anchor) {
const iframeDoc = iframe?.contentDocument || iframe?.contentWindow?.document; anchor.scrollIntoView({ behavior: 'smooth' });
let anchor = iframeDoc.querySelector(hash); } else {
// Use MutationObserver to wait for the element if it's not immediately available
if (anchor) { const observer = new MutationObserver((mutations, obs) => {
anchor.scrollIntoView({ behavior: 'smooth' }); anchor = iframeDoc.querySelector(hash);
} else { if (anchor) {
// Use MutationObserver to wait for the element if it's not immediately available anchor.scrollIntoView({ behavior: 'smooth' });
const observer = new MutationObserver((mutations, obs) => { obs.disconnect();
anchor = iframeDoc.querySelector(hash);
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth' });
obs.disconnect();
}
});
if (iframeDoc.body) {
observer.observe(iframeDoc.body, {
childList: true,
subtree: true,
});
} }
} });
};
if (hash) { if (iframeDoc.body) {
iframe.addEventListener('load', scrollToHash); observer.observe(iframeDoc.body, {
childList: true,
if (iframe.contentDocument?.readyState === 'complete') { subtree: true,
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)=>({