chore: minor refactoring
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 595 B After Width: | Height: | Size: 595 B |
|
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 9.8 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
@ -6,8 +6,6 @@
|
||||
|
||||
"use strict";
|
||||
|
||||
// jump to
|
||||
|
||||
const { twind, htm, lucide } = globalThis,
|
||||
{ iconColour, iconMonochrome } = globalThis.__enhancerApi;
|
||||
|
||||
@ -83,7 +81,10 @@ const encodeSvg = (svg) =>
|
||||
// complex markup, e.g. `<i class="i-bookmark" />`
|
||||
twind.install({
|
||||
darkMode: "class",
|
||||
rules: [[/^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/, presetIcons]],
|
||||
rules: [
|
||||
["text-(wrap|nowrap|balance|pretty)", "textWrap"],
|
||||
[/^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/, presetIcons],
|
||||
],
|
||||
variants: [
|
||||
// https://github.com/tw-in-js/twind/blob/main/packages/preset-ext/src/variants.ts
|
||||
[
|
||||
@ -183,7 +183,6 @@ const insertPanel = async (api, db) => {
|
||||
appendToDom();
|
||||
|
||||
useState(["panelOpen"], ([panelOpen]) => {
|
||||
console.log(panelOpen);
|
||||
if (panelOpen) $panelTopbarBtn.setAttribute("data-active", true);
|
||||
else $panelTopbarBtn.removeAttribute("data-active");
|
||||
});
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>notion-enhancer menu</title>
|
||||
<link rel="stylesheet" href="./menu.css" />
|
||||
<link rel="stylesheet" href="../../vendor/coloris.min.css" />
|
||||
<script src="../../vendor/coloris.min.js" type="module"></script>
|
||||
<link rel="stylesheet" href="../../_vendor/coloris.min.css" />
|
||||
<script src="../../_vendor/coloris.min.js" type="module"></script>
|
||||
<script src="./menu.mjs" type="module" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -105,11 +105,10 @@ function Input({
|
||||
class="h-full w-full pb-px text-[14px] leading-[1.2]
|
||||
${variant === "lg" ? "pl-[12px] pr-[40px]" : "pl-[8px] pr-[32px]"}
|
||||
appearance-none bg-transparent ${type === "file" ? "hidden" : ""}
|
||||
${type === "hotkey" ? "text-[color:var(--theme--fg-secondary)]" : ""}
|
||||
${type === "color"
|
||||
? "font-medium"
|
||||
: type === "hotkey"
|
||||
? "text-[color:var(--theme--fg-secondary)] border-(& [color:var(--theme--fg-border)])"
|
||||
: ""}"
|
||||
: "border-(& [color:var(--theme--fg-border)])"}"
|
||||
data-coloris=${type === "color"}
|
||||
...${props}
|
||||
/>`,
|
||||
@ -170,9 +169,11 @@ function Input({
|
||||
<label
|
||||
tabindex="0"
|
||||
class="flex items-center cursor-pointer select-none
|
||||
h-[28px] px-[8px] bg-[color:var(--theme--bg-secondary)]
|
||||
text-([14px] [color:var(--theme--fg-secondary)]) rounded-[4px]
|
||||
transition duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
|
||||
px-[8px] bg-[color:var(--theme--bg-secondary)]
|
||||
h-[28px] rounded-[4px] transition duration-[20ms]
|
||||
text-([14px] [color:var(--theme--fg-secondary)])
|
||||
border-(& [color:var(--theme--fg-border)])
|
||||
hover:bg-[color:var(--theme--bg-hover)]"
|
||||
onkeydown=${(event) => {
|
||||
if ([" ", "Enter"].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
|
||||
@ -69,7 +69,7 @@ function Select({
|
||||
return {
|
||||
...opt,
|
||||
$option: html`<${Option} ...${{ ...opt, _get, _set }} />`,
|
||||
$value: html`<div class="inline-flex items-center gap-[6px]">
|
||||
$value: html`<div class="inline-flex text-nowrap items-center gap-[6px]">
|
||||
<!-- swap icon/value order for correct display when dir="rtl" -->
|
||||
<span>${opt.value}</span>${opt.$icon?.cloneNode(true) ?? ""}
|
||||
</div>`,
|
||||
|
||||
@ -185,7 +185,7 @@ const renderMenu = async () => {
|
||||
const importApi = () => {
|
||||
return (_apiImport ??= (async () => {
|
||||
const api = globalThis.__enhancerApi;
|
||||
if (typeof api === "undefined") await import("../../shared/system.js");
|
||||
if (typeof api === "undefined") await import("../../_common/system.js");
|
||||
await import("../../load.mjs").then((i) => i.default);
|
||||
})());
|
||||
},
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer
|
||||
* (c) 2023 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
module.exports = async (api, db, __exports, __eval) => {
|
||||
if (await db.get("developerMode")) __exports.default.env = "development";
|
||||
};
|
||||
17
src/init.js
@ -14,8 +14,8 @@ const isElectron = () => {
|
||||
};
|
||||
|
||||
if (isElectron()) {
|
||||
require("./shared/system.js");
|
||||
require("./shared/registry.js");
|
||||
require("./_common/system.js");
|
||||
require("./_common/registry.js");
|
||||
const { enhancerUrl } = globalThis.__enhancerApi,
|
||||
{ getMods, isEnabled, modDatabase } = globalThis.__enhancerApi;
|
||||
|
||||
@ -24,15 +24,12 @@ if (isElectron()) {
|
||||
|
||||
module.exports = async (target, __exports, __eval) => {
|
||||
if (target === mainScript) require("./worker.js");
|
||||
|
||||
if (target === rendererScript) {
|
||||
// expose globalThis.__enhancerApi to scripts
|
||||
const { contextBridge } = require("electron");
|
||||
contextBridge.exposeInMainWorld(
|
||||
"__getEnhancerApi",
|
||||
() => globalThis.__enhancerApi
|
||||
);
|
||||
|
||||
const { contextBridge } = require("electron"),
|
||||
__getEnhancerApi = () => globalThis.__enhancerApi;
|
||||
contextBridge.exposeInMainWorld("__getEnhancerApi", __getEnhancerApi);
|
||||
|
||||
// load clientStyles, clientScripts
|
||||
document.addEventListener("readystatechange", () => {
|
||||
if (document.readyState !== "complete") return false;
|
||||
@ -54,6 +51,6 @@ if (isElectron()) {
|
||||
}
|
||||
};
|
||||
} else {
|
||||
import(chrome.runtime.getURL("/shared/system.js")) //
|
||||
import(chrome.runtime.getURL("/_common/system.js")) //
|
||||
.then(() => import(chrome.runtime.getURL("/load.mjs")));
|
||||
}
|
||||
|
||||
14
src/load.mjs
@ -44,15 +44,15 @@ export default (async () => {
|
||||
|
||||
await Promise.all([
|
||||
// i.e. if (not_menu) or (is_menu && not_electron), then import
|
||||
!(!IS_MENU || !IS_ELECTRON) || import(enhancerUrl("assets/icons.svg.js")),
|
||||
import(enhancerUrl("vendor/twind.min.js")),
|
||||
import(enhancerUrl("vendor/lucide.min.js")),
|
||||
import(enhancerUrl("vendor/htm.min.js")),
|
||||
!(!IS_MENU || !IS_ELECTRON) || import(enhancerUrl("_assets/icons.svg.js")),
|
||||
import(enhancerUrl("_vendor/twind.min.js")),
|
||||
import(enhancerUrl("_vendor/lucide.min.js")),
|
||||
import(enhancerUrl("_vendor/htm.min.js")),
|
||||
]);
|
||||
await Promise.all([
|
||||
!(!IS_MENU || !IS_ELECTRON) || import(enhancerUrl("shared/registry.js")),
|
||||
import(enhancerUrl("shared/events.js")),
|
||||
import(enhancerUrl("shared/markup.js")),
|
||||
!(!IS_MENU || !IS_ELECTRON) || import(enhancerUrl("_common/registry.js")),
|
||||
import(enhancerUrl("_common/events.js")),
|
||||
import(enhancerUrl("_common/markup.js")),
|
||||
]);
|
||||
|
||||
const { getMods, isEnabled, modDatabase } = globalThis.__enhancerApi;
|
||||
|
||||
@ -9,12 +9,12 @@
|
||||
"background": { "service_worker": "/worker.js" },
|
||||
"action": {},
|
||||
"icons": {
|
||||
"16": "/assets/colour-x16.png",
|
||||
"32": "/assets/colour-x32.png",
|
||||
"48": "/assets/colour-x48.png",
|
||||
"128": "/assets/colour-x128.png",
|
||||
"256": "/assets/colour-x256.png",
|
||||
"512": "/assets/colour-x512.png"
|
||||
"16": "/_assets/colour-x16.png",
|
||||
"32": "/_assets/colour-x32.png",
|
||||
"48": "/_assets/colour-x48.png",
|
||||
"128": "/_assets/colour-x128.png",
|
||||
"256": "/_assets/colour-x256.png",
|
||||
"512": "/_assets/colour-x512.png"
|
||||
},
|
||||
"permissions": [
|
||||
"tabs",
|
||||
|
||||