☰

Notion Column TOC

Make notions's Toc float on right bottom place

  1. // ==UserScript==
  2. // @name         Notion Column TOC
  3. // @namespace    http://playeruu.com
  4. // @version      0.3
  5. // @description  Make notions's Toc float on right bottom place
  6. // @author       arronKler
  7. // @match        https://www.notion.so/*
  8. // @icon         https://www.google.com/s2/favicons?domain=notion.so
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Your code here...
  17.     function createMenuBtn() {
  18.         let circle = document.createElement('div');
  19.         circle.id = 'menu-circle'
  20.         circle.style.fontSize = '12px'
  21.         circle.style.width = "36px";
  22.         circle.style.height = "36px";
  23.         circle.style.lineHeight = '36px';
  24.         circle.style.backgroundColor = '#fff';
  25.         circle.style.borderRadius = "50%";
  26.         circle.style.boxShadow = '0 0 5px 0 #aaa';
  27.         circle.style.position = 'absolute';
  28.         circle.style.bottom = '100px';
  29.         circle.style.right = '31px';
  30.         circle.style.zIndex = '101';
  31.         circle.style.textAlign = 'center'
  32.         circle.style.cursor = 'pointer'
  33.  
  34.         circle.appendChild(document.createTextNode('Menu'))
  35.  
  36.         circle.onclick = () => {
  37.             const block = document.querySelector('#menu-circle >.notion-table_of_contents-block')
  38.  
  39.             const display = block.style.display
  40.             if (display === 'block') {
  41.                 block.style.display = 'none'
  42.             } else {
  43.                 block.style.display = 'block'
  44.             }
  45.         }
  46.  
  47.  
  48.         return circle
  49.     }
  50.  
  51.     function appendMenu(parent) {
  52.         setTimeout(() => {
  53.             const toc = document.querySelector('.notion-table_of_contents-block');
  54.  
  55.             if (toc) {
  56.                 toc.style.maxWidth = 'auto';
  57.                 toc.style.position = 'absolute';
  58.                 toc.style.bottom = '0';
  59.                 toc.style.right = '60px';
  60.                 toc.style.overflowY = 'scroll';
  61.                 toc.style.maxHeight = '50vh';
  62.                 toc.style.width = 'auto';
  63.                 toc.style.backgroundColor = '#fff';
  64.                 toc.style.boxShadow = '0 0 5px 0 #aaa';
  65.                 toc.style.padding = '10px';
  66.                 toc.style.display = 'block';
  67.                 console.log('toc appended')
  68.  
  69.                 parent.appendChild(toc)
  70.             } else {
  71.                 appendMenu(parent)
  72.             }
  73.         }, 500)
  74.     }
  75.  
  76.  
  77.     let menuBtn = null
  78.     const observer = new MutationObserver(() => {
  79.         const helpBtn = document.querySelector('.notion-help-button')
  80.  
  81.         if (helpBtn && menuBtn === null) {
  82.             console.log('append menu')
  83.             menuBtn = createMenuBtn()
  84.             helpBtn.parentNode.insertBefore(menuBtn, helpBtn)
  85.             appendMenu(menuBtn)
  86.         }
  87.     });
  88.  
  89.     let notionApp = document.getElementById('notion-app');
  90.     const config = { childList: true, subtree: true };
  91.     observer.observe(notionApp, config);
  92.  
  93.     /*
  94.     setTimeout(() => {
  95.         const menuBtn = createMenuBtn()
  96.         const helpBtn = document.querySelector('.notion-help-button')
  97.         if (helpBtn) {
  98.             helpBtn.parentNode.insertBefore(menuBtn, helpBtn)
  99.         }
  100.  
  101.         appendMenu(menuBtn)
  102.         console.log('help', helpBtn)
  103.     }, 1000)
  104. */
  105.  
  106. })();