/* global wpColorPickerL10n */
( function( $, undef ){
var ColorPicker,
_before = '',
_after = '',
_wrap = '',
_button = '';
/**
* @summary Creates a jQuery UI color picker.
*
* Creates a jQuery UI color picker that is used in the theme customizer.
*
* @since 3.5.0
*/
ColorPicker = {
options: {
defaultColor: false,
change: false,
clear: false,
hide: true,
palettes: true,
width: 255,
mode: 'hsv',
type: 'full',
slider: 'horizontal'
},
/**
* @summary Creates a color picker that only allows you to adjust the hue.
*
* @since 3.5.0
*
* @access private
*
* @returns {void}
*/
_createHueOnly: function() {
var self = this,
el = self.element,
color;
el.hide();
// Set the saturation to the maximum level.
color = 'hsl(' + el.val() + ', 100, 50)';
// Create an instance of the color picker, using the hsl mode.
el.iris( {
mode: 'hsl',
type: 'hue',
hide: false,
color: color,
/**
* @summary Handles the onChange event if one has been defined in the options.
*
* @param {Event} event The event that's being called.
* @param {HTMLElement} ui The HTMLElement containing the color picker.
*
* @returns {void}
*/
change: function( event, ui ) {
if ( $.isFunction( self.options.change ) ) {
self.options.change.call( this, event, ui );
}
},
width: self.options.width,
slider: self.options.slider
} );
},
/**
* @summary Creates the color picker.
*
* Creates the color picker, sets default values, css classes and wraps it all in HTML.
*
* @since 3.5.0
*
* @access private
*
* @returns {void}
*/
_create: function() {
// Return early if Iris support is missing.
if ( ! $.support.iris ) {
return;
}
var self = this,
el = self.element;
// Override default options with options bound to the element.
$.extend( self.options, el.data() );
// Create a color picker which only allows adjustments to the hue.
if ( self.options.type === 'hue' ) {
return self._createHueOnly();
}
// Bind the close event.
self.close = $.proxy( self.close, self );
self.initialValue = el.val();
// Set up HTML structure and hide the color picker.
el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
self.wrap = el.parent();
self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
self.pickerContainer = $( _after ).insertAfter( el );
self.button = $( _button );
if ( self.options.defaultColor ) {
self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
} else {
self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
}
el.wrap( '' ).after( self.button );
el.iris( {
target: self.pickerContainer,
hide: self.options.hide,
width: self.options.width,
mode: self.options.mode,
palettes: self.options.palettes,
/**
* @summary Handles the onChange event if one has been defined in the options.
*
* Handles the onChange event if one has been defined in the options and additionally
* sets the background color for the toggler element.
*
* @since 3.5.0
*
* @param {Event} event The event that's being called.
* @param {HTMLElement} ui The HTMLElement containing the color picker.
*
* @returns {void}
*/
change: function( event, ui ) {
self.toggler.css( { backgroundColor: ui.color.toString() } );
if ( $.isFunction( self.options.change ) ) {
self.options.change.call( this, event, ui );
}
}
} );
el.val( self.initialValue );
self._addListeners();
// Force the color picker to always be closed on initial load.
if ( ! self.options.hide ) {
self.toggler.click();
}
},
/**
* @summary Binds event listeners to the color picker.
*
* @since 3.5.0
*
* @access private
*
* @returns {void}
*/
_addListeners: function() {
var self = this;
/**
* @summary Prevent any clicks inside this widget from leaking to the top and closing it.
*
* @since 3.5.0
*
* @param {Event} event The event that's being called.
*
* @returs {void}
*/
self.wrap.on( 'click.wpcolorpicker', function( event ) {
event.stopPropagation();
});
/**
* @summary Open or close the color picker depending on the class.
*
* @since 3.5
*/
self.toggler.click( function(){
if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
self.close();
} else {
self.open();
}
});
/**
* @summary Checks if value is empty when changing the color in the color picker.
*
* Checks if value is empty when changing the color in the color picker.
* If so, the background color is cleared.
*
* @since 3.5.0
*
* @param {Event} event The event that's being called.
*
* @returns {void}
*/
self.element.change( function( event ) {
var me = $( this ),
val = me.val();
if ( val === '' || val === '#' ) {
self.toggler.css( 'backgroundColor', '' );
// Fire clear callback if we have one.
if ( $.isFunction( self.options.clear ) ) {
self.options.clear.call( this, event );
}
}
});
/**
* @summary Enables the user to open the color picker with their keyboard.
*
* Enables the user to open the color picker with their keyboard.
* This is possible by using the space or enter key.
*
* @since 3.5.0
*
* @param {Event} event The event that's being called.
*
* @returns {void}
*/
self.toggler.on( 'keyup', function( event ) {
if ( event.keyCode === 13 || event.keyCode === 32 ) {
event.preventDefault();
self.toggler.trigger( 'click' ).next().focus();
}
});
/**
* @summary Enables the user to clear or revert the color in the color picker.
*
* Enables the user to either clear the color in the color picker or revert back to the default color.
*
* @since 3.5.0
*
* @param {Event} event The event that's being called.
*
* @returns {void}
*/
self.button.click( function( event ) {
var me = $( this );
if ( me.hasClass( 'wp-picker-clear' ) ) {
self.element.val( '' );
self.toggler.css( 'backgroundColor', '' );
if ( $.isFunction( self.options.clear ) ) {
self.options.clear.call( this, event );
}
} else if ( me.hasClass( 'wp-picker-default' ) ) {
self.element.val( self.options.defaultColor ).change();
}
});
},
/**
* @summary Opens the color picker dialog.
*
* @since 3.5.0
*
* @returns {void}
*/
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 );
},
/**
* @summary Closes the color picker dialog.
*
* @since 3.5.0
*
* @returns {void}
*/
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 );
},
/**
* @summary Returns iris object or sets new color.
*
* Returns the iris object if no new color is provided. If a new color is provided, it sets the new color.
*
* @param newColor {string|*} The new color to use. Can be undefined.
*
* @since 3.5.0
*
* @returns {string} The element's color
*/
color: function( newColor ) {
if ( newColor === undef ) {
return this.element.iris( 'option', 'color' );
}
this.element.iris( 'option', 'color', newColor );
},
/**
* @summary Returns iris object or sets new default color.
*
* Returns the iris object if no new default color is provided.
* If a new default color is provided, it sets the new default color.
*
* @param newDefaultColor {string|*} The new default color to use. Can be undefined.
*
* @since 3.5.0
*
* @returns {boolean|string} The element's color.
*/
defaultColor: function( newDefaultColor ) {
if ( newDefaultColor === undef ) {
return this.options.defaultColor;
}
this.options.defaultColor = newDefaultColor;
}
};
// Register the color picker as a widget.
$.widget( 'wp.wpColorPicker', ColorPicker );
}( jQuery ) );