Skip to content

Commit eab4705

Browse files
jennifer-richardsjennifer-richards
authored
fix: debug time zone widget and add to agenda RH nav panel (ietf-tools#3792)
1 parent fd588d6 commit eab4705

File tree

4 files changed

+87
-60
lines changed

4 files changed

+87
-60
lines changed

‎ietf/static/js/timezone.js‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
// Copyright The IETF Trust 2021, All Rights Reserved
2-
1+
// Copyright The IETF Trust 2021, All Rights Reserved
2+
/* global moment */
33
/*
44
Timezone selection handling. Relies on the moment.js library.
55
@@ -8,21 +8,16 @@
88
names. Time zone can be changed via the select input or by calling the use() method with
99
the name of a time zone (or 'local' to guess the user's local timezone).
1010
*/
11-
window.ietf_timezone; // public interface
12-
1311
(function () {
1412
'use strict';
1513
// Callback for timezone change - called after current_timezone is updated
16-
var timezone_change_callback;
17-
var current_timezone;
14+
let timezone_change_callback;
15+
let current_timezone;
16+
let tz_radios;
17+
let tz_selects;
1818

1919
// Select timezone to use. Arg is name of a timezone or 'local' to guess local tz.
2020
function use_timezone(newtz) {
21-
// Guess local timezone if necessary
22-
if (newtz.toLowerCase() === 'local') {
23-
newtz = moment.tz.guess();
24-
}
25-
2621
if (current_timezone !== newtz) {
2722
current_timezone = newtz;
2823
// Update values of tz-select inputs but do not trigger change event
@@ -31,40 +26,52 @@ window.ietf_timezone; // public interface
3126
if (timezone_change_callback) {
3227
timezone_change_callback(newtz);
3328
}
29+
tz_radios.filter(`[value="${newtz}"]`).prop('checked', true);
30+
tz_radios.filter(`[value!="${newtz}"]`).prop('checked', false);
31+
tz_selects.val(newtz);
32+
tz_selects.trigger('change.select2'); // notify only select2 of change to avoid change event storm
3433
}
3534
}
3635

36+
function handle_change_event(evt) {
37+
const newtz = evt.target.value;
38+
use_timezone(newtz); // use the requested timezone
39+
}
40+
3741
/* Initialize timezone system
3842
*
3943
* This will set the timezone to the value of 'current'. Set up the tz_change callback
4044
* before initializing.
4145
*/
4246
function timezone_init(current) {
4347
var tz_names = moment.tz.names();
44-
var select = $('select.tz-select');
45-
46-
select.empty();
48+
if (current === 'local') {
49+
current = moment.tz.guess();
50+
}
51+
tz_selects = $('select.tz-select');
52+
tz_selects.empty();
4753
$.each(tz_names, function (i, item) {
48-
select.append($('<option/>', {
54+
tz_selects.append($('<option/>', {
4955
selected: current === item,
5056
html: item,
5157
value: item
5258
}));
5359
});
54-
select.on("change", function () {
55-
use_timezone(this.value);
56-
});
60+
tz_radios = $('input.tz-select[type="radio"]');
61+
tz_radios.filter('[value="local"]').prop('value', moment.tz.guess());
62+
tz_radios.on('change', handle_change_event);
63+
tz_selects.on('change', handle_change_event);
5764
/* When navigating back/forward, the browser may change the select input's
5865
* value after the window load event. It does not fire the change event on
5966
* the input when it does this. The pageshow event occurs after such an update,
6067
* so trigger the change event ourselves to be sure the UI stays consistent
6168
* with the timezone select input. */
62-
window.addEventListener('pageshow', function () { select.trigger("change"); });
69+
window.addEventListener('pageshow', function () { tz_selects.trigger("change"); });
6370
use_timezone(current);
6471
}
6572

6673
// Expose public interface
67-
ietf_timezone = {
74+
window.ietf_timezone = {
6875
get_current_tz: function () { return current_timezone; },
6976
initialize: timezone_init,
7077
set_tz_change_callback: function (cb) { timezone_change_callback = cb; },

‎ietf/templates/meeting/agenda.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,17 @@
2525
{% endif %}
2626
{# the contents of #extra-nav will be moved into the RH nav panel #}
2727
<div id="extra-nav" class="d-none">
28-
<a class="nav-link now-link" href="#">Current session</a>
28+
<div class="d-flex flex-column">
29+
{% if now.date <= schedule.meeting.end_date %}
30+
<a class="nav-link now-link" href="#">Current session</a>
31+
{% endif %}
32+
<div class="px-3">
33+
Showing <span class="current-tz">{{ timezone }}</span> time
34+
</div>
35+
<div class="px-3 w-100">
36+
{% include 'meeting/tz-display.html' with id_suffix="-rh" meeting_timezone=timezone minimal=True only %}
37+
</div>
38+
</div>
2939
</div>
3040
{# cache this part -- it takes 3-6 seconds to generate #}
3141
{% load cache %}
@@ -47,7 +57,7 @@ <h2>
4757
{{ schedule.meeting.agenda_info_note|removetags:"h1"|safe }}
4858
</p>
4959
{% endif %}
50-
{% include 'meeting/tz-display.html' with id_suffix="" timezone=timezone %}
60+
{% include 'meeting/tz-display.html' with meeting_timezone=timezone only %}
5161
{% include "meeting/agenda_filter.html" with filter_categories=filter_categories customize_button_text="Personalize the agenda view..." always_show=personalize %}
5262
{% include "meeting/agenda_personalize_buttonlist.html" with meeting=schedule.meeting only %}
5363
<div class="input-group mb-3">
@@ -321,8 +331,7 @@ <h2 class="mt-3">
321331
{% endcache %}
322332
{% endblock %}
323333
{% block js %}
324-
<script src="{% static 'ietf/js/agenda_filter.js' %}">
325-
</script>
334+
<script src="{% static 'ietf/js/agenda_filter.js' %}"></script>
326335
<script>
327336
// Update the agenda display with specified filters
328337
function update_agenda_display(filter_params) {

‎ietf/templates/meeting/tz-display.html‎

Lines changed: 44 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,48 @@
1+
{% comment %}
2+
Include this to display a timezone select widget. Must also include timezone.js as a script.
3+
{% import "meeting/tz-display.html" with meeting_timezone="America/Halifax" id_suffix="" minimal=False only %}
4+
5+
Must provide the meeting_timezone option, which is the timezone to be used when the "Meeting" radio is
6+
selected. If id_suffix is given, it is appended to the element IDs and radio input names to differentiate
7+
multiple instances of the widget. If minimal is True, only the Meeting/Local/UTC radios are shown and no
8+
arbitrary timezone select input is included in the widget.
9+
10+
As long as id_suffix is different, should allow for as many copies of the widget on a page as you'd like.
11+
{% endcomment %}
112
{% load origin %}
213
{% origin %}
3-
<div class="tz-display input-group my-3">
4-
<label class="input-group-text border-primary bg-white fw-bold">Time zone:</label>
14+
{% firstof id_suffix "" as suffix %}
15+
<div class="tz-display {% if minimal %}btn-group{% else %}input-group{% endif %} my-3">
16+
{% if not minimal %}<label class="input-group-text border-primary bg-white fw-bold">Time zone:</label>{% endif %}
17+
{% if meeting_timezone is not None %}
18+
<input type="radio"
19+
name="tzradio{{ suffix }}"
20+
class="btn-check tz-select"
21+
id="meeting-timezone{{ suffix }}"
22+
value="{{ meeting_timezone }}">
23+
<label class="btn btn-outline-primary" for="meeting-timezone{{ suffix }}">Meeting</label>
24+
{% endif %}
525
<input type="radio"
6-
{% if timezone == "meeting" %}checked{% endif %}
7-
name="tzradio"
8-
class="btn-check"
9-
id="meeting-timezone{{ id_suffix }}"
10-
onclick="ietf_timezone.use('{{ timezone }}')">
11-
<label class="btn btn-outline-primary" for="meeting-timezone{{ id_suffix }}">Meeting</label>
26+
name="tzradio{{ suffix }}"
27+
class="btn-check tz-select"
28+
id="local-timezone{{ suffix }}"
29+
value="local">
30+
<label class="btn btn-outline-primary" for="local-timezone{{ suffix }}">Local</label>
1231
<input type="radio"
13-
{% if timezone == "local" %}checked{% endif %}
14-
name="tzradio"
15-
class="btn-check"
16-
id="local-timezone{{ id_suffix }}"
17-
onclick="ietf_timezone.use('local')">
18-
<label class="btn btn-outline-primary" for="local-timezone{{ id_suffix }}">Local</label>
19-
<input type="radio"
20-
{% if timezone == "UTC" %}checked{% endif %}
21-
name="tzradio"
22-
class="btn-check"
23-
id="utc-timezone{{ id_suffix }}"
24-
onclick="ietf_timezone.use('UTC')">
25-
<label class="btn btn-outline-primary" for="utc-timezone{{ id_suffix }}">UTC</label>
26-
<label aria-label="Select timezone" class="visually-hidden" for="timezone-select{{ id_suffix }}"></label>
27-
<select id="timezone-select{{ id_suffix }}"
28-
class="tz-select select2-field form-select border-primary"
29-
data-max-entries="1" data-minimum-input-length="0"
30-
onchange="$('.tz-display input[name=tzradio]').prop('checked', false);">
31-
{# Avoid blank while loading. JavaScript replaces the option list after init. #}
32-
<option selected>
33-
{{ timezone }}
34-
</option>
35-
</select>
36-
</div>
32+
name="tzradio{{ suffix }}"
33+
class="btn-check tz-select"
34+
id="utc-timezone{{ suffix }}"
35+
value="UTC">
36+
<label class="btn btn-outline-primary" for="utc-timezone{{ suffix }}">UTC</label>
37+
{% if not minimal %}
38+
<label aria-label="Select timezone" class="visually-hidden" for="timezone-select{{ id_suffix }}"></label>
39+
<select id="timezone-select{{ suffix }}"
40+
class="tz-select select2-field form-select border-primary"
41+
data-max-entries="1" data-minimum-input-length="0">
42+
{# Avoid blank while loading. JavaScript replaces the option list after init. #}
43+
<option selected>
44+
{{ meeting_timezone }}
45+
</option>
46+
</select>
47+
{% endif %}
48+
</div>

‎ietf/templates/meeting/upcoming.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ <h1>Upcoming Meetings</h1>
2929
{% endfor %}
3030
</div>
3131
{% endif %}
32-
{% include 'meeting/tz-display.html' with id_suffix="" timezone="local" %}
32+
{% include 'meeting/tz-display.html' with meeting_timezone=None only %}
3333
{% include 'meeting/agenda_filter.html' with filter_categories=filter_categories customize_button_text="Customize the meeting list..." only %}
3434
{% cache 600 upcoming-meetings entries.count %}
3535
{% if entries %}
@@ -104,7 +104,7 @@ <h1>Upcoming Meetings</h1>
104104
<h3 class="my-3">No upcoming meetings</h3>
105105
{% endif %}
106106
{% endcache %}
107-
{% include 'meeting/tz-display.html' with id_suffix="-bottom" timezone="local" %}
107+
{% include 'meeting/tz-display.html' with id_suffix="-bottom" meeting_timezone=None only %}
108108
<div id="calendar">
109109
</div>
110110
{% endblock %}
@@ -142,8 +142,7 @@ <h3 class="my-3">No upcoming meetings</h3>
142142
{% endif %}
143143
{% endfor %}];
144144

145-
$(document)
146-
.ready(function () {
145+
$(function () {
147146
// Init with best guess at local timezone.
148147
ietf_timezone.set_tz_change_callback(timezone_changed);
149148
ietf_timezone.initialize('local');

0 commit comments

Comments
 (0)