From 42b2fedacf1c4258c68337b956b5963141ea70ab Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 25 Jan 2024 13:14:48 +1100 Subject: [PATCH] feat: add scroll to top button (wip) --- src/extensions/scroll-to-top/client.mjs | 76 ++++++++++++++----------- src/extensions/scroll-to-top/mod.json | 42 +++++++------- src/extensions/topbar/mod.json | 2 +- src/registry.json | 8 ++- 4 files changed, 70 insertions(+), 58 deletions(-) diff --git a/src/extensions/scroll-to-top/client.mjs b/src/extensions/scroll-to-top/client.mjs index 396984e..d7c7087 100644 --- a/src/extensions/scroll-to-top/client.mjs +++ b/src/extensions/scroll-to-top/client.mjs @@ -1,43 +1,51 @@ /** * notion-enhancer: scroll to top * (c) 2021 CloudHill (https://github.com/CloudHill) - * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (c) 2024 dragonwocky (https://dragonwocky.me/) * (https://notion-enhancer.github.io/) under the MIT license */ -'use strict'; +"use strict"; -export default async function ({ web, components }, db) { - const scrollStyle = (await db.get(['smooth'])) ? 'smooth' : 'auto', - $scrollButton = await components.addCornerAction( - await components.feather('chevron-up'), - () => { - document.querySelector('.notion-frame > .notion-scroller').scroll({ - top: 0, - left: 0, - behavior: scrollStyle, - }); - } - ); +export default async (api, db) => { + const { html } = api, + behavior = (await db.get("smoothScrolling")) ? "smooth" : "auto", + scroller = ".notion-frame > .notion-scroller"; - let $scroller; - const topDistancePx = +(await db.get(['top_distance_px'])), - topDistancePercent = 0.01 * (await db.get(['top_distance_percent'])), - adjustButtonVisibility = async () => { - if (!$scroller) return; - $scrollButton.classList.add('hidden'); - const scrolledDistance = - $scroller.scrollTop >= topDistancePx || - $scroller.scrollTop >= - ($scroller.scrollHeight - $scroller.clientHeight) * topDistancePercent; - if (scrolledDistance) $scrollButton.classList.remove('hidden'); - }; - web.addDocumentObserver(() => { - $scroller = document.querySelector('.notion-frame > .notion-scroller'); - $scroller.removeEventListener('scroll', adjustButtonVisibility); - $scroller.addEventListener('scroll', adjustButtonVisibility); - }, ['.notion-frame > .notion-scroller']); - adjustButtonVisibility(); + const $btn = html``; + document.body.append($btn); - if (topDistancePx && topDistancePercent) $scrollButton.classList.add('hidden'); -} + // const topDistancePx = +(await db.get(["top_distance_px"])), + // topDistancePercent = 0.01 * (await db.get(["top_distance_percent"])), + // adjustButtonVisibility = async () => { + // if (!$scroller) return; + // $scrollButton.classList.add("hidden"); + // const scrolledDistance = + // $scroller.scrollTop >= topDistancePx || + // $scroller.scrollTop >= + // ($scroller.scrollHeight - $scroller.clientHeight) * + // topDistancePercent; + // if (scrolledDistance) $scrollButton.classList.remove("hidden"); + // }; + // web.addDocumentObserver(() => { + // $scroller = document.querySelector(".notion-frame > .notion-scroller"); + // $scroller.removeEventListener("scroll", adjustButtonVisibility); + // $scroller.addEventListener("scroll", adjustButtonVisibility); + // }, [".notion-frame > .notion-scroller"]); + // adjustButtonVisibility(); + // if (topDistancePx && topDistancePercent) + // $scrollButton.classList.add("hidden"); +}; diff --git a/src/extensions/scroll-to-top/mod.json b/src/extensions/scroll-to-top/mod.json index cf57cd8..bfcdd8e 100644 --- a/src/extensions/scroll-to-top/mod.json +++ b/src/extensions/scroll-to-top/mod.json @@ -1,42 +1,40 @@ { - "name": "scroll to top", + "name": "Scroll To Top", + "version": "0.4.0", "id": "0a958f5a-17c5-48b5-8713-16190cae1959", - "version": "0.3.0", - "description": "adds an arrow in the bottom right corner to scroll back to the top of a page.", - "preview": "scroll-to-top.png", - "tags": ["extension", "shortcut"], + "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", "authors": [ + { + "name": "dragonwocky", + "homepage": "https://dragonwocky.me/", + "avatar": "https://dragonwocky.me/avatar.jpg" + }, { "name": "CloudHill", - "email": "rh.cloudhill@gmail.com", "homepage": "https://github.com/CloudHill", "avatar": "https://avatars.githubusercontent.com/u/54142180" } ], - "css": {}, - "js": { - "client": ["client.mjs"] - }, "options": [ { "type": "toggle", - "key": "smooth", - "label": "smooth scrolling", + "key": "smoothScrolling", + "description": "Animates the return to the top of the page smoothly. Disable this to jump instantly to the top of the page when clicking the scroll to top button.", "value": true }, { "type": "number", - "key": "top_distance_px", - "label": "distance scrolled until button shown (px)", - "tooltip": "**the distance in pixels that must be scrolled down before the button appears**", - "value": 5000 + "key": "distanceScrolledUntilShown", + "description": "How far down a page you must be scrolled for the scroll to top button to appear.", + "value": 50 }, { - "type": "number", - "key": "top_distance_percent", - "label": "distance scrolled until button shown (%)", - "tooltip": "**the percentage of the page that must be scrolled down before the button appears**", - "value": 80 + "type": "select", + "key": "scrollDistanceUnits", + "description": "The unit to measure the above distance in, e.g. you may wish the button to appear at 90% down any page or only on pages that scroll down further than a certain number of pixels.", + "values": ["Percent", "Pixels"] } - ] + ], + "clientScripts": ["client.mjs"] } diff --git a/src/extensions/topbar/mod.json b/src/extensions/topbar/mod.json index 2803cf0..766c308 100644 --- a/src/extensions/topbar/mod.json +++ b/src/extensions/topbar/mod.json @@ -2,7 +2,7 @@ "name": "Topbar", "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 on desktop.", + "description": "Customise the Notion interface's topbar and add an always on top toggle to the window in-app.", "thumbnail": "topbar-icons.jpg", "authors": [ { diff --git a/src/registry.json b/src/registry.json index d2a91d3..c7fe0ba 100644 --- a/src/registry.json +++ b/src/registry.json @@ -1 +1,7 @@ -["core", "extensions/titlebar", "extensions/topbar", "themes/classic-dark"] +[ + "core", + "extensions/titlebar", + "extensions/topbar", + "extensions/scroll-to-top", + "themes/classic-dark" +]