From f0d7d89653df6242f9aac6ba7ce1121f8cce7f49 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 23 Apr 2024 13:36:56 +1000 Subject: [PATCH] fix: position floating buttons relative to help button without wrapping it (changing help button dom parent makes notion error when inserting elements relative to it) --- src/api/interface.mjs | 1 - src/core/islands/FloatingButton.mjs | 22 +++++++++------ src/core/islands/Panel.mjs | 44 ++++++++++++++++++----------- src/extensions/outliner/client.mjs | 10 +++---- src/extensions/scroller/client.mjs | 4 +-- src/extensions/tweaks/mod.json | 2 +- 6 files changed, 49 insertions(+), 34 deletions(-) diff --git a/src/api/interface.mjs b/src/api/interface.mjs index 906094b..6800dd2 100644 --- a/src/api/interface.mjs +++ b/src/api/interface.mjs @@ -287,7 +287,6 @@ const _tokens = new Set(), if (_stylesheet.innerHTML !== res.css) _stylesheet.innerHTML = res.css; }; addMutationListener("*", (mutation) => { - const targets = []; if (mutation.type === "childList") { for (const node of mutation.addedNodes) extractTokens(node); } else if (mutation.type === "attributes") extractTokens(mutation.target); diff --git a/src/core/islands/FloatingButton.mjs b/src/core/islands/FloatingButton.mjs index cc69b26..7c78a88 100644 --- a/src/core/islands/FloatingButton.mjs +++ b/src/core/islands/FloatingButton.mjs @@ -9,19 +9,23 @@ const setupWrapper = () => { const notionHelp = ".notion-help-button", { html, addMutationListener } = globalThis.__enhancerApi, { removeMutationListener } = globalThis.__enhancerApi; - return (__$wrapper ??= new Promise((res, rej) => { + return (__$wrapper ??= new Promise((res) => { const addToDom = () => { const $help = document.querySelector(notionHelp); if (!$help) return; - const $wrapper = html`
`; + const gap = 12, + computedStyles = getComputedStyle($help), + visible = computedStyles.getPropertyValue("display") !== "none", + width = computedStyles.getPropertyValue("width"), + right = computedStyles.getPropertyValue("right"), + offset = visible ? parseInt(width) + parseInt(right) + gap : 26, + $wrapper = html`
`; removeMutationListener(addToDom); - $help.replaceWith($wrapper); - $wrapper.append($help); + $help.after($wrapper); res($wrapper); }; addMutationListener(notionHelp, addToDom); diff --git a/src/core/islands/Panel.mjs b/src/core/islands/Panel.mjs index 1149b98..1e0291f 100644 --- a/src/core/islands/Panel.mjs +++ b/src/core/islands/Panel.mjs @@ -303,22 +303,34 @@ function Panel({ // moves help button out of the way of open panel. // normally would place outside of an island, but in // this case is necessary for syncing up animations - const floatingButtons = - ".notion-enhancer--floating-buttons, .notion-help-button", - repositionFloatingButtons = async (width) => { - const $floatingButtons = document.querySelector(floatingButtons); - if (!$floatingButtons) return; - width ??= await getWidth(); - if (isNaN(width)) width = minWidth; - if (!isPinned()) width = 0; - const to = `${26 + width}px`, - from = $floatingButtons.style.getPropertyValue("right"); - if (from === to) return; - $floatingButtons.style.setProperty("right", to); - animate($floatingButtons, [({ right: from }, { right: to })]); - removeMutationListener(repositionFloatingButtons); + const notionHelp = ".notion-help-button", + floatingButtons = ".notion-enhancer--floating-buttons", + repositionCorner = async (offset) => { + const $help = document.querySelector(notionHelp), + $floating = document.querySelector(floatingButtons); + offset ??= await getWidth(); + if (isNaN(offset)) offset = minWidth; + if (!isPinned()) offset = 0; + // offset help from panel edge + offset += 26; + for (const $btn of [$help, $floating]) { + if (!$btn) continue; + const computedStyles = getComputedStyle($btn), + visible = computedStyles.getPropertyValue("display") !== "none"; + if (!visible) continue; + const width = computedStyles.getPropertyValue("width"), + from = computedStyles.getPropertyValue("right"), + to = offset + "px"; + // offset floating buttons from help + offset += 12 + parseInt(width); + if (from === to) continue; + $btn.style.setProperty("right", to); + animate($btn, [({ right: from }, { right: to })]); + } + if ($help || $floating) removeMutationListener(repositionCorner); }; - addMutationListener(floatingButtons, repositionFloatingButtons); + const corner = `${notionHelp}, ${floatingButtons}`; + addMutationListener(corner, repositionCorner, { subtree: false }); $panel.pin = () => { if (isPinned() || !panelViews.length) return; @@ -380,7 +392,7 @@ function Panel({ const $parent = $panel.parentElement || $panel; $parent.style.setProperty("--panel--width", `${width}px`); if ($parent !== $panel) $panel.style.removeProperty("--panel--width"); - repositionFloatingButtons(width); + repositionCorner(width); }; useState(["panelViews"], async ([panelViews = []]) => { diff --git a/src/extensions/outliner/client.mjs b/src/extensions/outliner/client.mjs index 1653f8b..42b33b7 100644 --- a/src/extensions/outliner/client.mjs +++ b/src/extensions/outliner/client.mjs @@ -11,7 +11,7 @@ import { PanelDescription } from "./islands/PanelDescription.mjs"; export default async (api, db) => { const { html, debounce, addMutationListener, addPanelView } = api, behavior = (await db.get("smoothScrolling")) ? "smooth" : "auto", - scroller = ".notion-frame > .notion-scroller", + scroller = ".notion-frame .notion-scroller", equation = ".notion-text-equation-token", annotation = (await db.get("equationRendering")) ? ".katex-html" @@ -78,10 +78,9 @@ export default async (api, db) => { $heading._$outline = html`<${Heading} indent=${getHeadingLevel($heading)} onclick=${() => { - $scroller.scrollTo({ - top: getBlockOffset($heading) - 24, - behavior, - }); + if (!$scroller) return; + const top = getBlockOffset($heading) - 24; + $scroller.scrollTo({ top, behavior }); }} >${getHeadingTitle($heading)} `; @@ -96,6 +95,7 @@ export default async (api, db) => { size-[6px] rounded-full bg-[color:var(--theme--fg-secondary)]" >`, onScroll = () => { + if (!$scroller) return; const $h = getHeadings().find(($h) => { return $scroller.scrollTop < getBlockOffset($h) - 16; })?._$outline; diff --git a/src/extensions/scroller/client.mjs b/src/extensions/scroller/client.mjs index e5b83e5..c36e41c 100644 --- a/src/extensions/scroller/client.mjs +++ b/src/extensions/scroller/client.mjs @@ -1,5 +1,5 @@ /** - * notion-enhancer: scroll to top + * notion-enhancer: scroller * (c) 2021 CloudHill (https://github.com/CloudHill) * (c) 2024 dragonwocky (https://dragonwocky.me/) * (https://notion-enhancer.github.io/) under the MIT license @@ -14,7 +14,7 @@ export default async (api, db) => { distanceUntilShown = await db.get("distanceUntilScrollToTopShown"), scrollUnit = await db.get("scrollDistanceUnit"), behavior = (await db.get("smoothScrolling")) ? "smooth" : "auto", - scroller = ".notion-frame > .notion-scroller"; + scroller = ".notion-frame .notion-scroller"; let $scroller; const scrollTo = (top) => $scroller?.scroll({ top, behavior }), diff --git a/src/extensions/tweaks/mod.json b/src/extensions/tweaks/mod.json index 8e05f21..d4ab170 100644 --- a/src/extensions/tweaks/mod.json +++ b/src/extensions/tweaks/mod.json @@ -21,7 +21,7 @@ }, { "type": "toggle", - "key": "HidelashMenu", + "key": "hideSlashMenu", "description": "Hide the commands popup when typing '/'.", "value": false },