2012-05-02 20:01:17 +02:00
/ *
* jPicker 1.1 . 6
*
* jQuery Plugin for Photoshop style color picker
*
* Copyright ( c ) 2010 Christopher T . Tillman
* Digital Magic Productions , Inc . ( http : //www.digitalmagicpro.com/)
* MIT style license , FREE to use , alter , copy , sell , and especially ENHANCE
*
* Painstakingly ported from John Dyers ' excellent work on his own color picker based on the Prototype framework .
*
* John Dyers ' website : ( http : //johndyer.name)
* Color Picker page : ( http : //johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx)
*
* /
( function ( $ , version )
{
Math . precision = function ( value , precision )
{
if ( precision === undefined ) precision = 0 ;
return Math . round ( value * Math . pow ( 10 , precision ) ) / Math . pow ( 10 , precision ) ;
} ;
var Slider = // encapsulate slider functionality for the ColorMap and ColorBar - could be useful to use a jQuery UI draggable for this with certain extensions
function ( bar , options )
{
var $this = this , // private properties, methods, and events - keep these variables and classes invisible to outside code
arrow = bar . find ( 'img:first' ) , // the arrow image to drag
minX = 0 ,
maxX = 100 ,
rangeX = 100 ,
minY = 0 ,
maxY = 100 ,
rangeY = 100 ,
x = 0 ,
y = 0 ,
offset ,
timeout ,
changeEvents = new Array ( ) ,
fireChangeEvents =
function ( context )
{
for ( var i = 0 ; i < changeEvents . length ; i ++ ) changeEvents [ i ] . call ( $this , $this , context ) ;
} ,
mouseDown = // bind the mousedown to the bar not the arrow for quick snapping to the clicked location
function ( e )
{
var off = bar . offset ( ) ;
offset = { l : off . left | 0 , t : off . top | 0 } ;
clearTimeout ( timeout ) ;
timeout = setTimeout ( // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
function ( )
{
setValuesFromMousePosition . call ( $this , e ) ;
} , 0 ) ;
// Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
$ ( document ) . bind ( 'mousemove' , mouseMove ) . bind ( 'mouseup' , mouseUp ) ;
e . preventDefault ( ) ; // don't try to select anything or drag the image to the desktop
} ,
mouseMove = // set the values as the mouse moves
function ( e )
{
clearTimeout ( timeout ) ;
timeout = setTimeout (
function ( )
{
setValuesFromMousePosition . call ( $this , e ) ;
} , 0 ) ;
e . stopPropagation ( ) ;
e . preventDefault ( ) ;
return false ;
} ,
mouseUp = // unbind the document events - they aren't needed when not dragging
function ( e )
{
$ ( document ) . unbind ( 'mouseup' , mouseUp ) . unbind ( 'mousemove' , mouseMove ) ;
e . stopPropagation ( ) ;
e . preventDefault ( ) ;
return false ;
} ,
setValuesFromMousePosition = // calculate mouse position and set value within the current range
function ( e )
{
var locX = e . pageX - offset . l ,
locY = e . pageY - offset . t ,
barW = bar . w , // local copies for YUI compressor
barH = bar . h ;
// keep the arrow within the bounds of the bar
if ( locX < 0 ) locX = 0 ;
else if ( locX > barW ) locX = barW ;
if ( locY < 0 ) locY = 0 ;
else if ( locY > barH ) locY = barH ;
val . call ( $this , 'xy' , { x : ( ( locX / barW ) * rangeX ) + minX , y : ( ( locY / barH ) * rangeY ) + minY } ) ;
} ,
draw =
function ( )
{
var arrowOffsetX = 0 ,
arrowOffsetY = 0 ,
barW = bar . w ,
barH = bar . h ,
arrowW = arrow . w ,
arrowH = arrow . h ;
setTimeout (
function ( )
{
if ( rangeX > 0 ) // range is greater than zero
{
// constrain to bounds
if ( x == maxX ) arrowOffsetX = barW ;
else arrowOffsetX = ( ( x / rangeX ) * barW ) | 0 ;
}
if ( rangeY > 0 ) // range is greater than zero
{
// constrain to bounds
if ( y == maxY ) arrowOffsetY = barH ;
else arrowOffsetY = ( ( y / rangeY ) * barH ) | 0 ;
}
// if arrow width is greater than bar width, center arrow and prevent horizontal dragging
if ( arrowW >= barW ) arrowOffsetX = ( barW >> 1 ) - ( arrowW >> 1 ) ; // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
else arrowOffsetX -= arrowW >> 1 ;
// if arrow height is greater than bar height, center arrow and prevent vertical dragging
if ( arrowH >= barH ) arrowOffsetY = ( barH >> 1 ) - ( arrowH >> 1 ) ;
else arrowOffsetY -= arrowH >> 1 ;
// set the arrow position based on these offsets
arrow . css ( { left : arrowOffsetX + 'px' , top : arrowOffsetY + 'px' } ) ;
} , 0 ) ;
} ,
val =
function ( name , value , context )
{
var set = value !== undefined ;
if ( ! set )
{
if ( name === undefined || name == null ) name = 'xy' ;
switch ( name . toLowerCase ( ) )
{
case 'x' : return x ;
case 'y' : return y ;
case 'xy' :
default : return { x : x , y : y } ;
}
}
if ( context != null && context == $this ) return ;
var changed = false ,
newX ,
newY ;
if ( name == null ) name = 'xy' ;
switch ( name . toLowerCase ( ) )
{
case 'x' :
newX = value && ( value . x && value . x | 0 || value | 0 ) || 0 ;
break ;
case 'y' :
newY = value && ( value . y && value . y | 0 || value | 0 ) || 0 ;
break ;
case 'xy' :
default :
newX = value && value . x && value . x | 0 || 0 ;
newY = value && value . y && value . y | 0 || 0 ;
break ;
}
if ( newX != null )
{
if ( newX < minX ) newX = minX ;
else if ( newX > maxX ) newX = maxX ;
if ( x != newX )
{
x = newX ;
changed = true ;
}
}
if ( newY != null )
{
if ( newY < minY ) newY = minY ;
else if ( newY > maxY ) newY = maxY ;
if ( y != newY )
{
y = newY ;
changed = true ;
}
}
changed && fireChangeEvents . call ( $this , context || $this ) ;
} ,
range =
function ( name , value )
{
var set = value !== undefined ;
if ( ! set )
{
if ( name === undefined || name == null ) name = 'all' ;
switch ( name . toLowerCase ( ) )
{
case 'minx' : return minX ;
case 'maxx' : return maxX ;
case 'rangex' : return { minX : minX , maxX : maxX , rangeX : rangeX } ;
case 'miny' : return minY ;
case 'maxy' : return maxY ;
case 'rangey' : return { minY : minY , maxY : maxY , rangeY : rangeY } ;
case 'all' :
default : return { minX : minX , maxX : maxX , rangeX : rangeX , minY : minY , maxY : maxY , rangeY : rangeY } ;
}
}
var changed = false ,
newMinX ,
newMaxX ,
newMinY ,
newMaxY ;
if ( name == null ) name = 'all' ;
switch ( name . toLowerCase ( ) )
{
case 'minx' :
newMinX = value && ( value . minX && value . minX | 0 || value | 0 ) || 0 ;
break ;
case 'maxx' :
newMaxX = value && ( value . maxX && value . maxX | 0 || value | 0 ) || 0 ;
break ;
case 'rangex' :
newMinX = value && value . minX && value . minX | 0 || 0 ;
newMaxX = value && value . maxX && value . maxX | 0 || 0 ;
break ;
case 'miny' :
newMinY = value && ( value . minY && value . minY | 0 || value | 0 ) || 0 ;
break ;
case 'maxy' :
newMaxY = value && ( value . maxY && value . maxY | 0 || value | 0 ) || 0 ;
break ;
case 'rangey' :
newMinY = value && value . minY && value . minY | 0 || 0 ;
newMaxY = value && value . maxY && value . maxY | 0 || 0 ;
break ;
case 'all' :
default :
newMinX = value && value . minX && value . minX | 0 || 0 ;
newMaxX = value && value . maxX && value . maxX | 0 || 0 ;
newMinY = value && value . minY && value . minY | 0 || 0 ;
newMaxY = value && value . maxY && value . maxY | 0 || 0 ;
break ;
}
if ( newMinX != null && minX != newMinX )
{
minX = newMinX ;
rangeX = maxX - minX ;
}
if ( newMaxX != null && maxX != newMaxX )
{
maxX = newMaxX ;
rangeX = maxX - minX ;
}
if ( newMinY != null && minY != newMinY )
{
minY = newMinY ;
rangeY = maxY - minY ;
}
if ( newMaxY != null && maxY != newMaxY )
{
maxY = newMaxY ;
rangeY = maxY - minY ;
}
} ,
bind =
function ( callback )
{
if ( $ . isFunction ( callback ) ) changeEvents . push ( callback ) ;
} ,
unbind =
function ( callback )
{
if ( ! $ . isFunction ( callback ) ) return ;
var i ;
while ( ( i = $ . inArray ( callback , changeEvents ) ) != - 1 ) changeEvents . splice ( i , 1 ) ;
} ,
destroy =
function ( )
{
// unbind all possible events and null objects
$ ( document ) . unbind ( 'mouseup' , mouseUp ) . unbind ( 'mousemove' , mouseMove ) ;
bar . unbind ( 'mousedown' , mouseDown ) ;
bar = null ;
arrow = null ;
changeEvents = null ;
} ;
$ . extend ( true , $this , // public properties, methods, and event bindings - these we need to access from other controls
{
val : val ,
range : range ,
bind : bind ,
unbind : unbind ,
destroy : destroy
} ) ;
// initialize this control
arrow . src = options . arrow && options . arrow . image ;
arrow . w = options . arrow && options . arrow . width || arrow . width ( ) ;
arrow . h = options . arrow && options . arrow . height || arrow . height ( ) ;
bar . w = options . map && options . map . width || bar . width ( ) ;
bar . h = options . map && options . map . height || bar . height ( ) ;
// bind mousedown event
bar . bind ( 'mousedown' , mouseDown ) ;
bind . call ( $this , draw ) ;
} ,
ColorValuePicker = // controls for all the input elements for the typing in color values
function ( picker , color , bindedHex , alphaPrecision )
{
var $this = this , // private properties and methods
inputs = picker . find ( 'td.Text input' ) ,
red = inputs . eq ( 3 ) ,
green = inputs . eq ( 4 ) ,
blue = inputs . eq ( 5 ) ,
alpha = inputs . length > 7 ? inputs . eq ( 6 ) : null ,
hue = inputs . eq ( 0 ) ,
saturation = inputs . eq ( 1 ) ,
value = inputs . eq ( 2 ) ,
hex = inputs . eq ( inputs . length > 7 ? 7 : 6 ) ,
ahex = inputs . length > 7 ? inputs . eq ( 8 ) : null ,
keyDown = // input box key down - use arrows to alter color
function ( e )
{
if ( e . target . value == '' && e . target != hex . get ( 0 ) && ( bindedHex != null && e . target != bindedHex . get ( 0 ) || bindedHex == null ) ) return ;
if ( ! validateKey ( e ) ) return e ;
switch ( e . target )
{
case red . get ( 0 ) :
switch ( e . keyCode )
{
case 38 :
red . val ( setValueInRange . call ( $this , ( red . val ( ) << 0 ) + 1 , 0 , 255 ) ) ;
color . val ( 'r' , red . val ( ) , e . target ) ;
return false ;
case 40 :
red . val ( setValueInRange . call ( $this , ( red . val ( ) << 0 ) - 1 , 0 , 255 ) ) ;
color . val ( 'r' , red . val ( ) , e . target ) ;
return false ;
}
break ;
case green . get ( 0 ) :
switch ( e . keyCode )
{
case 38 :
green . val ( setValueInRange . call ( $this , ( green . val ( ) << 0 ) + 1 , 0 , 255 ) ) ;
color . val ( 'g' , green . val ( ) , e . target ) ;
return false ;
case 40 :
green . val ( setValueInRange . call ( $this , ( green . val ( ) << 0 ) - 1 , 0 , 255 ) ) ;
color . val ( 'g' , green . val ( ) , e . target ) ;
return false ;
}
break ;
case blue . get ( 0 ) :
switch ( e . keyCode )
{
case 38 :
blue . val ( setValueInRange . call ( $this , ( blue . val ( ) << 0 ) + 1 , 0 , 255 ) ) ;
color . val ( 'b' , blue . val ( ) , e . target ) ;
return false ;
case 40 :
blue . val ( setValueInRange . call ( $this , ( blue . val ( ) << 0 ) - 1 , 0 , 255 ) ) ;
color . val ( 'b' , blue . val ( ) , e . target ) ;
return false ;
}
break ;
case alpha && alpha . get ( 0 ) :
switch ( e . keyCode )
{
case 38 :
alpha . val ( setValueInRange . call ( $this , parseFloat ( alpha . val ( ) ) + 1 , 0 , 100 ) ) ;
color . val ( 'a' , Math . precision ( ( alpha . val ( ) * 255 ) / 100 , alphaPrecision ) , e . target ) ;
return false ;
case 40 :
alpha . val ( setValueInRange . call ( $this , parseFloat ( alpha . val ( ) ) - 1 , 0 , 100 ) ) ;
color . val ( 'a' , Math . precision ( ( alpha . val ( ) * 255 ) / 100 , alphaPrecision ) , e . target ) ;
return false ;
}
break ;
case hue . get ( 0 ) :
switch ( e . keyCode )
{
case 38 :
hue . val ( setValueInRange . call ( $this , ( hue . val ( ) << 0 ) + 1 , 0 , 360 ) ) ;
color . val ( 'h' , hue . val ( ) , e . target ) ;
return false ;
case 40 :
hue . val ( setValueInRange . call ( $this , ( hue . val ( ) << 0 ) - 1 , 0 , 360 ) ) ;
color . val ( 'h' , hue . val ( ) , e . target ) ;
return false ;
}
break ;
case saturation . get ( 0 ) :
switch ( e . keyCode )
{
case 38 :
saturation . val ( setValueInRange . call ( $this , ( saturation . val ( ) << 0 ) + 1 , 0 , 100 ) ) ;
color . val ( 's' , saturation . val ( ) , e . target ) ;
return false ;
case 40 :
saturation . val ( setValueInRange . call ( $this , ( saturation . val ( ) << 0 ) - 1 , 0 , 100 ) ) ;
color . val ( 's' , saturation . val ( ) , e . target ) ;
return false ;
}
break ;
case value . get ( 0 ) :
switch ( e . keyCode )
{
case 38 :
value . val ( setValueInRange . call ( $this , ( value . val ( ) << 0 ) + 1 , 0 , 100 ) ) ;
color . val ( 'v' , value . val ( ) , e . target ) ;
return false ;
case 40 :
value . val ( setValueInRange . call ( $this , ( value . val ( ) << 0 ) - 1 , 0 , 100 ) ) ;
color . val ( 'v' , value . val ( ) , e . target ) ;
return false ;
}
break ;
}
} ,
keyUp = // input box key up - validate value and set color
function ( e )
{
if ( e . target . value == '' && e . target != hex . get ( 0 ) && ( bindedHex != null && e . target != bindedHex . get ( 0 ) || bindedHex == null ) ) return ;
if ( ! validateKey ( e ) ) return e ;
switch ( e . target )
{
case red . get ( 0 ) :
red . val ( setValueInRange . call ( $this , red . val ( ) , 0 , 255 ) ) ;
color . val ( 'r' , red . val ( ) , e . target ) ;
break ;
case green . get ( 0 ) :
green . val ( setValueInRange . call ( $this , green . val ( ) , 0 , 255 ) ) ;
color . val ( 'g' , green . val ( ) , e . target ) ;
break ;
case blue . get ( 0 ) :
blue . val ( setValueInRange . call ( $this , blue . val ( ) , 0 , 255 ) ) ;
color . val ( 'b' , blue . val ( ) , e . target ) ;
break ;
case alpha && alpha . get ( 0 ) :
alpha . val ( setValueInRange . call ( $this , alpha . val ( ) , 0 , 100 ) ) ;
color . val ( 'a' , Math . precision ( ( alpha . val ( ) * 255 ) / 100 , alphaPrecision ) , e . target ) ;
break ;
case hue . get ( 0 ) :
hue . val ( setValueInRange . call ( $this , hue . val ( ) , 0 , 360 ) ) ;
color . val ( 'h' , hue . val ( ) , e . target ) ;
break ;
case saturation . get ( 0 ) :
saturation . val ( setValueInRange . call ( $this , saturation . val ( ) , 0 , 100 ) ) ;
color . val ( 's' , saturation . val ( ) , e . target ) ;
break ;
case value . get ( 0 ) :
value . val ( setValueInRange . call ( $this , value . val ( ) , 0 , 100 ) ) ;
color . val ( 'v' , value . val ( ) , e . target ) ;
break ;
case hex . get ( 0 ) :
hex . val ( hex . val ( ) . replace ( /[^a-fA-F0-9]/g , '' ) . toLowerCase ( ) . substring ( 0 , 6 ) ) ;
bindedHex && bindedHex . val ( hex . val ( ) ) ;
color . val ( 'hex' , hex . val ( ) != '' ? hex . val ( ) : null , e . target ) ;
break ;
case bindedHex && bindedHex . get ( 0 ) :
bindedHex . val ( bindedHex . val ( ) . replace ( /[^a-fA-F0-9]/g , '' ) . toLowerCase ( ) . substring ( 0 , 6 ) ) ;
hex . val ( bindedHex . val ( ) ) ;
color . val ( 'hex' , bindedHex . val ( ) != '' ? bindedHex . val ( ) : null , e . target ) ;
break ;
case ahex && ahex . get ( 0 ) :
ahex . val ( ahex . val ( ) . replace ( /[^a-fA-F0-9]/g , '' ) . toLowerCase ( ) . substring ( 0 , 2 ) ) ;
color . val ( 'a' , ahex . val ( ) != null ? parseInt ( ahex . val ( ) , 16 ) : null , e . target ) ;
break ;
}
} ,
blur = // input box blur - reset to original if value empty
function ( e )
{
if ( color . val ( ) != null )
{
switch ( e . target )
{
case red . get ( 0 ) : red . val ( color . val ( 'r' ) ) ; break ;
case green . get ( 0 ) : green . val ( color . val ( 'g' ) ) ; break ;
case blue . get ( 0 ) : blue . val ( color . val ( 'b' ) ) ; break ;
case alpha && alpha . get ( 0 ) : alpha . val ( Math . precision ( ( color . val ( 'a' ) * 100 ) / 255 , alphaPrecision ) ) ; break ;
case hue . get ( 0 ) : hue . val ( color . val ( 'h' ) ) ; break ;
case saturation . get ( 0 ) : saturation . val ( color . val ( 's' ) ) ; break ;
case value . get ( 0 ) : value . val ( color . val ( 'v' ) ) ; break ;
case hex . get ( 0 ) :
case bindedHex && bindedHex . get ( 0 ) :
hex . val ( color . val ( 'hex' ) ) ;
bindedHex && bindedHex . val ( color . val ( 'hex' ) ) ;
break ;
case ahex && ahex . get ( 0 ) : ahex . val ( color . val ( 'ahex' ) . substring ( 6 ) ) ; break ;
}
}
} ,
validateKey = // validate key
function ( e )
{
switch ( e . keyCode )
{
case 9 :
case 16 :
case 29 :
case 37 :
case 39 :
return false ;
case 'c' . charCodeAt ( ) :
case 'v' . charCodeAt ( ) :
if ( e . ctrlKey ) return false ;
}
return true ;
} ,
setValueInRange = // constrain value within range
function ( value , min , max )
{
if ( value == '' || isNaN ( value ) ) return min ;
if ( value > max ) return max ;
if ( value < min ) return min ;
return value ;
} ,
colorChanged =
function ( ui , context )
{
var all = ui . val ( 'all' ) ;
if ( context != red . get ( 0 ) ) red . val ( all != null ? all . r : '' ) ;
if ( context != green . get ( 0 ) ) green . val ( all != null ? all . g : '' ) ;
if ( context != blue . get ( 0 ) ) blue . val ( all != null ? all . b : '' ) ;
if ( alpha && context != alpha . get ( 0 ) ) alpha . val ( all != null ? Math . precision ( ( all . a * 100 ) / 255 , alphaPrecision ) : '' ) ;
if ( context != hue . get ( 0 ) ) hue . val ( all != null ? all . h : '' ) ;
if ( context != saturation . get ( 0 ) ) saturation . val ( all != null ? all . s : '' ) ;
if ( context != value . get ( 0 ) ) value . val ( all != null ? all . v : '' ) ;
if ( context != hex . get ( 0 ) && ( bindedHex && context != bindedHex . get ( 0 ) || ! bindedHex ) ) hex . val ( all != null ? all . hex : '' ) ;
if ( bindedHex && context != bindedHex . get ( 0 ) && context != hex . get ( 0 ) ) bindedHex . val ( all != null ? all . hex : '' ) ;
if ( ahex && context != ahex . get ( 0 ) ) ahex . val ( all != null ? all . ahex . substring ( 6 ) : '' ) ;
} ,
destroy =
function ( )
{
// unbind all events and null objects
red . add ( green ) . add ( blue ) . add ( alpha ) . add ( hue ) . add ( saturation ) . add ( value ) . add ( hex ) . add ( bindedHex ) . add ( ahex ) . unbind ( 'keyup' , keyUp ) . unbind ( 'blur' , blur ) ;
red . add ( green ) . add ( blue ) . add ( alpha ) . add ( hue ) . add ( saturation ) . add ( value ) . unbind ( 'keydown' , keyDown ) ;
color . unbind ( colorChanged ) ;
red = null ;
green = null ;
blue = null ;
alpha = null ;
hue = null ;
saturation = null ;
value = null ;
hex = null ;
ahex = null ;
} ;
$ . extend ( true , $this , // public properties and methods
{
destroy : destroy
} ) ;
red . add ( green ) . add ( blue ) . add ( alpha ) . add ( hue ) . add ( saturation ) . add ( value ) . add ( hex ) . add ( bindedHex ) . add ( ahex ) . bind ( 'keyup' , keyUp ) . bind ( 'blur' , blur ) ;
red . add ( green ) . add ( blue ) . add ( alpha ) . add ( hue ) . add ( saturation ) . add ( value ) . bind ( 'keydown' , keyDown ) ;
color . bind ( colorChanged ) ;
} ;
$ . jPicker =
{
List : [ ] , // array holding references to each active instance of the control
Color : // color object - we will be able to assign by any color space type or retrieve any color space info
// we want this public so we can optionally assign new color objects to initial values using inputs other than a string hex value (also supported)
function ( init )
{
var $this = this ,
r ,
g ,
b ,
a ,
h ,
s ,
v ,
changeEvents = new Array ( ) ,
fireChangeEvents =
function ( context )
{
for ( var i = 0 ; i < changeEvents . length ; i ++ ) changeEvents [ i ] . call ( $this , $this , context ) ;
} ,
val =
function ( name , value , context )
{
var set = value !== undefined ;
if ( ! set )
{
if ( name === undefined || name == null || name == '' ) name = 'all' ;
if ( r == null ) return null ;
switch ( name . toLowerCase ( ) )
{
case 'ahex' : return ColorMethods . rgbaToHex ( { r : r , g : g , b : b , a : a } ) ;
case 'hex' : return val ( 'ahex' ) . substring ( 0 , 6 ) ;
case 'all' : return { r : r , g : g , b : b , a : a , h : h , s : s , v : v , hex : val . call ( $this , 'hex' ) , ahex : val . call ( $this , 'ahex' ) } ;
default :
var ret = { } ;
for ( var i = 0 ; i < name . length ; i ++ )
{
switch ( name . charAt ( i ) )
{
case 'r' :
if ( name . length == 1 ) ret = r ;
else ret . r = r ;
break ;
case 'g' :
if ( name . length == 1 ) ret = g ;
else ret . g = g ;
break ;
case 'b' :
if ( name . length == 1 ) ret = b ;
else ret . b = b ;
break ;
case 'a' :
if ( name . length == 1 ) ret = a ;
else ret . a = a ;
break ;
case 'h' :
if ( name . length == 1 ) ret = h ;
else ret . h = h ;
break ;
case 's' :
if ( name . length == 1 ) ret = s ;
else ret . s = s ;
break ;
case 'v' :
if ( name . length == 1 ) ret = v ;
else ret . v = v ;
break ;
}
}
return ret == { } ? val . call ( $this , 'all' ) : ret ;
break ;
}
}
if ( context != null && context == $this ) return ;
var changed = false ;
if ( name == null ) name = '' ;
if ( value == null )
{
if ( r != null )
{
r = null ;
changed = true ;
}
if ( g != null )
{
g = null ;
changed = true ;
}
if ( b != null )
{
b = null ;
changed = true ;
}
if ( a != null )
{
a = null ;
changed = true ;
}
if ( h != null )
{
h = null ;
changed = true ;
}
if ( s != null )
{
s = null ;
changed = true ;
}
if ( v != null )
{
v = null ;
changed = true ;
}
changed && fireChangeEvents . call ( $this , context || $this ) ;
return ;
}
switch ( name . toLowerCase ( ) )
{
case 'ahex' :
case 'hex' :
var ret = ColorMethods . hexToRgba ( value && ( value . ahex || value . hex ) || value || '00000000' ) ;
val . call ( $this , 'rgba' , { r : ret . r , g : ret . g , b : ret . b , a : name == 'ahex' ? ret . a : a != null ? a : 255 } , context ) ;
break ;
default :
if ( value && ( value . ahex != null || value . hex != null ) )
{
val . call ( $this , 'ahex' , value . ahex || value . hex || '00000000' , context ) ;
return ;
}
var newV = { } , rgb = false , hsv = false ;
if ( value . r !== undefined && ! name . indexOf ( 'r' ) == - 1 ) name += 'r' ;
if ( value . g !== undefined && ! name . indexOf ( 'g' ) == - 1 ) name += 'g' ;
if ( value . b !== undefined && ! name . indexOf ( 'b' ) == - 1 ) name += 'b' ;
if ( value . a !== undefined && ! name . indexOf ( 'a' ) == - 1 ) name += 'a' ;
if ( value . h !== undefined && ! name . indexOf ( 'h' ) == - 1 ) name += 'h' ;
if ( value . s !== undefined && ! name . indexOf ( 's' ) == - 1 ) name += 's' ;
if ( value . v !== undefined && ! name . indexOf ( 'v' ) == - 1 ) name += 'v' ;
for ( var i = 0 ; i < name . length ; i ++ )
{
switch ( name . charAt ( i ) )
{
case 'r' :
if ( hsv ) continue ;
rgb = true ;
newV . r = value && value . r && value . r | 0 || value && value | 0 || 0 ;
if ( newV . r < 0 ) newV . r = 0 ;
else if ( newV . r > 255 ) newV . r = 255 ;
if ( r != newV . r )
{
r = newV . r ;
changed = true ;
}
break ;
case 'g' :
if ( hsv ) continue ;
rgb = true ;
newV . g = value && value . g && value . g | 0 || value && value | 0 || 0 ;
if ( newV . g < 0 ) newV . g = 0 ;
else if ( newV . g > 255 ) newV . g = 255 ;
if ( g != newV . g )
{
g = newV . g ;
changed = true ;
}
break ;
case 'b' :
if ( hsv ) continue ;
rgb = true ;
newV . b = value && value . b && value . b | 0 || value && value | 0 || 0 ;
if ( newV . b < 0 ) newV . b = 0 ;
else if ( newV . b > 255 ) newV . b = 255 ;
if ( b != newV . b )
{
b = newV . b ;
changed = true ;
}
break ;
case 'a' :
newV . a = value && value . a != null ? value . a | 0 : value != null ? value | 0 : 255 ;
if ( newV . a < 0 ) newV . a = 0 ;
else if ( newV . a > 255 ) newV . a = 255 ;
if ( a != newV . a )
{
a = newV . a ;
changed = true ;
}
break ;
case 'h' :
if ( rgb ) continue ;
hsv = true ;
newV . h = value && value . h && value . h | 0 || value && value | 0 || 0 ;
if ( newV . h < 0 ) newV . h = 0 ;
else if ( newV . h > 360 ) newV . h = 360 ;
if ( h != newV . h )
{
h = newV . h ;
changed = true ;
}
break ;
case 's' :
if ( rgb ) continue ;
hsv = true ;
newV . s = value && value . s != null ? value . s | 0 : value != null ? value | 0 : 100 ;
if ( newV . s < 0 ) newV . s = 0 ;
else if ( newV . s > 100 ) newV . s = 100 ;
if ( s != newV . s )
{
s = newV . s ;
changed = true ;
}
break ;
case 'v' :
if ( rgb ) continue ;
hsv = true ;
newV . v = value && value . v != null ? value . v | 0 : value != null ? value | 0 : 100 ;
if ( newV . v < 0 ) newV . v = 0 ;
else if ( newV . v > 100 ) newV . v = 100 ;
if ( v != newV . v )
{
v = newV . v ;
changed = true ;
}
break ;
}
}
if ( changed )
{
if ( rgb )
{
r = r || 0 ;
g = g || 0 ;
b = b || 0 ;
var ret = ColorMethods . rgbToHsv ( { r : r , g : g , b : b } ) ;
h = ret . h ;
s = ret . s ;
v = ret . v ;
}
else if ( hsv )
{
h = h || 0 ;
s = s != null ? s : 100 ;
v = v != null ? v : 100 ;
var ret = ColorMethods . hsvToRgb ( { h : h , s : s , v : v } ) ;
r = ret . r ;
g = ret . g ;
b = ret . b ;
}
a = a != null ? a : 255 ;
fireChangeEvents . call ( $this , context || $this ) ;
}
break ;
}
} ,
bind =
function ( callback )
{
if ( $ . isFunction ( callback ) ) changeEvents . push ( callback ) ;
} ,
unbind =
function ( callback )
{
if ( ! $ . isFunction ( callback ) ) return ;
var i ;
while ( ( i = $ . inArray ( callback , changeEvents ) ) != - 1 ) changeEvents . splice ( i , 1 ) ;
} ,
destroy =
function ( )
{
changeEvents = null ;
}
$ . extend ( true , $this , // public properties and methods
{
val : val ,
bind : bind ,
unbind : unbind ,
destroy : destroy
} ) ;
if ( init )
{
if ( init . ahex != null ) val ( 'ahex' , init ) ;
else if ( init . hex != null ) val ( ( init . a != null ? 'a' : '' ) + 'hex' , init . a != null ? { ahex : init . hex + ColorMethods . intToHex ( init . a ) } : init ) ;
else if ( init . r != null && init . g != null && init . b != null ) val ( 'rgb' + ( init . a != null ? 'a' : '' ) , init ) ;
else if ( init . h != null && init . s != null && init . v != null ) val ( 'hsv' + ( init . a != null ? 'a' : '' ) , init ) ;
}
} ,
ColorMethods : // color conversion methods - make public to give use to external scripts
{
hexToRgba :
function ( hex )
{
hex = this . validateHex ( hex ) ;
if ( hex == '' ) return { r : null , g : null , b : null , a : null } ;
var r = '00' , g = '00' , b = '00' , a = '255' ;
if ( hex . length == 6 ) hex += 'ff' ;
if ( hex . length > 6 )
{
r = hex . substring ( 0 , 2 ) ;
g = hex . substring ( 2 , 4 ) ;
b = hex . substring ( 4 , 6 ) ;
a = hex . substring ( 6 , hex . length ) ;
}
else
{
if ( hex . length > 4 )
{
r = hex . substring ( 4 , hex . length ) ;
hex = hex . substring ( 0 , 4 ) ;
}
if ( hex . length > 2 )
{
g = hex . substring ( 2 , hex . length ) ;
hex = hex . substring ( 0 , 2 ) ;
}
if ( hex . length > 0 ) b = hex . substring ( 0 , hex . length ) ;
}
return { r : this . hexToInt ( r ) , g : this . hexToInt ( g ) , b : this . hexToInt ( b ) , a : this . hexToInt ( a ) } ;
} ,
validateHex :
function ( hex )
{
hex = hex . toLowerCase ( ) . replace ( /[^a-f0-9]/g , '' ) ;
if ( hex . length > 8 ) hex = hex . substring ( 0 , 8 ) ;
return hex ;
} ,
rgbaToHex :
function ( rgba )
{
return this . intToHex ( rgba . r ) + this . intToHex ( rgba . g ) + this . intToHex ( rgba . b ) + this . intToHex ( rgba . a ) ;
} ,
intToHex :
function ( dec )
{
var result = ( dec | 0 ) . toString ( 16 ) ;
if ( result . length == 1 ) result = ( '0' + result ) ;
return result . toLowerCase ( ) ;
} ,
hexToInt :
function ( hex )
{
return parseInt ( hex , 16 ) ;
} ,
rgbToHsv :
function ( rgb )
{
var r = rgb . r / 255 , g = rgb . g / 255 , b = rgb . b / 255 , hsv = { h : 0 , s : 0 , v : 0 } , min = 0 , max = 0 , delta ;
if ( r >= g && r >= b )
{
max = r ;
min = g > b ? b : g ;
}
else if ( g >= b && g >= r )
{
max = g ;
min = r > b ? b : r ;
}
else
{
max = b ;
min = g > r ? r : g ;
}
hsv . v = max ;
hsv . s = max ? ( max - min ) / max : 0 ;
if ( ! hsv . s ) hsv . h = 0 ;
else
{
delta = max - min ;
if ( r == max ) hsv . h = ( g - b ) / delta ;
else if ( g == max ) hsv . h = 2 + ( b - r ) / delta ;
else hsv . h = 4 + ( r - g ) / delta ;
hsv . h = parseInt ( hsv . h * 60 ) ;
if ( hsv . h < 0 ) hsv . h += 360 ;
}
hsv . s = ( hsv . s * 100 ) | 0 ;
hsv . v = ( hsv . v * 100 ) | 0 ;
return hsv ;
} ,
hsvToRgb :
function ( hsv )
{
var rgb = { r : 0 , g : 0 , b : 0 , a : 100 } , h = hsv . h , s = hsv . s , v = hsv . v ;
if ( s == 0 )
{
if ( v == 0 ) rgb . r = rgb . g = rgb . b = 0 ;
else rgb . r = rgb . g = rgb . b = ( v * 255 / 100 ) | 0 ;
}
else
{
if ( h == 360 ) h = 0 ;
h /= 60 ;
s = s / 100 ;
v = v / 100 ;
var i = h | 0 ,
f = h - i ,
p = v * ( 1 - s ) ,
q = v * ( 1 - ( s * f ) ) ,
t = v * ( 1 - ( s * ( 1 - f ) ) ) ;
switch ( i )
{
case 0 :
rgb . r = v ;
rgb . g = t ;
rgb . b = p ;
break ;
case 1 :
rgb . r = q ;
rgb . g = v ;
rgb . b = p ;
break ;
case 2 :
rgb . r = p ;
rgb . g = v ;
rgb . b = t ;
break ;
case 3 :
rgb . r = p ;
rgb . g = q ;
rgb . b = v ;
break ;
case 4 :
rgb . r = t ;
rgb . g = p ;
rgb . b = v ;
break ;
case 5 :
rgb . r = v ;
rgb . g = p ;
rgb . b = q ;
break ;
}
rgb . r = ( rgb . r * 255 ) | 0 ;
rgb . g = ( rgb . g * 255 ) | 0 ;
rgb . b = ( rgb . b * 255 ) | 0 ;
}
return rgb ;
}
}
} ;
var Color = $ . jPicker . Color , List = $ . jPicker . List , ColorMethods = $ . jPicker . ColorMethods ; // local copies for YUI compressor
$ . fn . jPicker =
function ( options )
{
var $arguments = arguments ;
return this . each (
function ( )
{
var $this = this , settings = $ . extend ( true , { } , $ . fn . jPicker . defaults , options ) ; // local copies for YUI compressor
if ( $ ( $this ) . get ( 0 ) . nodeName . toLowerCase ( ) == 'input' ) // Add color picker icon if binding to an input element and bind the events to the input
{
$ . extend ( true , settings ,
{
window :
{
bindToInput : true ,
expandable : true ,
input : $ ( $this )
}
} ) ;
if ( $ ( $this ) . val ( ) == '' )
{
settings . color . active = new Color ( { hex : null } ) ;
settings . color . current = new Color ( { hex : null } ) ;
}
else if ( ColorMethods . validateHex ( $ ( $this ) . val ( ) ) )
{
settings . color . active = new Color ( { hex : $ ( $this ) . val ( ) , a : settings . color . active . val ( 'a' ) } ) ;
settings . color . current = new Color ( { hex : $ ( $this ) . val ( ) , a : settings . color . active . val ( 'a' ) } ) ;
}
}
if ( settings . window . expandable )
$ ( $this ) . after ( '<span class="jPicker"><span class="Icon"><span class="Color"> </span><span class="Alpha"> </span><span class="Image" title="Click To Open Color Picker"> </span><span class="Container"> </span></span></span>' ) ;
else settings . window . liveUpdate = false ; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
var isLessThanIE7 = parseFloat ( navigator . appVersion . split ( 'MSIE' ) [ 1 ] ) < 7 && document . body . filters , // needed to run the AlphaImageLoader function for IE6
container = null ,
colorMapDiv = null ,
colorBarDiv = null ,
colorMapL1 = null , // different layers of colorMap and colorBar
colorMapL2 = null ,
colorMapL3 = null ,
colorBarL1 = null ,
colorBarL2 = null ,
colorBarL3 = null ,
colorBarL4 = null ,
colorBarL5 = null ,
colorBarL6 = null ,
colorMap = null , // color maps
colorBar = null ,
colorPicker = null ,
elementStartX = null , // Used to record the starting css positions for dragging the control
elementStartY = null ,
pageStartX = null , // Used to record the mousedown coordinates for dragging the control
pageStartY = null ,
activePreview = null , // color boxes above the radio buttons
currentPreview = null ,
okButton = null ,
cancelButton = null ,
grid = null , // preset colors grid
iconColor = null , // iconColor for popup icon
iconAlpha = null , // iconAlpha for popup icon
iconImage = null , // iconImage popup icon
moveBar = null , // drag bar
setColorMode = // set color mode and update visuals for the new color mode
function ( colorMode )
{
var active = color . active , // local copies for YUI compressor
clientPath = images . clientPath ,
hex = active . val ( 'hex' ) ,
rgbMap ,
rgbBar ;
settings . color . mode = colorMode ;
switch ( colorMode )
{
case 'h' :
setTimeout (
function ( )
{
setBG . call ( $this , colorMapDiv , 'transparent' ) ;
setImgLoc . call ( $this , colorMapL1 , 0 ) ;
setAlpha . call ( $this , colorMapL1 , 100 ) ;
setImgLoc . call ( $this , colorMapL2 , 260 ) ;
setAlpha . call ( $this , colorMapL2 , 100 ) ;
setBG . call ( $this , colorBarDiv , 'transparent' ) ;
setImgLoc . call ( $this , colorBarL1 , 0 ) ;
setAlpha . call ( $this , colorBarL1 , 100 ) ;
setImgLoc . call ( $this , colorBarL2 , 260 ) ;
setAlpha . call ( $this , colorBarL2 , 100 ) ;
setImgLoc . call ( $this , colorBarL3 , 260 ) ;
setAlpha . call ( $this , colorBarL3 , 100 ) ;
setImgLoc . call ( $this , colorBarL4 , 260 ) ;
setAlpha . call ( $this , colorBarL4 , 100 ) ;
setImgLoc . call ( $this , colorBarL6 , 260 ) ;
setAlpha . call ( $this , colorBarL6 , 100 ) ;
} , 0 ) ;
colorMap . range ( 'all' , { minX : 0 , maxX : 100 , minY : 0 , maxY : 100 } ) ;
colorBar . range ( 'rangeY' , { minY : 0 , maxY : 360 } ) ;
if ( active . val ( 'ahex' ) == null ) break ;
colorMap . val ( 'xy' , { x : active . val ( 's' ) , y : 100 - active . val ( 'v' ) } , colorMap ) ;
colorBar . val ( 'y' , 360 - active . val ( 'h' ) , colorBar ) ;
break ;
case 's' :
setTimeout (
function ( )
{
setBG . call ( $this , colorMapDiv , 'transparent' ) ;
setImgLoc . call ( $this , colorMapL1 , - 260 ) ;
setImgLoc . call ( $this , colorMapL2 , - 520 ) ;
setImgLoc . call ( $this , colorBarL1 , - 260 ) ;
setImgLoc . call ( $this , colorBarL2 , - 520 ) ;
setImgLoc . call ( $this , colorBarL6 , 260 ) ;
setAlpha . call ( $this , colorBarL6 , 100 ) ;
} , 0 ) ;
colorMap . range ( 'all' , { minX : 0 , maxX : 360 , minY : 0 , maxY : 100 } ) ;
colorBar . range ( 'rangeY' , { minY : 0 , maxY : 100 } ) ;
if ( active . val ( 'ahex' ) == null ) break ;
colorMap . val ( 'xy' , { x : active . val ( 'h' ) , y : 100 - active . val ( 'v' ) } , colorMap ) ;
colorBar . val ( 'y' , 100 - active . val ( 's' ) , colorBar ) ;
break ;
case 'v' :
setTimeout (
function ( )
{
setBG . call ( $this , colorMapDiv , '000000' ) ;
setImgLoc . call ( $this , colorMapL1 , - 780 ) ;
setImgLoc . call ( $this , colorMapL2 , 260 ) ;
setBG . call ( $this , colorBarDiv , hex ) ;
setImgLoc . call ( $this , colorBarL1 , - 520 ) ;
setImgLoc . call ( $this , colorBarL2 , 260 ) ;
setAlpha . call ( $this , colorBarL2 , 100 ) ;
setImgLoc . call ( $this , colorBarL6 , 260 ) ;
setAlpha . call ( $this , colorBarL6 , 100 ) ;
} , 0 ) ;
colorMap . range ( 'all' , { minX : 0 , maxX : 360 , minY : 0 , maxY : 100 } ) ;
colorBar . range ( 'rangeY' , { minY : 0 , maxY : 100 } ) ;
if ( active . val ( 'ahex' ) == null ) break ;
colorMap . val ( 'xy' , { x : active . val ( 'h' ) , y : 100 - active . val ( 's' ) } , colorMap ) ;
colorBar . val ( 'y' , 100 - active . val ( 'v' ) , colorBar ) ;
break ;
case 'r' :
rgbMap = - 1040 ;
rgbBar = - 780 ;
colorMap . range ( 'all' , { minX : 0 , maxX : 255 , minY : 0 , maxY : 255 } ) ;
colorBar . range ( 'rangeY' , { minY : 0 , maxY : 255 } ) ;
if ( active . val ( 'ahex' ) == null ) break ;
colorMap . val ( 'xy' , { x : active . val ( 'b' ) , y : 255 - active . val ( 'g' ) } , colorMap ) ;
colorBar . val ( 'y' , 255 - active . val ( 'r' ) , colorBar ) ;
break ;
case 'g' :
rgbMap = - 1560 ;
rgbBar = - 1820 ;
colorMap . range ( 'all' , { minX : 0 , maxX : 255 , minY : 0 , maxY : 255 } ) ;
colorBar . range ( 'rangeY' , { minY : 0 , maxY : 255 } ) ;
if ( active . val ( 'ahex' ) == null ) break ;
colorMap . val ( 'xy' , { x : active . val ( 'b' ) , y : 255 - active . val ( 'r' ) } , colorMap ) ;
colorBar . val ( 'y' , 255 - active . val ( 'g' ) , colorBar ) ;
break ;
case 'b' :
rgbMap = - 2080 ;
rgbBar = - 2860 ;
colorMap . range ( 'all' , { minX : 0 , maxX : 255 , minY : 0 , maxY : 255 } ) ;
colorBar . range ( 'rangeY' , { minY : 0 , maxY : 255 } ) ;
if ( active . val ( 'ahex' ) == null ) break ;
colorMap . val ( 'xy' , { x : active . val ( 'r' ) , y : 255 - active . val ( 'g' ) } , colorMap ) ;
colorBar . val ( 'y' , 255 - active . val ( 'b' ) , colorBar ) ;
break ;
case 'a' :
setTimeout (
function ( )
{
setBG . call ( $this , colorMapDiv , 'transparent' ) ;
setImgLoc . call ( $this , colorMapL1 , - 260 ) ;
setImgLoc . call ( $this , colorMapL2 , - 520 ) ;
setImgLoc . call ( $this , colorBarL1 , 260 ) ;
setImgLoc . call ( $this , colorBarL2 , 260 ) ;
setAlpha . call ( $this , colorBarL2 , 100 ) ;
setImgLoc . call ( $this , colorBarL6 , 0 ) ;
setAlpha . call ( $this , colorBarL6 , 100 ) ;
} , 0 ) ;
colorMap . range ( 'all' , { minX : 0 , maxX : 360 , minY : 0 , maxY : 100 } ) ;
colorBar . range ( 'rangeY' , { minY : 0 , maxY : 255 } ) ;
if ( active . val ( 'ahex' ) == null ) break ;
colorMap . val ( 'xy' , { x : active . val ( 'h' ) , y : 100 - active . val ( 'v' ) } , colorMap ) ;
colorBar . val ( 'y' , 255 - active . val ( 'a' ) , colorBar ) ;
break ;
default :
throw ( 'Invalid Mode' ) ;
break ;
}
switch ( colorMode )
{
case 'h' :
break ;
case 's' :
case 'v' :
case 'a' :
setTimeout (
function ( )
{
setAlpha . call ( $this , colorMapL1 , 100 ) ;
setAlpha . call ( $this , colorBarL1 , 100 ) ;
setImgLoc . call ( $this , colorBarL3 , 260 ) ;
setAlpha . call ( $this , colorBarL3 , 100 ) ;
setImgLoc . call ( $this , colorBarL4 , 260 ) ;
setAlpha . call ( $this , colorBarL4 , 100 ) ;
} , 0 ) ;
break ;
case 'r' :
case 'g' :
case 'b' :
setTimeout (
function ( )
{
setBG . call ( $this , colorMapDiv , 'transparent' ) ;
setBG . call ( $this , colorBarDiv , 'transparent' ) ;
setAlpha . call ( $this , colorBarL1 , 100 ) ;
setAlpha . call ( $this , colorMapL1 , 100 ) ;
setImgLoc . call ( $this , colorMapL1 , rgbMap ) ;
setImgLoc . call ( $this , colorMapL2 , rgbMap - 260 ) ;
setImgLoc . call ( $this , colorBarL1 , rgbBar - 780 ) ;
setImgLoc . call ( $this , colorBarL2 , rgbBar - 520 ) ;
setImgLoc . call ( $this , colorBarL3 , rgbBar ) ;
setImgLoc . call ( $this , colorBarL4 , rgbBar - 260 ) ;
setImgLoc . call ( $this , colorBarL6 , 260 ) ;
setAlpha . call ( $this , colorBarL6 , 100 ) ;
} , 0 ) ;
break ;
}
if ( active . val ( 'ahex' ) == null ) return ;
activeColorChanged . call ( $this , active ) ;
} ,
activeColorChanged = // Update color when user changes text values
function ( ui , context )
{
if ( context == null || ( context != colorBar && context != colorMap ) ) positionMapAndBarArrows . call ( $this , ui , context ) ;
setTimeout (
function ( )
{
updatePreview . call ( $this , ui ) ;
updateMapVisuals . call ( $this , ui ) ;
updateBarVisuals . call ( $this , ui ) ;
} , 0 ) ;
} ,
mapValueChanged = // user has dragged the ColorMap pointer
function ( ui , context )
{
var active = color . active ;
if ( context != colorMap && active . val ( ) == null ) return ;
var xy = ui . val ( 'all' ) ;
switch ( settings . color . mode )
{
case 'h' :
active . val ( 'sv' , { s : xy . x , v : 100 - xy . y } , context ) ;
break ;
case 's' :
case 'a' :
active . val ( 'hv' , { h : xy . x , v : 100 - xy . y } , context ) ;
break ;
case 'v' :
active . val ( 'hs' , { h : xy . x , s : 100 - xy . y } , context ) ;
break ;
case 'r' :
active . val ( 'gb' , { g : 255 - xy . y , b : xy . x } , context ) ;
break ;
case 'g' :
active . val ( 'rb' , { r : 255 - xy . y , b : xy . x } , context ) ;
break ;
case 'b' :
active . val ( 'rg' , { r : xy . x , g : 255 - xy . y } , context ) ;
break ;
}
} ,
colorBarValueChanged = // user has dragged the ColorBar slider
function ( ui , context )
{
var active = color . active ;
if ( context != colorBar && active . val ( ) == null ) return ;
switch ( settings . color . mode )
{
case 'h' :
active . val ( 'h' , { h : 360 - ui . val ( 'y' ) } , context ) ;
break ;
case 's' :
active . val ( 's' , { s : 100 - ui . val ( 'y' ) } , context ) ;
break ;
case 'v' :
active . val ( 'v' , { v : 100 - ui . val ( 'y' ) } , context ) ;
break ;
case 'r' :
active . val ( 'r' , { r : 255 - ui . val ( 'y' ) } , context ) ;
break ;
case 'g' :
active . val ( 'g' , { g : 255 - ui . val ( 'y' ) } , context ) ;
break ;
case 'b' :
active . val ( 'b' , { b : 255 - ui . val ( 'y' ) } , context ) ;
break ;
case 'a' :
active . val ( 'a' , 255 - ui . val ( 'y' ) , context ) ;
break ;
}
} ,
positionMapAndBarArrows = // position map and bar arrows to match current color
function ( ui , context )
{
if ( context != colorMap )
{
switch ( settings . color . mode )
{
case 'h' :
var sv = ui . val ( 'sv' ) ;
colorMap . val ( 'xy' , { x : sv != null ? sv . s : 100 , y : 100 - ( sv != null ? sv . v : 100 ) } , context ) ;
break ;
case 's' :
case 'a' :
var hv = ui . val ( 'hv' ) ;
colorMap . val ( 'xy' , { x : hv && hv . h || 0 , y : 100 - ( hv != null ? hv . v : 100 ) } , context ) ;
break ;
case 'v' :
var hs = ui . val ( 'hs' ) ;
colorMap . val ( 'xy' , { x : hs && hs . h || 0 , y : 100 - ( hs != null ? hs . s : 100 ) } , context ) ;
break ;
case 'r' :
var bg = ui . val ( 'bg' ) ;
colorMap . val ( 'xy' , { x : bg && bg . b || 0 , y : 255 - ( bg && bg . g || 0 ) } , context ) ;
break ;
case 'g' :
var br = ui . val ( 'br' ) ;
colorMap . val ( 'xy' , { x : br && br . b || 0 , y : 255 - ( br && br . r || 0 ) } , context ) ;
break ;
case 'b' :
var rg = ui . val ( 'rg' ) ;
colorMap . val ( 'xy' , { x : rg && rg . r || 0 , y : 255 - ( rg && rg . g || 0 ) } , context ) ;
break ;
}
}
if ( context != colorBar )
{
switch ( settings . color . mode )
{
case 'h' :
colorBar . val ( 'y' , 360 - ( ui . val ( 'h' ) || 0 ) , context ) ;
break ;
case 's' :
var s = ui . val ( 's' ) ;
colorBar . val ( 'y' , 100 - ( s != null ? s : 100 ) , context ) ;
break ;
case 'v' :
var v = ui . val ( 'v' ) ;
colorBar . val ( 'y' , 100 - ( v != null ? v : 100 ) , context ) ;
break ;
case 'r' :
colorBar . val ( 'y' , 255 - ( ui . val ( 'r' ) || 0 ) , context ) ;
break ;
case 'g' :
colorBar . val ( 'y' , 255 - ( ui . val ( 'g' ) || 0 ) , context ) ;
break ;
case 'b' :
colorBar . val ( 'y' , 255 - ( ui . val ( 'b' ) || 0 ) , context ) ;
break ;
case 'a' :
var a = ui . val ( 'a' ) ;
colorBar . val ( 'y' , 255 - ( a != null ? a : 255 ) , context ) ;
break ;
}
}
} ,
updatePreview =
function ( ui )
{
try
{
var all = ui . val ( 'all' ) ;
activePreview . css ( { backgroundColor : all && '#' + all . hex || 'transparent' } ) ;
setAlpha . call ( $this , activePreview , all && Math . precision ( ( all . a * 100 ) / 255 , 4 ) || 0 ) ;
}
catch ( e ) { }
} ,
updateMapVisuals =
function ( ui )
{
switch ( settings . color . mode )
{
case 'h' :
setBG . call ( $this , colorMapDiv , new Color ( { h : ui . val ( 'h' ) || 0 , s : 100 , v : 100 } ) . val ( 'hex' ) ) ;
break ;
case 's' :
case 'a' :
var s = ui . val ( 's' ) ;
setAlpha . call ( $this , colorMapL2 , 100 - ( s != null ? s : 100 ) ) ;
break ;
case 'v' :
var v = ui . val ( 'v' ) ;
setAlpha . call ( $this , colorMapL1 , v != null ? v : 100 ) ;
break ;
case 'r' :
setAlpha . call ( $this , colorMapL2 , Math . precision ( ( ui . val ( 'r' ) || 0 ) / 255 * 100 , 4 ) ) ;
break ;
case 'g' :
setAlpha . call ( $this , colorMapL2 , Math . precision ( ( ui . val ( 'g' ) || 0 ) / 255 * 100 , 4 ) ) ;
break ;
case 'b' :
setAlpha . call ( $this , colorMapL2 , Math . precision ( ( ui . val ( 'b' ) || 0 ) / 255 * 100 ) ) ;
break ;
}
var a = ui . val ( 'a' ) ;
setAlpha . call ( $this , colorMapL3 , Math . precision ( ( ( 255 - ( a || 0 ) ) * 100 ) / 255 , 4 ) ) ;
} ,
updateBarVisuals =
function ( ui )
{
switch ( settings . color . mode )
{
case 'h' :
var a = ui . val ( 'a' ) ;
setAlpha . call ( $this , colorBarL5 , Math . precision ( ( ( 255 - ( a || 0 ) ) * 100 ) / 255 , 4 ) ) ;
break ;
case 's' :
var hva = ui . val ( 'hva' ) ,
saturatedColor = new Color ( { h : hva && hva . h || 0 , s : 100 , v : hva != null ? hva . v : 100 } ) ;
setBG . call ( $this , colorBarDiv , saturatedColor . val ( 'hex' ) ) ;
setAlpha . call ( $this , colorBarL2 , 100 - ( hva != null ? hva . v : 100 ) ) ;
setAlpha . call ( $this , colorBarL5 , Math . precision ( ( ( 255 - ( hva && hva . a || 0 ) ) * 100 ) / 255 , 4 ) ) ;
break ;
case 'v' :
var hsa = ui . val ( 'hsa' ) ,
valueColor = new Color ( { h : hsa && hsa . h || 0 , s : hsa != null ? hsa . s : 100 , v : 100 } ) ;
setBG . call ( $this , colorBarDiv , valueColor . val ( 'hex' ) ) ;
setAlpha . call ( $this , colorBarL5 , Math . precision ( ( ( 255 - ( hsa && hsa . a || 0 ) ) * 100 ) / 255 , 4 ) ) ;
break ;
case 'r' :
case 'g' :
case 'b' :
var hValue = 0 , vValue = 0 , rgba = ui . val ( 'rgba' ) ;
if ( settings . color . mode == 'r' )
{
hValue = rgba && rgba . b || 0 ;
vValue = rgba && rgba . g || 0 ;
}
else if ( settings . color . mode == 'g' )
{
hValue = rgba && rgba . b || 0 ;
vValue = rgba && rgba . r || 0 ;
}
else if ( settings . color . mode == 'b' )
{
hValue = rgba && rgba . r || 0 ;
vValue = rgba && rgba . g || 0 ;
}
var middle = vValue > hValue ? hValue : vValue ;
setAlpha . call ( $this , colorBarL2 , hValue > vValue ? Math . precision ( ( ( hValue - vValue ) / ( 255 - vValue ) ) * 100 , 4 ) : 0 ) ;
setAlpha . call ( $this , colorBarL3 , vValue > hValue ? Math . precision ( ( ( vValue - hValue ) / ( 255 - hValue ) ) * 100 , 4 ) : 0 ) ;
setAlpha . call ( $this , colorBarL4 , Math . precision ( ( middle / 255 ) * 100 , 4 ) ) ;
setAlpha . call ( $this , colorBarL5 , Math . precision ( ( ( 255 - ( rgba && rgba . a || 0 ) ) * 100 ) / 255 , 4 ) ) ;
break ;
case 'a' :
var a = ui . val ( 'a' ) ;
setBG . call ( $this , colorBarDiv , ui . val ( 'hex' ) || '000000' ) ;
setAlpha . call ( $this , colorBarL5 , a != null ? 0 : 100 ) ;
setAlpha . call ( $this , colorBarL6 , a != null ? 100 : 0 ) ;
break ;
}
} ,
setBG =
function ( el , c )
{
el . css ( { backgroundColor : c && c . length == 6 && '#' + c || 'transparent' } ) ;
} ,
setImg =
function ( img , src )
{
if ( isLessThanIE7 && ( src . indexOf ( 'AlphaBar.png' ) != - 1 || src . indexOf ( 'Bars.png' ) != - 1 || src . indexOf ( 'Maps.png' ) != - 1 ) )
{
img . attr ( 'pngSrc' , src ) ;
img . css ( { backgroundImage : 'none' , filter : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' } ) ;
}
else img . css ( { backgroundImage : 'url(\'' + src + '\')' } ) ;
} ,
setImgLoc =
function ( img , y )
{
img . css ( { top : y + 'px' } ) ;
} ,
setAlpha =
function ( obj , alpha )
{
obj . css ( { visibility : alpha > 0 ? 'visible' : 'hidden' } ) ;
if ( alpha > 0 && alpha < 100 )
{
if ( isLessThanIE7 )
{
var src = obj . attr ( 'pngSrc' ) ;
if ( src != null && ( src . indexOf ( 'AlphaBar.png' ) != - 1 || src . indexOf ( 'Bars.png' ) != - 1 || src . indexOf ( 'Maps.png' ) != - 1 ) )
obj . css ( { filter : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')' } ) ;
else obj . css ( { opacity : Math . precision ( alpha / 100 , 4 ) } ) ;
}
else obj . css ( { opacity : Math . precision ( alpha / 100 , 4 ) } ) ;
}
else if ( alpha == 0 || alpha == 100 )
{
if ( isLessThanIE7 )
{
var src = obj . attr ( 'pngSrc' ) ;
if ( src != null && ( src . indexOf ( 'AlphaBar.png' ) != - 1 || src . indexOf ( 'Bars.png' ) != - 1 || src . indexOf ( 'Maps.png' ) != - 1 ) )
obj . css ( { filter : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' } ) ;
else obj . css ( { opacity : '' } ) ;
}
else obj . css ( { opacity : '' } ) ;
}
} ,
revertColor = // revert color to original color when opened
function ( )
{
color . active . val ( 'ahex' , color . current . val ( 'ahex' ) ) ;
} ,
commitColor = // commit the color changes
function ( )
{
color . current . val ( 'ahex' , color . active . val ( 'ahex' ) ) ;
} ,
radioClicked =
function ( e )
{
$ ( this ) . parents ( 'tbody:first' ) . find ( 'input:radio[value!="' + e . target . value + '"]' ) . removeAttr ( 'checked' ) ;
setColorMode . call ( $this , e . target . value ) ;
} ,
currentClicked =
function ( )
{
revertColor . call ( $this ) ;
} ,
cancelClicked =
function ( )
{
revertColor . call ( $this ) ;
settings . window . expandable && hide . call ( $this ) ;
$ . isFunction ( cancelCallback ) && cancelCallback . call ( $this , color . active , cancelButton ) ;
} ,
okClicked =
function ( )
{
commitColor . call ( $this ) ;
settings . window . expandable && hide . call ( $this ) ;
$ . isFunction ( commitCallback ) && commitCallback . call ( $this , color . active , okButton ) ;
} ,
iconImageClicked =
function ( )
{
show . call ( $this ) ;
} ,
currentColorChanged =
function ( ui , context )
{
var hex = ui . val ( 'hex' ) ;
currentPreview . css ( { backgroundColor : hex && '#' + hex || 'transparent' } ) ;
setAlpha . call ( $this , currentPreview , Math . precision ( ( ( ui . val ( 'a' ) || 0 ) * 100 ) / 255 , 4 ) ) ;
} ,
expandableColorChanged =
function ( ui , context )
{
var hex = ui . val ( 'hex' ) ;
var va = ui . val ( 'va' ) ;
iconColor . css ( { backgroundColor : hex && '#' + hex || 'transparent' } ) ;
setAlpha . call ( $this , iconAlpha , Math . precision ( ( ( 255 - ( va && va . a || 0 ) ) * 100 ) / 255 , 4 ) ) ;
if ( settings . window . bindToInput && settings . window . updateInputColor )
settings . window . input . css (
{
backgroundColor : hex && '#' + hex || 'transparent' ,
color : va == null || va . v > 75 ? '#000000' : '#ffffff'
} ) ;
} ,
moveBarMouseDown =
function ( e )
{
var element = settings . window . element , // local copies for YUI compressor
page = settings . window . page ;
elementStartX = parseInt ( container . css ( 'left' ) ) ;
elementStartY = parseInt ( container . css ( 'top' ) ) ;
pageStartX = e . pageX ;
pageStartY = e . pageY ;
// bind events to document to move window - we will unbind these on mouseup
$ ( document ) . bind ( 'mousemove' , documentMouseMove ) . bind ( 'mouseup' , documentMouseUp ) ;
e . preventDefault ( ) ; // prevent attempted dragging of the column
} ,
documentMouseMove =
function ( e )
{
container . css ( { left : elementStartX - ( pageStartX - e . pageX ) + 'px' , top : elementStartY - ( pageStartY - e . pageY ) + 'px' } ) ;
if ( settings . window . expandable && ! $ . support . boxModel ) container . prev ( ) . css ( { left : container . css ( "left" ) , top : container . css ( "top" ) } ) ;
e . stopPropagation ( ) ;
e . preventDefault ( ) ;
return false ;
} ,
documentMouseUp =
function ( e )
{
$ ( document ) . unbind ( 'mousemove' , documentMouseMove ) . unbind ( 'mouseup' , documentMouseUp ) ;
e . stopPropagation ( ) ;
e . preventDefault ( ) ;
return false ;
} ,
quickPickClicked =
function ( e )
{
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
color . active . val ( 'ahex' , $ ( this ) . attr ( 'title' ) || null , e . target ) ;
return false ;
} ,
commitCallback = $ . isFunction ( $arguments [ 1 ] ) && $arguments [ 1 ] || null ,
liveCallback = $ . isFunction ( $arguments [ 2 ] ) && $arguments [ 2 ] || null ,
cancelCallback = $ . isFunction ( $arguments [ 3 ] ) && $arguments [ 3 ] || null ,
show =
function ( )
{
color . current . val ( 'ahex' , color . active . val ( 'ahex' ) ) ;
var attachIFrame = function ( )
{
if ( ! settings . window . expandable || $ . support . boxModel ) return ;
var table = container . find ( 'table:first' ) ;
container . before ( '<iframe/>' ) ;
container . prev ( ) . css ( { width : table . width ( ) , height : container . height ( ) , opacity : 0 , position : 'absolute' , left : container . css ( "left" ) , top : container . css ( "top" ) } ) ;
} ;
if ( settings . window . expandable )
{
$ ( document . body ) . children ( 'div.jPicker.Container' ) . css ( { zIndex : 10 } ) ;
container . css ( { zIndex : 20 } ) ;
}
switch ( settings . window . effects . type )
{
case 'fade' :
container . fadeIn ( settings . window . effects . speed . show , attachIFrame ) ;
break ;
case 'slide' :
container . slideDown ( settings . window . effects . speed . show , attachIFrame ) ;
break ;
case 'show' :
default :
container . show ( settings . window . effects . speed . show , attachIFrame ) ;
break ;
}
} ,
hide =
function ( )
{
var removeIFrame = function ( )
{
if ( settings . window . expandable ) container . css ( { zIndex : 10 } ) ;
if ( ! settings . window . expandable || $ . support . boxModel ) return ;
container . prev ( ) . remove ( ) ;
} ;
switch ( settings . window . effects . type )
{
case 'fade' :
container . fadeOut ( settings . window . effects . speed . hide , removeIFrame ) ;
break ;
case 'slide' :
container . slideUp ( settings . window . effects . speed . hide , removeIFrame ) ;
break ;
case 'show' :
default :
container . hide ( settings . window . effects . speed . hide , removeIFrame ) ;
break ;
}
} ,
initialize =
function ( )
{
var win = settings . window ,
popup = win . expandable ? $ ( $this ) . next ( ) . find ( '.Container:first' ) : null ;
container = win . expandable ? $ ( '<div/>' ) : $ ( $this ) ;
container . addClass ( 'jPicker Container' ) ;
if ( win . expandable ) container . hide ( ) ;
container . get ( 0 ) . onselectstart = function ( event ) { if ( event . target . nodeName . toLowerCase ( ) !== 'input' ) return false ; } ;
// inject html source code - we are using a single table for this control - I know tables are considered bad, but it takes care of equal height columns and
// this control really is tabular data, so I believe it is the right move
var all = color . active . val ( 'all' ) ;
if ( win . alphaPrecision < 0 ) win . alphaPrecision = 0 ;
else if ( win . alphaPrecision > 2 ) win . alphaPrecision = 2 ;
var controlHtml = '<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + ( win . expandable ? '<tr><td class="Move" colspan="5"> </td></tr>' : '' ) + '<tr><td rowspan="9"><h2 class="Title">' + ( win . title || localization . text . title ) + '</h2><div class="Map"><span class="Map1"> </span><span class="Map2"> </span><span class="Map3"> </span><img src="' + images . clientPath + images . colorMap . arrow . file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1"> </span><span class="Map2"> </span><span class="Map3"> </span><span class="Map4"> </span><span class="Map5"> </span><span class="Map6"> </span><img src="' + images . clientPath + images . colorBar . arrow . file + '" class="Arrow"/></div></td><td colspan="2" class="Preview">' + localization . text . newColor + '<div><span class="Active" title="' + localization . tooltips . colors . newColor + '"> </span><span class="Current" title="' + localization . tooltips . colors . currentColor + '"> </span></div>' + localization . text . currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization . text . ok + '" title="' + localization . tooltips . buttons . ok + '"/><input type="button" class="Cancel" value="' + localization . text . cancel + '" title="' + localization . tooltips . buttons . cancel + '"/><hr/><div class="Grid"> </div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization . tooltips . hue . radio + '"><input type="radio" value="h"' + ( settings . color . mode == 'h' ? ' checked="checked"' : '' ) + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + ( all != null ? all . h : '' ) + '" title="' + localization . tooltips . hue . textbox + '"/> °</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization . tooltips . saturation . radio + '"><input type="radio" value="s"' + ( settings . color . mode == 's' ? ' checked="checked"' : '' ) + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + ( all != null ? all . s : '' ) + '" title="' + localization . tooltips . saturation . textbox + '"/> %</td></tr><tr class="Value"><td class="Radio"><label title="' + localization . tooltips . value . radio + '"><input type="radio" value="v"' + ( settings . color . mode == 'v' ? ' checked="checked"' : '' ) + '/>V:</label><br/><br/></td><td class="Text"><input type="text" maxlength="3" value="' + ( all != null ? all . v : '' ) + '" title="' + localization . tooltips . value . textbox + '"/> %<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization . tooltips . red . radio + '"><input type="radio" value="r"' + ( settings . color . mode == 'r' ? ' checked="checked"' : '' ) + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + ( all != null ? all . r : '' ) + '" title="' + localization . tooltips . red . textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization . tooltips . green . radio + '"><input type="radio" value="g"' + ( settings . color . mode == 'g' ? ' checked="checked"' : '' ) + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + ( all != null ? all . g : '' ) + '" title="' + localization . tooltips . green . textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization . tooltips . blue . radio + '"><input type="radio" value="b"' + ( settings . color . mode == 'b' ? ' checked="checked"' : '' ) + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + ( all != null ? all . b : '' ) + '" title="' + localization . tooltips . blue . textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + ( win . alphaSupport ? '<label title="' + localization . tooltips . alpha . radio + '"><input type="radio" value="a"' + ( settings . color . mode == 'a' ? ' checked="checked"' : '' ) + '/>A:</label>' : ' ' ) + '</td><td class="Text">' + ( win . alphaSupport ? '<input type="text" maxlength="' + ( 3 + win . alphaPrecision ) + '" value="' + ( all != null ? Math . precision ( ( all . a * 100 ) / 255 , win . alphaPrecision ) : '' ) + '" title="' + localization . tooltips . alp
if ( win . expandable )
{
container . html ( controlHtml ) ;
if ( $ ( document . body ) . children ( 'div.jPicker.Container' ) . length == 0 ) $ ( document . body ) . prepend ( container ) ;
else $ ( document . body ) . children ( 'div.jPicker.Container:last' ) . after ( container ) ;
container . mousedown (
function ( )
{
$ ( document . body ) . children ( 'div.jPicker.Container' ) . css ( { zIndex : 10 } ) ;
container . css ( { zIndex : 20 } ) ;
} ) ;
container . css ( // positions must be set and display set to absolute before source code injection or IE will size the container to fit the window
{
left :
win . position . x == 'left' ? ( popup . offset ( ) . left - 530 - ( win . position . y == 'center' ? 25 : 0 ) ) + 'px' :
win . position . x == 'center' ? ( popup . offset ( ) . left - 260 ) + 'px' :
win . position . x == 'right' ? ( popup . offset ( ) . left - 10 + ( win . position . y == 'center' ? 25 : 0 ) ) + 'px' :
win . position . x == 'screenCenter' ? ( ( $ ( document ) . width ( ) >> 1 ) - 260 ) + 'px' : ( popup . offset ( ) . left + parseInt ( win . position . x ) ) + 'px' ,
position : 'absolute' ,
top : win . position . y == 'top' ? ( popup . offset ( ) . top - 312 ) + 'px' :
win . position . y == 'center' ? ( popup . offset ( ) . top - 156 ) + 'px' :
win . position . y == 'bottom' ? ( popup . offset ( ) . top + 25 ) + 'px' : ( popup . offset ( ) . top + parseInt ( win . position . y ) ) + 'px'
} ) ;
}
else
{
container = $ ( $this ) ;
container . html ( controlHtml ) ;
}
// initialize the objects to the source code just injected
var tbody = container . find ( 'tbody:first' ) ;
colorMapDiv = tbody . find ( 'div.Map:first' ) ;
colorBarDiv = tbody . find ( 'div.Bar:first' ) ;
var MapMaps = colorMapDiv . find ( 'span' ) ,
BarMaps = colorBarDiv . find ( 'span' ) ;
colorMapL1 = MapMaps . filter ( '.Map1:first' ) ;
colorMapL2 = MapMaps . filter ( '.Map2:first' ) ;
colorMapL3 = MapMaps . filter ( '.Map3:first' ) ;
colorBarL1 = BarMaps . filter ( '.Map1:first' ) ;
colorBarL2 = BarMaps . filter ( '.Map2:first' ) ;
colorBarL3 = BarMaps . filter ( '.Map3:first' ) ;
colorBarL4 = BarMaps . filter ( '.Map4:first' ) ;
colorBarL5 = BarMaps . filter ( '.Map5:first' ) ;
colorBarL6 = BarMaps . filter ( '.Map6:first' ) ;
// create color pickers and maps
colorMap = new Slider ( colorMapDiv ,
{
map :
{
width : images . colorMap . width ,
height : images . colorMap . height
} ,
arrow :
{
image : images . clientPath + images . colorMap . arrow . file ,
width : images . colorMap . arrow . width ,
height : images . colorMap . arrow . height
}
} ) ;
colorMap . bind ( mapValueChanged ) ;
colorBar = new Slider ( colorBarDiv ,
{
map :
{
width : images . colorBar . width ,
height : images . colorBar . height
} ,
arrow :
{
image : images . clientPath + images . colorBar . arrow . file ,
width : images . colorBar . arrow . width ,
height : images . colorBar . arrow . height
}
} ) ;
colorBar . bind ( colorBarValueChanged ) ;
colorPicker = new ColorValuePicker ( tbody , color . active , win . expandable && win . bindToInput ? win . input : null , win . alphaPrecision ) ;
var hex = all != null ? all . hex : null ,
preview = tbody . find ( '.Preview' ) ,
button = tbody . find ( '.Button' ) ;
activePreview = preview . find ( '.Active:first' ) . css ( { backgroundColor : hex && '#' + hex || 'transparent' } ) ;
currentPreview = preview . find ( '.Current:first' ) . css ( { backgroundColor : hex && '#' + hex || 'transparent' } ) . bind ( 'click' , currentClicked ) ;
setAlpha . call ( $this , currentPreview , Math . precision ( color . current . val ( 'a' ) * 100 ) / 255 , 4 ) ;
okButton = button . find ( '.Ok:first' ) . bind ( 'click' , okClicked ) ;
cancelButton = button . find ( '.Cancel:first' ) . bind ( 'click' , cancelClicked ) ;
grid = button . find ( '.Grid:first' ) ;
setTimeout (
function ( )
{
setImg . call ( $this , colorMapL1 , images . clientPath + 'Maps.png' ) ;
setImg . call ( $this , colorMapL2 , images . clientPath + 'Maps.png' ) ;
setImg . call ( $this , colorMapL3 , images . clientPath + 'map-opacity.png' ) ;
setImg . call ( $this , colorBarL1 , images . clientPath + 'Bars.png' ) ;
setImg . call ( $this , colorBarL2 , images . clientPath + 'Bars.png' ) ;
setImg . call ( $this , colorBarL3 , images . clientPath + 'Bars.png' ) ;
setImg . call ( $this , colorBarL4 , images . clientPath + 'Bars.png' ) ;
setImg . call ( $this , colorBarL5 , images . clientPath + 'bar-opacity.png' ) ;
setImg . call ( $this , colorBarL6 , images . clientPath + 'AlphaBar.png' ) ;
setImg . call ( $this , preview . find ( 'div:first' ) , images . clientPath + 'preview-opacity.png' ) ;
} , 0 ) ;
tbody . find ( 'td.Radio input' ) . bind ( 'click' , radioClicked ) ;
// initialize quick list
if ( color . quickList && color . quickList . length > 0 )
{
var html = '' ;
for ( i = 0 ; i < color . quickList . length ; i ++ )
{
/* if default colors are hex strings, change them to color objects */
if ( ( typeof ( color . quickList [ i ] ) ) . toString ( ) . toLowerCase ( ) == 'string' ) color . quickList [ i ] = new Color ( { hex : color . quickList [ i ] } ) ;
var alpha = color . quickList [ i ] . val ( 'a' ) ;
var ahex = color . quickList [ i ] . val ( 'ahex' ) ;
if ( ! win . alphaSupport && ahex ) ahex = ahex . substring ( 0 , 6 ) + 'ff' ;
var quickHex = color . quickList [ i ] . val ( 'hex' ) ;
html += '<span class="QuickColor"' + ( ahex && ' title="#' + ahex + '"' || '' ) + ' style="background-color:' + ( quickHex && '#' + quickHex || '' ) + ';' + ( quickHex ? '' : 'background-image:url(' + images . clientPath + 'NoColor.png)' ) + ( win . alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math . precision ( alpha / 255 , 4 ) + ';filter:Alpha(opacity=' + Math . precision ( alpha / 2.55 , 4 ) + ')' : '' ) + '"> </span>' ;
}
setImg . call ( $this , grid , images . clientPath + 'bar-opacity.png' ) ;
grid . html ( html ) ;
grid . find ( '.QuickColor' ) . click ( quickPickClicked ) ;
}
setColorMode . call ( $this , settings . color . mode ) ;
color . active . bind ( activeColorChanged ) ;
$ . isFunction ( liveCallback ) && color . active . bind ( liveCallback ) ;
color . current . bind ( currentColorChanged ) ;
// bind to input
if ( win . expandable )
{
$this . icon = popup . parents ( '.Icon:first' ) ;
iconColor = $this . icon . find ( '.Color:first' ) . css ( { backgroundColor : hex && '#' + hex || 'transparent' } ) ;
iconAlpha = $this . icon . find ( '.Alpha:first' ) ;
setImg . call ( $this , iconAlpha , images . clientPath + 'bar-opacity.png' ) ;
setAlpha . call ( $this , iconAlpha , Math . precision ( ( ( 255 - ( all != null ? all . a : 0 ) ) * 100 ) / 255 , 4 ) ) ;
iconImage = $this . icon . find ( '.Image:first' ) . css (
{
backgroundImage : 'url(\'' + images . clientPath + images . picker . file + '\')'
} ) . bind ( 'click' , iconImageClicked ) ;
if ( win . bindToInput && win . updateInputColor )
win . input . css (
{
backgroundColor : hex && '#' + hex || 'transparent' ,
color : all == null || all . v > 75 ? '#000000' : '#ffffff'
} ) ;
moveBar = tbody . find ( '.Move:first' ) . bind ( 'mousedown' , moveBarMouseDown ) ;
color . active . bind ( expandableColorChanged ) ;
}
else show . call ( $this ) ;
} ,
destroy =
function ( )
{
container . find ( 'td.Radio input' ) . unbind ( 'click' , radioClicked ) ;
currentPreview . unbind ( 'click' , currentClicked ) ;
cancelButton . unbind ( 'click' , cancelClicked ) ;
okButton . unbind ( 'click' , okClicked ) ;
if ( settings . window . expandable )
{
iconImage . unbind ( 'click' , iconImageClicked ) ;
moveBar . unbind ( 'mousedown' , moveBarMouseDown ) ;
$this . icon = null ;
}
container . find ( '.QuickColor' ) . unbind ( 'click' , quickPickClicked ) ;
colorMapDiv = null ;
colorBarDiv = null ;
colorMapL1 = null ;
colorMapL2 = null ;
colorMapL3 = null ;
colorBarL1 = null ;
colorBarL2 = null ;
colorBarL3 = null ;
colorBarL4 = null ;
colorBarL5 = null ;
colorBarL6 = null ;
colorMap . destroy ( ) ;
colorMap = null ;
colorBar . destroy ( ) ;
colorBar = null ;
colorPicker . destroy ( ) ;
colorPicker = null ;
activePreview = null ;
currentPreview = null ;
okButton = null ;
cancelButton = null ;
grid = null ;
commitCallback = null ;
cancelCallback = null ;
liveCallback = null ;
2013-03-25 20:39:02 +01:00
container . remove ( ) ;
2012-05-02 20:01:17 +02:00
for ( i = 0 ; i < List . length ; i ++ ) if ( List [ i ] == $this ) List . splice ( i , 1 ) ;
} ,
images = settings . images , // local copies for YUI compressor
localization = settings . localization ,
color =
{
active : ( typeof ( settings . color . active ) ) . toString ( ) . toLowerCase ( ) == 'string' ? new Color ( { ahex : ! settings . window . alphaSupport && settings . color . active ? settings . color . active . substring ( 0 , 6 ) + 'ff' : settings . color . active } ) : new Color ( { ahex : ! settings . window . alphaSupport && settings . color . active . val ( 'ahex' ) ? settings . color . active . val ( 'ahex' ) . substring ( 0 , 6 ) + 'ff' : settings . color . active . val ( 'ahex' ) } ) ,
current : ( typeof ( settings . color . active ) ) . toString ( ) . toLowerCase ( ) == 'string' ? new Color ( { ahex : ! settings . window . alphaSupport && settings . color . active ? settings . color . active . substring ( 0 , 6 ) + 'ff' : settings . color . active } ) : new Color ( { ahex : ! settings . window . alphaSupport && settings . color . active . val ( 'ahex' ) ? settings . color . active . val ( 'ahex' ) . substring ( 0 , 6 ) + 'ff' : settings . color . active . val ( 'ahex' ) } ) ,
quickList : settings . color . quickList
} ;
$ . extend ( true , $this , // public properties, methods, and callbacks
{
commitCallback : commitCallback , // commitCallback function can be overridden to return the selected color to a method you specify when the user clicks "OK"
liveCallback : liveCallback , // liveCallback function can be overridden to return the selected color to a method you specify in live mode (continuous update)
cancelCallback : cancelCallback , // cancelCallback function can be overridden to a method you specify when the user clicks "Cancel"
color : color ,
show : show ,
hide : hide ,
destroy : destroy // destroys this control entirely, removing all events and objects, and removing itself from the List
} ) ;
List . push ( $this ) ;
setTimeout (
function ( )
{
initialize . call ( $this ) ;
} , 0 ) ;
} ) ;
} ;
$ . fn . jPicker . defaults = /* jPicker defaults - you can change anything in this section (such as the clientPath to your images) without fear of breaking the program */
{
window :
{
title : null , /* any title for the jPicker window itself - displays "Drag Markers To Pick A Color" if left null */
effects :
{
type : 'slide' , /* effect used to show/hide an expandable picker. Acceptable values "slide", "show", "fade" */
speed :
{
show : 'slow' , /* duration of "show" effect. Acceptable values are "fast", "slow", or time in ms */
hide : 'fast' /* duration of "hide" effect. Acceptable values are "fast", "slow", or time in ms */
}
} ,
position :
{
x : 'screenCenter' , /* acceptable values "left", "center", "right", "screenCenter", or relative px value */
y : 'top' /* acceptable values "top", "bottom", "center", or relative px value */
} ,
expandable : false , /* default to large static picker - set to true to make an expandable picker (small icon with popup) - set automatically when binded to input element */
liveUpdate : true , /* set false if you want the user to have to click "OK" before the binded input box updates values (always "true" for expandable picker) */
alphaSupport : false , /* set to true to enable alpha picking */
alphaPrecision : 0 , /* set decimal precision for alpha percentage display - hex codes do not map directly to percentage integers - range 0-2 */
updateInputColor : true /* set to false to prevent binded input colors from changing */
} ,
color :
{
mode : 'h' , /* acceptabled values "h" (hue), "s" (saturation), "v" (value), "r" (red), "g" (green), "b" (blue), "a" (alpha) */
active : new Color ( { ahex : '#ffcc00ff' } ) , /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
quickList : /* the quick pick color list */
[
new Color ( { h : 360 , s : 33 , v : 100 } ) , /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
new Color ( { h : 360 , s : 66 , v : 100 } ) ,
new Color ( { h : 360 , s : 100 , v : 100 } ) ,
new Color ( { h : 360 , s : 100 , v : 75 } ) ,
new Color ( { h : 360 , s : 100 , v : 50 } ) ,
new Color ( { h : 180 , s : 0 , v : 100 } ) ,
new Color ( { h : 30 , s : 33 , v : 100 } ) ,
new Color ( { h : 30 , s : 66 , v : 100 } ) ,
new Color ( { h : 30 , s : 100 , v : 100 } ) ,
new Color ( { h : 30 , s : 100 , v : 75 } ) ,
new Color ( { h : 30 , s : 100 , v : 50 } ) ,
new Color ( { h : 180 , s : 0 , v : 90 } ) ,
new Color ( { h : 60 , s : 33 , v : 100 } ) ,
new Color ( { h : 60 , s : 66 , v : 100 } ) ,
new Color ( { h : 60 , s : 100 , v : 100 } ) ,
new Color ( { h : 60 , s : 100 , v : 75 } ) ,
new Color ( { h : 60 , s : 100 , v : 50 } ) ,
new Color ( { h : 180 , s : 0 , v : 80 } ) ,
new Color ( { h : 90 , s : 33 , v : 100 } ) ,
new Color ( { h : 90 , s : 66 , v : 100 } ) ,
new Color ( { h : 90 , s : 100 , v : 100 } ) ,
new Color ( { h : 90 , s : 100 , v : 75 } ) ,
new Color ( { h : 90 , s : 100 , v : 50 } ) ,
new Color ( { h : 180 , s : 0 , v : 70 } ) ,
new Color ( { h : 120 , s : 33 , v : 100 } ) ,
new Color ( { h : 120 , s : 66 , v : 100 } ) ,
new Color ( { h : 120 , s : 100 , v : 100 } ) ,
new Color ( { h : 120 , s : 100 , v : 75 } ) ,
new Color ( { h : 120 , s : 100 , v : 50 } ) ,
new Color ( { h : 180 , s : 0 , v : 60 } ) ,
new Color ( { h : 150 , s : 33 , v : 100 } ) ,
new Color ( { h : 150 , s : 66 , v : 100 } ) ,
new Color ( { h : 150 , s : 100 , v : 100 } ) ,
new Color ( { h : 150 , s : 100 , v : 75 } ) ,
new Color ( { h : 150 , s : 100 , v : 50 } ) ,
new Color ( { h : 180 , s : 0 , v : 50 } ) ,
new Color ( { h : 180 , s : 33 , v : 100 } ) ,
new Color ( { h : 180 , s : 66 , v : 100 } ) ,
new Color ( { h : 180 , s : 100 , v : 100 } ) ,
new Color ( { h : 180 , s : 100 , v : 75 } ) ,
new Color ( { h : 180 , s : 100 , v : 50 } ) ,
new Color ( { h : 180 , s : 0 , v : 40 } ) ,
new Color ( { h : 210 , s : 33 , v : 100 } ) ,
new Color ( { h : 210 , s : 66 , v : 100 } ) ,
new Color ( { h : 210 , s : 100 , v : 100 } ) ,
new Color ( { h : 210 , s : 100 , v : 75 } ) ,
new Color ( { h : 210 , s : 100 , v : 50 } ) ,
new Color ( { h : 180 , s : 0 , v : 30 } ) ,
new Color ( { h : 240 , s : 33 , v : 100 } ) ,
new Color ( { h : 240 , s : 66 , v : 100 } ) ,
new Color ( { h : 240 , s : 100 , v : 100 } ) ,
new Color ( { h : 240 , s : 100 , v : 75 } ) ,
new Color ( { h : 240 , s : 100 , v : 50 } ) ,
new Color ( { h : 180 , s : 0 , v : 20 } ) ,
new Color ( { h : 270 , s : 33 , v : 100 } ) ,
new Color ( { h : 270 , s : 66 , v : 100 } ) ,
new Color ( { h : 270 , s : 100 , v : 100 } ) ,
new Color ( { h : 270 , s : 100 , v : 75 } ) ,
new Color ( { h : 270 , s : 100 , v : 50 } ) ,
new Color ( { h : 180 , s : 0 , v : 10 } ) ,
new Color ( { h : 300 , s : 33 , v : 100 } ) ,
new Color ( { h : 300 , s : 66 , v : 100 } ) ,
new Color ( { h : 300 , s : 100 , v : 100 } ) ,
new Color ( { h : 300 , s : 100 , v : 75 } ) ,
new Color ( { h : 300 , s : 100 , v : 50 } ) ,
new Color ( { h : 180 , s : 0 , v : 0 } ) ,
new Color ( { h : 330 , s : 33 , v : 100 } ) ,
new Color ( { h : 330 , s : 66 , v : 100 } ) ,
new Color ( { h : 330 , s : 100 , v : 100 } ) ,
new Color ( { h : 330 , s : 100 , v : 75 } ) ,
new Color ( { h : 330 , s : 100 , v : 50 } ) ,
new Color ( )
]
} ,
images :
{
clientPath : '/jPicker/images/' , /* Path to image files */
colorMap :
{
width : 256 ,
height : 256 ,
arrow :
{
file : 'mappoint.gif' , /* ColorMap arrow icon */
width : 15 ,
height : 15
}
} ,
colorBar :
{
width : 20 ,
height : 256 ,
arrow :
{
file : 'rangearrows.gif' , /* ColorBar arrow icon */
width : 20 ,
height : 7
}
} ,
picker :
{
file : 'picker.gif' , /* Color Picker icon */
width : 25 ,
height : 24
}
} ,
localization : /* alter these to change the text presented by the picker (e.g. different language) */
{
text :
{
title : 'Drag Markers To Pick A Color' ,
newColor : 'new' ,
currentColor : 'current' ,
ok : 'OK' ,
cancel : 'Cancel'
} ,
tooltips :
{
colors :
{
newColor : 'New Color - Press “OK” To Commit' ,
currentColor : 'Click To Revert To Original Color'
} ,
buttons :
{
ok : 'Commit To This Color Selection' ,
cancel : 'Cancel And Revert To Original Color'
} ,
hue :
{
radio : 'Set To “Hue” Color Mode' ,
textbox : 'Enter A “Hue” Value (0-360°)'
} ,
saturation :
{
radio : 'Set To “Saturation” Color Mode' ,
textbox : 'Enter A “Saturation” Value (0-100%)'
} ,
value :
{
radio : 'Set To “Value” Color Mode' ,
textbox : 'Enter A “Value” Value (0-100%)'
} ,
red :
{
radio : 'Set To “Red” Color Mode' ,
textbox : 'Enter A “Red” Value (0-255)'
} ,
green :
{
radio : 'Set To “Green” Color Mode' ,
textbox : 'Enter A “Green” Value (0-255)'
} ,
blue :
{
radio : 'Set To “Blue” Color Mode' ,
textbox : 'Enter A “Blue” Value (0-255)'
} ,
alpha :
{
radio : 'Set To “Alpha” Color Mode' ,
textbox : 'Enter A “Alpha” Value (0-100)'
} ,
hex :
{
textbox : 'Enter A “Hex” Color Value (#000000-#ffffff)' ,
alpha : 'Enter A “Alpha” Value (#00-#ff)'
}
}
}
} ;
2013-03-25 20:39:02 +01:00
} ) ( jQuery , '1.1.6' ) ;
