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.

Built from https://develop.svn.wordpress.org/trunk@38931


git-svn-id: http://core.svn.wordpress.org/trunk@38874 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2016-10-25 22:33:30 +00:00
parent e048613585
commit 8d1cb3068a
12 changed files with 113 additions and 37 deletions

View File

@ -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);
}

View File

@ -1 +1 @@
.wp-color-picker{width:80px}.wp-picker-container .hidden{display:none}.wp-color-result{background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;cursor:pointer;height:22px;margin:0 0 6px 6px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:bottom;display:inline-block;padding-right:30px;-webkit-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc;top:0}.wp-color-result:after{background:#f7f7f7;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border-right:1px solid #ccc;color:#555;content:attr(title);display:block;font-size:11px;line-height:22px;padding:0 6px;position:relative;left:0;text-align:center;top:0}.wp-color-result:focus,.wp-color-result:hover{background:#fafafa;border-color:#999;color:#23282d}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#23282d;border-color:#a0a5aa;border-right:1px solid #999}.wp-color-result.wp-picker-open:after{content:attr(data-current)}.wp-picker-container,.wp-picker-container:active{display:inline-block;outline:0}.wp-color-result:focus{border-color:#5b9dd9;-webkit-box-shadow:0 0 3px rgba(0,115,170,.8);box-shadow:0 0 3px rgba(0,115,170,.8)}.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.wp-picker-container .button{margin-right:6px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#555}.wp-picker-container .iris-picker{-webkit-border-radius:0;border-radius:0;border-color:#ddd;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:65px;font-size:12px;font-family:monospace;line-height:16px;margin:0}.wp-color-picker::-webkit-input-placeholder{color:#72777c}.wp-color-picker::-moz-placeholder{color:#72777c;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#72777c}.wp-picker-container input[type=text].iris-error{background-color:#ffebe8;border-color:#c00;color:#000}
.wp-color-picker{width:80px}.wp-picker-container .hidden{display:none}.wp-color-result{background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;cursor:pointer;height:22px;margin:0 0 6px 6px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:bottom;display:inline-block;padding-right:30px;-webkit-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc;top:0}.wp-color-result:after{background:#f7f7f7;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border-right:1px solid #ccc;color:#555;content:attr(title);display:block;font-size:11px;line-height:22px;padding:0 6px;position:relative;left:0;text-align:center;top:0}.wp-color-result:focus,.wp-color-result:hover{background:#fafafa;border-color:#999;color:#23282d}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#23282d;border-color:#a0a5aa;border-right:1px solid #999}.wp-color-result.wp-picker-open:after{content:attr(data-current)}.wp-picker-container,.wp-picker-container:active{display:inline-block;outline:0}.wp-color-result:focus{border-color:#5b9dd9;-webkit-box-shadow:0 0 3px rgba(0,115,170,.8);box-shadow:0 0 3px rgba(0,115,170,.8)}.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.wp-picker-container .button{margin-right:6px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#555}.wp-picker-container .iris-picker{-webkit-border-radius:0;border-radius:0;border-color:#ddd;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:65px;font-size:12px;font-family:monospace;line-height:16px;margin:0}.wp-color-picker::-webkit-input-placeholder{color:#72777c}.wp-color-picker::-moz-placeholder{color:#72777c;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#72777c}.wp-picker-container input[type=text].iris-error{background-color:#ffebe8;border-color:#c00;color:#000}.iris-picker .iris-strip .ui-slider-handle:focus,.iris-picker .ui-square-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)}

View File

@ -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);
}

View File

@ -1 +1 @@
.wp-color-picker{width:80px}.wp-picker-container .hidden{display:none}.wp-color-result{background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;cursor:pointer;height:22px;margin:0 6px 6px 0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:bottom;display:inline-block;padding-left:30px;-webkit-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc;top:0}.wp-color-result:after{background:#f7f7f7;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;border-left:1px solid #ccc;color:#555;content:attr(title);display:block;font-size:11px;line-height:22px;padding:0 6px;position:relative;right:0;text-align:center;top:0}.wp-color-result:focus,.wp-color-result:hover{background:#fafafa;border-color:#999;color:#23282d}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#23282d;border-color:#a0a5aa;border-left:1px solid #999}.wp-color-result.wp-picker-open:after{content:attr(data-current)}.wp-picker-container,.wp-picker-container:active{display:inline-block;outline:0}.wp-color-result:focus{border-color:#5b9dd9;-webkit-box-shadow:0 0 3px rgba(0,115,170,.8);box-shadow:0 0 3px rgba(0,115,170,.8)}.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.wp-picker-container .button{margin-left:6px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#555}.wp-picker-container .iris-picker{-webkit-border-radius:0;border-radius:0;border-color:#ddd;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:65px;font-size:12px;font-family:monospace;line-height:16px;margin:0}.wp-color-picker::-webkit-input-placeholder{color:#72777c}.wp-color-picker::-moz-placeholder{color:#72777c;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#72777c}.wp-picker-container input[type=text].iris-error{background-color:#ffebe8;border-color:#c00;color:#000}
.wp-color-picker{width:80px}.wp-picker-container .hidden{display:none}.wp-color-result{background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;cursor:pointer;height:22px;margin:0 6px 6px 0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:bottom;display:inline-block;padding-left:30px;-webkit-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc;top:0}.wp-color-result:after{background:#f7f7f7;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;border-left:1px solid #ccc;color:#555;content:attr(title);display:block;font-size:11px;line-height:22px;padding:0 6px;position:relative;right:0;text-align:center;top:0}.wp-color-result:focus,.wp-color-result:hover{background:#fafafa;border-color:#999;color:#23282d}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#23282d;border-color:#a0a5aa;border-left:1px solid #999}.wp-color-result.wp-picker-open:after{content:attr(data-current)}.wp-picker-container,.wp-picker-container:active{display:inline-block;outline:0}.wp-color-result:focus{border-color:#5b9dd9;-webkit-box-shadow:0 0 3px rgba(0,115,170,.8);box-shadow:0 0 3px rgba(0,115,170,.8)}.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.wp-picker-container .button{margin-left:6px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#555}.wp-picker-container .iris-picker{-webkit-border-radius:0;border-radius:0;border-color:#ddd;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:65px;font-size:12px;font-family:monospace;line-height:16px;margin:0}.wp-color-picker::-webkit-input-placeholder{color:#72777c}.wp-color-picker::-moz-placeholder{color:#72777c;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#72777c}.wp-picker-container input[type=text].iris-error{background-color:#ffebe8;border-color:#c00;color:#000}.iris-picker .iris-strip .ui-slider-handle:focus,.iris-picker .ui-square-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)}

View File

@ -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

View File

@ -1 +1 @@
!function(a,b){var c,d='<a tabindex="0" class="wp-color-result" />',e='<div class="wp-picker-holder" />',f='<div class="wp-picker-container" />',g='<input type="button" class="button button-small hidden" />';c={options:{defaultColor:!1,change:!1,clear:!1,hide:!0,palettes:!0,width:255,mode:"hsv"},_create:function(){if(a.support.iris){var b=this,c=b.element;a.extend(b.options,c.data()),b.close=a.proxy(b.close,b),b.initialValue=c.val(),c.addClass("wp-color-picker").hide().wrap(f),b.wrap=c.parent(),b.toggler=a(d).insertBefore(c).css({backgroundColor:b.initialValue}).attr("title",wpColorPickerL10n.pick).attr("data-current",wpColorPickerL10n.current),b.pickerContainer=a(e).insertAfter(c),b.button=a(g),b.options.defaultColor?b.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString):b.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear),c.wrap('<span class="wp-picker-input-wrap" />').after(b.button),c.iris({target:b.pickerContainer,hide:b.options.hide,width:b.options.width,mode:b.options.mode,palettes:b.options.palettes,change:function(c,d){b.toggler.css({backgroundColor:d.color.toString()}),a.isFunction(b.options.change)&&b.options.change.call(this,c,d)}}),c.val(b.initialValue),b._addListeners(),b.options.hide||b.toggler.click()}},_addListeners:function(){var b=this;b.wrap.on("click.wpcolorpicker",function(a){a.stopPropagation()}),b.toggler.click(function(){b.toggler.hasClass("wp-picker-open")?b.close():b.open()}),b.element.change(function(c){var d=a(this),e=d.val();""!==e&&"#"!==e||(b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c))}),b.toggler.on("keyup",function(a){13!==a.keyCode&&32!==a.keyCode||(a.preventDefault(),b.toggler.trigger("click").next().focus())}),b.button.click(function(c){var d=a(this);d.hasClass("wp-picker-clear")?(b.element.val(""),b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c)):d.hasClass("wp-picker-default")&&b.element.val(b.options.defaultColor).change()})},open:function(){this.element.show().iris("toggle").focus(),this.button.removeClass("hidden"),this.wrap.addClass("wp-picker-active"),this.toggler.addClass("wp-picker-open"),a("body").trigger("click.wpcolorpicker").on("click.wpcolorpicker",this.close)},close:function(){this.element.hide().iris("toggle"),this.button.addClass("hidden"),this.wrap.removeClass("wp-picker-active"),this.toggler.removeClass("wp-picker-open"),a("body").off("click.wpcolorpicker",this.close)},color:function(a){return a===b?this.element.iris("option","color"):void this.element.iris("option","color",a)},defaultColor:function(a){return a===b?this.options.defaultColor:void(this.options.defaultColor=a)}},a.widget("wp.wpColorPicker",c)}(jQuery);
!function(a,b){var c,d='<a tabindex="0" class="wp-color-result" />',e='<div class="wp-picker-holder" />',f='<div class="wp-picker-container" />',g='<input type="button" class="button button-small hidden" />';c={options:{defaultColor:!1,change:!1,clear:!1,hide:!0,palettes:!0,width:255,mode:"hsv",type:"full",slider:"horizontal"},_createHueOnly:function(){var b,c=this,d=c.element;d.hide(),b="hsl("+d.val()+", 100, 50)",d.iris({mode:"hsl",type:"hue",hide:!1,color:b,change:function(b,d){a.isFunction(c.options.change)&&c.options.change.call(this,b,d)},width:c.options.width,slider:c.options.slider})},_create:function(){if(a.support.iris){var b=this,c=b.element;if(a.extend(b.options,c.data()),"hue"===b.options.type)return b._createHueOnly();b.close=a.proxy(b.close,b),b.initialValue=c.val(),c.addClass("wp-color-picker").hide().wrap(f),b.wrap=c.parent(),b.toggler=a(d).insertBefore(c).css({backgroundColor:b.initialValue}).attr("title",wpColorPickerL10n.pick).attr("data-current",wpColorPickerL10n.current),b.pickerContainer=a(e).insertAfter(c),b.button=a(g),b.options.defaultColor?b.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString):b.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear),c.wrap('<span class="wp-picker-input-wrap" />').after(b.button),c.iris({target:b.pickerContainer,hide:b.options.hide,width:b.options.width,mode:b.options.mode,palettes:b.options.palettes,change:function(c,d){b.toggler.css({backgroundColor:d.color.toString()}),a.isFunction(b.options.change)&&b.options.change.call(this,c,d)}}),c.val(b.initialValue),b._addListeners(),b.options.hide||b.toggler.click()}},_addListeners:function(){var b=this;b.wrap.on("click.wpcolorpicker",function(a){a.stopPropagation()}),b.toggler.click(function(){b.toggler.hasClass("wp-picker-open")?b.close():b.open()}),b.element.change(function(c){var d=a(this),e=d.val();""!==e&&"#"!==e||(b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c))}),b.toggler.on("keyup",function(a){13!==a.keyCode&&32!==a.keyCode||(a.preventDefault(),b.toggler.trigger("click").next().focus())}),b.button.click(function(c){var d=a(this);d.hasClass("wp-picker-clear")?(b.element.val(""),b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c)):d.hasClass("wp-picker-default")&&b.element.val(b.options.defaultColor).change()})},open:function(){this.element.show().iris("toggle").focus(),this.button.removeClass("hidden"),this.wrap.addClass("wp-picker-active"),this.toggler.addClass("wp-picker-open"),a("body").trigger("click.wpcolorpicker").on("click.wpcolorpicker",this.close)},close:function(){this.element.hide().iris("toggle"),this.button.addClass("hidden"),this.wrap.removeClass("wp-picker-active"),this.toggler.removeClass("wp-picker-open"),a("body").off("click.wpcolorpicker",this.close)},color:function(a){return a===b?this.element.iris("option","color"):void this.element.iris("option","color",a)},defaultColor:function(a){return a===b?this.options.defaultColor:void(this.options.defaultColor=a)}},a.widget("wp.wpColorPicker",c)}(jQuery);

View File

@ -2835,18 +2835,40 @@
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;
if ( isHueSlider ) {
picker = this.container.find( '.color-picker-hue' );
picker.val( control.setting() ).wpColorPicker({
change: function() {
control.setting.set( picker.wpColorPicker('color') );
},
clear: function() {
control.setting.set( '' );
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 );
} );

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -44,20 +44,11 @@ function twentyseventeen_customize_register( $wp_customize ) {
'priority' => 5,
) );
$wp_customize->add_control( 'colorscheme_hue', array(
'type' => 'range',
'input_attrs' => array(
'min' => 0,
'max' => 359,
'step' => 1,
),
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'colorscheme_hue', array(
'mode' => 'hue',
'section' => 'colors',
'priority' => 6,
'description' => 'Temporary hue slider will be replaced with a visual hue picker that is only shown when a custom scheme is selected', // temporary, intentionally untranslated.
// @todo change this to a visual hue picker control, ideally extending the color control and leveraging iris by adding a `hue` mode in core.
// See https://core.trac.wordpress.org/ticket/38263
// @todo only show this control when the colorscheme is custom.
) );
) ) );
/**
* Add the Theme Options section.

View File

@ -27,6 +27,12 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
*/
public $statuses;
/**
* @access public
* @var string
*/
public $mode = 'full';
/**
* Constructor.
*
@ -62,6 +68,7 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
parent::to_json();
$this->json['statuses'] = $this->statuses;
$this->json['defaultValue'] = $this->setting->default;
$this->json['mode'] = $this->mode;
}
/**
@ -78,8 +85,10 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
*/
public function content_template() {
?>
<# var defaultValue = '';
if ( data.defaultValue ) {
<# var defaultValue = '',
isHueSlider = data.mode === 'hue';
if ( data.defaultValue && ! isHueSlider ) {
if ( '#' !== data.defaultValue.substring( 0, 1 ) ) {
defaultValue = '#' + data.defaultValue;
} else {
@ -95,7 +104,11 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<div class="customize-control-content">
<# if ( isHueSlider ) { #>
<input class="color-picker-hue" type="text" data-type="hue" />
<# } else { #>
<input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
<# } #>
</div>
</label>
<?php

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.7-alpha-38930';
$wp_version = '4.7-alpha-38931';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.