Compare commits

..

No commits in common. "6e80cf77b59c5638c121de49bea04c9bb20f2645" and "47cfece01339e0f16883bf49c20e71abb525f846" have entirely different histories.

4 changed files with 27 additions and 32 deletions

View File

@ -6,15 +6,15 @@
let __$wrapper; let __$wrapper;
const setupWrapper = () => { const setupWrapper = () => {
const notionAi = ".notion-ai-button", const notionHelp = ".notion-help-button",
{ html, addMutationListener } = globalThis.__enhancerApi, { html, addMutationListener } = globalThis.__enhancerApi,
{ removeMutationListener } = globalThis.__enhancerApi; { removeMutationListener } = globalThis.__enhancerApi;
return (__$wrapper ??= new Promise((res) => { return (__$wrapper ??= new Promise((res) => {
const addToDom = () => { const addToDom = () => {
const $notionAi = document.querySelector(notionAi); const $help = document.querySelector(notionHelp);
if (!$notionAi) return; if (!$help) return;
const gap = 12, const gap = 12,
computedStyles = getComputedStyle($notionAi), computedStyles = getComputedStyle($help),
visible = computedStyles.getPropertyValue("display") !== "none", visible = computedStyles.getPropertyValue("display") !== "none",
width = computedStyles.getPropertyValue("width"), width = computedStyles.getPropertyValue("width"),
right = computedStyles.getPropertyValue("right"), right = computedStyles.getPropertyValue("right"),
@ -25,10 +25,10 @@ const setupWrapper = () => {
style="right:${offset}px" style="right:${offset}px"
></div>`; ></div>`;
removeMutationListener(addToDom); removeMutationListener(addToDom);
$notionAi.after($wrapper); $help.after($wrapper);
res($wrapper); res($wrapper);
}; };
addMutationListener(notionAi, addToDom); addMutationListener(notionHelp, addToDom);
addToDom(); addToDom();
})); }));
}, },

View File

@ -206,8 +206,9 @@ function Panel({
}; };
const animationState = { ...closedWidth }, const animationState = { ...closedWidth },
easing = "cubic-bezier(0.4, 0, 0.2, 1)",
animate = ($target, keyframes) => { animate = ($target, keyframes) => {
const opts = { fill: "forwards", duration: transitionDuration, easing: "ease" }; const opts = { fill: "forwards", duration: transitionDuration, easing };
$target.animate(keyframes, opts); $target.animate(keyframes, opts);
}, },
animatePanel = (to) => { animatePanel = (to) => {
@ -302,10 +303,10 @@ function Panel({
// moves help button out of the way of open panel. // moves help button out of the way of open panel.
// normally would place outside of an island, but in // normally would place outside of an island, but in
// this case is necessary for syncing up animations // this case is necessary for syncing up animations
const notionAi = ".notion-ai-button", const notionHelp = ".notion-help-button",
floatingButtons = ".notion-enhancer--floating-buttons", floatingButtons = ".notion-enhancer--floating-buttons",
repositionCorner = async (offset) => { repositionCorner = async (offset) => {
const $help = document.querySelector(notionAi), const $help = document.querySelector(notionHelp),
$floating = document.querySelector(floatingButtons); $floating = document.querySelector(floatingButtons);
offset ??= await getWidth(); offset ??= await getWidth();
if (isNaN(offset)) offset = minWidth; if (isNaN(offset)) offset = minWidth;
@ -328,7 +329,7 @@ function Panel({
} }
if ($help || $floating) removeMutationListener(repositionCorner); if ($help || $floating) removeMutationListener(repositionCorner);
}; };
const corner = `${notionAi}, ${floatingButtons}`; const corner = `${notionHelp}, ${floatingButtons}`;
addMutationListener(corner, repositionCorner, { subtree: false }); addMutationListener(corner, repositionCorner, { subtree: false });
$panel.pin = () => { $panel.pin = () => {

View File

@ -5,9 +5,8 @@
* (https://notion-enhancer.github.io/) under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
/* hide topbar and ai */ /* hide topbar */
.notion-sidebar-container[aria-hidden] ~ div .notion-topbar, .notion-sidebar-container[aria-hidden] ~ div .notion-topbar {
.notion-sidebar-container[aria-hidden] ~ div .notion-ai-button {
opacity: 0 !important; opacity: 0 !important;
transition: opacity 200ms ease-in-out !important; transition: opacity 200ms ease-in-out !important;
} }

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