《日·键圈时刻表》目录生成

Ayb爱莹宝《日·键圈时刻表》目录生成
目前为 2024-11-17 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         《日·键圈时刻表》目录生成
// @namespace    http://tampermonkey.net/
// @version      1.9
// @description  Ayb爱莹宝《日·键圈时刻表》目录生成
// @match        https://www.bilibili.com/opus/*
// @grant        none
// @license      MIT

// ==/UserScript==

(function() {
    'use strict';

    // 创建目录容器
    const tocContainer = document.createElement('div');
    tocContainer.style.position = 'fixed';
    tocContainer.style.right = '12px';
    tocContainer.style.top = '12px';
    tocContainer.style.bottom = '12px';
    tocContainer.style.width = '375px';
    tocContainer.style.maxHeight = 'auto';
    tocContainer.style.overflowY = 'auto';
    tocContainer.style.padding = '10px';
    tocContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
    tocContainer.style.border = '0px solid #ccc';
    tocContainer.style.boxShadow = '0 0 0px rgba(0, 0, 0, 0.1)';
    tocContainer.style.zIndex = '10';

    // 添加目录标题
    const tocTitle = document.createElement('h3');
    tocTitle.innerText = '目录';
    tocTitle.style.textAlign = 'center';
    tocTitle.style.marginBottom = '10px';
    tocContainer.appendChild(tocTitle);

    const pTags = document.querySelectorAll('p');
    let isAfterStart = false;

    pTags.forEach((pTag, index) => {
        const strongElements = pTag.querySelectorAll('strong');
        const combinedText = Array.from(strongElements).map(el => el.innerText.trim()).join(' ');

        if (combinedText && strongElements.length > 0) {
            const fontSize = window.getComputedStyle(strongElements[0]).fontSize;

            if (fontSize === '24px') {
                if (isAfterStart || combinedText.includes("置顶区")) {
                    isAfterStart = true;

                    const id = 'toc-header-' + index;
                    pTag.id = id;

                    const tocItem = document.createElement('a');
                    tocItem.href = '#' + id;
                    tocItem.innerText = combinedText;
                    tocItem.style.display = 'block';
                    tocItem.style.color = '#007bff';
                    tocItem.style.textDecoration = 'none';
                    tocItem.style.fontSize = '14px';
                    tocItem.style.marginBottom = '5px';

                    if (combinedText.includes("置顶区") || combinedText.includes("消息区") ||
                        combinedText.includes("日常区") || combinedText.includes("常驻区")) {
                        tocItem.style.fontWeight = 'bold';
                        tocItem.style.color = '#ff4500';
                        tocItem.style.fontSize = '16px';
                    }

                    tocItem.onmouseover = function() {
                        tocItem.style.textDecoration = 'underline';
                    };
                    tocItem.onmouseout = function() {
                        tocItem.style.textDecoration = 'none';
                    };

                    tocContainer.appendChild(tocItem);
                }
            }
        }
    });

    // 单独处理目标元素
    const targetElement = document.querySelector('.bili-tabs__nav__item.is-active');
    if (targetElement) {
        const targetId = 'toc-comments';
        targetElement.id = targetId;

        const targetTocItem = document.createElement('a');
        targetTocItem.href = '#' + targetId;
        targetTocItem.innerText = targetElement.innerText.trim();
        targetTocItem.style.display = 'block';
        targetTocItem.style.color = '#ff4500';
        targetTocItem.style.fontWeight = 'bold';
        targetTocItem.style.textDecoration = 'none';
        targetTocItem.style.fontSize = '16px';
        targetTocItem.style.marginBottom = '5px';

        targetTocItem.onmouseover = function() {
            targetTocItem.style.textDecoration = 'underline';
        };
        targetTocItem.onmouseout = function() {
            targetTocItem.style.textDecoration = 'none';
        };

        tocContainer.appendChild(targetTocItem);
    }

    // 将目录容器添加到页面
    document.body.appendChild(tocContainer);

    // 滚动事件处理逻辑（保持之前功能）
    const elementsToToggle = [
        '.bili-header__bar.mini-header',
        '.fixed-author-header'
    ];

    function handleScroll() {
        const scrollTop = window.scrollY;
        elementsToToggle.forEach(selector => {
            const element = document.querySelector(selector);
            if (element) {
                if (scrollTop === 0) {
                    element.classList.remove('hidden-element');
                } else {
                    element.classList.add('hidden-element');
                }
            }
        });
    }

    const style = document.createElement('style');
    style.innerHTML = `
        .hidden-element {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
    `;
    document.head.appendChild(style);

    window.addEventListener('scroll', handleScroll);
    window.addEventListener('load', handleScroll);
})();
欢迎访问Greasy Fork镜像
