dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-04 04:39:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: position floating buttons correctly on load if help is hidden

Browse Source
This commit is contained in:
dragonwocky 2024-05-29 18:19:54 +10:00
parent 35f243b032
commit 72e5302c61
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
3 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/core/islands/FloatingButton.mjs
View File

@ -13,17 +13,10 @@ const setupWrapper = () => {
const addToDom = () => { const addToDom = () => {
const $notionAi = document.querySelector(notionAi); const $notionAi = document.querySelector(notionAi);
if (!$notionAi) return; if (!$notionAi) return;
const gap = 12, const $wrapper = html`<div
computedStyles = getComputedStyle($notionAi), class="notion-enhancer--floating-buttons z-50 gap-[12px]
visible = computedStyles.getPropertyValue("display") !== "none", flex absolute bottom-[calc(26px+env(safe-area-inset-bottom))]"
width = computedStyles.getPropertyValue("width"), ></div>`;
right = computedStyles.getPropertyValue("right"),
offset = visible ? parseInt(width) + parseInt(right) + gap : 26,
$wrapper = html`<div
class="notion-enhancer--floating-buttons z-50 gap-[${gap}px]
flex absolute bottom-[calc(26px+env(safe-area-inset-bottom))]"
style="right:${offset}px"
></div>`;
removeMutationListener(addToDom); removeMutationListener(addToDom);
$notionAi.after($wrapper); $notionAi.after($wrapper);
res($wrapper); res($wrapper);
@ -35,6 +28,7 @@ const setupWrapper = () => {
addFloatingButton = async ($btn) => { addFloatingButton = async ($btn) => {
if (document.contains($btn)) return; if (document.contains($btn)) return;
(await setupWrapper()).prepend($btn); (await setupWrapper()).prepend($btn);
// button positioning is calculated by panel
}, },
removeFloatingButton = ($btn) => $btn.remove(); removeFloatingButton = ($btn) => $btn.remove();

3
src/core/islands/Panel.mjs
View File

@ -89,7 +89,7 @@ function Panel({
transitionDuration = 300, transitionDuration = 300,
}) { }) {
const { modDatabase, isEnabled } = globalThis.__enhancerApi, const { modDatabase, isEnabled } = globalThis.__enhancerApi,
{ html, useState, addKeyListener } = globalThis.__enhancerApi, { html, useState, addKeyListener, MODS_LOADED } = globalThis.__enhancerApi,
{ addMutationListener, removeMutationListener } = globalThis.__enhancerApi, { addMutationListener, removeMutationListener } = globalThis.__enhancerApi,
$panelToggle = html`<button $panelToggle = html`<button
aria-label="Toggle side panel" aria-label="Toggle side panel"
@ -335,6 +335,7 @@ function Panel({
}; };
const corner = `${notionAi}, ${floatingButtons}`; const corner = `${notionAi}, ${floatingButtons}`;
addMutationListener(corner, repositionCorner, { subtree: false }); addMutationListener(corner, repositionCorner, { subtree: false });
MODS_LOADED.then(() => repositionCorner());
$panel.pin = () => { $panel.pin = () => {
if (isPinned() || !panelViews.length) return; if (isPinned() || !panelViews.length) return;

23
src/load.mjs
View File

@ -16,11 +16,19 @@ export default (async () => {
IS_MENU = location.href.startsWith(enhancerUrl("core/menu/index.html")), IS_MENU = location.href.startsWith(enhancerUrl("core/menu/index.html")),
IS_TABS = /\.webpack\/renderer\/tabs\/index.html$/.test(location.href), IS_TABS = /\.webpack\/renderer\/tabs\/index.html$/.test(location.href),
IS_ELECTRON = ['linux', 'win32', 'darwin'].includes(platform), IS_ELECTRON = ['linux', 'win32', 'darwin'].includes(platform),
API_LOADED = new Promise((res, rej) => { CORE_LOADED = new Promise((res, rej) => {
const onLoad = globalThis.__enhancerApi.onLoad;
globalThis.__enhancerApi.onLoad = () => (onLoad?.(), res());
}),
MODS_LOADED = new Promise((res, rej) => {
const onReady = globalThis.__enhancerApi.onReady; const onReady = globalThis.__enhancerApi.onReady;
globalThis.__enhancerApi.onReady = () => (onReady?.(), res()); globalThis.__enhancerApi.onReady = () => (onReady?.(), res());
}); });
globalThis.IS_TABS = IS_TABS; Object.assign((globalThis.__enhancerApi ??= {}), {
CORE_LOADED,
MODS_LOADED,
IS_TABS,
});
if (!IS_MENU && !IS_TABS) { if (!IS_MENU && !IS_TABS) {
if (!signedIn || !pageLoaded) return; if (!signedIn || !pageLoaded) return;
@ -69,16 +77,19 @@ export default (async () => {
for (let script of mod.clientScripts ?? []) { for (let script of mod.clientScripts ?? []) {
// execute mod scripts after core has // execute mod scripts after core has
// loaded and api is ready to use // loaded and api is ready to use
Promise.resolve(isCore || API_LOADED) Promise.resolve(isCore || CORE_LOADED)
.then(() => import(enhancerUrl(`${mod._src}/${script}`))) .then(() => import(enhancerUrl(`${mod._src}/${script}`)))
.then((script) => script.default(globalThis.__enhancerApi, db)) .then((script) => script.default(globalThis.__enhancerApi, db))
.then(() => !isCore || globalThis.__enhancerApi.onReady?.()) .then(() => !isCore || globalThis.__enhancerApi.onLoad?.())
.catch((err) => console.error(err)); .catch((err) => console.error(err));
} }
} }
if (IS_MENU || IS_TABS) globalThis.__enhancerApi.onReady?.(); if (IS_MENU || IS_TABS) {
return API_LOADED.then(() => { globalThis.__enhancerApi.onLoad?.();
globalThis.__enhancerApi.onReady?.();
}
return CORE_LOADED.then(() => {
if (IS_MENU) console.log("notion-enhancer: ready"); if (IS_MENU) console.log("notion-enhancer: ready");
return globalThis.__enhancerApi; return globalThis.__enhancerApi;
}); });