owl-admin/doc/工具/浏览器扩展/嘀咚纽森-程序设计文档显示扩展-2024-10-29.user.js

// ==UserScript==
// @name         嘀咚纽森-程序设计文档显示扩展
// @namespace    http://tampermonkey.net/
// @version      2024-10-29
// @description  try to take over the world!
// @author       You
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=0.1
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 添加CSS样式
    const style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `
        g.node:hover {
            cursor: pointer;
            background: gray; /* hover时的背景颜色 */
            fill: green; /* 可以自定义hover时的填充颜色 */
            stroke: darkgreen; /* 可以自定义hover时的边框颜色 */
            stroke-width: 2px; /* 可以自定义hover时的边框宽度 */
        }
    `;
    document.head.appendChild(style);

    // 查找所有符合条件的 <line> 元素
    const lines = document.querySelectorAll('line,path');

    lines.forEach(line => {
        // 获取前一个兄弟元素的文本内容
        const prevElement = line.previousElementSibling;
        if (prevElement && prevElement.tagName.toLowerCase() === 'text') {
            const textElement = prevElement;
            const anchorText = textElement.textContent.trim();
            const anchorLink = window.location.href.split('#')[0] + '#' + encodeURIComponent(anchorText);

            // 为 <text> 元素添加点击事件
            textElement.addEventListener('click', () => {
                window.location.href = anchorLink;
            });

            // 设置鼠标指针样式为手形，颜色为绿色
            textElement.style.cursor = 'pointer';
            textElement.style.fill = 'green';
        }
    });

    // 给所有class为node的g标签增加鼠标可点击的hover样式
    const nodes = document.querySelectorAll('g.node');
    nodes.forEach(node => {
        node.addEventListener('mouseover', () => {
            node.style.fill = 'green'; // hover时的填充颜色
            node.style.stroke = 'darkgreen'; // hover时的边框颜色
            node.style.strokeWidth = '2'; // hover时的边框宽度
        });
        node.addEventListener('mouseout', () => {
            node.style.fill = ''; // 恢复默认填充颜色
            node.style.stroke = ''; // 恢复默认边框颜色
            node.style.strokeWidth = ''; // 恢复默认边框宽度
        });
    });
})();