diff -r 490d5cc509ed -r cf61fcea0001 wp/wp-admin/js/color-picker.js --- a/wp/wp-admin/js/color-picker.js Tue Jun 09 11:14:17 2015 +0000 +++ b/wp/wp-admin/js/color-picker.js Mon Oct 14 17:39:30 2019 +0200 @@ -1,14 +1,21 @@ /* global wpColorPickerL10n */ -( function( $, undef ){ +( function( $, undef ) { var ColorPicker, - // html stuff - _before = '', + _before = '', _after = '
', _wrap = '
', - _button = ''; + _button = '', + _wrappingLabel = '', + _wrappingLabelText = ''; - // jQuery UI Widget constructor + /** + * @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, @@ -17,10 +24,65 @@ hide: true, palettes: true, width: 255, - mode: 'hsv' + 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() { - // bail early for unsupported Iris. + // Return early if Iris support is missing. if ( ! $.support.iris ) { return; } @@ -28,27 +90,80 @@ var self = this, el = self.element; + // Override default options with options bound to the element. $.extend( self.options, el.data() ); - // keep close bound so it can be attached to a body listener + // 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, hide things - 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 ); + // Add a CSS class to the input field. + el.addClass( 'wp-color-picker' ); + + /* + * Check if there's already a wrapping label, e.g. in the Customizer. + * If there's no label, add a default one to match the Customizer template. + */ + if ( ! el.parent( 'label' ).length ) { + // Wrap the input field in the default label. + el.wrap( _wrappingLabel ); + // Insert the default label text. + self.wrappingLabelText = $( _wrappingLabelText ) + .insertBefore( el ) + .text( wpColorPickerL10n.defaultLabel ); + } + + /* + * At this point, either it's the standalone version or the Customizer + * one, we have a wrapping label to use as hook in the DOM, let's store it. + */ + self.wrappingLabel = el.parent(); + + // Wrap the label in the main wrapper. + self.wrappingLabel.wrap( _wrap ); + // Store a reference to the main wrapper. + self.wrap = self.wrappingLabel.parent(); + // Set up the toggle button and insert it before the wrapping label. + self.toggler = $( _before ) + .insertBefore( self.wrappingLabel ) + .css( { backgroundColor: self.initialValue } ); + // Set the toggle button span element text. + self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick ); + // Set up the Iris container and insert it after the wrapping label. + self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel ); + // Store a reference to the Clear/Default button. self.button = $( _button ); + // Set up the Clear/Default button. if ( self.options.defaultColor ) { - self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString ); + self.button + .addClass( 'wp-picker-default' ) + .val( wpColorPickerL10n.defaultString ) + .attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel ); } else { - self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear ); + self.button + .addClass( 'wp-picker-clear' ) + .val( wpColorPickerL10n.clear ) + .attr( 'aria-label', wpColorPickerL10n.clearAriaLabel ); } - el.wrap( '' ).after(self.button); + // Wrap the wrapping label in its wrapper and append the Clear/Default button. + self.wrappingLabel + .wrap( '