From 1fda0e9c86469d9d64876b6031c8e8b8f700fbc4 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 13 Oct 2021 14:04:40 +1100 Subject: [PATCH] extension: scroll to top --- repo/bypass-preview/client.mjs | 4 +-- repo/calendar-scroll/client.mjs | 4 +-- repo/cherry-cola/variables.css | 2 +- repo/collapse-properties/client.css | 2 +- repo/collapse-properties/client.mjs | 6 ++-- repo/components/mod.json | 2 +- repo/gruvbox-dark/variables.css | 2 +- repo/gruvbox-light/variables.css | 2 +- repo/light+/variables.css | 2 +- repo/material-ocean/variables.css | 2 +- repo/menu/client.mjs | 4 +-- repo/menu/components.mjs | 14 +++++----- repo/neutral/app.css | 2 +- repo/neutral/variables.css | 2 +- repo/pastel-dark/app.css | 2 +- repo/pastel-dark/variables.css | 2 +- repo/pinky-boom/variables.css | 2 +- repo/playful-purple/variables.css | 2 +- repo/registry.json | 3 +- repo/scroll-to-top/client.mjs | 43 +++++++++++++++++++++++++++++ repo/scroll-to-top/mod.json | 41 +++++++++++++++++++++++++++ repo/theming/client.mjs | 4 +-- repo/tweaks/client.mjs | 6 ++-- 23 files changed, 114 insertions(+), 41 deletions(-) create mode 100644 repo/scroll-to-top/client.mjs create mode 100644 repo/scroll-to-top/mod.json diff --git a/repo/bypass-preview/client.mjs b/repo/bypass-preview/client.mjs index 09287f0..d0455a3 100644 --- a/repo/bypass-preview/client.mjs +++ b/repo/bypass-preview/client.mjs @@ -6,9 +6,7 @@ 'use strict'; -export default async function (api, db) { - const { web, notion } = api; - +export default function ({ web, notion }, db) { let _openPage = {}; const getCurrentPage = () => ({ type: web.queryParams().get('p') ? 'preview' : 'page', diff --git a/repo/calendar-scroll/client.mjs b/repo/calendar-scroll/client.mjs index a83bccb..3946bc5 100644 --- a/repo/calendar-scroll/client.mjs +++ b/repo/calendar-scroll/client.mjs @@ -6,9 +6,7 @@ 'use strict'; -export default async function (api, db) { - const { web } = api; - +export default function ({ web }, db) { const toolbarSelector = '.notion-calendar-view > :first-child > :first-child > :first-child', $scrollButton = web.html``; $scrollButton.addEventListener('click', async (event) => { diff --git a/repo/cherry-cola/variables.css b/repo/cherry-cola/variables.css index 7ac2007..73aa438 100644 --- a/repo/cherry-cola/variables.css +++ b/repo/cherry-cola/variables.css @@ -1,7 +1,7 @@ /* * notion-enhancer: cherry cola * (c) 2020 Alexa Baldon (https://github.com/runargs) - * under the MIT license + * (https://notion-enhancer.github.io/) under the MIT license */ :root.dark { diff --git a/repo/collapse-properties/client.css b/repo/collapse-properties/client.css index 3287563..4b15d8b 100644 --- a/repo/collapse-properties/client.css +++ b/repo/collapse-properties/client.css @@ -1,7 +1,7 @@ /* * notion-enhancer: collapse properties * (c) 2021 dragonwocky (https://dragonwocky.me/) - * under the MIT license + * (https://notion-enhancer.github.io/) under the MIT license */ #enhancer--collapse-properties { diff --git a/repo/collapse-properties/client.mjs b/repo/collapse-properties/client.mjs index 1659efd..6a6cc61 100644 --- a/repo/collapse-properties/client.mjs +++ b/repo/collapse-properties/client.mjs @@ -6,9 +6,7 @@ 'use strict'; -export default function (api, db) { - const { web, notion } = api; - +export default function ({ web, notion }, db) { const propertyListSelector = '.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]', $collapseButton = web.html``, $filename); - if (opt.tooltip) components.tooltip($tooltip, opt.tooltip); + if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip); $input.addEventListener('change', (event) => { const file = event.target.files[0], reader = new FileReader(); @@ -213,7 +213,7 @@ export const options = { ), $input = web.html``, $icon = web.html`${await components.feather('command', { class: 'input-icon' })}`; - if (opt.tooltip) components.tooltip($tooltip, opt.tooltip); + if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip); $input.addEventListener('keydown', async (event) => { event.preventDefault(); const pressed = [], diff --git a/repo/neutral/app.css b/repo/neutral/app.css index 973d1e3..64afce7 100644 --- a/repo/neutral/app.css +++ b/repo/neutral/app.css @@ -2,7 +2,7 @@ * notion-enhancer: neutral * (c) 2020 Arecsu * (c) 2021 dragonwocky (https://dragonwocky.me/) - * under the MIT license + * (https://notion-enhancer.github.io/) under the MIT license */ .notion-dark-theme [placeholder='Heading 1'], diff --git a/repo/neutral/variables.css b/repo/neutral/variables.css index 6bf7c4d..2527514 100644 --- a/repo/neutral/variables.css +++ b/repo/neutral/variables.css @@ -2,7 +2,7 @@ * notion-enhancer: neutral * (c) 2020 Arecsu * (c) 2021 dragonwocky (https://dragonwocky.me/) - * under the MIT license + * (https://notion-enhancer.github.io/) under the MIT license */ :root.dark { diff --git a/repo/pastel-dark/app.css b/repo/pastel-dark/app.css index 414a7dd..54e01f5 100644 --- a/repo/pastel-dark/app.css +++ b/repo/pastel-dark/app.css @@ -2,7 +2,7 @@ * notion-enhancer: pastel dark * (c) 2020 u/zenith_illinois * (c) 2021 dragonwocky (https://dragonwocky.me/) - * under the MIT license + * (https://notion-enhancer.github.io/) under the MIT license */ .notion-dark-theme img[src*='/images/onboarding/use-case-note.png'], diff --git a/repo/pastel-dark/variables.css b/repo/pastel-dark/variables.css index a9a6255..81013ad 100644 --- a/repo/pastel-dark/variables.css +++ b/repo/pastel-dark/variables.css @@ -2,7 +2,7 @@ * notion-enhancer: pastel dark * (c) 2020 u/zenith_illinois * (c) 2021 dragonwocky (https://dragonwocky.me/) - * under the MIT license + * (https://notion-enhancer.github.io/) under the MIT license */ :root.dark { diff --git a/repo/pinky-boom/variables.css b/repo/pinky-boom/variables.css index cc5c52c..0671bfc 100644 --- a/repo/pinky-boom/variables.css +++ b/repo/pinky-boom/variables.css @@ -2,7 +2,7 @@ * notion-enhancer: pinky boom * (c) 2020 mugiwarafx * (c) 2021 dragonwocky (https://dragonwocky.me/) - * under the MIT license + * (https://notion-enhancer.github.io/) under the MIT license */ :root { diff --git a/repo/playful-purple/variables.css b/repo/playful-purple/variables.css index b47d981..c3c7bb0 100644 --- a/repo/playful-purple/variables.css +++ b/repo/playful-purple/variables.css @@ -2,7 +2,7 @@ * notion-enhancer: playful dark * (c) 2020 Lizishan * (c) 2021 dragonwocky (https://dragonwocky.me/) - * under the MIT license + * (https://notion-enhancer.github.io/) under the MIT license */ :root.dark { diff --git a/repo/registry.json b/repo/registry.json index 738e16d..3453f26 100644 --- a/repo/registry.json +++ b/repo/registry.json @@ -20,5 +20,6 @@ "bypass-preview", "calendar-scroll", "font-chooser", - "collapse-properties" + "collapse-properties", + "scroll-to-top" ] diff --git a/repo/scroll-to-top/client.mjs b/repo/scroll-to-top/client.mjs new file mode 100644 index 0000000..58c377b --- /dev/null +++ b/repo/scroll-to-top/client.mjs @@ -0,0 +1,43 @@ +/* + * notion-enhancer: scroll to top + * (c) 2021 CloudHill (https://github.com/CloudHill) + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +'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, + }); + } + ); + + let $scroller; + const topDistancePx = +(await db.get(['top_distance_px'])), + topDistancePercent = 0.01 * (await db.get(['top_distance_percent'])), + adjustButtonVisibility = async (event) => { + 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'); +} diff --git a/repo/scroll-to-top/mod.json b/repo/scroll-to-top/mod.json new file mode 100644 index 0000000..9ad03e3 --- /dev/null +++ b/repo/scroll-to-top/mod.json @@ -0,0 +1,41 @@ +{ + "name": "scroll to top", + "id": "0a958f5a-17c5-48b5-8713-16190cae1959", + "version": "0.3.0", + "description": "add an arrow in the bottom right corner to scroll back to the top of a page.", + "tags": ["extension", "shortcut"], + "authors": [ + { + "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", + "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 + }, + { + "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 + } + ] +} diff --git a/repo/theming/client.mjs b/repo/theming/client.mjs index 4ec6ac3..98fc231 100644 --- a/repo/theming/client.mjs +++ b/repo/theming/client.mjs @@ -6,9 +6,7 @@ 'use strict'; -export default function (api, db) { - const { web } = api; - +export default function ({ web }, db) { const updateTheme = () => document.documentElement.classList[ document.body.classList.contains('dark') ? 'add' : 'remove' diff --git a/repo/tweaks/client.mjs b/repo/tweaks/client.mjs index 33963de..b859e55 100644 --- a/repo/tweaks/client.mjs +++ b/repo/tweaks/client.mjs @@ -6,9 +6,7 @@ 'use strict'; -export default async function (api, db) { - const { web } = api; - +export default async function ({ web }, db) { const cssInsert = await db.get(['insert.css']); if (cssInsert?.filename) { document.head.append( @@ -16,7 +14,7 @@ export default async function (api, db) { ); } - const responsiveBreakpointPx = await db.get(['tweak.responsive_breakpoint_px']), + const responsiveBreakpointPx = +(await db.get(['tweak.responsive_breakpoint_px'])), responsiveBreakpointPercent = screen.width * 0.01 * (await db.get(['tweak.responsive_breakpoint_percent'])), addResponsiveBreakpoint = () => {