alauda-color-helper

来自缓存
alauda-color-helper

处理蓝湖页面与AUI适配问题
Wrap lines
// ==UserScript==
// @name         alauda-color-helper
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  处理蓝湖页面与AUI适配问题
// @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: 'primary,blue', value: '#007af5', rgb: 'rgb(0, 122, 245)' },
      { name: 'b-0,p-0', value: '#0067d0', rgb: 'rgb(0, 103, 208)' },
      { name: 'b-1,p-1', value: '#268df6', rgb: 'rgb(38, 141, 246)' },
      { name: 'b-2,p-2', value: '#4da2f8', rgb: 'rgb(77, 162, 248)' },
      { name: 'b-3,p-3', value: '#66aff9', rgb: 'rgb(102, 175, 249)' },
      { name: 'b-4,p-4', value: '#b3d7fc', rgb: 'rgb(179, 215, 252)' },
      { name: 'b-5,p-5', value: '#cce4fd', rgb: 'rgb(204, 228, 253)' },
      { name: 'b-6,p-6', value: '#e5f1fe', rgb: 'rgb(229, 241, 254)' },
      { name: 'b-7,p-7', value: '#f2f8fe', rgb: 'rgb(242, 248, 254)' },
      { name: 'green', value: '#00c261', rgb: 'rgb(0, 194, 97)' },
      { name: 'g-0', value: '#00a552', rgb: 'rgb(0, 165, 82)' },
      { name: 'g-1', value: '#26cb78', rgb: 'rgb(38, 203, 120)' },
      { name: 'g-2', value: '#4cd490', rgb: 'rgb(76, 212, 144)' },
      { name: 'g-4', value: '#b3eccf', rgb: 'rgb(179, 236, 207)' },
      { name: 'g-6', value: '#e6f9ef', rgb: 'rgb(230, 249, 239)' },
      { name: 'g-7', value: '#f2fbf6', rgb: 'rgb(242, 251, 246)' },
      { name: 'yellow', value: '#f5a300', rgb: 'rgb(245, 163, 0)' },
      { name: 'y-0', value: '#dc9200', rgb: 'rgb(220, 146, 0)' },
      { name: 'y-1', value: '#f6b026', rgb: 'rgb(246, 176, 38)' },
      { name: 'y-2', value: '#f8be4d', rgb: 'rgb(248, 190, 77)' },
      { name: 'y-4', value: '#fce3b3', rgb: 'rgb(252, 227, 179)' },
      { name: 'y-6', value: '#fef5e6', rgb: 'rgb(254, 245, 230)' },
      { name: 'y-7', value: '#fefaf3', rgb: 'rgb(254, 250, 243)' },
      { name: 'red', value: '#eb0027', rgb: 'rgb(235, 0, 39)' },
      { name: 'r-0', value: '#c70021', rgb: 'rgb(199, 0, 33)' },
      { name: 'r-1', value: '#ed2647', rgb: 'rgb(237, 38, 71)' },
      { name: 'r-2', value: '#f14c67', rgb: 'rgb(241, 76, 103)' },
      { name: 'r-4', value: '#f9b3be', rgb: 'rgb(249, 179, 190)' },
      { name: 'r-6', value: '#fde6e9', rgb: 'rgb(253, 230, 233)' },
      { name: 'r-7', value: '#fef3f4', rgb: 'rgb(254, 243, 244)' },
      { name: 'n-0', value: '#000', rgb: 'rgb(0, 0, 0)' },
      { name: 'n-1', value: '#323437', rgb: 'rgb(50, 52, 55)' },
      { name: 'n-2', value: '#646669', rgb: 'rgb(100, 102, 105)' },
      { name: 'n-3', value: '#7c7e81', rgb: 'rgb(124, 126, 129)' },
      { name: 'n-4', value: '#96989b', rgb: 'rgb(150, 152, 155)' },
      { name: 'n-5', value: '#aeb0b3', rgb: 'rgb(174, 176, 179)' },
      { name: 'n-6', value: '#c8cacd', rgb: 'rgb(200, 202, 205)' },
      { name: 'n-7', value: '#d4d6d9', rgb: 'rgb(212, 214, 217)' },
      { name: 'n-8', value: '#edeff2', rgb: 'rgb(237, 239, 242)' },
      { name: 'n-9', value: '#f7f9fc', rgb: 'rgb(247, 249, 252)' },
      { name: 'n-10', value: '#fff', rgb: 'rgb(255, 255, 255)' },
    ];
    const last = color.slice(-1);
    const inputColor = color
      .slice(1)
      .split('')
      .reduce((prev, current) => prev && current === last, true)
      ? color.slice(0, 4)
      : color;
    return colorList.find(item => item.value === inputColor);
  }

  /**
   * 处理字号
   * @param size
   * @returns fontSizeName
   */
  function presetFontSize(size) {
    const fontSizeList = [
      { name: 'font-size-xxl', value: '20px' },
      { name: 'font-size-xl', value: '18px' },
      { name: 'font-size-l', value: '16px' },
      { name: 'font-size-m', value: '14px' },
      { name: 'font-size-s', value: '12px' },
    ];
    const targetSize = fontSizeList.find(item => item.value === size);
    return targetSize ? targetSize.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 targetColor = presetColor(targetValue.toLocaleLowerCase());
      const colorName = targetColor ? targetColor.name : 'notFound';
      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;
        coloNameSpan.title = targetColor?.rgb;
        document.querySelectorAll(selector)[index].after(coloNameSpan);
      }
    }
  });

  // 处理字号
  const fontSizeSelector = '.item_one .two';
  obsHasFunc(fontSizeSelector, () => {
    const targets = document.querySelectorAll(fontSizeSelector);
    for (const [index, target] of targets.entries()) {
      const targetValue = target.childNodes[0].data;
      const fontSizeName = presetFontSize(targetValue);
      const fontSizeNameDoc = document.querySelector(
        `.item_one .font_size_name_${index}`,
      );
      if (fontSizeNameDoc) {
        fontSizeNameDoc.innerHTML = fontSizeName;
      } else {
        const fontSizeNameSpan = document.createElement('span');
        fontSizeNameSpan.className = `font_size_name_${index}`;
        fontSizeNameSpan.innerHTML = fontSizeName;
        document
          .querySelectorAll(fontSizeSelector)
          [index].append(fontSizeNameSpan);
      }
    }
  });
})();