WordPress.org

Forums

[resolved] [closed] WP Color Picker change event (14 posts)

  1. Rena Kamariotakis
    Member
    Posted 1 year 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. Rena Kamariotakis
    Member
    Posted 1 year 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. Rena Kamariotakis
    Member
    Posted 1 year 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. Rena Kamariotakis
    Member
    Posted 1 year ago #

    Perfect, thanks Dominik

  8. iLen
    Member
    Posted 7 months ago #

    Hi, I have the same problem add a new field in all widget but in the event you add it to a sidebar do not load me the script, specifically a "WpColorPicker' but I do not load, I only load when save but when dragging no longer works for me.

    http://i.imgur.com/fv3xTcD.png

  9. iLen are you on WP Beta?

  10. iLen
    Member
    Posted 7 months ago #

    Hi, I'm testing with WP 3.8.2

  11. Okay, then this is not the forum for you :)

    First, upgrade to WP 3.9.2

    Then if you're still having the problem, post here: https://wordpress.org/support/forum/how-to-and-troubleshooting

    This forum is only for people doing Beta/Alpha testing, which today is 4.0

  12. iLen
    Member
    Posted 7 months ago #

    Sorry, my version is 3.9.2
    And if I already realized that this forum is for the Beta. Please add the event when drag a widget load the script. This would serve to make more powerful widget with many options. please..... :)

  13. iLen
    Member
    Posted 7 months ago #

    Hi I put the code

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

    I works well but I believe a double colorpicker and using the events widget-updated widget-added.

    Drag when running the widget-added
    and just what you add is saved by running the widget-updated event

    This makes me think twice colorpicker, I leave the screenshot http://i.imgur.com/QMUBp9e.png

  14. Please don't post in the Alpha/Beta forum unless you're actually testing the alpha/beta version of WordPress (not a plugin or a theme). Also, once WordPress has released a version, it's not appropriate to post in alpha/beta and you should post in the How To & Troublshooting forum:

    https://wordpress.org/support/forum/how-to-and-troubleshooting

Topic Closed

This topic has been closed to new replies.

About this Topic