Customize: Add hue-only mode to color picker.

The color control in the customizer can use the new mode by supplying the `mode` param with `hue` (as opposed to the new default `full` value). New control replaces the `range` control in Twenty Seventeen for `colorscheme_hue`. The `wpColorPicker` can opt for hue-only mode via supplying `hue` as the `type` option. Iris Color Picker is updated from v1.0.7 to v1.1.0-beta.

Props mattwiebe, celloexpressions.
Fixes #38263.


git-svn-id: https://develop.svn.wordpress.org/trunk@38931 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/color-picker.css

@@ -124,3 +124,13 @@
 	border-color: #c00;
 	color: #000;
 }
+
+.iris-picker .ui-square-handle:focus,
+.iris-picker .iris-strip .ui-slider-handle:focus {
+	-webkit-box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+}

src/wp-admin/js/color-picker.js

@@ -17,7 +17,33 @@
 			hide: true,
 			palettes: true,
 			width: 255,
-			mode: 'hsv'
+			mode: 'hsv',
+			type: 'full',
+			slider: 'horizontal'
+		},
+		_createHueOnly: function() {
+			var self = this,
+				el = self.element,
+				color;
+
+			// hide input
+			el.hide();
+			// max saturated color for hue to be obvious
+			color = 'hsl(' + el.val() + ', 100, 50)';
+
+			el.iris( {
+				mode: 'hsl',
+				type: 'hue',
+				hide: false,
+				color: color,
+				change: function( event, ui ) {
+					if ( $.isFunction( self.options.change ) ) {
+						self.options.change.call( this, event, ui );
+					}
+				},
+				width: self.options.width,
+				slider: self.options.slider
+			} );
 		},
 		_create: function() {
 			// bail early for unsupported Iris.
@@ -30,6 +56,11 @@
 
 			$.extend( self.options, el.data() );
 
+			// hue-only gets created differently
+			if ( self.options.type === 'hue' ) {
+				return self._createHueOnly();
+			}
+
 			// keep close bound so it can be attached to a body listener
 			self.close = $.proxy( self.close, self );
 
@@ -141,7 +172,6 @@
 			if ( newColor === undef ) {
 				return this.element.iris( 'option', 'color' );
 			}
-
 			this.element.iris( 'option', 'color', newColor );
 		},
 		//$("#input").wpColorPicker('defaultColor') returns the current default color

src/wp-admin/js/customize-controls.js

@@ -2835,21 +2835,43 @@
 	api.ColorControl = api.Control.extend({
 		ready: function() {
 			var control = this,
-				picker = this.container.find('.color-picker-hex');
+				isHueSlider = this.params.mode === 'hue',
+				updating = false,
+				picker;
 
-			picker.val( control.setting() ).wpColorPicker({
-				change: function() {
-					control.setting.set( picker.wpColorPicker('color') );
-				},
-				clear: function() {
-					control.setting.set( '' );
-				}
-			});
+			if ( isHueSlider ) {
+				picker = this.container.find( '.color-picker-hue' );
+				picker.val( control.setting() ).wpColorPicker({
+					change: function( event, ui ) {
+						updating = true;
+						control.setting( ui.color.h() );
+						updating = false;
+					}
+				});
+			} else {
+				picker = this.container.find( '.color-picker-hex' );
+				picker.val( control.setting() ).wpColorPicker({
+					change: function() {
+						updating = true;
+						control.setting.set( picker.wpColorPicker( 'color' ) );
+						updating = false;
+					},
+					clear: function() {
+						updating = true;
+						control.setting.set( '' );
+						updating = false;
+					}
+				});
+			}
 
 			this.setting.bind( function ( value ) {
+				// bail if the update came from the control itself
+				if ( updating ) {
+					return;
+				}
 				picker.val( value );
 				picker.wpColorPicker( 'color', value );
-			});
+			} );
 		}
 	});
 
@@ -4618,7 +4640,7 @@
 			if ( 'themes' === panel.id ) {
 				return; // Don't reflow theme sections, as doing so moves them after the themes container.
 			}
-			
+
 			var sections = panel.sections(),
 				sectionHeadContainers = _.pluck( sections, 'headContainer' );
 			rootNodes.push( panel );