-
-
Save rodica-andronache/54f3ea95bcaf76435e55 to your computer and use it in GitHub Desktop.
class Color_Picker_Widget_25809 extends WP_Widget { | |
/** | |
* Widget constructor. | |
* | |
* @since 1.0 | |
* | |
* @access public | |
*/ | |
public function __construct() { | |
parent::__construct( | |
'color-picker', | |
_x( 'Color Picker', 'widget title', 'color-picker-widget' ), | |
array( | |
'classname' => 'color-picker-widget', | |
'description' => _x( 'Widget with a color picker', 'widget description', 'color-picker-widget' ) | |
) | |
); | |
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); | |
add_action( 'admin_footer-widgets.php', array( $this, 'print_scripts' ), 9999 ); | |
} | |
/** | |
* Enqueue scripts. | |
* | |
* @since 1.0 | |
* | |
* @param string $hook_suffix | |
*/ | |
public function enqueue_scripts( $hook_suffix ) { | |
if ( 'widgets.php' !== $hook_suffix ) { | |
return; | |
} | |
wp_enqueue_style( 'wp-color-picker' ); | |
wp_enqueue_script( 'wp-color-picker' ); | |
wp_enqueue_script( 'underscore' ); | |
} | |
/** | |
* Print scripts. | |
* | |
* @since 1.0 | |
*/ | |
public function print_scripts() { | |
?> | |
<script> | |
( function( $ ){ | |
function initColorPicker( widget ) { | |
widget.find( '.color-picker' ).wpColorPicker( { | |
change: _.throttle( function() { // For Customizer | |
$(this).trigger( 'change' ); | |
}, 3000 ) | |
}); | |
} | |
function onFormUpdate( event, widget ) { | |
initColorPicker( widget ); | |
} | |
$( document ).on( 'widget-added widget-updated', onFormUpdate ); | |
$( document ).ready( function() { | |
$( '#widgets-right .widget:has(.color-picker)' ).each( function () { | |
initColorPicker( $( this ) ); | |
} ); | |
} ); | |
}( jQuery ) ); | |
</script> | |
<?php | |
} | |
/** | |
* Widget output. | |
* | |
* @since 1.0 | |
* | |
* @access public | |
* @param array $args | |
* @param array $instance | |
*/ | |
public function widget( $args, $instance ) { | |
extract( $args ); | |
// Title | |
$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : _x( 'Color Picker', 'widget title', 'color-picker-widget' ); | |
$title = apply_filters( 'widget_title', $title, $instance, $this->id_base ); | |
// Colors | |
$color1 = ( ! empty( $instance['color1'] ) ) ? $instance['color1'] : '#fff'; | |
$color2 = ( ! empty( $instance['color2'] ) ) ? $instance['color2'] : '#f00'; | |
echo $before_widget; | |
if ( $title ) | |
echo $before_title . $title . $after_title; | |
?> | |
<div style="height: 100px; width: 100%; background-color:<?php echo $color1; ?>"></div> | |
<div style="height: 100px; width: 100%; background-color:<?php echo $color2; ?>"></div> | |
<?php | |
echo $after_widget; | |
} | |
/** | |
* Saves widget settings. | |
* | |
* @since 1.0 | |
* | |
* @access public | |
* @param array $new_instance | |
* @param array $old_instance | |
* @return array | |
*/ | |
public function update( $new_instance, $old_instance ) { | |
$instance = $old_instance; | |
$instance[ 'title' ] = strip_tags( $new_instance['title'] ); | |
$instance[ 'color1' ] = strip_tags( $new_instance['color1'] ); | |
$instance[ 'color2' ] = strip_tags( $new_instance['color2'] ); | |
return $instance; | |
} | |
/** | |
* Prints the settings form. | |
* | |
* @since 1.0 | |
* | |
* @access public | |
* @param array $instance | |
*/ | |
public function form( $instance ) { | |
// Defaults | |
$instance = wp_parse_args( | |
$instance, | |
array( | |
'title' => _x( 'Color Picker', 'widget title', 'color-picker-widget' ), | |
'color1' => '', | |
'color2' => '' | |
) | |
); | |
$title = esc_attr( $instance[ 'title' ] ); | |
$color1 = esc_attr( $instance[ 'color1' ] ); | |
$color2 = esc_attr( $instance[ 'color2' ] ); | |
?> | |
<p> | |
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> | |
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></p> | |
</p> | |
<p> | |
<label for="<?php echo $this->get_field_id( 'color1' ); ?>"><?php _e( 'Color 1:' ); ?></label><br> | |
<input type="text" name="<?php echo $this->get_field_name( 'color1' ); ?>" class="color-picker" id="<?php echo $this->get_field_id( 'color1' ); ?>" value="<?php echo $color1; ?>" data-default-color="#fff" /> | |
</p> | |
<p> | |
<label for="<?php echo $this->get_field_id( 'color2' ); ?>"><?php _e( 'Color 2:' ); ?></label><br> | |
<input type="text" name="<?php echo $this->get_field_name( 'color2' ); ?>" class="color-picker" id="<?php echo $this->get_field_id( 'color2' ); ?>" value="<?php echo $color2; ?>" data-default-color="#f00" /> | |
</p> | |
<?php | |
} | |
} | |
add_action( 'widgets_init', function() { | |
register_widget( 'Color_Picker_Widget_25809' ); | |
} ); |
function initColorPicker( widget ) {
widget.find( '.color-picker' ).wpColorPicker( {
change: _.throttle( function() { // For Customizer
$(this).trigger( 'change' );
}, 3000 ),
clear: _.throttle( function() { // For Customizer
$(this).trigger( 'change' );
}, 4000 )
});
}
check this for wordpress 4.9 may be work
^^ Confirmed. This does make the Color Picker work correctly in WP 4.9.5
I was having a problem where any Color Picker was not triggering the 'change' event when the color was changed. I needed to add this code for the 'clear' event.
Thanks for your code. The only issue was that the first click on the picker hasn't triggered the change. So instead of using _.throttle()
, I've used the following code as parameters and there is no more issue.
change: function(e, ui) {
$(e.target).val(ui.color.toString());
$(e.target).trigger('change');
},
clear: function(e, ui) {
$(e.target).trigger('change');
},
thanks for sharing code
when delete color widget not fire saving button in wordpress 4.9
if you add support for clear event will be good
thank you