123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721 |
- /**
- @Title: layui.colorpicker 颜色选择器
- @Author: star1029
- @License:MIT
- */
- layui.define('jquery', function(exports){
- "use strict";
-
- var $ = layui.jquery
- //外部接口
- ,colorpicker = {
- config: {}
- ,index: layui.colorpicker ? (layui.colorpicker.index + 10000) : 0
- //设置全局项
- ,set: function(options){
- var that = this;
- that.config = $.extend({}, that.config, options);
- return that;
- }
-
- //事件监听
- ,on: function(events, callback){
- return layui.onevent.call(this, 'colorpicker', events, callback);
- }
- }
-
- //操作当前实例
- ,thisColorPicker = function(){
- var that = this
- ,options = that.config;
- return {
- config: options
- }
- }
- //字符常量
- ,MOD_NAME = 'colorpicker', SHOW = 'layui-show', THIS = 'layui-this', ELEM = 'layui-colorpicker'
-
- ,ELEM_MAIN = '.layui-colorpicker-main', ICON_PICKER_DOWN = 'layui-icon-down', ICON_PICKER_CLOSE = 'layui-icon-close'
- ,PICKER_TRIG_SPAN = 'layui-colorpicker-trigger-span', PICKER_TRIG_I = 'layui-colorpicker-trigger-i', PICKER_SIDE = 'layui-colorpicker-side', PICKER_SIDE_SLIDER = 'layui-colorpicker-side-slider'
- ,PICKER_BASIS = 'layui-colorpicker-basis', PICKER_ALPHA_BG = 'layui-colorpicker-alpha-bgcolor', PICKER_ALPHA_SLIDER = 'layui-colorpicker-alpha-slider', PICKER_BASIS_CUR = 'layui-colorpicker-basis-cursor', PICKER_INPUT = 'layui-colorpicker-main-input'
- //RGB转HSB
- ,RGBToHSB = function(rgb){
- var hsb = {h:0, s:0, b:0};
- var min = Math.min(rgb.r, rgb.g, rgb.b);
- var max = Math.max(rgb.r, rgb.g, rgb.b);
- var delta = max - min;
- hsb.b = max;
- hsb.s = max != 0 ? 255*delta/max : 0;
- if(hsb.s != 0){
- if(rgb.r == max){
- hsb.h = (rgb.g - rgb.b) / delta;
- }else if(rgb.g == max){
- hsb.h = 2 + (rgb.b - rgb.r) / delta;
- }else{
- hsb.h = 4 + (rgb.r - rgb.g) / delta;
- }
- }else{
- hsb.h = -1;
- };
- if(max == min){
- hsb.h = 0;
- };
- hsb.h *= 60;
- if(hsb.h < 0) {
- hsb.h += 360;
- };
- hsb.s *= 100/255;
- hsb.b *= 100/255;
- return hsb;
- }
- //HEX转HSB
- ,HEXToHSB = function(hex){
- var hex = hex.indexOf('#') > -1 ? hex.substring(1) : hex;
- if(hex.length == 3){
- var num = hex.split("");
- hex = num[0]+num[0]+num[1]+num[1]+num[2]+num[2]
- };
- hex = parseInt(hex, 16);
- var rgb = {r:hex >> 16, g:(hex & 0x00FF00) >> 8, b:(hex & 0x0000FF)};
- return RGBToHSB(rgb);
- }
- //HSB转RGB
- ,HSBToRGB = function(hsb){
- var rgb = {};
- var h = hsb.h;
- var s = hsb.s*255/100;
- var b = hsb.b*255/100;
- if(s == 0){
- rgb.r = rgb.g = rgb.b = b;
- }else{
- var t1 = b;
- var t2 = (255 - s) * b /255;
- var t3 = (t1 - t2) * (h % 60) /60;
- if(h == 360) h = 0;
- if(h < 60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
- else if(h < 120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
- else if(h < 180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
- else if(h < 240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
- else if(h < 300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
- else if(h < 360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
- else {rgb.r=0; rgb.g=0; rgb.b=0}
- }
- return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
- }
- //HSB转HEX
- ,HSBToHEX = function(hsb){
- var rgb = HSBToRGB(hsb);
- var hex = [
- rgb.r.toString(16)
- ,rgb.g.toString(16)
- ,rgb.b.toString(16)
- ];
- $.each(hex, function(nr, val){
- if(val.length == 1){
- hex[nr] = '0' + val;
- }
- });
- return hex.join('');
- }
- //转化成所需rgb格式
- ,RGBSTo = function(rgbs){
- var regexp = /[0-9]{1,3}/g;
- var re = rgbs.match(regexp) || [];
- return {r:re[0], g:re[1], b:re[2]};
- }
-
- ,$win = $(window)
- ,$doc = $(document)
-
- //构造器
- ,Class = function(options){
- var that = this;
- that.index = ++colorpicker.index;
- that.config = $.extend({}, that.config, colorpicker.config, options);
- that.render();
- };
- //默认配置
- Class.prototype.config = {
- color: '' //默认颜色,默认没有
- ,size: null //选择器大小
- ,alpha: false //是否开启透明度
- ,format: 'hex' //颜色显示/输入格式,可选 rgb,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)'
- ]
- };
- //初始颜色选择框
- Class.prototype.render = function(){
- var that = this
- ,options = that.config
-
- //颜色选择框对象
- ,elemColorBox = $(['<div class="layui-unselect layui-colorpicker">'
- ,'<span '+ (options.format == 'rgb' && options.alpha
- ? 'class="layui-colorpicker-trigger-bgcolor"'
- : '') +'>'
- ,'<span class="layui-colorpicker-trigger-span" '
- ,'lay-type="'+ (options.format == 'rgb' ? (options.alpha ? 'rgba' : 'torgb') : '') +'" '
- ,'style="'+ function(){
- var bgstr = '';
- if(options.color){
- bgstr = options.color;
-
- if((options.color.match(/[0-9]{1,3}/g) || []).length > 3){ //需要优化
- if(!(options.alpha && options.format == 'rgb')){
- bgstr = '#' + HSBToHEX(RGBToHSB(RGBSTo(options.color)))
- }
- }
-
- return 'background: '+ bgstr;
- }
-
- return bgstr;
- }() +'">'
- ,'<i class="layui-icon layui-colorpicker-trigger-i '+ (options.color
- ? ICON_PICKER_DOWN
- : ICON_PICKER_CLOSE) +'"></i>'
- ,'</span>'
- ,'</span>'
- ,'</div>'].join(''))
- //初始化颜色选择框
- var othis = $(options.elem);
- options.size && elemColorBox.addClass('layui-colorpicker-'+ options.size); //初始化颜色选择框尺寸
-
- //插入颜色选择框
- othis.addClass('layui-inline').html(
- that.elemColorBox = elemColorBox
- );
-
- //获取背景色值
- that.color = that.elemColorBox.find('.'+ PICKER_TRIG_SPAN)[0].style.background;
-
- //相关事件
- that.events();
- };
- //渲染颜色选择器
- Class.prototype.renderPicker = function(){
- var that = this
- ,options = that.config
- ,elemColorBox = that.elemColorBox[0]
-
- //颜色选择器对象
- ,elemPicker = that.elemPicker = $(['<div id="layui-colorpicker'+ that.index +'" data-index="'+ that.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 '+ (options.alpha ? SHOW : '') +'">'
- ,'<div class="layui-colorpicker-alpha-bgcolor">'
- ,'<div class="layui-colorpicker-alpha-slider"></div>'
- ,'</div>'
- ,'</div>'
-
- //预设颜色列表
- ,function(){
- if(options.predefine){
- var list = ['<div class="layui-colorpicker-main-pre">'];
- layui.each(options.colors, function(i, v){
- list.push(['<div class="layui-colorpicker-pre'+ ((v.match(/[0-9]{1,3}/g) || []).length > 3
- ? ' layui-colorpicker-pre-isalpha'
- : '') +'">'
- ,'<div style="background:'+ v +'"></div>'
- ,'</div>'].join(''));
- });
- list.push('</div>');
- return list.join('');
- } else {
- return '';
- }
- }()
-
- //底部表单元素区域
- ,'<div class="layui-colorpicker-main-input">'
- ,'<div class="layui-inline">'
- ,'<input type="text" class="layui-input">'
- ,'</div>'
- ,'<div class="layui-btn-container">'
- ,'<button class="layui-btn layui-btn-primary layui-btn-sm" colorpicker-events="clear">清空</button>'
- ,'<button class="layui-btn layui-btn-sm" colorpicker-events="confirm">确定</button>'
- ,'</div'
- ,'</div>'
- ,'</div>'].join(''))
-
- ,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)[0];
-
- //如果当前点击的颜色盒子已经存在选择器,则关闭
- if($(ELEM_MAIN)[0] && $(ELEM_MAIN).data('index') == that.index){
- that.removePicker(Class.thisElemInd);
- } else { //插入颜色选择器
- that.removePicker(Class.thisElemInd);
- $('body').append(elemPicker);
- }
-
- Class.thisElemInd = that.index; //记录最新打开的选择器索引
- Class.thisColor = elemColorBox.style.background //记录最新打开的选择器颜色选中值
-
- that.position();
- that.pickerEvents();
- };
- //颜色选择器移除
- Class.prototype.removePicker = function(index){
- var that = this
- ,options = that.config;
- $('#layui-colorpicker'+ (index || that.index)).remove();
- return that;
- };
-
- //定位算法
- Class.prototype.position = function(){
- var that = this
- ,options = that.config
- ,elem = that.bindElem || that.elemColorBox[0]
- ,elemPicker = that.elemPicker[0]
- ,rect = elem.getBoundingClientRect() //绑定元素的坐标
- ,elemWidth = elemPicker.offsetWidth //控件的宽度
- ,elemHeight = elemPicker.offsetHeight //控件的高度
-
- //滚动条高度
- ,scrollArea = function(type){
- type = type ? 'scrollLeft' : 'scrollTop';
- return document.body[type] | document.documentElement[type];
- }
- ,winArea = function(type){
- return document.documentElement[type ? 'clientWidth' : 'clientHeight']
- }, margin = 5, left = rect.left, top = rect.bottom;
-
- left = left - (elemWidth - elem.offsetWidth)/2;
- top = top + margin
- //如果右侧超出边界
- if(left + elemWidth + margin > winArea('width')){
- left = winArea('width') - elemWidth - margin;
- } else if(left < margin){ //如果左侧超出边界
- left = margin;
- }
-
- //如果底部超出边界
- if(top + elemHeight + margin > winArea()){
- top = rect.top > elemHeight //顶部是否有足够区域显示完全
- ? rect.top - elemHeight
- : winArea() - elemHeight;
- top = top - margin*2;
- }
-
- if(options.position){
- elemPicker.style.position = options.position;
- }
- elemPicker.style.left = left + (options.position === 'fixed' ? 0 : scrollArea(1)) + 'px';
- elemPicker.style.top = top + (options.position === 'fixed' ? 0 : scrollArea()) + 'px';
- };
- //颜色选择器赋值
- Class.prototype.val = function(){
- var that = this
- ,options = that.config
-
- ,elemColorBox = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
- ,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT)
- ,e = elemColorBox[0]
- ,bgcolor = e.style.backgroundColor;
-
- //判断是否有背景颜色
- if(bgcolor){
-
- //转化成hsb格式
- var hsb = RGBToHSB(RGBSTo(bgcolor))
- ,type = elemColorBox.attr('lay-type');
-
- //同步滑块的位置及颜色选择器的选择
- that.select(hsb.h, hsb.s, hsb.b);
-
- //如果格式要求为rgb
- if(type === 'torgb'){
- elemPickerInput.find('input').val(bgcolor);
- };
-
- //如果格式要求为rgba
- if(type === 'rgba'){
- var rgb = RGBSTo(bgcolor);
-
- //如果开启透明度而没有设置,则给默认值
- if((bgcolor.match(/[0-9]{1,3}/g) || []).length == 3){
- elemPickerInput.find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 1)');
- that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", 280);
- } else {
- elemPickerInput.find('input').val(bgcolor);
- var left = bgcolor.slice(bgcolor.lastIndexOf(",") + 1, bgcolor.length - 1) * 280;
- that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", left);
- };
-
- //设置span背景色
- that.elemPicker.find('.'+ PICKER_ALPHA_BG)[0].style.background = 'linear-gradient(to right, rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 0), rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +'))';
- };
- }else{
- //如果没有背景颜色则默认到最初始的状态
- that.select(0,100,100);
- elemPickerInput.find('input').val("");
- that.elemPicker.find('.'+ PICKER_ALPHA_BG)[0].style.background = '';
- that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", 280);
- }
- };
- //颜色选择器滑动 / 点击
- Class.prototype.side = function(){
- var that = this
- ,options = that.config
-
- ,span = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
- ,type = span.attr('lay-type')
- ,side = that.elemPicker.find('.' + PICKER_SIDE)
- ,slider = that.elemPicker.find('.' + PICKER_SIDE_SLIDER)
- ,basis = that.elemPicker.find('.' + PICKER_BASIS)
- ,choose = that.elemPicker.find('.' + PICKER_BASIS_CUR)
- ,alphacolor = that.elemPicker.find('.' + PICKER_ALPHA_BG)
- ,alphaslider = that.elemPicker.find('.' + PICKER_ALPHA_SLIDER)
-
- ,_h = slider[0].offsetTop/180*360
- ,_b = 100 - (choose[0].offsetTop + 3)/180*100
- ,_s = (choose[0].offsetLeft + 3)/260*100
- ,_a = Math.round(alphaslider[0].offsetLeft/280*100)/100
-
- ,i = that.elemColorBox.find('.' + PICKER_TRIG_I)
- ,pre = that.elemPicker.find('.layui-colorpicker-pre').children('div')
- ,change = function(x,y,z,a){
- that.select(x, y, z);
- var rgb = HSBToRGB({h:x, s:y, b:z});
- i.addClass(ICON_PICKER_DOWN).removeClass(ICON_PICKER_CLOSE);
- span[0].style.background = 'rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +')';
-
- if(type === 'torgb'){
- that.elemPicker.find('.' + PICKER_INPUT).find('input').val('rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +')');
- };
-
- if(type === 'rgba'){
- var left = 0;
- left = a * 280;
- alphaslider.css("left", left);
- that.elemPicker.find('.' + PICKER_INPUT).find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', '+ a +')');
- span[0].style.background = 'rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', '+ a +')';
- alphacolor[0].style.background = 'linear-gradient(to right, rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 0), rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +'))'
- };
-
- //回调更改的颜色
- options.change && options.change(that.elemPicker.find('.' + PICKER_INPUT).find('input').val());
- }
- //拖拽元素
- ,elemMove = $(['<div class="layui-auxiliar-moving" id="LAY-colorpicker-moving"></div'].join(''))
- ,createMoveElem = function(call){
- $('#LAY-colorpicker-moving')[0] || $('body').append(elemMove);
- elemMove.on('mousemove', call);
- elemMove.on('mouseup', function(){
- elemMove.remove();
- }).on('mouseleave', function(){
- elemMove.remove();
- });
- };
- //右侧主色选择
- slider.on('mousedown', function(e){
- var oldtop = this.offsetTop
- ,oldy = e.clientY;
- var move = function(e){
- var top = oldtop + (e.clientY - oldy)
- ,maxh = side[0].offsetHeight;
- if(top < 0)top = 0;
- if(top > maxh)top = maxh;
- var h = top/180*360;
- _h = h;
- change(h, _s, _b, _a);
- e.preventDefault();
- };
-
- createMoveElem(move);
- e.preventDefault();
- });
-
- side.on('click', function(e){
- var top = e.clientY - $(this).offset().top;
- if(top < 0)top = 0;
- if(top > this.offsetHeight)top = this.offsetHeight;
- var h = top/180*360;
- _h = h;
- change(h, _s, _b, _a);
- e.preventDefault();
- });
-
- //中间小圆点颜色选择
- choose.on('mousedown', function(e){
- var oldtop = this.offsetTop
- ,oldleft = this.offsetLeft
- ,oldy = e.clientY
- ,oldx = e.clientX;
- var move = function(e){
- var top = oldtop + (e.clientY - oldy)
- ,left = oldleft + (e.clientX - oldx)
- ,maxh = basis[0].offsetHeight - 3
- ,maxw = basis[0].offsetWidth - 3;
- if(top < -3)top = -3;
- if(top > maxh)top = maxh;
- if(left < -3)left = -3;
- if(left > maxw)left = maxw;
- var s = (left + 3)/260*100
- ,b = 100 - (top + 3)/180*100;
- _b = b;
- _s = s;
- change(_h, s, b, _a);
- e.preventDefault();
- };
- layui.stope(e);
- createMoveElem(move);
- e.preventDefault();
- });
-
- basis.on('mousedown', function(e){
- var top = e.clientY - $(this).offset().top - 3 + $win.scrollTop()
- ,left = e.clientX - $(this).offset().left - 3 + $win.scrollLeft()
- if(top < -3)top = -3;
- if(top > this.offsetHeight - 3)top = this.offsetHeight - 3;
- if(left < -3)left = -3;
- if(left > this.offsetWidth - 3)left = this.offsetWidth - 3;
- var s = (left + 3)/260*100
- ,b = 100 - (top + 3)/180*100;
- _b = b;
- _s = s;
- change(_h, s, b, _a);
- e.preventDefault();
- choose.trigger(e, 'mousedown');
- });
-
- //底部透明度选择
- alphaslider.on('mousedown', function(e){
- var oldleft = this.offsetLeft
- ,oldx = e.clientX;
- var move = function(e){
- var left = oldleft + (e.clientX - oldx)
- ,maxw = alphacolor[0].offsetWidth;
- if(left < 0)left = 0;
- if(left > maxw)left = maxw;
- var a = Math.round(left /280*100) /100;
- _a = a;
- change(_h, _s, _b, a);
- e.preventDefault();
- };
-
- createMoveElem(move);
- e.preventDefault();
- });
- alphacolor.on('click', function(e){
- var left = e.clientX - $(this).offset().left
- if(left < 0)left = 0;
- if(left > this.offsetWidth)left = this.offsetWidth;
- var a = Math.round(left /280*100) /100;
- _a = a;
- change(_h, _s, _b, a);
- e.preventDefault();
- });
-
- //预定义颜色选择
- pre.each(function(){
- $(this).on('click', function(){
- $(this).parent('.layui-colorpicker-pre').addClass('selected').siblings().removeClass('selected');
- var color = this.style.backgroundColor
- ,hsb = RGBToHSB(RGBSTo(color))
- ,a = color.slice(color.lastIndexOf(",") + 1, color.length - 1),left;
- _h = hsb.h;
- _s = hsb.s;
- _b = hsb.b;
- if((color.match(/[0-9]{1,3}/g) || []).length == 3) a = 1;
- _a = a;
- left = a * 280;
- change(hsb.h, hsb.s, hsb.b, a);
- })
- });
- };
- //颜色选择器hsb转换
- Class.prototype.select = function(h, s, b, type){
- var that = this
- ,options = that.config
- ,hex = HSBToHEX({h:h, s:100, b:100})
- ,color = HSBToHEX({h:h, s:s, b:b})
- ,sidetop = h/360*180
- ,top = 180 - b/100*180 - 3
- ,left = s/100*260 - 3;
-
- that.elemPicker.find('.' + PICKER_SIDE_SLIDER).css("top", sidetop); //滑块的top
- that.elemPicker.find('.' + PICKER_BASIS)[0].style.background = '#' + hex; //颜色选择器的背景
-
- //选择器的top left
- that.elemPicker.find('.' + PICKER_BASIS_CUR).css({
- "top": top
- ,"left": left
- });
-
- if(type === 'change') return;
-
- //选中的颜色
- that.elemPicker.find('.' + PICKER_INPUT).find('input').val('#' + color);
- };
-
- Class.prototype.pickerEvents = function(){
- var that = this
- ,options = that.config
-
- ,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN) //颜色盒子
- ,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT + ' input') //颜色选择器表单
-
- ,pickerEvents = {
- //清空
- clear: function(othis){
- elemColorBoxSpan[0].style.background ='';
- that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE);
- that.color = '';
-
- options.done && options.done('');
- that.removePicker();
- }
-
- //确认
- ,confirm: function(othis, change){
- var value = elemPickerInput.val()
- ,colorValue = value
- ,hsb = {};
-
- if(value.indexOf(',') > -1){
- hsb = RGBToHSB(RGBSTo(value));
- that.select(hsb.h, hsb.s, hsb.b);
- elemColorBoxSpan[0].style.background = (colorValue = '#' + HSBToHEX(hsb));
-
- if((value.match(/[0-9]{1,3}/g) || []).length > 3 && elemColorBoxSpan.attr('lay-type') === 'rgba'){
- var left = value.slice(value.lastIndexOf(",") + 1, value.length - 1) * 280;
- that.elemPicker.find('.' + PICKER_ALPHA_SLIDER).css("left", left);
- elemColorBoxSpan[0].style.background = value;
- colorValue = value;
- };
- } else {
- hsb = HEXToHSB(value);
- elemColorBoxSpan[0].style.background = (colorValue = '#' + HSBToHEX(hsb));
- that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_CLOSE).addClass(ICON_PICKER_DOWN);
- };
-
- if(change === 'change'){
- that.select(hsb.h, hsb.s, hsb.b, change);
- options.change && options.change(colorValue);
- return;
- }
- that.color = value;
-
- options.done && options.done(value);
- that.removePicker();
- }
- };
-
- //选择器面板点击事件
- that.elemPicker.on('click', '*[colorpicker-events]', function(){
- var othis = $(this)
- ,attrEvent = othis.attr('colorpicker-events');
- pickerEvents[attrEvent] && pickerEvents[attrEvent].call(this, othis);
- });
-
- //输入框事件
- elemPickerInput.on('keyup', function(e){
- var othis = $(this)
- pickerEvents.confirm.call(this, othis, e.keyCode === 13 ? null : 'change');
- });
- }
- //颜色选择器输入
- Class.prototype.events = function(){
- var that = this
- ,options = that.config
-
- ,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
-
- //弹出颜色选择器
- that.elemColorBox.on('click' , function(){
- that.renderPicker();
- if($(ELEM_MAIN)[0]){
- that.val();
- that.side();
- };
- });
-
- if(!options.elem[0] || that.elemColorBox[0].eventHandler) return;
-
- //绑定关闭控件事件
- $doc.on('click', function(e){
- //如果点击的元素是颜色框
- if($(e.target).hasClass(ELEM)
- || $(e.target).parents('.'+ELEM)[0]
- ) return;
-
- //如果点击的元素是选择器
- if($(e.target).hasClass(ELEM_MAIN.replace(/\./g, ''))
- || $(e.target).parents(ELEM_MAIN)[0]
- ) return;
-
- if(!that.elemPicker) return;
-
- if(that.color){
- var hsb = RGBToHSB(RGBSTo(that.color));
- that.select(hsb.h, hsb.s, hsb.b);
- } else {
- that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE);
- }
- elemColorBoxSpan[0].style.background = that.color || '';
-
- that.removePicker();
- });
- //自适应定位
- $win.on('resize', function(){
- if(!that.elemPicker || !$(ELEM_MAIN)[0]){
- return false;
- }
- that.position();
- });
-
- that.elemColorBox[0].eventHandler = true;
- };
-
- //核心入口
- colorpicker.render = function(options){
- var inst = new Class(options);
- return thisColorPicker.call(inst);
- };
-
- exports(MOD_NAME, colorpicker);
- });
|