4a5583845e
* fix: import moment.js library with moment-timezone support in wrapper Packaging changes broke the mechanism used to make moment.tz available to javascript code. This eliminates the separate moment.js and moment-timezone-with-data-10-year-range.js wrappers and instead imports the timezone-augmented version directly. This provides both the timezone support and the regular moment features. * refactor: put moment on window instead of global for consistency
81 lines
3.2 KiB
JavaScript
81 lines
3.2 KiB
JavaScript
// Copyright The IETF Trust 2021, All Rights Reserved
|
|
/* global moment */
|
|
/*
|
|
Timezone selection handling. Relies on the moment.js library.
|
|
|
|
To use, create one (or more) select inputs with class "tz-select". When the initialize()
|
|
method is called, the options in the select will be replaced with the recognized time zone
|
|
names. Time zone can be changed via the select input or by calling the use() method with
|
|
the name of a time zone (or 'local' to guess the user's local timezone).
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
|
|
// Callback for timezone change - called after current_timezone is updated
|
|
let timezone_change_callback;
|
|
let current_timezone;
|
|
let tz_radios;
|
|
let tz_selects;
|
|
|
|
// Select timezone to use. Arg is name of a timezone or 'local' to guess local tz.
|
|
function use_timezone(newtz) {
|
|
if (current_timezone !== newtz) {
|
|
current_timezone = newtz;
|
|
// Update values of tz-select inputs but do not trigger change event
|
|
$('select.tz-select')
|
|
.val(newtz);
|
|
if (timezone_change_callback) {
|
|
timezone_change_callback(newtz);
|
|
}
|
|
tz_radios.filter(`[value="${newtz}"]`).prop('checked', true);
|
|
tz_radios.filter(`[value!="${newtz}"]`).prop('checked', false);
|
|
tz_selects.val(newtz);
|
|
tz_selects.trigger('change.select2'); // notify only select2 of change to avoid change event storm
|
|
}
|
|
}
|
|
|
|
function handle_change_event(evt) {
|
|
const newtz = evt.target.value;
|
|
use_timezone(newtz); // use the requested timezone
|
|
}
|
|
|
|
/* Initialize timezone system
|
|
*
|
|
* This will set the timezone to the value of 'current'. Set up the tz_change callback
|
|
* before initializing.
|
|
*/
|
|
function timezone_init(current) {
|
|
var tz_names = moment.tz.names();
|
|
if (current === 'local') {
|
|
current = moment.tz.guess();
|
|
}
|
|
tz_selects = $('select.tz-select');
|
|
tz_selects.empty();
|
|
$.each(tz_names, function (i, item) {
|
|
tz_selects.append($('<option/>', {
|
|
selected: current === item,
|
|
html: item,
|
|
value: item
|
|
}));
|
|
});
|
|
tz_radios = $('input.tz-select[type="radio"]');
|
|
tz_radios.filter('[value="local"]').prop('value', moment.tz.guess());
|
|
tz_radios.on('change', handle_change_event);
|
|
tz_selects.on('change', handle_change_event);
|
|
/* When navigating back/forward, the browser may change the select input's
|
|
* value after the window load event. It does not fire the change event on
|
|
* the input when it does this. The pageshow event occurs after such an update,
|
|
* so trigger the change event ourselves to be sure the UI stays consistent
|
|
* with the timezone select input. */
|
|
window.addEventListener('pageshow', function () { tz_selects.trigger("change"); });
|
|
use_timezone(current);
|
|
}
|
|
|
|
// Expose public interface
|
|
window.ietf_timezone = {
|
|
get_current_tz: function () { return current_timezone; },
|
|
initialize: timezone_init,
|
|
set_tz_change_callback: function (cb) { timezone_change_callback = cb; },
|
|
use: use_timezone
|
|
};
|
|
})(); |