js: Convert static/js/floating_recipient_bar.js to ES6 module.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

.eslintrc.json

@@ -145,7 +145,6 @@
                 "emoji_picker": false,
                 "favicon": false,
                 "flatpickr": false,
-                "floating_recipient_bar": false,
                 "gear_menu": false,
                 "hash_util": false,
                 "hashchange": false,

frontend_tests/node_tests/hashchange.js

@@ -25,7 +25,8 @@ const admin = set_global("admin", {});
 const drafts = {__esModule: true};
 rewiremock("../../static/js/drafts").with(drafts);
 set_global("favicon", {});
-const floating_recipient_bar = set_global("floating_recipient_bar", {});
+const floating_recipient_bar = {__esModule: true};
+rewiremock("../../static/js/floating_recipient_bar").with(floating_recipient_bar);
 const info_overlay = set_global("info_overlay", {});
 const message_viewport = {__esModule: true};
 rewiremock("../../static/js/message_viewport").with(message_viewport);

static/js/archive.js

@@ -3,6 +3,7 @@ import _ from "lodash";
 import render_archive_message_group from "../templates/archive_message_group.hbs";
 
 import * as color_data from "./color_data";
+import * as floating_recipient_bar from "./floating_recipient_bar";
 
 const {format, isSameDay} = require("date-fns");
 

static/js/bundles/app.js

@@ -26,7 +26,6 @@ import "../narrow";
 import "../reload";
 import "../compose_actions";
 import "../subs";
-import "../floating_recipient_bar";
 import "../lightbox";
 import "../ui_report";
 import "../message_scroll";

static/js/compose_fade.js

@@ -1,6 +1,7 @@
 import _ from "lodash";
 
 import * as compose_state from "./compose_state";
+import * as floating_recipient_bar from "./floating_recipient_bar";
 import * as message_viewport from "./message_viewport";
 import * as people from "./people";
 import * as rows from "./rows";

static/js/floating_recipient_bar.js

@@ -1,6 +1,4 @@
-"use strict";
+import * as rows from "./rows";
-
-const rows = require("./rows");
 
 let is_floating_recipient_bar_showing = false;
 
@@ -8,7 +6,7 @@ function top_offset(elem) {
     return elem.offset().top - $("#message_view_header").safeOuterHeight();
 }
 
-exports.first_visible_message = function (bar) {
+export function first_visible_message(bar) {
     // The first truly visible message would be computed using the
     // bottom of the floating recipient bar; but we want the date from
     // the first visible message were the floating recipient bar not
@@ -16,7 +14,7 @@ exports.first_visible_message = function (bar) {
     // overlaps the floating recipient bar's space (since you ).
 
     const messages = bar.children(".message_row");
-    const frb_bottom = exports.get_frb_bottom();
+    const frb_bottom = get_frb_bottom();
     const frb_top = frb_bottom - 25;
     let result;
 
@@ -77,10 +75,10 @@ exports.first_visible_message = function (bar) {
 
     // If none of the messages are visible, just take the last message.
     return $(messages[messages.length - 1]);
-};
+}
 
-exports.get_date = function (elem) {
+export function get_date(elem) {
-    const message_row = exports.first_visible_message(elem);
+    const message_row = first_visible_message(elem);
 
     if (!message_row || !message_row.length) {
         return undefined;
@@ -103,17 +101,17 @@ exports.get_date = function (elem) {
     const rendered_date = timerender.render_date(time, undefined, today)[0].outerHTML;
 
     return rendered_date;
-};
+}
 
-exports.get_frb_bottom = function () {
+export function get_frb_bottom() {
     const bar = $("#floating_recipient_bar");
     const bar_top = top_offset(bar);
     const bar_bottom = bar_top + bar.safeOuterHeight();
 
     return bar_bottom;
-};
+}
 
-exports.relevant_recipient_bars = function () {
+export function relevant_recipient_bars() {
     let elems = [];
 
     // This line of code does a reverse traversal
@@ -122,7 +120,7 @@ exports.relevant_recipient_bars = function () {
     // not exactly where we want.  The value we get
     // may be be too far up in the feed, but we can
     // deal with that later.
-    let first_elem = exports.candidate_recipient_bar();
+    let first_elem = candidate_recipient_bar();
 
     if (!first_elem) {
         first_elem = $(".focused_table").find(".recipient_row").first();
@@ -185,7 +183,7 @@ exports.relevant_recipient_bars = function () {
         let need_frb;
 
         if (i === 0) {
-            date_html = exports.get_date(elem);
+            date_html = get_date(elem);
             need_frb = top_offset(elem) < 0;
         } else {
             date_html = elem.find(".recipient_row_date").html();
@@ -221,9 +219,9 @@ exports.relevant_recipient_bars = function () {
     }
 
     return items;
-};
+}
 
-exports.candidate_recipient_bar = function () {
+export function candidate_recipient_bar() {
     // Find a recipient bar that is close to being onscreen
     // but above the "top".  This function is guaranteed to
     // return **some** recipient bar that is above the fold,
@@ -257,7 +255,7 @@ exports.candidate_recipient_bar = function () {
     }
 
     return undefined;
-};
+}
 
 function show_floating_recipient_bar() {
     if (!is_floating_recipient_bar_showing) {
@@ -300,35 +298,33 @@ function replace_floating_recipient_bar(source_info) {
     show_floating_recipient_bar();
 }
 
-exports.hide = function () {
+export function hide() {
     if (is_floating_recipient_bar_showing) {
         $("#floating_recipient_bar").css("visibility", "hidden");
         is_floating_recipient_bar_showing = false;
     }
-};
+}
 
-exports.de_clutter_dates = function (items) {
+export function de_clutter_dates(items) {
     for (const item of items) {
         item.elem.find(".recipient_row_date").toggle(item.show_date);
     }
-};
+}
 
-exports.update = function () {
+export function update() {
-    const items = exports.relevant_recipient_bars();
+    const items = relevant_recipient_bars();
 
     if (!items || items.length === 0) {
-        exports.hide();
+        hide();
         return;
     }
 
-    exports.de_clutter_dates(items);
+    de_clutter_dates(items);
 
     if (!items[0].need_frb) {
-        exports.hide();
+        hide();
         return;
     }
 
     replace_floating_recipient_bar(items[0]);
-};
+}
-
-window.floating_recipient_bar = exports;

static/js/global.d.ts

@@ -22,7 +22,6 @@ declare let current_msg_list: any;
 declare let emoji: any;
 declare let emoji_picker: any;
 declare let favicon: any;
-declare let floating_recipient_bar: any;
 declare let gear_menu: any;
 declare let hashchange: any;
 declare let hash_util: any;

static/js/hashchange.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const drafts = require("./drafts");
+const floating_recipient_bar = require("./floating_recipient_bar");
 const invite = require("./invite");
 const message_viewport = require("./message_viewport");
 const top_left_corner = require("./top_left_corner");

static/js/message_scroll.js

@@ -2,6 +2,7 @@
 
 const _ = require("lodash");
 
+const floating_recipient_bar = require("./floating_recipient_bar");
 const loading = require("./loading");
 const message_viewport = require("./message_viewport");
 const narrow_state = require("./narrow_state");