mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-06 21:49:03 +00:00
extension: right-to-left
This commit is contained in:
parent
382451156c
commit
8a1eb811a6
@ -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 */
|
||||
|
||||
@ -12,7 +12,8 @@ export default async function ({ web, components }, db) {
|
||||
|
||||
const $headingList = web.html`<div></div>`;
|
||||
|
||||
let viewFocused = false;
|
||||
let viewFocused = false,
|
||||
$page;
|
||||
await components.addPanelView({
|
||||
id: '87e077cc-5402-451c-ac70-27cc4ae65546',
|
||||
icon: web.html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
@ -27,6 +28,7 @@ export default async function ({ web, components }, db) {
|
||||
$content: web.render(web.html`<div></div>`, $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`<div></div>`;
|
||||
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`<a href="#${id}" class="outliner--header"
|
||||
function updateHeadings() {
|
||||
if (!$page) return;
|
||||
const $headerBlocks = $page.querySelectorAll('[class^="notion-"][class*="header-block"]'),
|
||||
$fragment = web.html`<div></div>`;
|
||||
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`<a href="#${id}" class="outliner--header"
|
||||
placeholder="${web.escape(placeholder)}"
|
||||
style="--outliner--indent:${indent}px;"></a>`,
|
||||
$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',
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"outliner",
|
||||
"scroll-to-top",
|
||||
"indentation-lines",
|
||||
"right-to-left",
|
||||
"emoji-sets",
|
||||
"bypass-preview",
|
||||
"topbar-icons",
|
||||
|
||||
26
repo/right-to-left/client.css
Normal file
26
repo/right-to-left/client.css
Normal file
@ -0,0 +1,26 @@
|
||||
/*
|
||||
* notion-enhancer: right to left
|
||||
* (c) 2021 obahareth <omar@omar.engineer> (https://omar.engineer)
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (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;
|
||||
}
|
||||
50
repo/right-to-left/client.mjs
Normal file
50
repo/right-to-left/client.mjs
Normal file
@ -0,0 +1,50 @@
|
||||
/*
|
||||
* notion-enhancer: right to left
|
||||
* (c) 2021 obahareth <omar@omar.engineer> (https://omar.engineer)
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (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();
|
||||
}
|
||||
22
repo/right-to-left/mod.json
Normal file
22
repo/right-to-left/mod.json
Normal file
@ -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": []
|
||||
}
|
||||
@ -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`<div></div>`, $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',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user