☰

让 Flowus 多维表单元格显示颜色

当单元格的内容是 #AABBCC 这样的颜色值时，给单元格背景上色！

目前为 2022-07-03 提交的版本。查看 最新版本。

// ==UserScript==
// @name         让 Flowus 多维表单元格显示颜色
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  当单元格的内容是 #AABBCC 这样的颜色值时，给单元格背景上色！
// @author       luobo25
// @match        https://flowus.cn/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=flowus.cn
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const r = /#[0-9A-F]+/ig

    var colorSum = function(color) {
        var a = color.substring(1, 3)
        var b = color.substring(3, 5)
        var c = color.substring(5, 8)
        return parseInt(a) + parseInt(b) + parseInt(c)
    }

    var addColor = function(element) {
        var text = element.textContent
        var m = text.match(r)
        if (m != null && m.length > 0) {
            element.style.background = m[0]
            var sum = colorSum(m[0])
            if (sum < 384) {
                element.style.color = "#FFF"
            } else {
                element.style.color = "#000"
            }
        }
    }

    var isTable = function(n) {
        return n.tagName != null && n.tagName.toLowerCase() == "table"
    }

    var isTD = function(n) {
        return n.tagName != null && n.tagName.toLowerCase() == "td"
    }

    var findTD = function(path) {
        for (var i = 0; i < path.length; i++) {
            var n = path[i]
            if (n.tagName != null && n.tagName.toLowerCase() == "td") {
                return n
            }
        }
        return null
    }

    var isP2 = function(n) {
        return (n.tagName != null && n.tagName.toLowerCase() == "div" && n.attributes['data-property-id'] != null)
    }

    var findP2 = function(path) {
        for (var i = 0; i < path.length; i++) {
            var n = path[i]
            if (isP2(n)) {
                return n
            }
        }
        return null
    }

    var f = function(event) {
        var td = findTD(event.path)
        if (td != null) {
            addColor(td)
        } else {
            var path = event.path
            var first = path[0]
            if (first.children != null && first.children.length > 0) {
                path = [first.children[0]].concat(path)
            }
            var p2 = findP2(path)
            if (p2 != null) {
                addColor(p2)
            }
        }
    }

    document.addEventListener('DOMSubtreeModified', f)

    var recurFind = function(n) {
        if (isTable(n)) {
            observer.observe(n)
        } else if (isTD(n) || isP2(n)) {
            addColor(n)
        } else {
            if (n.children != null && n.children.length > 0) {
                var arr = n.children
                for (var i = 0; i < arr.length; i++) {
                    recurFind(arr[i])
                }
            }
        }
    }

    var body = document.getElementsByTagName("body")[0]

    var targetNode = body
    var observerOptions = {
        childList: true,
        attributes: false,
        subtree: true,
        characterData: true
    }

    function callback(mutationList, observer) {
        mutationList.forEach((mutation) => {
            switch(mutation.type) {
                case 'attributes':
                case 'characterData':
                case 'subtree':
                case 'childList':
                    var added = mutation.addedNodes
                    if (added != null) {
                        added.forEach(x => recurFind(x, 0))
                    }
                    break;
            }
        });
    }
    var observer = new MutationObserver(callback);
    observer.observe(targetNode, observerOptions);

})();