dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-05 05:09:03 +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'],
name: 'outliner',
desc: 'table of contents.',
version: '1.2.0',
version: '1.2.1',
author: 'CloudHill',
options: [
{
@ -35,6 +35,6 @@ module.exports = {
name: "Outline",
icon: "icon.svg",
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');
if (!outline) return;
outline.textContent = '';
if (store().lined) outline.setAttribute('lined', '');
const pageContent = document.querySelector('.notion-page-content');
const headerBlocks = pageContent.querySelectorAll('[class*="header-block"]');
const pageContent = document.querySelector('.notion-page-content'),
headerBlocks = pageContent.querySelectorAll('[class*="header-block"]'),
fragment = new DocumentFragment();
headerBlocks.forEach(header => {
const blockId = header.dataset.blockId.replace(/-/g, '');
const headerEl = header.querySelector('[placeholder]');
const placeholder = headerEl.getAttribute('placeholder');
const blockId = header.dataset.blockId.replace(/-/g, ''),
headerEl = header.querySelector('[placeholder]'),
placeholder = headerEl.getAttribute('placeholder');
const outlineHeader = createElement(`
<div class="outline-header" header-level="${placeholder.slice(-1)}">
@ -100,23 +100,25 @@ module.exports = (store, __exports) => {
`);
header.outline = outlineHeader;
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
outline.append(outlineHeader);
fragment.appendChild(outlineHeader);
})
outline.appendChild(fragment);
}
function updateOutlineHeader(header) {
const headerEl = header.querySelector('[placeholder]') || header;
const headerEl = header.querySelector('[placeholder]');
if (!(
headerEl &&
header.outline &&
header.outline.parentElement
header.outline?.parentElement
)) return findHeaders();
const outlineHeader = header.outline;
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.firstElementChild.setAttribute('outline-placeholder', `Header ${level}`)
}
@ -137,6 +139,11 @@ module.exports = (store, __exports) => {
return {
onLoad() {
if (store().lined) {
const outline = document.querySelector('.outliner');
outline?.setAttribute('lined', '');
}
// Find headers when switching panels
if (document.querySelector('.notion-page-content')) {
startContentObserver();
@ -152,6 +159,3 @@ module.exports = (store, __exports) => {
}
}
}