@ -21,7 +21,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
render : function ( ) {
var self = this , o = this . options , c = this . constants ;
this . storeValue = { } ;
var RGB = BI . createItems ( [ { text : "R" } , { text : "G" } , { text : "B" } ] , {
var RGB = BI . createItems ( [ { text : "R" } , { text : "G" } , { text : "B" } ] , {
type : "bi.label" ,
cls : "color-picker-editor-label" ,
height : 20
@ -33,146 +33,162 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
var Ws = BI . map ( BI . range ( 0 , 3 ) , function ( ) {
return {
type : "bi.small_text_editor" ,
cls : "color-picker-editor-input" ,
cls : "color-picker-editor-input bi-border-radius " ,
validationChecker : checker ,
errorText : BI . i18nText ( "BI-Color_Picker_Error_Text" ) ,
allowBlank : true ,
value : 255 ,
width : c . RGB _WIDTH ,
height : 24 ,
listeners : [ {
eventName : BI . TextEditor . EVENT _CHANGE ,
action : function ( ) {
self . _checkEditors ( ) ;
if ( checker ( self . storeValue . r ) && checker ( self . storeValue . g ) && checker ( self . storeValue . b ) ) {
self . colorShow . element . css ( "background-color" , self . getValue ( ) ) ;
self . fireEvent ( BI . ColorPickerEditor . EVENT _CHANGE ) ;
listeners : [
{
eventName : BI . TextEditor . EVENT _CHANGE ,
action : function ( ) {
self . _checkEditors ( ) ;
if ( checker ( self . storeValue . r ) && checker ( self . storeValue . g ) && checker ( self . storeValue . b ) ) {
self . colorShow . element . css ( "background-color" , self . getValue ( ) ) ;
self . fireEvent ( BI . ColorPickerEditor . EVENT _CHANGE ) ;
}
}
}
} ]
]
} ;
} ) ;
return {
type : "bi.absolute" ,
items : [ {
el : {
type : "bi.vertical" ,
tgap : 10 ,
items : [ {
type : 'bi.vertical_adapt' ,
columnSize : [ "fill" , 'fill' ] ,
height : 24 ,
items : [ {
type : "bi.color_picker_show_button" ,
cls : "trans-color-icon" ,
height : 22 ,
title : BI . i18nText ( "BI-Transparent_Color" ) ,
text : BI . i18nText ( "BI-Transparent_Color" ) ,
listeners : [ {
eventName : BI . ColorChooserShowButton . EVENT _CHANGE ,
action : function ( ) {
self . setValue ( "transparent" ) ;
self . fireEvent ( BI . ColorPickerEditor . EVENT _CHANGE ) ;
}
} ] ,
ref : function ( _ref ) {
self . transparent = _ref ;
}
} , {
el : {
type : "bi.color_picker_show_button" ,
cls : "auto-color-icon" ,
height : 22 ,
title : BI . i18nText ( "BI-Basic_Auto" ) ,
text : BI . i18nText ( "BI-Basic_Auto" ) ,
listeners : [ {
eventName : BI . ColorChooserShowButton . EVENT _CHANGE ,
action : function ( ) {
self . setValue ( "" ) ;
self . fireEvent ( BI . ColorPickerEditor . EVENT _CHANGE ) ;
}
} ] ,
ref : function ( _ref ) {
self . none = _ref ;
}
} ,
lgap : 10 ,
} ]
} , {
el : {
type : "bi.vertical_adapt" ,
columnSize : [ 22 , 10 , 'fill' , 12 , c . RGB _WIDTH , 12 , c . RGB _WIDTH , 12 , c . RGB _WIDTH ] ,
rgap : 5 ,
items : [ {
el : {
type : "bi.layout" ,
cls : "color-picker-editor-display bi-card bi-border" ,
height : 22 ,
width : 22 ,
ref : function ( _ref ) {
self . colorShow = _ref ;
}
} ,
width : 18
} , {
type : "bi.label" ,
text : "#" ,
width : 10
} , {
type : "bi.small_text_editor" ,
ref : function ( _ref ) {
self . hexEditor = _ref ;
} ,
cls : "color-picker-editor-input" ,
validationChecker : this . _hexChecker ,
allowBlank : true ,
errorText : BI . i18nText ( "BI-Color_Picker_Error_Text_Hex" ) ,
width : c . HEX _WIDTH ,
items : [
{
el : {
type : "bi.vertical" ,
tgap : 10 ,
items : [
{
type : 'bi.vertical_adapt' ,
columnSize : [ "fill" , 'fill' ] ,
height : 24 ,
listeners : [ {
eventName : "EVENT_CHANGE" ,
action : function ( ) {
self . _checkHexEditor ( ) ;
if ( checker ( self . storeValue . r ) && checker ( self . storeValue . g ) && checker ( self . storeValue . b ) ) {
self . colorShow . element . css ( "background-color" , self . getValue ( ) ) ;
self . fireEvent ( BI . ColorPickerEditor . EVENT _CHANGE ) ;
items : [
{
type : "bi.color_picker_show_button" ,
cls : "trans-color-icon" ,
height : 22 ,
title : BI . i18nText ( "BI-Transparent_Color" ) ,
text : BI . i18nText ( "BI-Transparent_Color" ) ,
listeners : [
{
eventName : BI . ColorChooserShowButton . EVENT _CHANGE ,
action : function ( ) {
self . setValue ( "transparent" ) ;
self . fireEvent ( BI . ColorPickerEditor . EVENT _CHANGE ) ;
}
}
] ,
ref : function ( _ref ) {
self . transparent = _ref ;
}
} , {
el : {
type : "bi.color_picker_show_button" ,
cls : "auto-color-icon" ,
height : 22 ,
title : BI . i18nText ( "BI-Basic_Auto" ) ,
text : BI . i18nText ( "BI-Basic_Auto" ) ,
listeners : [
{
eventName : BI . ColorChooserShowButton . EVENT _CHANGE ,
action : function ( ) {
self . setValue ( "" ) ;
self . fireEvent ( BI . ColorPickerEditor . EVENT _CHANGE ) ;
}
}
] ,
ref : function ( _ref ) {
self . none = _ref ;
}
} ,
lgap : 10 ,
}
} ]
} , RGB [ 0 ] , {
el : BI . extend ( Ws [ 0 ] , {
ref : function ( _ref ) {
self . R = _ref
}
} ) ,
width : c . RGB _WIDTH
} , RGB [ 1 ] , {
el : BI . extend ( Ws [ 1 ] , {
ref : function ( _ref ) {
self . G = _ref
}
} ) ,
width : c . RGB _WIDTH
} , RGB [ 2 ] , {
el : BI . extend ( Ws [ 2 ] , {
ref : function ( _ref ) {
self . B = _ref
}
} ) ,
rgap : - 5 ,
width : c . RGB _WIDTH
} ]
}
} ]
} ,
left : 0 ,
right : 0 ,
top : 0 ,
bottom : 0
} ]
]
} , {
el : {
type : "bi.vertical_adapt" ,
columnSize : [ 22 , 10 , 'fill' , 12 , c . RGB _WIDTH , 12 , c . RGB _WIDTH , 12 , c . RGB _WIDTH ] ,
rgap : 5 ,
items : [
{
el : {
type : "bi.layout" ,
cls : "color-picker-editor-display bi-card bi-border" ,
height : 22 ,
width : 22 ,
ref : function ( _ref ) {
self . colorShow = _ref ;
}
} ,
width : 18
} , {
type : "bi.label" ,
text : "#" ,
width : 10
} , {
type : "bi.small_text_editor" ,
ref : function ( _ref ) {
self . hexEditor = _ref ;
} ,
cls : "color-picker-editor-input bi-border-radius" ,
validationChecker : this . _hexChecker ,
allowBlank : true ,
errorText : BI . i18nText ( "BI-Color_Picker_Error_Text_Hex" ) ,
width : c . HEX _WIDTH ,
height : 24 ,
listeners : [
{
eventName : "EVENT_CHANGE" ,
action : function ( ) {
self . _checkHexEditor ( ) ;
if ( checker ( self . storeValue . r ) && checker ( self . storeValue . g ) && checker ( self . storeValue . b ) ) {
self . colorShow . element . css ( "background-color" , self . getValue ( ) ) ;
self . fireEvent ( BI . ColorPickerEditor . EVENT _CHANGE ) ;
}
}
}
]
} , RGB [ 0 ] , {
el : BI . extend ( Ws [ 0 ] , {
ref : function ( _ref ) {
self . R = _ref ;
}
} ) ,
width : c . RGB _WIDTH
} , RGB [ 1 ] , {
el : BI . extend ( Ws [ 1 ] , {
ref : function ( _ref ) {
self . G = _ref ;
}
} ) ,
width : c . RGB _WIDTH
} , RGB [ 2 ] , {
el : BI . extend ( Ws [ 2 ] , {
ref : function ( _ref ) {
self . B = _ref ;
}
} ) ,
rgap : - 5 ,
width : c . RGB _WIDTH
}
]
}
}
]
} ,
left : 0 ,
right : 0 ,
top : 0 ,
bottom : 0
}
]
} ;
} ,
@ -181,13 +197,13 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
} ,
_checkEditors : function ( ) {
if ( BI . isEmptyString ( this . R . getValue ( ) ) ) {
if ( BI . isEmptyString ( this . R . getValue ( ) ) ) {
this . R . setValue ( 0 ) ;
}
if ( BI . isEmptyString ( this . G . getValue ( ) ) ) {
if ( BI . isEmptyString ( this . G . getValue ( ) ) ) {
this . G . setValue ( 0 ) ;
}
if ( BI . isEmptyString ( this . B . getValue ( ) ) ) {
if ( BI . isEmptyString ( this . B . getValue ( ) ) ) {
this . B . setValue ( 0 ) ;
}
this . storeValue = {
@ -223,7 +239,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
} else if ( color === "transparent" ) {
this . colorShow . element . css ( "background-color" , "" ) . removeClass ( "auto-color-square-normal-background" ) . addClass ( "trans-color-background" ) ;
} else {
this . colorShow . element . css ( { "background-color" : color } ) . removeClass ( "auto-color-square-normal-background" ) . removeClass ( "trans-color-background" ) ;
this . colorShow . element . css ( { "background-color" : color } ) . removeClass ( "auto-color-square-normal-background" ) . removeClass ( "trans-color-background" ) ;
}
} ,