From 45e0be7d625f77291acc2e5b6589b98ded00da13 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 6 Aug 2023 23:45:56 +1000 Subject: [PATCH] refactor: move state.mjs into markup.mjs for use in notion interface --- src/core/client.mjs | 35 +++- src/core/islands/Panel.mjs | 73 +++------ src/core/islands/TopbarButton.mjs | 26 +++ src/core/menu/islands/Banner.mjs | 3 +- src/core/menu/islands/Checkbox.mjs | 3 +- src/core/menu/islands/Footer.mjs | 2 +- src/core/menu/islands/Input.mjs | 5 +- src/core/menu/islands/List.mjs | 3 +- src/core/menu/islands/Mod.mjs | 3 +- src/core/menu/islands/Onboarding.mjs | 2 +- src/core/menu/islands/Options.mjs | 3 +- src/core/menu/islands/Popup.mjs | 5 +- src/core/menu/islands/Profiles.mjs | 3 +- src/core/menu/islands/Select.mjs | 3 +- src/core/menu/islands/Sidebar.mjs | 6 +- src/core/menu/islands/Telemetry.mjs | 2 +- src/core/menu/islands/Toggle.mjs | 3 +- src/core/menu/islands/View.mjs | 3 +- src/core/menu/menu.mjs | 230 ++++++++++++++------------- src/core/menu/state.mjs | 24 --- src/shared/markup.js | 95 ++++++++--- 21 files changed, 284 insertions(+), 248 deletions(-) create mode 100644 src/core/islands/TopbarButton.mjs delete mode 100644 src/core/menu/state.mjs diff --git a/src/core/client.mjs b/src/core/client.mjs index 27efa60..3171fd7 100644 --- a/src/core/client.mjs +++ b/src/core/client.mjs @@ -8,6 +8,7 @@ import { checkForUpdate } from "./updateCheck.mjs"; import { sendTelemetryPing } from "./sendTelemetry.mjs"; import { Modal, Frame } from "./islands/Modal.mjs"; import { MenuButton } from "./islands/MenuButton.mjs"; +import { TopbarButton } from "./islands/TopbarButton.mjs"; import { Panel } from "./islands/Panel.mjs"; const shouldLoadThemeOverrides = async (db) => { @@ -118,10 +119,11 @@ const insertMenu = async (db) => { }); }; -const insertPanel = async (db) => { +const insertPanel = async (api, db) => { const notionFrame = ".notion-frame", - { html, addKeyListener, addMutationListener } = globalThis.__enhancerApi, - togglePanelHotkey = await db.get("togglePanelHotkey"); + notionTopbarBtn = ".notion-topbar-more-button", + togglePanelHotkey = await db.get("togglePanelHotkey"), + { html } = api; const $panel = html`<${Panel} _getWidth=${() => db.get("sidePanelWidth")} @@ -129,28 +131,45 @@ const insertPanel = async (db) => { _getOpen=${() => db.get("sidePanelOpen")} _setOpen=${(open) => db.set("sidePanelOpen", open)} />`, + togglePanel = () => { + if ($panel.hasAttribute("open")) $panel.close(); + else $panel.open(); + }; + + const $panelTopbarBtn = html`<${TopbarButton} + aria-label="Open side panel" + icon="panel-right" + onclick=${togglePanel} + />`, appendToDom = () => { const $frame = document.querySelector(notionFrame); if (!$frame) return; if (!$frame.contains($panel)) $frame.append($panel); if (!$frame.style.flexDirection !== "row") $frame.style.flexDirection = "row"; + if (!document.contains($panelTopbarBtn)) { + const $notionTopbarBtn = document.querySelector(notionTopbarBtn); + $notionTopbarBtn?.before($panelTopbarBtn); + } }; - addMutationListener(notionFrame, appendToDom); + api.addMutationListener(`${notionFrame}, ${notionTopbarBtn}`, appendToDom); + api.useState(["panelOpen"], ([panelOpen]) => { + if (panelOpen) $panelTopbarBtn.setAttribute("data-active", true); + else $panelTopbarBtn.removeAttribute("data-active"); + }); appendToDom(); - addKeyListener(togglePanelHotkey, (event) => { + api.addKeyListener(togglePanelHotkey, (event) => { event.preventDefault(); event.stopPropagation(); - if ($panel.hasAttribute("open")) $panel.close(); - else $panel.open(); + togglePanel(); }); }; export default async (api, db) => Promise.all([ insertMenu(db), - insertPanel(db), + insertPanel(api, db), insertCustomStyles(db), loadThemeOverrides(db), sendTelemetryPing(), diff --git a/src/core/islands/Panel.mjs b/src/core/islands/Panel.mjs index 446b45a..8742021 100644 --- a/src/core/islands/Panel.mjs +++ b/src/core/islands/Panel.mjs @@ -4,17 +4,6 @@ * (https://notion-enhancer.github.io/) under the MIT license */ -//
-// -// -// -//
; - import { Tooltip } from "./Tooltip.mjs"; function PanelView(props) { @@ -36,9 +25,8 @@ function Panel({ maxWidth = 640, ...props }) { - const { html, extendProps } = globalThis.__enhancerApi, - { addMutationListener, removeMutationListener } = globalThis.__enhancerApi; - extendProps(props, { + const { html, ...api } = globalThis.__enhancerApi; + api.extendProps(props, { class: `notion-enhancer--side-panel order-2 shrink-0 transition-[width] open:w-[var(--side\\_panel--width)] w-0 border-l-1 border-[color:var(--theme--fg-border)] @@ -65,21 +53,22 @@ function Panel({ d="M2.25781 14.1211C2.47656 14.1211 2.66797 14.0391 2.81836 13.8887L8.14355 8.67969C8.32812 8.49512 8.41699 8.29688 8.41699 8.06445C8.41699 7.8252 8.32812 7.62012 8.14355 7.44922L2.81836 2.24023C2.66797 2.08984 2.4834 2.00781 2.25781 2.00781C1.81348 2.00781 1.46484 2.35645 1.46484 2.80078C1.46484 3.0127 1.55371 3.21777 1.7041 3.375L6.50977 8.05762L1.7041 12.7539C1.55371 12.9043 1.46484 13.1094 1.46484 13.3281C1.46484 13.7725 1.81348 14.1211 2.25781 14.1211ZM8.36914 14.1211C8.58789 14.1211 8.77246 14.0391 8.92285 13.8887L14.2549 8.67969C14.4395 8.49512 14.5283 8.29688 14.5283 8.06445C14.5283 7.8252 14.4326 7.62012 14.2549 7.44922L8.92285 2.24023C8.77246 2.08984 8.58789 2.00781 8.36914 2.00781C7.9248 2.00781 7.56934 2.35645 7.56934 2.80078C7.56934 3.0127 7.66504 3.21777 7.81543 3.375L12.6211 8.05762L7.81543 12.7539C7.66504 12.9043 7.56934 13.1094 7.56934 13.3281C7.56934 13.7725 7.9248 14.1211 8.36914 14.1211Z" > - `, - $panel = html``; + ${$chevronClose} + + `; let preDragWidth, userDragActive, @@ -139,33 +128,9 @@ function Panel({ options = { duration: 150, easing: "cubic-bezier(0.4, 0, 0.2, 1)" }; $notionHelp.style.setProperty("right", destination); $notionHelp.animate(keyframes, options); - removeMutationListener(repositionHelp); + api.removeMutationListener(repositionHelp); }; - addMutationListener(notionHelp, repositionHelp); - - const notionTopbarMore = ".notion-topbar-more-button", - $topbarPanelButton = html``, - appendToDom = () => { - if (document.contains($topbarPanelButton)) return; - const $notionTopbarMore = document.querySelector(notionTopbarMore); - $notionTopbarMore?.before($topbarPanelButton); - }; - $topbarPanelButton.addEventListener("click", () => { - if ($panel.hasAttribute("open")) $panel.close(); - else $panel.open(); - }); - addMutationListener(notionTopbarMore, appendToDom); - appendToDom(); + api.addMutationListener(notionHelp, repositionHelp); $panel.resize = async (width) => { $tooltip.hide(); @@ -181,7 +146,7 @@ function Panel({ $panel.open = () => { $panel.setAttribute("open", true); $panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = 0)); - $topbarPanelButton.setAttribute("data-active", true); + api.setState({ panelOpen: true }); $panel.onopen?.(); _setOpen(true); $panel.resize(); @@ -191,8 +156,8 @@ function Panel({ $panel.onbeforeclose?.(); $panel.removeAttribute("open"); $panel.style.pointerEvents = "auto"; - $topbarPanelButton.removeAttribute("data-active"); $panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = -1)); + api.setState({ panelOpen: false }); repositionHelp(); _setOpen(false); setTimeout(() => { diff --git a/src/core/islands/TopbarButton.mjs b/src/core/islands/TopbarButton.mjs new file mode 100644 index 0000000..4c95ecf --- /dev/null +++ b/src/core/islands/TopbarButton.mjs @@ -0,0 +1,26 @@ +/** + * notion-enhancer + * (c) 2023 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +function TopbarButton({ icon, ...props }, ...children) { + const { html, extendProps } = globalThis.__enhancerApi; + extendProps(props, { + tabindex: 0, + role: "button", + class: `notion-enhancer--topbar-button + user-select-none h-[28px] w-[33px] duration-[20ms] + transition inline-flex items-center justify-center mr-[2px] + rounded-[3px] hover:bg-[color:var(--theme--bg-hover)] + [data-active]:bg-[color:var(--theme--bg-hover)]`, + }); + return html``; +} + +export { TopbarButton }; diff --git a/src/core/menu/islands/Banner.mjs b/src/core/menu/islands/Banner.mjs index 0e5e791..264cd04 100644 --- a/src/core/menu/islands/Banner.mjs +++ b/src/core/menu/islands/Banner.mjs @@ -7,7 +7,6 @@ import { Popup } from "./Popup.mjs"; import { Button } from "./Button.mjs"; import { Description } from "./Description.mjs"; -import { useState } from "../state.mjs"; const updateGuide = "https://notion-enhancer.github.io/getting-started/updating/", @@ -69,7 +68,7 @@ function Circle(rect) { } function Banner({ updateAvailable, isDevelopmentBuild }) { - const { html, version, initDatabase } = globalThis.__enhancerApi, + const { html, version, initDatabase, useState } = globalThis.__enhancerApi, $version = html`