☰

Confluence Floating TOC

在 Confluence 文章页面上浮动展示文章目录，并支持展开和折叠功能，自动适应暗色/亮色模式

  1. // ==UserScript==
  2. // @name         Confluence Floating TOC
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.6
  5. // @description  在 Confluence 文章页面上浮动展示文章目录，并支持展开和折叠功能，自动适应暗色/亮色模式
  6. // @author       mkdir700
  7. // @match        https://*.atlassian.net/wiki/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12.  
  13. // 递归处理已有的 TOC，重新生成新的 TOC
  14. function genertateTOCFromExistingToc(toc) {
  15.     if (toc.textContent === '') {
  16.         return;
  17.     }
  18.     let currUl = document.createElement('ul');
  19.     currUl.id = 'floating-toc-ul';
  20.     for (let i = 0; i < toc.children.length; i++) {
  21.         // li > span > a
  22.         var a = toc.children[i].querySelector('span > a');
  23.         var headerTextElement = toc.children[i].querySelector('span > a > span > span');
  24.         if (!headerTextElement) {
  25.             continue;
  26.         }
  27.  
  28.         var headerText = headerTextElement.textContent;
  29.  
  30.         // 创建目录项
  31.         var tocItem = document.createElement('li');
  32.  
  33.         // 创建链接
  34.         var tocLink = document.createElement('a');
  35.         tocLink.textContent = headerText;
  36.  
  37.         // 使用标题的 id 作为 URL 片段
  38.         // 标题中的空格需要替换为 -，并且转为小写
  39.         tocLink.href = a.href;
  40.         tocItem.appendChild(tocLink);
  41.  
  42.         // 如果有子目录，递归处理
  43.         var childUl = toc.children[i].querySelector('ul');
  44.         if (childUl) {
  45.             var newUl = genertateTOCFromExistingToc(childUl);
  46.             if (newUl) {
  47.                 tocItem.appendChild(newUl);
  48.             }
  49.         }
  50.         currUl.appendChild(tocItem);
  51.     }
  52.  
  53.     return currUl;
  54. }
  55.  
  56.  
  57. function getExistingToc() {
  58.     return document.querySelector('[data-testid="list-style-toc-level-container"]');
  59. }
  60.  
  61. function generateTOCFormPage() {
  62.     // 创建目录列表
  63.     var tocList = document.createElement('ul');
  64.     tocList.id = 'floating-toc-ul';
  65.     // 获取所有标题
  66.     var headers = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
  67.     headers.forEach(function (header) {
  68.         // 过滤掉 id 为空的标题
  69.         if (header.textContent === '') {
  70.             return;
  71.         }
  72.         // 检查是否有属性 data-item-title
  73.         if (header.hasAttribute('data-item-title')) {
  74.             return;
  75.         }
  76.         // 检查属性 data-testid 是否等于 title-text
  77.         if (header.getAttribute('data-testid') === 'title-text') {
  78.             return;
  79.         }
  80.         if (header.id === 'floating-toc-title') {
  81.             return;
  82.         }
  83.         // class 为 'cc-te0214' 的标题不需要显示在目录中
  84.         if (header.className === 'cc-te0214') {
  85.             return;
  86.         }
  87.         // 排除特定的 h2 标签
  88.         if (header.tagName === 'H2' && header.closest('[data-vc="end-of-page-recommendation-component"]')) {
  89.             return;
  90.         }
  91.         // 排除 "快速入门" 标题
  92.         if (header.closest('[data-test-id="onboarding-quickstart-experience"]')) {
  93.             return;
  94.         }
  95.  
  96.         if (header.closest('[data-test-id="flag-visibility-wrapper"]')) {
  97.             return;
  98.         }
  99.  
  100.         if (header.tagName === 'H2' && header.closest('[class="atlaskit-portal-container"]')) {
  101.             return;
  102.         }
  103.  
  104.         // 创建目录项
  105.         var tocItem = document.createElement('li');
  106.         tocItem.style.marginLeft = (parseInt(header.tagName[1]) - 1) * 10 + 'px'; // 根据标题级别缩进
  107.  
  108.         // 创建链接
  109.         var tocLink = document.createElement('a');
  110.         tocLink.textContent = header.textContent;
  111.  
  112.         // 使用标题作为 URL 片段
  113.         tocLink.href = '#' + header.textContent.replace(/\s/g, '-');
  114.         tocItem.appendChild(tocLink);
  115.  
  116.         // 将目录项添加到目录列表中
  117.         tocList.appendChild(tocItem);
  118.     });
  119.  
  120.     return tocList;
  121. }
  122.  
  123. function buildToggleButton() {
  124.     // 检查当前颜色模式
  125.     const isDarkMode = document.documentElement.getAttribute('data-color-mode') === 'dark' || 
  126.                        (document.documentElement.getAttribute('data-color-mode') === 'light' && 
  127.                         document.documentElement.getAttribute('data-theme') && 
  128.                         document.documentElement.getAttribute('data-theme').includes('light:dark'));
  129.     
  130.     var toggleButton = document.createElement('div');
  131.     toggleButton.id = 'floating-toc-toggle';
  132.     toggleButton.innerHTML = '&#9654;'; // 右箭头 Unicode 字符
  133.     toggleButton.style.position = 'fixed';
  134.     toggleButton.style.top = '200px';
  135.     toggleButton.style.right = '0';
  136.     toggleButton.style.backgroundColor = isDarkMode ? '#4688ec' : '#007bff';
  137.     toggleButton.style.color = '#fff';
  138.     toggleButton.style.width = '20px';
  139.     toggleButton.style.height = '40px';
  140.     toggleButton.style.display = 'flex';
  141.     toggleButton.style.justifyContent = 'center';
  142.     toggleButton.style.alignItems = 'center';
  143.     toggleButton.style.cursor = 'pointer';
  144.     toggleButton.style.userSelect = 'none';
  145.     toggleButton.style.borderRadius = '5px 0 0 5px';
  146.     toggleButton.style.zIndex = '1000';
  147.     toggleButton.style.transition = 'all 0.3s ease-in-out';
  148.     toggleButton.style.fontSize = '14px';
  149.  
  150.     var isCollapsed = false;
  151.     toggleButton.addEventListener('click', function () {
  152.         var tocContainer = document.getElementById('floating-toc-container');
  153.         if (isCollapsed) {
  154.             tocContainer.style.right = '0';
  155.             toggleButton.innerHTML = '&#9654;'; // 右箭头
  156.             toggleButton.style.right = '220px'; // 调整按钮位置
  157.         } else {
  158.             tocContainer.style.right = '-220px'; // 完全隐藏目录
  159.             toggleButton.innerHTML = '&#9664;'; // 左箭头
  160.             toggleButton.style.right = '-10px';
  161.         }
  162.         isCollapsed = !isCollapsed;
  163.     });
  164.  
  165.     toggleButton.addEventListener('mouseenter', function() {
  166.         if (isCollapsed) {
  167.             toggleButton.style.right = '0';
  168.         }
  169.     });
  170.  
  171.     toggleButton.addEventListener('mouseleave', function() {
  172.         if (isCollapsed) {
  173.             toggleButton.style.right = '-10px';
  174.         }
  175.     });
  176.  
  177.     return toggleButton;
  178. }
  179.  
  180.  
  181. function buildToc() {
  182.     // 检查当前颜色模式
  183.     const isDarkMode = document.documentElement.getAttribute('data-color-mode') === 'dark' || 
  184.                        (document.documentElement.getAttribute('data-color-mode') === 'light' && 
  185.                         document.documentElement.getAttribute('data-theme') && 
  186.                         document.documentElement.getAttribute('data-theme').includes('light:dark'));
  187.     
  188.     var tocContainer = document.createElement('div');
  189.     tocContainer.id = 'floating-toc-container';
  190.     tocContainer.style.width = '220px'; // 增加宽度以包含padding
  191.     tocContainer.style.backgroundColor = isDarkMode ? '#2c2c2e' : '#fff';
  192.     tocContainer.style.border = isDarkMode ? '1px solid #444' : '1px solid #ccc';
  193.     tocContainer.style.padding = '10px';
  194.     tocContainer.style.boxSizing = 'border-box'; // 确保padding包含在宽度内
  195.     tocContainer.style.boxShadow = isDarkMode ? '0 0 10px rgba(0,0,0,0.3)' : '0 0 10px rgba(0,0,0,0.1)';
  196.     tocContainer.style.position = 'fixed';
  197.     tocContainer.style.top = '200px';
  198.     tocContainer.style.right = '0';
  199.     tocContainer.style.maxHeight = 'calc(100vh - 300px)';
  200.     tocContainer.style.overflowY = 'auto';
  201.     tocContainer.style.transition = 'right 0.3s ease-in-out';
  202.     tocContainer.style.zIndex = '999';
  203.     tocContainer.style.scrollbarWidth = 'none';
  204.     tocContainer.style.msOverflowStyle = 'none';
  205.  
  206.     var style = document.createElement('style');
  207.     style.textContent = `
  208.         #floating-toc-container::-webkit-scrollbar {
  209.             display: none;
  210.         }
  211.     `;
  212.     document.head.appendChild(style);
  213.  
  214.     var tocTitle = document.createElement('div');
  215.     tocTitle.textContent = '目录';
  216.     tocTitle.style.marginTop = '0';
  217.     tocTitle.style.marginBottom = '10px';
  218.     tocTitle.style.textAlign = 'center';
  219.     tocTitle.style.fontSize = '16px';
  220.     tocTitle.style.fontWeight = 'bold';
  221.     tocTitle.style.color = isDarkMode ? '#bfc1c4' : '#000';
  222.     tocContainer.appendChild(tocTitle);
  223.  
  224.     return tocContainer;
  225. }
  226.  
  227. function generateTOC() {
  228.     // var existingTOC = getExistingToc();
  229.     // var toc;
  230.  
  231.     // if (existingTOC) {
  232.         // toc = genertateTOCFromExistingToc(existingTOC);
  233.     // } else {
  234.         // toc = generateTOCFormPage();
  235.     // }
  236.     var toc = generateTOCFormPage();
  237.  
  238.     if (!toc || toc.children.length === 0) {
  239.         var emptyMessage = document.createElement('div');
  240.         emptyMessage.id = 'floating-toc-empty-message';
  241.         emptyMessage.textContent = '当前页面没有可用的目录内容';
  242.         emptyMessage.style.color = '#666';
  243.         emptyMessage.style.fontStyle = 'italic';
  244.         emptyMessage.style.textAlign = 'center';
  245.         emptyMessage.style.padding = '20px 0';
  246.         return emptyMessage;
  247.     }
  248.  
  249.     toc.style.listStyle = 'none';
  250.     toc.style.padding = '0';
  251.     toc.style.margin = '0';
  252.  
  253.     // 检查当前颜色模式
  254.     const isDarkMode = document.documentElement.getAttribute('data-color-mode') === 'dark' || 
  255.                        (document.documentElement.getAttribute('data-color-mode') === 'light' && 
  256.                         document.documentElement.getAttribute('data-theme') && 
  257.                         document.documentElement.getAttribute('data-theme').includes('light:dark'));
  258.  
  259.     // 优化目录列表样式
  260.     var listItems = toc.querySelectorAll('li');
  261.     listItems.forEach(function(item, index) {
  262.         item.style.marginBottom = '5px';
  263.         var link = item.querySelector('a');
  264.         if (link) {
  265.             link.style.textDecoration = 'none';
  266.             link.style.color = isDarkMode ? '#a9abaf' : '#333';
  267.             link.style.display = 'block';
  268.             link.style.padding = '3px 5px';
  269.             link.style.borderRadius = '3px';
  270.             link.style.transition = 'background-color 0.2s';
  271.             link.style.whiteSpace = 'nowrap';
  272.             link.style.overflow = 'hidden';
  273.             link.style.textOverflow = 'ellipsis';
  274.             link.style.maxWidth = '180px';  // 减小最大宽度
  275.  
  276.             // 设置标题完整内容为title属性
  277.             link.title = link.textContent;
  278.  
  279.             // 截断长标题
  280.             if (link.textContent.length > 25) {
  281.                 link.textContent = link.textContent.substring(0, 22) + '...';
  282.             }
  283.  
  284.             // 根据颜色模式设置悬停效果
  285.             const hoverBgColor = isDarkMode ? '#3a3a3c' : '#f0f0f0';
  286.             link.addEventListener('mouseover', function() {
  287.                 this.style.backgroundColor = hoverBgColor;
  288.             });
  289.             link.addEventListener('mouseout', function() {
  290.                 this.style.backgroundColor = 'transparent';
  291.             });
  292.  
  293.             // 优化缩进
  294.             var level = parseInt(item.style.marginLeft) / 10;
  295.             item.style.paddingLeft = (level * 15) + 'px';  // 使用 padding 代替 margin
  296.             item.style.marginLeft = '0';  // 移除左边距
  297.  
  298.             // 为第三级及以下的标题添加折叠功能
  299.             if (level > 2) {
  300.                 item.style.display = 'none';
  301.                 var parentLi = item.parentElement.closest('li');
  302.                 if (parentLi && !parentLi.classList.contains('has-submenu')) {
  303.                     parentLi.classList.add('has-submenu');
  304.                     var toggleBtn = document.createElement('span');
  305.                     toggleBtn.textContent = '▶';
  306.                     toggleBtn.style.cursor = 'pointer';
  307.                     toggleBtn.style.marginRight = '5px';
  308.                     toggleBtn.style.fontSize = '10px';  // 减小箭头大小
  309.                     toggleBtn.style.color = isDarkMode ? '#a9abaf' : '#333'; // 根据颜色模式设置颜色
  310.                     parentLi.insertBefore(toggleBtn, parentLi.firstChild);
  311.  
  312.                     toggleBtn.addEventListener('click', function(e) {
  313.                         e.stopPropagation();  // 防止点击事件冒泡
  314.                         var subItems = this.parentElement.querySelectorAll('li');
  315.                         subItems.forEach(function(subItem) {
  316.                             subItem.style.display = subItem.style.display === 'none' ? 'block' : 'none';
  317.                         });
  318.                         this.textContent = this.textContent === '▶' ? '▼' : '▶';
  319.                     });
  320.                 }
  321.             }
  322.         }
  323.     });
  324.  
  325.     // 添加平滑滚动
  326.     toc.style.scrollBehavior = 'smooth';
  327.  
  328.     return toc;
  329. }
  330.  
  331. function updateMaxHeight(tocContainer) {
  332.     const viewportHeight = window.innerHeight;
  333.     const topOffset = parseFloat(tocContainer.style.top);
  334.     tocContainer.style.maxHeight = (viewportHeight - topOffset - 20) + 'px'; // 20px 为一些额外的间距
  335. }
  336.  
  337. // 检测 Confluence 页面的颜色模式并相应地调整插件样式
  338. function detectColorModeAndApplyStyles() {
  339.     // 检查 HTML 元素的 data-color-mode 属性
  340.     const isDarkMode = document.documentElement.getAttribute('data-color-mode') === 'dark' || 
  341.                        (document.documentElement.getAttribute('data-color-mode') === 'light' && 
  342.                         document.documentElement.getAttribute('data-theme') && 
  343.                         document.documentElement.getAttribute('data-theme').includes('light:dark'));
  344.     
  345.     // 获取插件元素
  346.     const tocContainer = document.getElementById('floating-toc-container');
  347.     const toggleButton = document.getElementById('floating-toc-toggle');
  348.     const backToTopButton = document.getElementById('back-to-top-button');
  349.     
  350.     if (isDarkMode) {
  351.         // 暗色模式样式
  352.         if (tocContainer) {
  353.             tocContainer.style.backgroundColor = '#2c2c2e'; // 深色背景
  354.             tocContainer.style.border = '1px solid #444';
  355.             tocContainer.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
  356.             
  357.             // 修改目录标题和链接颜色
  358.             const tocTitle = tocContainer.querySelector('div');
  359.             if (tocTitle) {
  360.                 tocTitle.style.color = '#bfc1c4'; // 使用 --ds-text 变量值
  361.             }
  362.             
  363.             // 修改所有链接颜色
  364.             const links = tocContainer.querySelectorAll('a');
  365.             links.forEach(link => {
  366.                 link.style.color = '#a9abaf'; // 使用 --ds-text-subtle 变量值
  367.                 
  368.                 // 修改鼠标悬停效果
  369.                 link.addEventListener('mouseover', function() {
  370.                     this.style.backgroundColor = '#3a3a3c';
  371.                 });
  372.                 link.addEventListener('mouseout', function() {
  373.                     this.style.backgroundColor = 'transparent';
  374.                 });
  375.             });
  376.         }
  377.         
  378.         if (toggleButton) {
  379.             toggleButton.style.backgroundColor = '#4688ec'; // 使用 --ds-icon-accent-blue 变量值
  380.         }
  381.         
  382.         if (backToTopButton) {
  383.             backToTopButton.style.backgroundColor = '#4688ec'; // 使用 --ds-icon-accent-blue 变量值
  384.         }
  385.     } else {
  386.         // 亮色模式样式（恢复默认）
  387.         if (tocContainer) {
  388.             tocContainer.style.backgroundColor = '#fff';
  389.             tocContainer.style.border = '1px solid #ccc';
  390.             tocContainer.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';
  391.             
  392.             // 恢复目录标题颜色
  393.             const tocTitle = tocContainer.querySelector('div');
  394.             if (tocTitle) {
  395.                 tocTitle.style.color = '#000';
  396.             }
  397.             
  398.             // 恢复所有链接颜色
  399.             const links = tocContainer.querySelectorAll('a');
  400.             links.forEach(link => {
  401.                 link.style.color = '#333';
  402.                 
  403.                 // 恢复鼠标悬停效果
  404.                 link.addEventListener('mouseover', function() {
  405.                     this.style.backgroundColor = '#f0f0f0';
  406.                 });
  407.                 link.addEventListener('mouseout', function() {
  408.                     this.style.backgroundColor = 'transparent';
  409.                 });
  410.             });
  411.         }
  412.         
  413.         if (toggleButton) {
  414.             toggleButton.style.backgroundColor = '#007bff';
  415.         }
  416.         
  417.         if (backToTopButton) {
  418.             backToTopButton.style.backgroundColor = '#007bff';
  419.         }
  420.     }
  421. }
  422.  
  423. function buildBackToTopButton() {
  424.     // 检查当前颜色模式
  425.     const isDarkMode = document.documentElement.getAttribute('data-color-mode') === 'dark' || 
  426.                        (document.documentElement.getAttribute('data-color-mode') === 'light' && 
  427.                         document.documentElement.getAttribute('data-theme') && 
  428.                         document.documentElement.getAttribute('data-theme').includes('light:dark'));
  429.     
  430.     var backToTopButton = document.createElement('div');
  431.     backToTopButton.id = 'back-to-top-button';
  432.     backToTopButton.innerHTML = '&#9650;'; // 上箭头 Unicode 字符
  433.     backToTopButton.style.position = 'fixed';
  434.     backToTopButton.style.bottom = '30px';
  435.     backToTopButton.style.right = '220px'; // 调整位置，使其位于目录左侧
  436.     backToTopButton.style.backgroundColor = isDarkMode ? '#4688ec' : '#007bff';
  437.     backToTopButton.style.color = '#fff';
  438.     backToTopButton.style.width = '40px';
  439.     backToTopButton.style.height = '40px';
  440.     backToTopButton.style.borderRadius = '50%';
  441.     backToTopButton.style.display = 'flex';
  442.     backToTopButton.style.justifyContent = 'center';
  443.     backToTopButton.style.alignItems = 'center';
  444.     backToTopButton.style.cursor = 'pointer';
  445.     backToTopButton.style.fontSize = '20px';
  446.     backToTopButton.style.boxShadow = isDarkMode ? '0 2px 5px rgba(0,0,0,0.3)' : '0 2px 5px rgba(0,0,0,0.2)';
  447.     backToTopButton.style.transition = 'opacity 0.3s';
  448.     backToTopButton.style.opacity = '0';
  449.     backToTopButton.style.zIndex = '1000';
  450.  
  451.     backToTopButton.addEventListener('click', function() {
  452.         window.scrollTo({top: 0, behavior: 'smooth'});
  453.     });
  454.  
  455.     window.addEventListener('scroll', function() {
  456.         if (window.pageYOffset > 100) {
  457.             backToTopButton.style.opacity = '1';
  458.         } else {
  459.             backToTopButton.style.opacity = '0';
  460.         }
  461.     });
  462.  
  463.     return backToTopButton;
  464. }
  465.  
  466.  
  467. (function () {
  468.     'use strict';
  469.  
  470.     var tocContainer = buildToc();
  471.     document.body.appendChild(tocContainer);
  472.  
  473.     var toggleButton = buildToggleButton();
  474.     document.body.appendChild(toggleButton);
  475.  
  476.     // 初始化按钮位置
  477.     toggleButton.style.right = '220px';
  478.  
  479.     var backToTopButton = buildBackToTopButton();
  480.     document.body.appendChild(backToTopButton);
  481.  
  482.     function updateTOC() {
  483.         var existingContent = document.getElementById('floating-toc-ul') || document.getElementById('floating-toc-empty-message');
  484.         if (existingContent) {
  485.             existingContent.remove();
  486.         }
  487.  
  488.         var newContent = generateTOC();
  489.         tocContainer.appendChild(newContent);
  490.     }
  491.  
  492.     // 使用防抖函数来限制更新频率
  493.     function debounce(func, wait) {
  494.         let timeout;
  495.         return function executedFunction(...args) {
  496.             const later = () => {
  497.                 clearTimeout(timeout);
  498.                 func(...args);
  499.             };
  500.             clearTimeout(timeout);
  501.             timeout = setTimeout(later, wait);
  502.         };
  503.     }
  504.  
  505.     // 防抖处理的更新函数
  506.     const debouncedUpdateTOC = debounce(updateTOC, 300);
  507.  
  508.     // 初始化目录
  509.     updateTOC();
  510.  
  511.     // 监听 URL 变化
  512.     var lastUrl = location.href;
  513.     new MutationObserver(() => {
  514.         const url = location.href;
  515.         if (url !== lastUrl) {
  516.             lastUrl = url;
  517.             setTimeout(updateTOC, 1000); // 延迟 1 秒更新目录，确保页面内容已加载
  518.         }
  519.     }).observe(document, {subtree: true, childList: true});
  520.  
  521.     // 监听页面内容变化，包括编辑状态下的变化
  522.     var contentObserver = new MutationObserver(function(mutations) {
  523.         let shouldUpdate = false;
  524.         mutations.forEach(function(mutation) {
  525.             if (mutation.type === 'childList') {
  526.                 // 检查是否有新的标题元素被添加或删除
  527.                 mutation.addedNodes.forEach(function(node) {
  528.                     if (node.nodeType === 1 && /^H[1-6]$/i.test(node.tagName)) {
  529.                         shouldUpdate = true;
  530.                     }
  531.                 });
  532.                 mutation.removedNodes.forEach(function(node) {
  533.                     if (node.nodeType === 1 && /^H[1-6]$/i.test(node.tagName)) {
  534.                         shouldUpdate = true;
  535.                     }
  536.                 });
  537.             } else if (mutation.type === 'characterData') {
  538.                 // 检查文本内容的变化
  539.                 let node = mutation.target.parentNode;
  540.                 while (node && node !== document.body) {
  541.                     if (/^H[1-6]$/i.test(node.tagName)) {
  542.                         shouldUpdate = true;
  543.                         break;
  544.                     }
  545.                     node = node.parentNode;
  546.                 }
  547.             }
  548.         });
  549.  
  550.         if (shouldUpdate) {
  551.             debouncedUpdateTOC();
  552.         }
  553.     });
  554.  
  555.     contentObserver.observe(document.body, {
  556.         childList: true,
  557.         subtree: true,
  558.         characterData: true
  559.     });
  560.  
  561.     // 检测颜色模式并应用样式
  562.     detectColorModeAndApplyStyles();
  563.  
  564.     // 监听颜色模式变化
  565.     const colorModeObserver = new MutationObserver(function(mutations) {
  566.         mutations.forEach(function(mutation) {
  567.             if (mutation.type === 'attributes' && 
  568.                 (mutation.attributeName === 'data-color-mode' || mutation.attributeName === 'data-theme')) {
  569.                 detectColorModeAndApplyStyles();
  570.             }
  571.         });
  572.     });
  573.  
  574.     colorModeObserver.observe(document.documentElement, {
  575.         attributes: true,
  576.         attributeFilter: ['data-color-mode', 'data-theme']
  577.     });
  578.  
  579.     // ... 其他现有代码 ...
  580. })();