mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 04:39:03 +00:00
61 lines
2.2 KiB
JavaScript
61 lines
2.2 KiB
JavaScript
/**
|
|
* notion-enhancer
|
|
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
let __$wrapper;
|
|
const setupWrapper = () => {
|
|
const notionAi = ".notion-help-button, .notion-ai-button",
|
|
{ html, addMutationListener } = globalThis.__enhancerApi,
|
|
{ removeMutationListener } = globalThis.__enhancerApi;
|
|
return (__$wrapper ??= new Promise((res) => {
|
|
const addToDom = () => {
|
|
const $notionAi = document.querySelector(notionAi);
|
|
if (!$notionAi) return;
|
|
const gap = 12,
|
|
computedStyles = getComputedStyle($notionAi),
|
|
visible = computedStyles.getPropertyValue("display") !== "none",
|
|
width = computedStyles.getPropertyValue("width"),
|
|
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);
|
|
$notionAi.after($wrapper);
|
|
res($wrapper);
|
|
};
|
|
addMutationListener(notionAi, addToDom);
|
|
addToDom();
|
|
}));
|
|
},
|
|
addFloatingButton = async ($btn) => {
|
|
if (document.contains($btn)) return;
|
|
(await setupWrapper()).prepend($btn);
|
|
},
|
|
removeFloatingButton = ($btn) => $btn.remove();
|
|
|
|
function FloatingButton({ icon, ...props }, ...children) {
|
|
const { html, extendProps } = globalThis.__enhancerApi;
|
|
extendProps(props, {
|
|
tabindex: 0,
|
|
class: `notion-enhancer--floating-button
|
|
size-[36px] flex items-center justify-center rounded-full
|
|
text-([20px] [color:var(--theme--fg-primary)]) select-none cursor-pointer
|
|
bg-[color:var(--theme--bg-secondary)] hover:bg-[color:var(--theme--bg-hover)]
|
|
shadow-[rgba(15,15,15,0.2)_0px_0px_0px_1px,rgba(15,15,15,0.2)_0px_2px_4px]`,
|
|
});
|
|
return html`<button ...${props}>${children}</button>`;
|
|
}
|
|
|
|
if (globalThis.document) setupWrapper();
|
|
Object.assign((globalThis.__enhancerApi ??= {}), {
|
|
addFloatingButton,
|
|
removeFloatingButton,
|
|
});
|
|
|
|
export { addFloatingButton, FloatingButton };
|