Notion Fixed TOC

Notion 浮动 TOC

让 Notion 的 TOC 浮动显示。
目前为 2020-07-05 提交的版本。查看最新版本。
Wrap lines
// ==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);
})();
欢迎访问Greasy Fork镜像
