From 8a1eb811a6bed452a2fac0f12cb4eb20a656dd22 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 19 Oct 2021 21:26:05 +1100 Subject: [PATCH] extension: right-to-left --- repo/indentation-lines/client.css | 4 +- repo/outliner/client.mjs | 85 +++++++++++++++---------------- repo/registry.json | 1 + repo/right-to-left/client.css | 26 ++++++++++ repo/right-to-left/client.mjs | 50 ++++++++++++++++++ repo/right-to-left/mod.json | 22 ++++++++ repo/word-counter/client.mjs | 51 ++++++++++--------- 7 files changed, 169 insertions(+), 70 deletions(-) create mode 100644 repo/right-to-left/client.css create mode 100644 repo/right-to-left/client.mjs create mode 100644 repo/right-to-left/mod.json diff --git a/repo/indentation-lines/client.css b/repo/indentation-lines/client.css index aaef3d0..f4c106e 100644 --- a/repo/indentation-lines/client.css +++ b/repo/indentation-lines/client.css @@ -21,7 +21,7 @@ position: absolute; height: calc(100% - 2em); top: 2em; - left: -14.48px; + margin-inline-start: -14.48px; } .notion-page-content @@ -36,7 +36,7 @@ position: absolute; height: 100%; top: 0; - left: -14.48px; + margin-inline-start: -14.48px; } /* add background to block dragger */ diff --git a/repo/outliner/client.mjs b/repo/outliner/client.mjs index 6f3899d..d856992 100644 --- a/repo/outliner/client.mjs +++ b/repo/outliner/client.mjs @@ -12,7 +12,8 @@ export default async function ({ web, components }, db) { const $headingList = web.html`
`; - let viewFocused = false; + let viewFocused = false, + $page; await components.addPanelView({ id: '87e077cc-5402-451c-ac70-27cc4ae65546', icon: web.html` @@ -27,6 +28,7 @@ export default async function ({ web, components }, db) { $content: web.render(web.html`
`, $notice, $headingList), onFocus: () => { viewFocused = true; + updateHeadings(); }, onBlur: () => { viewFocused = false; @@ -34,53 +36,50 @@ export default async function ({ web, components }, db) { }); await web.whenReady(); - let $page; - const updateHeadings = () => { - if (!$page) return; - const $headerBlocks = $page.querySelectorAll( - '[class^="notion-"][class*="header-block"]' - ), - $fragment = web.html`
`; - let depth = 0, - indent = 0; - for (const $header of $headerBlocks) { - const id = $header.dataset.blockId.replace(/-/g, ''), - placeholder = $header.querySelector('[placeholder]').getAttribute('placeholder'), - headerDepth = +placeholder.at(-1); - if (depth && depth < headerDepth) { - indent += 18; - } else if (depth > headerDepth) { - indent = Math.max(indent - 18, 0); - } - depth = headerDepth; - const $outlineHeader = web.render( - web.html``; + let depth = 0, + indent = 0; + for (const $header of $headerBlocks) { + const id = $header.dataset.blockId.replace(/-/g, ''), + placeholder = $header.querySelector('[placeholder]').getAttribute('placeholder'), + headerDepth = +placeholder.at(-1); + if (depth && depth < headerDepth) { + indent += 18; + } else if (depth > headerDepth) { + indent = Math.max(indent - 18, 0); + } + depth = headerDepth; + const $outlineHeader = web.render( + web.html``, - $header.innerText - ); - $fragment.append($outlineHeader); - } - if ($fragment.innerHTML !== $headingList.innerHTML) { - web.render(web.empty($headingList), ...$fragment.children); - } - }, - pageObserver = () => { - if (!viewFocused) return; - if (document.contains($page)) { + $header.innerText + ); + $fragment.append($outlineHeader); + } + if ($fragment.innerHTML !== $headingList.innerHTML) { + web.render(web.empty($headingList), ...$fragment.children); + } + } + const pageObserver = () => { + if (!viewFocused) return; + if (document.contains($page)) { + updateHeadings(); + } else { + $page = document.getElementsByClassName('notion-page-content')[0]; + if ($page) { + $notice.innerText = pageNoticeText; + $headingList.style.display = ''; updateHeadings(); } else { - $page = document.getElementsByClassName('notion-page-content')[0]; - if ($page) { - $notice.innerText = pageNoticeText; - $headingList.style.display = ''; - updateHeadings(); - } else { - $notice.innerText = dbNoticeText; - $headingList.style.display = 'none'; - } + $notice.innerText = dbNoticeText; + $headingList.style.display = 'none'; } - }; + } + }; web.addDocumentObserver(pageObserver, [ '.notion-header-block', '.notion-sub_header-block', diff --git a/repo/registry.json b/repo/registry.json index 7365710..dfea7ce 100644 --- a/repo/registry.json +++ b/repo/registry.json @@ -21,6 +21,7 @@ "outliner", "scroll-to-top", "indentation-lines", + "right-to-left", "emoji-sets", "bypass-preview", "topbar-icons", diff --git a/repo/right-to-left/client.css b/repo/right-to-left/client.css new file mode 100644 index 0000000..ffe3b32 --- /dev/null +++ b/repo/right-to-left/client.css @@ -0,0 +1,26 @@ +/* + * notion-enhancer: right to left + * (c) 2021 obahareth (https://omar.engineer) + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +.notion-page-content + .notion-table_of_contents-block + > div + > div + > a + > div + > div[style*='margin-left: 24px'] { + margin-inline-start: 24px; +} + +.notion-page-content + .notion-table_of_contents-block + > div + > div + > a + > div + > div[style*='margin-left: 48px'] { + margin-inline-start: 48px; +} diff --git a/repo/right-to-left/client.mjs b/repo/right-to-left/client.mjs new file mode 100644 index 0000000..5ba5ce9 --- /dev/null +++ b/repo/right-to-left/client.mjs @@ -0,0 +1,50 @@ +/* + * notion-enhancer: right to left + * (c) 2021 obahareth (https://omar.engineer) + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +'use strict'; + +export default async function ({ web }, db) { + const pageContentSelector = ` + .notion-page-content > + div[data-block-id]:not([dir]):not(.notion-column_list-block):not(.notion-collection_view_page-block), + [placeholder="Untitled"]:not([dir]), + .notion-column-block > div[data-block-id]:not([dir]), + .notion-collection_view-block:not([dir]), + .notion-table-view:not([dir]), + .notion-board-view:not([dir]), + .notion-gallery-view:not([dir])`, + listItemSelector = ` + div[placeholder="List"]:not([style*="text-align: start"]), + div[placeholder="To-do"]:not([style*="text-align: start"]), + div[placeholder="Toggle"]:not([style*="text-align: start"])`, + inlineEquationSelector = + '.notion-text-equation-token .katex-html:not([style*="direction: rtl;"])'; + + const autoAlignText = () => { + document + .querySelectorAll(pageContentSelector) + .forEach(($block) => $block.setAttribute('dir', 'auto')); + document.querySelectorAll(listItemSelector).forEach(($item) => { + $item.style['text-align'] = 'start'; + }); + document.querySelectorAll(inlineEquationSelector).forEach(($equation) => { + $equation.style.direction = 'rtl'; + $equation.style.display = 'inline-flex'; + $equation.style.flexDirection = 'row-reverse'; + for (const $symbol of $equation.children) { + $symbol.style.direction = 'ltr'; + } + }); + }; + web.addDocumentObserver(autoAlignText, [ + pageContentSelector, + listItemSelector, + inlineEquationSelector, + ]); + await web.whenReady(); + autoAlignText(); +} diff --git a/repo/right-to-left/mod.json b/repo/right-to-left/mod.json new file mode 100644 index 0000000..c82598b --- /dev/null +++ b/repo/right-to-left/mod.json @@ -0,0 +1,22 @@ +{ + "name": "right to left", + "id": "b28ee2b9-4d34-4e36-be8a-ab5be3d79f51", + "version": "1.5.0", + "description": "enables auto rtl/ltr text direction detection..", + "tags": ["extension", "automation"], + "authors": [ + { + "name": "obahareth", + "email": "omar@omar.engineer", + "homepage": "https://omar.engineer", + "avatar": "https://avatars.githubusercontent.com/u/3428118" + } + ], + "js": { + "client": ["client.mjs"] + }, + "css": { + "client": ["client.css"] + }, + "options": [] +} diff --git a/repo/word-counter/client.mjs b/repo/word-counter/client.mjs index 1c15f95..99131ec 100644 --- a/repo/word-counter/client.mjs +++ b/repo/word-counter/client.mjs @@ -72,7 +72,8 @@ export default async function ({ web, components }, db) { components.setTooltip($readingTooltip, '**~ 275 wpm**'); components.setTooltip($speakingTooltip, '**~ 180 wpm**'); - let viewFocused = false; + let viewFocused = false, + $page; await components.addPanelView({ id: 'b99deb52-6955-43d2-a53b-a31540cd19a5', icon: await components.feather('type'), @@ -80,39 +81,39 @@ export default async function ({ web, components }, db) { $content: web.render(web.html`
`, $notice, $statList), onFocus: () => { viewFocused = true; + updateStats(); }, onBlur: () => { viewFocused = false; }, }); - let $page; - const updateStats = () => { - if (!$page) return; - const words = $page.innerText.split(/[^\w]+/).length; - $wordCount.innerText = words; - $characterCount.innerText = $page.innerText.length; - $sentenceCount.innerText = $page.innerText.split('.').length; - $blockCount.innerText = $page.querySelectorAll('[data-block-id]').length; - $readingTime.innerText = humanTime(words / 275); - $speakingTime.innerText = humanTime(words / 180); - }, - pageObserver = () => { - if (!viewFocused) return; - if (document.contains($page)) { + function updateStats() { + if (!$page) return; + const words = $page.innerText.split(/[^\w]+/).length; + $wordCount.innerText = words; + $characterCount.innerText = $page.innerText.length; + $sentenceCount.innerText = $page.innerText.split('.').length; + $blockCount.innerText = $page.querySelectorAll('[data-block-id]').length; + $readingTime.innerText = humanTime(words / 275); + $speakingTime.innerText = humanTime(words / 180); + } + const pageObserver = () => { + if (!viewFocused) return; + if (document.contains($page)) { + updateStats(); + } else { + $page = document.getElementsByClassName('notion-page-content')[0]; + if ($page) { + $notice.innerText = pageNoticeText; + $statList.style.display = ''; updateStats(); } else { - $page = document.getElementsByClassName('notion-page-content')[0]; - if ($page) { - $notice.innerText = pageNoticeText; - $statList.style.display = ''; - updateStats(); - } else { - $notice.innerText = dbNoticeText; - $statList.style.display = 'none'; - } + $notice.innerText = dbNoticeText; + $statList.style.display = 'none'; } - }; + } + }; web.addDocumentObserver(pageObserver, [ '.notion-page-content', '.notion-collection_view_page-block',