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`