extension: indentation lines

+ new feature: toc support

repo/indentation-lines/client.css

@@ -0,0 +1,39 @@
+/*
+ * notion-enhancer: indentation lines
+ * (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.notion-page-content .notion-bulleted_list-block > div > div:last-child,
+.notion-page-content .notion-numbered_list-block > div > div:last-child,
+.notion-page-content .notion-to_do-block > div > div:last-child,
+.notion-page-content .notion-toggle-block > div > div:last-child,
+.notion-page-content .notion-table_of_contents-block > div > div > a > div > div {
+  position: relative;
+}
+
+.notion-page-content .notion-bulleted_list-block > div > div:last-child::before,
+.notion-page-content .notion-numbered_list-block > div > div:last-child::before,
+.notion-page-content .notion-to_do-block > div > div:last-child::before,
+.notion-page-content .notion-toggle-block > div > div:last-child::before {
+  content: '';
+  position: absolute;
+  height: calc(100% - 2em);
+  top: 2em;
+  left: -14.48px;
+}
+
+.notion-page-content
+  .notion-table_of_contents-block
+  > div
+  > div
+  > a
+  > div
+  > div:not([style*='margin-left: 0px'])
+  > div::before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  top: 0;
+  left: -14.48px;
+}

repo/indentation-lines/client.mjs

@@ -0,0 +1,43 @@
+/*
+ * notion-enhancer: indentation lines
+ * (c) 2020 Alexa Baldon <alnbaldon@gmail.com> (https://github.com/runargs)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+'use strict';
+
+export default async function ({ web }, db) {
+  let style = 'solid',
+    opacity = 1;
+  switch (await db.get(['style'])) {
+    case 'dashed':
+      style = 'dashed';
+      break;
+    case 'dotted':
+      style = 'dotted';
+      break;
+    case 'soft':
+      opacity = 0.25;
+      break;
+  }
+
+  for (const listType of ['bulleted_list', 'numbered_list', 'to_do', 'toggle']) {
+    if (!(await db.get([listType]))) continue;
+    document.head.append(web.html`<style>
+      .notion-page-content .notion-${listType}-block > div > div:last-child::before {
+        border-left: 1px ${style};
+        opacity: ${opacity};
+      }
+    </style>`);
+  }
+
+  if (db.get(['table_of_contents'])) {
+    document.head.append(web.html`<style>
+      .notion-page-content .notion-table_of_contents-block > div > div > a > div
+      > div:not([style*='margin-left: 0px']) > div::before {
+        border-left: 1px ${style};
+        opacity: ${opacity};
+      }
+    </style>`);
+  }
+}

repo/indentation-lines/mod.json

@@ -0,0 +1,59 @@
+{
+  "name": "indentation lines",
+  "id": "35815b3b-3916-4dc6-8769-c9c2448f8b57",
+  "version": "0.2.0",
+  "description": "adds vertical relationship lines to make list trees easier to follow.",
+  "tags": ["extension", "usability"],
+  "authors": [
+    {
+      "name": "runargs",
+      "email": "alnbaldon@gmail.com",
+      "homepage": "http://github.com/runargs",
+      "avatar": "https://avatars.githubusercontent.com/u/39810066"
+    }
+  ],
+  "css": {
+    "client": ["client.css"]
+  },
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "options": [
+    {
+      "type": "select",
+      "key": "style",
+      "label": "style",
+      "values": ["solid", "dashed", "dotted", "soft"]
+    },
+    {
+      "type": "toggle",
+      "key": "bulleted_list",
+      "label": "bulleted lists",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "numbered_list",
+      "label": "numbered lists",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "to_do",
+      "label": "to-do lists",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "toggle",
+      "label": "toggle lists",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "table_of_contents",
+      "label": "tables of contents",
+      "value": true
+    }
+  ]
+}

repo/registry.json

@@ -21,5 +21,6 @@
   "calendar-scroll",
   "font-chooser",
   "collapse-properties",
-  "scroll-to-top"
+  "scroll-to-top",
+  "indentation-lines"
 ]

repo/scroll-to-top/client.mjs

@@ -23,7 +23,7 @@ export default async function ({ web, components }, db) {
   let $scroller;
   const topDistancePx = +(await db.get(['top_distance_px'])),
     topDistancePercent = 0.01 * (await db.get(['top_distance_percent'])),
-    adjustButtonVisibility = async (event) => {
+    adjustButtonVisibility = async () => {
       if (!$scroller) return;
       $scrollButton.classList.add('hidden');
       const scrolledDistance =