Edit File by line

/**

[0] Fix | Delete

* @output wp-admin/js/color-picker.js

[1] Fix | Delete

[2] Fix | Delete

[3] Fix | Delete

( function( $, undef ) {

[4] Fix | Delete

[5] Fix | Delete

var ColorPicker,

[6] Fix | Delete

_before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',

[7] Fix | Delete

_after = '<div class="wp-picker-holder" />',

[8] Fix | Delete

_wrap = '<div class="wp-picker-container" />',

[9] Fix | Delete

_button = '<input type="button" class="button button-small" />',

[10] Fix | Delete

_wrappingLabel = '<label></label>',

[11] Fix | Delete

_wrappingLabelText = '<span class="screen-reader-text"></span>',

[12] Fix | Delete

__ = wp.i18n.__;

[13] Fix | Delete

[14] Fix | Delete

/**

[15] Fix | Delete

* Creates a jQuery UI color picker that is used in the theme customizer.

[16] Fix | Delete

[17] Fix | Delete

* @class $.widget.wp.wpColorPicker

[18] Fix | Delete

[19] Fix | Delete

* @since 3.5.0

[20] Fix | Delete

[21] Fix | Delete

ColorPicker = /** @lends $.widget.wp.wpColorPicker.prototype */{

[22] Fix | Delete

options: {

[23] Fix | Delete

defaultColor: false,

[24] Fix | Delete

change: false,

[25] Fix | Delete

clear: false,

[26] Fix | Delete

hide: true,

[27] Fix | Delete

palettes: true,

[28] Fix | Delete

width: 255,

[29] Fix | Delete

mode: 'hsv',

[30] Fix | Delete

type: 'full',

[31] Fix | Delete

slider: 'horizontal'

[32] Fix | Delete

[33] Fix | Delete

/**

[34] Fix | Delete

* Creates a color picker that only allows you to adjust the hue.

[35] Fix | Delete

[36] Fix | Delete

* @since 3.5.0

[37] Fix | Delete

* @access private

[38] Fix | Delete

[39] Fix | Delete

* @return {void}

[40] Fix | Delete

[41] Fix | Delete

_createHueOnly: function() {

[42] Fix | Delete

var self = this,

[43] Fix | Delete

el = self.element,

[44] Fix | Delete

color;

[45] Fix | Delete

[46] Fix | Delete

el.hide();

[47] Fix | Delete

[48] Fix | Delete

// Set the saturation to the maximum level.

[49] Fix | Delete

color = 'hsl(' + el.val() + ', 100, 50)';

[50] Fix | Delete

[51] Fix | Delete

// Create an instance of the color picker, using the hsl mode.

[52] Fix | Delete

el.iris( {

[53] Fix | Delete

mode: 'hsl',

[54] Fix | Delete

type: 'hue',

[55] Fix | Delete

hide: false,

[56] Fix | Delete

color: color,

[57] Fix | Delete

/**

[58] Fix | Delete

* Handles the onChange event if one has been defined in the options.

[59] Fix | Delete

[60] Fix | Delete

* @ignore

[61] Fix | Delete

[62] Fix | Delete

* @param {Event} event The event that's being called.

[63] Fix | Delete

* @param {HTMLElement} ui The HTMLElement containing the color picker.

[64] Fix | Delete

[65] Fix | Delete

* @return {void}

[66] Fix | Delete

[67] Fix | Delete

change: function( event, ui ) {

[68] Fix | Delete

if ( typeof self.options.change === 'function' ) {

[69] Fix | Delete

self.options.change.call( this, event, ui );

[70] Fix | Delete

}

[71] Fix | Delete

[72] Fix | Delete

width: self.options.width,

[73] Fix | Delete

slider: self.options.slider

[74] Fix | Delete

} );

[75] Fix | Delete

[76] Fix | Delete

/**

[77] Fix | Delete

* Creates the color picker, sets default values, css classes and wraps it all in HTML.

[78] Fix | Delete

[79] Fix | Delete

* @since 3.5.0

[80] Fix | Delete

* @access private

[81] Fix | Delete

[82] Fix | Delete

* @return {void}

[83] Fix | Delete

[84] Fix | Delete

_create: function() {

[85] Fix | Delete

// Return early if Iris support is missing.

[86] Fix | Delete

if ( ! $.support.iris ) {

[87] Fix | Delete

return;

[88] Fix | Delete

}

[89] Fix | Delete

[90] Fix | Delete

var self = this,

[91] Fix | Delete

el = self.element;

[92] Fix | Delete

[93] Fix | Delete

// Override default options with options bound to the element.

[94] Fix | Delete

$.extend( self.options, el.data() );

[95] Fix | Delete

[96] Fix | Delete

// Create a color picker which only allows adjustments to the hue.

[97] Fix | Delete

if ( self.options.type === 'hue' ) {

[98] Fix | Delete

return self._createHueOnly();

[99] Fix | Delete

}

[100] Fix | Delete

[101] Fix | Delete

// Bind the close event.

[102] Fix | Delete

self.close = self.close.bind( self );

[103] Fix | Delete

[104] Fix | Delete

self.initialValue = el.val();

[105] Fix | Delete

[106] Fix | Delete

// Add a CSS class to the input field.

[107] Fix | Delete

el.addClass( 'wp-color-picker' );

[108] Fix | Delete

[109] Fix | Delete

[110] Fix | Delete

* Check if there's already a wrapping label, e.g. in the Customizer.

[111] Fix | Delete

* If there's no label, add a default one to match the Customizer template.

[112] Fix | Delete

[113] Fix | Delete

if ( ! el.parent( 'label' ).length ) {

[114] Fix | Delete

// Wrap the input field in the default label.

[115] Fix | Delete

el.wrap( _wrappingLabel );

[116] Fix | Delete

// Insert the default label text.

[117] Fix | Delete

self.wrappingLabelText = $( _wrappingLabelText )

[118] Fix | Delete

.insertBefore( el )

[119] Fix | Delete

.text( __( 'Color value' ) );

[120] Fix | Delete

}

[121] Fix | Delete

[122] Fix | Delete

[123] Fix | Delete

* At this point, either it's the standalone version or the Customizer

[124] Fix | Delete

* one, we have a wrapping label to use as hook in the DOM, let's store it.

[125] Fix | Delete

[126] Fix | Delete

self.wrappingLabel = el.parent();

[127] Fix | Delete

[128] Fix | Delete

// Wrap the label in the main wrapper.

[129] Fix | Delete

self.wrappingLabel.wrap( _wrap );

[130] Fix | Delete

// Store a reference to the main wrapper.

[131] Fix | Delete

self.wrap = self.wrappingLabel.parent();

[132] Fix | Delete

// Set up the toggle button and insert it before the wrapping label.

[133] Fix | Delete

self.toggler = $( _before )

[134] Fix | Delete

.insertBefore( self.wrappingLabel )

[135] Fix | Delete

.css( { backgroundColor: self.initialValue } );

[136] Fix | Delete

// Set the toggle button span element text.

[137] Fix | Delete

self.toggler.find( '.wp-color-result-text' ).text( __( 'Select Color' ) );

[138] Fix | Delete

// Set up the Iris container and insert it after the wrapping label.

[139] Fix | Delete

self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel );

[140] Fix | Delete

// Store a reference to the Clear/Default button.

[141] Fix | Delete

self.button = $( _button );

[142] Fix | Delete

[143] Fix | Delete

// Set up the Clear/Default button.

[144] Fix | Delete

if ( self.options.defaultColor ) {

[145] Fix | Delete

self.button

[146] Fix | Delete

.addClass( 'wp-picker-default' )

[147] Fix | Delete

.val( __( 'Default' ) )

[148] Fix | Delete

.attr( 'aria-label', __( 'Select default color' ) );

[149] Fix | Delete

} else {

[150] Fix | Delete

self.button

[151] Fix | Delete

.addClass( 'wp-picker-clear' )

[152] Fix | Delete

.val( __( 'Clear' ) )

[153] Fix | Delete

.attr( 'aria-label', __( 'Clear color' ) );

[154] Fix | Delete

}

[155] Fix | Delete

[156] Fix | Delete

// Wrap the wrapping label in its wrapper and append the Clear/Default button.

[157] Fix | Delete

self.wrappingLabel

[158] Fix | Delete

.wrap( '<span class="wp-picker-input-wrap hidden" />' )

[159] Fix | Delete

.after( self.button );

[160] Fix | Delete

[161] Fix | Delete

[162] Fix | Delete

* The input wrapper now contains the label+input+Clear/Default button.

[163] Fix | Delete

* Store a reference to the input wrapper: we'll use this to toggle

[164] Fix | Delete

* the controls visibility.

[165] Fix | Delete

[166] Fix | Delete

self.inputWrapper = el.closest( '.wp-picker-input-wrap' );

[167] Fix | Delete

[168] Fix | Delete

el.iris( {

[169] Fix | Delete

target: self.pickerContainer,

[170] Fix | Delete

hide: self.options.hide,

[171] Fix | Delete

width: self.options.width,

[172] Fix | Delete

mode: self.options.mode,

[173] Fix | Delete

palettes: self.options.palettes,

[174] Fix | Delete

/**

[175] Fix | Delete

* Handles the onChange event if one has been defined in the options and additionally

[176] Fix | Delete

* sets the background color for the toggler element.

[177] Fix | Delete

[178] Fix | Delete

* @since 3.5.0

[179] Fix | Delete

[180] Fix | Delete

* @ignore

[181] Fix | Delete

[182] Fix | Delete

* @param {Event} event The event that's being called.

[183] Fix | Delete

* @param {HTMLElement} ui The HTMLElement containing the color picker.

[184] Fix | Delete

[185] Fix | Delete

* @return {void}

[186] Fix | Delete

[187] Fix | Delete

change: function( event, ui ) {

[188] Fix | Delete

self.toggler.css( { backgroundColor: ui.color.toString() } );

[189] Fix | Delete

[190] Fix | Delete

if ( typeof self.options.change === 'function' ) {

[191] Fix | Delete

self.options.change.call( this, event, ui );

[192] Fix | Delete

}

[193] Fix | Delete

}

[194] Fix | Delete

} );

[195] Fix | Delete

[196] Fix | Delete

el.val( self.initialValue );

[197] Fix | Delete

self._addListeners();

[198] Fix | Delete

[199] Fix | Delete

// Force the color picker to always be closed on initial load.

[200] Fix | Delete

if ( ! self.options.hide ) {

[201] Fix | Delete

self.toggler.click();

[202] Fix | Delete

}

[203] Fix | Delete

[204] Fix | Delete

/**

[205] Fix | Delete

* Binds event listeners to the color picker.

[206] Fix | Delete

[207] Fix | Delete

* @since 3.5.0

[208] Fix | Delete

* @access private

[209] Fix | Delete

[210] Fix | Delete

* @return {void}

[211] Fix | Delete

[212] Fix | Delete

_addListeners: function() {

[213] Fix | Delete

var self = this;

[214] Fix | Delete

[215] Fix | Delete

/**

[216] Fix | Delete

* Prevent any clicks inside this widget from leaking to the top and closing it.

[217] Fix | Delete

[218] Fix | Delete

* @since 3.5.0

[219] Fix | Delete

[220] Fix | Delete

* @param {Event} event The event that's being called.

[221] Fix | Delete

[222] Fix | Delete

* @return {void}

[223] Fix | Delete

[224] Fix | Delete

self.wrap.on( 'click.wpcolorpicker', function( event ) {

[225] Fix | Delete

event.stopPropagation();

[226] Fix | Delete

});

[227] Fix | Delete

[228] Fix | Delete

/**

[229] Fix | Delete

* Open or close the color picker depending on the class.

[230] Fix | Delete

[231] Fix | Delete

* @since 3.5.0

[232] Fix | Delete

[233] Fix | Delete

self.toggler.on( 'click', function(){

[234] Fix | Delete

if ( self.toggler.hasClass( 'wp-picker-open' ) ) {

[235] Fix | Delete

self.close();

[236] Fix | Delete

} else {

[237] Fix | Delete

self.open();

[238] Fix | Delete

}

[239] Fix | Delete

});

[240] Fix | Delete

[241] Fix | Delete

/**

[242] Fix | Delete

* Checks if value is empty when changing the color in the color picker.

[243] Fix | Delete

* If so, the background color is cleared.

[244] Fix | Delete

[245] Fix | Delete

* @since 3.5.0

[246] Fix | Delete

[247] Fix | Delete

* @param {Event} event The event that's being called.

[248] Fix | Delete

[249] Fix | Delete

* @return {void}

[250] Fix | Delete

[251] Fix | Delete

self.element.on( 'change', function( event ) {

[252] Fix | Delete

var me = $( this ),

[253] Fix | Delete

val = me.val();

[254] Fix | Delete

[255] Fix | Delete

if ( val === '' || val === '#' ) {

[256] Fix | Delete

self.toggler.css( 'backgroundColor', '' );

[257] Fix | Delete

// Fire clear callback if we have one.

[258] Fix | Delete

if ( typeof self.options.clear === 'function' ) {

[259] Fix | Delete

self.options.clear.call( this, event );

[260] Fix | Delete

}

[261] Fix | Delete

}

[262] Fix | Delete

});

[263] Fix | Delete

[264] Fix | Delete

/**

[265] Fix | Delete

* Enables the user to either clear the color in the color picker or revert back to the default color.

[266] Fix | Delete

[267] Fix | Delete

* @since 3.5.0

[268] Fix | Delete

[269] Fix | Delete

* @param {Event} event The event that's being called.

[270] Fix | Delete

[271] Fix | Delete

* @return {void}

[272] Fix | Delete

[273] Fix | Delete

self.button.on( 'click', function( event ) {

[274] Fix | Delete

var me = $( this );

[275] Fix | Delete

if ( me.hasClass( 'wp-picker-clear' ) ) {

[276] Fix | Delete

self.element.val( '' );

[277] Fix | Delete

self.toggler.css( 'backgroundColor', '' );

[278] Fix | Delete

if ( typeof self.options.clear === 'function' ) {

[279] Fix | Delete

self.options.clear.call( this, event );

[280] Fix | Delete

}

[281] Fix | Delete

} else if ( me.hasClass( 'wp-picker-default' ) ) {

[282] Fix | Delete

self.element.val( self.options.defaultColor ).change();

[283] Fix | Delete

}

[284] Fix | Delete

});

[285] Fix | Delete

[286] Fix | Delete

/**

[287] Fix | Delete

* Opens the color picker dialog.

[288] Fix | Delete

[289] Fix | Delete

* @since 3.5.0

[290] Fix | Delete

[291] Fix | Delete

* @return {void}

[292] Fix | Delete

[293] Fix | Delete

open: function() {

[294] Fix | Delete

this.element.iris( 'toggle' );

[295] Fix | Delete

this.inputWrapper.removeClass( 'hidden' );

[296] Fix | Delete

this.wrap.addClass( 'wp-picker-active' );

[297] Fix | Delete

this.toggler

[298] Fix | Delete

.addClass( 'wp-picker-open' )

[299] Fix | Delete

.attr( 'aria-expanded', 'true' );

[300] Fix | Delete

$( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );

[301] Fix | Delete

[302] Fix | Delete

/**

[303] Fix | Delete

* Closes the color picker dialog.

[304] Fix | Delete

[305] Fix | Delete

* @since 3.5.0

[306] Fix | Delete

[307] Fix | Delete

* @return {void}

[308] Fix | Delete

[309] Fix | Delete

close: function() {

[310] Fix | Delete

this.element.iris( 'toggle' );

[311] Fix | Delete

this.inputWrapper.addClass( 'hidden' );

[312] Fix | Delete

this.wrap.removeClass( 'wp-picker-active' );

[313] Fix | Delete

this.toggler

[314] Fix | Delete

.removeClass( 'wp-picker-open' )

[315] Fix | Delete

.attr( 'aria-expanded', 'false' );

[316] Fix | Delete

$( 'body' ).off( 'click.wpcolorpicker', this.close );

[317] Fix | Delete

[318] Fix | Delete

/**

[319] Fix | Delete

* Returns the iris object if no new color is provided. If a new color is provided, it sets the new color.

[320] Fix | Delete

[321] Fix | Delete

* @param newColor {string|*} The new color to use. Can be undefined.

[322] Fix | Delete

[323] Fix | Delete

* @since 3.5.0

[324] Fix | Delete

[325] Fix | Delete

* @return {string} The element's color.

[326] Fix | Delete

[327] Fix | Delete

color: function( newColor ) {

[328] Fix | Delete

if ( newColor === undef ) {

[329] Fix | Delete

return this.element.iris( 'option', 'color' );

[330] Fix | Delete

}

[331] Fix | Delete

this.element.iris( 'option', 'color', newColor );

[332] Fix | Delete

[333] Fix | Delete

/**

[334] Fix | Delete

* Returns the iris object if no new default color is provided.

[335] Fix | Delete

* If a new default color is provided, it sets the new default color.

[336] Fix | Delete

[337] Fix | Delete

* @param newDefaultColor {string|*} The new default color to use. Can be undefined.

[338] Fix | Delete

[339] Fix | Delete

* @since 3.5.0

[340] Fix | Delete

[341] Fix | Delete

* @return {boolean|string} The element's color.

[342] Fix | Delete

[343] Fix | Delete

defaultColor: function( newDefaultColor ) {

[344] Fix | Delete

if ( newDefaultColor === undef ) {

[345] Fix | Delete

return this.options.defaultColor;

[346] Fix | Delete

}

[347] Fix | Delete

[348] Fix | Delete

this.options.defaultColor = newDefaultColor;

[349] Fix | Delete

}

[350] Fix | Delete

};

[351] Fix | Delete

[352] Fix | Delete

// Register the color picker as a widget.

[353] Fix | Delete

$.widget( 'wp.wpColorPicker', ColorPicker );

[354] Fix | Delete

}( jQuery ) );

[355] Fix | Delete

[356] Fix | Delete