From 7fe993d3566e4da74ae432c1e98b0cbf14786d55 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 13 Feb 2024 21:41:35 +1100 Subject: [PATCH] feat: add scroll to bottom button #861 --- src/core/menu/islands/Mod.mjs | 10 ++++---- src/extensions/outliner/client.mjs | 1 - .../{scroll-to-top => scroller}/client.mjs | 24 ++++++++++++++---- .../{scroll-to-top => scroller}/mod.json | 22 +++++++++++----- .../scroller.png} | Bin src/extensions/titlebar/mod.json | 3 ++- .../{integrated-titlebar.jpg => titlebar.jpg} | Bin src/extensions/topbar/mod.json | 3 ++- .../topbar/{topbar-icons.jpg => topbar.jpg} | Bin src/registry.json | 2 +- 10 files changed, 44 insertions(+), 21 deletions(-) rename src/extensions/{scroll-to-top => scroller}/client.mjs (61%) rename src/extensions/{scroll-to-top => scroller}/mod.json (52%) rename src/extensions/{scroll-to-top/scroll-to-top.png => scroller/scroller.png} (100%) rename src/extensions/titlebar/{integrated-titlebar.jpg => titlebar.jpg} (100%) rename src/extensions/topbar/{topbar-icons.jpg => topbar.jpg} (100%) diff --git a/src/core/menu/islands/Mod.mjs b/src/core/menu/islands/Mod.mjs index 261540f..2e5ea87 100644 --- a/src/core/menu/islands/Mod.mjs +++ b/src/core/menu/islands/Mod.mjs @@ -39,19 +39,19 @@ function Mod({ class="rounded-[4px] mr-[12px] h-[74px] my-auto" />` : ""} -
-
+
+

${name}

${[`v${version}`, ...tags].map((tag) => { return html`${tag} `; })}
- <${Description} class="mb-[6px]" innerHTML=${description} /> + <${Description} class="mb-[6px] max-w-[80%]" innerHTML=${description} />
${authors.map((author) => { return html` diff --git a/src/extensions/outliner/client.mjs b/src/extensions/outliner/client.mjs index fb27ae7..eaa8be7 100644 --- a/src/extensions/outliner/client.mjs +++ b/src/extensions/outliner/client.mjs @@ -123,7 +123,6 @@ export default async (api, db) => { setup = () => { if (document.contains($page)) return; $page = document.querySelector(page); - console.log($page); $scroller = document.querySelector(scroller); $scroller?.removeEventListener("scroll", onScroll); $scroller?.addEventListener("scroll", onScroll); diff --git a/src/extensions/scroll-to-top/client.mjs b/src/extensions/scroller/client.mjs similarity index 61% rename from src/extensions/scroll-to-top/client.mjs rename to src/extensions/scroller/client.mjs index f76f0fa..516e5e9 100644 --- a/src/extensions/scroll-to-top/client.mjs +++ b/src/extensions/scroller/client.mjs @@ -12,14 +12,21 @@ import { FloatingButton } from "../../core/islands/FloatingButton.mjs"; export default async (api, db) => { const { html, addFloatingButton, removeFloatingButton } = api, { addMutationListener, removeMutationListener } = api, - distanceUntilShown = await db.get("distanceScrolledUntilShown"), + showScrollToBottom = await db.get("showScrollToBottom"), + distanceUntilShown = await db.get("distanceUntilScrollToTopShown"), scrollUnits = await db.get("scrollDistanceUnits"), behavior = (await db.get("smoothScrolling")) ? "smooth" : "auto", scroller = ".notion-frame > .notion-scroller"; let $scroller; - const $btn = html`<${FloatingButton} - onclick=${() => $scroller?.scroll({ top: 0, behavior })} + const scrollTo = (top) => $scroller?.scroll({ top, behavior }), + $scrollToBottom = html`<${FloatingButton} + onclick="${() => scrollTo($scroller.scrollHeight)}" + aria-label="Scroll to bottom" + > + `, + $scrollToTop = html`<${FloatingButton} + onclick=${() => scrollTo(0)} aria-label="Scroll to top" > `, @@ -31,8 +38,15 @@ export default async (api, db) => { scrollDist = (scrollTop / (scrollHeight - clientHeight)) * 100; if (isNaN(scrollDist)) scrollDist = 0; } - if (distanceUntilShown <= scrollDist) addFloatingButton($btn); - else removeFloatingButton($btn); + if (distanceUntilShown <= scrollDist) { + if (document.contains($scrollToBottom)) + $scrollToBottom.replaceWith($scrollToTop); + else addFloatingButton($scrollToTop); + } else if (showScrollToBottom) { + if (document.contains($scrollToTop)) + $scrollToTop.replaceWith($scrollToBottom); + else addFloatingButton($scrollToBottom); + } else removeFloatingButton($scrollToTop); }, setup = () => { if (document.contains($scroller)) return; diff --git a/src/extensions/scroll-to-top/mod.json b/src/extensions/scroller/mod.json similarity index 52% rename from src/extensions/scroll-to-top/mod.json rename to src/extensions/scroller/mod.json index f13b372..d01f179 100644 --- a/src/extensions/scroll-to-top/mod.json +++ b/src/extensions/scroller/mod.json @@ -1,9 +1,10 @@ { - "name": "Scroll To Top", + "name": "Scroller", "version": "0.4.0", "id": "0a958f5a-17c5-48b5-8713-16190cae1959", - "description": "Adds an arrow in the bottom right corner of the screen for scrolling back to the top of the current page.", - "thumbnail": "scroll-to-top.png", + "description": "Adds buttons to pages and full-page calendars to jump across content easily.", + "thumbnail": "scroller.png", + "tags": ["scroll-to-top", "scroll-to-bottom", "calendar-scroll"], "authors": [ { "name": "dragonwocky", @@ -20,14 +21,21 @@ { "type": "toggle", "key": "smoothScrolling", - "description": "Animates the return to the top of the page smoothly. Disable this to jump to the top of the page instantly when clicking the scroll to top button.", + "description": "Smoothly animates any scrolling triggered by this extension. Disable this to jump across pages instantly.", "value": true }, + { "type": "heading", "label": "Pages" }, + { + "type": "toggle", + "key": "showScrollToBottom", + "description": "Adds a button to the bottom right corner of the screen (beside the help button) to jump directly to the bottom of a page.", + "value": false + }, { "type": "number", - "key": "distanceScrolledUntilShown", - "description": "How far down a page you must be scrolled for the scroll to top button to appear.", - "value": 0 + "key": "distanceUntilScrollToTopShown", + "description": "How far down a page you must be scrolled for the scroll to top button to appear in the bottom right corner of the screen. This will replace the scroll to bottom button (if it is enabled).", + "value": 50 }, { "type": "select", diff --git a/src/extensions/scroll-to-top/scroll-to-top.png b/src/extensions/scroller/scroller.png similarity index 100% rename from src/extensions/scroll-to-top/scroll-to-top.png rename to src/extensions/scroller/scroller.png diff --git a/src/extensions/titlebar/mod.json b/src/extensions/titlebar/mod.json index 44d59a6..ceb4fee 100644 --- a/src/extensions/titlebar/mod.json +++ b/src/extensions/titlebar/mod.json @@ -3,8 +3,9 @@ "version": "0.11.1", "id": "a5658d03-21c6-4088-bade-fa4780459133", "description": "Replaces the operating system's default window titlebar with buttons inset into the app.", - "thumbnail": "integrated-titlebar.jpg", + "thumbnail": "titlebar.jpg", "platforms": ["linux", "win32"], + "tags": ["app-only", "integrated-titlebar"], "authors": [ { "name": "dragonwocky", diff --git a/src/extensions/titlebar/integrated-titlebar.jpg b/src/extensions/titlebar/titlebar.jpg similarity index 100% rename from src/extensions/titlebar/integrated-titlebar.jpg rename to src/extensions/titlebar/titlebar.jpg diff --git a/src/extensions/topbar/mod.json b/src/extensions/topbar/mod.json index 766c308..d308d4b 100644 --- a/src/extensions/topbar/mod.json +++ b/src/extensions/topbar/mod.json @@ -3,7 +3,8 @@ "version": "0.4.0", "id": "e0700ce3-a9ae-45f5-92e5-610ded0e348d", "description": "Customise the Notion interface's topbar and add an always on top toggle to the window in-app.", - "thumbnail": "topbar-icons.jpg", + "thumbnail": "topbar.jpg", + "tags": ["topbar-icons", "always-on-top"], "authors": [ { "name": "dragonwocky", diff --git a/src/extensions/topbar/topbar-icons.jpg b/src/extensions/topbar/topbar.jpg similarity index 100% rename from src/extensions/topbar/topbar-icons.jpg rename to src/extensions/topbar/topbar.jpg diff --git a/src/registry.json b/src/registry.json index 9c8d45f..bb10394 100644 --- a/src/registry.json +++ b/src/registry.json @@ -2,8 +2,8 @@ "core", "extensions/titlebar", "extensions/topbar", + "extensions/scroller", "extensions/outliner", "extensions/word-counter", - "extensions/scroll-to-top", "themes/classic-dark" ]