WordPress.org

Make WordPress Core

Ticket #25809: color-picker-widget.php

File color-picker-widget.php, 4.6 KB (added by ocean90, 5 years ago)

Demo plugin

Line 
1<?php
2/**
3 * Plugin Name: Color Picker Widget
4 * Description: A widget with a WordPress color picker.
5 * Version: 1.0
6 * Author: Dominik Schilling (ocean90)
7 * Plugin URI: https://core.trac.wordpress.org/ticket/25809
8 */
9
10class Color_Picker_Widget_25809 extends WP_Widget {
11
12        /**
13         * Widget constructor.
14         *
15         * @since  1.0
16         *
17         * @access public
18         */
19        public function __construct() {
20                parent::__construct(
21                        'color-picker',
22                        _x( 'Color Picker', 'widget title', 'color-picker-widget' ),
23                        array(
24                                'classname'   => 'color-picker-widget',
25                                'description' => _x( 'Widget with a color picker', 'widget description', 'color-picker-widget' )
26                        )
27                );
28
29                add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
30                add_action( 'admin_footer-widgets.php', array( $this, 'print_scripts' ), 9999 );
31        }
32
33        /**
34         * Enqueue scripts.
35         *
36         * @since 1.0
37         *
38         * @param string $hook_suffix
39         */
40        public function enqueue_scripts( $hook_suffix ) {
41                if ( 'widgets.php' !== $hook_suffix ) {
42                        return;
43                }
44
45                wp_enqueue_style( 'wp-color-picker' );
46                wp_enqueue_script( 'wp-color-picker' );
47                wp_enqueue_script( 'underscore' );
48        }
49
50        /**
51         * Print scripts.
52         *
53         * @since 1.0
54         */
55        public function print_scripts() {
56                ?>
57                <script>
58                        ( function( $ ){
59                                function initColorPicker( widget ) {
60                                        widget.find( '.color-picker' ).wpColorPicker( {
61                                                change: _.throttle( function() { // For Customizer
62                                                        $(this).trigger( 'change' );
63                                                }, 3000 )
64                                        });
65                                }
66
67                                function onFormUpdate( event, widget ) {
68                                        initColorPicker( widget );
69                                }
70
71                                $( document ).on( 'widget-added widget-updated', onFormUpdate );
72
73                                $( document ).ready( function() {
74                                        $( '#widgets-right .widget:has(.color-picker)' ).each( function () {
75                                                initColorPicker( $( this ) );
76                                        } );
77                                } );
78                        }( jQuery ) );
79                </script>
80                <?php
81        }
82
83        /**
84         * Widget output.
85         *
86         * @since  1.0
87         *
88         * @access public
89         * @param  array $args
90         * @param  array $instance
91         */
92        public function widget( $args, $instance ) {
93                extract( $args );
94
95                // Title
96                $title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : _x( 'Color Picker', 'widget title', 'color-picker-widget' );
97                $title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
98
99                // Colors
100                $color1 = ( ! empty( $instance['color1'] ) ) ? $instance['color1'] : '#fff';
101                $color2 = ( ! empty( $instance['color2'] ) ) ? $instance['color2'] : '#f00';
102
103                echo $before_widget;
104                if ( $title )
105                        echo $before_title . $title . $after_title;
106                ?>
107                        <div style="height: 100px; width: 100%; background-color:<?php echo $color1; ?>"></div>
108                        <div style="height: 100px; width: 100%; background-color:<?php echo $color2; ?>"></div>
109                <?php
110                echo $after_widget;
111        }
112
113        /**
114         * Saves widget settings.
115         *
116         * @since  1.0
117         *
118         * @access public
119         * @param  array $new_instance
120         * @param  array $old_instance
121         * @return array
122         */
123        public function update( $new_instance, $old_instance ) {
124                $instance = $old_instance;
125
126                $instance[ 'title' ]  = strip_tags( $new_instance['title'] );
127                $instance[ 'color1' ] = strip_tags( $new_instance['color1'] );
128                $instance[ 'color2' ] = strip_tags( $new_instance['color2'] );
129
130                return $instance;
131        }
132
133        /**
134         * Prints the settings form.
135         *
136         * @since  1.0
137         *
138         * @access public
139         * @param  array $instance
140         */
141        public function form( $instance ) {
142                // Defaults
143                $instance = wp_parse_args(
144                        $instance,
145                        array(
146                                'title' => _x( 'Color Picker', 'widget title', 'color-picker-widget' ),
147                                'color1' => '',
148                                'color2' => ''
149                        )
150                );
151
152                $title = esc_attr( $instance[ 'title' ] );
153                $color1 = esc_attr( $instance[ 'color1' ] );
154                $color2 = esc_attr( $instance[ 'color2' ] );
155                ?>
156                <p>
157                        <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
158                        <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>
159                </p>
160                <p>
161                        <label for="<?php echo $this->get_field_id( 'color1' ); ?>"><?php _e( 'Color 1:' ); ?></label><br>
162                        <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" />
163                </p>
164                <p>
165                        <label for="<?php echo $this->get_field_id( 'color2' ); ?>"><?php _e( 'Color 2:' ); ?></label><br>
166                        <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" />
167                </p>
168                <?php
169        }
170}
171
172add_action( 'widgets_init', function() {
173        register_widget( 'Color_Picker_Widget_25809' );
174} );