palette-colorpicker.js (1593B)
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 } );