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 | |
---|
10 | class 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 | |
---|
172 | add_action( 'widgets_init', function() { |
---|
173 | register_widget( 'Color_Picker_Widget_25809' ); |
---|
174 | } ); |
---|