mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 12:49:03 +00:00
feat(menu): option values update on view change/page focus, animate view changes
This commit is contained in:
parent
765e7b738c
commit
c95d96cd8e
GPG Key ID:
7998D08F7D7BD7A8
@ -78,10 +78,15 @@ const initDatabase = (namespace, fallbacks = {}) => {
|
||||
get: (key) => {
|
||||
const fallback = fallbacks[key];
|
||||
key = key.startsWith(namespace) ? key : namespace + key;
|
||||
return select.get(key)?.value ?? fallback;
|
||||
try {
|
||||
return JSON.parse(select.get(key)?.value);
|
||||
} catch {
|
||||
return select.get(key)?.value ?? fallback;
|
||||
}
|
||||
},
|
||||
set: (key, value) => {
|
||||
key = key.startsWith(namespace) ? key : namespace + key;
|
||||
value = JSON.stringify(value);
|
||||
return select.get(key) === undefined
|
||||
? insert.run(key, value)
|
||||
: update.run(value, key);
|
||||
|
||||
@ -21,7 +21,7 @@ export default async (api, db) => {
|
||||
openMenuHotkey = await db.get("openMenuHotkey"),
|
||||
menuButtonIconStyle = await db.get("menuButtonIconStyle"),
|
||||
loadThemeOverrides = await db.get("loadThemeOverrides"),
|
||||
customStyles = JSON.parse((await db.get("customStyles")) || "{}").content;
|
||||
customStyles = (await db.get("customStyles"))?.content;
|
||||
|
||||
// appearance
|
||||
|
||||
@ -54,8 +54,8 @@ export default async (api, db) => {
|
||||
_notionTheme = notionTheme;
|
||||
const msg = {
|
||||
namespace: "notion-enhancer",
|
||||
iconStyle: menuButtonIconStyle,
|
||||
mode: notionTheme,
|
||||
theme: notionTheme,
|
||||
icon: menuButtonIconStyle,
|
||||
};
|
||||
$menuFrame?.contentWindow.postMessage(msg, "*");
|
||||
}
|
||||
@ -64,6 +64,7 @@ export default async (api, db) => {
|
||||
const openMenu = () => {
|
||||
updateTheme(true);
|
||||
$menuModal?.setAttribute("open", true);
|
||||
$menuFrame?.contentWindow.focus();
|
||||
},
|
||||
closeMenu = () => $menuModal?.removeAttribute("open");
|
||||
|
||||
@ -129,6 +130,7 @@ export default async (api, db) => {
|
||||
});
|
||||
document.querySelector(notionSidebar)?.append($menuButton);
|
||||
|
||||
window.addEventListener("focus", () => updateTheme(true));
|
||||
addMutationListener("body", () => {
|
||||
if ($menuModal?.hasAttribute("open")) updateTheme();
|
||||
});
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
import { setState, useState } from "./state.mjs";
|
||||
import { setState, useState, getState } from "./state.mjs";
|
||||
|
||||
function Sidebar({}, ...children) {
|
||||
const { html } = globalThis.__enhancerApi;
|
||||
@ -43,7 +43,7 @@ function SidebarButton({ icon, ...props }, ...children) {
|
||||
<//>`;
|
||||
if (!props.href) {
|
||||
const id = $el.innerText;
|
||||
$el.onclick ??= () => setState({ view: id });
|
||||
$el.onclick ??= () => setState({ transition: "fade", view: id });
|
||||
useState(["view"], ([view = "welcome"]) => {
|
||||
const active = view.toLowerCase() === id.toLowerCase();
|
||||
$el.style.background = active ? "var(--theme--bg-hover)" : "";
|
||||
@ -55,16 +55,34 @@ function SidebarButton({ icon, ...props }, ...children) {
|
||||
|
||||
function View({ id }, ...children) {
|
||||
const { html } = globalThis.__enhancerApi,
|
||||
duration = 100,
|
||||
$el = html`<article
|
||||
id=${id}
|
||||
class="notion-enhancer--menu-view h-full
|
||||
overflow-y-auto px-[60px] py-[36px] grow"
|
||||
grow overflow-y-auto px-[60px] py-[36px]"
|
||||
>
|
||||
${children}
|
||||
</article>`;
|
||||
useState(["view"], ([view = "welcome"]) => {
|
||||
const active = view.toLowerCase() === id.toLowerCase();
|
||||
$el.style.display = active ? "" : "none";
|
||||
const [transition] = getState(["transition"]),
|
||||
isVisible = $el.style.display !== "none",
|
||||
nowActive = view.toLowerCase() === id.toLowerCase();
|
||||
if (transition === "fade") {
|
||||
$el.style.opacity = "0";
|
||||
$el.style.transition = `opacity ${duration}ms`;
|
||||
if (isVisible && !nowActive) {
|
||||
setTimeout(() => ($el.style.display = "none"), duration);
|
||||
} else if (!isVisible && nowActive) {
|
||||
setTimeout(() => {
|
||||
$el.style.display = "";
|
||||
requestIdleCallback(() => ($el.style.opacity = "1"));
|
||||
}, duration);
|
||||
}
|
||||
} else {
|
||||
$el.style.transition = "";
|
||||
$el.style.opacity = nowActive ? "1" : "0";
|
||||
$el.style.display = nowActive ? "" : "none";
|
||||
}
|
||||
});
|
||||
return $el;
|
||||
}
|
||||
@ -83,11 +101,12 @@ function Mod({
|
||||
tags = [],
|
||||
authors,
|
||||
options = [],
|
||||
enabled,
|
||||
_update,
|
||||
_get,
|
||||
_set,
|
||||
_src,
|
||||
}) {
|
||||
const { html, enhancerUrl } = globalThis.__enhancerApi,
|
||||
toggleId = Math.random().toString(36).slice(2, 5),
|
||||
$thumbnail = thumbnail
|
||||
? html`<img
|
||||
src="${enhancerUrl(`${_src}/${thumbnail}`)}"
|
||||
@ -99,16 +118,13 @@ function Mod({
|
||||
class="flex items-center p-[4px] rounded-[4px] transition
|
||||
text-[color:var(--theme--fg-secondary)] my-auto mr-[8px]
|
||||
duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
|
||||
onclick=${() => {
|
||||
// open mod options page
|
||||
}}
|
||||
onclick=${() => setState({ transition: "none", view: id })}
|
||||
>
|
||||
<i class="i-settings w-[18px] h-[18px]"></i>
|
||||
</button>`
|
||||
: "";
|
||||
return html`<label
|
||||
id=${id}
|
||||
for="${id}-toggle"
|
||||
for=${toggleId}
|
||||
class="notion-enhancer--menu-mod flex items-stretch rounded-[4px]
|
||||
bg-[color:var(--theme--bg-secondary)] w-full py-[18px] px-[16px]
|
||||
border border-[color:var(--theme--fg-border)] cursor-pointer
|
||||
@ -133,7 +149,7 @@ function Mod({
|
||||
text-[color:var(--theme--fg-secondary)]"
|
||||
innerHTML=${description}
|
||||
></p>
|
||||
<div class="flex gap-x-[8px] text-[12px] leading-[16px]">
|
||||
<div class="mt-auto flex gap-x-[8px] text-[12px] leading-[16px]">
|
||||
${authors.map((author) => {
|
||||
return html`<a href=${author.homepage} class="flex items-center">
|
||||
<img src=${author.avatar} alt="" class="h-[12px] rounded-full" />
|
||||
@ -145,25 +161,20 @@ function Mod({
|
||||
<div class="flex ml-auto">
|
||||
${$options}
|
||||
<div class="my-auto scale-[1.15]">
|
||||
<${Toggle}
|
||||
id="${id}-toggle"
|
||||
checked=${enabled}
|
||||
onchange="${(event) => _update(event.target.checked)}"
|
||||
/>
|
||||
<${Toggle} id=${toggleId} ...${{ _get, _set }} />
|
||||
</div>
|
||||
</div>
|
||||
</label>`;
|
||||
}
|
||||
|
||||
function Option({ type, value, description, _update, ...props }) {
|
||||
function Option({ type, value, description, _get, _set, ...props }) {
|
||||
const { html } = globalThis.__enhancerApi,
|
||||
camelToSentenceCase = (string) =>
|
||||
string[0].toUpperCase() +
|
||||
string.replace(/[A-Z]/g, (match) => ` ${match.toLowerCase()}`).slice(1);
|
||||
|
||||
let $input;
|
||||
const label = props.label ?? camelToSentenceCase(props.key),
|
||||
onchange = (event) => _update(event.target.value);
|
||||
const label = props.label ?? camelToSentenceCase(props.key);
|
||||
switch (type) {
|
||||
case "heading":
|
||||
return html`<h4
|
||||
@ -174,40 +185,28 @@ function Option({ type, value, description, _update, ...props }) {
|
||||
${label}
|
||||
</h4>`;
|
||||
case "text":
|
||||
$input = html`<${TextInput} ...${{ value, onchange }} />`;
|
||||
$input = html`<${TextInput} ...${{ _get, _set }} />`;
|
||||
break;
|
||||
case "number":
|
||||
$input = html`<${NumberInput} ...${{ value, onchange }} />`;
|
||||
$input = html`<${NumberInput} ...${{ _get, _set }} />`;
|
||||
break;
|
||||
case "hotkey":
|
||||
$input = html`<${HotkeyInput} ...${{ value, onchange }} />`;
|
||||
$input = html`<${HotkeyInput} ...${{ _get, _set }} />`;
|
||||
break;
|
||||
case "color":
|
||||
$input = html`<${ColorInput} ...${{ value, onchange }} />`;
|
||||
$input = html`<${ColorInput} ...${{ _get, _set }} />`;
|
||||
break;
|
||||
case "file":
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch {
|
||||
value = {};
|
||||
}
|
||||
$input = html`<${FileInput}
|
||||
filename="${value.filename}"
|
||||
extensions="${props.extensions}"
|
||||
onupload=${(upload) => _update(JSON.stringify(upload))}
|
||||
...${{ _get, _set }}
|
||||
/>`;
|
||||
break;
|
||||
case "select":
|
||||
$input = html`<${Select}
|
||||
values=${props.values}
|
||||
...${{ value, onchange }}
|
||||
/>`;
|
||||
$input = html`<${Select} values=${props.values} ...${{ _get, _set }} />`;
|
||||
break;
|
||||
case "toggle":
|
||||
$input = html`<${Toggle}
|
||||
checked=${value}
|
||||
onchange=${(event) => _update(event.target.checked)}
|
||||
/>`;
|
||||
$input = html`<${Toggle} ...${{ _get, _set }} />`;
|
||||
}
|
||||
return html`<${type === "toggle" ? "label" : "div"}
|
||||
class="notion-enhancer--menu-option flex items-center justify-between
|
||||
@ -225,19 +224,28 @@ function Option({ type, value, description, _update, ...props }) {
|
||||
<//>`;
|
||||
}
|
||||
|
||||
function TextInput({ value, ...props }) {
|
||||
const { html } = globalThis.__enhancerApi;
|
||||
return html`<label
|
||||
class="notion-enhancer--menu-text-input
|
||||
relative block w-full mt-[4px] mb-[8px]"
|
||||
>
|
||||
<input
|
||||
function TextInput({ _get, _set, ...props }) {
|
||||
const { html } = globalThis.__enhancerApi,
|
||||
$input = html`<input
|
||||
type="text"
|
||||
class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
|
||||
h-[28px] w-full pl-[8px] pr-[30px] bg-[color:var(--theme--bg-hover)]"
|
||||
value=${value}
|
||||
...${props}
|
||||
/>
|
||||
/>`;
|
||||
|
||||
const { onchange } = $input;
|
||||
$input.onchange = (event) => {
|
||||
onchange?.(event);
|
||||
_set?.($input.value);
|
||||
};
|
||||
useState(["rerender"], () => {
|
||||
_get?.().then((value) => ($input.value = value));
|
||||
});
|
||||
|
||||
return html`<label
|
||||
class="notion-enhancer--menu-text-input
|
||||
relative block w-full mt-[4px] mb-[8px]"
|
||||
>${$input}
|
||||
<i
|
||||
class="i-text-cursor pointer-events-none
|
||||
absolute right-[8px] top-[6px] w-[16px] h-[16px]
|
||||
@ -246,19 +254,28 @@ function TextInput({ value, ...props }) {
|
||||
</label>`;
|
||||
}
|
||||
|
||||
function NumberInput({ value, ...props }) {
|
||||
const { html } = globalThis.__enhancerApi;
|
||||
function NumberInput({ _get, _set, ...props }) {
|
||||
const { html } = globalThis.__enhancerApi,
|
||||
$input = html`<input
|
||||
type="text"
|
||||
class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
|
||||
h-[28px] w-full pl-[8px] pr-[32px] bg-[color:var(--theme--bg-hover)]"
|
||||
...${props}
|
||||
/>`;
|
||||
|
||||
const { onchange } = $input;
|
||||
$input.onchange = (event) => {
|
||||
onchange?.(event);
|
||||
_set?.($input.value);
|
||||
};
|
||||
useState(["rerender"], () => {
|
||||
_get?.().then((value) => ($input.value = value));
|
||||
});
|
||||
|
||||
return html`<label
|
||||
class="notion-enhancer--menu-number-input
|
||||
relative shrink-0 w-[192px]"
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
|
||||
h-[28px] w-full pl-[8px] pr-[32px] bg-[color:var(--theme--bg-hover)]"
|
||||
value=${value}
|
||||
...${props}
|
||||
/>
|
||||
>${$input}
|
||||
<i
|
||||
class="i-hash pointer-events-none
|
||||
absolute right-[8px] top-[6px] w-[16px] h-[16px]
|
||||
@ -267,8 +284,14 @@ function NumberInput({ value, ...props }) {
|
||||
</label>`;
|
||||
}
|
||||
|
||||
function HotkeyInput({ value, onkeydown, ...props }) {
|
||||
function HotkeyInput({ _get, _set, ...props }) {
|
||||
const { html } = globalThis.__enhancerApi,
|
||||
$input = html`<input
|
||||
type="text"
|
||||
class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
|
||||
h-[28px] w-full pl-[8px] pr-[32px] bg-[color:var(--theme--bg-hover)]"
|
||||
...${props}
|
||||
/>`,
|
||||
updateHotkey = (event) => {
|
||||
event.preventDefault();
|
||||
const keys = [];
|
||||
@ -278,7 +301,7 @@ function HotkeyInput({ value, onkeydown, ...props }) {
|
||||
keys.push(alias);
|
||||
}
|
||||
if (!keys.length && ["Backspace", "Delete"].includes(event.key)) {
|
||||
event.target.value = "";
|
||||
$input.value = "";
|
||||
} else if (event.key) {
|
||||
let key = event.key;
|
||||
if (key === " ") key = "Space";
|
||||
@ -290,27 +313,26 @@ function HotkeyInput({ value, onkeydown, ...props }) {
|
||||
// avoid e.g. Shift+Shift, force inclusion of non-modifier
|
||||
if (keys.includes(key)) return;
|
||||
keys.push(key.length === 1 ? key.toUpperCase() : key);
|
||||
event.target.value = keys.join("+");
|
||||
$input.value = keys.join("+");
|
||||
}
|
||||
event.target.dispatchEvent(new Event("input"));
|
||||
event.target.dispatchEvent(new Event("change"));
|
||||
$input.dispatchEvent(new Event("input"));
|
||||
$input.dispatchEvent(new Event("change"));
|
||||
};
|
||||
props.onkeydown = (event) => {
|
||||
|
||||
const { onkeydown } = $input;
|
||||
$input.onkeydown = (event) => {
|
||||
updateHotkey(event);
|
||||
onkeydown?.(event);
|
||||
_set?.($input.value);
|
||||
};
|
||||
useState(["rerender"], () => {
|
||||
_get?.().then((value) => ($input.value = value));
|
||||
});
|
||||
|
||||
return html`<label
|
||||
class="notion-enhancer--menu-hotkey-input
|
||||
relative shrink-0 w-[192px]"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="appearance-none text-[14px] leading-[1.2] rounded-[4px] pb-px
|
||||
h-[28px] w-full pl-[8px] pr-[32px] bg-[color:var(--theme--bg-hover)]"
|
||||
value=${value}
|
||||
...${props}
|
||||
/>
|
||||
>${$input}
|
||||
<i
|
||||
class="i-command pointer-events-none
|
||||
absolute right-[8px] top-[6px] w-[16px] h-[16px]
|
||||
@ -319,9 +341,21 @@ function HotkeyInput({ value, onkeydown, ...props }) {
|
||||
</label>`;
|
||||
}
|
||||
|
||||
function ColorInput({ value, ...props }) {
|
||||
function ColorInput({ _get, _set, ...props }) {
|
||||
Coloris({ format: "rgb" });
|
||||
const { html } = globalThis.__enhancerApi,
|
||||
updateContrast = ($input, $icon) => {
|
||||
$input = html`<input
|
||||
type="text"
|
||||
class="appearance-none text-[14px] leading-[1.2]
|
||||
h-[28px] w-full pl-[8px] pr-[32px] pb-px"
|
||||
data-coloris
|
||||
...${props}
|
||||
/>`,
|
||||
$icon = html`<i
|
||||
class="i-pipette pointer-events-none absolute opacity-70
|
||||
right-[8px] top-[6px] w-[16px] h-[16px] text-current"
|
||||
></i>`,
|
||||
updateContrast = () => {
|
||||
$input.style.background = $input.value;
|
||||
const [r, g, b, a = 1] = $input.value
|
||||
.replace(/^rgba?\(/, "")
|
||||
@ -337,26 +371,18 @@ function ColorInput({ value, ...props }) {
|
||||
$icon.style.color = $input.style.color;
|
||||
};
|
||||
|
||||
const $input = html`<input
|
||||
type="text"
|
||||
class="appearance-none text-[14px] leading-[1.2]
|
||||
h-[28px] w-full pl-[8px] pr-[32px] pb-px"
|
||||
style="background: ${value}"
|
||||
value=${value}
|
||||
data-coloris
|
||||
...${props}
|
||||
/>`,
|
||||
$icon = html`<i
|
||||
class="i-pipette pointer-events-none absolute opacity-70
|
||||
right-[8px] top-[6px] w-[16px] h-[16px] text-current"
|
||||
></i>`,
|
||||
{ oninput } = $input;
|
||||
const { oninput } = $input;
|
||||
$input.oninput = (event) => {
|
||||
oninput?.(event);
|
||||
updateContrast($input, $icon);
|
||||
_set?.($input.value);
|
||||
updateContrast();
|
||||
};
|
||||
updateContrast($input, $icon);
|
||||
Coloris({ format: "rgb" });
|
||||
useState(["rerender"], () => {
|
||||
_get?.().then((value) => {
|
||||
$input.value = value;
|
||||
updateContrast();
|
||||
});
|
||||
});
|
||||
|
||||
return html`<label
|
||||
class="notion-enhancer--menu-color-input shrink-0
|
||||
@ -365,26 +391,27 @@ function ColorInput({ value, ...props }) {
|
||||
[position:0_0,4px_4px]
|
||||
[size:8px_8px]
|
||||
)"
|
||||
>
|
||||
${$input}${$icon}
|
||||
>${$input}${$icon}
|
||||
</label>`;
|
||||
}
|
||||
|
||||
function FileInput({ filename, extensions, onupload, onchange, ...props }) {
|
||||
function FileInput({ extensions, _get, _set, ...props }) {
|
||||
const { html } = globalThis.__enhancerApi,
|
||||
$filename = html`<span>${filename || "Upload a file"}</span>`,
|
||||
$filename = html`<span>Upload a file</span>`,
|
||||
$clear = html`<button
|
||||
class="ml-[8px] h-[14px] cursor-pointer text-[color:var(--theme--fg-secondary)]
|
||||
transition duration-[20ms] hover:text-[color:var(--theme--fg-primary)]"
|
||||
style=${filename ? "" : "display: none"}
|
||||
style="display: none"
|
||||
onclick=${() => {
|
||||
$filename.innerText = "Upload a file";
|
||||
$clear.style.display = "none";
|
||||
onupload?.({ filename: "", content: "" });
|
||||
_set?.({ filename: "", content: "" });
|
||||
}}
|
||||
>
|
||||
<i class="i-x w-[14px] h-[14px]"></i>
|
||||
</button>`;
|
||||
|
||||
const { onchange } = props;
|
||||
props.onchange = (event) => {
|
||||
const file = event.target.files[0],
|
||||
reader = new FileReader();
|
||||
@ -393,11 +420,18 @@ function FileInput({ filename, extensions, onupload, onchange, ...props }) {
|
||||
upload = { filename: file.name, content };
|
||||
$filename.innerText = file.name;
|
||||
$clear.style.display = "";
|
||||
onupload?.(upload);
|
||||
_set?.(upload);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
onchange?.(event);
|
||||
};
|
||||
useState(["rerender"], () => {
|
||||
_get?.().then((file) => {
|
||||
$filename.innerText = file?.filename || "Upload a file";
|
||||
$clear.style.display = file?.filename ? "" : "none";
|
||||
});
|
||||
});
|
||||
|
||||
return html`<div
|
||||
class="notion-enhancer--menu-file-input shrink-0 flex items-center"
|
||||
>
|
||||
@ -423,9 +457,25 @@ function FileInput({ filename, extensions, onupload, onchange, ...props }) {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function Select({ values, value, onchange, ...props }) {
|
||||
function Select({ values, _get, _set, ...props }) {
|
||||
const { html } = globalThis.__enhancerApi,
|
||||
updateWidth = ($select) => {
|
||||
$select = html`<select
|
||||
class="appearance-none bg-transparent rounded-[4px] cursor-pointer
|
||||
text-[14px] leading-[1.2] pl-[8px] pr-[28px] h-[28px] max-w-[256px]
|
||||
transition duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
|
||||
...${props}
|
||||
>
|
||||
${values.map((value) => {
|
||||
return html`<option
|
||||
value=${value}
|
||||
class="bg-[color:var(--theme--bg-secondary)]
|
||||
text-[color:var(--theme--fg-primary)]"
|
||||
>
|
||||
${value}
|
||||
</option>`;
|
||||
})}
|
||||
</select>`,
|
||||
updateWidth = () => {
|
||||
const $tmp = html`<span
|
||||
class="text-[14px] pl-[8px] pr-[28px]
|
||||
absolute top-[-9999px] left-[-9999px]"
|
||||
@ -437,29 +487,19 @@ function Select({ values, value, onchange, ...props }) {
|
||||
$tmp.remove();
|
||||
});
|
||||
};
|
||||
props.onchange = (event) => {
|
||||
onchange?.(event);
|
||||
updateWidth(event.target);
|
||||
};
|
||||
|
||||
const $select = html`<select
|
||||
class="appearance-none bg-transparent rounded-[4px] cursor-pointer
|
||||
text-[14px] leading-[1.2] pl-[8px] pr-[28px] h-[28px] max-w-[256px]
|
||||
transition duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
|
||||
...${props}
|
||||
>
|
||||
${values.map((value) => {
|
||||
return html`<option
|
||||
value=${value}
|
||||
class="bg-[color:var(--theme--bg-secondary)]
|
||||
text-[color:var(--theme--fg-primary)]"
|
||||
>
|
||||
${value}
|
||||
</option>`;
|
||||
})}
|
||||
</select>`;
|
||||
$select.value = value ?? $select.value;
|
||||
updateWidth($select);
|
||||
const { onchange } = $select;
|
||||
$select.onchange = (event) => {
|
||||
onchange?.(event);
|
||||
_set?.($select.value);
|
||||
updateWidth();
|
||||
};
|
||||
useState(["rerender"], () => {
|
||||
_get?.().then((value) => {
|
||||
$select.value = value;
|
||||
updateWidth();
|
||||
});
|
||||
});
|
||||
|
||||
return html`<div class="notion-enhancer--menu-select relative">
|
||||
${$select}
|
||||
@ -471,16 +511,27 @@ function Select({ values, value, onchange, ...props }) {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function Toggle(props) {
|
||||
const { html } = globalThis.__enhancerApi;
|
||||
return html`<div class="notion-enhancer--menu-toggle shrink-0">
|
||||
<input
|
||||
function Toggle({ _get, _set, ...props }) {
|
||||
const { html } = globalThis.__enhancerApi,
|
||||
$input = html`<input
|
||||
tabindex="-1"
|
||||
type="checkbox"
|
||||
class="hidden checked:sibling:children:(
|
||||
bg-[color:var(--theme--accent-primary)] after:translate-x-[12px])"
|
||||
bg-[color:var(--theme--accent-primary)] after:translate-x-[12px])"
|
||||
...${props}
|
||||
/>
|
||||
/>`;
|
||||
|
||||
const { onchange } = $input;
|
||||
$input.onchange = (event) => {
|
||||
onchange?.(event);
|
||||
_set?.($input.checked);
|
||||
};
|
||||
useState(["rerender"], () => {
|
||||
_get?.().then((checked) => ($input.checked = checked));
|
||||
});
|
||||
|
||||
return html`<div class="notion-enhancer--menu-toggle shrink-0">
|
||||
${$input}
|
||||
<div
|
||||
tabindex="0"
|
||||
class="w-[30px] h-[18px] rounded-[44px] cursor-pointer
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
import { setState, useState } from "./state.mjs";
|
||||
import { getState, setState, useState } from "./state.mjs";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarSection,
|
||||
@ -34,19 +34,16 @@ const renderOptions = async (mod) => {
|
||||
if (options[options.length - 1]?.type === "heading") options.pop();
|
||||
options = options.map(async (opt) => {
|
||||
if (opt.type === "heading") return html`<${Option} ...${opt} />`;
|
||||
const value = await db.get(opt.key),
|
||||
_update = (value) => db.set(opt.key, value);
|
||||
return html`<${Option} ...${{ ...opt, value, _update }} />`;
|
||||
const _get = () => db.get(opt.key),
|
||||
_set = (value) => db.set(opt.key, value);
|
||||
return html`<${Option} ...${{ ...opt, _get, _set }} />`;
|
||||
});
|
||||
return Promise.all(options);
|
||||
};
|
||||
|
||||
const renderList = async (mods) => {
|
||||
const { html, platform, getProfile } = globalThis.__enhancerApi,
|
||||
{ isEnabled, initDatabase } = globalThis.__enhancerApi,
|
||||
enabledMods = initDatabase([await getProfile(), "enabledMods"]);
|
||||
mods = mods
|
||||
.filter((mod) => {
|
||||
const compatibleMods = (mods) => {
|
||||
const { platform } = globalThis.__enhancerApi;
|
||||
return mods.filter((mod) => {
|
||||
const required =
|
||||
mod.id &&
|
||||
mod.name &&
|
||||
@ -56,85 +53,123 @@ const renderList = async (mods) => {
|
||||
mod.authors,
|
||||
compatible = !mod.platforms || mod.platforms.includes(platform);
|
||||
return required && compatible;
|
||||
});
|
||||
},
|
||||
renderList = async (mods) => {
|
||||
const { html, getProfile, initDatabase } = globalThis.__enhancerApi,
|
||||
enabledMods = initDatabase([await getProfile(), "enabledMods"]);
|
||||
mods = compatibleMods(mods).map(async (mod) => {
|
||||
const _get = () => enabledMods.get(mod.id),
|
||||
_set = (enabled) => enabledMods.set(mod.id, enabled);
|
||||
return html`<${Mod} ...${{ ...mod, _get, _set }} />`;
|
||||
});
|
||||
return html`<${List}>${await Promise.all(mods)}<//>`;
|
||||
};
|
||||
|
||||
const renderOptionViews = async (parentView, mods) => {
|
||||
const { html, getProfile, initDatabase } = globalThis.__enhancerApi,
|
||||
enabledMods = initDatabase([await getProfile(), "enabledMods"]);
|
||||
mods = compatibleMods(mods)
|
||||
.filter((mod) => {
|
||||
return mod.options?.filter((opt) => opt.type !== "heading").length;
|
||||
})
|
||||
.map(async (mod) => {
|
||||
const enabled = await isEnabled(mod.id),
|
||||
_update = (enabled) => enabledMods.set(mod.id, enabled);
|
||||
return html`<${Mod} ...${{ ...mod, enabled, _update }} />`;
|
||||
const _get = () => enabledMods.get(mod.id),
|
||||
_set = (enabled) => enabledMods.set(mod.id, enabled);
|
||||
return html`<${View} id=${mod.id}>
|
||||
<${Mod} ...${{ ...mod, options: [], _get, _set }} />
|
||||
${await renderOptions(mod)}<//
|
||||
>`;
|
||||
});
|
||||
return html`<${List}>${await Promise.all(mods)}<//>`;
|
||||
return Promise.all(mods);
|
||||
};
|
||||
|
||||
let renderStarted;
|
||||
const render = async (iconStyle) => {
|
||||
const render = async () => {
|
||||
const { html, getCore, getThemes } = globalThis.__enhancerApi,
|
||||
{ getExtensions, getIntegrations } = globalThis.__enhancerApi;
|
||||
if (!html || !getCore || renderStarted) return;
|
||||
renderStarted = true;
|
||||
{ getExtensions, getIntegrations } = globalThis.__enhancerApi,
|
||||
[icon, renderStarted] = getState(["icon", "renderStarted"]);
|
||||
if (!html || !getCore || !icon || renderStarted) return;
|
||||
setState({ renderStarted: true });
|
||||
|
||||
const $sidebar = html`<${Sidebar}>
|
||||
${[
|
||||
"notion-enhancer",
|
||||
{
|
||||
icon: `notion-enhancer${iconStyle === "Monochrome" ? "?mask" : ""}`,
|
||||
title: "Welcome",
|
||||
},
|
||||
{
|
||||
icon: "message-circle",
|
||||
title: "Community",
|
||||
href: "https://discord.gg/sFWPXtA",
|
||||
},
|
||||
{
|
||||
icon: "clock",
|
||||
title: "Changelog",
|
||||
href: "https://notion-enhancer.github.io/about/changelog/",
|
||||
},
|
||||
{
|
||||
icon: "book",
|
||||
title: "Documentation",
|
||||
href: "https://notion-enhancer.github.io/",
|
||||
},
|
||||
{
|
||||
icon: "github",
|
||||
title: "Source Code",
|
||||
href: "https://github.com/notion-enhancer",
|
||||
},
|
||||
{
|
||||
icon: "coffee",
|
||||
title: "Sponsor",
|
||||
href: "https://github.com/sponsors/dragonwocky",
|
||||
},
|
||||
"Settings",
|
||||
{ icon: "sliders-horizontal", title: "Core" },
|
||||
{ icon: "palette", title: "Themes" },
|
||||
{ icon: "zap", title: "Extensions" },
|
||||
{ icon: "plug", title: "Integrations" },
|
||||
].map((item) => {
|
||||
if (typeof item === "string") {
|
||||
return html`<${SidebarSection}>${item}<//>`;
|
||||
} else {
|
||||
const sidebar = [
|
||||
"notion-enhancer",
|
||||
{
|
||||
icon: `notion-enhancer${icon === "Monochrome" ? "?mask" : ""}`,
|
||||
title: "Welcome",
|
||||
},
|
||||
{
|
||||
icon: "message-circle",
|
||||
title: "Community",
|
||||
href: "https://discord.gg/sFWPXtA",
|
||||
},
|
||||
{
|
||||
icon: "clock",
|
||||
title: "Changelog",
|
||||
href: "https://notion-enhancer.github.io/about/changelog/",
|
||||
},
|
||||
{
|
||||
icon: "book",
|
||||
title: "Documentation",
|
||||
href: "https://notion-enhancer.github.io/",
|
||||
},
|
||||
{
|
||||
icon: "github",
|
||||
title: "Source Code",
|
||||
href: "https://github.com/notion-enhancer",
|
||||
},
|
||||
{
|
||||
icon: "coffee",
|
||||
title: "Sponsor",
|
||||
href: "https://github.com/sponsors/dragonwocky",
|
||||
},
|
||||
"Settings",
|
||||
{ icon: "sliders-horizontal", title: "Core" },
|
||||
{ icon: "palette", title: "Themes" },
|
||||
{ icon: "zap", title: "Extensions" },
|
||||
{ icon: "plug", title: "Integrations" },
|
||||
],
|
||||
$sidebar = html`<${Sidebar}>
|
||||
${sidebar.map((item) => {
|
||||
if (typeof item === "object") {
|
||||
const { title, ...props } = item;
|
||||
return html`<${SidebarButton} ...${props}>${title}<//>`;
|
||||
}
|
||||
} else return html`<${SidebarSection}>${item}<//>`;
|
||||
})}
|
||||
<//>`,
|
||||
$views = [
|
||||
html`<${View} id="welcome">welcome<//>`,
|
||||
html`<${View} id="core">${await renderOptions(await getCore())}<//>`,
|
||||
html`<${View} id="themes">${await renderList(await getThemes())}<//>`,
|
||||
html`<${View} id="extensions">
|
||||
${await renderList(await getExtensions())}
|
||||
<//>`,
|
||||
html`<${View} id="integrations">
|
||||
${await renderList(await getIntegrations())}
|
||||
<//>`,
|
||||
];
|
||||
document.body.append($sidebar, ...$views);
|
||||
<//>`;
|
||||
document.body.append(
|
||||
$sidebar,
|
||||
html`<${View} id="welcome">welcome<//>`,
|
||||
html`<${View} id="core">${await renderOptions(await getCore())}<//>`
|
||||
);
|
||||
for (const { id, mods } of [
|
||||
{ id: "themes", mods: await getThemes() },
|
||||
{ id: "extensions", mods: await getExtensions() },
|
||||
{ id: "integrations", mods: await getIntegrations() },
|
||||
]) {
|
||||
document.body.append(
|
||||
html`<${View} id=${id}>${await renderList(mods)}<//>`,
|
||||
...(await renderOptionViews(id, mods))
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("message", async (event) => {
|
||||
window.addEventListener("focus", () => setState({ rerender: true }));
|
||||
window.addEventListener("message", (event) => {
|
||||
if (event.data?.namespace !== "notion-enhancer") return;
|
||||
setState({ theme: event.data?.mode });
|
||||
const [theme, icon] = getState(["theme", "icon"]);
|
||||
setState({
|
||||
rerender: true,
|
||||
theme: event.data?.theme ?? theme,
|
||||
icon: event.data?.icon ?? icon,
|
||||
});
|
||||
});
|
||||
useState(["theme"], ([theme]) => {
|
||||
if (theme === "dark") document.body.classList.add("dark");
|
||||
if (theme === "light") document.body.classList.remove("dark");
|
||||
});
|
||||
useState(["rerender"], async () => {
|
||||
const [theme, icon] = getState(["theme", "icon"]);
|
||||
if (!theme || !icon) return;
|
||||
// chrome extensions run in an isolated execution context
|
||||
// but extension:// pages can access chrome apis
|
||||
// ∴ notion-enhancer api is imported directly
|
||||
@ -148,9 +183,5 @@ window.addEventListener("message", async (event) => {
|
||||
// load stylesheets from enabled themes
|
||||
await import("../../load.mjs");
|
||||
// wait for api globals to be available
|
||||
requestIdleCallback(() => render(event.data?.iconStyle));
|
||||
});
|
||||
useState(["theme"], ([mode]) => {
|
||||
if (mode === "dark") document.body.classList.add("dark");
|
||||
if (mode === "light") document.body.classList.remove("dark");
|
||||
requestIdleCallback(() => render());
|
||||
});
|
||||
|
||||
@ -6,6 +6,9 @@
|
||||
|
||||
const _state = {},
|
||||
_subscribers = [],
|
||||
getState = (keys) => {
|
||||
return keys.map((key) => _state[key]);
|
||||
},
|
||||
setState = (state) => {
|
||||
Object.assign(_state, state);
|
||||
const updates = Object.keys(state);
|
||||
@ -15,7 +18,7 @@ const _state = {},
|
||||
},
|
||||
useState = (keys, callback) => {
|
||||
_subscribers.push([keys, callback]);
|
||||
callback(keys.map((key) => _state[key]));
|
||||
callback(getState(keys));
|
||||
};
|
||||
|
||||
export { setState, useState };
|
||||
export { setState, useState, getState };
|
||||
|
||||
@ -26,6 +26,12 @@
|
||||
"type": "heading",
|
||||
"label": "Appearance"
|
||||
},
|
||||
{
|
||||
"type": "toggle",
|
||||
"key": "toggle",
|
||||
"description": "Sets whether the notion-enhancer icon added to Notion's sidebar should be coloured or monochrome. The latter style will match the theme's icon colour for users who would like the icon to be less noticeable.",
|
||||
"value": true
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"key": "menuButtonIconStyle",
|
||||
@ -54,6 +60,18 @@
|
||||
"description": "Activates built-in debugging tools accessible through the application menu.",
|
||||
"platforms": ["darwin", "win32", "linux"],
|
||||
"value": false
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"key": "text",
|
||||
"description": "Activates built-in debugging tools accessible through the application menu.",
|
||||
"value": ""
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"key": "number",
|
||||
"description": "Activates built-in debugging tools accessible through the application menu.",
|
||||
"value": ""
|
||||
}
|
||||
],
|
||||
"clientStyles": ["variables.css"],
|
||||
|
||||
@ -12,5 +12,50 @@
|
||||
"avatar": "https://dragonwocky.me/avatar.jpg"
|
||||
}
|
||||
],
|
||||
"options": [
|
||||
{
|
||||
"type": "heading",
|
||||
"label": "Hotkeys"
|
||||
},
|
||||
{
|
||||
"type": "hotkey",
|
||||
"key": "openMenuHotkey",
|
||||
"description": "Opens the notion-enhancer menu from within Notion.",
|
||||
"value": "Ctrl+Shift+,"
|
||||
},
|
||||
{
|
||||
"type": "heading",
|
||||
"label": "Appearance"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"key": "menuButtonIconStyle",
|
||||
"description": "Sets whether the notion-enhancer icon added to Notion's sidebar should be coloured or monochrome. The latter style will match the theme's icon colour for users who would like the icon to be less noticeable.",
|
||||
"values": ["Colour", "Monochrome"]
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"key": "loadThemeOverrides",
|
||||
"description": "Loads the styling required for a theme to customise Notion's interface. Disabling this will increase client performance.",
|
||||
"values": ["Auto", "Enabled", "Disabled"]
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "customStyles",
|
||||
"description": "Adds the styles from an uploaded .css file to Notion. Use this if you would like to customise the current theme or <a href=\"https://notion-enhancer.github.io/advanced/tweaks\">otherwise tweak Notion's appearance</a>.",
|
||||
"extensions": ["css"]
|
||||
},
|
||||
{
|
||||
"type": "heading",
|
||||
"label": "Advanced"
|
||||
},
|
||||
{
|
||||
"type": "toggle",
|
||||
"key": "debugMode",
|
||||
"description": "Activates built-in debugging tools accessible through the application menu.",
|
||||
"platforms": ["darwin", "win32", "linux"],
|
||||
"value": false
|
||||
}
|
||||
],
|
||||
"clientStyles": ["client.css"]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user