基于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: {
width: '256px',
height: '24px',
margin: '0',
padding: '0',
border: 'none',
float: 'left'
}
},
html: '<div id="cp_board" style="position:absolute;padding:3px;width:256px;height:auto;border:#d9d9d9 1px solid;borderRadius:3px;background-color:white;">'
+ ' <div id="cp_view" style="width:70px;height:24px;background-color: #777;border-radius: 3px;display: inline-block;float:left;"></div>'
+ ' <input id="cp_light" style="width:50px;height:20px;padding: 0;margin-left: 10px;float: left;" type="text" value="127" />'
+ ' <input id="cp_text" style="width:70px;height:20px;margin-left:10px;padding: 0;float: left;" type="text" value="#777777" />'
+ ' <span id="cp_close" style="width: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="width: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="width: 60px; height: 22px;line-height: 18px;text-align: center;margin-top: 3px;cursor: pointer;float: left;">Cancel</span>'
+ ' <span id="cp_choose" style="width: 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);
});
