WordPress.org

Make WordPress Core

Ticket #25809: date-time.php

File date-time.php, 8.7 KB (added by BookWookie, 6 years ago)

Main Plugin File

Line 
1<?php
2/**
3 * Plugin Name: Date and Time Widget
4 * Description: A widget that displays the local date and/or time.
5 * Version: 1.0
6 * Author: Donna Peplinskie
7 * Author URI: http://bookwookie.ca
8 * License: GPL v3
9 *
10 * Date and Time Widget
11 * Copyright (C) 2013, Donna Peplinskie - donnapep@gmail.com
12 *
13 * This program is free software: you can redistribute it and/or modify
14 * it under the terms of the GNU General Public License as published by
15 * the Free Software Foundation, either version 3 of the License, or
16 * (at your option) any later version.
17 *
18 * This program is distributed in the hope that it will be useful,
19 * but WITHOUT ANY WARRANTY; without even the implied warranty of
20 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
21 * GNU General Public License for more details.
22 *
23 * You should have received a copy of the GNU General Public License
24 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
25 */
26
27function register() {
28    register_widget( 'DateTimeWidget' );
29}
30add_action( 'widgets_init', 'register' );
31
32function load_color_picker_style() {
33    wp_enqueue_style('wp-color-picker');
34}
35function load_color_picker_script() {
36    wp_enqueue_script('wp-color-picker');
37}
38add_action('admin_print_scripts-widgets.php', 'load_color_picker_script');
39add_action('admin_print_styles-widgets.php', 'load_color_picker_style');
40
41class DateTimeWidget extends WP_Widget {
42    function __construct() {
43        parent::__construct(
44            'date_time', // Base ID
45            __('Date and Time', 'date-time'), // Name
46            array( 'description' => __( 'Show the local date and time.', 'date-time' ), ) // Args
47        ); 
48       
49        wp_register_style( 'date-time-style', plugins_url( 'css/style.css', __FILE__ ) );
50        wp_enqueue_style( 'date-time-style' );
51        wp_enqueue_script( 'date-time', plugins_url( '/js/date-time.js', __FILE__ ) );
52    } 
53   
54    /* Show the widget. */
55    function widget( $args, $instance ) {
56        extract( $args );
57
58        //Widget settings
59        $time_format = $instance[ 'time_format' ];
60        $date_format = $instance[ 'date_format' ];
61        $font_family = $instance[ 'font_family' ];
62        $font_size = $instance[ 'font_size' ];
63        $text_color = $instance [ 'text_color' ];
64        $background_color = $instance [ 'background_color' ];
65
66        echo $before_widget;
67        ?>
68       
69        <div class="date-time" style="color: <?php echo $text_color ?>; background-color: <?php echo $background_color ?>; font-family: <?php echo $font_family ?>; font-size: <?php echo $font_size ?>;">
70            <div class="time"></div>
71            <div class="date"></div>
72        </div>
73        <script type="text/javascript">
74            update('<?php echo $time_format; ?>', '<?php echo $date_format; ?>');
75        </script>
76
77        <?php
78        echo $after_widget;
79    }
80   
81    /* Show the widget's settings. */
82    function form( $instance ) { ?>
83        <?php //Set up some default widget settings.
84        $defaults = array(
85        'time_format' => '12-hour-seconds',
86        'date_format' => 'long',
87        'font_family' => 'Arial, Arial, Helvetica, sans-serif',
88        'font_size' => '20px',
89        'text_color' => '#000',
90        'background_color' => 'transparent'
91        );
92        $time_formats = array(
93        "none" => "None",
94        "12-hour" => date("g:i A", current_time( 'timestamp', 0 ) ),
95        "12-hour-seconds" => date("g:i:s A", current_time( 'timestamp', 0 ) ),
96        "24-hour" => date("G:i", current_time( 'timestamp', 0 ) ),
97        "24-hour-seconds" => date("G:i:s", current_time( 'timestamp', 0 ) ),
98        );
99        $date_formats = array(
100        "none" => "None",
101        "short" => date( "n/j/Y", current_time( 'timestamp', 0 ) ),
102        "european" => date( "j/n/Y", current_time( 'timestamp', 0 ) ),
103        "medium" => date( "M j Y", current_time( 'timestamp', 0 ) ),
104        "long" => date( "F j, Y", current_time( 'timestamp', 0 ) ),
105        );
106        $font_families = array(
107        "Arial, Arial, Helvetica, sans-serif" => "Arial",
108        "Comic Sans MS, Comic Sans MS, cursive" => "Comic Sans MS",
109        "Courier New, Courier New, Courier, monospace" => "Courier New",
110        "Georgia, Georgia, serif" => "Georgia",
111        "Lucida Sans Unicode, Lucida Grande, sans-serif" => "Lucida Sans Unicode",
112        "Tahoma, Geneva, sans-serif" => "Tahoma",
113        "Times New Roman, Times, serif" => "Times New Roman",
114        "Trebuchet MS, Helvetica, sans-serif" => "Trebuchet MS",
115        "Verdana, Verdana, Geneva, sans-serif" => "Verdana",
116        );
117        $font_sizes = array(
118        "8px" => "8",
119        "9px" => "9",
120        "10px" => "10",
121        "11px" => "11",
122        "12px" => "12",
123        "14px" => "14",
124        "16px" => "16",
125        "18px" => "18",
126        "20px" => "20",
127        "22px" => "22",
128        "24px" => "24",
129        "26px" => "26",
130        "28px" => "28",
131        "36px" => "36",
132        "48px" => "48",
133        "72px" => "72",
134        );
135        $instance = wp_parse_args( (array) $instance, $defaults ); ?>
136       
137        <script>
138            jQuery(document).ready(function($) {
139                //Doesn't work. Duplicate color pickers are shown.
140                $(document).ajaxComplete(function() {
141                    $('.color-picker').wpColorPicker();
142                });
143            });
144           
145        //This doesn't work either. It shows two color pickers, neither of which actually work.
146        //    jQuery(document).ready(function($) {
147        //      //This will execute after a widget is dropped onto the sidebar.
148        //      jQuery("#widgets-right .widgets-sortables").on("sortstop", function(event, ui) {
149        //          // ui.item contains the dropped item.
150        //          // note that the dropped item could just as easily be a reordering rather
151        //          // than a new widget. Plan your logic accordingly.
152        //          jQuery(".color-picker").wpColorPicker();
153        //      });
154        //    });
155        </script>
156       
157        <p>
158            <label for="<?php echo $this->get_field_id( 'time_format' ); ?>"><?php _e( 'Time Format:', 'date-time' ); ?></label>
159            <select id="<?php echo $this->get_field_id( 'time_format' ); ?>" name="<?php echo $this->get_field_name( 'time_format' ); ?>" class="widefat">
160           
161            <?php foreach( $time_formats as $key => $value ) {
162                $selected = ( $instance[ 'time_format' ] == $key ) ? 'selected="selected"' : '';
163                echo '<option value="' . $key . '" ' . $selected . '>' . $value . '</option>';
164            } ?>
165            </select>
166        </p>
167        <p>
168            <label for="<?php echo $this->get_field_id( 'date_format' ); ?>"><?php _e( 'Date Format:', 'date-time' ); ?></label>
169            <select id="<?php echo $this->get_field_id( 'date_format' ); ?>" name="<?php echo $this->get_field_name( 'date_format' ); ?>" class="widefat">
170           
171            <?php foreach( $date_formats as $key => $value ) {
172                $selected = ( $instance[ 'date_format' ] == $key ) ? 'selected="selected"' : '';
173                echo '<option value="' . $key . '" ' . $selected . '>' . $value . '</option>';
174            } ?>
175            </select>
176        </p>
177        <p>
178            <label for="<?php echo $this->get_field_id( 'font_family' ); ?>"><?php _e( 'Font Family:', 'date-time' ); ?></label>
179            <select id="<?php echo $this->get_field_id( 'font_family' ); ?>" name="<?php echo $this->get_field_name( 'font_family' ); ?>" class="widefat">
180           
181            <?php foreach( $font_families as $key => $value ) {
182                $selected = ( $instance[ 'font_family' ] == $key ) ? 'selected="selected"' : '';
183                echo '<option value="' . $key . '" ' . $selected . '>' . $value . '</option>';
184            } ?>
185            </select>
186        </p>
187        <p>
188            <label for="<?php echo $this->get_field_id( 'font_size' ); ?>"><?php _e( 'Font Size:', 'date-time' ); ?></label>
189            <select id="<?php echo $this->get_field_id( 'font_size' ); ?>" name="<?php echo $this->get_field_name( 'font_size' ); ?>">
190           
191            <?php foreach( $font_sizes as $key => $value ) {
192                $selected = ( $instance[ 'font_size' ] == $key ) ? 'selected="selected"' : '';
193                echo '<option value="' . $key . '" ' . $selected . '>' . $value . '</option>';
194            } ?>
195            </select>
196        </p>
197        <p>
198            <label for="<?php echo $this->get_field_id( 'text_color' ); ?>"><?php _e( 'Text Color', 'date-time' ) ?>:</label>
199            <input id="<?php echo $this->get_field_id( 'text_color' ); ?>"  name="<?php echo $this->get_field_name( 'text_color' ); ?>" type="text" value="<?php echo esc_attr( $instance[ 'text_color' ] ); ?>" class="color-picker" />
200        </p>
201        <p>
202            <label for="<?php echo $this->get_field_id( 'background_color' ); ?>"><?php _e( 'Background Color', 'date-time' ) ?>:</label>
203            <input id="<?php echo $this->get_field_id( 'background_color' ); ?>"  name="<?php echo $this->get_field_name( 'background_color' ); ?>" type="text" value="<?php echo esc_attr( $instance[ 'background_color' ] ); ?>" class="color-picker" />
204        </p>
205    <?php
206    }
207   
208    //Save the widget's settings.
209    function update( $new_instance, $old_instance ) {
210        $instance = $old_instance;
211
212        $instance[ 'time_format' ] = $new_instance[ 'time_format' ];
213        $instance[ 'date_format' ] = $new_instance[ 'date_format' ];
214        $instance[ 'font_family' ] = $new_instance[ 'font_family' ];
215        $instance[ 'font_size' ] = $new_instance[ 'font_size' ];
216        $instance[ 'text_color' ] = $new_instance[ 'text_color' ];
217        $instance[ 'background_color' ] = $new_instance[ 'background_color' ];
218
219        return $instance;
220    }
221}
222?>