WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] WP Color Picker change event (7 posts)

  1. renak
    Member
    Posted 3 months ago #

    I'm using the color picker for a widget setting. In the customizer, changing the color value via the color picker doesn't trigger the preview frame to refresh.

  2. Which plugin/theme makes use of this?

    The header color picker works on Twenty Thirteen, so it's possible this is a bug with that specific utility.

  3. renak
    Member
    Posted 3 months ago #

    The color picker used as a theme setting seems to be ok. The issue is when it's used as a widget setting. I've put together a quick plugin to illustrate the issue. Try running this widget in the customizer:

    <?php
    /*
    Plugin Name: ColorTest
    Description: color picker test for WP 3.9
    */
    
    class ColorTest extends WP_Widget {
    
    	function __construct() {
    		parent::__construct('color-test', 'Color Test', array());
    	}
    
    	public function widget($args, $instance) {
    
    		extract($args);
    		$instance = wp_parse_args($instance, array('color'=>'#000000', 'text'=>'Lorem ipsum'));
    
    		echo $before_widget;
    		echo $before_title . 'Color Test' . $after_title;
    		echo '<p style="color: ' . $instance['color'] . '; font-weight: bold;">' . $instance['text'] . '</p>';
    		echo $after_widget;
    
    	}
    
    	public function update($new_instance, $old_instance) {
    
    		$instance = array();
    		$instance['color'] = $new_instance['color'];
    		$instance['text'] = $new_instance['text'];
    		return $instance;
    
    	}
    
    	public function form($instance) {
    
    		$instance = wp_parse_args($instance, array('color'=>'#000000', 'text'=>'Lorem ipsum'));
    
    		wp_enqueue_script('wp-color-picker');
    		wp_enqueue_style('wp-color-picker');
    		?>
    		<p>
    		<label>Text Color</label>
    		<input type="text" class="color-field" id="<?php echo $this->get_field_id('color'); ?>" name="<?php echo $this->get_field_name('color'); ?>" value="<?php echo esc_attr($instance['color']); ?>" />
    		</p>
    		<p>
    		<label>Text Content</label>
    		<input type="text" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>" value="<?php echo esc_attr($instance['text']); ?>" />
    		</p>
    		<script type="text/javascript">
    
    		jQuery(document).ready(function($) {
    			$('.control-section .color-field').wpColorPicker();
    			$(document).on('widget-updated widget-synced widget-added', function() {
    				$('.control-section .color-field').each(function() {
    					if (!$(this).data('wpWpColorPicker')) $(this).wpColorPicker();
    				});
    			});
    		});
    
    		</script>
    		<?php
    
    	}
    
    }
    
    add_action('widgets_init', function() { register_widget('ColorTest'); });
  4. I don't think it's the color picker itself. The color changes AND saves only if I also edit the Text Content.

  5. renak
    Member
    Posted 3 months ago #

    Right, editing the text input field causes a preview refresh, but the color picker by itself does not trigger a javascript change event when the color is changed. I'm hoping the WP Core team can implement a fix for this before releasing 3.9

  6. Hello renak,

    the issue is, that the colorpicker doesn't trigger the change event. You have to do this by yourself.

    jQuery(document).ready(function( $ ) {
    	$(document).on( 'ready widget-updated widget-added', function() {
    		$('.control-section .color-field').each( function() {
    			if ( ! $(this).data('wpWpColorPicker') ) {
    				$(this).wpColorPicker( {
    					change: _.throttle(function() {
    						$(this).trigger( 'change' );
    					}, 3000)
    				});
    			}
    		});
    	});
    });

    You should use _.throttle [?] here, because every control change will fire an event immediately which ends in a previewer refresh. I used 3000 here, means the previewer will only refresh once in 3 seconds.

  7. renak
    Member
    Posted 3 months ago #

    Perfect, thanks Dominik

Reply

You must log in to post.

About this Topic