timestamp: Move tooltip date, time rendering logic to tippyjs.js.

Makes use of `onShow` for all calculations and rendering
of date, time for tooltip.

frontend_tests/node_tests/timerender.js

@@ -219,59 +219,35 @@ run_test("absolute_time_24_hour", () => {
     assert.equal(actual, expected);
 });
 
-function test_set_full_datetime(message, expected_tooltip_content) {
-    const time_element = $("<span/>");
-    const attrs = {};
+run_test("get_full_datetime", () => {
+    const time = new Date(1495141973000); // 2017/5/18 9:12:53 PM (UTC+0)
+    let expected_date = "Thursday, May 18, 2017";
+    let expected_time = "9:12:53 PM Coordinated Universal Time";
+    assert.deepEqual(timerender.get_full_datetime(time), {
+        date: expected_date,
+        time: expected_time,
+    });
 
-    time_element.attr = (name, val = null) => {
-        if (val === null) {
-            return attrs[name];
-        }
-        attrs[name] = val;
-        return val;
-    };
-
-    timerender.set_full_datetime(message, time_element);
-    assert.equal(attrs["data-tippy-content"], expected_tooltip_content);
-
-    // Removing `data-tippy-content` and re-running should
-    // set `data-tippy-content` value again.
-    delete attrs["data-tippy-content"];
-    timerender.set_full_datetime(message, time_element);
-    assert.equal(attrs["data-tippy-content"], expected_tooltip_content);
-}
-
-run_test("set_full_datetime", () => {
-    let message = {
-        timestamp: 1495091573, // 2017/5/18 7:12:53 AM (UTC+0)
-    };
-
-    // The formatting of the string time.toLocale(Date|Time)String() on Node
-    // might differ from the browser.
-    let time = new Date(message.timestamp * 1000);
-    let expected = `${time.toLocaleDateString("en", {
-        weekday: "long",
-        month: "long",
-        day: "numeric",
-        year: "numeric",
-    })}<br/>7:12:53 AM Coordinated Universal Time`;
-    test_set_full_datetime(message, expected);
-
-    // Check year is hidden if current year.
-    time = new Date();
-    message = {
-        timestamp: Math.floor(time.getTime() / 1000),
-    };
-    // Also check 24hour time format is shown.
+    // test 24 hour time setting.
     page_params.twenty_four_hour_time = true;
-    const date_string = time.toLocaleDateString("en", {
+    expected_time = "21:12:53 Coordinated Universal Time";
+    assert.deepEqual(timerender.get_full_datetime(time), {
+        date: expected_date,
+        time: expected_time,
+    });
+
+    // Test year not shown if current.
+    const current_year = new Date().getFullYear();
+    time.setFullYear(current_year);
+    expected_date = time.toLocaleDateString(undefined, {
         weekday: "long",
         month: "long",
         day: "numeric",
     });
-    const time_string = time.toLocaleString("en", {timeStyle: "full", hourCycle: "h24"});
-    expected = `${date_string}<br/>${time_string}`;
-    test_set_full_datetime(message, expected);
+    assert.deepEqual(timerender.get_full_datetime(time), {
+        date: expected_date,
+        time: expected_time,
+    });
 });
 
 run_test("last_seen_status_from_date", () => {

static/js/timerender.js

@@ -325,20 +325,3 @@ export function get_full_datetime(time) {
         time: time.toLocaleTimeString(page_params.request_language, time_string_options),
     };
 }
-
-function render_tippy_tooltip(message, time_elem) {
-    time_elem.attr("data-tippy-content", message.full_date_str + "<br/>" + message.full_time_str);
-}
-
-// Date.toLocaleDateString and Date.toLocaleTimeString are
-// expensive, so we delay running the following code until we need
-// the full date and time strings.
-export const set_full_datetime = function timerender_set_full_datetime(message, time_elem) {
-    const time = new Date(message.timestamp * 1000);
-    const full_datetime = get_full_datetime(time);
-
-    message.full_date_str = full_datetime.date;
-    message.full_time_str = full_datetime.time;
-
-    render_tippy_tooltip(message, time_elem);
-};

static/js/tippyjs.js

@@ -1,8 +1,10 @@
 import $ from "jquery";
 import tippy, {delegate} from "tippy.js";
 
+import * as message_lists from "./message_lists";
 import * as reactions from "./reactions";
 import * as rows from "./rows";
+import * as timerender from "./timerender";
 
 // We override the defaults set by tippy library here,
 // so make sure to check this too after checking tippyjs
@@ -151,6 +153,14 @@ export function initialize() {
         allowHTML: true,
         placement: "top",
         appendTo: () => document.body,
+        onShow(instance) {
+            const time_elem = $(instance.reference);
+            const row = time_elem.closest(".message_row");
+            const message = message_lists.current.get(rows.id(row));
+            const time = new Date(message.timestamp * 1000);
+            const full_datetime = timerender.get_full_datetime(time);
+            instance.setContent(full_datetime.date + "<br/>" + full_datetime.time);
+        },
         onHidden(instance) {
             instance.destroy();
         },

static/js/ui_init.js

@@ -327,13 +327,6 @@ export function initialize_kitchen_sink_stuff() {
         }
     });
 
-    $("#main_div").on("mouseenter", ".message_time", (e) => {
-        const time_elem = $(e.target);
-        const row = time_elem.closest(".message_row");
-        const message = message_lists.current.get(rows.id(row));
-        timerender.set_full_datetime(message, time_elem);
-    });
-
     $("body").on("mouseover", ".message_edit_content", function () {
         $(this).closest(".message_row").find(".copy_message").show();
     });