feat: add scroll to top button (wip)

src/extensions/scroll-to-top/client.mjs

@@ -1,43 +1,51 @@
 /**
  * notion-enhancer: scroll to top
  * (c) 2021 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-'use strict';
+"use strict";
 
-export default async function ({ web, components }, db) {
+export default async (api, db) => {
-  const scrollStyle = (await db.get(['smooth'])) ? 'smooth' : 'auto',
+  const { html } = api,
-    $scrollButton = await components.addCornerAction(
+    behavior = (await db.get("smoothScrolling")) ? "smooth" : "auto",
-      await components.feather('chevron-up'),
+    scroller = ".notion-frame > .notion-scroller";
-      () => {
-        document.querySelector('.notion-frame > .notion-scroller').scroll({
-          top: 0,
-          left: 0,
-          behavior: scrollStyle,
-        });
-      }
-    );
 
-  let $scroller;
+  const $btn = html`<button
-  const topDistancePx = +(await db.get(['top_distance_px'])),
+    aria-label="Scroll to top"
-    topDistancePercent = 0.01 * (await db.get(['top_distance_percent'])),
+    class="z-50 flex items-center justify-center absolute rounded-full
-    adjustButtonVisibility = async () => {
+    text-([20px] [color:var(--theme--fg-primary)]) select-none cursor-pointer
-      if (!$scroller) return;
+    bg-[color:var(--theme--bg-secondary)] hover:bg-[color:var(--theme--bg-hover)]
-      $scrollButton.classList.add('hidden');
+    bottom-[calc(26px+env(safe-area-inset-bottom))] right-[74px] w-[36px] h-[36px]"
-      const scrolledDistance =
+    style="box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 2px 4px;"
-        $scroller.scrollTop >= topDistancePx ||
+    onclick=${() => {
-        $scroller.scrollTop >=
+      const $scroller = document.querySelector(scroller);
-          ($scroller.scrollHeight - $scroller.clientHeight) * topDistancePercent;
+      $scroller.scroll({ top: 0, left: 0, behavior });
-      if (scrolledDistance) $scrollButton.classList.remove('hidden');
+    }}
-    };
+  >
-  web.addDocumentObserver(() => {
+    <i class="i-chevrons-up" />
-    $scroller = document.querySelector('.notion-frame > .notion-scroller');
+  </button>`;
-    $scroller.removeEventListener('scroll', adjustButtonVisibility);
+  document.body.append($btn);
-    $scroller.addEventListener('scroll', adjustButtonVisibility);
-  }, ['.notion-frame > .notion-scroller']);
-  adjustButtonVisibility();
 
-  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");
+};

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 of the screen for scrolling back to the top of the current page.",
-  "description": "adds an arrow in the bottom right corner to scroll back to the top of a page.",
+  "thumbnail": "scroll-to-top.png",
-  "preview": "scroll-to-top.png",
-  "tags": ["extension", "shortcut"],
   "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",
+      "key": "smoothScrolling",
-      "label": "smooth scrolling",
+      "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",
+      "key": "distanceScrolledUntilShown",
-      "label": "distance scrolled until button shown (px)",
+      "description": "How far down a page you must be scrolled for the scroll to top button to appear.",
-      "tooltip": "**the distance in pixels that must be scrolled down before the button appears**",
+      "value": 50
-      "value": 5000
     },
     {
-      "type": "number",
+      "type": "select",
-      "key": "top_distance_percent",
+      "key": "scrollDistanceUnits",
-      "label": "distance scrolled until button shown (%)",
+      "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.",
-      "tooltip": "**the percentage of the page that must be scrolled down before the button appears**",
+      "values": ["Percent", "Pixels"]
-      "value": 80
     }
-  ]
+  ],
+  "clientScripts": ["client.mjs"]
 }

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": [
     {

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"
+]