Time zone suggester based on nascent WordPress.org API call

[sambauers]

The attached patch uses a new API call to ​http://api.wordpress.org/core/ip-to-zoneinfo/1.0/ to retrieve a suggested time zone based on client (not server) IP address.

A button is added next to the existing dropdown list of time zones providing the option to "Suggest a time zone". This calls the API using an AJAX/JSONP request which then auto-selects a time zone for the user from the dropdown.

Visual feedback is via a spinner when fetching and then a text response.

Additionally the Date and Time settings have been split out to a new settings page.

Related ticket: #10324

[sambauers]

An attribution for use of GeoNames will need to be included somewhere in the interface or on the WordPress.org site/docs for us to be able to use this.

[nacin]

Moving to 3.1. Not sure we need to spawn another options panel for this though.

[rmccue]

Updated (and simpler) patch

[rmccue]

This updated patch does the same as Sam's, but simpler, and also asks the user before using the supplied timezone as the value.

[azaozz]

I see this as "pure" JS based solution. The browser "knows" the right timezone and the UTC offset. The user's IP might not be in the same timezone (proxy?).

[Otto42]

We have a name-to-zoneinfo API call too:

​http://api.wordpress.org/core/name-to-zoneinfo/1.0/?callback=abcd&s=memphis

Could be good for auto-suggest based on search string.

[rmccue]

Refresh patch

[Otto42]

#10324 was marked as a duplicate.

[helenyhou]

#9759 was marked as a duplicate.

[travisnorthcutt]

​http://pellepim.bitbucket.org/jstz/ might be a candidate for use... grabs a timezone as opposed to a UTC offset, and is MIT licensed so inclusion in core should be possible.

[Otto42]

Yeah, but man, that is one wacky fun bit of JS to do the detection.

​https://bitbucket.org/pellepim/jstimezonedetect/src/c7ea46531444b600246fe651bc9feb66a7593be5/jstz.js?at=default

[travisnorthcutt]

Not my area of expertise, but if it works, then great.

I'm not one to look a gift horse in the mouth ;)

[ericlewis]

There is a ​jQuery Timezone picker that could be considered to solve this problem as well. Finding your place on a world map is an instantly understood UI, and adds a bit of character.

[ericlewis]

Another option: ​timezone selection with d3

[rmccue]

Replying to ericlewis:

Another option: ​timezone selection with d3

Cool, but not accurate (it's missing the Sydney timezone, at least). The jQuery library is a better interface IMO, and looks more accurate.

[ericlewis]

Replying to rmccue

Cool, but not accurate (it's missing the Sydney timezone, at least). The jQuery library is a better interface IMO, and looks more accurate.

The d3 example is crude, but there would be benefits with D3. There's Low overhead for complete control over the map.

Since D3 uses SVG, we could use the new admin color schemes to inform the map's colors.

Finding the right timezone tiling shouldn't be too hard either since it uses GeoJSON.

[sambauers]

The jQuery one is much nicer, and the payload overhead is about the same as the D3 one. The D3 JS is about @40KB Gzipped. The extra JS on the jQuery one is @4KB + the map image is about @35KB.

Supporting a jQuery plugin is less development overhead than adding a new library.

Best zombie ticket ever BTW!

[ericlewis]

Replying to azaozz:

I see this as "pure" JS based solution. The browser "knows" the right timezone and the UTC offset. The user's IP might not be in the same timezone (proxy?).

Coming back, this seems the best solution, please excuse my earnest vision of using D3 here.

[rmccue]

I implemented timezone detection via the browser for a project I was working on. Unfortunately, the browser doesn't report the Olsen timezone via JS, only the ​timezone offset. There's a ​nice little library that applies heuristics based on the offset and DST information, but this isn't native to the browser.

One potentially easier solution would be to use getTimezoneOffset() to provide filtered suggestions for the picker, and expose these to the user. This would require outputting the timezone offset in wp_timezone_choice(), which would also allow us to show the current time live as you change the timezone.

[Otto42]

Sad to say that an 11+ K script (after minification) is currently the best option for browser side detection. Still seems to have quite a few issues though, several in their list involve it giving different answers on different browsers.

​https://bitbucket.org/pellepim/jstimezonedetect

It's worth noting that the current WP code basically outputs all the timezones PHP knows about, including historical ones. It might be worth trimming that down to only modern timezones, in the same way that the library above does. Looks like they're only including 72 current timezones, approximately.

[dd32]

FWIW see this comment on #28988 by myself:

It looks like we'll be able to use Intl.DateTimeFormat().resolvedOptions().timeZone here now.

It's supported by recent Chrome & Safari, Firefox 52 will support it (Currently in the Developer channel), however IE is likely not implementing it. Progressive enhancement to support it when possible seems like a good option to me.

[Rarst]

Refreshing what's our options are at this time.

Is the suggested endpoint dead? ​http://api.wordpress.org/core/ip-to-zoneinfo/1.0/?callback=abcd ({"errorcode":5,"errormessage":"GeoNames API could not be contacted"})

Looked at Intl.DateTimeFormat().resolvedOptions().timeZone and browser support looks good by now (except IE), but there are reports that returned value is incorrect/inconsistent between browsers. Also the value might not at all be consistent with PHP time zone, which we need. I suppose we could do a very low hanging fruit implementation when suggestion is made if JS time zone matches exactly one of PHP time zones. Anything more comprehensive would require us to maintain complex multi-browser mapping from possible JS values to PHP ones.