From 8dbaf2d680465a9bd2fade3dbd03510a95ec2836 Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Sun, 28 Feb 2021 12:32:47 -0800 Subject: [PATCH] js: Convert static/js/subs.js to ES6 module. Signed-off-by: Anders Kaseorg --- .eslintrc.json | 1 - frontend_tests/node_tests/compose.js | 3 +- frontend_tests/node_tests/dispatch_subs.js | 4 +- frontend_tests/node_tests/hashchange.js | 3 +- frontend_tests/node_tests/hotkey.js | 4 +- frontend_tests/node_tests/stream_edit.js | 1 - frontend_tests/node_tests/stream_events.js | 6 +- frontend_tests/node_tests/ui_init.js | 2 +- static/js/bundles/app.js | 1 - static/js/compose.js | 1 + static/js/global.d.ts | 1 - static/js/hashchange.js | 1 + static/js/hotkey.js | 1 + static/js/server_events_dispatch.js | 1 + static/js/stream_color.js | 1 + static/js/stream_create.js | 1 + static/js/stream_edit.js | 1 + static/js/stream_events.js | 1 + static/js/stream_popover.js | 1 + static/js/stream_ui_updates.js | 1 + static/js/subs.js | 330 ++++++++++----------- static/js/ui_init.js | 1 + 22 files changed, 190 insertions(+), 177 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 1da06d8096..7ae30cbe52 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -145,7 +145,6 @@ "realm_night_logo": false, "settings_profile_fields": false, "StripeCheckout": false, - "subs": false, "ui": false, "ui_init": false, "zxcvbn": false diff --git a/frontend_tests/node_tests/compose.js b/frontend_tests/node_tests/compose.js index c397eea174..efef4b80e1 100644 --- a/frontend_tests/node_tests/compose.js +++ b/frontend_tests/node_tests/compose.js @@ -85,7 +85,8 @@ rewiremock("../../static/js/loading").with(loading); const page_params = set_global("page_params", {}); const resize = {__esModule: true}; rewiremock("../../static/js/resize").with(resize); -const subs = set_global("subs", {}); +const subs = {__esModule: true}; +rewiremock("../../static/js/subs").with(subs); const ui_util = {__esModule: true}; rewiremock("../../static/js/ui_util").with(ui_util); diff --git a/frontend_tests/node_tests/dispatch_subs.js b/frontend_tests/node_tests/dispatch_subs.js index bf1ad7fbdc..b803072884 100644 --- a/frontend_tests/node_tests/dispatch_subs.js +++ b/frontend_tests/node_tests/dispatch_subs.js @@ -17,7 +17,9 @@ const compose_fade = {__esModule: true}; rewiremock("../../static/js/compose_fade").with(compose_fade); const stream_events = {__esModule: true}; rewiremock("../../static/js/stream_events").with(stream_events); -const subs = set_global("subs", {}); +const subs = {__esModule: true}; + +rewiremock("../../static/js/subs").with(subs); rewiremock.enable(); diff --git a/frontend_tests/node_tests/hashchange.js b/frontend_tests/node_tests/hashchange.js index 1d26eb535d..efc9061958 100644 --- a/frontend_tests/node_tests/hashchange.js +++ b/frontend_tests/node_tests/hashchange.js @@ -38,7 +38,8 @@ const overlays = {__esModule: true}; rewiremock("../../static/js/overlays").with(overlays); const settings = {__esModule: true}; rewiremock("../../static/js/settings").with(settings); -const subs = set_global("subs", {}); +const subs = {__esModule: true}; +rewiremock("../../static/js/subs").with(subs); const ui_util = {__esModule: true}; rewiremock("../../static/js/ui_util").with(ui_util); rewiremock("../../static/js/top_left_corner").with({ diff --git a/frontend_tests/node_tests/hotkey.js b/frontend_tests/node_tests/hotkey.js index 9c41943d71..38b5ea8c3a 100644 --- a/frontend_tests/node_tests/hotkey.js +++ b/frontend_tests/node_tests/hotkey.js @@ -104,7 +104,9 @@ const search = {__esModule: true}; rewiremock("../../static/js/search").with(search); const stream_list = {__esModule: true}; rewiremock("../../static/js/stream_list").with(stream_list); -const subs = set_global("subs", {}); +const subs = {__esModule: true}; + +rewiremock("../../static/js/subs").with(subs); set_global("current_msg_list", { empty() { diff --git a/frontend_tests/node_tests/stream_edit.js b/frontend_tests/node_tests/stream_edit.js index 03528e1ba1..3fd8ea5767 100644 --- a/frontend_tests/node_tests/stream_edit.js +++ b/frontend_tests/node_tests/stream_edit.js @@ -37,7 +37,6 @@ rewiremock.enable(); const peer_data = zrequire("peer_data"); const people = zrequire("people"); -zrequire("subs"); const stream_edit = zrequire("stream_edit"); const stream_data = zrequire("stream_data"); const stream_pill = zrequire("stream_pill"); diff --git a/frontend_tests/node_tests/stream_events.js b/frontend_tests/node_tests/stream_events.js index e4ee48c2c6..a71744587d 100644 --- a/frontend_tests/node_tests/stream_events.js +++ b/frontend_tests/node_tests/stream_events.js @@ -39,7 +39,11 @@ rewiremock("../../static/js/message_list").with({ }, }); -const subs = set_global("subs", {update_settings_for_subscribed: noop}); +const subs = { + __esModule: true, + update_settings_for_subscribed: noop, +}; +rewiremock("../../static/js/subs").with(subs); rewiremock("../../static/js/overlays").with({streams_open: () => true}); rewiremock.enable(); diff --git a/frontend_tests/node_tests/ui_init.js b/frontend_tests/node_tests/ui_init.js index 6c42faefa9..5ee2360036 100644 --- a/frontend_tests/node_tests/ui_init.js +++ b/frontend_tests/node_tests/ui_init.js @@ -94,7 +94,7 @@ rewiremock("../../static/js/server_events").with(server_events); rewiremock("../../static/js/settings_sections").with({initialize() {}}); rewiremock("../../static/js/settings_panel_menu").with({initialize() {}}); rewiremock("../../static/js/settings_toggle").with({initialize() {}}); -set_global("subs", {initialize() {}}); +rewiremock("../../static/js/subs").with({initialize() {}}); rewiremock("../../static/js/timerender").with({initialize() {}}); const ui = set_global("ui", {initialize() {}}); rewiremock("../../static/js/unread_ui").with({initialize() {}}); diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js index ee30894d22..c8d624f86f 100644 --- a/static/js/bundles/app.js +++ b/static/js/bundles/app.js @@ -18,7 +18,6 @@ import "../fold_dict"; import "../setup"; import "../message_list"; import "../reload"; -import "../subs"; import "../ui"; import "../composebox_typeahead"; import "../hotkey"; diff --git a/static/js/compose.js b/static/js/compose.js index fccc7fb627..a2bacf002e 100644 --- a/static/js/compose.js +++ b/static/js/compose.js @@ -30,6 +30,7 @@ import * as server_events from "./server_events"; import * as settings_config from "./settings_config"; import * as stream_data from "./stream_data"; import * as stream_edit from "./stream_edit"; +import * as subs from "./subs"; import * as transmit from "./transmit"; import * as ui_report from "./ui_report"; import * as upload from "./upload"; diff --git a/static/js/global.d.ts b/static/js/global.d.ts index fbb1f8a183..f1a520932d 100644 --- a/static/js/global.d.ts +++ b/static/js/global.d.ts @@ -15,7 +15,6 @@ declare let message_events: any; declare let page_params: any; declare let pointer: any; declare let settings_profile_fields: any; -declare let subs: any; declare let ui: any; declare let zulip_test: any; diff --git a/static/js/hashchange.js b/static/js/hashchange.js index aeb2013b58..4fdc4baabf 100644 --- a/static/js/hashchange.js +++ b/static/js/hashchange.js @@ -12,6 +12,7 @@ import * as recent_topics from "./recent_topics"; import * as search from "./search"; import * as settings from "./settings"; import * as settings_panel_menu from "./settings_panel_menu"; +import * as subs from "./subs"; import * as top_left_corner from "./top_left_corner"; import * as ui_util from "./ui_util"; diff --git a/static/js/hotkey.js b/static/js/hotkey.js index 40dc5121ef..8e9f45562f 100644 --- a/static/js/hotkey.js +++ b/static/js/hotkey.js @@ -28,6 +28,7 @@ import * as recent_topics from "./recent_topics"; import * as search from "./search"; import * as stream_list from "./stream_list"; import * as stream_popover from "./stream_popover"; +import * as subs from "./subs"; import * as topic_zoom from "./topic_zoom"; function do_narrow_action(action) { diff --git a/static/js/server_events_dispatch.js b/static/js/server_events_dispatch.js index f66d1020ea..c1fd55f5d4 100644 --- a/static/js/server_events_dispatch.js +++ b/static/js/server_events_dispatch.js @@ -45,6 +45,7 @@ import * as stream_events from "./stream_events"; import * as stream_list from "./stream_list"; import * as stream_topic_history from "./stream_topic_history"; import * as submessage from "./submessage"; +import * as subs from "./subs"; import * as typing_events from "./typing_events"; import * as unread_ops from "./unread_ops"; import * as user_events from "./user_events"; diff --git a/static/js/stream_color.js b/static/js/stream_color.js index 8e84dd6cad..517e455e38 100644 --- a/static/js/stream_color.js +++ b/static/js/stream_color.js @@ -2,6 +2,7 @@ import _ from "lodash"; import * as colorspace from "./colorspace"; import * as message_view_header from "./message_view_header"; +import * as subs from "./subs"; export const default_color = "#c2c2c2"; diff --git a/static/js/stream_create.js b/static/js/stream_create.js index 489e786f5f..74603f70ee 100644 --- a/static/js/stream_create.js +++ b/static/js/stream_create.js @@ -7,6 +7,7 @@ import * as loading from "./loading"; import * as peer_data from "./peer_data"; import * as people from "./people"; import * as stream_data from "./stream_data"; +import * as subs from "./subs"; import * as ui_report from "./ui_report"; let created_stream; diff --git a/static/js/stream_edit.js b/static/js/stream_edit.js index 5e6274d1da..8d1ae744c1 100644 --- a/static/js/stream_edit.js +++ b/static/js/stream_edit.js @@ -21,6 +21,7 @@ import * as stream_color from "./stream_color"; import * as stream_data from "./stream_data"; import * as stream_pill from "./stream_pill"; import * as stream_ui_updates from "./stream_ui_updates"; +import * as subs from "./subs"; import * as ui_report from "./ui_report"; import * as user_pill from "./user_pill"; import * as util from "./util"; diff --git a/static/js/stream_events.js b/static/js/stream_events.js index b26902e33b..74585d335c 100644 --- a/static/js/stream_events.js +++ b/static/js/stream_events.js @@ -11,6 +11,7 @@ import * as stream_color from "./stream_color"; import * as stream_data from "./stream_data"; import * as stream_list from "./stream_list"; import * as stream_muting from "./stream_muting"; +import * as subs from "./subs"; // In theory, this function should apply the account-level defaults, // however, they are only called after a manual override, so diff --git a/static/js/stream_popover.js b/static/js/stream_popover.js index bc3061a480..208eb98f41 100644 --- a/static/js/stream_popover.js +++ b/static/js/stream_popover.js @@ -18,6 +18,7 @@ import * as popovers from "./popovers"; import * as resize from "./resize"; import * as stream_color from "./stream_color"; import * as stream_data from "./stream_data"; +import * as subs from "./subs"; import * as ui_util from "./ui_util"; import * as unread_ops from "./unread_ops"; diff --git a/static/js/stream_ui_updates.js b/static/js/stream_ui_updates.js index 7e0d2f40b4..87e695d704 100644 --- a/static/js/stream_ui_updates.js +++ b/static/js/stream_ui_updates.js @@ -4,6 +4,7 @@ import * as ListWidget from "./list_widget"; import * as peer_data from "./peer_data"; import * as stream_data from "./stream_data"; import * as stream_edit from "./stream_edit"; +import * as subs from "./subs"; export function initialize_disable_btn_hint_popover( btn_wrapper, diff --git a/static/js/subs.js b/static/js/subs.js index 5e606b4b50..d2f1f72e7c 100644 --- a/static/js/subs.js +++ b/static/js/subs.js @@ -1,35 +1,33 @@ -"use strict"; +import _ from "lodash"; -const _ = require("lodash"); +import render_subscription from "../templates/subscription.hbs"; +import render_subscription_settings from "../templates/subscription_settings.hbs"; +import render_subscription_table_body from "../templates/subscription_table_body.hbs"; +import render_subscriptions from "../templates/subscriptions.hbs"; -const render_subscription = require("../templates/subscription.hbs"); -const render_subscription_settings = require("../templates/subscription_settings.hbs"); -const render_subscription_table_body = require("../templates/subscription_table_body.hbs"); -const render_subscriptions = require("../templates/subscriptions.hbs"); +import * as channel from "./channel"; +import * as components from "./components"; +import * as compose_state from "./compose_state"; +import * as hash_util from "./hash_util"; +import * as hashchange from "./hashchange"; +import * as loading from "./loading"; +import * as message_live_update from "./message_live_update"; +import * as message_view_header from "./message_view_header"; +import * as overlays from "./overlays"; +import * as people from "./people"; +import * as scroll_util from "./scroll_util"; +import * as search_util from "./search_util"; +import * as stream_create from "./stream_create"; +import * as stream_data from "./stream_data"; +import * as stream_edit from "./stream_edit"; +import * as stream_list from "./stream_list"; +import * as stream_muting from "./stream_muting"; +import * as stream_ui_updates from "./stream_ui_updates"; +import * as typeahead_helper from "./typeahead_helper"; +import * as ui_report from "./ui_report"; +import * as util from "./util"; -const channel = require("./channel"); -const components = require("./components"); -const compose_state = require("./compose_state"); -const hash_util = require("./hash_util"); -const hashchange = require("./hashchange"); -const loading = require("./loading"); -const message_live_update = require("./message_live_update"); -const message_view_header = require("./message_view_header"); -const overlays = require("./overlays"); -const people = require("./people"); -const scroll_util = require("./scroll_util"); -const search_util = require("./search_util"); -const stream_create = require("./stream_create"); -const stream_data = require("./stream_data"); -const stream_edit = require("./stream_edit"); -const stream_list = require("./stream_list"); -const stream_muting = require("./stream_muting"); -const stream_ui_updates = require("./stream_ui_updates"); -const typeahead_helper = require("./typeahead_helper"); -const ui_report = require("./ui_report"); -const util = require("./util"); - -exports.show_subs_pane = { +export const show_subs_pane = { nothing_selected() { $(".stream-info-title, .settings, #stream-creation").hide(); $("#stream_settings_title, .nothing-selected").show(); @@ -44,16 +42,16 @@ exports.show_subs_pane = { }, }; -exports.row_for_stream_id = function (stream_id) { +export function row_for_stream_id(stream_id) { return $(`.stream-row[data-stream-id='${CSS.escape(stream_id)}']`); -}; +} -exports.is_sub_already_present = function (sub) { - return exports.row_for_stream_id(sub.stream_id).length > 0; -}; +export function is_sub_already_present(sub) { + return row_for_stream_id(sub.stream_id).length > 0; +} -exports.update_left_panel_row = (sub) => { - const row = exports.row_for_stream_id(sub.stream_id); +export function update_left_panel_row(sub) { + const row = row_for_stream_id(sub.stream_id); if (row.length === 0) { return; @@ -74,18 +72,18 @@ exports.update_left_panel_row = (sub) => { new_row.addClass("active"); } - exports.add_tooltip_to_left_panel_row(new_row); + add_tooltip_to_left_panel_row(new_row); row.replaceWith(new_row); -}; +} -exports.settings_button_for_sub = function (sub) { +export function settings_button_for_sub(sub) { // We don't do expectOne() here, because this button is only // visible if the user has that stream selected in the streams UI. return $( `.subscription_settings[data-stream-id='${CSS.escape(sub.stream_id)}'] .subscribe-button`, ); -}; +} function get_row_data(row) { const row_id = Number.parseInt(row.attr("data-stream-id"), 10); @@ -99,7 +97,7 @@ function get_row_data(row) { return undefined; } -exports.get_active_data = function () { +export function get_active_data() { const active_row = $("div.stream-row.active"); const valid_active_id = Number.parseInt(active_row.attr("data-stream-id"), 10); const active_tabs = $(".subscriptions-container").find("div.ind-tab.selected"); @@ -108,7 +106,7 @@ exports.get_active_data = function () { id: valid_active_id, tabs: active_tabs, }; -}; +} function get_hash_safe() { if (typeof window !== "undefined" && typeof window.location.hash === "string") { @@ -141,7 +139,7 @@ function should_list_all_streams() { // this finds the stream that is actively open in the settings and focused in // the left side. -exports.active_stream = function () { +export function active_stream() { const hash_components = window.location.hash.slice(1).split(/\//); // if the string casted to a number is valid, and another component @@ -154,26 +152,26 @@ exports.active_stream = function () { } return undefined; -}; +} -exports.set_muted = function (sub, is_muted, status_element) { +export function set_muted(sub, is_muted, status_element) { stream_muting.update_is_muted(sub, is_muted); stream_edit.set_stream_property(sub, "is_muted", sub.is_muted, status_element); -}; +} -exports.toggle_pin_to_top_stream = function (sub) { +export function toggle_pin_to_top_stream(sub) { stream_edit.set_stream_property(sub, "pin_to_top", !sub.pin_to_top); -}; +} let subscribed_only = true; -exports.is_subscribed_stream_tab_active = function () { +export function is_subscribed_stream_tab_active() { // Returns true if "Subscribed" tab in stream settings is open // otherwise false. return subscribed_only; -}; +} -exports.update_stream_name = function (sub, new_name) { +export function update_stream_name(sub, new_name) { const old_name = sub.name; // Rename the stream internally. @@ -187,7 +185,7 @@ exports.update_stream_name = function (sub, new_name) { stream_edit.update_stream_name(sub, new_name); // Update the subscriptions page - const sub_row = exports.row_for_stream_id(stream_id); + const sub_row = row_for_stream_id(stream_id); sub_row.find(".stream-name").text(new_name); // Update the message feed. @@ -203,14 +201,14 @@ exports.update_stream_name = function (sub, new_name) { // Update navbar if needed message_view_header.maybe_rerender_title_area_for_stream(sub); -}; +} -exports.update_stream_description = function (sub, description, rendered_description) { +export function update_stream_description(sub, description, rendered_description) { sub.description = description; sub.rendered_description = rendered_description.replace("

", "").replace("

", ""); // Update stream row - const sub_row = exports.row_for_stream_id(sub.stream_id); + const sub_row = row_for_stream_id(sub.stream_id); sub_row.find(".description").html(util.clean_user_content_links(sub.rendered_description)); // Update stream settings @@ -218,14 +216,14 @@ exports.update_stream_description = function (sub, description, rendered_descrip // Update navbar if needed message_view_header.maybe_rerender_title_area_for_stream(sub); -}; +} -exports.update_stream_privacy = function (sub, values) { +export function update_stream_privacy(sub, values) { stream_data.update_stream_privacy(sub, values); stream_data.update_calculated_fields(sub); // Update UI elements - exports.update_left_panel_row(sub); + update_left_panel_row(sub); stream_ui_updates.update_stream_subscription_type_text(sub); stream_ui_updates.update_change_stream_privacy_settings(sub); stream_ui_updates.update_settings_button_for_sub(sub); @@ -234,33 +232,33 @@ exports.update_stream_privacy = function (sub, values) { // Update navbar if needed message_view_header.maybe_rerender_title_area_for_stream(sub); -}; +} -exports.update_stream_post_policy = function (sub, new_value) { +export function update_stream_post_policy(sub, new_value) { stream_data.update_stream_post_policy(sub, new_value); stream_data.update_calculated_fields(sub); stream_ui_updates.update_stream_subscription_type_text(sub); -}; +} -exports.update_message_retention_setting = function (sub, new_value) { +export function update_message_retention_setting(sub, new_value) { stream_data.update_message_retention_setting(sub, new_value); stream_ui_updates.update_stream_subscription_type_text(sub); -}; +} -exports.set_color = function (stream_id, color) { +export function set_color(stream_id, color) { const sub = stream_data.get_sub_by_id(stream_id); stream_edit.set_stream_property(sub, "color", color); -}; +} -exports.update_subscribers_ui = function (sub) { - exports.update_left_panel_row(sub); +export function update_subscribers_ui(sub) { + update_left_panel_row(sub); stream_ui_updates.update_subscribers_list(sub); message_view_header.maybe_rerender_title_area_for_stream(sub); -}; +} -exports.add_sub_to_table = function (sub) { - if (exports.is_sub_already_present(sub)) { +export function add_sub_to_table(sub) { + if (is_sub_already_present(sub)) { // If a stream is already listed/added in subscription modal, // display stream in `Subscribed` tab and return. // This can happen in some corner cases (which might @@ -274,7 +272,7 @@ exports.add_sub_to_table = function (sub) { const setting_sub = stream_data.get_sub_for_settings(sub); const html = render_subscription(setting_sub); const new_row = $(html); - exports.add_tooltip_to_left_panel_row(new_row); + add_tooltip_to_left_panel_row(new_row); if (stream_create.get_name() === sub.name) { ui.get_content_element($(".streams-list")).prepend(new_row); @@ -293,23 +291,23 @@ exports.add_sub_to_table = function (sub) { // good way to associate with this request because the stream // ID isn't known yet. These are appended to the top of the // list, so they are more visible. - exports.row_for_stream_id(sub.stream_id).trigger("click"); + row_for_stream_id(sub.stream_id).trigger("click"); stream_create.reset_created_stream(); } -}; +} -exports.remove_stream = function (stream_id) { +export function remove_stream(stream_id) { // It is possible that row is empty when we deactivate a // stream, but we let jQuery silently handle that. - const row = exports.row_for_stream_id(stream_id); + const row = row_for_stream_id(stream_id); row.remove(); const sub = stream_data.get_sub_by_id(stream_id); if (stream_edit.is_sub_settings_active(sub)) { stream_edit.open_edit_panel_empty(); } -}; +} -exports.update_settings_for_subscribed = function (sub) { +export function update_settings_for_subscribed(sub) { stream_ui_updates.update_add_subscriptions_elements(sub); $( `.subscription_settings[data-stream-id='${CSS.escape( @@ -317,39 +315,39 @@ exports.update_settings_for_subscribed = function (sub) { )}'] #preview-stream-button`, ).show(); - if (exports.is_sub_already_present(sub)) { - exports.update_left_panel_row(sub); + if (is_sub_already_present(sub)) { + update_left_panel_row(sub); stream_ui_updates.update_stream_row_in_settings_tab(sub); stream_ui_updates.update_settings_button_for_sub(sub); stream_ui_updates.update_change_stream_privacy_settings(sub); } else { - exports.add_sub_to_table(sub); + add_sub_to_table(sub); } stream_ui_updates.update_subscribers_list(sub); // Display the swatch and subscription stream_settings stream_ui_updates.update_regular_sub_settings(sub); -}; +} -exports.show_active_stream_in_left_panel = function () { +export function show_active_stream_in_left_panel() { const selected_row = get_hash_safe().split(/\//)[1]; if (Number.parseFloat(selected_row)) { - const sub_row = exports.row_for_stream_id(selected_row); + const sub_row = row_for_stream_id(selected_row); sub_row.addClass("active"); } -}; +} -exports.add_tooltip_to_left_panel_row = (row) => { +export function add_tooltip_to_left_panel_row(row) { row.find('.sub-info-box [class$="-bar"] [class$="-count"]').tooltip({ placement: "left", animation: false, }); -}; +} -exports.update_settings_for_unsubscribed = function (sub) { - exports.update_left_panel_row(sub); +export function update_settings_for_unsubscribed(sub) { + update_left_panel_row(sub); stream_ui_updates.update_subscribers_list(sub); stream_ui_updates.update_settings_button_for_sub(sub); stream_ui_updates.update_regular_sub_settings(sub); @@ -367,7 +365,7 @@ exports.update_settings_for_unsubscribed = function (sub) { // Remove private streams from subscribed streams list. stream_ui_updates.update_stream_row_in_settings_tab(sub); -}; +} function triage_stream(left_panel_params, sub) { if (left_panel_params.subscribed_only && !sub.subscribed) { @@ -426,7 +424,7 @@ function get_stream_id_buckets(stream_ids, left_panel_params) { return buckets; } -exports.render_left_panel_superset = function () { +export function render_left_panel_superset() { // For annoying legacy reasons we render all the subs we are // allowed to know about and put them in the DOM, then we do // a second pass where we filter/sort them. @@ -441,17 +439,17 @@ exports.render_left_panel_superset = function () { }); ui.get_content_element($("#subscriptions_table .streams-list")).html(html); -}; +} // LeftPanelParams { input: String, subscribed_only: Boolean, sort_order: String } -exports.redraw_left_panel = function (left_panel_params) { +export function redraw_left_panel(left_panel_params) { // We only get left_panel_params passed in from tests. Real // code calls get_left_panel_params(). if (left_panel_params === undefined) { - left_panel_params = exports.get_left_panel_params(); + left_panel_params = get_left_panel_params(); } - exports.show_active_stream_in_left_panel(); + show_active_stream_in_left_panel(); function stream_id_for_row(row) { return Number.parseInt($(row).attr("data-stream-id"), 10); @@ -498,19 +496,19 @@ exports.redraw_left_panel = function (left_panel_params) { widgets.get(stream_id), ); } - exports.maybe_reset_right_panel(); + maybe_reset_right_panel(); for (const row of $("#subscriptions_table .stream-row")) { - exports.add_tooltip_to_left_panel_row($(row)); + add_tooltip_to_left_panel_row($(row)); } // return this for test convenience return [...buckets.name, ...buckets.desc]; -}; +} let sort_order = "by-stream-name"; -exports.get_left_panel_params = function () { +export function get_left_panel_params() { const search_box = $("#stream_filter input[type='text']"); const input = search_box.expectOne().val().trim(); const params = { @@ -519,20 +517,20 @@ exports.get_left_panel_params = function () { sort_order, }; return params; -}; +} -exports.maybe_reset_right_panel = function () { +export function maybe_reset_right_panel() { if ($(".stream-row.active").hasClass("notdisplayed")) { $(".right .settings").hide(); $(".nothing-selected").show(); $(".stream-row.active").removeClass("active"); } -}; +} // Make it explicit that our toggler is not created right away. -exports.toggler = undefined; +export let toggler; -exports.switch_stream_tab = function (tab_name) { +export function switch_stream_tab(tab_name) { /* This switches the stream tab, but it doesn't update the toggler widget. You may instead want to @@ -545,11 +543,11 @@ exports.switch_stream_tab = function (tab_name) { subscribed_only = true; } - exports.redraw_left_panel(); + redraw_left_panel(); stream_edit.setup_subscriptions_tab_hash(tab_name); -}; +} -exports.switch_stream_sort = function (tab_name) { +export function switch_stream_sort(tab_name) { if ( tab_name === "by-stream-name" || tab_name === "by-subscriber-count" || @@ -559,10 +557,10 @@ exports.switch_stream_sort = function (tab_name) { } else { sort_order = "by-stream-name"; } - exports.redraw_left_panel(); -}; + redraw_left_panel(); +} -exports.setup_page = function (callback) { +export function setup_page(callback) { // We should strongly consider only setting up the page once, // but I am writing these comments write before a big release, // so it's too risky a change for now. @@ -602,7 +600,7 @@ exports.setup_page = function (callback) { ], html_class: "stream_sorter_toggle", callback(value, key) { - exports.switch_stream_sort(key); + switch_stream_sort(key); }, }); $("#subscriptions_table .search-container").prepend(sort_toggler.get()); @@ -610,23 +608,23 @@ exports.setup_page = function (callback) { // Reset our internal state to reflect that we're initially in // the "Subscribed" tab if we're reopening "Manage streams". subscribed_only = true; - exports.toggler = components.toggle({ + toggler = components.toggle({ child_wants_focus: true, values: [ {label: i18n.t("Subscribed"), key: "subscribed"}, {label: i18n.t("All streams"), key: "all-streams"}, ], callback(value, key) { - exports.switch_stream_tab(key); + switch_stream_tab(key); }, }); if (should_list_all_streams()) { - const toggler_elem = exports.toggler.get(); + const toggler_elem = toggler.get(); $("#subscriptions_table .search-container").prepend(toggler_elem); } if (page_params.is_guest) { - exports.toggler.disable_tab("all-streams"); + toggler.disable_tab("all-streams"); } // show the "Stream settings" header by default. @@ -654,12 +652,12 @@ exports.setup_page = function (callback) { const rendered = render_subscription_table_body(template_data); $("#subscriptions_table").append(rendered); - exports.render_left_panel_superset(); + render_left_panel_superset(); initialize_components(); - exports.redraw_left_panel(); + redraw_left_panel(); stream_create.set_up_handlers(); - const throttled_redraw_left_panel = _.throttle(exports.redraw_left_panel, 50); + const throttled_redraw_left_panel = _.throttle(redraw_left_panel, 50); $("#stream_filter input[type='text']").on("input", () => { // Debounce filtering in case a user is typing quickly throttled_redraw_left_panel(); @@ -667,7 +665,7 @@ exports.setup_page = function (callback) { $("#clear_search_stream_name").on("click", () => { $("#stream_filter input[type='text']").val(""); - exports.redraw_left_panel(); + redraw_left_panel(); }); if (callback) { @@ -680,43 +678,43 @@ exports.setup_page = function (callback) { if (!should_list_all_streams()) { $(".create_stream_button").val(i18n.t("Subscribe")); } -}; +} -exports.switch_to_stream_row = function (stream_id) { - const stream_row = exports.row_for_stream_id(stream_id); +export function switch_to_stream_row(stream_id) { + const stream_row = row_for_stream_id(stream_id); const container = $(".streams-list"); - exports.get_active_data().row.removeClass("active"); + get_active_data().row.removeClass("active"); stream_row.addClass("active"); scroll_util.scroll_element_into_container(stream_row, container); // It's dubious that we need this timeout any more. setTimeout(() => { - if (stream_id === exports.get_active_data().id) { + if (stream_id === get_active_data().id) { stream_row.trigger("click"); } }, 100); -}; +} -exports.change_state = function (section) { +export function change_state(section) { // if in #streams/new form. if (section === "new") { if (!page_params.is_guest) { - exports.do_open_create_stream(); + do_open_create_stream(); } else { - exports.toggler.goto("subscribed"); + toggler.goto("subscribed"); } return; } if (section === "all") { - exports.toggler.goto("all-streams"); + toggler.goto("all-streams"); return; } if (section === "subscribed") { - exports.toggler.goto("subscribed"); + toggler.goto("subscribed"); return; } @@ -727,19 +725,19 @@ exports.change_state = function (section) { // So redirect guest users to 'subscribed' tab // for any unsubscribed stream settings hash if (page_params.is_guest && !stream_data.id_is_subscribed(stream_id)) { - exports.toggler.goto("subscribed"); + toggler.goto("subscribed"); } else { - exports.switch_to_stream_row(stream_id); + switch_to_stream_row(stream_id); } return; } blueslip.warn("invalid section for streams: " + section); - exports.toggler.goto("subscribed"); -}; + toggler.goto("subscribed"); +} -exports.launch = function (section) { - exports.setup_page(() => { +export function launch(section) { + setup_page(() => { overlays.open_overlay({ name: "subscriptions", overlay: $("#subscription_overlay"), @@ -747,15 +745,15 @@ exports.launch = function (section) { hashchange.exit_overlay(); }, }); - exports.change_state(section); + change_state(section); }); - if (!exports.get_active_data().id) { + if (!get_active_data().id) { $("#search_stream_name").trigger("focus"); } -}; +} -exports.switch_rows = function (event) { - const active_data = exports.get_active_data(); +export function switch_rows(event) { + const active_data = get_active_data(); let switch_row; if (window.location.hash === "#streams/new") { // Prevent switching stream rows when creating a new stream @@ -781,46 +779,46 @@ exports.switch_rows = function (event) { const row_data = get_row_data(switch_row); if (row_data) { const stream_id = row_data.id; - exports.switch_to_stream_row(stream_id); + switch_to_stream_row(stream_id); } else if (event === "up_arrow" && !row_data) { $("#search_stream_name").trigger("focus"); } return true; -}; +} -exports.keyboard_sub = function () { - const active_data = exports.get_active_data(); +export function keyboard_sub() { + const active_data = get_active_data(); const stream_filter_tab = $(active_data.tabs[0]).text(); const row_data = get_row_data(active_data.row); if (row_data) { - exports.sub_or_unsub(row_data.object); + sub_or_unsub(row_data.object); if (row_data.object.subscribed && stream_filter_tab === "Subscribed") { active_data.row.addClass("notdisplayed"); active_data.row.removeClass("active"); } } -}; +} -exports.toggle_view = function (event) { - const active_data = exports.get_active_data(); +export function toggle_view(event) { + const active_data = get_active_data(); const stream_filter_tab = $(active_data.tabs[0]).text(); if (event === "right_arrow" && stream_filter_tab === "Subscribed") { - exports.toggler.goto("all-streams"); + toggler.goto("all-streams"); } else if (event === "left_arrow" && stream_filter_tab === "All streams") { - exports.toggler.goto("subscribed"); + toggler.goto("subscribed"); } -}; +} -exports.view_stream = function () { - const active_data = exports.get_active_data(); +export function view_stream() { + const active_data = get_active_data(); const row_data = get_row_data(active_data.row); if (row_data) { const stream_narrow_hash = "#narrow/stream/" + hash_util.encode_stream_name(row_data.object.name); hashchange.go_to_location(stream_narrow_hash); } -}; +} /* For the given stream_row, remove the tick and replace by a spinner. */ function display_subscribe_toggle_spinner(stream_row) { @@ -923,7 +921,7 @@ function ajaxUnsubscribe(sub, stream_row) { }); } -exports.do_open_create_stream = function () { +export function do_open_create_stream() { // Only call this directly for hash changes. // Prefer open_create_stream(). @@ -937,25 +935,25 @@ exports.do_open_create_stream = function () { } stream_create.new_stream_clicked(stream); -}; +} -exports.open_create_stream = function () { - exports.do_open_create_stream(); +export function open_create_stream() { + do_open_create_stream(); hashchange.update_browser_history("#streams/new"); -}; +} -exports.sub_or_unsub = function (sub, stream_row) { +export function sub_or_unsub(sub, stream_row) { if (sub.subscribed) { ajaxUnsubscribe(sub, stream_row); } else { ajaxSubscribe(sub.name, sub.color, stream_row); } -}; +} -exports.initialize = function () { +export function initialize() { $("#subscriptions_table").on("click", ".create_stream_button", (e) => { e.preventDefault(); - exports.open_create_stream(); + open_create_stream(); }); $(".subscriptions").on("click", "[data-dismiss]", (e) => { @@ -964,7 +962,7 @@ exports.initialize = function () { // click; this fixes an issue where hitting "Enter" would // trigger this code path due to bootstrap magic. if (e.clientY !== 0) { - exports.show_subs_pane.nothing_selected(); + show_subs_pane.nothing_selected(); } }); @@ -991,6 +989,4 @@ exports.initialize = function () { } }); })(); -}; - -window.subs = exports; +} diff --git a/static/js/ui_init.js b/static/js/ui_init.js index f2a59800a9..47895722b0 100644 --- a/static/js/ui_init.js +++ b/static/js/ui_init.js @@ -57,6 +57,7 @@ import * as stream_color from "./stream_color"; import * as stream_data from "./stream_data"; import * as stream_edit from "./stream_edit"; import * as stream_list from "./stream_list"; +import * as subs from "./subs"; import * as timerender from "./timerender"; import * as topic_list from "./topic_list"; import * as topic_zoom from "./topic_zoom";