fix: debug time zone widget and add to agenda RH nav panel (#3792)
This commit is contained in:
Jennifer Richards
GitHub
parent
fd588d61b4
commit
eab4705dc1
|
|
@ -1,5 +1,5 @@
|
|||
// Copyright The IETF Trust 2021, All Rights Reserved
|
||||
|
||||
// Copyright The IETF Trust 2021, All Rights Reserved
|
||||
/* global moment */
|
||||
/*
|
||||
Timezone selection handling. Relies on the moment.js library.
|
||||
|
||||
|
|
@ -8,21 +8,16 @@
|
|||
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).
|
||||
*/
|
||||
window.ietf_timezone; // public interface
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
// Callback for timezone change - called after current_timezone is updated
|
||||
var timezone_change_callback;
|
||||
var current_timezone;
|
||||
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) {
|
||||
// Guess local timezone if necessary
|
||||
if (newtz.toLowerCase() === 'local') {
|
||||
newtz = moment.tz.guess();
|
||||
}
|
||||
|
||||
if (current_timezone !== newtz) {
|
||||
current_timezone = newtz;
|
||||
// Update values of tz-select inputs but do not trigger change event
|
||||
|
|
@ -31,9 +26,18 @@ window.ietf_timezone; // public interface
|
|||
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
|
||||
|
|
@ -41,30 +45,33 @@ window.ietf_timezone; // public interface
|
|||
*/
|
||||
function timezone_init(current) {
|
||||
var tz_names = moment.tz.names();
|
||||
var select = $('select.tz-select');
|
||||
|
||||
select.empty();
|
||||
if (current === 'local') {
|
||||
current = moment.tz.guess();
|
||||
}
|
||||
tz_selects = $('select.tz-select');
|
||||
tz_selects.empty();
|
||||
$.each(tz_names, function (i, item) {
|
||||
select.append($('<option/>', {
|
||||
tz_selects.append($('<option/>', {
|
||||
selected: current === item,
|
||||
html: item,
|
||||
value: item
|
||||
}));
|
||||
});
|
||||
select.on("change", function () {
|
||||
use_timezone(this.value);
|
||||
});
|
||||
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 () { select.trigger("change"); });
|
||||
window.addEventListener('pageshow', function () { tz_selects.trigger("change"); });
|
||||
use_timezone(current);
|
||||
}
|
||||
|
||||
// Expose public interface
|
||||
ietf_timezone = {
|
||||
window.ietf_timezone = {
|
||||
get_current_tz: function () { return current_timezone; },
|
||||
initialize: timezone_init,
|
||||
set_tz_change_callback: function (cb) { timezone_change_callback = cb; },
|
||||
|
|
|
|||
|
|
@ -25,7 +25,17 @@
|
|||
{% endif %}
|
||||
{# the contents of #extra-nav will be moved into the RH nav panel #}
|
||||
<div id="extra-nav" class="d-none">
|
||||
<a class="nav-link now-link" href="#">Current session</a>
|
||||
<div class="d-flex flex-column">
|
||||
{% if now.date <= schedule.meeting.end_date %}
|
||||
<a class="nav-link now-link" href="#">Current session</a>
|
||||
{% endif %}
|
||||
<div class="px-3">
|
||||
Showing <span class="current-tz">{{ timezone }}</span> time
|
||||
</div>
|
||||
<div class="px-3 w-100">
|
||||
{% include 'meeting/tz-display.html' with id_suffix="-rh" meeting_timezone=timezone minimal=True only %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# cache this part -- it takes 3-6 seconds to generate #}
|
||||
{% load cache %}
|
||||
|
|
@ -47,7 +57,7 @@
|
|||
{{ schedule.meeting.agenda_info_note|removetags:"h1"|safe }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% include 'meeting/tz-display.html' with id_suffix="" timezone=timezone %}
|
||||
{% include 'meeting/tz-display.html' with meeting_timezone=timezone only %}
|
||||
{% include "meeting/agenda_filter.html" with filter_categories=filter_categories customize_button_text="Personalize the agenda view..." always_show=personalize %}
|
||||
{% include "meeting/agenda_personalize_buttonlist.html" with meeting=schedule.meeting only %}
|
||||
<div class="input-group mb-3">
|
||||
|
|
@ -321,8 +331,7 @@
|
|||
{% endcache %}
|
||||
{% endblock %}
|
||||
{% block js %}
|
||||
<script src="{% static 'ietf/js/agenda_filter.js' %}">
|
||||
</script>
|
||||
<script src="{% static 'ietf/js/agenda_filter.js' %}"></script>
|
||||
<script>
|
||||
// Update the agenda display with specified filters
|
||||
function update_agenda_display(filter_params) {
|
||||
|
|
|
|||
|
|
@ -1,36 +1,48 @@
|
|||
{% comment %}
|
||||
Include this to display a timezone select widget. Must also include timezone.js as a script.
|
||||
{% import "meeting/tz-display.html" with meeting_timezone="America/Halifax" id_suffix="" minimal=False only %}
|
||||
|
||||
Must provide the meeting_timezone option, which is the timezone to be used when the "Meeting" radio is
|
||||
selected. If id_suffix is given, it is appended to the element IDs and radio input names to differentiate
|
||||
multiple instances of the widget. If minimal is True, only the Meeting/Local/UTC radios are shown and no
|
||||
arbitrary timezone select input is included in the widget.
|
||||
|
||||
As long as id_suffix is different, should allow for as many copies of the widget on a page as you'd like.
|
||||
{% endcomment %}
|
||||
{% load origin %}
|
||||
{% origin %}
|
||||
<div class="tz-display input-group my-3">
|
||||
<label class="input-group-text border-primary bg-white fw-bold">Time zone:</label>
|
||||
{% firstof id_suffix "" as suffix %}
|
||||
<div class="tz-display {% if minimal %}btn-group{% else %}input-group{% endif %} my-3">
|
||||
{% if not minimal %}<label class="input-group-text border-primary bg-white fw-bold">Time zone:</label>{% endif %}
|
||||
{% if meeting_timezone is not None %}
|
||||
<input type="radio"
|
||||
name="tzradio{{ suffix }}"
|
||||
class="btn-check tz-select"
|
||||
id="meeting-timezone{{ suffix }}"
|
||||
value="{{ meeting_timezone }}">
|
||||
<label class="btn btn-outline-primary" for="meeting-timezone{{ suffix }}">Meeting</label>
|
||||
{% endif %}
|
||||
<input type="radio"
|
||||
{% if timezone == "meeting" %}checked{% endif %}
|
||||
name="tzradio"
|
||||
class="btn-check"
|
||||
id="meeting-timezone{{ id_suffix }}"
|
||||
onclick="ietf_timezone.use('{{ timezone }}')">
|
||||
<label class="btn btn-outline-primary" for="meeting-timezone{{ id_suffix }}">Meeting</label>
|
||||
name="tzradio{{ suffix }}"
|
||||
class="btn-check tz-select"
|
||||
id="local-timezone{{ suffix }}"
|
||||
value="local">
|
||||
<label class="btn btn-outline-primary" for="local-timezone{{ suffix }}">Local</label>
|
||||
<input type="radio"
|
||||
{% if timezone == "local" %}checked{% endif %}
|
||||
name="tzradio"
|
||||
class="btn-check"
|
||||
id="local-timezone{{ id_suffix }}"
|
||||
onclick="ietf_timezone.use('local')">
|
||||
<label class="btn btn-outline-primary" for="local-timezone{{ id_suffix }}">Local</label>
|
||||
<input type="radio"
|
||||
{% if timezone == "UTC" %}checked{% endif %}
|
||||
name="tzradio"
|
||||
class="btn-check"
|
||||
id="utc-timezone{{ id_suffix }}"
|
||||
onclick="ietf_timezone.use('UTC')">
|
||||
<label class="btn btn-outline-primary" for="utc-timezone{{ id_suffix }}">UTC</label>
|
||||
<label aria-label="Select timezone" class="visually-hidden" for="timezone-select{{ id_suffix }}"></label>
|
||||
<select id="timezone-select{{ id_suffix }}"
|
||||
class="tz-select select2-field form-select border-primary"
|
||||
data-max-entries="1" data-minimum-input-length="0"
|
||||
onchange="$('.tz-display input[name=tzradio]').prop('checked', false);">
|
||||
{# Avoid blank while loading. JavaScript replaces the option list after init. #}
|
||||
<option selected>
|
||||
{{ timezone }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
name="tzradio{{ suffix }}"
|
||||
class="btn-check tz-select"
|
||||
id="utc-timezone{{ suffix }}"
|
||||
value="UTC">
|
||||
<label class="btn btn-outline-primary" for="utc-timezone{{ suffix }}">UTC</label>
|
||||
{% if not minimal %}
|
||||
<label aria-label="Select timezone" class="visually-hidden" for="timezone-select{{ id_suffix }}"></label>
|
||||
<select id="timezone-select{{ suffix }}"
|
||||
class="tz-select select2-field form-select border-primary"
|
||||
data-max-entries="1" data-minimum-input-length="0">
|
||||
{# Avoid blank while loading. JavaScript replaces the option list after init. #}
|
||||
<option selected>
|
||||
{{ meeting_timezone }}
|
||||
</option>
|
||||
</select>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% include 'meeting/tz-display.html' with id_suffix="" timezone="local" %}
|
||||
{% include 'meeting/tz-display.html' with meeting_timezone=None only %}
|
||||
{% include 'meeting/agenda_filter.html' with filter_categories=filter_categories customize_button_text="Customize the meeting list..." only %}
|
||||
{% cache 600 upcoming-meetings entries.count %}
|
||||
{% if entries %}
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
<h3 class="my-3">No upcoming meetings</h3>
|
||||
{% endif %}
|
||||
{% endcache %}
|
||||
{% include 'meeting/tz-display.html' with id_suffix="-bottom" timezone="local" %}
|
||||
{% include 'meeting/tz-display.html' with id_suffix="-bottom" meeting_timezone=None only %}
|
||||
<div id="calendar">
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -142,8 +142,7 @@
|
|||
{% endif %}
|
||||
{% endfor %}];
|
||||
|
||||
$(document)
|
||||
.ready(function () {
|
||||
$(function () {
|
||||
// Init with best guess at local timezone.
|
||||
ietf_timezone.set_tz_change_callback(timezone_changed);
|
||||
ietf_timezone.initialize('local');
|
||||
|
|
|
|||
Loading…
Reference in a new issue