From 1e5c985e76606e96cc32a65d5b357b43dd38c862 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 13 Oct 2021 11:19:38 +1100 Subject: [PATCH] extension: collapse properties formerly property-layout, added per-page memory --- repo/bypass-preview/client.mjs | 40 +++++++++---------- repo/calendar-scroll/client.css | 8 ++-- repo/calendar-scroll/client.mjs | 6 +-- repo/collapse-properties/client.css | 59 +++++++++++++++++++++++++++++ repo/collapse-properties/client.mjs | 37 ++++++++++++++++++ repo/collapse-properties/mod.json | 22 +++++++++++ repo/registry.json | 3 +- 7 files changed, 145 insertions(+), 30 deletions(-) create mode 100644 repo/collapse-properties/client.css create mode 100644 repo/collapse-properties/client.mjs create mode 100644 repo/collapse-properties/mod.json diff --git a/repo/bypass-preview/client.mjs b/repo/bypass-preview/client.mjs index d831e75..09287f0 100644 --- a/repo/bypass-preview/client.mjs +++ b/repo/bypass-preview/client.mjs @@ -10,28 +10,24 @@ export default async function (api, db) { const { web, notion } = api; let _openPage = {}; - function getCurrentPage() { - return { - type: web.queryParams().get('p') ? 'preview' : 'page', - id: notion.getPageID(), - }; - } + const getCurrentPage = () => ({ + type: web.queryParams().get('p') ? 'preview' : 'page', + id: notion.getPageID(), + }); - web.addDocumentObserver( - (event) => { - const currentPage = getCurrentPage(); - if (currentPage.id !== _openPage.id || currentPage.type !== _openPage.type) { - const openAsPage = document.querySelector( - '.notion-peek-renderer [style*="height: 45px;"] a' - ); - if (openAsPage) { - if (currentPage.id === _openPage.id && currentPage.type === 'preview') { - history.back(); - } else openAsPage.click(); - } - _openPage = getCurrentPage(); + const interceptPreview = () => { + const currentPage = getCurrentPage(); + if (currentPage.id !== _openPage.id || currentPage.type !== _openPage.type) { + const $openAsPage = document.querySelector( + '.notion-peek-renderer [style*="height: 45px;"] a' + ); + if ($openAsPage) { + if (currentPage.id === _openPage.id && currentPage.type === 'preview') { + history.back(); + } else $openAsPage.click(); } - }, - ['.notion-peek-renderer'] - ); + _openPage = getCurrentPage(); + } + }; + web.addDocumentObserver(interceptPreview, ['.notion-peek-renderer']); } diff --git a/repo/calendar-scroll/client.css b/repo/calendar-scroll/client.css index 9ba286c..e150eb4 100644 --- a/repo/calendar-scroll/client.css +++ b/repo/calendar-scroll/client.css @@ -4,7 +4,7 @@ * (https://notion-enhancer.github.io/) under the MIT license */ -#calendar-scroll-to-week { +#enhancer--calendar-scroll { background: var(--theme--ui_interactive-hover); border: 1px solid transparent; font-size: 14px; @@ -15,11 +15,11 @@ padding: 0 0.5em; margin-right: 5px; } -#calendar-scroll-to-week:focus, -#calendar-scroll-to-week:hover { +#enhancer--calendar-scroll:focus, +#enhancer--calendar-scroll:hover { background: transparent; border: 1px solid var(--theme--ui_interactive-hover); } -#calendar-scroll-to-week:active { +#enhancer--calendar-scroll:active { background: var(--theme--ui_interactive-active); } diff --git a/repo/calendar-scroll/client.mjs b/repo/calendar-scroll/client.mjs index f39f24f..a83bccb 100644 --- a/repo/calendar-scroll/client.mjs +++ b/repo/calendar-scroll/client.mjs @@ -10,7 +10,7 @@ export default async function (api, db) { const { web } = api; const toolbarSelector = '.notion-calendar-view > :first-child > :first-child > :first-child', - $scrollButton = web.html``; + $scrollButton = web.html``; $scrollButton.addEventListener('click', async (event) => { const $toolbar = document.querySelector(toolbarSelector), now = new Date(), @@ -57,8 +57,8 @@ export default async function (api, db) { const insertButton = () => { if (document.contains($scrollButton)) return; - const toolbar = document.querySelector(toolbarSelector); - if (toolbar) toolbar.insertBefore($scrollButton, toolbar.children[2]); + const $toolbar = document.querySelector(toolbarSelector); + if ($toolbar) $toolbar.insertBefore($scrollButton, $toolbar.children[2]); }; web.addDocumentObserver(insertButton, ['.notion-calendar-view']); insertButton(); diff --git a/repo/collapse-properties/client.css b/repo/collapse-properties/client.css new file mode 100644 index 0000000..3287563 --- /dev/null +++ b/repo/collapse-properties/client.css @@ -0,0 +1,59 @@ +/* + * notion-enhancer: collapse properties + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +#enhancer--collapse-properties { + display: flex; + background: var(--theme--ui_interactive-hover); + border: 1px solid transparent; + font-size: 14px; + border-radius: 3px; + line-height: 1.2; + font-weight: 600; + padding: 0.3em 0.5em; + margin: 1em 0; + width: 100%; +} +#enhancer--collapse-properties:focus, +#enhancer--collapse-properties:hover { + background: transparent; + border: 1px solid var(--theme--ui_interactive-hover); +} +#enhancer--collapse-properties:active { + background: var(--theme--ui_interactive-active); +} + +#enhancer--collapse-properties > span { + text-align: left; + color: var(--theme--text); +} +#enhancer--collapse-properties > svg { + fill: var(--theme--icon); + height: 0.8em; + width: 0.8em; + margin: auto 0.5em auto 0; + transition: transform 200ms ease-out 0s; +} + +#enhancer--collapse-properties[data-collapsed='false'] > span:before { + content: 'Collapse Properties'; +} +#enhancer--collapse-properties[data-collapsed='false'] > svg { + transform: rotateZ(180deg); +} +#enhancer--collapse-properties[data-collapsed='true'] > span:before { + content: 'Show Properties'; +} +#enhancer--collapse-properties[data-collapsed='true'] > svg { + transform: rotateZ(90deg); +} + +#enhancer--collapse-properties + div { + overflow: hidden; +} +#enhancer--collapse-properties[data-collapsed='true'] + div { + max-height: 0 !important; + opacity: 0; +} diff --git a/repo/collapse-properties/client.mjs b/repo/collapse-properties/client.mjs new file mode 100644 index 0000000..1659efd --- /dev/null +++ b/repo/collapse-properties/client.mjs @@ -0,0 +1,37 @@ +/* + * notion-enhancer: collapse properties + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +'use strict'; + +export default function (api, db) { + const { web, notion } = api; + + const propertyListSelector = + '.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]', + $collapseButton = web.html``; + $collapseButton.addEventListener('click', async (event) => { + if ($collapseButton.dataset.collapsed === 'true') { + await db.set([notion.getPageID()], false); + $collapseButton.dataset.collapsed = false; + } else { + await db.set([notion.getPageID()], true); + $collapseButton.dataset.collapsed = true; + } + }); + const insertButton = async () => { + if (document.contains($collapseButton)) return; + const $propertyList = document.querySelector(propertyListSelector); + if ($propertyList) { + $collapseButton.dataset.collapsed = await db.get([notion.getPageID()], false); + $propertyList.before($collapseButton); + } + }; + web.addDocumentObserver(insertButton, [propertyListSelector]); + insertButton(); +} diff --git a/repo/collapse-properties/mod.json b/repo/collapse-properties/mod.json new file mode 100644 index 0000000..90fe55c --- /dev/null +++ b/repo/collapse-properties/mod.json @@ -0,0 +1,22 @@ +{ + "name": "collapse properties", + "id": "4034a578-7dd3-4633-80c6-f47ac5b7b160", + "version": "0.3.0", + "description": "add a button to quickly collapse/expand page properties that usually push down page content.", + "tags": ["extension", "layout"], + "authors": [ + { + "name": "dragonwocky", + "email": "thedragonring.bod@gmail.com", + "homepage": "https://dragonwocky.me/", + "avatar": "https://dragonwocky.me/avatar.jpg" + } + ], + "css": { + "client": ["client.css"] + }, + "js": { + "client": ["client.mjs"] + }, + "options": [] +} diff --git a/repo/registry.json b/repo/registry.json index 6f594eb..738e16d 100644 --- a/repo/registry.json +++ b/repo/registry.json @@ -19,5 +19,6 @@ "bypass-preview", "calendar-scroll", - "font-chooser" + "font-chooser", + "collapse-properties" ]