Completed
Push — fix/7357 ( 13a0c4...764bff )
by
unknown
11:52
created

Milestone_Widget   C

Complexity

Total Complexity 60

Size/Duplication

Total Lines 660
Duplicated Lines 20.61 %

Coupling/Cohesion

Components 2
Dependencies 1

Importance

Changes 0
Metric Value
dl 136
loc 660
rs 5.5056
c 0
b 0
f 0
wmc 60
lcom 2
cbo 1

14 Methods

Rating   Name   Duplication   Size   Complexity  
B __construct() 0 24 4
A enqueue_admin() 0 15 2
A enqueue_template() 0 12 1
A styles_template() 0 53 1
A sanitize_color_hex() 0 16 4
A localize_script() 0 8 2
B widget() 0 33 2
D get_widget_data() 136 183 17
C get_unit() 0 55 12
B get_interval_in_units() 0 18 7
A update() 0 3 1
A sanitize_range() 0 9 3
B sanitize_instance() 0 38 1
B form() 0 103 3

How to fix   Duplicated Code    Complexity   

Duplicated Code

Duplicate code is one of the most pungent code smells. A rule that is often used is to re-structure code once it is duplicated in three or more places.

Common duplication problems, and corresponding solutions are:

Complex Class

 Tip:   Before tackling complexity, make sure that you eliminate any duplication first. This often can reduce the size of classes significantly.

Complex classes like Milestone_Widget often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes. You can also have a look at the cohesion graph to spot any un-connected, or weakly-connected components.

Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.

While breaking up the class, it is a good idea to analyze how other classes use Milestone_Widget, and based on these observations, apply Extract Interface, too.

1
<?php
2
/*
3
Plugin Name: Milestone
4
Description: Countdown to a specific date.
5
Version: 1.0
6
Author: Automattic Inc.
7
Author URI: http://automattic.com/
8
License: GPLv2 or later
9
*/
10
11
function jetpack_register_widget_milestone() {
12
	register_widget( 'Milestone_Widget' );
13
}
14
add_action( 'widgets_init', 'jetpack_register_widget_milestone' );
15
16
class Milestone_Widget extends WP_Widget {
17
	private static $dir       = null;
18
	private static $url       = null;
19
	private static $defaults  = null;
0 ignored issues
show
Unused Code introduced by
The property $defaults is not used and could be removed.

This check marks private properties in classes that are never used. Those properties can be removed.

Loading history...
20
	private static $config_js = null;
21
22
	/**
23
	 * Available time units sorted in descending order.
24
	 * @var Array
25
	 */
26
	protected $available_units = array(
27
		'years',
28
		'months',
29
		'days',
30
		'hours',
31
		'minutes',
32
		'seconds'
33
	);
34
35
	function __construct() {
36
		$widget = array(
37
			'classname'   => 'milestone-widget',
38
			'description' => __( 'Display a countdown to a certain date.', 'jetpack' ),
39
		);
40
41
		parent::__construct(
42
			'Milestone_Widget',
43
			/** This filter is documented in modules/widgets/facebook-likebox.php */
44
			apply_filters( 'jetpack_widget_name', __( 'Milestone', 'jetpack' ) ),
45
			$widget
46
		);
47
48
		self::$dir = trailingslashit( dirname( __FILE__ ) );
49
		self::$url = plugin_dir_url( __FILE__ );
50
51
		add_action( 'wp_enqueue_scripts', array( __class__, 'enqueue_template' ) );
52
		add_action( 'admin_enqueue_scripts', array( __class__, 'enqueue_admin' ) );
53
		add_action( 'wp_footer', array( $this, 'localize_script' ) );
54
55
		if ( is_active_widget( false, false, $this->id_base, true ) || is_active_widget( false, false, 'monster', true ) || is_customize_preview() ) {
56
			add_action( 'wp_head', array( __class__, 'styles_template' ) );
57
		}
58
	}
59
60
	public static function enqueue_admin( $hook_suffix ) {
61
		if ( 'widgets.php' == $hook_suffix ) {
62
			wp_enqueue_style( 'milestone-admin', self::$url . 'style-admin.css', array(), '20161215' );
63
			wp_enqueue_script(
64
				'milestone-admin-js',
65
				Jetpack::get_file_url_for_environment(
66
					'_inc/build/widgets/milestone/admin.min.js',
67
					'modules/widgets/milestone/admin.js'
68
				),
69
				array( 'jquery' ),
70
				'20170915',
71
				true
72
			);
73
		}
74
	}
75
76
	public static function enqueue_template() {
77
		wp_enqueue_script(
78
			'milestone',
79
			Jetpack::get_file_url_for_environment(
80
				'_inc/build/widgets/milestone/milestone.min.js',
81
				'modules/widgets/milestone/milestone.js'
82
			),
83
			array( 'jquery' ),
84
			'20160520',
85
			true
86
		);
87
	}
88
89
	public static function styles_template() {
90
		global $themecolors;
91
		$colors = wp_parse_args( $themecolors, array(
92
			'bg'     => 'ffffff',
93
			'border' => 'cccccc',
94
			'text'   => '333333',
95
		) );
96
?>
97
<style>
98
.milestone-widget {
99
	margin-bottom: 1em;
100
}
101
.milestone-content {
102
	line-height: 2;
103
	margin-top: 5px;
104
	max-width: 100%;
105
	padding: 0;
106
	text-align: center;
107
}
108
.milestone-header {
109
	background-color: <?php echo self::sanitize_color_hex( $colors['text'] ); ?>;
110
	color: <?php echo self::sanitize_color_hex( $colors['bg'] ); ?>;
111
	line-height: 1.3;
112
	margin: 0;
113
	padding: .8em;
114
}
115
.milestone-header .event,
116
.milestone-header .date {
117
	display: block;
118
}
119
.milestone-header .event {
120
	font-size: 120%;
121
}
122
.milestone-countdown .difference {
123
	display: block;
124
	font-size: 500%;
125
	font-weight: bold;
126
	line-height: 1.2;
127
}
128
.milestone-countdown,
129
.milestone-message {
130
	background-color: <?php echo self::sanitize_color_hex( $colors['bg'] ); ?>;
131
	border: 1px solid <?php echo self::sanitize_color_hex( $colors['border'] ); ?>;
132
	border-top: 0;
133
	color: <?php echo self::sanitize_color_hex( $colors['text'] ); ?>;
134
	padding-bottom: 1em;
135
}
136
.milestone-message {
137
	padding-top: 1em
138
}
139
</style>
140
<?php
141
	}
142
143
	/**
144
	 * Ensure that a string representing a color in hexadecimal
145
	 * notation is safe for use in css and database saves.
146
	 *
147
	 * @param string Color in hexadecimal notation. "#" may or may not be prepended to the string.
148
	 * @return string Color in hexadecimal notation on success - the string "transparent" otherwise.
149
	 */
150
	public static function sanitize_color_hex( $hex, $prefix = '#' ) {
151
		$hex = trim( $hex );
152
153
		/* Strip recognized prefixes. */
154
		if ( 0 === strpos( $hex, '#' ) ) {
155
			$hex = substr( $hex, 1 );
156
		} elseif ( 0 === strpos( $hex, '%23' ) ) {
157
			$hex = substr( $hex, 3 );
158
		}
159
160
		if ( 0 !== preg_match( '/^[0-9a-fA-F]{6}$/', $hex ) ) {
161
			return $prefix . $hex;
162
		}
163
164
		return 'transparent';
165
	}
166
167
	/**
168
	 * Localize Front-end Script.
169
	 *
170
	 * Print the javascript configuration array only if the
171
	 * current template has an instance of the widget that
172
	 * is still counting down. In all other cases, this
173
	 * function will dequeue milestone.js.
174
	 *
175
	 * Hooks into the "wp_footer" action.
176
	 */
177
	function localize_script() {
178
		if ( empty( self::$config_js['instances'] ) ) {
179
			wp_dequeue_script( 'milestone' );
180
			return;
181
		}
182
		self::$config_js['api_root'] = esc_url_raw( rest_url() );
183
		wp_localize_script( 'milestone', 'MilestoneConfig', self::$config_js );
184
	}
185
186
	/**
187
	 * Widget
188
	 */
189
	function widget( $args, $instance ) {
190
		echo $args['before_widget'];
191
192
		/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
193
		$title = apply_filters( 'widget_title', $instance['title'] );
194
		if ( ! empty( $title ) ) {
195
			echo $args['before_title'] . $title . $args['after_title'];
196
		}
197
198
		$data = $this->get_widget_data( $instance );
199
200
		self::$config_js['instances'][] = array(
201
			'id'      => $args['widget_id'],
202
			'message' => $data['message'],
203
			'refresh' => $data['refresh']
204
		);
205
206
		echo '<div class="milestone-content">';
207
208
		echo '<div class="milestone-header">';
209
		echo '<strong class="event">' . esc_html( $instance['event'] ) . '</strong>';
210
		echo '<span class="date">' . esc_html( date_i18n( get_option( 'date_format' ), $data['milestone'] ) ) . '</span>';
211
		echo '</div>';
212
213
		echo $data['message'];
214
215
		echo '</div><!--milestone-content-->';
216
217
		echo $args['after_widget'];
218
219
		/** This action is documented in modules/widgets/gravatar-profile.php */
220
		do_action( 'jetpack_stats_extra', 'widget_view', 'milestone' );
221
	}
222
223
	function get_widget_data( $instance ) {
224
		$data = array();
225
226
		$instance = $this->sanitize_instance( $instance );
227
228
		$milestone = mktime( $instance['hour'], $instance['min'], 0, $instance['month'], $instance['day'], $instance['year'] );
229
		$now  = (int) current_time( 'timestamp' );
230
		$type = $instance['type'];
231
232
		if ( 'since' === $type ) {
233
			$diff = (int) floor( $now - $milestone );
234
		} else {
235
			$diff = (int) floor( $milestone - $now );
236
		}
237
238
		$data['diff'] = $diff;
239
		$data['unit'] = $this->get_unit( $diff, $instance['unit'] );
240
241
		// Setting the refresh counter to equal the number of seconds it takes to flip a unit
242
		$refresh_intervals = array(
243
			0, // should be YEAR_IN_SECONDS, but doing setTimeout for a year doesn't seem to be logical
244
			0, // same goes for MONTH_IN_SECONDS,
245
			DAY_IN_SECONDS,
246
			HOUR_IN_SECONDS,
247
			MINUTE_IN_SECONDS,
248
			1
249
		);
250
251
		$data['refresh'] = $refresh_intervals[ array_search( $data['unit'], $this->available_units ) ];
252
		$data['milestone'] = $milestone;
253
254
		if ( ( 1 > $diff ) && ( 'until' === $type ) ) {
255
			$data['message'] = '<div class="milestone-message">' . $instance['message'] . '</div>';
256
			$data['refresh'] = 0; // No need to refresh, the milestone has been reached
257
		} else {
258
			$interval_text = $this->get_interval_in_units( $diff, $data['unit'] );
259
			$interval = intval( $interval_text );
260
261
			if ( 'since' === $type ) {
262
263 View Code Duplication
				switch ( $data['unit'] ) {
264
					case 'years':
265
						$data['message'] = sprintf(
266
							_n(
267
								'<span class="difference">%s</span> <span class="label">year ago.</span>',
268
								'<span class="difference">%s</span> <span class="label">years ago.</span>',
269
								$interval,
270
								'jetpack'
271
							),
272
							$interval_text
273
						);
274
					break;
275
					case 'months':
276
						$data['message'] = sprintf(
277
							_n(
278
								'<span class="difference">%s</span> <span class="label">month ago.</span>',
279
								'<span class="difference">%s</span> <span class="label">months ago.</span>',
280
								$interval,
281
								'jetpack'
282
							),
283
							$interval_text
284
						);
285
					break;
286
					case 'days':
287
						$data['message'] = sprintf(
288
							_n(
289
								'<span class="difference">%s</span> <span class="label">day ago.</span>',
290
								'<span class="difference">%s</span> <span class="label">days ago.</span>',
291
								$interval,
292
								'jetpack'
293
							),
294
							$interval_text
295
						);
296
					break;
297
					case 'hours':
298
						$data['message'] = sprintf(
299
							_n(
300
								'<span class="difference">%s</span> <span class="label">hour ago.</span>',
301
								'<span class="difference">%s</span> <span class="label">hours ago.</span>',
302
								$interval,
303
								'jetpack'
304
							),
305
							$interval_text
306
						);
307
					break;
308
					case 'minutes':
309
						$data['message'] = sprintf(
310
							_n(
311
								'<span class="difference">%s</span> <span class="label">minute ago.</span>',
312
								'<span class="difference">%s</span> <span class="label">minutes ago.</span>',
313
								$interval,
314
								'jetpack'
315
							),
316
							$interval_text
317
						);
318
					break;
319
					case 'seconds':
320
						$data['message'] = sprintf(
321
							_n(
322
								'<span class="difference">%s</span> <span class="label">second ago.</span>',
323
								'<span class="difference">%s</span> <span class="label">seconds ago.</span>',
324
								$interval,
325
								'jetpack'
326
							),
327
							$interval_text
328
						);
329
					break;
330
				}
331
			} else {
332 View Code Duplication
				switch ( $this->get_unit( $diff, $instance['unit'] ) ) {
333
					case 'years':
334
						$data['message'] = sprintf(
335
							_n(
336
								'<span class="difference">%s</span> <span class="label">year to go.</span>',
337
								'<span class="difference">%s</span> <span class="label">years to go.</span>',
338
								$interval,
339
								'jetpack'
340
							),
341
							$interval_text
342
						);
343
					break;
344
					case 'months':
345
						$data['message'] = sprintf(
346
							_n(
347
								'<span class="difference">%s</span> <span class="label">month to go.</span>',
348
								'<span class="difference">%s</span> <span class="label">months to go.</span>',
349
								$interval,
350
								'jetpack'
351
							),
352
							$interval_text
353
						);
354
					break;
355
					case 'days':
356
						$data['message'] = sprintf(
357
							_n(
358
								'<span class="difference">%s</span> <span class="label">day to go.</span>',
359
								'<span class="difference">%s</span> <span class="label">days to go.</span>',
360
								$interval,
361
								'jetpack'
362
							),
363
							$interval_text
364
						);
365
					break;
366
					case 'hours':
367
						$data['message'] = sprintf(
368
							_n(
369
								'<span class="difference">%s</span> <span class="label">hour to go.</span>',
370
								'<span class="difference">%s</span> <span class="label">hours to go.</span>',
371
								$interval,
372
								'jetpack'
373
							),
374
							$interval_text
375
						);
376
					break;
377
					case 'minutes':
378
						$data['message'] = sprintf(
379
							_n(
380
								'<span class="difference">%s</span> <span class="label">minute to go.</span>',
381
								'<span class="difference">%s</span> <span class="label">minutes to go.</span>',
382
								$interval,
383
								'jetpack'
384
							),
385
							$interval_text
386
						);
387
					break;
388
					case 'seconds':
389
						$data['message'] = sprintf(
390
							_n(
391
								'<span class="difference">%s</span> <span class="label">second to go.</span>',
392
								'<span class="difference">%s</span> <span class="label">seconds to go.</span>',
393
								$interval,
394
								'jetpack'
395
							),
396
							$interval_text
397
						);
398
					break;
399
				}
400
			}
401
			$data['message'] = '<div class="milestone-countdown">' . $data['message'] . '</div>';
402
		}
403
404
		return $data;
405
	}
406
407
	/**
408
	 * Return the largest possible time unit that the difference will be displayed in.
409
	 *
410
	 * @param Integer $seconds the interval in seconds
411
	 * @param String $maximum_unit the maximum unit that will be used. Optional.
412
	 * @return String $calculated_unit
413
	 */
414
	protected function get_unit( $seconds, $maximum_unit = 'automatic' ) {
415
		$unit = '';
0 ignored issues
show
Unused Code introduced by
$unit is not used, you could remove the assignment.

This check looks for variable assignements that are either overwritten by other assignments or where the variable is not used subsequently.

$myVar = 'Value';
$higher = false;

if (rand(1, 6) > 3) {
    $higher = true;
} else {
    $higher = false;
}

Both the $myVar assignment in line 1 and the $higher assignment in line 2 are dead. The first because $myVar is never used and the second because $higher is always overwritten for every possible time line.

Loading history...
416
417
		if ( $seconds >= YEAR_IN_SECONDS * 2 ) {
418
			// more than 2 years - show in years, one decimal point
419
			$unit = 'years';
420
421
		} else if ( $seconds >= YEAR_IN_SECONDS ) {
422
			if ( 'years' === $maximum_unit ) {
423
				$unit = 'years';
424
			} else {
425
				// automatic mode - showing months even if it's between one and two years
426
				$unit = 'months';
427
			}
428
429
		} else if ( $seconds >= MONTH_IN_SECONDS * 3 ) {
430
			// fewer than 2 years - show in months
431
			$unit = 'months';
432
433
		} else if ( $seconds >= MONTH_IN_SECONDS ) {
434
			if ( 'months' === $maximum_unit ) {
435
				$unit = 'months';
436
			} else {
437
				// automatic mode - showing days even if it's between one and three months
438
				$unit = 'days';
439
			}
440
441
		} else if ( $seconds >= DAY_IN_SECONDS - 1 ) {
442
			// fewer than a month - show in days
443
			$unit = 'days';
444
445
		} else if ( $seconds >= HOUR_IN_SECONDS - 1 ) {
446
			// less than 1 day - show in hours
447
			$unit = 'hours';
448
449
		} else if ( $seconds >= MINUTE_IN_SECONDS - 1 ) {
450
			// less than 1 hour - show in minutes
451
			$unit = 'minutes';
452
453
		} else {
454
			// less than 1 minute - show in seconds
455
			$unit = 'seconds';
456
		}
457
458
		$maximum_unit_index = array_search( $maximum_unit, $this->available_units );
459
		$unit_index = array_search( $unit, $this->available_units );
460
461
		if (
462
			false === $maximum_unit_index // the maximum unit parameter is automatic
463
			|| $unit_index > $maximum_unit_index // there is not enough seconds for even one maximum time unit
464
		) {
465
			return $unit;
466
		}
467
		return $maximum_unit;
468
	}
469
470
	/**
471
	 * Returns a time difference value in specified units.
472
	 *
473
	 * @param Integer $seconds
474
	 * @param String $units
475
	 * @return Integer|String $time_in_units
476
	 */
477
	protected function get_interval_in_units( $seconds, $units ) {
478
		switch ( $units ) {
479
			case 'years':
480
				$years = $seconds / YEAR_IN_SECONDS;
481
				$decimals = abs( round( $years, 1 ) - round( $years ) ) > 0 ? 1 : 0;
482
				return number_format_i18n( $years, $decimals );
483
			case 'months':
484
				return (int) ( $seconds / 60 / 60 / 24 / 30 );
485
			case 'days':
486
				return (int) ( $seconds / 60 / 60 / 24 + 1 );
487
			case 'hours':
488
				return (int) ( $seconds / 60 / 60 );
489
			case 'minutes':
490
				return (int) ( $seconds / 60 + 1 );
491
			default:
492
				return $seconds;
493
		}
494
	}
495
496
	/**
497
	 * Update
498
	 */
499
	function update( $new_instance, $old_instance ) {
500
		return $this->sanitize_instance( $new_instance );
501
	}
502
503
	/*
504
	 * Make sure that a number is within a certain range.
505
	 * If the number is too small it will become the possible lowest value.
506
	 * If the number is too large it will become the possible highest value.
507
	 *
508
	 * @param int $n The number to check.
509
	 * @param int $floor The lowest possible value.
510
	 * @param int $ceil The highest possible value.
511
	 */
512
	function sanitize_range( $n, $floor, $ceil ) {
513
		$n = (int) $n;
514
		if ( $n < $floor ) {
515
			$n = $floor;
516
		} elseif ( $n > $ceil ) {
517
			$n = $ceil;
518
		}
519
		return $n;
520
	}
521
522
	/*
523
	 * Sanitize an instance of this widget.
524
	 *
525
	 * Date ranges match the documentation for mktime in the php manual.
526
	 * @see http://php.net/manual/en/function.mktime.php#refsect1-function.mktime-parameters
527
	 *
528
	 * @uses Milestone_Widget::sanitize_range().
529
	 */
530
	function sanitize_instance( $dirty ) {
531
		$now = (int) current_time( 'timestamp' );
532
533
		$dirty = wp_parse_args( $dirty, array(
534
			'title'   => '',
535
			'event'   => __( 'The Big Day', 'jetpack' ),
536
			'unit'    => 'automatic',
537
			'type'    => 'until',
538
			'message' => __( 'The big day is here.', 'jetpack' ),
539
			'day'     => date( 'd', $now ),
540
			'month'   => date( 'm', $now ),
541
			'year'    => date( 'Y', $now ),
542
			'hour'    => 0,
543
			'min'     => 0,
544
		) );
545
546
		$allowed_tags = array(
547
			'a'      => array( 'title' => array(), 'href' => array(), 'target' => array() ),
548
			'em'     => array( 'title' => array() ),
549
			'strong' => array( 'title' => array() ),
550
		);
551
552
		$clean = array(
553
			'title'   => trim( strip_tags( stripslashes( $dirty['title'] ) ) ),
554
			'event'   => trim( strip_tags( stripslashes( $dirty['event'] ) ) ),
555
			'unit'    => $dirty['unit'],
556
			'type'    => $dirty['type'],
557
			'message' => wp_kses( $dirty['message'], $allowed_tags ),
558
			'year'    => $this->sanitize_range( $dirty['year'],  1901, 2037 ),
559
			'month'   => $this->sanitize_range( $dirty['month'], 1, 12 ),
560
			'hour'    => $this->sanitize_range( $dirty['hour'],  0, 23 ),
561
			'min'     => zeroise( $this->sanitize_range( $dirty['min'], 0, 59 ), 2 ),
562
		);
563
564
		$clean['day'] = $this->sanitize_range( $dirty['day'], 1, date( 't', mktime( 0, 0, 0, $clean['month'], 1, $clean['year'] ) ) );
565
566
		return $clean;
567
	}
568
569
	/**
570
	 * Form
571
	 */
572
	function form( $instance ) {
573
		$instance = $this->sanitize_instance( $instance );
574
575
		$units = array(
576
			'automatic' => _x( 'Automatic', 'Milestone widget: mode in which the date unit is determined automatically', 'jetpack' ),
577
			'years' => _x( 'Years', 'Milestone widget: mode in which the date unit is set to years', 'jetpack' ),
578
			'months' => _x( 'Months', 'Milestone widget: mode in which the date unit is set to months', 'jetpack' ),
579
			'days' => _x( 'Days', 'Milestone widget: mode in which the date unit is set to days', 'jetpack' ),
580
			'hours' => _x( 'Hours', 'Milestone widget: mode in which the date unit is set to hours', 'jetpack' ),
581
		);
582
		?>
583
584
	<div class="milestone-widget">
585
        <p>
586
        	<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title', 'jetpack' ); ?></label>
587
        	<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $instance['title'] ); ?>" />
588
        </p>
589
590
        <p>
591
        	<label for="<?php echo $this->get_field_id( 'event' ); ?>"><?php _e( 'Description', 'jetpack' ); ?></label>
592
        	<input class="widefat" id="<?php echo $this->get_field_id( 'event' ); ?>" name="<?php echo $this->get_field_name( 'event' ); ?>" type="text" value="<?php echo esc_attr( $instance['event'] ); ?>" />
593
        </p>
594
595
		<fieldset class="jp-ms-data-time">
596
			<legend><?php esc_html_e( 'Date', 'jetpack' ); ?></legend>
597
598
			<label for="<?php echo $this->get_field_id( 'month' ); ?>" class="assistive-text"><?php _e( 'Month', 'jetpack' ); ?></label>
599
			<select id="<?php echo $this->get_field_id( 'month' ); ?>" class="month" name="<?php echo $this->get_field_name( 'month' ); ?>"><?php
600
				global $wp_locale;
601
				for ( $i = 1; $i < 13; $i++ ) {
602
					$monthnum = zeroise( $i, 2 );
603
					echo '<option value="' . esc_attr( $monthnum ) . '"' . selected( $i, $instance['month'], false ) . '>' . $monthnum . '-' . $wp_locale->get_month_abbrev( $wp_locale->get_month( $i ) ) . '</option>';
604
				}
605
			?></select>
606
607
			<label for="<?php echo $this->get_field_id( 'day' ); ?>" class="assistive-text"><?php _e( 'Day', 'jetpack' ); ?></label>
608
			<input id="<?php echo $this->get_field_id( 'day' ); ?>" class="day" name="<?php echo $this->get_field_name( 'day' ); ?>" type="text" value="<?php echo esc_attr( $instance['day'] ); ?>">,
609
610
			<label for="<?php echo $this->get_field_id( 'year' ); ?>" class="assistive-text"><?php _e( 'Year', 'jetpack' ); ?></label>
611
			<input id="<?php echo $this->get_field_id( 'year' ); ?>" class="year" name="<?php echo $this->get_field_name( 'year' ); ?>" type="text" value="<?php echo esc_attr( $instance['year'] ); ?>">
612
		</fieldset>
613
614
		<fieldset class="jp-ms-data-time">
615
			<legend><?php esc_html_e( 'Time', 'jetpack' ); ?></legend>
616
617
			<label for="<?php echo $this->get_field_id( 'hour' ); ?>" class="assistive-text"><?php _e( 'Hour', 'jetpack' ); ?></label>
618
			<input id="<?php echo $this->get_field_id( 'hour' ); ?>" class="hour" name="<?php echo $this->get_field_name( 'hour' ); ?>" type="text" value="<?php echo esc_attr( $instance['hour'] ); ?>">
619
620
			<label for="<?php echo $this->get_field_id( 'min' ); ?>" class="assistive-text"><?php _e( 'Minutes', 'jetpack' ); ?></label>
621
622
			<span class="time-separator">:</span>
623
624
			<input id="<?php echo $this->get_field_id( 'min' ); ?>" class="minutes" name="<?php echo $this->get_field_name( 'min' ); ?>" type="text" value="<?php echo esc_attr( $instance['min'] ); ?>">
625
		</fieldset>
626
627
		<fieldset class="jp-ms-data-unit">
628
			<legend><?php esc_html_e( 'Time Unit', 'jetpack' ); ?></legend>
629
630
			<label for="<?php echo $this->get_field_id( 'unit' ); ?>" class="assistive-text">
631
				<?php _e( 'Time Unit', 'jetpack' ); ?>
632
			</label>
633
			<select id="<?php echo $this->get_field_id( 'unit' ); ?>" class="unit" name="<?php echo $this->get_field_name( 'unit' ); ?>">
634
			<?php
635
				foreach ( $units as $key => $unit ) {
636
					echo '<option value="' . esc_attr( $key ) . '"' . selected( $key, $instance['unit'], false ) . '>' . $unit . '</option>';
637
				}
638
			?></select>
639
		</fieldset>
640
641
		<ul class="milestone-type">
642
			<li>
643
				<label>
644
					<input
645
						<?php checked( $instance['type'], 'until' ); ?>
646
						name="<?php echo esc_attr( $this->get_field_name( 'type' ) ); ?>"
647
						type="radio"
648
						value="until"
649
					/>
650
					<?php esc_html_e( 'Until your milestone', 'jetpack' ); ?>
651
				</label>
652
			</li>
653
654
			<li>
655
				<label>
656
					<input
657
						<?php checked( $instance['type'], 'since' ); ?>
658
						name="<?php echo esc_attr( $this->get_field_name( 'type' ) ); ?>"
659
						type="radio"
660
						value="since"
661
					/>
662
					<?php esc_html_e( 'Since your milestone', 'jetpack' ); ?>
663
				</label>
664
			</li>
665
		</ul>
666
667
		<p class="milestone-message-wrapper">
668
			<label for="<?php echo $this->get_field_id( 'message' ); ?>"><?php _e( 'Milestone Reached Message', 'jetpack' ); ?></label>
669
			<textarea id="<?php echo $this->get_field_id( 'message' ); ?>" name="<?php echo $this->get_field_name( 'message' ); ?>" class="widefat" rows="3"><?php echo esc_textarea( $instance['message'] ); ?></textarea>
670
		</p>
671
	</div>
672
673
		<?php
674
    }
675
}
676