diff --git a/.eslintrc.json b/.eslintrc.json index 63ccb63768..871ad25f66 100644 --- a/.eslintrc.json +++ b/.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, diff --git a/frontend_tests/node_tests/hashchange.js b/frontend_tests/node_tests/hashchange.js index 074baff4b8..033c95dd2f 100644 --- a/frontend_tests/node_tests/hashchange.js +++ b/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); diff --git a/static/js/archive.js b/static/js/archive.js index 85c20ea468..cfef717c3a 100644 --- a/static/js/archive.js +++ b/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"); diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js index 5d714450f1..dcb64c980e 100644 --- a/static/js/bundles/app.js +++ b/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"; diff --git a/static/js/compose_fade.js b/static/js/compose_fade.js index e7821ba25b..01673c2b95 100644 --- a/static/js/compose_fade.js +++ b/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"; diff --git a/static/js/floating_recipient_bar.js b/static/js/floating_recipient_bar.js index 6f0e152f2c..343812ea59 100644 --- a/static/js/floating_recipient_bar.js +++ b/static/js/floating_recipient_bar.js @@ -1,6 +1,4 @@ -"use strict"; - -const rows = require("./rows"); +import * as rows from "./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) { - const message_row = exports.first_visible_message(elem); +export function get_date(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 () { - const items = exports.relevant_recipient_bars(); +export function update() { + 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; +} diff --git a/static/js/global.d.ts b/static/js/global.d.ts index 72d2dad331..8131a9cdd1 100644 --- a/static/js/global.d.ts +++ b/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; diff --git a/static/js/hashchange.js b/static/js/hashchange.js index d59ad891f6..dde7c162d3 100644 --- a/static/js/hashchange.js +++ b/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"); diff --git a/static/js/message_scroll.js b/static/js/message_scroll.js index 17b6589139..741348c493 100644 --- a/static/js/message_scroll.js +++ b/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");