mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-06 21:49:03 +00:00
extension: truncated titles
This commit is contained in:
parent
b294964b26
commit
b1ced4fac8
@ -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;
|
||||
}
|
||||
@ -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 = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -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
|
||||
*/
|
||||
|
||||
@ -30,5 +30,6 @@
|
||||
"calendar-scroll",
|
||||
"weekly-view",
|
||||
"collapse-properties",
|
||||
"truncated-titles",
|
||||
"focus-mode"
|
||||
]
|
||||
|
||||
17
repo/truncated-titles/client.css
Normal file
17
repo/truncated-titles/client.css
Normal file
@ -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;
|
||||
}
|
||||
69
repo/truncated-titles/client.mjs
Normal file
69
repo/truncated-titles/client.mjs
Normal file
@ -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`,
|
||||
]);
|
||||
}
|
||||
34
repo/truncated-titles/mod.json
Normal file
34
repo/truncated-titles/mod.json
Normal file
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user