Basic Functionality

mods/scroll-to-top/mod.js

@@ -0,0 +1,48 @@
+/*
+ * scroll-to-top
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 CloudHill
+ * under the MIT license
+ */
+
+"use strict";
+
+const { createElement } = require("../../pkg/helpers.js");
+
+module.exports = {
+    id: "0a958f5a-17c5-48b5-8713-16190cae1959",
+    tags: ["extension"],
+    name: "scroll-to-top",
+    desc: "add a scroll to top button.",
+    version: "1.0.0",
+    author: "CloudHill",
+    hacks: {
+        "renderer/preload.js"(store, __exports) {
+            document.addEventListener("readystatechange", (event) => {
+                if (document.readyState !== "complete") return false;
+                const attempt_interval = setInterval(enhance, 500);
+                function enhance() {
+                    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";
+                    help.after(container);
+                    container.append(scroll);
+                    container.append(help);
+                    
+                    scroll.addEventListener('click', () => {
+                        document
+                        .querySelector('.notion-frame > .notion-scroller')
+                        .scrollTop = 0;
+                    })
+                }
+            });
+        }
+    },
+};

mods/scroll-to-top/style.css

@@ -0,0 +1,29 @@
+.bottom-right-buttons {
+    position: absolute;
+    bottom: 33px;
+    right: 33px;
+    cursor: default;
+}
+
+.bottom-right-buttons > div {
+    margin-top: 8px;
+
+    user-select: none;
+    transition: opacity 700ms ease 0s, color 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) !important;
+    box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
+}