[feature/new-tz-handling] Introduce 2 step timezone selection using javascript

PHPBB3-9558

phpBB/includes/functions.php

@@ -1129,14 +1129,14 @@ function tz_select_compare($a, $b)
 
 /**
 * Pick a timezone
-* @todo Possible HTML escaping
 */
-function tz_select($default = '', $truncate = false)
+function tz_select($default = '', $truncate = false, $return_tzs_only = true)
 {
 	global $user;
 
 	static $timezones;
 
+	$default_offset = '';
 	if (!isset($timezones))
 	{
 		$unsorted_timezones = DateTimeZone::listIdentifiers();
@@ -1147,21 +1147,37 @@ function tz_select($default = '', $truncate = false)
 			$tz = new DateTimeZone($timezone);
 			$dt = new phpbb_datetime('now', $tz);
 			$offset = $dt->getOffset();
+			$current_time = $dt->format($user->lang['DATETIME_FORMAT'], true);
 			$offset_string = phpbb_format_timezone_offset($offset);
 			$timezones['GMT' . $offset_string . ' - ' . $timezone] = array(
 				'tz'		=> $timezone,
-				'label'		=> 'GMT' . $offset_string . ' - ' . $timezone,
+				'offest'	=> 'GMT' . $offset_string,
+				'current'	=> $current_time,
 			);
+			if ($timezone === $default)
+			{
+				$default_offset = 'GMT' . $offset_string;
+			}
 		}
 		unset($unsorted_timezones);
 
 		uksort($timezones, 'tz_select_compare');
 	}
 
-	$tz_select = '';
+	$tz_select = $tz_dates = $opt_group = '';
 
 	foreach ($timezones as $timezone)
 	{
+		if ($opt_group != $timezone['offest'])
+		{
+			$tz_select .= ($opt_group) ? '</optgroup>' : '';
+			$tz_select .= '<optgroup label="' . $timezone['offest'] . ' - ' . $timezone['current'] . '">';
+			$opt_group = $timezone['offest'];
+
+			$selected = ($default_offset == $timezone['offest']) ? ' selected="selected"' : '';
+			$tz_dates .= '<option value="' . $timezone['offest'] . ' - ' . $timezone['current'] . '"' . $selected . '>' . $timezone['offest'] . ' - ' . $timezone['current'] . ($selected ? ' ' . $user->lang['TIMEZONE_SELECTED'] : '') . '</option>';
+		}
+
 		if (isset($user->lang['timezones'][$timezone['tz']]))
 		{
 			$title = $label = $user->lang['timezones'][$timezone['tz']];
@@ -1169,10 +1185,10 @@ function tz_select($default = '', $truncate = false)
 		else
 		{
 			// No label, we'll figure one out
-			// @todo rtl languages?
+			$bits = explode('/', str_replace('_', ' ', $timezone['tz']));
-			$bits = explode('/', str_replace('_', ' ', $timezone['label']));
 
-			$title = $label = implode(' - ', $bits);
+			$label = implode(' - ', $bits);
+			$title = $timezone['offest'] . ' - ' . $label;
 		}
 
 		if ($truncate)
@@ -1181,10 +1197,19 @@ function tz_select($default = '', $truncate = false)
 		}
 
 		$selected = ($timezone['tz'] === $default) ? ' selected="selected"' : '';
-		$tz_select .= '<option title="' . $title . '" value="' . $timezone['tz'] . '"' . $selected . '>' . $label . '</option>';
+		$tz_select .= '<option title="' . $title . '" value="' . $timezone['tz'] . '"' . $selected . '>' . $label . ($selected ? ' ' . $user->lang['TIMEZONE_SELECTED'] : '') . '</option>';
+	}
+	$tz_select .= '</optgroup>';
+
+	if ($return_tzs_only)
+	{
+		return $tz_select;
 	}
 
-	return $tz_select;
+	return array(
+		'tz_select'		=> $tz_select,
+		'tz_dates'		=> $tz_dates,
+	);
 }
 
 // Functions handling topic/post tracking/marking

phpBB/includes/ucp/ucp_prefs.php

@@ -131,6 +131,7 @@ class ucp_prefs
 				}
 				$dateformat_options .= '>' . $user->lang['CUSTOM_DATEFORMAT'] . '</option>';
 
+				$tz_select = tz_select($data['tz'], true, false);
 				$template->assign_vars(array(
 					'ERROR'				=> (sizeof($error)) ? implode('<br />', $error) : '',
 
@@ -153,7 +154,8 @@ class ucp_prefs
 
 					'S_LANG_OPTIONS'		=> language_select($data['lang']),
 					'S_STYLE_OPTIONS'		=> ($config['override_user_style']) ? '' : style_select($data['style']),
-					'S_TZ_OPTIONS'			=> tz_select($data['tz'], true),
+					'S_TZ_OPTIONS'			=> $tz_select['tz_select'],
+					'S_TZ_DATE_OPTIONS'		=> $tz_select['tz_dates'],
 					'S_CAN_HIDE_ONLINE'		=> ($auth->acl_get('u_hideonline')) ? true : false,
 					'S_SELECT_NOTIFY'		=> ($config['jab_enable'] && $user->data['user_jabber'] && @extension_loaded('xml')) ? true : false)
 				);

phpBB/language/en/common.php

@@ -42,6 +42,7 @@ $lang = array_merge($lang, array(
 	'TRANSLATION_INFO'	=> '',
 	'DIRECTION'			=> 'ltr',
 	'DATE_FORMAT'		=> '|d M Y|',	// 01 Jan 2007 (with Relative days enabled)
+	'DATETIME_FORMAT'	=> '|d M Y, H:i|',	// 01 Jan 2007, 13:37 (with Relative days enabled)
 	'USER_LANG'			=> 'en-gb',
 
 	// You can define different rules for the determination of plural forms here.

phpBB/language/en/ucp.php

@@ -412,6 +412,7 @@ $lang = array_merge($lang, array(
 	'SIGNATURE_EXPLAIN'			=> 'This is a block of text that can be added to posts you make. There is a %d character limit.',
 	'SIGNATURE_PREVIEW'			=> 'Your signature will appear like this in posts',
 	'SIGNATURE_TOO_LONG'		=> 'Your signature is too long.',
+	'SELECT_CURRENT_TIME'		=> 'Select current time',
 	'SELECT_TIMEZONE'			=> 'Select timezone',
 	'SORT'						=> 'Sort',
 	'SORT_COMMENT'				=> 'File comment',
@@ -422,7 +423,9 @@ $lang = array_merge($lang, array(
 	'SORT_SIZE'					=> 'File size',
 
 	'TIMEZONE'					=> 'Timezone',
+	'TIMEZONE_DATE_SUGGESTION'	=> 'Suggestion: %s',
 	'TIMEZONE_INVALID'			=> 'The timezone you selected is invalid.',
+	'TIMEZONE_SELECTED'			=> '(currently selected)',
 	'TO'						=> 'To',
 	'TOO_MANY_RECIPIENTS'		=> 'You tried to send a private message to too many recipients.',
 	'TOO_MANY_REGISTERS'		=> 'You have exceeded the maximum number of registration attempts for this session. Please try again later.',

phpBB/styles/prosilver/template/timezone.js

@@ -1,10 +1,37 @@
-function phpbb_preselect_tz_select()
+function phpbb_switch_tz_date(keep_selection)
 {
-	var selector = document.getElementsByClassName('tz_select')[0];
+	var timezone_groups = document.getElementById("timezone");
-	if (selector.value)
+	for (var i = 0; i < timezone_groups.childElementCount; i++) {
-	{
+		if (timezone_groups.children[i].tagName == "OPTGROUP" &&
-		return;
+			timezone_groups.children[i].label != document.getElementById("tz_date").value)
+		{
+			timezone_groups.children[i].style.display = "none";
+		}
+		else if (timezone_groups.children[i].tagName == "OPTGROUP")
+		{
+			// Display other options
+			timezone_groups.children[i].style.display = "block";
+		}
 	}
+	if (typeof keep_selection !== 'undefined')
+	{
+		if (!keep_selection)
+		{
+			timezone_groups.children[0].selected = true;
+		}
+	}
+}
+
+function phpbb_enable_tz_dates()
+{
+	var tz_select_date = document.getElementById("tz_select_date");
+	tz_select_date.style.display = "block";
+}
+
+function phpbb_preselect_tz_select(force_selector, l_suggestion)
+{
+
+	var selector = document.getElementById('tz_date');
 	// The offset returned here is in minutes and negated.
 	// http://www.w3schools.com/jsref/jsref_getTimezoneOffset.asp
 	var offset = (new Date()).getTimezoneOffset();
@@ -42,12 +69,26 @@ function phpbb_preselect_tz_select()
 		var option = selector.options[i];
 		if (option.value.substring(0, prefix_length) == prefix)
 		{
-			// Firefox scrolls the selector only to put the option into view;
+			if (selector.value && selector.value != option.value && !force_selector)
-			// for negative-offset timezones, this means the first timezone
+			{
-			// of a particular offset will be the bottom one, and selected,
+				// We do not select the option for the user, but notify him,
-			// with all other timezones not visible. Not much can be done
+				// that we would suggest a different setting.
-			// about that here unfortunately.
+				document.getElementById("tz_select_date_suggest").style.display = "inline";
-			option.selected = true;
+				document.getElementById("tz_select_date_suggest").title = l_suggestion.replace("%s", option.innerHTML);
+				document.getElementById("tz_select_date_suggest").innerHTML = l_suggestion.replace("%s", option.innerHTML.substring(0, 9));
+				phpbb_switch_tz_date(true);
+			}
+			else
+			{
+				// Firefox scrolls the selector only to put the option into view;
+				// for negative-offset timezones, this means the first timezone
+				// of a particular offset will be the bottom one, and selected,
+				// with all other timezones not visible. Not much can be done
+				// about that here unfortunately.
+				option.selected = true;
+				phpbb_switch_tz_date(!force_selector);
+				document.getElementById("tz_select_date_suggest").style.display = "none";
+			}
 			break;
 		}
 	}

phpBB/styles/prosilver/template/ucp_prefs_personal.html

@@ -75,6 +75,13 @@
 	<!-- ENDIF -->
 	<dl>
 		<dt><label for="timezone">{L_BOARD_TIMEZONE}:</label></dt>
+		<dd id="tz_select_date" style="display: none;">
+			<select name="tz_date" id="tz_date" class="autowidth tz_select" onchange="phpbb_switch_tz_date(false);">
+				<option value="">{L_SELECT_CURRENT_TIME}</option>
+				{S_TZ_DATE_OPTIONS}
+			</select>
+			<a id="tz_select_date_suggest" style="display: none;" href="javascript: phpbb_preselect_tz_select(true, '');">{L_TIMEZONE_DATE_SUGGESTION}</a>
+		</dd>
 		<dd>
 			<select name="tz" id="timezone" class="autowidth tz_select">
 				<option value="">{L_SELECT_TIMEZONE}</option>
@@ -140,6 +147,7 @@
 </script>
 
 <script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/timezone.js"></script>
-<script type="text/javascript">phpbb_preselect_tz_select();</script>
+<script type="text/javascript">phpbb_enable_tz_dates();</script>
+<script type="text/javascript">phpbb_preselect_tz_select(false, '{L_TIMEZONE_DATE_SUGGESTION}');</script>
 
 <!-- INCLUDE ucp_footer.html -->

phpBB/styles/prosilver/theme/forms.css

@@ -32,6 +32,11 @@ option {
 	padding-right: 1em;
 }
 
+select optgroup option {
+	padding-right: 1em;
+	font-family: Verdana, Helvetica, Arial, sans-serif;
+}
+
 textarea {
 	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
 	width: 60%;