Ticket #25809: color-picker-widget.php

<?php
/**
 * Plugin Name: Color Picker Widget
 * Description: A widget with a WordPress color picker.
 * Version: 1.0
 * Author: Dominik Schilling (ocean90)
 * Plugin URI: https://core.trac.wordpress.org/ticket/25809
 */

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' );
} );