@ -10,10 +10,11 @@
var ColorPicker = function ( ) { var ColorPicker = function ( ) {
var var
ids = { } , ids = { } ,
penFlag = true ,
inAction , inAction ,
charMin = 65 , charMin = 65 ,
visible , visible ,
tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>' , tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="tools_change" ></div><div class="colorpicker_submit"></div></div>' ,
defaults = { defaults = {
eventName : 'click' , eventName : 'click' ,
onShow : function ( ) { } , onShow : function ( ) { } ,
@ -43,7 +44,11 @@
. eq ( 0 ) . val ( HSBToHex ( hsb ) ) . end ( ) ; . eq ( 0 ) . val ( HSBToHex ( hsb ) ) . end ( ) ;
} , } ,
setSelector = function ( hsb , cal ) { setSelector = function ( hsb , cal ) {
$ ( cal ) . data ( 'colorpicker' ) . selector . css ( 'backgroundColor' , '#' + HSBToHex ( { h : hsb . h , s : 100 , b : 100 } ) ) ; $ ( cal ) . data ( 'colorpicker' ) . selector . css ( 'backgroundColor' , '#' + HSBToHex ( {
h : hsb . h ,
s : 100 ,
b : 100
} ) ) ;
$ ( cal ) . data ( 'colorpicker' ) . selectorIndic . css ( { $ ( cal ) . data ( 'colorpicker' ) . selectorIndic . css ( {
left : parseInt ( 150 * hsb . s / 100 , 10 ) , left : parseInt ( 150 * hsb . s / 100 , 10 ) ,
top : parseInt ( 150 * ( 100 - hsb . b ) / 100 , 10 ) top : parseInt ( 150 * ( 100 - hsb . b ) / 100 , 10 )
@ -57,8 +62,17 @@
} , } ,
setNewColor = function ( hsb , cal ) { setNewColor = function ( hsb , cal ) {
$ ( cal ) . data ( 'colorpicker' ) . newColor . css ( 'backgroundColor' , '#' + HSBToHex ( hsb ) ) ; $ ( cal ) . data ( 'colorpicker' ) . newColor . css ( 'backgroundColor' , '#' + HSBToHex ( hsb ) ) ;
if ( penFlag ) {
$ ( "div.tools_change" ) . removeClass ( "tools_compass" ) ;
window . sankore . setTool ( 'pen' ) ;
window . sankore . setTool ( 'pen' ) ;
window . sankore . setPenColor ( '#' + HSBToHex ( hsb ) ) ; window . sankore . setPenColor ( '#' + HSBToHex ( hsb ) ) ;
sankore . returnStatus ( "PEN installed" , penFlag ) ;
} else {
$ ( "div.tools_change" ) . addClass ( "tools_compass" ) ;
window . sankore . setTool ( 'compass' ) ;
window . sankore . setPenColor ( '#' + HSBToHex ( hsb ) ) ;
sankore . returnStatus ( "Compass installed" , penFlag ) ;
}
} , } ,
keyDown = function ( ev ) { keyDown = function ( ev ) {
var pressedKey = ev . charCode || ev . keyCode || - 1 ; var pressedKey = ev . charCode || ev . keyCode || - 1 ;
@ -203,6 +217,22 @@
setCurrentColor ( col , cal . get ( 0 ) ) ; setCurrentColor ( col , cal . get ( 0 ) ) ;
cal . data ( 'colorpicker' ) . onSubmit ( col , HSBToHex ( col ) , HSBToRGB ( col ) , cal . data ( 'colorpicker' ) . el ) ;
cal . data ( 'colorpicker' ) . onSubmit ( col , HSBToHex ( col ) , HSBToRGB ( col ) , cal . data ( 'colorpicker' ) . el ) ;
} ,
} ,
mouseOverBorder = function ( ev ) {
$ ( this ) . addClass ( "tools_border" ) ;
} ,
mouseOutBorder = function ( ev ) {
$ ( this ) . removeClass ( "tools_border" ) ;
} ,
clickToolsChange = function ( ev ) {
var cal = $ ( this ) . parent ( ) ;
var col = cal . data ( 'colorpicker' ) . color ;
cal . data ( 'colorpicker' ) . origColor = col ;
setCurrentColor ( col , cal . get ( 0 ) ) ;
cal . data ( 'colorpicker' ) . onSubmit ( col , HSBToHex ( col ) , HSBToRGB ( col ) , cal . data ( 'colorpicker' ) . el ) ;
penFlag = ( penFlag ) ? false : true ;
setNewColor ( col , cal . get ( 0 ) ) ;
sankore . returnStatus ( "startEditing()" , penFlag ) ;
} ,
show = function ( ev ) { show = function ( ev ) {
var cal = $ ( '#' + $ ( this ) . data ( 'colorpickerId' ) ) ; var cal = $ ( '#' + $ ( this ) . data ( 'colorpickerId' ) ) ;
cal . data ( 'colorpicker' ) . onBeforeShow . apply ( this , [ cal . get ( 0 ) ] ) ; cal . data ( 'colorpicker' ) . onBeforeShow . apply ( this , [ cal . get ( 0 ) ] ) ;
@ -216,11 +246,16 @@
if ( left + 356 > viewPort . l + viewPort . w ) { if ( left + 356 > viewPort . l + viewPort . w ) {
left -= 356 ; left -= 356 ;
} }
cal . css ( { left : left + 'px' , top : top + 'px' } ) ; cal . css ( {
left : left + 'px' ,
top : top + 'px'
} ) ;
if ( cal . data ( 'colorpicker' ) . onShow . apply ( this , [ cal . get ( 0 ) ] ) != false ) { if ( cal . data ( 'colorpicker' ) . onShow . apply ( this , [ cal . get ( 0 ) ] ) != false ) {
cal . show ( ) ; cal . show ( ) ;
} }
$ ( document ) . bind ( 'mousedown' , { cal : cal } , hide ) ; $ ( document ) . bind ( 'mousedown' , {
cal : cal
} , hide ) ;
return false ; return false ;
} , } ,
hide = function ( ev ) { hide = function ( ev ) {
@ -286,7 +321,11 @@
} ,
} ,
HexToRGB = function ( hex ) { HexToRGB = function ( hex ) {
var hex = parseInt ( ( ( hex . indexOf ( '#' ) > - 1 ) ? hex . substring ( 1 ) : hex ) , 16 ) ; var hex = parseInt ( ( ( hex . indexOf ( '#' ) > - 1 ) ? hex . substring ( 1 ) : hex ) , 16 ) ;
return { r : hex >> 16 , g : ( hex & 0x00FF00 ) >> 8 , b : ( hex & 0x0000FF ) } ; return {
r : hex >> 16 ,
g : ( hex & 0x00FF00 ) >> 8 ,
b : ( hex & 0x0000FF )
} ;
} , } ,
HexToHSB = function ( hex ) { HexToHSB = function ( hex ) {
return RGBToHSB ( HexToRGB ( hex ) ) ; return RGBToHSB ( HexToRGB ( hex ) ) ;
@ -336,15 +375,47 @@
var t2 = ( 255 - s ) * v / 255 ; var t2 = ( 255 - s ) * v / 255 ;
var t3 = ( t1 - t2 ) * ( h % 60 ) / 60 ; var t3 = ( t1 - t2 ) * ( h % 60 ) / 60 ;
if ( h == 360 ) h = 0 ; if ( h == 360 ) h = 0 ;
if ( h < 60 ) { rgb . r = t1 ; rgb . b = t2 ; rgb . g = t2 + t3 } if ( h < 60 ) {
else if ( h < 120 ) { rgb . g = t1 ; rgb . b = t2 ; rgb . r = t1 - t3 } rgb . r = t1 ;
else if ( h < 180 ) { rgb . g = t1 ; rgb . r = t2 ; rgb . b = t2 + t3 } rgb . b = t2 ;
else if ( h < 240 ) { rgb . b = t1 ; rgb . r = t2 ; rgb . g = t1 - t3 } rgb . g = t2 + 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 if ( h < 120 ) {
else { rgb . r = 0 ; rgb . g = 0 ; rgb . b = 0 } 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
} }
return { r : Math . round ( rgb . r ) , g : Math . round ( rgb . g ) , b : Math . round ( rgb . b ) } ; 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 )
} ;
} , } ,
RGBToHex = function ( rgb ) { RGBToHex = function ( rgb ) {
var hex = [ var hex = [
@ -418,6 +489,10 @@
. bind ( 'mouseenter' , enterSubmit ) . bind ( 'mouseenter' , enterSubmit )
. bind ( 'mouseleave' , leaveSubmit ) . bind ( 'mouseleave' , leaveSubmit )
. bind ( 'click' , clickSubmit ) ; . bind ( 'click' , clickSubmit ) ;
cal . find ( 'div.tools_change' )
. bind ( 'mouseover' , mouseOverBorder )
. bind ( 'mouseout' , mouseOutBorder )
. bind ( 'click' , clickToolsChange ) ;
fillRGBFields ( options . color , cal . get ( 0 ) ) ; fillRGBFields ( options . color , cal . get ( 0 ) ) ;
fillHSBFields ( options . color , cal . get ( 0 ) ) ; fillHSBFields ( options . color , cal . get ( 0 ) ) ;
fillHexFields ( options . color , cal . get ( 0 ) ) ; fillHexFields ( options . color , cal . get ( 0 ) ) ;
Claudio Valerio
13 years ago
