More agenda fixes.

 - Legacy-Id: 19674

Author: larseggert

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
         "no-multiple-empty-lines": ["error", { max: 2, maxEOF: 0 }],
         "quote-props": ["error", "as-needed"],
         "brace-style": ["error", "1tbs", { allowSingleLine: true }],
+        "semi": ["error", "always"],
     },
     env: {
         browser: true,

ietf/static/css/ietf.scss

@@ -6,6 +6,8 @@ $enable-negative-margins: true;
 // Don't add carets to dropdowns by default.
 // $enable-caret: false;
 
+$tooltip-max-width: 100%;
+
 // Only import what we need:
 // https://getbootstrap.com/docs/5.1/customize/optimize/
 

ietf/static/js/agenda_timezone.js

@@ -9,85 +9,105 @@
  This should be done before calling anything else in the file.
  */
 
-var meeting_timezone;
 var local_timezone = moment.tz.guess();
 
 // get_current_tz_cb must be overwritten using set_current_tz_cb
-window.get_current_tz_cb = function () {
+function get_current_tz_cb() {
     throw new Error('Tried to get current timezone before callback registered. Use set_current_tz_cb().')
 };
 
 // Initialize moments
 window.initialize_moments = function () {
-    var times=$('span.time')
-    $.each(times, function(i, item) {
-        item.start_ts = moment.unix(this.getAttribute("data-start-time")).utc();
-        item.end_ts = moment.unix(this.getAttribute("data-end-time")).utc();
+    var times = $('div.time')
+    $.each(times, function (i, item) {
+        item.start_ts = moment.unix(this.getAttribute("data-start-time"))
+            .utc();
+        item.end_ts = moment.unix(this.getAttribute("data-end-time"))
+            .utc();
         if (this.hasAttribute("weekday")) {
-            item.format=2;
+            item.format = 2;
         } else {
-            item.format=1;
+            item.format = 1;
         }
         if (this.hasAttribute("format")) {
             item.format = +this.getAttribute("format");
         }
     });
-    var times=$('[data-slot-start-ts]')
-    $.each(times, function(i, item) {
-        item.slot_start_ts = moment.unix(this.getAttribute("data-slot-start-ts")).utc();
-        item.slot_end_ts = moment.unix(this.getAttribute("data-slot-end-ts")).utc();
+    var times = $('[data-slot-start-ts]')
+    $.each(times, function (i, item) {
+        item.slot_start_ts = moment.unix(this.getAttribute("data-slot-start-ts"))
+            .utc();
+        item.slot_end_ts = moment.unix(this.getAttribute("data-slot-end-ts"))
+            .utc();
     });
 }
 
-window.format_time = function (t, tz, fmt) {
+function format_time(t, tz, fmt) {
     var out;
-    var mtz = meeting_timezone;
+    var mtz = window.meeting_timezone;
     if (mtz == "") {
         mtz = "UTC";
     }
-
     switch (fmt) {
         case 0:
-            out = t.tz(tz).format('dddd, ') + '<span class="d-none d-sm-block">' +
-                t.tz(tz).format('MMMM Do YYYY, ') + '</span>' +
-                t.tz(tz).format('HH:mm') + '<span class="d-none d-sm-block">' +
-                t.tz(tz).format(' Z z') + '</span>';
+            out = t.tz(tz)
+                .format('dddd, ') + '<span class="">' +
+                t.tz(tz)
+                .format('MMMM Do YYYY, ') + '</span>' +
+                t.tz(tz)
+                .format('HH:mm') + '<span class="">' +
+                t.tz(tz)
+                .format(' Z z') + '</span>';
             break;
         case 1:
             // Note, this code does not work if the meeting crosses the
             // year boundary.
-            out = t.tz(tz).format("HH:mm");
-            if (+t.tz(tz).dayOfYear() < +t.tz(mtz).dayOfYear()) {
+            out = t.tz(tz)
+                .format("HH:mm");
+            if (+t.tz(tz)
+                .dayOfYear() < +t.tz(mtz)
+                .dayOfYear()) {
                 out = out + " (-1)";
-            } else if (+t.tz(tz).dayOfYear() > +t.tz(mtz).dayOfYear()) {
+            } else if (+t.tz(tz)
+                .dayOfYear() > +t.tz(mtz)
+                .dayOfYear()) {
                 out = out + " (+1)";
             }
             break;
         case 2:
-            out = t.tz(mtz).format("dddd, ").toUpperCase() +
-                t.tz(tz).format("HH:mm");
-            if (+t.tz(tz).dayOfYear() < +t.tz(mtz).dayOfYear()) {
+            out = t.tz(mtz)
+                .format("dddd, ")
+                .toUpperCase() +
+                t.tz(tz)
+                .format("HH:mm");
+            if (+t.tz(tz)
+                .dayOfYear() < +t.tz(mtz)
+                .dayOfYear()) {
                 out = out + " (-1)";
-            } else if (+t.tz(tz).dayOfYear() > +t.tz(mtz).dayOfYear()) {
+            } else if (+t.tz(tz)
+                .dayOfYear() > +t.tz(mtz)
+                .dayOfYear()) {
                 out = out + " (+1)";
             }
             break;
         case 3:
-            out = t.utc().format("YYYY-MM-DD");
+            out = t.utc()
+                .format("YYYY-MM-DD");
             break;
         case 4:
-            out = t.tz(tz).format("YYYY-MM-DD HH:mm");
+            out = t.tz(tz)
+                .format("YYYY-MM-DD HH:mm");
             break;
         case 5:
-            out = t.tz(tz).format("HH:mm");
+            out = t.tz(tz)
+                .format("HH:mm");
             break;
     }
     return out;
 }
 
-
 // Format tooltip notice
-window.format_tooltip_notice = function (start, end) {
+function format_tooltip_notice(start, end) {
     var notice = "";
 
     if (end.isBefore()) {
@@ -102,110 +122,140 @@ window.format_tooltip_notice = function (start, end) {
 }
 
 // Format tooltip table
-window.format_tooltip_table = function (start, end) {
+function format_tooltip_table(start, end) {
     var current_timezone = get_current_tz_cb();
-    var out = '<table><tr><th>Timezone</th><th>Start</th><th>End</th></tr>';
-    if (meeting_timezone !== "") {
-        out += '<tr><td class="timehead">Meeting timezone:</td><td>' +
-            format_time(start, meeting_timezone, 0) + '</td><td>' +
-            format_time(end, meeting_timezone, 0) + '</td></tr>';
+    var out = '<div class="text-start"><table class="table text-light table-sm"><tr><th></th><th>Session start</th><th>Session end</th></tr>';
+    if (window.meeting_timezone !== "") {
+        out += '<tr><th class="timehead">Meeting timezone</th><td>' +
+            format_time(start, window.meeting_timezone, 0) + '</td><td>' +
+            format_time(end, window.meeting_timezone, 0) + '</td></tr>';
     }
-    out += '<tr><td class="timehead">Local timezone:</td><td>' +
+    out += '<tr><th class="timehead">Local timezone</th><td>' +
         format_time(start, local_timezone, 0) + '</td><td>' +
         format_time(end, local_timezone, 0) + '</td></tr>';
     if (current_timezone !== 'UTC') {
-        out += '<tr><td class="timehead">Selected Timezone:</td><td>' +
+        out += '<tr><th class="timehead">Selected Timezone</th><td>' +
             format_time(start, current_timezone, 0) + '</td><td>' +
             format_time(end, current_timezone, 0) + '</td></tr>';
     }
-    out += '<tr><td class="timehead">UTC:</td><td>' +
+    out += '<tr><th class="timehead">UTC</th><td>' +
         format_time(start, 'UTC', 0) + '</td><td>' +
         format_time(end, 'UTC', 0) + '</td></tr>';
-    out += '</table>' + format_tooltip_notice(start, end);
+    out += '</table>' + format_tooltip_notice(start, end) + '</div>';
     return out;
 }
 
 // Format tooltip for item
-window.format_tooltip = function (start, end) {
+function format_tooltip(start, end) {
     return '<div class="timetooltiptext">' +
         format_tooltip_table(start, end) +
         '</div>';
 }
 
 // Add tooltips
 window.add_tooltips = function () {
-    $('span.time').each(function () {
-        var tooltip = $(format_tooltip(this.start_ts, this.end_ts));
-        tooltip[0].start_ts = this.start_ts;
-        tooltip[0].end_ts = this.end_ts;
-        tooltip[0].ustart_ts = moment(this.start_ts).add(-2, 'hours');
-        tooltip[0].uend_ts = moment(this.end_ts).add(2, 'hours');
-        $(this).parent().append(tooltip);
-    });
+    $('div.time')
+        .each(function () {
+            var tooltip = $(format_tooltip(this.start_ts, this.end_ts));
+            tooltip[0].start_ts = this.start_ts;
+            tooltip[0].end_ts = this.end_ts;
+            tooltip[0].ustart_ts = moment(this.start_ts)
+                .add(-2, 'hours');
+            tooltip[0].uend_ts = moment(this.end_ts)
+                .add(2, 'hours');
+            $(this)
+                .closest("th, td")
+                .attr("data-bs-toggle", "tooltip")
+                .attr("title", $(tooltip)
+                    .html())
+                .tooltip({
+                    html: true,
+                    sanitize: false
+                });
+        });
 }
 
 // Update times on the agenda based on the selected timezone
 window.update_times = function (newtz) {
-    $('span.current-tz').html(newtz);
-    $('span.time').each(function () {
-        if (this.format == 4) {
-            var tz = this.start_ts.tz(newtz).format(" z");
-            if (this.start_ts.tz(newtz).dayOfYear() ==
-                this.end_ts.tz(newtz).dayOfYear()) {
-                $(this).html(format_time(this.start_ts, newtz, this.format) +
-                    '-' + format_time(this.end_ts, newtz, 5) + tz);
+    $('span.current-tz')
+        .html(newtz);
+    $('div.time')
+        .each(function () {
+            if (this.format == 4) {
+                var tz = this.start_ts.tz(newtz)
+                    .format(" z");
+                if (this.start_ts.tz(newtz)
+                    .dayOfYear() ==
+                    this.end_ts.tz(newtz)
+                    .dayOfYear()) {
+                    $(this)
+                        .html(format_time(this.start_ts, newtz, this.format) +
+                            '-' + format_time(this.end_ts, newtz, 5) + tz);
+                } else {
+                    $(this)
+                        .html(format_time(this.start_ts, newtz, this.format) +
+                            '-' +
+                            format_time(this.end_ts, newtz, this.format) + tz);
+                }
             } else {
-                $(this).html(format_time(this.start_ts, newtz, this.format) +
-                    '-' +
-                    format_time(this.end_ts, newtz, this.format) + tz);
+                $(this)
+                    .html(format_time(this.start_ts, newtz, this.format) + '-' +
+                        format_time(this.end_ts, newtz, this.format));
             }
-        } else {
-            $(this).html(format_time(this.start_ts, newtz, this.format) + '-' +
-                format_time(this.end_ts, newtz, this.format));
-        }
-    });
+        });
     update_tooltips_all();
     update_clock();
 }
 
 // Highlight ongoing based on the current time
 window.highlight_ongoing = function () {
-    $("div#now").remove("#now");
-    $('.ongoing').removeClass("ongoing");
-    var agenda_rows=$('[data-slot-start-ts]')
-    agenda_rows = agenda_rows.filter(function() {
-        return moment().isBetween(this.slot_start_ts, this.slot_end_ts);
+    $("div#now")
+        .remove("#now");
+    $('.table-warning')
+        .removeClass("table-warning");
+    var agenda_rows = $('[data-slot-start-ts]')
+    agenda_rows = agenda_rows.filter(function () {
+        return moment()
+            .isBetween(this.slot_start_ts, this.slot_end_ts);
     });
-    agenda_rows.addClass("ongoing");
-    agenda_rows.first().children("th, td").
+    agenda_rows.addClass("table-warning");
+    agenda_rows.first()
+        .children("th, td")
+        .
     prepend($('<div id="now" class="anchor-target"></div>'));
 }
 
 // Update tooltips
 window.update_tooltips = function () {
-    var tooltips=$('.timetooltiptext');
-    tooltips.filter(function() {
-        return moment().isBetween(this.ustart_ts, this.uend_ts);
-    }).each(function () {
-        $(this).html(format_tooltip_table(this.start_ts, this.end_ts));
-    });
+    var tooltips = $('.timetooltiptext');
+    tooltips.filter(function () {
+            return moment()
+                .isBetween(this.ustart_ts, this.uend_ts);
+        })
+        .each(function () {
+            $(this)
+                .html(format_tooltip_table(this.start_ts, this.end_ts));
+        });
 }
 
 // Update all tooltips
 window.update_tooltips_all = function () {
-    var tooltips=$('.timetooltiptext');
+    var tooltips = $('.timetooltiptext');
     tooltips.each(function () {
-        $(this).html(format_tooltip_table(this.start_ts, this.end_ts));
+        $(this)
+            .html(format_tooltip_table(this.start_ts, this.end_ts));
     });
 }
 
 // Update clock
 window.update_clock = function () {
-    $('#current-time').html(format_time(moment(), get_current_tz_cb(), 0));
+    $('#current-time')
+        .html(format_time(moment(), get_current_tz_cb(), 0));
 }
 
-$.urlParam = function(name) {
-    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
+$.urlParam = function (name) {
+    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
+        .exec(window.location.href);
     if (results == null) {
         return null;
     } else {
@@ -217,10 +267,10 @@ window.init_timers = function () {
     var fast_timer = 60000 / (speedup > 600 ? 600 : speedup);
     update_clock();
     highlight_ongoing();
-    setInterval(function() { update_clock(); }, fast_timer);
-    setInterval(function() { highlight_ongoing(); }, fast_timer);
-    setInterval(function() { update_tooltips(); }, fast_timer);
-    setInterval(function() { update_tooltips_all(); }, 3600000 / speedup);
+    setInterval(function () { update_clock(); }, fast_timer);
+    setInterval(function () { highlight_ongoing(); }, fast_timer);
+    setInterval(function () { update_tooltips(); }, fast_timer);
+    setInterval(function () { update_tooltips_all(); }, 3600000 / speedup);
 }
 
 // set method used to find current time zone