[Summary view] [Print] [Text view]

   1  /**
   2   * Script for our custom colorpicker control.
   3   *
   4   * This is copied from wp-admin/js/customize-controls.js
   5   * with a few tweaks:
   6   *         Removed the hue picker script because we don't use it here
   7   *         Added the "palettes" argument in wpColorPicker().
   8   *
   9   * @since Twenty Twenty-One 1.0
  10   */
  11  wp.customize.controlConstructor['twenty-twenty-one-color'] = wp.customize.Control.extend( {
  12      ready: function() {
  13          var control = this,
  14              updating = false,
  15              picker;
  16  
  17          picker = this.container.find( '.color-picker-hex' );
  18          picker.val( control.setting() ).wpColorPicker( {
  19              palettes: control.params.palette,
  20              change: function() {
  21                  updating = true;
  22                  control.setting.set( picker.wpColorPicker( 'color' ) );
  23                  updating = false;
  24              },
  25              clear: function() {
  26                  updating = true;
  27                  control.setting.set( '' );
  28                  updating = false;
  29              }
  30          } );
  31  
  32          control.setting.bind( function( value ) {
  33              // Bail if the update came from the control itself.
  34              if ( updating ) {
  35                  return;
  36              }
  37              picker.val( value );
  38              picker.wpColorPicker( 'color', value );
  39          } );
  40  
  41          // Collapse color picker when hitting Esc instead of collapsing the current section.
  42          control.container.on( 'keydown', function( event ) {
  43              var pickerContainer;
  44              if ( 27 !== event.which ) { // Esc.
  45                  return;
  46              }
  47              pickerContainer = control.container.find( '.wp-picker-container' );
  48              if ( pickerContainer.hasClass( 'wp-picker-active' ) ) {
  49                  picker.wpColorPicker( 'close' );
  50                  control.container.find( '.wp-color-result' ).focus();
  51                  event.stopPropagation(); // Prevent section from being collapsed.
  52              }
  53          } );
  54      }
  55  } );