feat(scroller): add calendar scroll functionality to 'Today' button

src/extensions/calendar-scroll/client.css

@@ -1,25 +0,0 @@
-/**
- * notion-enhancer: calendar scroll
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-#enhancer--calendar-scroll {
-  background: var(--theme--ui_interactive-hover);
-  border: 1px solid transparent;
-  font-size: 14px;
-  color: var(--theme--text);
-  height: 24px;
-  border-radius: 3px;
-  line-height: 1.2;
-  padding: 0 0.5em;
-  margin-right: 5px;
-}
-#enhancer--calendar-scroll:focus,
-#enhancer--calendar-scroll:hover {
-  background: transparent;
-  border: 1px solid var(--theme--ui_interactive-hover);
-}
-#enhancer--calendar-scroll:active {
-  background: var(--theme--ui_interactive-active);
-}

src/extensions/calendar-scroll/client.mjs

@@ -1,41 +0,0 @@
-/**
- * notion-enhancer: calendar scroll
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-'use strict';
-
-const pageSelector = '.notion-page-content',
-  calendarSelector = '.notion-calendar-view:not([data-calendar-scroll])',
-  scrollerSelector = '.notion-frame > .notion-scroller',
-  toolbarSelector = '.notion-calendar-view > :first-child > :first-child > :first-child',
-  todaySelector = '.notion-calendar-view-day[style*="background:"]';
-
-export default function ({ web }, db) {
-  const insertButton = () => {
-    document.querySelectorAll(calendarSelector).forEach(($calendar) => {
-      $calendar.dataset.calendarScroll = true;
-      const $page = document.querySelector(pageSelector);
-      if ($page) return;
-      const $toolbar = $calendar.querySelector(toolbarSelector),
-        $pageScroller = document.querySelector(scrollerSelector),
-        $scrollButton = web.html`<button id="enhancer--calendar-scroll">Scroll</button>`;
-      $scrollButton.addEventListener('click', async (event) => {
-        let $today = $calendar.querySelector(todaySelector);
-        if (!$today) {
-          $toolbar.children[4].click();
-          await new Promise((res, rej) => setTimeout(res, 500));
-          $today = $calendar.querySelector(todaySelector);
-        }
-        $pageScroller.scroll({
-          top: $today.offsetParent.offsetParent.offsetTop + 70,
-          behavior: 'auto',
-        });
-      });
-      $toolbar.insertBefore($scrollButton, $toolbar.children[2]);
-    });
-  };
-  web.addDocumentObserver(insertButton, [calendarSelector]);
-  insertButton();
-}

src/extensions/calendar-scroll/mod.json

@@ -1,23 +0,0 @@
-{
-  "name": "calendar scroll",
-  "id": "b1c7db33-dfee-489a-a76c-0dd66f7ed29a",
-  "version": "0.2.0",
-  "description": "adds a button to jump down to the current week in fullpage/infinite-scroll calendars.",
-  "preview": "calendar-scroll.png",
-  "tags": ["extension", "shortcut"],
-  "authors": [
-    {
-      "name": "dragonwocky",
-      "email": "thedragonring.bod@gmail.com",
-      "homepage": "https://dragonwocky.me/",
-      "avatar": "https://dragonwocky.me/avatar.jpg"
-    }
-  ],
-  "js": {
-    "client": ["client.mjs"]
-  },
-  "css": {
-    "client": ["client.css"]
-  },
-  "options": []
-}

src/extensions/scroller/client.mjs

@@ -8,27 +8,30 @@
 import { FloatingButton } from "../../core/islands/FloatingButton.mjs";
 
 export default async (api, db) => {
-  const { html, addMutationListener } = api,
-    { addFloatingButton, removeFloatingButton } = api,
+  const { html, addFloatingButton, removeFloatingButton } = api,
+    { addMutationListener, removeMutationListener } = api,
+    jumpToWeek = await db.get("jumpToWeek"),
+    todayButton = `.notion-collection_view_page-block [aria-label="Previous Month"] + [role="button"]`,
+    todayBubble = `.notion-calendar-view-day[style*="background"]`,
     showScrollToBottom = await db.get("showScrollToBottom"),
     distanceUntilShown = await db.get("distanceUntilScrollToTopShown"),
     scrollUnit = await db.get("scrollDistanceUnit"),
-    behavior = (await db.get("smoothScrolling")) ? "smooth" : "auto",
+    scrollBehavior = (await db.get("smoothScrolling")) ? "smooth" : "auto",
     scroller = ".notion-frame .notion-scroller";
 
-  let $scroller;
-  const scrollTo = (top) => $scroller?.scroll({ top, behavior }),
+  let $scroller, $todayButton;
+  const scrollTo = (top, behavior) => $scroller?.scroll({ top, behavior }),
     $scrollToBottom = html`<${FloatingButton}
-      onclick="${() => scrollTo($scroller.scrollHeight)}"
+      onclick="${() => scrollTo($scroller.scrollHeight, scrollBehavior)}"
       aria-label="Scroll to bottom"
       ><i class="i-chevrons-down" />
     <//>`,
     $scrollToTop = html`<${FloatingButton}
-      onclick=${() => scrollTo(0)}
+      onclick=${() => scrollTo(0, scrollBehavior)}
       aria-label="Scroll to top"
       ><i class="i-chevrons-up" />
     <//>`,
-    onScroll = () => {
+    onPageScrolled = () => {
       if (!$scroller) return;
       const { scrollTop, scrollHeight, clientHeight } = $scroller;
       let scrollDist = scrollTop;
@@ -46,12 +49,29 @@ export default async (api, db) => {
         else addFloatingButton($scrollToBottom);
       } else removeFloatingButton($scrollToTop);
     },
+    onTodayLoaded = () => {
+      const $bubble = document.querySelector(todayBubble);
+      if (!$bubble) return;
+      // calendar will jump anyway when pinning the current month,
+      // so ignore smooth scroll setting and jump direct to week
+      scrollTo($bubble.offsetParent.offsetParent.offsetTop + 57, "auto");
+      removeMutationListener(onTodayLoaded);
+    },
+    onTodayClicked = () => {
+      removeMutationListener(onTodayLoaded);
+      addMutationListener(todayBubble, onTodayLoaded);
+    },
     setup = () => {
       if (document.contains($scroller)) return;
       $scroller = document.querySelector(scroller);
-      $scroller?.removeEventListener("scroll", onScroll);
-      $scroller?.addEventListener("scroll", onScroll);
-      onScroll();
+      $scroller?.removeEventListener("scroll", onPageScrolled);
+      $scroller?.addEventListener("scroll", onPageScrolled);
+      onPageScrolled();
+      if (jumpToWeek) {
+        $todayButton = document.querySelector(todayButton);
+        $todayButton?.removeEventListener("click", onTodayClicked);
+        $todayButton?.addEventListener("click", onTodayClicked);
+      }
     };
   addMutationListener(scroller, setup, { subtree: false });
   setup();

src/extensions/scroller/mod.json

@@ -21,7 +21,7 @@
     {
       "type": "toggle",
       "key": "smoothScrolling",
-      "description": "Smoothly animates any scrolling triggered by this extension. Disable this to jump across pages instantly.",
+      "description": "Smoothly animates scrolling triggered by this extension. Disable this to jump across pages instantly.",
       "value": true
     },
     { "type": "heading", "label": "Pages" },
@@ -42,6 +42,13 @@
       "key": "scrollDistanceUnit",
       "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"]
+    },
+    { "type": "heading", "label": "Calendars" },
+    {
+      "type": "toggle",
+      "key": "jumpToWeek",
+      "description": "Jump to the current week (not just the current month) when clicking the 'Today' button on a full-page calendar view.",
+      "value": true
     }
   ],
   "clientScripts": ["client.mjs"]