Changeset 38931 for trunk/src/wp-includes/customize/class-wp-customize-color-control.php

Timestamp:

10/25/2016 10:32:55 PM (8 years ago)

Author:

westonruter

Message:

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.

File:

• trunk/src/wp-includes/customize/class-wp-customize-color-control.php (modified) (4 diffs)

trunk/src/wp-includes/customize/class-wp-customize-color-control.php

@@ -27 +27 @@
      */
     public $statuses;
+
+    /**
+    * @access public
+    * @var string
+    */
+    public $mode = 'full';
 
     /**
@@ -63 +69 @@
         $this->json['statuses'] = $this->statuses;
         $this->json['defaultValue'] = $this->setting->default;
+        $this->json['mode'] = $this->mode;
     }
 
@@ -79 +86 @@
     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;
@@ -96 +105 @@
             <# } #>
             <div class="customize-control-content">
-                <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
+                <# 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>