From 230688951cf14152f0bbd9a36e76794432acde7c Mon Sep 17 00:00:00 2001 From: CloudHill Date: Tue, 20 Oct 2020 22:02:57 +0700 Subject: [PATCH] Basic Functionality --- mods/scroll-to-top/mod.js | 48 ++++++++++++++++++++++++++++++++++++ mods/scroll-to-top/style.css | 29 ++++++++++++++++++++++ 2 files changed, 77 insertions(+) create mode 100644 mods/scroll-to-top/mod.js create mode 100644 mods/scroll-to-top/style.css diff --git a/mods/scroll-to-top/mod.js b/mods/scroll-to-top/mod.js new file mode 100644 index 0000000..c030931 --- /dev/null +++ b/mods/scroll-to-top/mod.js @@ -0,0 +1,48 @@ +/* + * scroll-to-top + * (c) 2020 dragonwocky (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( + '
🠙
' // 🠙; + ) + + 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; + }) + } + }); + } + }, +}; diff --git a/mods/scroll-to-top/style.css b/mods/scroll-to-top/style.css new file mode 100644 index 0000000..643e258 --- /dev/null +++ b/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; +} \ No newline at end of file