1/**
2 * @output wp-admin/js/color-picker.js
3 */
4
5( function( $, undef ) {
6
7 var ColorPicker,
8 _before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',
9 _after = '<div class="wp-picker-holder" />',
10 _wrap = '<div class="wp-picker-container" />',
11 _button = '<input type="button" class="button button-small" />',
12 _wrappingLabel = '<label></label>',
13 _wrappingLabelText = '<span class="screen-reader-text"></span>',
14 __ = wp.i18n.__;
15
16 /**
17 * Creates a jQuery UI color picker that is used in the theme customizer.
18 *
19 * @class $.widget.wp.wpColorPicker
20 *
21 * @since 3.5.0
22 */
23 ColorPicker = /** @lends $.widget.wp.wpColorPicker.prototype */{
24 options: {
25 defaultColor: false,
26 change: false,
27 clear: false,
28 hide: true,
29 palettes: true,
30 width: 255,
31 mode: 'hsv',
32 type: 'full',
33 slider: 'horizontal'
34 },
35 /**
36 * Creates a color picker that only allows you to adjust the hue.
37 *
38 * @since 3.5.0
39 * @access private
40 *
41 * @return {void}
42 */
43 _createHueOnly: function() {
44 var self = this,
45 el = self.element,
46 color;
47
48 el.hide();
49
50 // Set the saturation to the maximum level.
51 color = 'hsl(' + el.val() + ', 100, 50)';
52
53 // Create an instance of the color picker, using the hsl mode.
54 el.iris( {
55 mode: 'hsl',
56 type: 'hue',
57 hide: false,
58 color: color,
59 /**
60 * Handles the onChange event if one has been defined in the options.
61 *
62 * @ignore
63 *
64 * @param {Event} event The event that's being called.
65 * @param {HTMLElement} ui The HTMLElement containing the color picker.
66 *
67 * @return {void}
68 */
69 change: function( event, ui ) {
70 if ( typeof self.options.change === 'function' ) {
71 self.options.change.call( this, event, ui );
72 }
73 },
74 width: self.options.width,
75 slider: self.options.slider
76 } );
77 },
78 /**
79 * Creates the color picker, sets default values, css classes and wraps it all in HTML.
80 *
81 * @since 3.5.0
82 * @access private
83 *
84 * @return {void}
85 */
86 _create: function() {
87 // Return early if Iris support is missing.
88 if ( ! $.support.iris ) {
89 return;
90 }
91
92 var self = this,
93 el = self.element;
94
95 // Override default options with options bound to the element.
96 $.extend( self.options, el.data() );
97
98 // Create a color picker which only allows adjustments to the hue.
99 if ( self.options.type === 'hue' ) {
100 return self._createHueOnly();
101 }
102
103 // Bind the close event.
104 self.close = self.close.bind( self );
105
106 self.initialValue = el.val();
107
108 // Add a CSS class to the input field.
109 el.addClass( 'wp-color-picker' );
110
111 /*
112 * Check if there's already a wrapping label, e.g. in the Customizer.
113 * If there's no label, add a default one to match the Customizer template.
114 */
115 if ( ! el.parent( 'label' ).length ) {
116 // Wrap the input field in the default label.
117 el.wrap( _wrappingLabel );
118 // Insert the default label text.
119 self.wrappingLabelText = $( _wrappingLabelText )
120 .insertBefore( el )
121 .text( __( 'Color value' ) );
122 }
123
124 /*
125 * At this point, either it's the standalone version or the Customizer
126 * one, we have a wrapping label to use as hook in the DOM, let's store it.
127 */
128 self.wrappingLabel = el.parent();
129
130 // Wrap the label in the main wrapper.
131 self.wrappingLabel.wrap( _wrap );
132 // Store a reference to the main wrapper.
133 self.wrap = self.wrappingLabel.parent();
134 // Set up the toggle button and insert it before the wrapping label.
135 self.toggler = $( _before )
136 .insertBefore( self.wrappingLabel )
137 .css( { backgroundColor: self.initialValue } );
138 // Set the toggle button span element text.
139 self.toggler.find( '.wp-color-result-text' ).text( __( 'Select Color' ) );
140 // Set up the Iris container and insert it after the wrapping label.
141 self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel );
142 // Store a reference to the Clear/Default button.
143 self.button = $( _button );
144
145 // Set up the Clear/Default button.
146 if ( self.options.defaultColor ) {
147 self.button
148 .addClass( 'wp-picker-default' )
149 .val( __( 'Default' ) )
150 .attr( 'aria-label', __( 'Select default color' ) );
151 } else {
152 self.button
153 .addClass( 'wp-picker-clear' )
154 .val( __( 'Clear' ) )
155 .attr( 'aria-label', __( 'Clear color' ) );
156 }
157
158 // Wrap the wrapping label in its wrapper and append the Clear/Default button.
159 self.wrappingLabel
160 .wrap( '<span class="wp-picker-input-wrap hidden" />' )
161 .after( self.button );
162
163 /*
164 * The input wrapper now contains the label+input+Clear/Default button.
165 * Store a reference to the input wrapper: we'll use this to toggle
166 * the controls visibility.
167 */
168 self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
169
170 el.iris( {
171 target: self.pickerContainer,
172 hide: self.options.hide,
173 width: self.options.width,
174 mode: self.options.mode,
175 palettes: self.options.palettes,
176 /**
177 * Handles the onChange event if one has been defined in the options and additionally
178 * sets the background color for the toggler element.
179 *
180 * @since 3.5.0
181 *
182 * @ignore
183 *
184 * @param {Event} event The event that's being called.
185 * @param {HTMLElement} ui The HTMLElement containing the color picker.
186 *
187 * @return {void}
188 */
189 change: function( event, ui ) {
190 self.toggler.css( { backgroundColor: ui.color.toString() } );
191
192 if ( typeof self.options.change === 'function' ) {
193 self.options.change.call( this, event, ui );
194 }
195 }
196 } );
197
198 el.val( self.initialValue );
199 self._addListeners();
200
201 // Force the color picker to always be closed on initial load.
202 if ( ! self.options.hide ) {
203 self.toggler.click();
204 }
205 },
206 /**
207 * Binds event listeners to the color picker.
208 *
209 * @since 3.5.0
210 * @access private
211 *
212 * @return {void}
213 */
214 _addListeners: function() {
215 var self = this;
216
217 /**
218 * Prevent any clicks inside this widget from leaking to the top and closing it.
219 *
220 * @since 3.5.0
221 *
222 * @param {Event} event The event that's being called.
223 *
224 * @return {void}
225 */
226 self.wrap.on( 'click.wpcolorpicker', function( event ) {
227 event.stopPropagation();
228 });
229
230 /**
231 * Open or close the color picker depending on the class.
232 *
233 * @since 3.5.0
234 */
235 self.toggler.on( 'click', function(){
236 if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
237 self.close();
238 } else {
239 self.open();
240 }
241 });
242
243 /**
244 * Checks if value is empty when changing the color in the color picker.
245 * If so, the background color is cleared.
246 *
247 * @since 3.5.0
248 *
249 * @param {Event} event The event that's being called.
250 *
251 * @return {void}
252 */
253 self.element.on( 'change', function( event ) {
254 var me = $( this ),
255 val = me.val();
256
257 if ( val === '' || val === '#' ) {
258 self.toggler.css( 'backgroundColor', '' );
259 // Fire clear callback if we have one.
260 if ( typeof self.options.clear === 'function' ) {
261 self.options.clear.call( this, event );
262 }
263 }
264 });
265
266 /**
267 * Enables the user to either clear the color in the color picker or revert back to the default color.
268 *
269 * @since 3.5.0
270 *
271 * @param {Event} event The event that's being called.
272 *
273 * @return {void}
274 */
275 self.button.on( 'click', function( event ) {
276 var me = $( this );
277 if ( me.hasClass( 'wp-picker-clear' ) ) {
278 self.element.val( '' );
279 self.toggler.css( 'backgroundColor', '' );
280 if ( typeof self.options.clear === 'function' ) {
281 self.options.clear.call( this, event );
282 }
283 } else if ( me.hasClass( 'wp-picker-default' ) ) {
284 self.element.val( self.options.defaultColor ).change();
285 }
286 });
287 },
288 /**
289 * Opens the color picker dialog.
290 *
291 * @since 3.5.0
292 *
293 * @return {void}
294 */
295 open: function() {
296 this.element.iris( 'toggle' );
297 this.inputWrapper.removeClass( 'hidden' );
298 this.wrap.addClass( 'wp-picker-active' );
299 this.toggler
300 .addClass( 'wp-picker-open' )
301 .attr( 'aria-expanded', 'true' );
302 $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
303 },
304 /**
305 * Closes the color picker dialog.
306 *
307 * @since 3.5.0
308 *
309 * @return {void}
310 */
311 close: function() {
312 this.element.iris( 'toggle' );
313 this.inputWrapper.addClass( 'hidden' );
314 this.wrap.removeClass( 'wp-picker-active' );
315 this.toggler
316 .removeClass( 'wp-picker-open' )
317 .attr( 'aria-expanded', 'false' );
318 $( 'body' ).off( 'click.wpcolorpicker', this.close );
319 },
320 /**
321 * Returns the iris object if no new color is provided. If a new color is provided, it sets the new color.
322 *
323 * @param newColor {string|*} The new color to use. Can be undefined.
324 *
325 * @since 3.5.0
326 *
327 * @return {string} The element's color.
328 */
329 color: function( newColor ) {
330 if ( newColor === undef ) {
331 return this.element.iris( 'option', 'color' );
332 }
333 this.element.iris( 'option', 'color', newColor );
334 },
335 /**
336 * Returns the iris object if no new default color is provided.
337 * If a new default color is provided, it sets the new default color.
338 *
339 * @param newDefaultColor {string|*} The new default color to use. Can be undefined.
340 *
341 * @since 3.5.0
342 *
343 * @return {boolean|string} The element's color.
344 */
345 defaultColor: function( newDefaultColor ) {
346 if ( newDefaultColor === undef ) {
347 return this.options.defaultColor;
348 }
349
350 this.options.defaultColor = newDefaultColor;
351 }
352 };
353
354 // Register the color picker as a widget.
355 $.widget( 'wp.wpColorPicker', ColorPicker );
356}( jQuery ) );
357