diff --git a/src/extensions/calendar-scroll/calendar-scroll.png b/src/extensions/calendar-scroll/calendar-scroll.png deleted file mode 100644 index 42ab520..0000000 Binary files a/src/extensions/calendar-scroll/calendar-scroll.png and /dev/null differ diff --git a/src/extensions/calendar-scroll/client.css b/src/extensions/calendar-scroll/client.css deleted file mode 100644 index 2cbdb62..0000000 --- a/src/extensions/calendar-scroll/client.css +++ /dev/null @@ -1,25 +0,0 @@ -/** - * notion-enhancer: calendar scroll - * (c) 2021 dragonwocky (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); -} diff --git a/src/extensions/calendar-scroll/client.mjs b/src/extensions/calendar-scroll/client.mjs deleted file mode 100644 index a13851e..0000000 --- a/src/extensions/calendar-scroll/client.mjs +++ /dev/null @@ -1,41 +0,0 @@ -/** - * notion-enhancer: calendar scroll - * (c) 2021 dragonwocky (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``; - $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(); -} diff --git a/src/extensions/calendar-scroll/mod.json b/src/extensions/calendar-scroll/mod.json deleted file mode 100644 index 5dbd371..0000000 --- a/src/extensions/calendar-scroll/mod.json +++ /dev/null @@ -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": [] -} diff --git a/src/extensions/scroller/client.mjs b/src/extensions/scroller/client.mjs index c36e41c..f9e8c91 100644 --- a/src/extensions/scroller/client.mjs +++ b/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" > `, $scrollToTop = html`<${FloatingButton} - onclick=${() => scrollTo(0)} + onclick=${() => scrollTo(0, scrollBehavior)} aria-label="Scroll to top" > `, - 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(); diff --git a/src/extensions/scroller/mod.json b/src/extensions/scroller/mod.json index 84f30b0..8e63b0a 100644 --- a/src/extensions/scroller/mod.json +++ b/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"]