dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-05 21:29:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

outliner optimizations, making use of fragments

Browse Source
This commit is contained in:
CloudHill 2020-12-11 16:59:15 +07:00
parent 31c43fdded
commit 3f48fa42ab
2 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
mods/outliner/mod.js
View File

@ -14,7 +14,7 @@ module.exports = {
tags: ['extension', 'panel'], tags: ['extension', 'panel'],
name: 'outliner', name: 'outliner',
desc: 'table of contents.', desc: 'table of contents.',
version: '1.2.0', version: '1.2.1',
author: 'CloudHill', author: 'CloudHill',
options: [ options: [
{ {
@ -35,6 +35,6 @@ module.exports = {
name: "Outline", name: "Outline",
icon: "icon.svg", icon: "icon.svg",
js: "panel.js", js: "panel.js",
fullHeight: store('87e077cc-5402-451c-ac70-27cc4ae65546').fullHeight fullHeight: store('87e077cc-5402-451c-ac70-27cc4ae65546').fullHeight,
} }
}; };

36
mods/outliner/panel.js
View File

@ -82,15 +82,15 @@ module.exports = (store, __exports) => {
const outline = document.querySelector('.outliner'); const outline = document.querySelector('.outliner');
if (!outline) return; if (!outline) return;
outline.textContent = ''; outline.textContent = '';
if (store().lined) outline.setAttribute('lined', '');
const pageContent = document.querySelector('.notion-page-content'); const pageContent = document.querySelector('.notion-page-content'),
const headerBlocks = pageContent.querySelectorAll('[class*="header-block"]'); headerBlocks = pageContent.querySelectorAll('[class*="header-block"]'),
fragment = new DocumentFragment();
headerBlocks.forEach(header => { headerBlocks.forEach(header => {
const blockId = header.dataset.blockId.replace(/-/g, ''); const blockId = header.dataset.blockId.replace(/-/g, ''),
const headerEl = header.querySelector('[placeholder]'); headerEl = header.querySelector('[placeholder]'),
const placeholder = headerEl.getAttribute('placeholder'); placeholder = headerEl.getAttribute('placeholder');
const outlineHeader = createElement(` const outlineHeader = createElement(`
<div class="outline-header" header-level="${placeholder.slice(-1)}"> <div class="outline-header" header-level="${placeholder.slice(-1)}">
@ -100,23 +100,25 @@ module.exports = (store, __exports) => {
`); `);
header.outline = outlineHeader; header.outline = outlineHeader;
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML; outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
outline.append(outlineHeader);
fragment.appendChild(outlineHeader);
}) })
outline.appendChild(fragment);
} }
function updateOutlineHeader(header) { function updateOutlineHeader(header) {
const headerEl = header.querySelector('[placeholder]') || header; const headerEl = header.querySelector('[placeholder]');
if (!( if (!(
headerEl && headerEl &&
header.outline && header.outline?.parentElement
header.outline.parentElement
)) return findHeaders(); )) return findHeaders();
const outlineHeader = header.outline; const outlineHeader = header.outline;
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML; outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
updateOutlineLevel(outlineHeader, headerEl.getAttribute('placeholder').slice(-1)); setOutlineLevel(outlineHeader, headerEl.getAttribute('placeholder').slice(-1));
} }
function updateOutlineLevel(outlineHeader, level) { function setOutlineLevel(outlineHeader, level) {
outlineHeader.setAttribute('header-level', level); outlineHeader.setAttribute('header-level', level);
outlineHeader.firstElementChild.setAttribute('outline-placeholder', `Header ${level}`) outlineHeader.firstElementChild.setAttribute('outline-placeholder', `Header ${level}`)
} }
@ -137,6 +139,11 @@ module.exports = (store, __exports) => {
return { return {
onLoad() { onLoad() {
if (store().lined) {
const outline = document.querySelector('.outliner');
outline?.setAttribute('lined', '');
}
// Find headers when switching panels // Find headers when switching panels
if (document.querySelector('.notion-page-content')) { if (document.querySelector('.notion-page-content')) {
startContentObserver(); startContentObserver();
@ -152,6 +159,3 @@ module.exports = (store, __exports) => {
} }
} }
} }