☰

Greasy Fork 支持简体中文。

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

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

目前為 2022-07-06 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         让 Flowus 多维表单元格显示颜色
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @license      MIT
  6. // @description  当单元格的内容是 #AABBCC 这样的颜色值时，给单元格背景上色！
  7. // @author       luobo25
  8. // @match        https://flowus.cn/*
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=flowus.cn
  10. // @grant        none
  11.  
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     const r = /(?<rgb>#[0-9A-F]{3,8})( +(?<alpha>\d+)%)?/i
  18.  
  19.     // alpha: float, 0 -> 1
  20.     var setAlpha = function(rgb, alpha) {
  21.         var a = "00" + (Math.round(alpha * 255).toString(16))
  22.         a = a.substring(a.length - 2, a.length)
  23.         return "#"+ rgb.substring(1, 7) + a
  24.     }
  25.  
  26.     var colorLight = function(argb) {
  27.         var r = argb.substring(1, 3)
  28.         var g = argb.substring(3, 5)
  29.         var b = argb.substring(5, 7)
  30.         var a = argb.substring(7, 9)
  31.         var af = (parseInt(a, 16) / 255.0)
  32.         return (parseInt(r, 16) + parseInt(g, 16) + parseInt(b, 16)) * af + (1 - af) * (255 * 3) // 加上透过白色的亮度
  33.     }
  34.  
  35.     var addColor = function(element) {
  36.         var text = element.textContent
  37.         var m = text.match(r)
  38.         if (m != null && m.groups != null && m.groups.rgb != null) {
  39.             var alpha = m.groups.alpha != null ? parseInt(m.groups.alpha) / 100.0 : 1
  40.             var argb = setAlpha(m.groups.rgb, alpha)
  41.             element.style.background = argb
  42.             var l = colorLight(argb)
  43.             if (l < 384) {
  44.                 element.style.color = "#FFF"
  45.             } else {
  46.                 element.style.color = "#000"
  47.             }
  48.         }
  49.     }
  50.  
  51.     var isTable = function(n) {
  52.         return n.tagName != null && n.tagName.toLowerCase() == "table"
  53.     }
  54.  
  55.     var isTD = function(n) {
  56.         return n.tagName != null && n.tagName.toLowerCase() == "td"
  57.     }
  58.  
  59.     var findTD = function(path) {
  60.         for (var i = 0; i < path.length; i++) {
  61.             var n = path[i]
  62.             if (n.tagName != null && n.tagName.toLowerCase() == "td") {
  63.                 return n
  64.             }
  65.         }
  66.         return null
  67.     }
  68.  
  69.     var isP2 = function(n) {
  70.         return (n.tagName != null && n.tagName.toLowerCase() == "div" && n.attributes['data-property-id'] != null)
  71.     }
  72.  
  73.     var findP2 = function(path) {
  74.         for (var i = 0; i < path.length; i++) {
  75.             var n = path[i]
  76.             if (isP2(n)) {
  77.                 return n
  78.             }
  79.         }
  80.         return null
  81.     }
  82.  
  83.     var f = function(event) {
  84.         var td = findTD(event.path)
  85.         if (td != null) {
  86.             addColor(td)
  87.         } else {
  88.             var path = event.path
  89.             var first = path[0]
  90.             if (first.children != null && first.children.length > 0) {
  91.                 path = [first.children[0]].concat(path)
  92.             }
  93.             var p2 = findP2(path)
  94.             if (p2 != null) {
  95.                 addColor(p2)
  96.             }
  97.         }
  98.     }
  99.  
  100.     document.addEventListener('DOMSubtreeModified', f)
  101.  
  102.     var recurFind = function(n) {
  103.         if (isTable(n)) {
  104.             observer.observe(n)
  105.         } else if (isTD(n) || isP2(n)) {
  106.             addColor(n)
  107.         } else {
  108.             if (n.children != null && n.children.length > 0) {
  109.                 var arr = n.children
  110.                 for (var i = 0; i < arr.length; i++) {
  111.                     recurFind(arr[i])
  112.                 }
  113.             }
  114.         }
  115.     }
  116.  
  117.     var body = document.getElementsByTagName("body")[0]
  118.  
  119.     var targetNode = body
  120.     var observerOptions = {
  121.         childList: true,
  122.         attributes: false,
  123.         subtree: true,
  124.         characterData: true
  125.     }
  126.  
  127.     function callback(mutationList, observer) {
  128.         mutationList.forEach((mutation) => {
  129.             switch(mutation.type) {
  130.                 case 'attributes':
  131.                 case 'characterData':
  132.                 case 'subtree':
  133.                 case 'childList':
  134.                     var added = mutation.addedNodes
  135.                     if (added != null) {
  136.                         added.forEach(x => recurFind(x, 0))
  137.                     }
  138.                     break;
  139.             }
  140.         });
  141.     }
  142.     var observer = new MutationObserver(callback);
  143.     observer.observe(targetNode, observerOptions);
  144.  
  145. })();