From b1ced4fac86401c19f5ba7b6df27c3bdbefa24b3 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 20 Oct 2021 21:01:52 +1100 Subject: [PATCH] extension: truncated titles --- repo/code-line-numbers/app.css | 30 -------- repo/code-line-numbers/mod.js | 113 ------------------------------- repo/font-chooser/fonts.css | 2 +- repo/registry.json | 1 + repo/truncated-titles/client.css | 17 +++++ repo/truncated-titles/client.mjs | 69 +++++++++++++++++++ repo/truncated-titles/mod.json | 34 ++++++++++ 7 files changed, 122 insertions(+), 144 deletions(-) delete mode 100644 repo/code-line-numbers/app.css delete mode 100644 repo/code-line-numbers/mod.js create mode 100644 repo/truncated-titles/client.css create mode 100644 repo/truncated-titles/client.mjs create mode 100644 repo/truncated-titles/mod.json diff --git a/repo/code-line-numbers/app.css b/repo/code-line-numbers/app.css deleted file mode 100644 index 8d9eb8b..0000000 --- a/repo/code-line-numbers/app.css +++ /dev/null @@ -1,30 +0,0 @@ -/* - * code line numbers - * (c) 2020 dragonwocky (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; -} diff --git a/repo/code-line-numbers/mod.js b/repo/code-line-numbers/mod.js deleted file mode 100644 index 2d1f94b..0000000 --- a/repo/code-line-numbers/mod.js +++ /dev/null @@ -1,113 +0,0 @@ -/* - * code line numbers - * (c) 2020 dragonwocky (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(''); - - // 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('A'); - 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 = ''; - } - } - }); - }, - }, -}; diff --git a/repo/font-chooser/fonts.css b/repo/font-chooser/fonts.css index d966fe4..e3141ff 100644 --- a/repo/font-chooser/fonts.css +++ b/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 (https://dragonwocky.me/) * (https://notion-enhancer.github.io/) under the MIT license */ diff --git a/repo/registry.json b/repo/registry.json index 58f7a69..ea86b06 100644 --- a/repo/registry.json +++ b/repo/registry.json @@ -30,5 +30,6 @@ "calendar-scroll", "weekly-view", "collapse-properties", + "truncated-titles", "focus-mode" ] diff --git a/repo/truncated-titles/client.css b/repo/truncated-titles/client.css new file mode 100644 index 0000000..531ee5a --- /dev/null +++ b/repo/truncated-titles/client.css @@ -0,0 +1,17 @@ +/* + * notion-enhancer: truncated titles + * (c) 2021 admiraldus (https://github.com/admiraldus) + * (c) 2021 dragonwocky (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; +} diff --git a/repo/truncated-titles/client.mjs b/repo/truncated-titles/client.mjs new file mode 100644 index 0000000..ce98879 --- /dev/null +++ b/repo/truncated-titles/client.mjs @@ -0,0 +1,69 @@ +/* + * notion-enhancer: truncated titles + * (c) 2021 admiraldus (https://github.com/admiraldus) + * (c) 2021 dragonwocky (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`${svgIcon} + ${web.escape($tableTitle.innerText)}`, + 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`, + ]); +} diff --git a/repo/truncated-titles/mod.json b/repo/truncated-titles/mod.json new file mode 100644 index 0000000..846bab8 --- /dev/null +++ b/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 + } + ] +}