alauda-color-helper

处理蓝湖页面的颜色值
当前为 2021-11-15 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         alauda-color-helper
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  处理蓝湖页面的颜色值
// @author       [email protected]
// @match        *://lanhuapp.com/*
// @license      MIT
// ==/UserScript==

(function () {
  "use strict";

  /**
   * 监测节点是否存在然后执行函数
   * @param selector
   * @param func
   * @returns {Promise<unknown>}
   */
  function obsHasFunc(selector, func) {
    return new Promise((resolve) => {
      setInterval(() => {
        const target = document.querySelectorAll(selector);
        if (target && target.length > 0) {
          if (func) {
            func();
          }
          resolve(selector);
        } else {
          return null;
        }
      }, 1500);
    });
  }

  /**
   * 处理颜色值
   * @param color
   * @returns colorName
   */
  function presetColor(color) {
    const colorList = [
      { name: "blue", value: "#007af5" },
      { name: "b-0", value: "#0067d0" },
      { name: "b-1", value: "#268df6" },
      { name: "b-2", value: "#4da2f8" },
      { name: "b-3", value: "#66aff9" },
      { name: "b-4", value: "#b3d7fc" },
      { name: "b-5", value: "#cce4fd" },
      { name: "b-6", value: "#e5f1fe" },
      { name: "b-7", value: "#f2f8fe" },
      { name: "green", value: "#00c261" },
      { name: "g-0", value: "#00a552" },
      { name: "g-1", value: "#26cb78" },
      { name: "g-2", value: "#4cd490" },
      { name: "g-4", value: "#b3eccf" },
      { name: "g-6", value: "#e6f9ef" },
      { name: "g-7", value: "#f2fbf6" },
      { name: "yellow", value: "#f5a300" },
      { name: "y-0", value: "#dc9200" },
      { name: "y-1", value: "#f6b026" },
      { name: "y-2", value: "#f8be4d" },
      { name: "y-4", value: "#fce3b3" },
      { name: "y-6", value: "#fef5e6" },
      { name: "y-7", value: "#fefaf3" },
      { name: "red", value: "#eb0027" },
      { name: "r-0", value: "#c70021" },
      { name: "r-1", value: "#ed2647" },
      { name: "r-2", value: "#f14c67" },
      { name: "r-4", value: "#f9b3be" },
      { name: "r-6", value: "#fde6e9" },
      { name: "r-7", value: "#fef3f4" },
      { name: "n-0", value: "#000" },
      { name: "n-1", value: "#323437" },
      { name: "n-2", value: "#646669" },
      { name: "n-3", value: "#7c7e81" },
      { name: "n-4", value: "#96989b" },
      { name: "n-5", value: "#aeb0b3" },
      { name: "n-6", value: "#c8cacd" },
      { name: "n-7", value: "#d4d6d9" },
      { name: "n-8", value: "#edeff2" },
      { name: "n-9", value: "#f7f9fc" },
      { name: "n-10", value: "#fff" },
    ];
    const last = color.slice(-1);
    const inputColor = color
      .slice(1)
      .split("")
      .reduce((prev, current) => prev && current === last, true)
      ? color.slice(0, 4)
      : color;
    const targetColor = colorList.find((item) => item.value === inputColor);
    return targetColor ? targetColor.name : "notFound";
  }

  // 开始处理颜色名称
  const selector = ".color_hex .copy_text";
  obsHasFunc(selector, () => {
    const targets = document.querySelectorAll(selector);
    for (const [index, target] of targets.entries()) {
      const targetValue = target.textContent;
      const colorName = presetColor(targetValue.toLocaleLowerCase());
      const colorNameDoc = document.querySelector(
        `.color_hex .color_name_${index}`
      );
      if (colorNameDoc) {
        colorNameDoc.innerHTML = colorName;
      } else {
        const coloNameSpan = document.createElement("span");
        coloNameSpan.className = `color_name_${index}`;
        coloNameSpan.style = "margin-left: 9px";
        coloNameSpan.innerHTML = colorName;
        document.querySelectorAll(selector)[index].after(coloNameSpan);
      }
    }
  });
})();
欢迎访问Greasy Fork镜像
