update + port: bypass-preview, calendar-scroll

This commit is contained in:
dragonwocky 2021-10-04 22:44:51 +11:00
parent 022c08fe75
commit f2928371b6
3 changed files with 70 additions and 60 deletions

View File

@ -7,27 +7,32 @@
'use strict'; 'use strict';
export default async function (api, db) { export default async function (api, db) {
const { web, components } = api; const { web, notion } = api;
await web.whenReady(); await web.whenReady();
let _lastPage = {}; let _openPage = {};
function getCurrentPage() { function getCurrentPage() {
if (web.queryParams().get('p')) return { type: 'preview', id: web.queryParams().get('p') }; return {
return { type: 'page', id: location.pathname.split(/(-|\/)/g).reverse()[0] }; type: web.queryParams().get('p') ? 'preview' : 'page',
id: notion.getPageID(),
};
} }
web.addDocumentObserver((event) => { web.addDocumentObserver(
(event) => {
const currentPage = getCurrentPage(); const currentPage = getCurrentPage();
if (currentPage.id !== _lastPage.id || currentPage.type !== _lastPage.type) { if (currentPage.id !== _openPage.id || currentPage.type !== _openPage.type) {
const openAsPage = document.querySelector( const openAsPage = document.querySelector(
'.notion-peek-renderer [style*="height: 45px;"] a' '.notion-peek-renderer [style*="height: 45px;"] a'
); );
if (openAsPage) { if (openAsPage) {
if (currentPage.id === _lastPage.id && currentPage.type === 'preview') { if (currentPage.id === _openPage.id && currentPage.type === 'preview') {
history.back(); history.back();
} else openAsPage.click(); } else openAsPage.click();
} }
_lastPage = getCurrentPage(); _openPage = getCurrentPage();
} }
}); },
['.notion-peek-renderer']
);
} }

View File

@ -5,9 +5,9 @@
*/ */
#calendar-scroll-to-week { #calendar-scroll-to-week {
background: var(--theme--button_hover); background: var(--theme--ui_interactive-hover);
border: 1px solid transparent; border: 1px solid transparent;
font-size: var(--theme--font_label-size); font-size: 14px;
color: var(--theme--text); color: var(--theme--text);
height: 24px; height: 24px;
border-radius: 3px; border-radius: 3px;
@ -15,7 +15,11 @@
padding: 0 0.5em; padding: 0 0.5em;
margin-right: 5px; margin-right: 5px;
} }
#calendar-scroll-to-week:focus,
#calendar-scroll-to-week:hover { #calendar-scroll-to-week:hover {
background: transparent; background: transparent;
border: 1px solid var(--theme--button_hover); border: 1px solid var(--theme--ui_interactive-hover);
}
#calendar-scroll-to-week:active {
background: var(--theme--ui_interactive-active);
} }

View File

@ -6,19 +6,17 @@
'use strict'; 'use strict';
import { web } from '../../api/_.mjs'; export default async function (api, db) {
const { web } = api;
const $button = web.createElement( const toolbarSelector = '.notion-calendar-view > :first-child > :first-child > :first-child',
web.html`<button id="calendar-scroll-to-week">Scroll</button>` $scrollButton = web.html`<button id="calendar-scroll-to-week">Scroll</button>`;
); $scrollButton.addEventListener('click', async (event) => {
$button.addEventListener('click', async (event) => { const $toolbar = document.querySelector(toolbarSelector),
let $day = document.querySelector('.notion-calendar-view-day[style*="background:"]'); now = new Date(),
while (!$day) { thisYear = now.getFullYear(),
const $toolbar = document.querySelector( thisMonth = now.getMonth(),
'.notion-calendar-view > :first-child > :first-child > :first-child' allMonths = {
),
year = +$toolbar.children[0].innerText.split(' ')[1],
month = {
'January': 0, 'January': 0,
'February': 1, 'February': 1,
'March': 2, 'March': 2,
@ -31,34 +29,37 @@ $button.addEventListener('click', async (event) => {
'October': 9, 'October': 9,
'November': 10, 'November': 10,
'December': 11, 'December': 11,
}[$toolbar.children[0].innerText.split(' ')[0]], };
now = new Date(); let $today;
while (!$today) {
const visibleYear = +$toolbar.children[0].innerText.split(' ')[1],
visibleMonth = allMonths[$toolbar.children[0].innerText.split(' ')[0]];
switch (true) { switch (true) {
case now.getFullYear() < year: case thisYear < visibleYear:
case now.getFullYear() === year && now.getMonth() < month: case thisYear === visibleYear && thisMonth < visibleMonth:
$toolbar.children[3].click(); $toolbar.children[3].click();
break; break;
case now.getFullYear() > year: case thisYear > visibleYear:
case now.getFullYear() === year && now.getMonth() > month: case thisYear === visibleYear && thisMonth > visibleMonth:
$toolbar.children[5].click(); $toolbar.children[5].click();
break; break;
default: default:
await new Promise((res, rej) => requestAnimationFrame(res)); $today = document.querySelector('.notion-calendar-view-day[style*="background:"]');
$day = document.querySelector('.notion-calendar-view-day[style*="background:"]');
} }
await new Promise((res, rej) => requestAnimationFrame(res)); await new Promise((res, rej) => requestAnimationFrame(res));
} }
const $scroller = document.querySelector('.notion-frame .notion-scroller'); const $scroller = document.querySelector('.notion-frame .notion-scroller');
$scroller.scroll({ $scroller.scroll({
top: $day.offsetParent.offsetParent.offsetTop + 70, top: $today.offsetParent.offsetParent.offsetTop + 70,
behavior: 'auto', behavior: 'auto',
}); });
}); });
web.addDocumentObserver((event) => { const insertButton = () => {
if (document.contains($button)) return; if (document.contains($scrollButton)) return;
const toolbar = document.querySelector( const toolbar = document.querySelector(toolbarSelector);
'.notion-calendar-view > :first-child > :first-child > :first-child' if (toolbar) toolbar.insertBefore($scrollButton, toolbar.children[2]);
); };
if (toolbar) toolbar.insertBefore($button, toolbar.children[2]); web.addDocumentObserver(insertButton, [toolbarSelector]);
}); insertButton();
}