Make Notion TOC Fixed.
От
// ==UserScript==
// @name Notion Fixed TOC
// @name:zh-CN Notion 浮动 TOC
// @namespace https://notion.cx/
// @version 0.1.0
// @description Make Notion TOC Fixed.
// @description:zh-cn 让 Notion 的 TOC 浮动显示。
// @author Ruter Lü
// @match https://www.notion.so/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
/* Helper function to wait for the element ready */
const waitFor = (...selectors) => new Promise(resolve => {
const delay = 500;
const f = () => {
const elements = selectors.map(selector => document.querySelector(selector));
if (elements.every(element => element != null)) {
resolve(elements);
} else {
setTimeout(f, delay);
}
}
f();
});
/* Helper function to wait for the element ready */
// If flag is true, that means should make TOC fixed.
var flag = true;
let oldHref = '';
let callback = function(mutations) {
if (oldHref != document.location.href) {
oldHref = document.location.href;
waitFor('.notion-table_of_contents-block').then(([el]) => {
document.querySelector('.notion-frame .notion-scroller').addEventListener('scroll', function (e) {
const toc = document.querySelector('.notion-table_of_contents-block');
if (toc) {
const toc_p = toc.parentElement;
if (!toc_p.classList.contains('notion-column-block')) {
return;
}
const toc_p_p = toc_p.parentElement;
const rect = toc_p_p.getBoundingClientRect();
if (rect.top <= 45) {
if (flag) {
flag = !flag;
toc_p_p.style.position = 'relative';
toc_p.style.position = 'fixed';
toc_p.style.top = '45px';
}
} else {
if (!flag) {
flag = !flag;
}
toc_p_p.style.position = null;
toc_p.style.position = null;
toc_p.style.top = null;
}
}
});
});
}
};
const observer = new MutationObserver(callback);
let notionApp = document.getElementById('notion-app');
const config = { childList: true, subtree: true };
observer.observe(notionApp, config);
})();