1 /* global wpColorPickerL10n */
2 ( function( $, undef ){
6 _before = '<a tabindex="0" class="wp-color-result" />',
7 _after = '<div class="wp-picker-holder" />',
8 _wrap = '<div class="wp-picker-container" />',
9 _button = '<input type="button" class="button button-small hidden" />';
11 // jQuery UI Widget constructor
23 // bail early for unsupported Iris.
24 if ( ! $.support.iris ) {
31 $.extend( self.options, el.data() );
33 // keep close bound so it can be attached to a body listener
34 self.close = $.proxy( self.close, self );
36 self.initialValue = el.val();
38 // Set up HTML structure, hide things
39 el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
40 self.wrap = el.parent();
41 self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
42 self.pickerContainer = $( _after ).insertAfter( el );
43 self.button = $( _button );
45 if ( self.options.defaultColor ) {
46 self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
48 self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
51 el.wrap( '<span class="wp-picker-input-wrap" />' ).after(self.button);
54 target: self.pickerContainer,
55 hide: self.options.hide,
56 width: self.options.width,
57 mode: self.options.mode,
58 palettes: self.options.palettes,
59 change: function( event, ui ) {
60 self.toggler.css( { backgroundColor: ui.color.toString() } );
61 // check for a custom cb
62 if ( $.isFunction( self.options.change ) ) {
63 self.options.change.call( this, event, ui );
68 el.val( self.initialValue );
70 if ( ! self.options.hide ) {
74 _addListeners: function() {
77 // prevent any clicks inside this widget from leaking to the top and closing it
78 self.wrap.on( 'click.wpcolorpicker', function( event ) {
79 event.stopPropagation();
82 self.toggler.click( function(){
83 if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
90 self.element.change( function( event ) {
94 if ( val === '' || val === '#' ) {
95 self.toggler.css( 'backgroundColor', '' );
96 // fire clear callback if we have one
97 if ( $.isFunction( self.options.clear ) ) {
98 self.options.clear.call( this, event );
103 // open a keyboard-focused closed picker with space or enter
104 self.toggler.on( 'keyup', function( event ) {
105 if ( event.keyCode === 13 || event.keyCode === 32 ) {
106 event.preventDefault();
107 self.toggler.trigger( 'click' ).next().focus();
111 self.button.click( function( event ) {
113 if ( me.hasClass( 'wp-picker-clear' ) ) {
114 self.element.val( '' );
115 self.toggler.css( 'backgroundColor', '' );
116 if ( $.isFunction( self.options.clear ) ) {
117 self.options.clear.call( this, event );
119 } else if ( me.hasClass( 'wp-picker-default' ) ) {
120 self.element.val( self.options.defaultColor ).change();
125 this.element.show().iris( 'toggle' ).focus();
126 this.button.removeClass( 'hidden' );
127 this.toggler.addClass( 'wp-picker-open' );
128 $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
131 this.element.hide().iris( 'toggle' );
132 this.button.addClass( 'hidden' );
133 this.toggler.removeClass( 'wp-picker-open' );
134 $( 'body' ).off( 'click.wpcolorpicker', this.close );
136 // $("#input").wpColorPicker('color') returns the current color
137 // $("#input").wpColorPicker('color', '#bada55') to set
138 color: function( newColor ) {
139 if ( newColor === undef ) {
140 return this.element.iris( 'option', 'color' );
143 this.element.iris( 'option', 'color', newColor );
145 //$("#input").wpColorPicker('defaultColor') returns the current default color
146 //$("#input").wpColorPicker('defaultColor', newDefaultColor) to set
147 defaultColor: function( newDefaultColor ) {
148 if ( newDefaultColor === undef ) {
149 return this.options.defaultColor;
152 this.options.defaultColor = newDefaultColor;
156 $.widget( 'wp.wpColorPicker', ColorPicker );