[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-content/themes/twentytwentyone/assets/js/ -> palette-colorpicker.js (source)

   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  wp.customize.controlConstructor['twenty-twenty-one-color'] = wp.customize.Control.extend( {
  10      ready: function() {
  11          var control = this,
  12              updating = false,
  13              picker;
  14  
  15          picker = this.container.find( '.color-picker-hex' );
  16          picker.val( control.setting() ).wpColorPicker( {
  17              palettes: control.params.palette,
  18              change: function() {
  19                  updating = true;
  20                  control.setting.set( picker.wpColorPicker( 'color' ) );
  21                  updating = false;
  22              },
  23              clear: function() {
  24                  updating = true;
  25                  control.setting.set( '' );
  26                  updating = false;
  27              }
  28          } );
  29  
  30          control.setting.bind( function( value ) {
  31              // Bail if the update came from the control itself.
  32              if ( updating ) {
  33                  return;
  34              }
  35              picker.val( value );
  36              picker.wpColorPicker( 'color', value );
  37          } );
  38  
  39          // Collapse color picker when hitting Esc instead of collapsing the current section.
  40          control.container.on( 'keydown', function( event ) {
  41              var pickerContainer;
  42              if ( 27 !== event.which ) { // Esc.
  43                  return;
  44              }
  45              pickerContainer = control.container.find( '.wp-picker-container' );
  46              if ( pickerContainer.hasClass( 'wp-picker-active' ) ) {
  47                  picker.wpColorPicker( 'close' );
  48                  control.container.find( '.wp-color-result' ).focus();
  49                  event.stopPropagation(); // Prevent section from being collapsed.
  50              }
  51          } );
  52      }
  53  } );


Generated : Wed Nov 25 08:20:02 2020 Cross-referenced by PHPXref