text/web/lay/modules/colorpicker.js

/** layui-v2.5.6 MIT License By https://www.layui.com */

// 定义layui模块，依赖于jquery
layui.define("jquery", function(e) {
    "use strict";
    var i = layui.jquery; // 获取jquery对象
    var o = {
        config: {}, // 配置对象
        index: layui.colorpicker ? layui.colorpicker.index + 1e4 : 0, // 唯一标识符
        // 设置配置项
        set: function(e) {
            var o = this;
            return o.config = i.extend({}, o.config, e), o;
        },
        // 事件监听
        on: function(e, i) {
            return layui.onevent.call(this, "colorpicker", e, i);
        }
    };

    // 颜色转换函数：RGB -> HSB
    var k = function(e) {
        var i = { h: 0, s: 0, b: 0 }; // 初始HSB值
        var o = Math.min(e.r, e.g, e.b); // 最小颜色值
        var r = Math.max(e.r, e.g, e.b); // 最大颜色值
        var t = r - o; // 色差

        i.b = r;
        i.s = 0 != r ? 255 * t / r : 0;
        if (i.s != 0) {
            if (e.r == r) {
                i.h = (e.g - e.b) / t;
            } else if (e.g == r) {
                i.h = 2 + (e.b - e.r) / t;
            } else {
                i.h = 4 + (e.r - e.g) / t;
            }
        }
        i.h *= 60;
        if (i.h < 0) {
            i.h += 360;
        }
        i.s *= 100 / 255;
        i.b *= 100 / 255;

        return i;
    };

    // 将十六进制颜色转为HSB值
    var y = function(e) {
        var e = e.indexOf("#") > -1 ? e.substring(1) : e;
        if (e.length == 3) {
            var i = e.split("");
            e = i[0] + i[0] + i[1] + i[1] + i[2] + i[2];
        }
        e = parseInt(e, 16);
        var o = { r: e >> 16, g: (65280 & e) >> 8, b: 255 & e }; // 获取RGB值
        return k(o);
    };

    // 将HSB值转换为十六进制颜色
    var C = function(e) {
        var o = x(e),
            r = [o.r.toString(16), o.g.toString(16), o.b.toString(16)];
        i.each(r, function(e, i) {
            if (i.length == 1) {
                r[e] = "0" + i; // 补齐为两位
            }
        });
        return r.join(""); // 返回十六进制颜色值
    };

    // RGB值转换为HSB
    var x = function(e) {
        var i = {}, o = e.h, r = 255 * e.s / 100, t = 255 * e.b / 100;
        if (r == 0) {
            i.r = i.g = i.b = t;
        } else {
            var n = t, l = (255 - r) * t / 255, c = (n - l) * (o % 60) / 60;
            o = o == 360 ? 0 : o;

            if (o < 60) {
                i.r = n;
                i.b = l;
                i.g = l + c;
            } else if (o < 120) {
                i.g = n;
                i.b = l;
                i.r = n - c;
            } else if (o < 180) {
                i.g = n;
                i.r = l;
                i.b = l + c;
            } else if (o < 240) {
                i.b = n;
                i.r = l;
                i.g = n - c;
            } else if (o < 300) {
                i.b = n;
                i.g = l;
                i.r = l + c;
            } else {
                i.r = 0;
                i.g = 0;
                i.b = 0;
            }
        }
        return { r: Math.round(i.r), g: Math.round(i.g), b: Math.round(i.b) };
    };

    // 将RGB值转换为十六进制
    var P = function(e) {
        var i = /[0-9]{1,3}/g, o = e.match(i) || [];
        return { r: o[0], g: o[1], b: o[2] };
    };

    // 滚动条事件
    var B = i(window), w = i(document);

    // 初始化颜色选择器
    var D = function(e) {
        var r = this;
        r.index = ++o.index;
        r.config = i.extend({}, r.config, o.config, e);
        r.render();
    };

    D.prototype.config = {
        color: "", // 默认颜色
        size: null, // 大小
        alpha: false, // 是否支持透明度
        format: "hex", // 颜色格式
        predefine: false, // 是否使用预定义颜色
        colors: [
            "#009688", "#5FB878", "#1E9FFF", "#FF5722", "#FFB800", "#01AAED",
            "#999", "#c00", "#ff8c00", "#ffd700", "#90ee90", "#00ced1",
            "#1e90ff", "#c71585", "rgb(0, 186, 189)", "rgb(255, 120, 0)",
            "rgb(250, 212, 0)", "#393D49", "rgba(0,0,0,.5)", "rgba(255, 69, 0, 0.68)",
            "rgba(144, 240, 144, 0.5)", "rgba(31, 147, 255, 0.73)"
        ]
    };

    // 渲染颜色选择器
    D.prototype.render = function() {
        var e = this, o = e.config;
        var r = i(['<div class="layui-unselect layui-colorpicker">',
            "<span "+("rgb" == o.format && o.alpha ? 'class="layui-colorpicker-trigger-bgcolor"' : "") + ">",
            '<span class="layui-colorpicker-trigger-span" ',
            'lay-type="'+("rgb" == o.format ? o.alpha ? "rgba" : "torgb" : "")+'" ',
            'style="'+function(){
                var e = "";
                if (o.color) {
                    e = o.color;
                    if ((o.color.match(/[0-9]{1,3}/g) || []).length > 3 && !(o.alpha && "rgb" == o.format)) {
                        e = "#" + C(k(P(o.color)));
                    }
                }
                return "background: " + e;
            }() + '">',
            '<i class="layui-icon layui-colorpicker-trigger-i ' + (o.color ? a : s) + '"></i>',
            "</span>",
            "</span>",
            "</div>"].join(""));

        // 绑定颜色选择框
        var t = i(o.elem);
        if (o.size) {
            r.addClass("layui-colorpicker-" + o.size);
        }
        t.addClass("layui-inline").html(e.elemColorBox = r);
        e.color = e.elemColorBox.find("." + f)[0].style.background;
        e.events();
    };

    // 渲染颜色选择器的面板
    D.prototype.renderPicker = function() {
        var e = this, o = e.config, r = e.elemColorBox[0],
            t = e.elemPicker = i([
                '<div id="layui-colorpicker' + e.index + '" data-index="' + e.index + '" class="layui-anim layui-anim-upbit layui-colorpicker-main">',
                '<div class="layui-colorpicker-main-wrapper">',
                '<div class="layui-colorpicker-basis">',
                '<div class="layui-colorpicker-basis-white"></div>',
                '<div class="layui-colorpicker-basis-black"></div>',
                '<div class="layui-colorpicker-basis-cursor"></div>',
                "</div>",
                '<div class="layui-colorpicker-side">',
                '<div class="layui-colorpicker-side-slider"></div>',
                "</div>",
                "</div>",
                '<div class="layui-colorpicker-main-alpha '+(o.alpha ? n : "")+'">',
                '<div class="layui-colorpicker-alpha-bgcolor">',
                '<div class="layui-colorpicker-alpha-slider"></div>',
                "</div>",
                "</div>",
                function() {
                    if (o.predefine) {
                        var e = ['<div class="layui-colorpicker-main-pre">'];
                        layui.each(o.colors, function(i, o)