extension: collapse properties

formerly property-layout, added per-page memory

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

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);
 }

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`<button id="calendar-scroll-to-week">Scroll</button>`;
+    $scrollButton = web.html`<button id="enhancer--calendar-scroll">Scroll</button>`;
   $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();

repo/collapse-properties/client.css

@@ -0,0 +1,59 @@
+/*
+ * notion-enhancer: collapse properties
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (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;
+}

repo/collapse-properties/client.mjs

@@ -0,0 +1,37 @@
+/*
+ * notion-enhancer: collapse properties
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (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`<button id="enhancer--collapse-properties">
+      <svg viewBox="0 0 100 100"><polygon points="5.9,88.2 50,11.8 94.1,88.2"></polygon></svg>
+      <span></span>
+    </button>`;
+  $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();
+}

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": []
+}

repo/registry.json

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