mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-11 15:59:03 +00:00
dragonwocky
f0e2570448
faster + more powerful + better documented + more active than twind. sticking with custom preset-icons to avoid fetching over cdn + to load custom icons
59 lines
2.0 KiB
JavaScript
59 lines
2.0 KiB
JavaScript
/**
|
|
* notion-enhancer
|
|
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
let __$wrapper;
|
|
const setupWrapper = () => {
|
|
const notionHelp = ".notion-help-button",
|
|
{ html, addMutationListener } = globalThis.__enhancerApi,
|
|
{ removeMutationListener } = globalThis.__enhancerApi;
|
|
return (__$wrapper ??= new Promise((res, rej) => {
|
|
const addToDom = () => {
|
|
const $help = document.querySelector(notionHelp);
|
|
if (!$help) return;
|
|
const $wrapper = html`<div
|
|
class="notion-enhancer--floating-buttons z-50
|
|
absolute bottom-[calc(26px+env(safe-area-inset-bottom))]
|
|
flex gap-[12px] important:[&>.notion-help-button]:static"
|
|
style="right:${$help.style.right}"
|
|
></div>`;
|
|
removeMutationListener(addToDom);
|
|
$help.replaceWith($wrapper);
|
|
$wrapper.append($help);
|
|
res($wrapper);
|
|
};
|
|
addMutationListener(notionHelp, 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 };
|