📄 colorpicker.js
字号:
Class('linb.UI.ColorPicker', ['linb.UI',"linb.absValue"], {
Instance:{
_setCtrlValue:function(value){
return this.each(function(profile){
if(!profile.domNode)return;
var cls = profile.box,
p = profile.properties,
hex = profile.$hex = cls._to3(value),
hexs=profile.$hex.join(''),
rgb = profile.$rgb = cls.hex2rgb(value),
hsv = profile.$hsv = cls.rgb2hsv(rgb),
f=function(s,v){profile.getSubNode(s).get(0).firstChild.nodeValue=String(v)},
ff=function(v){return parseInt(v*100)};
f('R',rgb[0]);
f('G',rgb[1]);
f('B',rgb[2]);
f('H',hex[0]);
f('E',hex[1]);
f('X',hex[2]);
//dont update hsv UI again, if hsv value is the newest
if(profile.$hexinhsv != hexs){
f('HH',hsv[0]);
f('S',ff(hsv[1]));
f('V',ff(hsv[2]));
delete profile.$hexinhsv;
}
cls._setClrName(profile,hexs);
cls._updateDftTip(profile);
//dont update adv UI again, if adv value is the newest
if(p.advance && profile.$hexinadv != hexs){
cls._updateMarks(profile, value, true, hsv[0]);
delete profile.$hexinadv;
}
});
},
getColorName:function(){
return this.get(0).$clrN||'';
}
},
Initialize:function(){
var ns=this,
e=linb.Event.$EVENTHANDLER,
id=linb.UI.$ID,
cls=linb.UI.$CLS,
key=ns.KEY,
list=ns._slist,
l=list.length,
i,data,
arr=[],
evs=' unselectable="on" onmousedown="'+e+'" ondrag="'+e+'" ondragstop="'+e+'" ';
ns.addTemplateKeys(['TXT', 'DD1', 'DD2', 'DD3','R','G','B','HH','S','V','H','E','X']);
//simple list
for(i=0;i<l;i++)
arr.push('<a '+'id="'+key+'-SC:'+id+':'+list[i]+'" href='+linb.$href+' onmouseover="'+e+'" onkeydown="'+e+'" onclick="'+e+'" style="background-color:#'+list[i]+'">'+list[i]+'</a>');
//data
data = '<div><span class="'+cls+'-txt">R: </span><span '+'id="'+key+'-R:'+id+':" class="'+cls+'-dd2 ui-dragable #DD2_CC#" '+evs+'>R</span><span style="width:8px;height:8px" unselectable="on" ></span><span class="'+cls+'-txt">H: </span><span '+'id="'+key+'-HH:'+id+':" class="'+cls+'-dd2 ui-dragable #DD2_CC#" '+evs+'>H</span><span>\xB0</span></div>' +
'<div><span class="'+cls+'-txt">G: </span><span '+'id="'+key+'-G:'+id+':" class="'+cls+'-dd2 ui-dragable #DD2_CC#" '+evs+'>G</span><span style="width:8px;height:8px" unselectable="on" ></span><span class="'+cls+'-txt">S: </span><span '+'id="'+key+'-S:'+id+':" class="'+cls+'-dd2 ui-dragable #DD2_CC#" '+evs+'>S</span><span>%</span></div>' +
'<div><span class="'+cls+'-txt">B: </span><span '+'id="'+key+'-B:'+id+':" class="'+cls+'-dd2 ui-dragable #DD2_CC#" '+evs+'>B</span><span style="width:8px;height:8px" unselectable="on" ></span><span class="'+cls+'-txt">V: </span><span '+'id="'+key+'-V:'+id+':" class="'+cls+'-dd2 ui-dragable #DD2_CC#" '+evs+'>V</span><span>%</span></div>' +
'<div><span style="width:38px">HEX: #</span><span '+'id="'+key+'-H:'+id+':" class="'+cls+'-dd3 ui-dragable #DD3_CC#" '+evs+'>H</span><span '+'id="'+key+'-E:'+id+':" class="'+cls+'-dd3 ui-dragable #DD3_CC#" '+evs+'>E</span><span '+'id="'+key+'-X:'+id+':" class="'+cls+'-dd1 ui-dragable #DD1_CC#" '+evs+'>X</span></div>'
ns.setTemplate({
style:'{_style};width:{_width}px;',
tagName : 'div',
onselectstart:'return false',
BORDER:{
tagName : 'div',
BAR:{
tagName:'div',
className:'uibar-bar',
style:'{barDisplay};height:22px',
BART:{
cellpadding:"0",
cellspacing:"0",
width:'100%',
height:'100%',
border:'0',
tagName:'table',
className:'uibar-t',
BARTR:{
tagName:'tr',
BARTDL:{
tagName:'td',
className:'uibar-tdl'
},
BARTDM:{
$order:1,
width:'100%',
tagName:'td',
className:'uibar-tdm'
},
BARTDR:{
$order:2,
tagName:'td',
className:'uibar-tdr'
}
}
},
BARCMDL:{
tagName: 'div',
className:'uibar-cmdl'
},
BARCMDR:{
tagName: 'div',
className:'uibar-cmdr',
onselectstart:'return false',
unselectable:'on',
CLOSE:{
className:'uicmd-close ',
style:'{closeDisplay}'
}
}
},
CON:{
$order:1,
tagName:'div',
className:'ui-content',
SIMPLE:{
tagName:'div',
TOP:{
$order:1,
tagName:'div',
DATA:{
$order:0,
tagName:'div',
onselectstart:'return false',
text:data
},
EXAM:{
$order:1,
tagName:'div'
}
},
LIST:{
$order:2,
tagName:'div',
text: arr.join('')
},
SUBMIT:{
$order:3,
tagName:'div',
OK:{
tagName:'a',
href:linb.$href,
className:'ui-btn',
style:'display:{submitDispay};',
text:linb.wrapRes('inline.ok')
},
CANCEL:{
$order:1,
className:'ui-btn',
style:'display:{submitDispay};',
tagName:'a',
href:linb.$href,
text:linb.wrapRes('inline.cancel')
},
TOGGLE:{
$order:2,
tagName:'a',
href:linb.$href,
className:'ui-btn',
text:'>>'
}
}
},
ADV:{
$order:2,
style:'display:{advDispay};',
tagName:'div',
ADVWHEEL:{
$order:0,
tagName:'div'
},
ADVCLR:{
$order:1,
tagName:'div'
},
ADVMARK1:{
$order:3,
tagName:'div'
},
ADVMARK2:{
$order:4,
tagName:'div'
}
}
}
}
});
},
Static:{
_radius:84,
_square:100,
_bigRadius:97,
DataModel:{
height:230,
value:"FFFFFF",
displayBar : {
ini:true,
action:function(v){
this.getSubNode('BAR').css('display',v?'':'none');
}
},
closeBtn:{
ini:true,
action:function(v){
this.getSubNode('CLOSE').css('display',v?'':'none');
}
},
advance:{
ini:false,
action:function(v){
var ns=this;
ns.getSubNode('ADV').css('display',v?'':'none');
ns.getSubNode('TOGGLE').text(v?"<<":">>");
ns.root.width(v?400:200);
if(v)
ns.box._updateMarks(ns,ns.properties.$UIvalue,true, ns.$hsv[0])
}
},
cmdBtns:{
ini:true,
action:function(v){
var n=v?'':'none',ns=this;
ns.getSubNode('OK').css('display',n);
ns.getSubNode('CANCEL').css('display',n);
}
},
$borderW:1
},
Appearances:{
KEY:{
'-moz-user-select': 'none'
},
BORDER:{
overflow: 'visible',
position: 'relative'
},
CON:{
height:'200px',
border: 'solid 1px #C1C1C1',
padding:'3px',
'margin-top':'-1px'
},
DATA:{
'float':'left',
width:'112px',
height:'86px'
},
'DATA span':{
'float':'left'
},
'DATA div':{
'padding-top':'3px',
'clear':'both'
},
TXT:{
width:'16px'
},
EXAM:{
'float':'left',
height:'80px',
width:'80px',
background:'red',
'padding-top':'2px',
'white-space':'normal',
'text-align':'center'
},
'DD1, DD2, DD3':{
display:'block',
height:'16px',
border:'1px solid #7F9DB9',
'padding-right':'2px',
cursor:'e-resize',
'text-align':'right',
background:'#FFFACD'
},
DD1:{
width:'16px',
border:'1px solid #7F9DB9'
},
DD2:{
width:'24px',
border:'1px solid #7F9DB9'
},
DD3:{
$order:2,
width:'16px',
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -