change: false,
clear: false,
hide: true,
- palettes: true
+ palettes: true,
+ width: 255,
+ mode: 'hsv',
+ type: 'full',
+ slider: 'horizontal'
+ },
+ _createHueOnly: function() {
+ var self = this,
+ el = self.element,
+ color;
+
+ // hide input
+ el.hide();
+ // max saturated color for hue to be obvious
+ color = 'hsl(' + el.val() + ', 100, 50)';
+
+ el.iris( {
+ mode: 'hsl',
+ type: 'hue',
+ hide: false,
+ color: color,
+ change: function( event, ui ) {
+ if ( $.isFunction( self.options.change ) ) {
+ self.options.change.call( this, event, ui );
+ }
+ },
+ width: self.options.width,
+ slider: self.options.slider
+ } );
},
_create: function() {
// bail early for unsupported Iris.
$.extend( self.options, el.data() );
+ // hue-only gets created differently
+ if ( self.options.type === 'hue' ) {
+ return self._createHueOnly();
+ }
+
// keep close bound so it can be attached to a body listener
self.close = $.proxy( self.close, self );
el.iris( {
target: self.pickerContainer,
- hide: true,
- width: 255,
- mode: 'hsv',
+ hide: self.options.hide,
+ width: self.options.width,
+ mode: self.options.mode,
palettes: self.options.palettes,
change: function( event, ui ) {
self.toggler.css( { backgroundColor: ui.color.toString() } );
open: function() {
this.element.show().iris( 'toggle' ).focus();
this.button.removeClass( 'hidden' );
+ this.wrap.addClass( 'wp-picker-active' );
this.toggler.addClass( 'wp-picker-open' );
$( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
},
close: function() {
this.element.hide().iris( 'toggle' );
this.button.addClass( 'hidden' );
+ this.wrap.removeClass( 'wp-picker-active' );
this.toggler.removeClass( 'wp-picker-open' );
$( 'body' ).off( 'click.wpcolorpicker', this.close );
},
if ( newColor === undef ) {
return this.element.iris( 'option', 'color' );
}
-
this.element.iris( 'option', 'color', newColor );
},
//$("#input").wpColorPicker('defaultColor') returns the current default color