From b7e80cf25b3ac94e194b5f2b00cc904f4c0850e9 Mon Sep 17 00:00:00 2001
From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com>
Date: Wed, 2 Dec 2020 19:10:35 +0700
Subject: [PATCH] move indentation lines from tweaks to its own mod (#287)

* move indentation lines from tweaks to its own mod

* changed indentation lines author to runargs

* refactor indentation lines to use the map function
---
 mods/indentation-lines/mod.js | 105 ++++++++++++++++++++++++++++++++++
 mods/tweaks/app.css           |  36 ------------
 mods/tweaks/mod.js            |  14 -----
 3 files changed, 105 insertions(+), 50 deletions(-)
 create mode 100644 mods/indentation-lines/mod.js

diff --git a/mods/indentation-lines/mod.js b/mods/indentation-lines/mod.js
new file mode 100644
index 0000000..5a90bfb
--- /dev/null
+++ b/mods/indentation-lines/mod.js
@@ -0,0 +1,105 @@
+/*
+ * indentation lines
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 Alexa Baldon (https://github.com/runargs)
+ * (c) 2020 CloudHill
+ * under the MIT license
+ */
+
+'use strict';
+
+const { createElement } = require('../../pkg/helpers.js');
+
+module.exports = {
+  id: '35815b3b-3916-4dc6-8769-c9c2448f8b57',
+  tags: ['extension'],
+  name: 'indentation lines',
+  desc: 'adds vertical relationship lines to make list trees easier to follow.',
+  version: '1.0.0',
+  author: 'runargs',
+  options: [
+    {
+      key: 'style',
+      label: 'style',
+      type: 'select',
+      value: ['solid', 'dashed', 'dotted', 'soft'],
+    },
+    {
+      key: 'bulleted_list',
+      label: 'bulleted list',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'numbered_list',
+      label: 'numbered list',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'to_do',
+      label: 'to-do list',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'toggle',
+      label: 'toggle list',
+      type: 'toggle',
+      value: true,
+    },
+  ],
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+
+        const selectors = 
+          ['bulleted_list', 'numbered_list', 'to_do', 'toggle']
+          .filter(l => store()[l])
+          .map(l => `.notion-page-content .notion-${l}-block > div > div:last-child`);
+         
+        let style = 'solid';
+        let opacity = 1;
+        switch(store().style) {
+          case 'dashed':
+            style = 'dashed';
+            break;
+          case 'dotted':
+            style = 'dotted';
+            break;
+          case 'soft':
+            opacity = 0.25;
+            break;
+        }
+
+        if (selectors.length > 0) {
+          document
+            .querySelector('head')
+            .appendChild(
+              createElement(`
+                <style type="text/css">
+                  .notion-app-inner {
+                    --indentation-lines-style: ${style};
+                    --indentation-lines-opacity: ${opacity};
+                  }
+                  ${selectors.join(',\n')} {
+                    position: relative;
+                  }
+                  ${selectors.join('::before,\n')}::before {
+                    content: "";
+                    position: absolute;
+                    height: calc(100% - 2em);
+                    top: 2em;
+                    left: -14.48px;
+                    border-left: 1px var(--indentation-lines-style);
+                    opacity: var(--indentation-lines-opacity);
+                  }
+                </style>
+              `)
+            )
+        }
+      });
+    },
+  },
+};
diff --git a/mods/tweaks/app.css b/mods/tweaks/app.css
index 811a75d..3f2ccfe 100644
--- a/mods/tweaks/app.css
+++ b/mods/tweaks/app.css
@@ -54,42 +54,6 @@
   margin-bottom: -1.5px !important;
 }
 
-[data-tweaks*='[indentation_lines']
-div.notion-selectable.notion-bulleted_list-block > div > div:last-child,
-[data-tweaks*='[indentation_lines']
-div.notion-selectable.notion-numbered_list-block > div > div:last-child {
-  position: relative;
-}
-[data-tweaks*='[indentation_lines']
-div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before,
-[data-tweaks*='[indentation_lines']
-div.notion-selectable.notion-numbered_list-block > div > div:last-child::before {
-  content: "";
-  position: absolute;
-  height: calc(100% - 2em);
-  top: 2em;
-  left: -14.48px;
-  border-left: 1px solid;
-}
-[data-tweaks*='[indentation_lines_dashed]']
-div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before,
-[data-tweaks*='[indentation_lines_dashed]']
-div.notion-selectable.notion-numbered_list-block > div > div:last-child::before {
-  border-left-style: dashed;
-}
-[data-tweaks*='[indentation_lines_dotted]']
-div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before,
-[data-tweaks*='[indentation_lines_dotted]']
-div.notion-selectable.notion-numbered_list-block > div > div:last-child::before {
-  border-left-style: dotted;
-}
-[data-tweaks*='[indentation_lines_soft]']
-div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before,
-[data-tweaks*='[indentation_lines_soft]']
-div.notion-selectable.notion-numbered_list-block > div > div:last-child::before {
-  opacity: 0.25;
-}
-
 [data-tweaks*='[scroll_db_toolbars]'] .notion-frame > .notion-scroller > [style*="overflow: visible;"],
 [data-tweaks*='[scroll_db_toolbars]'] .notion-page-content .notion-collection_view-block > :first-child {
     overflow-x: auto !important;
diff --git a/mods/tweaks/mod.js b/mods/tweaks/mod.js
index 04c0912..daa5a67 100644
--- a/mods/tweaks/mod.js
+++ b/mods/tweaks/mod.js
@@ -74,15 +74,6 @@ module.exports = {
       type: 'toggle',
       value: false,
     },
-    {
-      key: 'indentation_lines',
-      label: 'indentation lines for lists',
-      desc:
-        'adds vertical indentation or relationship lines to make list trees\
-        easier to follow',
-      type: 'select',
-      value: ['none', 'solid', 'dashed', 'dotted', 'soft'],
-    },
     {
       key: 'scroll_db_toolbars',
       label: 'scroll database toolbars',
@@ -123,11 +114,6 @@ module.exports = {
         };
         window.addEventListener('resize', addResponsiveBreakpoint);
         addResponsiveBreakpoint();
-        if (store().indentation_lines !== 'none') {
-          document.body.dataset.tweaks += `[indentation_lines_${
-            store().indentation_lines
-          }]`;
-        }
       });
     },
   },