fix(scroller): handle repeated 'today' button clicks

This commit is contained in:
dragonwocky 2024-05-12 11:55:23 +10:00
parent bbc8c7a1e0
commit 6e80cf77b5
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8

View File

@ -19,7 +19,7 @@ export default async (api, db) => {
scrollBehavior = (await db.get("smoothScrolling")) ? "smooth" : "auto", scrollBehavior = (await db.get("smoothScrolling")) ? "smooth" : "auto",
scroller = ".notion-frame .notion-scroller"; scroller = ".notion-frame .notion-scroller";
let $scroller, $todayButton; let $scroller, $today;
const scrollTo = (top, behavior) => $scroller?.scroll({ top, behavior }), const scrollTo = (top, behavior) => $scroller?.scroll({ top, behavior }),
$scrollToBottom = html`<${FloatingButton} $scrollToBottom = html`<${FloatingButton}
onclick="${() => scrollTo($scroller.scrollHeight, scrollBehavior)}" onclick="${() => scrollTo($scroller.scrollHeight, scrollBehavior)}"
@ -50,27 +50,32 @@ export default async (api, db) => {
} else removeFloatingButton($scrollToTop); } else removeFloatingButton($scrollToTop);
}, },
onTodayLoaded = () => { onTodayLoaded = () => {
const $bubble = document.querySelector(todayBubble);
if (!$bubble) return;
// calendar will jump anyway when pinning the current month, // calendar will jump anyway when pinning the current month,
// so ignore smooth scroll setting and jump direct to week // so ignore smooth scroll setting and jump direct to week
const $bubble = document.querySelector(todayBubble);
if (!$bubble) return;
scrollTo($bubble.offsetParent.offsetParent.offsetTop + 57, "auto"); scrollTo($bubble.offsetParent.offsetParent.offsetTop + 57, "auto");
removeMutationListener(onTodayLoaded); removeMutationListener(onTodayLoaded);
}, },
onTodayClicked = () => { onTodayClicked = () => {
removeMutationListener(onTodayLoaded); // if calendar does not refresh: jump direct to current week
addMutationListener(todayBubble, onTodayLoaded); // if calendar does refresh: wait, then jump to current week
requestIdleCallback(() => {
onTodayLoaded();
addMutationListener(todayBubble, onTodayLoaded);
});
}, },
setup = () => { setup = () => {
if (document.contains($scroller)) return; if (!document.contains($scroller)) {
$scroller = document.querySelector(scroller); $scroller = document.querySelector(scroller);
$scroller?.removeEventListener("scroll", onPageScrolled); $scroller?.removeEventListener("scroll", onPageScrolled);
$scroller?.addEventListener("scroll", onPageScrolled); $scroller?.addEventListener("scroll", onPageScrolled);
onPageScrolled(); onPageScrolled();
if (jumpToWeek) { }
$todayButton = document.querySelector(todayButton); if (jumpToWeek && !document.contains($today)) {
$todayButton?.removeEventListener("click", onTodayClicked); $today = document.querySelector(todayButton);
$todayButton?.addEventListener("click", onTodayClicked); $today?.removeEventListener("click", onTodayClicked);
$today?.addEventListener("click", onTodayClicked);
} }
}; };
addMutationListener(scroller, setup, { subtree: false }); addMutationListener(scroller, setup, { subtree: false });