zoukankan      html  css  js  c++  java
  • 基于jquery封装的一个调色板,用到了Deferred对象回调

    最近经常封装js工具,请不要以为我是一名前端工程师,这只是我不得已的副业而已

    window.colorPanel || (window.colorPanel = {
        left: 0,
        light: 127,
        isbind: false,
        mousedown: false,
        selectRGB: { r: 127, g: 127, b: 127 },
        selectColor: '#777777',
        dfd: null,
        style: {
            cp_btn: {
                border: '#d9d9d9 1px solid',
                borderRadius: '3px',
                display: 'inline-block'
            },
            cp_area: {
                 '256px',
                height: '24px',
                margin: '0',
                padding: '0',
                border: 'none',
                float: 'left'
            }
        },
        html: '<div id="cp_board" style="position:absolute;padding:3px;256px;height:auto;border:#d9d9d9 1px solid;borderRadius:3px;background-color:white;">'
            + '    <div   id="cp_view"   style="70px;height:24px;background-color: #777;border-radius: 3px;display: inline-block;float:left;"></div>'
            + '    <input id="cp_light"  style="50px;height:20px;padding: 0;margin-left: 10px;float: left;" type="text" value="127" />'
            + '    <input id="cp_text"   style="70px;height:20px;margin-left:10px;padding: 0;float: left;" type="text" value="#777777" />'
            + '    <span  id="cp_close"  style="24px;height:22px;line-height: 18px;text-align: center;position: absolute;font-weight:bolder;font-size:28px;color:red;top:3px;right:3px;cursor: pointer;">x</span>'
            + '    <div   id="cp_gray"   style="256px;height:20px;margin: 10px 0;float: left; background:linear-gradient(to right,#000 0px, #777 127px, #fff 255px);"></div>'
            + '    <div   id="cp_area_1" style="background:linear-gradient(to right,#f00,#ff0);"></div>'
            + '    <div   id="cp_area_2" style="background:linear-gradient(to right,#0f0,#ff0);"></div>'
            + '    <div   id="cp_area_3" style="background:linear-gradient(to right,#0f0,#0ff);"></div>'
            + '    <div   id="cp_area_4" style="background:linear-gradient(to right,#00f,#0ff);"></div>'
            + '    <div   id="cp_area_5" style="background:linear-gradient(to right,#00f,#f0f);"></div>'
            + '    <div   id="cp_area_6" style="background:linear-gradient(to right,#f00,#f0f);"></div>'
            + '    <span  id="cp_cancel" style=" 60px; height: 22px;line-height: 18px;text-align: center;margin-top: 3px;cursor: pointer;float: left;">Cancel</span>'
            + '    <span  id="cp_choose" style=" 60px;height: 22px;line-height: 18px;text-align: center;margin-top: 3px;float: right;cursor: pointer;">Choose</span>'
            + '</div>',
        hToInt: function (c, n) {
            var s = c.toUpperCase(),
                i = s == 'A' ? 10
                  : s == 'B' ? 11
                  : s == 'C' ? 11
                  : s == 'D' ? 11
                  : s == 'E' ? 11
                  : s == 'F' ? 11
                  : parseInt(s, 10);
            return n == 0 ? i : i * 16;
        },
        setRGB: function (c) {
            colorPanel.selectRGB.r = colorPanel.hToInt(c.substr(1, 1), 1) + colorPanel.hToInt(c.substr(2, 1), 0);
            colorPanel.selectRGB.g = colorPanel.hToInt(c.substr(3, 1), 1) + colorPanel.hToInt(c.substr(4, 1), 0);
            colorPanel.selectRGB.b = colorPanel.hToInt(c.substr(5, 1), 1) + colorPanel.hToInt(c.substr(6, 1), 0);
        },
        setColor: function (left) {
            var r = 0, g = 0, b = 0;
            var light = left ? left : colorPanel.light;
            if (light == 255) {
                r = g = b = "FF";
            } else if (light == 0) {
                r = g = b = "00";
            } else if (light > 127) {
                r = parseInt((255 - colorPanel.selectRGB.r) * (light - 127) / 127 + colorPanel.selectRGB.r).toString(16);
                g = parseInt((255 - colorPanel.selectRGB.g) * (light - 127) / 127 + colorPanel.selectRGB.g).toString(16);
                b = parseInt((255 - colorPanel.selectRGB.b) * (light - 127) / 127 + colorPanel.selectRGB.b).toString(16);
            } else {
                r = parseInt(colorPanel.selectRGB.r * light / 127).toString(16);
                g = parseInt(colorPanel.selectRGB.g * light / 127).toString(16);
                b = parseInt(colorPanel.selectRGB.b * light / 127).toString(16);
            }
            var c = '#' + (r.length > 1 ? r : ('0' + r)) + (g.length > 1 ? g : ('0' + g)) + (b.length > 1 ? b : ('0' + b));
            $('#cp_view').css('background-color', c);
            $('#cp_text').val(c.toUpperCase());
        },
        areaMove: function (left, area) {
            if (colorPanel.mousedown) {
                var r = left.toString(16).toUpperCase(),
                    h = r.length > 1 ? r : ('0' + r),
                    c = area == '1' ? 'FF' + h + "00"
                      : area == '2' ? h + "FF00"
                      : area == '3' ? "00FF" + h
                      : area == '4' ? "00" + h + "FF"
                      : area == '5' ? h + "00FF"
                      : area == '6' ? "FF00" + h : "777777";
                $('#cp_text').val("#" + c);
                $('#cp_view').css('background-color', "#" + c);
                $('#cp_gray').css('background', 'linear-gradient(to right,#000 0px, #' + c + ' 127px, #fff 255px)');
                colorPanel.selectRGB
                    = area == '1' ? { r: 255, g: left, b: 0 }
                    : area == '2' ? { r: left, g: 255, b: 0 }
                    : area == '3' ? { r: 0, g: 255, b: left }
                    : area == '4' ? { r: 0, g: left, b: 255 }
                    : area == '5' ? { r: left, g: 0, b: 255 }
                    : area == '6' ? { r: 255, g: 0, b: left }
                    : colorPanel.selectRGB;
                colorPanel.setColor();
            }
        },
        show: function (dtd) {
            colorPanel.dfd = dtd || $.Deferred();
            if (!colorPanel.content) {
                colorPanel.content = $(colorPanel.html).appendTo('body').find('[id^="cp_area_"]').css(colorPanel.style.cp_area);
                $('#cp_board span').css(colorPanel.style.cp_btn).hover(function () {
                    $(this).css('background-color', '#eeeeee');
                }, function () {
                    $(this).css('background-color', '#ffffff');
                });
            } else {
                $('#cp_board').show();
            }
            $('#cp_board').css({ left: UEditor.contentMenu.content.css('left'), top: UEditor.contentMenu.content.css('top') });
            colorPanel.left = $('#cp_board').offset().left + 4;
    
            if (!colorPanel.isbind) {
                colorPanel.isbind = true;
                $('#cp_gray').on('mousemove', function (e) {
                    if (colorPanel.mousedown) {
                        var light = e.pageX - colorPanel.left;
                        $('#cp_light').val(light);
                        colorPanel.light = light;
                        colorPanel.setColor(light);
                    }
                });
                $('[id^=cp_area_]').on('mousemove', function (e) {
                    colorPanel.areaMove(e.pageX - colorPanel.left, $(this).attr('id').replace('cp_area_', ''));
                });
                $('#cp_board').on('mousedown', function (e) {
                    colorPanel.mousedown = true;
                    var id = e.originalEvent.srcElement.id;
                    if (id == 'cp_gray') {
                        var light = e.pageX - colorPanel.left;
                        $('#cp_light').val(light);
                        colorPanel.light = light;
                        colorPanel.setColor(light);
                    } else {
                        if (id.indexOf('cp_area_') > -1) {
                            colorPanel.areaMove(e.pageX - colorPanel.left, id.replace('cp_area_', ''));
                        }
                    }
                }).on('mouseup', function (e) {
                    colorPanel.mousedown = false;
                });
                $('#cp_text').on('keyup', function (e) {
                    var v = $(this).val();
                    var pattern = /^#[0-9a-fA-F]{6}$/
                    if (v.length == 7 && v.substr(0, 1) == '#' && v.match(pattern) != null) {
                        $('#cp_view').css('background-color', v);
                        $(this).val(v.toUpperCase());
                        $('#cp_gray').css('background', 'linear-gradient(to right,#000 0px, ' + v + ' 127px, #fff 255px)');
                        colorPanel.setRGB(v);
                    } else {
                        $('#cp_view').css('background-color', '#fff');
                    }
                });
                $('#cp_light').on('keyup', function (e) {
                    colorPanel.setColor($(this).val());
                });
                $('#cp_close').on('click', function (e) {
                    $('#cp_board').hide();
                    colorPanel.dfd.reject();
                });
                $('#cp_cancel').on('click', function (e) {
                    $('#cp_board').hide();
                    colorPanel.dfd.reject();
                });
                $('#cp_choose').on('click', function (e) {
                    $('#cp_board').hide();
                    colorPanel.selectColor = $('#cp_text').val();
                    colorPanel.dfd.resolve();
                });
            }
        }
    });
    /* 调用方法 */
    $.Deferred(colorPanel.show).done(function () {
        alert(colorPanel.selectColor);
    });
    


  • 相关阅读:
    bzoj 1911: [Apio2010]特别行动队
    bzoj 1096: [ZJOI2007]仓库建设
    bzoj 3522: [Poi2014]Hotel
    bzoj 3572: [Hnoi2014]世界树
    bzoj 1177: [Apio2009]Oil
    bzoj 1912: [Apio2010]patrol 巡逻
    bzoj 3573: [Hnoi2014]米特运输
    bzoj 3997: [TJOI2015]组合数学
    cf 506 A. Mr. Kitayuta, the Treasure Hunter
    cf 500 D. New Year Santa Network
  • 原文地址:https://www.cnblogs.com/foren/p/6009090.html
Copyright © 2011-2022 走看看