extension: scroll to top

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',

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`<button id="enhancer--calendar-scroll">Scroll</button>`;
   $scrollButton.addEventListener('click', async (event) => {

repo/cherry-cola/variables.css

@@ -1,7 +1,7 @@
 /*
  * notion-enhancer: cherry cola
  * (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 {

repo/collapse-properties/client.css

@@ -1,7 +1,7 @@
 /*
  * notion-enhancer: collapse properties
  * (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 {

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`<button id="enhancer--collapse-properties">
@@ -28,7 +26,7 @@ export default function (api, db) {
     if (document.contains($collapseButton)) return;
     const $propertyList = document.querySelector(propertyListSelector);
     if ($propertyList) {
-      $collapseButton.dataset.collapsed = await db.get([notion.getPageID()], false);
+      $collapseButton.dataset.collapsed = await db.get([notion.getPageID()], true);
       $propertyList.before($collapseButton);
     }
   };

repo/components/mod.json

@@ -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",
   "id": "36a2ffc9-27ff-480e-84a7-c7700a7d232d",
   "version": "0.2.0",

repo/gruvbox-dark/variables.css

@@ -3,7 +3,7 @@
  * (c) 2015-2020 morhetz <morhetz@gmail.com>
  * (c) 2021 jordanrobinson <me@jordanrobinson.co.uk> (https://jordanrobinson.co.uk/)
  * (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 {

repo/gruvbox-light/variables.css

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

repo/light+/variables.css

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

repo/material-ocean/variables.css

@@ -1,7 +1,7 @@
 /*
  * notion-enhancer: material ocean
  * (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 {

repo/menu/client.mjs

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

repo/menu/components.mjs

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

repo/neutral/app.css

@@ -2,7 +2,7 @@
  * notion-enhancer: neutral
  * (c) 2020 Arecsu
  * (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'],

repo/neutral/variables.css

@@ -2,7 +2,7 @@
  * notion-enhancer: neutral
  * (c) 2020 Arecsu
  * (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 {

repo/pastel-dark/app.css

@@ -2,7 +2,7 @@
  * notion-enhancer: pastel dark
  * (c) 2020 u/zenith_illinois
  * (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'],

repo/pastel-dark/variables.css

@@ -2,7 +2,7 @@
  * notion-enhancer: pastel dark
  * (c) 2020 u/zenith_illinois
  * (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 {

repo/pinky-boom/variables.css

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

repo/playful-purple/variables.css

@@ -2,7 +2,7 @@
  * notion-enhancer: playful dark
  * (c) 2020 Lizishan
  * (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 {

repo/registry.json

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

repo/scroll-to-top/client.mjs

@@ -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');
+}

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

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'

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 = () => {