Skip to content

Commit c9430f6

Browse files
ozhozh
committed
I think we're good :)
1 parent ba1a7ad commit c9430f6

File tree

5 files changed

+124
-46
lines changed

5 files changed

+124
-46
lines changed

‎admin.php

+70-27
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
* Time Zone plugin admin page
44
*/
55

6-
// Display time zone configuration page
6+
/**
7+
* Display time zone configuration page
8+
*/
79
function yourls_tzp_admin_page() {
810

911
// Check if a form was submitted
@@ -25,17 +27,23 @@ function yourls_tzp_admin_page() {
2527
// Draw page
2628
yourls_tzp_js_css();
2729
print '<h2>Time Zone Configuration</h2>
28-
<p>This plugin enables the configuration of which time zone to use when displaying dates and time.</p>
29-
<form method="post">';
30-
print '<input type="hidden" name="nonce" value="' . yourls_create_nonce( 'time_zone_config' ) . '" />';
30+
<p>This plugin allows to specify a time zone and to format time/date display</p>';
31+
32+
if( defined('YOURLS_HOURS_OFFSET') ) {
33+
print '<p><strong>Note:</strong> you have <code>YOURLS_HOURS_OFFSET</code> defined in your config.php. This plugin will override this setting.</p>';
34+
}
3135

36+
print '<form method="post">
37+
<input type="hidden" name="nonce" value="' . yourls_create_nonce( 'time_zone_config' ) . '" />';
38+
39+
// Time zones drop down
3240
print '<h3>Time zone: </h3>
3341
<div class="settings">
3442
<p>Choose a city near your location, in the same timezone as you, or a UTC time offset.</p>';
3543
yourls_tzp_tz_dropdown( $user_time_zone );
36-
print '<p>Universal time (<code>UTC</code>) time is: <tt>' . yourls_tzp_timezoned_time( time(), 'UTC', 'Y-m-d H:i:s' ) . '</tt></p>';
44+
print '<p>Universal time (<code>UTC</code>) time is: <tt id="utc_time">' . date( 'Y-m-d H:i:s', yourls_tzp_timezoned_timestamp( time(), 'UTC' ) ). '</tt></p>';
3745
if($user_time_zone) {
38-
print "<p>Time in $user_time_zone is: <tt>" . yourls_tzp_timezoned_time( time(), $user_time_zone, 'Y-m-d H:i:s' ) . '</tt></p>';
46+
print "<p>Time in $user_time_zone is: <tt id='local_time'>" . date( 'Y-m-d H:i:s', yourls_tzp_timezoned_timestamp( time(), $user_time_zone) ) . '</tt></p>';
3947
}
4048
print '</div>';
4149

@@ -57,16 +65,21 @@ function yourls_tzp_admin_page() {
5765
);
5866
yourls_tzp_format_radio( 'Time Format', 'time_format', $choices, $user_time_zone, $user_time_format, $user_time_format_custom );
5967

60-
print '<p><input type="submit" class="button" value="Update configuration" /></p>';
61-
print '</form>';
68+
print '<p><input type="submit" class="button primary" value="Update configuration" /></p>
69+
</form>
70+
<p><strong>Note:</strong> custom formats need a PHP <code><a href="https://php.net/date">date()</a></code> string.';
6271

6372
}
6473

65-
74+
/**
75+
* Output CSS & JS
76+
*/
6677
function yourls_tzp_js_css() {
78+
$plugin_url = yourls_plugin_url( __DIR__ );
6779
print <<<JSCSS
68-
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
69-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
80+
<link href='$plugin_url/assets/select2.min.css' rel='stylesheet' />
81+
<script src='$plugin_url/assets/select2.min.js'></script>
82+
<script src='$plugin_url/assets/php-date-formatter.min.js'></script>
7083
<script>
7184
jQuery( document ).ready(function() {
7285
// auto select radio when custom input field is focused
@@ -77,11 +90,41 @@ function yourls_tzp_js_css() {
7790
// easy selector on timezones
7891
$('#time_zone').select2({
7992
templateResult: format_region,
80-
placeholder:'Choose a time zone '
81-
}
93+
placeholder:'Choose a time zone'
94+
});
95+
96+
// Real time date format preview
97+
$(".custom_format").on("keyup", function() {
98+
format_preview($(this).attr('id'), $(this).val());
99+
});
100+
101+
// Click a radio to change custom format accordingly
102+
$('.radio_format').change(
103+
function(){
104+
if (this.checked) {
105+
name = $(this).attr('name');
106+
value = $(this).attr('value');
107+
$('#'+name+'_custom_value').val(value).trigger($.Event("keyup"));
108+
}
109+
}
82110
);
83111
})
84112
113+
// Real time preview of date/time format
114+
function format_preview(id, value) {
115+
if($('#local_time')) {
116+
time = $('#local_time').text();
117+
} else {
118+
time = $('#utc_time').text();
119+
}
120+
id = id.replace('_custom_value', '');
121+
fmt = new DateFormatter();
122+
parse = fmt.parseDate(time, 'Y-m-d H:i:s');
123+
format = fmt.formatDate(parse, value );
124+
$('#tz_test_' + id).text(format);
125+
}
126+
127+
// modify dropdown list
85128
function format_region(item) {
86129
if (!item.id) {
87130
return item.text;
@@ -100,7 +143,7 @@ function format_region(item) {
100143
border-bottom:1px solid #ccc;
101144
}
102145
div.settings {
103-
padding-bottom:2em;
146+
padding-bottom:1em;
104147
}
105148
.region{
106149
color:#aaa;
@@ -111,7 +154,11 @@ function format_region(item) {
111154

112155
}
113156

114-
157+
/**
158+
* Draw the time zone drop down
159+
*
160+
* @param string $user_time_zone Timezone to be marked as "selected" in the dropdown
161+
*/
115162
function yourls_tzp_tz_dropdown( $user_time_zone ) {
116163
// Continent list
117164
$continent = array(
@@ -130,9 +177,9 @@ function yourls_tzp_tz_dropdown( $user_time_zone ) {
130177
foreach ($continent as $name => $mask) {
131178
$zones = DateTimeZone::listIdentifiers($mask);
132179
foreach($zones as $timezone) {
133-
// Remove region name and add a sample time
134-
$timezones[$name][$timezone] = substr($timezone, strlen($name) + 1);
135-
}
180+
// Remove region name
181+
$timezones[$name][$timezone] = substr($timezone, strlen($name) +1);
182+
}
136183
}
137184

138185
// Manual UTC offset
@@ -190,16 +237,16 @@ function yourls_tzp_format_radio( $title, $input_name, $formats, $tz, $selected,
190237

191238
foreach ($formats as $format) {
192239
$checked = ( $format === $selected ) ? 'checked="checked"' : '' ;
193-
print "<p><label><input type='radio' name='$input_name' value='$format' $checked >";
194-
print yourls_date_i18n( $format, yourls_tzp_timezoned_time( time(), $tz ), true );
195-
print "<br>";
196-
print yourls_tzp_timezoned_time( time(), $tz, $format );
240+
print "<p><label><input type='radio' class='radio_format radio_$input_name' name='$input_name' value='$format' $checked >";
241+
print yourls_date_i18n( $format, yourls_tzp_timezoned_timestamp( time(), $tz ), true );
197242
print "</label></p>\n";
198243
}
199244

200245
$checked = ( 'custom' === $selected ) ? 'checked="checked"' : '' ;
246+
$preview = date( $custom, yourls_tzp_timezoned_timestamp( time(), $tz ) );
201247
print "<label class='custom'><input type='radio' id='${input_name}_custom' name='$input_name' value='custom' $checked >
202-
Custom: <input type='text' class='text' id='${input_name}_custom_value' name='${input_name}_custom_value' value='$custom' />
248+
Custom: <input type='text' class='text custom_format' id='${input_name}_custom_value' name='${input_name}_custom_value' value='$custom' />
249+
<span class='tz_test' id='tz_test_$input_name'>$preview</span>
203250
</label>\n";
204251

205252
print '</div>';
@@ -208,10 +255,6 @@ function yourls_tzp_format_radio( $title, $input_name, $formats, $tz, $selected,
208255

209256
/**
210257
* Update time zone in database
211-
*
212-
* The array isn't sanitized here, it should be done in the caller
213-
*
214-
* @since
215258
*/
216259
function yourls_tzp_config_update_settings() {
217260

‎assets/php-date-formatter.min.js

+13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)