extension: truncated titles

repo/code-line-numbers/app.css

@@ -1,30 +0,0 @@
-/*
- * code line numbers
- * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (c) 2020 CloudHill
- * under the MIT license
- */
-
-.notion-code-block.line-numbers {
-  position: relative;
-}
-
-.code-numbered {
-  padding-left: 48px !important;
-}
-#code-line-numbers {
-  font-size: var(--theme--font_code-size);
-  font-family: var(--theme--font_code);
-  color: var(--theme--text_ui_info);
-  background: var(--theme--code-background);
-  text-align: right;
-  position: absolute;
-  left: 0;
-  right: calc(100% - 48px);
-  padding-right: 18px;
-  overflow: hidden;
-  pointer-events: none;
-}
-#code-line-numbers:empty {
-  display: none;
-}

repo/code-line-numbers/mod.js

@@ -1,113 +0,0 @@
-/*
- * code line numbers
- * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (c) 2020 CloudHill
- * under the MIT license
- */
-
-'use strict';
-
-const { createElement } = require('../../pkg/helpers.js');
-
-module.exports = {
-  id: 'd61dc8a7-b195-465b-935f-53eea9efe74e',
-  tags: ['extension'],
-  name: 'code line numbers',
-  desc: 'adds line numbers to code blocks.',
-  version: '1.2.0',
-  author: 'CloudHill',
-  options: [
-    {
-      key: 'single_lined',
-      label: 'show line numbers on single-lined code blocks',
-      type: 'toggle',
-      value: false,
-    },
-  ],
-  hacks: {
-    'renderer/preload.js'(store, __exports) {
-      document.addEventListener('readystatechange', (event) => {
-        if (document.readyState !== 'complete') return false;
-        let queue = [];
-        const observer = new MutationObserver((list, observer) => {
-          if (!queue.length) requestAnimationFrame(() => handle(queue));
-          queue.push(...list);
-        });
-        observer.observe(document.body, {
-          childList: true,
-          subtree: true,
-        });
-
-        const resizeObserver = new ResizeObserver((list, observer) => number(list[0].target));
-
-        function handle(list) {
-          queue = [];
-          for (let { addedNodes, target } of list) {
-            const block =
-              target.querySelector('.line-numbers.notion-code-block') ||
-              (addedNodes[0]?.classList?.contains('.notion-code-block') &&
-                addedNodes[0].querySelector('.line-numbers.notion-code-block'));
-
-            if (block) {
-              if (block.dataset.numbered) return;
-              number(block);
-              block.dataset.numbered = true;
-              resizeObserver.observe(block);
-            }
-          }
-        }
-
-        function number(block) {
-          let codeLineNumbers = '';
-
-          let numbers = block.querySelector('#code-line-numbers');
-          if (!numbers) {
-            numbers = createElement('<span id="code-line-numbers"></span>');
-
-            // set size
-            const blockStyle = window.getComputedStyle(block.children[0]);
-            numbers.style.top = blockStyle.paddingTop;
-            numbers.style.bottom = blockStyle.paddingBottom;
-
-            block.append(numbers);
-
-            // get lineHeight
-            const temp = createElement('<span>A</span>');
-            block.firstChild.append(temp);
-            block.lineHeight = temp.getBoundingClientRect().height;
-            temp.remove();
-          }
-
-          const lines = block.firstChild.innerText.split(/\r\n|\r|\n/);
-          if (lines[lines.length - 1] === '') lines.pop();
-          let lineCounter = 0;
-          const wordWrap = block.firstChild.style.wordBreak === 'break-all';
-
-          for (let i = 0; i < lines.length; i++) {
-            lineCounter++;
-            codeLineNumbers += `${lineCounter}\n`;
-
-            if (wordWrap) {
-              const temp = document.createElement('span');
-              temp.innerText = lines[i];
-              block.firstChild.append(temp);
-              const lineHeight = temp.getBoundingClientRect().height;
-              temp.remove();
-
-              for (let j = 1; j < lineHeight / block.lineHeight - 1; j++)
-                codeLineNumbers += '\n';
-            }
-          }
-
-          if (store().single_lined || codeLineNumbers.length > 2) {
-            block.firstChild.classList.add('code-numbered');
-            numbers.innerText = codeLineNumbers || 1;
-          } else {
-            block.firstChild.classList.remove('code-numbered');
-            numbers.innerText = '';
-          }
-        }
-      });
-    },
-  },
-};

repo/font-chooser/fonts.css

@@ -1,7 +1,7 @@
 /*
  * notion-enhancer: font chooser
  * (c) 2021 TorchAtlas (https://torchatlas.netlify.app/)
- * (c) 2021 admiraldus (https://github.com/admiraldus
+ * (c) 2021 admiraldus (https://github.com/admiraldus)
  * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */

repo/registry.json

@@ -30,5 +30,6 @@
   "calendar-scroll",
   "weekly-view",
   "collapse-properties",
+  "truncated-titles",
   "focus-mode"
 ]

repo/truncated-titles/client.css

@@ -0,0 +1,17 @@
+/*
+ * notion-enhancer: truncated titles
+ * (c) 2021 admiraldus (https://github.com/admiraldus)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+.truncated_titles--tooltip {
+  display: inline-flex;
+  align-items: center;
+}
+
+.truncated_titles--tooltip svg {
+  margin-right: 0.5em;
+  width: 1em;
+  height: 1em;
+}

repo/truncated-titles/client.mjs

@@ -0,0 +1,69 @@
+/*
+ * notion-enhancer: truncated titles
+ * (c) 2021 admiraldus (https://github.com/admiraldus)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+export default async function ({ web, components }, db) {
+  const enhanceTableTitles = await db.get(['tables']),
+    enhanceTimelineItems = await db.get(['timelines']),
+    tableCellSelector = '.notion-table-view-header-cell',
+    tableTitleSelector = `${tableCellSelector} div[style*="text-overflow"]`,
+    timelineItemSelector = '.notion-timeline-item',
+    svgIcon = await components.feather('eye'),
+    $elements = [];
+
+  const addTooltips = () => {
+    if (enhanceTableTitles) {
+      document.querySelectorAll(tableTitleSelector).forEach(($tableTitle) => {
+        if ($elements.includes($tableTitle)) return;
+
+        if ($tableTitle.scrollWidth > $tableTitle.clientWidth) {
+          components.setTooltip(
+            $tableTitle.parentElement.parentElement.parentElement,
+            web.html`<b class="truncated_titles--tooltip">${svgIcon}
+              <span>${web.escape($tableTitle.innerText)}</span></b>`,
+            750
+          );
+          $elements.push($tableTitle);
+        }
+      });
+    }
+
+    if (enhanceTimelineItems) {
+      document.querySelectorAll(timelineItemSelector).forEach(($timelineItem) => {
+        const $title = $timelineItem.nextElementSibling.firstElementChild;
+        $title.style.position = 'absolute';
+        $title.style.left = $timelineItem.style.left;
+
+        if ($elements.includes($timelineItem)) return;
+        $elements.push($timelineItem);
+
+        $title.style.width = $timelineItem.clientWidth + 'px';
+        $title.firstElementChild.firstElementChild.style.maxWidth =
+          $timelineItem.clientWidth + 'px';
+        $timelineItem.addEventListener('mouseover', (event) => {
+          $title.style.width = '100%';
+          $title.firstElementChild.firstElementChild.style.maxWidth = '400px';
+        });
+        $timelineItem.addEventListener('mouseout', async (event) => {
+          console.log(event, $timelineItem.matches(':hover'));
+          if (!$timelineItem.matches(':hover')) {
+            $title.style.width = $timelineItem.clientWidth + 'px';
+            $title.firstElementChild.firstElementChild.style.maxWidth =
+              $timelineItem.clientWidth + 'px';
+          }
+        });
+      });
+    }
+  };
+
+  await web.whenReady();
+  addTooltips();
+  web.addDocumentObserver(addTooltips, [
+    tableCellSelector,
+    timelineItemSelector,
+    `${timelineItemSelector} + div > :first-child`,
+  ]);
+}

repo/truncated-titles/mod.json

@@ -0,0 +1,34 @@
+{
+  "name": "truncated titles",
+  "id": "1794c0bd-7b96-46ad-aa0b-fc4bd76fc7fb",
+  "version": "0.2.0",
+  "description": "see the full text of a truncated title on hover.",
+  "tags": ["extension", "layout"],
+  "authors": [
+    {
+      "name": "admiraldus",
+      "homepage": "https://github.com/admiraldus",
+      "avatar": "https://raw.githubusercontent.com/admiraldus/admiraldus/main/module.gif"
+    }
+  ],
+  "js": {
+    "client": ["client.mjs"]
+  },
+  "css": {
+    "client": ["client.css"]
+  },
+  "options": [
+    {
+      "type": "toggle",
+      "key": "tables",
+      "label": "table titles",
+      "value": true
+    },
+    {
+      "type": "toggle",
+      "key": "timelines",
+      "label": "timeline items",
+      "value": true
+    }
+  ]
+}