// ==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);
}
}
});
})();