RRDJ_APP/assets/js/jquery.colorpicker.min.js

/**
 * Author: 排骨苏
 * Git: https://gitee.com/colorpicker/jquery_palette
 * Modified: 修改支持清除和传入上
 */
(function (c, f, h, k) {
    var g = function (a, b) {
        this.eve = a;
        this.defaults = {width: 230, height: 400, color: "#1926dc", recommend: !1, title: "\u6700\u8fd1\u4f7f\u7528"};
        this.options = c.extend({}, this.defaults, b);
    };
    g.prototype = {
        init: function () {
            this.getPosition();
            this.initDefaultColor();
            this.latelyColor();
            this.createHtml();
            this.on()
        }, createHtml: function () {
            var a = this.options, b = a.bg.r + "," + a.bg.g + "," + a.bg.b, d = "";
            c.each(a.lately, function (a, b) {
                if (9 < a) return !1;
                d += '\x3cdiv style\x3d"width: 20px;height: 20px;margin:5px 11px;float: left;box-shadow: 0 0 5px #ccc;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg\x3d\x3d)"\x3e\x3cdiv style\x3d"width: 100%px;height: 100%;background: rgba(' + b + ');" class\x3d"colorpicker-lately" data-color\x3d"' + b + '"\x3e\x3c/div\x3e\x3c/div\x3e'
            });
            a = ['\x3cdiv style\x3d"position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9999;"  id\x3d"colorpicker-screen"\x3e', '\x3cdiv style\x3d"width: ' + a.width + "px;height: " + a.height + "px;background: #fff;position: absolute;top: " + a.positionTop + "px;left: " + a.positionLeft + 'px;box-shadow: 0 0 10px #ddd;z-index:99999;" id\x3d"colorpicker-color-picker"\x3e', '\x3cdiv style\x3d"width:100%;height: 150px;background: rgb(' + b + ');position: absolute;overflow: hidden;" id\x3d"color-block"\x3e', '\x3cdiv style\x3d"width:100%;height:100%;background: linear-gradient(to right, #fff, rgba(255,255,255,0));position: absolute;"\x3e\x3cdiv style\x3d"width: 100%;height: 100%;background: linear-gradient(to top, #000, rgba(0,0,0,0));position: absolute;"\x3e', '\x3cdiv style\x3d"width: 12px;height: 12px;border-radius: 6px;box-shadow: inset 0 0 0 1px #fff;position: absolute;top: ' + a.ident.top + "px;left: " + a.ident.left + 'px; z-index:1;" id\x3d"block-ident"\x3e\x3c/div\x3e', '\x3cdiv style\x3d"width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;" id\x3d"colorpicker-palette"\x3e\x3c/div\x3e\x3c/div\x3e\x3c/div\x3e\x3c/div\x3e\x3cdiv style\x3d"width: 100%;height:100px;position: absolute;top: 150px;padding: 10px 20px;box-sizing: border-box;"\x3e\x3cdiv style\x3d"width:16px;height:16px;border-radius: 8px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg\x3d\x3d);box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); float: left;margin-top: 5px;"\x3e', '\x3cdiv style\x3d"width:16px;height:16px;border-radius: 8px;background: rgba(' + a.color.r + "," + a.color.g + "," + a.color.b + ');" id\x3d"final-color"\x3e\x3c/div\x3e', '\x3c/div\x3e\x3cdiv style\x3d"width:160px;height: 10px;background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);float: right;position:relative;margin-bottom: 10px;"\x3e', '\x3cdiv style\x3d"width:10px;height: 10px;background-color: #fff;border-radius: 5px;box-shadow: 0 0 2px #ccc;position: absolute;left:' + (a.colorSlider - 5) + 'px; z-index:1;" id\x3d"colorpicker-slider-btn"\x3e\x3c/div\x3e', '\x3cdiv style\x3d"width:100%;height:100%;position: absolute;left:0;top:0;right:0;bottom:0;z-index:2;" id\x3d"colorpicker-slider"\x3e\x3c/div\x3e\x3c/div\x3e\x3cdiv style\x3d"width:160px;height: 10px;float: right;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg\x3d\x3d);position: relative;"\x3e', '\x3cdiv style\x3d"width: 100%;height: 10px;background:linear-gradient(to right, rgba(' + b + ", 0) 0%, rgba(" + b + ', 1) 100%);position: relative;" id\x3d"colorpicker-alpha-block"\x3e', '\x3cdiv style\x3d"width:10px;height: 10px;background-color: #fff;border-radius: 5px;box-shadow: 0 0 2px #ccc;position: absolute;right:-5px;z-index:1;" id\x3d"colorpicker-alpha-btn"\x3e\x3c/div\x3e\x3cdiv style\x3d"width:100%;height:100%;position: absolute;left:0;top:0;right:0;bottom:0;z-index:2;" id\x3d"colorpicker-alpha"\x3e\x3c/div\x3e\x3c/div\x3e\x3c/div\x3e\x3cdiv style\x3d"width: 100%;height:45px;clear: both;padding-top: 10px;"\x3e\x3cdiv style\x3d"width: 153px;height: 100%;float: left;"\x3e\x3cdiv style\x3d"width:100%;height:100%; " id\x3d"colorpicker-rgba"\x3e', '\x3cinput type\x3d"text" name\x3d"colorpicker-r" style\x3d"width: 33px;height:20px;padding:0;border: 1px solid #ccc;border-radius: 5px;margin-right: 4px;text-align:center;color:#333" value\x3d"' + a.color.r + '"\x3e', '\x3cinput type\x3d"text" name\x3d"colorpicker-g" style\x3d"width: 33px;height:20px;padding:0;border: 1px solid #ccc;border-radius: 5px;margin-right: 4px;text-align:center;color:#333" value\x3d"' + a.color.g + '"\x3e', '\x3cinput type\x3d"text" name\x3d"colorpicker-b" style\x3d"width: 33px;height:20px;padding:0;border: 1px solid #ccc;border-radius: 5px;margin-right: 4px;text-align:center;color:#333" value\x3d"' + a.color.b + '"\x3e', '\x3cinput type\x3d"text" name\x3d"colorpicker-a" style\x3d"width: 33px;height:20px;padding:0;border: 1px solid #ccc;border-radius: 5px;text-align:center;color:#333" value\x3d"' + a.color.a + '"\x3e', '\x3cp style\x3d"color:#666;letter-spacing: 29px;text-indent: 13px;line-height: 25px;margin:0;"\x3eRGBA\x3c/p\x3e\x3c/div\x3e\x3cdiv style\x3d"width:100%;height:100%;float: left; display: none;" id\x3d"colorpicker-rex"\x3e', '\x3cinput type\x3d"text" name\x3d"colorpicker-hex" style\x3d"width:100%;height:20px;border: 1px solid #ccc;border-radius: 5px;text-align:center;color:#333" value\x3d"#' + a.hex + '" \x3e', '\x3cp style\x3d"color:#666;text-align:center;letter-spacing: 8px;text-indent: 13px;line-height: 25px;margin:0;"\x3eHEX\x3c/p\x3e\x3c/div\x3e\x3c/div\x3e\x3cdiv style\x3d"width:35px;height: 100%;float: right;cursor: pointer;padding-top: 8px;text-align: right;" id\x3d"colorpicker-tab"\x3e\x3csvg style\x3d"width:85%;" viewBox\x3d"0 0 24 24" data-reactid\x3d".0.0.q.0.0.0.0.0.1.1.1.0.0" \x3e\x3cpath fill\x3d"#333" d\x3d"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" data-reactid\x3d".0.0.q.0.0.0.0.0.1.1.1.0.0.0"\x3e\x3c/path\x3e\x3c/svg\x3e\x3c/div\x3e\x3c/div\x3e\x3c/div\x3e\x3cdiv style\x3d"width:100%;height: 100px;position: absolute;bottom: 50px;padding:10px;box-sizing: border-box;"\x3e', '\x3cp style\x3d"color:#666;text-indent: 10px;margin:0;"\x3e' + a.title + "\x3c/p\x3e", '\x3cdiv style\x3d"height: 70px;width:100%;padding: 5px 0;box-sizing: border-box;"\x3e', d, '\x3c/div\x3e\x3c/div\x3e\x3cdiv style\x3d"width:100%;height: 50px;text-align: center;position: absolute;bottom: 0;line-height: 50px;"\x3e\x3cbutton style\x3d"line-height:18px;border: 1px solid #333;background: #333;padding: 5px 30px;border-radius: 4px;color: #fff;cursor: pointer;font-size:12px;" id\x3d"colorpicker-ok"\x3e\u786e\u5b9a\x3c/button\x3e \x3cbutton style\x3d"line-height:18px;border: 1px solid #333;background: #fff;padding: 5px 30px;border-radius: 4px;color: #333;cursor: pointer;font-size:12px;" id\x3d"colorpicker-clear"\x3e\u6e05\u9664\x3c/button\x3e\x3c/div\x3e\x3c/div\x3e\x3c/div\x3e'].join("");
            c("body").append(a)
        }, initDefaultColor: function () {
            var color = typeof this.options.color == 'function' ? this.options.color.apply(this) : this.options.color;
            var a = color.split(",");
            if (1 == a.length) {
                var b = this.hexToRgb(a[0]);
                b.a = 1;
                var d = this.rgbToHex(b), e = this.rgbToHsb(b)
            } else 3 == a.length ? (b = a[0], d = a[1], e = a[2], a = 1) : 4 == a.length ? (b = a[0], d = a[1], e = a[2], a = a[3]) : (b = 42, d = 0, e = 255, a = 1), b = {r: 255 < parseInt(b) ? 255 : parseInt(b), g: 255 < parseInt(d) ? 255 : parseInt(d), b: 255 < parseInt(e) ? 255 : parseInt(e), a: parseFloat(.9 < parseFloat(a).toFixed(1) ? 1 : parseFloat(a).toFixed(1))}, d = this.rgbToHex(b), e = this.rgbToHsb(b);
            a = this.hsbToRgb({h: e.h, s: 100, b: 100});
            this.set({color: b, hex: d, hsb: e, bg: a, ident: {top: 150 - e.b / 100 * 150 - 6, left: e.s / 100 * 230 - 6}, colorSlider: parseInt(e.h / 360 * 160)})
        }, latelyColor: function () {
            if (this.options.recommend) {
                var a = this.options.recommend.split("|");
                this.options.lately = a;
                this.options.title = "\u63a8\u8350\u8272"
            } else if (f.localStorage) {
                var a = f.localStorage, b = a.getItem("colorpicker-lately");
                b ? b = b.split("-") : (b = "0,0,51,1 0,51,102,1 0,102,153,1 0,153,204,1 0,204,255,1 102,0,51,1 102,51,102,1 102,102,153,1 102,204,204,1 102,255,255,1".split(" "), a.setItem("colorpicker-lately", b.join("-")));
                this.options.lately = b
            }
        }, rgbToHsb: function (a) {
            var b = {h: 0, s: 0, b: 0}, d = Math.min(a.r, a.g, a.b), e = Math.max(a.r, a.g, a.b), c = e - d;
            b.b = e;
            b.s = 0 != e ? 255 * c / e : 0;
            b.h = 0 != b.s ? a.r == e ? (a.g - a.b) / c : a.g == e ? 2 + (a.b - a.r) / c : 4 + (a.r - a.g) / c : -1;
            e == d && (b.h = 0);
            b.h *= 60;
            0 > b.h && (b.h += 360);
            b.s *= 100 / 255;
            b.b *= 100 / 255;
            return b = {h: Math.round(b.h), s: Math.round(b.s), b: Math.round(b.b)}
        }, hexToRgb: function (a) {
            a = -1 < a.indexOf("#") ? a.substring(1) : a;
            3 == a.length && (a = a.split(""), a = a[0] + a[0] + a[1] + a[1] + a[2] + a[2]);
            a = parseInt(a, 16);
            return {r: a >> 16, g: (a & 65280) >> 8, b: a & 255}
        }, rgbToHex: function (a) {
            var b = [a.r.toString(16), a.g.toString(16), a.b.toString(16)];
            c.each(b, function (a, e) {
                1 == e.length && (b[a] = "0" + e)
            });
            return b.join("")
        }, hsbToRgb: function (a) {
            var b, d, e;
            b = a.h;
            var c = 255 * a.s / 100;
            a = 255 * a.b / 100;
            if (0 == c) b = d = e = a; else {
                var c = (255 - c) * a / 255, f = b % 60 * (a - c) / 60;
                360 == b && (b = 0);
                60 > b ? (b = a, e = c, d = c + f) : 120 > b ? (d = a, e = c, b = a - f) : 180 > b ? (d = a, b = c, e = c + f) : 240 > b ? (e = a, b = c, d = a - f) : 300 > b ? (e = a, d = c, b = c + f) : 360 > b ? (b = a, d = c, e = a - f) : e = d = b = 0
            }
            return {r: Math.round(b), g: Math.round(d), b: Math.round(e)}
        }, hsbToHex: function (a) {
            a = this.hsbToRgb(a);
            var b = [a.r.toString(16), a.g.toString(16), a.b.toString(16)];
            c.each(b, function (a, c) {
                1 == c.length && (b[a] = "0" + c)
            });
            return b.join("")
        }, getPosition: function () {
            var a = this.options, b = c(f).width(), d = c(f).height(), e = this.eve.getBoundingClientRect();
            b - e.right > a.width ? this.set({positionLeft: e.right + 5}) : this.set({positionLeft: e.left - a.width - 5});
            d - e.bottom > a.height || a.height > e.top ? this.set({positionTop: (a.height + e.top > d ? 5 : e.top)}) : this.set({positionTop: e.bottom - a.height})
        }, doploy: function () {
            var a = this.options;
            c("#colorpicker-slider-btn").css("left", a.colorSlider - 5);
            var b = this.hsbToHex({h: a.colorSlider / 160 * 360, s: 100, b: 100}), d = this.hexToRgb(b), e = {h: a.colorSlider / 160 * 360, s: 100, s: a.hsb.s, b: a.hsb.b}, b = this.hsbToHex(e), f = this.hexToRgb(b);
            f.a = a.color.a;
            this.set({bg: d, color: f, hex: b, hsb: e});
            this.setInputColor()
        }, setInputColor: function () {
            var a = this.options, b = a.color.r + "," + a.color.g + "," + a.color.b;
            c("#final-color").css("background", "rgba(" + b + "," + a.color.a + ")");
            var d = a.bg.r + "," + a.bg.g + "," + a.bg.b;
            c("#color-block").css("background", "rgb(" + d + ")");
            c("#colorpicker-alpha-block").css("background", "linear-gradient(to right, rgba(" + b + ", 0) 0%, rgba(" + b + ", 1) 100%)");
            c.each(a.color, function (a, b) {
                c("input[name\x3d'colorpicker-" + a + "']").val(b)
            });
            c("input[name\x3d'colorpicker-hex']").val("#" + a.hex);
            this.callFun()
        }, inputSetColor: function () {
            var a = this.options.hsb, b = this.hsbToRgb({h: 0 == a.h ? 250 : a.h, s: 100, b: 100}), d = 150 - a.b / 100 * 150 - 6, e = a.s / 100 * 230 - 6, a = parseInt(a.h / 360 * 160), f = this.options.color;
            this.set({bg: b, ident: {top: d, left: e}, colorSlider: a});
            c("#color-block").css("background", "rgb(" + b.r + "," + b.g + "," + b.b + ")");
            c("#block-ident").css({top: d, left: e});
            c("#colorpicker-slider-btn").css("left", a - 5);
            c("#final-color").css("background", "rgb(" + f.r + "," + f.g + "," + f.b + "," + f.a + ")");
            c("#colorpicker-alpha-block").css("background", "linear-gradient(to right, rgba(0,17,255, 0) 0%, rgba(" + b.r + "," + b.g + "," + b.b + ", 1) 100%)");
            c("#colorpicker-alpha-btn").css("left", parseInt(160 * f.a) - 5);
            this.callFun()
        }, palette: function () {
            var a = this.options;
            c("#block-ident").css(a.ident);
            var b = 0 > a.ident.top ? 0 : a.ident.top, d = 0 > a.ident.left ? 0 : a.ident.left, a = {s: ((230 < d ? 230 : d) + 6) / 230 * 100, b: 100 - ((150 < b ? 150 : b) + 6) / 150 * 100, h: a.hsb.h}, b = this.hsbToHex(a), d = this.hexToRgb(b);
            this.options.hex = b;
            this.options.hsb = a;
            this.options.color.r = d.r;
            this.options.color.g = d.g;
            this.options.color.b = d.b;
            this.setInputColor()
        }, callFun: function () {
            var a = this.options, b = a.color;
            this.callBack(this.eve, {hex: a.hex, rgba: b.r + "," + b.g + "," + b.b + "," + b.a, rgb: b.r + "," + b.g + "," + b.b})
        }, callFunClear: function () {
            var a = this.options, b = a.color;
            this.callClear(this.eve, {hex: a.hex, rgba: b.r + "," + b.g + "," + b.b + "," + b.a, rgb: b.r + "," + b.g + "," + b.b})
        }, set: function (a) {
            this.options = c.extend({}, this.options, a);
            return this
        }, on: function () {
            var a = this;
            c("#colorpicker-screen").off().on("mousedown", function () {
                c(this).remove();
                return !1
            });
            c("#colorpicker-color-picker").off().on("mousedown", function (a) {
                a.stopPropagation()
            });
            c("#colorpicker-tab").off().on("click", function () {
                c("#colorpicker-rgba").is(":hidden") ? (c("#colorpicker-rgba").show(), c("#colorpicker-rex").hide()) : (c("#colorpicker-rgba").hide(), c("#colorpicker-rex").show())
            });
            c("#colorpicker-palette").off().on("mousedown", function (b) {
                b = b || f.event;
                f.colorpickerpalette = !0;
                a.set({ident: {top: b.offsetY - 6, left: b.offsetX - 6}});
                a.palette()
            }).on("mousemove", function (b) {
                b = b || f.event;
                f.colorpickerpalette && (a.set({ident: {top: b.offsetY - 6, left: b.offsetX - 6}}), a.palette())
            }).on("mouseup", function () {
                f.colorpickerpalette = !1
            }).on("mouseleave", function () {
                f.colorpickerpalette = !1
            });
            c("#colorpicker-slider").off().on("mousedown", function (b) {
                b = b || f.event;
                f.colorpickerslider = !0;
                a.set({colorSlider: b.offsetX});
                a.doploy()
            }).on("mousemove", function (b) {
                b = b || f.event;
                f.colorpickerslider && (a.set({colorSlider: 0 > b.offsetX ? 0 : b.offsetX}), a.doploy())
            }).on("mouseup", function () {
                f.colorpickerslider = !1
            }).on("mouseleave", function () {
                f.colorpickerslider = !1
            });
            c("#colorpicker-alpha").off().on("mousedown", function (b) {
                b = b || f.event;
                f.colorpickeralpha = !0;
                c("#colorpicker-alpha-btn").css("left", b.offsetX - 6);
                a.options.color.a = parseFloat((b.offsetX / 160).toFixed(1));
                a.setInputColor()
            }).on("mousemove", function (b) {
                b = b || f.event;
                f.colorpickeralpha && (c("#colorpicker-alpha-btn").css("left", b.offsetX - 6), a.options.color.a = parseFloat(((0 > b.offsetX ? 0 : b.offsetX) / 160).toFixed(1)), a.setInputColor())
            }).on("mouseup", function () {
                f.colorpickeralpha = !1
            }).on("mouseleave", function () {
                f.colorpickeralpha = !1
            });
            c('input[name\x3d"colorpicker-r"],input[name\x3d"colorpicker-g"],input[name\x3d"colorpicker-b"],input[name\x3d"colorpicker-a"]').on("keyup", function () {
                var b = c(this).attr("name").split("-");
                if ("a" == b[1]) {
                    var d = parseFloat(c(this).val()) || 1, d = parseFloat(d.toFixed(1));
                    if (1 < d || 0 > d) c(this).val(1), d = 1
                } else d = parseInt(c(this).val()) || 0, 0 > d ? (c(this).val(0), d = 0) : 255 < d && (c(this).val(255), d = 255);
                a.options.color[b[1]] = d;
                b = a.rgbToHex(a.options.color);
                c('input[name\x3d"colorpicker-hex"]').val("#" + b);
                a.options.hex = b;
                b = a.rgbToHsb(a.options.color);
                a.options.hsb = b;
                a.inputSetColor()
            });
            c('input[name\x3d"colorpicker-hex"]').on("keyup", function () {
                var b = c(this).val().replace("#", "");
                if (3 == b.length || 6 == b.length) b = a.hexToRgb(b), b.a = 1, a.set({color: b, hex: a.rgbToHex(b), hsb: a.rgbToHsb(b)}), c.each(b, function (a, b) {
                    c('input[name\x3d"colorpicker-' + a + '"]').val(b)
                }), a.inputSetColor()
            });
            c(".colorpicker-lately").on("click", function () {
                var b = c(this).data("color"), d = b.split(","), e = {r: parseInt(d[0]), g: parseInt(d[1]), b: parseInt(d[2])}, b = e;
                b.a = d["3"] || 1;
                d = a.rgbToHex(e);
                a.callBack(a.eve, {hex: d, rgba: b.r + "," + b.g + "," + b.b + "," + b.a, rgb: b.r + "," + b.g + "," + b.b});
                c("#colorpicker-screen").remove()
            });
            c("#colorpicker-ok").on("click", function () {
                a.callFun();
                var b = a.options.color;
                if (f.localStorage) {
                    var d = f.localStorage, e = d.getItem("colorpicker-lately"), e = e.split("-");
                    e.shift();
                    e.push(b.r + "," + b.g + "," + b.b + "," + b.a);
                    d.setItem("colorpicker-lately", e.join("-"))
                }
                c("#colorpicker-screen").remove()
            });
            c("#colorpicker-clear").on("click", function () {
                a.callFunClear();
                c("#colorpicker-screen").remove()
            })
        }
    };
    c.fn.extend({
        colorpicker: function (a, b, s) {
            this.each(function (d, e) {
                c(this).off().on("click", function () {
                    var c = new g(this, a);
                    c.init();
                    c.callBack = b;
                    c.callClear = s;
                });
                return this
            })
        }
    })
})(jQuery, window, document);