dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-07 05:59:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

extension: scroll to top

Browse Source
This commit is contained in:
dragonwocky 2021-10-13 14:04:40 +11:00
parent 1e5c985e76
commit 1fda0e9c86
23 changed files with 114 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
repo/bypass-preview/client.mjs
View File

@ -6,9 +6,7 @@
'use strict'; 'use strict';
export default async function (api, db) { export default function ({ web, notion }, db) {
const { web, notion } = api;
let _openPage = {}; let _openPage = {};
const getCurrentPage = () => ({ const getCurrentPage = () => ({
type: web.queryParams().get('p') ? 'preview' : 'page', type: web.queryParams().get('p') ? 'preview' : 'page',

4
repo/calendar-scroll/client.mjs
View File

@ -6,9 +6,7 @@
'use strict'; 'use strict';
export default async function (api, db) { export default function ({ web }, db) {
const { web } = api;
const toolbarSelector = '.notion-calendar-view > :first-child > :first-child > :first-child', const toolbarSelector = '.notion-calendar-view > :first-child > :first-child > :first-child',
$scrollButton = web.html`<button id="enhancer--calendar-scroll">Scroll</button>`; $scrollButton = web.html`<button id="enhancer--calendar-scroll">Scroll</button>`;
$scrollButton.addEventListener('click', async (event) => { $scrollButton.addEventListener('click', async (event) => {

2
repo/cherry-cola/variables.css
View File

@ -1,7 +1,7 @@
/* /*
* notion-enhancer: cherry cola * notion-enhancer: cherry cola
* (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs) * (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
:root.dark { :root.dark {

2
repo/collapse-properties/client.css
View File

@ -1,7 +1,7 @@
/* /*
* notion-enhancer: collapse properties * notion-enhancer: collapse properties
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
#enhancer--collapse-properties { #enhancer--collapse-properties {

6
repo/collapse-properties/client.mjs
View File

@ -6,9 +6,7 @@
'use strict'; 'use strict';
export default function (api, db) { export default function ({ web, notion }, db) {
const { web, notion } = api;
const propertyListSelector = const propertyListSelector =
'.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]', '.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]',
$collapseButton = web.html`<button id="enhancer--collapse-properties"> $collapseButton = web.html`<button id="enhancer--collapse-properties">
@ -28,7 +26,7 @@ export default function (api, db) {
if (document.contains($collapseButton)) return; if (document.contains($collapseButton)) return;
const $propertyList = document.querySelector(propertyListSelector); const $propertyList = document.querySelector(propertyListSelector);
if ($propertyList) { if ($propertyList) {
$collapseButton.dataset.collapsed = await db.get([notion.getPageID()], false); $collapseButton.dataset.collapsed = await db.get([notion.getPageID()], true);
$propertyList.before($collapseButton); $propertyList.before($collapseButton);
} }
}; };

2
repo/components/mod.json
View File

@ -1,5 +1,5 @@
{ {
"__comment": "pseudo-mod to allow configuration of API-provided components", "__comment": "pseudo-mod to allow configuration of api-provided components",
"name": "components", "name": "components",
"id": "36a2ffc9-27ff-480e-84a7-c7700a7d232d", "id": "36a2ffc9-27ff-480e-84a7-c7700a7d232d",
"version": "0.2.0", "version": "0.2.0",

2
repo/gruvbox-dark/variables.css
View File

@ -3,7 +3,7 @@
* (c) 2015-2020 morhetz <morhetz@gmail.com> * (c) 2015-2020 morhetz <morhetz@gmail.com>
* (c) 2021 jordanrobinson <me@jordanrobinson.co.uk> (https://jordanrobinson.co.uk/) * (c) 2021 jordanrobinson <me@jordanrobinson.co.uk> (https://jordanrobinson.co.uk/)
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
:root.dark { :root.dark {

2
repo/gruvbox-light/variables.css
View File

@ -3,7 +3,7 @@
* (c) 2015-2020 morhetz <morhetz@gmail.com> * (c) 2015-2020 morhetz <morhetz@gmail.com>
* (c) 2021 jordanrobinson <me@jordanrobinson.co.uk> (https://jordanrobinson.co.uk/) * (c) 2021 jordanrobinson <me@jordanrobinson.co.uk> (https://jordanrobinson.co.uk/)
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
:root { :root {

2
repo/light+/variables.css
View File

@ -2,7 +2,7 @@
* notion-enhancer: light+ * notion-enhancer: light+
* (c) 2020 Lizishan * (c) 2020 Lizishan
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
:root { :root {

2
repo/material-ocean/variables.css
View File

@ -1,7 +1,7 @@
/* /*
* notion-enhancer: material ocean * notion-enhancer: material ocean
* (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (https://blacksuan19.tk) * (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (https://blacksuan19.tk)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
:root.dark { :root.dark {

4
repo/menu/client.mjs
View File

@ -6,9 +6,7 @@
'use strict'; 'use strict';
export default async function (api, db) { export default async function ({ env, fs, storage, registry, web }, db) {
const { env, fs, storage, registry, web } = api;
web.addHotkeyListener(await db.get(['hotkey']), env.focusMenu); web.addHotkeyListener(await db.get(['hotkey']), env.focusMenu);
const updateTheme = () => const updateTheme = () =>

14
repo/menu/components.mjs
View File

@ -63,7 +63,7 @@ export const options = {
$input = $toggle.children[1]; $input = $toggle.children[1];
if (opt.tooltip) { if (opt.tooltip) {
$label.prepend($tooltip); $label.prepend($tooltip);
components.tooltip($tooltip, opt.tooltip); components.setTooltip($tooltip, opt.tooltip);
} }
$input.addEventListener('change', async (event) => { $input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.checked); await profileDB.set([mod.id, opt.key], $input.checked);
@ -89,7 +89,7 @@ export const options = {
${$options.join('')} ${$options.join('')}
</select>`, </select>`,
$icon = web.html`${await components.feather('chevron-down', { class: 'input-icon' })}`; $icon = web.html`${await components.feather('chevron-down', { class: 'input-icon' })}`;
if (opt.tooltip) components.tooltip($tooltip, opt.tooltip); if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip);
$select.addEventListener('change', async (event) => { $select.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $select.value); await profileDB.set([mod.id, opt.key], $select.value);
notifications.onChange(); notifications.onChange();
@ -105,7 +105,7 @@ export const options = {
), ),
$input = web.html`<input type="text" class="input" value="${web.escape(value)}">`, $input = web.html`<input type="text" class="input" value="${web.escape(value)}">`,
$icon = web.html`${await components.feather('type', { class: 'input-icon' })}`; $icon = web.html`${await components.feather('type', { class: 'input-icon' })}`;
if (opt.tooltip) components.tooltip($tooltip, opt.tooltip); if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip);
$input.addEventListener('change', async (event) => { $input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.value); await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange(); notifications.onChange();
@ -121,7 +121,7 @@ export const options = {
), ),
$input = web.html`<input type="number" class="input" value="${value}">`, $input = web.html`<input type="number" class="input" value="${value}">`,
$icon = web.html`${await components.feather('hash', { class: 'input-icon' })}`; $icon = web.html`${await components.feather('hash', { class: 'input-icon' })}`;
if (opt.tooltip) components.tooltip($tooltip, opt.tooltip); if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip);
$input.addEventListener('change', async (event) => { $input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.value); await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange(); notifications.onChange();
@ -158,7 +158,7 @@ export const options = {
onInput: paint, onInput: paint,
onChange: paint, onChange: paint,
}); });
if (opt.tooltip) components.tooltip($tooltip, opt.tooltip); if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip);
$input.addEventListener('change', async (event) => { $input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.value); await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange(); notifications.onChange();
@ -180,7 +180,7 @@ export const options = {
$icon = web.html`${await components.feather('file', { class: 'input-icon' })}`, $icon = web.html`${await components.feather('file', { class: 'input-icon' })}`,
$filename = web.html`<span>${web.escape(filename || 'none')}</span>`, $filename = web.html`<span>${web.escape(filename || 'none')}</span>`,
$latest = web.render(web.html`<button class="file-latest">Latest: </button>`, $filename); $latest = web.render(web.html`<button class="file-latest">Latest: </button>`, $filename);
if (opt.tooltip) components.tooltip($tooltip, opt.tooltip); if (opt.tooltip) components.setTooltip($tooltip, opt.tooltip);
$input.addEventListener('change', (event) => { $input.addEventListener('change', (event) => {
const file = event.target.files[0], const file = event.target.files[0],
reader = new FileReader(); reader = new FileReader();
@ -213,7 +213,7 @@ export const options = {
), ),
$input = web.html`<input type="text" class="input" value="${web.escape(value)}">`, $input = web.html`<input type="text" class="input" value="${web.escape(value)}">`,
$icon = web.html`${await components.feather('command', { class: 'input-icon' })}`; $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) => { $input.addEventListener('keydown', async (event) => {
event.preventDefault(); event.preventDefault();
const pressed = [], const pressed = [],

2
repo/neutral/app.css
View File

@ -2,7 +2,7 @@
* notion-enhancer: neutral * notion-enhancer: neutral
* (c) 2020 Arecsu * (c) 2020 Arecsu
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
.notion-dark-theme [placeholder='Heading 1'], .notion-dark-theme [placeholder='Heading 1'],

2
repo/neutral/variables.css
View File

@ -2,7 +2,7 @@
* notion-enhancer: neutral * notion-enhancer: neutral
* (c) 2020 Arecsu * (c) 2020 Arecsu
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
:root.dark { :root.dark {

2
repo/pastel-dark/app.css
View File

@ -2,7 +2,7 @@
* notion-enhancer: pastel dark * notion-enhancer: pastel dark
* (c) 2020 u/zenith_illinois * (c) 2020 u/zenith_illinois
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (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'], .notion-dark-theme img[src*='/images/onboarding/use-case-note.png'],

2
repo/pastel-dark/variables.css
View File

@ -2,7 +2,7 @@
* notion-enhancer: pastel dark * notion-enhancer: pastel dark
* (c) 2020 u/zenith_illinois * (c) 2020 u/zenith_illinois
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
:root.dark { :root.dark {

2
repo/pinky-boom/variables.css
View File

@ -2,7 +2,7 @@
* notion-enhancer: pinky boom * notion-enhancer: pinky boom
* (c) 2020 mugiwarafx * (c) 2020 mugiwarafx
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
:root { :root {

2
repo/playful-purple/variables.css
View File

@ -2,7 +2,7 @@
* notion-enhancer: playful dark * notion-enhancer: playful dark
* (c) 2020 Lizishan * (c) 2020 Lizishan
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
:root.dark { :root.dark {

3
repo/registry.json
View File

@ -20,5 +20,6 @@
"bypass-preview", "bypass-preview",
"calendar-scroll", "calendar-scroll",
"font-chooser", "font-chooser",
"collapse-properties" "collapse-properties",
"scroll-to-top"
] ]

43
repo/scroll-to-top/client.mjs Normal file
View File

@ -0,0 +1,43 @@
/*
* 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/)
* (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');
}

41
repo/scroll-to-top/mod.json Normal file
View File

@ -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
}
]
}

4
repo/theming/client.mjs
View File

@ -6,9 +6,7 @@
'use strict'; 'use strict';
export default function (api, db) { export default function ({ web }, db) {
const { web } = api;
const updateTheme = () => const updateTheme = () =>
document.documentElement.classList[ document.documentElement.classList[
document.body.classList.contains('dark') ? 'add' : 'remove' document.body.classList.contains('dark') ? 'add' : 'remove'

6
repo/tweaks/client.mjs
View File

@ -6,9 +6,7 @@
'use strict'; 'use strict';
export default async function (api, db) { export default async function ({ web }, db) {
const { web } = api;
const cssInsert = await db.get(['insert.css']); const cssInsert = await db.get(['insert.css']);
if (cssInsert?.filename) { if (cssInsert?.filename) {
document.head.append( 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 = responsiveBreakpointPercent =
screen.width * 0.01 * (await db.get(['tweak.responsive_breakpoint_percent'])), screen.width * 0.01 * (await db.get(['tweak.responsive_breakpoint_percent'])),
addResponsiveBreakpoint = () => { addResponsiveBreakpoint = () => {