clarity improvements for scroll to top extension

CHANGELOG.md

@@ -49,6 +49,7 @@ a flexibility update.
 - theme: "dracula" = a theme based on the popular dracula color palette
   originally by zeno rocha and friends.
 - extension: "tabs" = have multiple notion pages open in a single window.
+- extension: "scroll to top" = add an arrow above the help button to scroll back to the top of a page.
 
 a fork of notion-deb-builder that does generate an app.asar has been created and is once again supported.
 

mods/scroll-to-top/mod.js

@@ -5,72 +5,72 @@
  * under the MIT license
  */
 
-"use strict";
+'use strict';
 
-const { createElement } = require("../../pkg/helpers.js");
+const { createElement } = require('../../pkg/helpers.js');
 
 module.exports = {
-    id: "0a958f5a-17c5-48b5-8713-16190cae1959",
+  id: '0a958f5a-17c5-48b5-8713-16190cae1959',
-    tags: ["extension"],
+  tags: ['extension'],
-    name: "scroll-to-top",
+  name: 'scroll to top',
-    desc: "add a scroll to top button.",
+  desc:
-    version: "1.0.0",
+    'add an arrow above the help button to scroll back to the top of a page.',
-    author: "CloudHill",
+  version: '1.0.0',
+  author: 'CloudHill',
   options: [
     {
-            key: "smooth",
+      key: 'smooth',
-            label: "smooth scrolling",
+      label: 'smooth scrolling',
-            type: "toggle",
+      type: 'toggle',
       value: true,
     },
     {
-            key: "top",
+      key: 'top',
-            label: "scroll down distance to show button",
+      label: 'distance scrolled until button is shown:',
-            type: "input",
+      type: 'input',
-            value: 80,
+      value: 50,
     },
     {
-            key: "percent",
+      key: 'unit',
-            label: "set distance as a percentage",
+      label: 'unit to measure distance with:',
-            type: "toggle",
+      type: 'select',
-            value: true,
+      value: ['percent', 'pixels'],
     },
   ],
   hacks: {
-        "renderer/preload.js"(store, __exports) {
+    'renderer/preload.js'(store, __exports) {
-            document.addEventListener("readystatechange", (event) => {
+      document.addEventListener('readystatechange', (event) => {
-                if (document.readyState !== "complete") return false;
+        if (document.readyState !== 'complete') return false;
         const attempt_interval = setInterval(enhance, 500);
         function enhance() {
-                    if (!document.querySelector(".notion-frame")) return;
+          if (!document.querySelector('.notion-frame')) return;
           clearInterval(attempt_interval);
 
           const $container = document.createElement('div');
           const $help = document.querySelector('.notion-help-button');
           const $scroll = createElement(
             '<div class="notion-scroll-button" role="button">&#129049;</div>' // 🠙;
-                    )
+          );
 
-                    $container.className = "bottom-right-buttons";
+          $container.className = 'bottom-right-buttons';
           $help.after($container);
           $container.append($scroll);
           $container.append($help);
 
-                    if (store().top > 0)
+          if (store().top > 0) $scroll.classList.add('hidden');
-                        $scroll.classList.add('hidden');
 
           $scroll.addEventListener('click', () => {
-                        document
+            document.querySelector('.notion-frame > .notion-scroller').scroll({
-                        .querySelector('.notion-frame > .notion-scroller')
-                        .scroll({
               top: 0,
               left: 0,
               behavior: store().smooth ? 'smooth' : 'auto',
             });
-                    })
+          });
 
           let queue = [];
-                    let $scroller = document.querySelector('.notion-frame > .notion-scroller');
+          let $scroller = document.querySelector(
+            '.notion-frame > .notion-scroller'
+          );
           let top = store().top || 0;
 
           const observer = new MutationObserver((list, observer) => {
@@ -88,21 +88,24 @@ module.exports = {
 
             for (let { addedNodes } of list) {
               if (
-                              addedNodes[0] && (
+                addedNodes[0] &&
-                                addedNodes[0].className === 'notion-page-content' ||
+                (addedNodes[0].className === 'notion-page-content' ||
-                                addedNodes[0].className === 'notion-scroller'
+                  addedNodes[0].className === 'notion-scroller') &&
-                              ) && (top > 0)
+                top > 0
               ) {
                 $scroll.classList.add('hidden');
 
-                                $scroller = document.querySelector('.notion-frame > .notion-scroller');
+                $scroller = document.querySelector(
+                  '.notion-frame > .notion-scroller'
+                );
                 setScrollDistance();
 
                 $scroller.addEventListener('scroll', (event) => {
-                                    if (Math.ceil(event.target.scrollTop) < $scroller.top_distance)
+                  if (
+                    Math.ceil(event.target.scrollTop) < $scroller.top_distance
+                  )
                     $scroll.classList.add('hidden');
-                                    else
+                  else $scroll.classList.remove('hidden');
-                                        $scroll.classList.remove('hidden');
                 });
               }
             }
@@ -110,14 +113,17 @@ module.exports = {
 
           function setScrollDistance() {
             $scroller.top_distance = top;
-                        if (top > 0 && store().percent) {
+            if (top > 0 && store().unit === 'percent') {
-                            let content_height = Array.from($scroller.children)
+              let content_height = Array.from($scroller.children).reduce(
-                            .reduce((h, c) => h + c.offsetHeight, 0);
+                (h, c) => h + c.offsetHeight,
-                            $scroller.top_distance *= (content_height - $scroller.offsetHeight) / 100;
+                0
+              );
+              $scroller.top_distance *=
+                (content_height - $scroller.offsetHeight) / 100;
             }
           }
         }
       });
-        }
+    },
   },
 };

mods/scroll-to-top/style.css

@@ -1,54 +0,0 @@
-/*
- * scroll-to-top
- * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (c) 2020 CloudHill
- * under the MIT license
- */
-
-.bottom-right-buttons {
-    position: absolute;
-    bottom: 33px;
-    right: 33px;
-    z-index: 101;
-    cursor: default;
-    pointer-events: none;
-}
-
-.bottom-right-buttons > div {
-    margin-top: 8px;
-    pointer-events: auto;
-
-    user-select: none;
-    transition: opacity 700ms ease 0s, color 700ms ease 0s, transform 700ms ease 0s;
-    cursor: pointer;
-
-    position: static !important;
-
-    width: 36px;
-    height: 36px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border-radius: 100%;
-    font-size: 20px;
-
-    background: var(--theme--interactive_hover);
-    box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
-}
-
-.notion-scroll-button {
-    display: flex !important;
-}
-
-.notion-scroll-button.hidden {
-    pointer-events: none;
-
-    visibility: hidden;
-    opacity: 0;
-    transform: translateY(10px);
-
-    transition-property: opacity, transform, visibility;
-    transition-delay: 0, 0, 700ms
-}

mods/scroll-to-top/styles.css

@@ -0,0 +1,55 @@
+/*
+ * scroll-to-top
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 CloudHill
+ * under the MIT license
+ */
+
+.bottom-right-buttons {
+  position: absolute;
+  bottom: 33px;
+  right: 33px;
+  z-index: 101;
+  cursor: default;
+  pointer-events: none;
+}
+
+.bottom-right-buttons > div {
+  margin-top: 8px;
+  pointer-events: auto;
+
+  user-select: none;
+  transition: opacity 700ms ease 0s, color 700ms ease 0s,
+    transform 700ms ease 0s;
+  cursor: pointer;
+
+  position: static !important;
+
+  width: 36px;
+  height: 36px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 100%;
+  font-size: 20px;
+
+  background: var(--theme--interactive_hover);
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
+}
+
+.notion-scroll-button {
+  display: flex !important;
+}
+
+.notion-scroll-button.hidden {
+  pointer-events: none;
+
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(10px);
+
+  transition-property: opacity, transform, visibility;
+  transition-delay: 0, 0, 700ms;
+}