mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 04:39:03 +00:00
feat: add scroll to top button (wip)
This commit is contained in:
parent
aae4c7e663
commit
42b2fedacf
GPG Key ID:
7998D08F7D7BD7A8
@ -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) {
|
||||
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`<button
|
||||
aria-label="Scroll to top"
|
||||
class="z-50 flex items-center justify-center absolute rounded-full
|
||||
text-([20px] [color:var(--theme--fg-primary)]) select-none cursor-pointer
|
||||
bg-[color:var(--theme--bg-secondary)] hover:bg-[color:var(--theme--bg-hover)]
|
||||
bottom-[calc(26px+env(safe-area-inset-bottom))] right-[74px] w-[36px] h-[36px]"
|
||||
style="box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 2px 4px;"
|
||||
onclick=${() => {
|
||||
const $scroller = document.querySelector(scroller);
|
||||
$scroller.scroll({ top: 0, left: 0, behavior });
|
||||
}}
|
||||
>
|
||||
<i class="i-chevrons-up" />
|
||||
</button>`;
|
||||
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");
|
||||
};
|
||||
|
||||
@ -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"]
|
||||
}
|
||||
|
||||
@ -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": [
|
||||
{
|
||||
|
||||
@ -1 +1,7 @@
|
||||
["core", "extensions/titlebar", "extensions/topbar", "themes/classic-dark"]
|
||||
[
|
||||
"core",
|
||||
"extensions/titlebar",
|
||||
"extensions/topbar",
|
||||
"extensions/scroll-to-top",
|
||||
"themes/classic-dark"
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user