From f84a2c08d56d9616f1d6f0cda0139b70072d9609 Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Tue, 25 Jan 2022 02:36:19 -0800 Subject: [PATCH] js: Prefix jQuery object variable names with $. Signed-off-by: Anders Kaseorg --- docs/subsystems/input-pills.md | 4 +- docs/subsystems/widgets.md | 2 +- frontend_tests/node_tests/activity.js | 84 ++-- frontend_tests/node_tests/alert_words_ui.js | 103 ++--- frontend_tests/node_tests/buddy_list.js | 36 +- frontend_tests/node_tests/common.js | 32 +- frontend_tests/node_tests/components.js | 72 ++-- frontend_tests/node_tests/compose.js | 19 +- frontend_tests/node_tests/compose_pm_pill.js | 6 +- frontend_tests/node_tests/compose_ui.js | 172 ++++---- frontend_tests/node_tests/compose_validate.js | 66 +-- frontend_tests/node_tests/compose_video.js | 32 +- frontend_tests/node_tests/drafts.js | 34 +- .../node_tests/dropdown_list_widget.js | 32 +- frontend_tests/node_tests/example8.js | 20 +- frontend_tests/node_tests/hashchange.js | 32 +- frontend_tests/node_tests/input_pill.js | 136 +++---- frontend_tests/node_tests/keydown_util.js | 10 +- frontend_tests/node_tests/lightbox.js | 42 +- frontend_tests/node_tests/list_cursor.js | 4 +- frontend_tests/node_tests/list_widget.js | 376 +++++++++--------- frontend_tests/node_tests/message_events.js | 6 +- frontend_tests/node_tests/password.js | 38 +- frontend_tests/node_tests/pill_typeahead.js | 42 +- frontend_tests/node_tests/pm_list.js | 14 +- frontend_tests/node_tests/poll_widget.js | 128 +++--- frontend_tests/node_tests/popovers.js | 12 +- frontend_tests/node_tests/reactions.js | 92 ++--- frontend_tests/node_tests/recent_topics.js | 4 +- .../node_tests/rendered_markdown.js | 44 +- frontend_tests/node_tests/rtl.js | 22 +- frontend_tests/node_tests/scroll_util.js | 14 +- frontend_tests/node_tests/search.js | 123 +++--- frontend_tests/node_tests/search_legacy.js | 104 ++--- frontend_tests/node_tests/settings_bots.js | 90 ++--- .../node_tests/settings_muted_topics.js | 12 +- .../node_tests/settings_muted_users.js | 12 +- frontend_tests/node_tests/settings_org.js | 372 ++++++++--------- .../node_tests/settings_profile_fields.js | 18 +- .../node_tests/settings_user_groups.js | 167 ++++---- frontend_tests/node_tests/spoilers.js | 34 +- frontend_tests/node_tests/stream_events.js | 24 +- frontend_tests/node_tests/stream_list.js | 156 ++++---- frontend_tests/node_tests/stream_search.js | 24 +- .../node_tests/stream_settings_ui.js | 14 +- frontend_tests/node_tests/support.js | 10 +- frontend_tests/node_tests/timerender.js | 22 +- frontend_tests/node_tests/top_left_corner.js | 10 +- frontend_tests/node_tests/typing_events.js | 34 +- frontend_tests/node_tests/upload.js | 12 +- frontend_tests/node_tests/user_search.js | 6 +- frontend_tests/node_tests/widgetize.js | 38 +- frontend_tests/node_tests/zjquery.js | 64 +-- frontend_tests/puppeteer_lib/common.ts | 6 +- .../puppeteer_tests/copy-and-paste.ts | 4 +- .../puppeteer_tests/delete-message.ts | 6 +- frontend_tests/puppeteer_tests/edit.ts | 4 +- frontend_tests/puppeteer_tests/stars.ts | 10 +- frontend_tests/zjsunit/namespace.js | 2 +- frontend_tests/zjsunit/zjquery.js | 18 +- frontend_tests/zjsunit/zjquery_element.js | 127 +++--- static/js/about_zulip.js | 2 +- static/js/activity.js | 8 +- static/js/add_subscribers_pill.js | 16 +- static/js/alert_words_ui.js | 22 +- static/js/attachments_ui.js | 24 +- static/js/avatar.js | 36 +- static/js/billing/helpers.js | 4 +- static/js/buddy_list.js | 44 +- static/js/click_handlers.js | 124 +++--- static/js/common.ts | 22 +- static/js/components.ts | 32 +- static/js/compose.js | 78 ++-- static/js/compose_actions.js | 30 +- static/js/compose_error.ts | 10 +- static/js/compose_fade.js | 38 +- static/js/compose_pm_pill.js | 4 +- static/js/compose_state.js | 8 +- static/js/compose_ui.js | 48 +-- static/js/compose_validate.js | 44 +- static/js/composebox_typeahead.js | 52 +-- static/js/condense.js | 152 +++---- static/js/copy_and_paste.js | 80 ++-- static/js/csrf.ts | 4 +- static/js/dialog_widget.js | 20 +- static/js/drafts.js | 72 ++-- static/js/dropdown_list_widget.js | 210 +++++----- static/js/echo.js | 30 +- static/js/emoji_picker.js | 110 ++--- static/js/flatpickr.js | 14 +- static/js/floating_recipient_bar.js | 146 +++---- static/js/gear_menu.js | 6 +- static/js/giphy.js | 32 +- static/js/hotkey.js | 28 +- static/js/hotspots.js | 24 +- static/js/info_overlay.js | 22 +- static/js/input_pill.js | 6 +- static/js/invite.js | 28 +- static/js/keydown_util.ts | 4 +- static/js/lightbox.js | 62 +-- static/js/list_cursor.js | 16 +- static/js/list_widget.js | 64 +-- static/js/loading.ts | 62 +-- static/js/message_edit.js | 340 ++++++++-------- static/js/message_edit_history.js | 4 +- static/js/message_events.js | 6 +- static/js/message_list.js | 58 +-- static/js/message_list_view.js | 190 ++++----- static/js/message_scroll.js | 2 +- static/js/message_view_header.js | 14 +- static/js/message_viewport.js | 123 +++--- static/js/muted_topics_ui.js | 8 +- static/js/narrow.js | 6 +- static/js/navigate.js | 10 +- static/js/notifications.js | 22 +- static/js/overlays.js | 68 ++-- static/js/padded_widget.ts | 12 +- static/js/password_quality.ts | 16 +- static/js/pill_typeahead.js | 6 +- static/js/pm_list.js | 6 +- static/js/poll_widget.js | 74 ++-- static/js/popovers.js | 299 +++++++------- static/js/portico/help.js | 12 +- static/js/portico/integrations.js | 12 +- static/js/portico/signup.js | 38 +- static/js/portico/tabbed-instructions.js | 4 +- static/js/reactions.js | 48 +-- static/js/realm_icon.js | 4 +- static/js/realm_logo.js | 36 +- static/js/recent_topics_ui.js | 110 ++--- static/js/reload.js | 12 +- static/js/reminder.js | 6 +- static/js/rendered_markdown.js | 40 +- static/js/resize.js | 28 +- static/js/rows.js | 84 ++-- static/js/rtl.js | 8 +- static/js/scroll_util.js | 12 +- static/js/search.js | 44 +- static/js/search_pill.js | 4 +- static/js/search_pill_widget.js | 4 +- static/js/settings_account.js | 62 +-- static/js/settings_bots.js | 76 ++-- static/js/settings_display.js | 66 +-- static/js/settings_emoji.js | 56 +-- static/js/settings_exports.js | 32 +- static/js/settings_invites.js | 44 +- static/js/settings_linkifiers.js | 84 ++-- static/js/settings_muted_topics.js | 12 +- static/js/settings_muted_users.js | 12 +- static/js/settings_notifications.js | 122 +++--- static/js/settings_org.js | 253 ++++++------ static/js/settings_panel_menu.js | 46 +-- static/js/settings_playgrounds.js | 42 +- static/js/settings_profile_fields.js | 110 ++--- .../settings_realm_user_settings_defaults.js | 14 +- static/js/settings_streams.js | 44 +- static/js/settings_toggle.js | 4 +- static/js/settings_ui.js | 20 +- static/js/settings_user_groups.js | 106 ++--- static/js/settings_users.js | 186 ++++----- static/js/spoilers.ts | 58 +-- static/js/stats/stats.js | 16 +- static/js/stream_bar.js | 24 +- static/js/stream_color.js | 10 +- static/js/stream_create.js | 40 +- static/js/stream_create_subscribers.js | 32 +- static/js/stream_edit.js | 70 ++-- static/js/stream_edit_subscribers.js | 42 +- static/js/stream_events.js | 4 +- static/js/stream_list.js | 150 +++---- static/js/stream_popover.js | 70 ++-- static/js/stream_settings_ui.js | 202 +++++----- static/js/stream_ui_updates.js | 92 ++--- static/js/submessage.js | 4 +- static/js/timerender.ts | 26 +- static/js/tippyjs.js | 26 +- static/js/todo_widget.js | 26 +- static/js/top_left_corner.js | 36 +- static/js/topic_list.js | 54 +-- static/js/topic_zoom.js | 12 +- static/js/ui.js | 54 +-- static/js/ui_init.js | 84 ++-- static/js/ui_report.ts | 18 +- static/js/ui_util.ts | 12 +- static/js/unread_ui.js | 30 +- static/js/upload.js | 14 +- static/js/upload_widget.ts | 98 ++--- static/js/user_pill.js | 4 +- static/js/user_profile.js | 54 +-- static/js/user_search.js | 8 +- static/js/user_status_ui.js | 18 +- static/js/vdom.js | 10 +- static/js/widgetize.js | 42 +- static/js/zcommand.js | 16 +- static/js/zform.js | 10 +- 195 files changed, 4883 insertions(+), 4835 deletions(-) diff --git a/docs/subsystems/input-pills.md b/docs/subsystems/input-pills.md index 08467a4125..6d0cb0ac38 100644 --- a/docs/subsystems/input-pills.md +++ b/docs/subsystems/input-pills.md @@ -18,9 +18,9 @@ The pills will automatically be inserted in before the ".input" in order. ## Basic usage ```js -var pill_containter = $("#input_container"); +var $pill_containter = $("#input_container"); var pills = input_pill.create({ - container: pill_container, + $container: $pill_container, create_item_from_text: user_pill.create_item_from_email, get_text_from_item: user_pill.get_email_from_item, }); diff --git a/docs/subsystems/widgets.md b/docs/subsystems/widgets.md index 0e6f8d10d1..70e5f18290 100644 --- a/docs/subsystems/widgets.md +++ b/docs/subsystems/widgets.md @@ -312,7 +312,7 @@ The code in `static/js/zform.js` renders the form (not shown here) and then sets up a click handler like below: ```js - elem.find('button').on('click', function (e) { + $elem.find('button').on('click', function (e) { e.stopPropagation(); // Grab our index from the markup. diff --git a/frontend_tests/node_tests/activity.js b/frontend_tests/node_tests/activity.js index 42505533f2..1a7599b9e8 100644 --- a/frontend_tests/node_tests/activity.js +++ b/frontend_tests/node_tests/activity.js @@ -8,8 +8,8 @@ const blueslip = require("../zjsunit/zblueslip"); const $ = require("../zjsunit/zjquery"); const {page_params, user_settings} = require("../zjsunit/zpage_params"); -const window_stub = $.create("window-stub"); -set_global("to_$", () => window_stub); +const $window_stub = $.create("window-stub"); +set_global("to_$", () => $window_stub); $(window).idle = () => {}; const _document = { @@ -242,34 +242,34 @@ function simulate_right_column_buddy_list() { }; } -function buddy_list_add(user_id, stub) { - if (stub.attr) { - stub.attr("data-user-id", user_id); +function buddy_list_add(user_id, $stub) { + if ($stub.attr) { + $stub.attr("data-user-id", user_id); } - stub.length = 1; + $stub.length = 1; const sel = `li.user_sidebar_entry[data-user-id='${CSS.escape(user_id)}']`; - $("#user_presences").set_find_results(sel, stub); + $("#user_presences").set_find_results(sel, $stub); } test("PM_update_dom_counts", () => { - const count = $.create("alice-unread-count"); + const $count = $.create("alice-unread-count"); const pm_key = alice.user_id.toString(); - const li = $.create("alice stub"); - buddy_list_add(pm_key, li); - li.set_find_results(".unread_count", count); - count.set_parents_result("li", li); + const $li = $.create("alice stub"); + buddy_list_add(pm_key, $li); + $li.set_find_results(".unread_count", $count); + $count.set_parents_result("li", $li); const counts = new Map(); counts.set(pm_key, 5); - li.addClass("user_sidebar_entry"); + $li.addClass("user_sidebar_entry"); activity.update_dom_with_unread_counts({pm_count: counts}); - assert.equal(count.text(), "5"); + assert.equal($count.text(), "5"); counts.set(pm_key, 0); activity.update_dom_with_unread_counts({pm_count: counts}); - assert.equal(count.text(), ""); + assert.equal($count.text(), ""); }); test("handlers", ({override, override_rewire, mock_template}) => { @@ -289,9 +289,9 @@ test("handlers", ({override, override_rewire, mock_template}) => { // This is kind of weak coverage; we are mostly making sure that // keys and clicks got mapped to functions that don't crash. - let me_li; - let alice_li; - let fred_li; + let $me_li; + let $alice_li; + let $fred_li; let narrowed; @@ -307,13 +307,13 @@ test("handlers", ({override, override_rewire, mock_template}) => { }); activity.set_cursor_and_filter(); - me_li = $.create("me stub"); - alice_li = $.create("alice stub"); - fred_li = $.create("fred stub"); + $me_li = $.create("me stub"); + $alice_li = $.create("alice stub"); + $fred_li = $.create("fred stub"); - buddy_list_add(me.user_id, me_li); - buddy_list_add(alice.user_id, alice_li); - buddy_list_add(fred.user_id, fred_li); + buddy_list_add(me.user_id, $me_li); + buddy_list_add(alice.user_id, $alice_li); + buddy_list_add(fred.user_id, $fred_li); } (function test_filter_keys() { @@ -364,7 +364,7 @@ test("handlers", ({override, override_rewire, mock_template}) => { // We wire up the click handler in click_handlers.js, // so this just tests the called function. narrowed = false; - activity.narrow_for_user({li: alice_li}); + activity.narrow_for_user({$li: $alice_li}); assert.ok(narrowed); })(); @@ -420,7 +420,7 @@ test("first/prev/next", ({override, mock_template}) => { assert.equal(buddy_list.prev_key(alice.user_id), undefined); assert.equal(buddy_list.next_key(alice.user_id), undefined); - override(buddy_list.container, "append", () => {}); + override(buddy_list.$container, "append", () => {}); activity.redraw_user(alice.user_id); activity.redraw_user(fred.user_id); @@ -457,7 +457,7 @@ test("insert_one_user_into_empty_list", ({override, mock_template}) => { override(padded_widget, "update_padding", () => {}); let appended_html; - override(buddy_list.container, "append", (html) => { + override(buddy_list.$container, "append", (html) => { appended_html = html; }); @@ -470,7 +470,7 @@ test("insert_alice_then_fred", ({override, mock_template}) => { mock_template("user_presence_row.hbs", true, (data, html) => html); let appended_html; - override(buddy_list.container, "append", (html) => { + override(buddy_list.$container, "append", (html) => { appended_html = html; }); override(padded_widget, "update_padding", () => {}); @@ -488,7 +488,7 @@ test("insert_fred_then_alice_then_rename", ({override, mock_template}) => { mock_template("user_presence_row.hbs", true, (data, html) => html); let appended_html; - override(buddy_list.container, "append", (html) => { + override(buddy_list.$container, "append", (html) => { appended_html = html; }); override(padded_widget, "update_padding", () => {}); @@ -497,16 +497,16 @@ test("insert_fred_then_alice_then_rename", ({override, mock_template}) => { assert.ok(appended_html.indexOf('data-user-id="2"') > 0); assert.ok(appended_html.indexOf("user_circle_green") > 0); - const fred_stub = $.create("fred-first"); - buddy_list_add(fred.user_id, fred_stub); + const $fred_stub = $.create("fred-first"); + buddy_list_add(fred.user_id, $fred_stub); let inserted_html; - fred_stub.before = (html) => { + $fred_stub.before = (html) => { inserted_html = html; }; let fred_removed; - fred_stub.remove = () => { + $fred_stub.remove = () => { fred_removed = true; }; @@ -522,10 +522,10 @@ test("insert_fred_then_alice_then_rename", ({override, mock_template}) => { }; people.add_active_user(fred_with_new_name); - const alice_stub = $.create("alice-first"); - buddy_list_add(alice.user_id, alice_stub); + const $alice_stub = $.create("alice-first"); + buddy_list_add(alice.user_id, $alice_stub); - alice_stub.before = (html) => { + $alice_stub.before = (html) => { inserted_html = html; }; @@ -541,8 +541,8 @@ test("insert_unfiltered_user_with_filter", () => { // This test only tests that we do not explode when // try to insert Fred into a list where he does not // match the search filter. - const user_filter = $(".user-list-filter"); - user_filter.val("do-not-match-filter"); + const $user_filter = $(".user-list-filter"); + $user_filter.val("do-not-match-filter"); activity.redraw_user(fred.user_id); }); @@ -579,8 +579,8 @@ test("update_presence_info", ({override, override_rewire}) => { override_rewire(buddy_data, "matches_filter", () => true); - const alice_li = $.create("alice stub"); - buddy_list_add(alice.user_id, alice_li); + const $alice_li = $.create("alice stub"); + buddy_list_add(alice.user_id, $alice_li); let inserted; override(buddy_list, "insert_or_move", () => { @@ -613,8 +613,8 @@ test("initialize", ({override, mock_template}) => { function clear() { $.clear_all_elements(); - buddy_list.container = $("#user_presences"); - buddy_list.container.append = () => {}; + buddy_list.$container = $("#user_presences"); + buddy_list.$container.append = () => {}; clear_buddy_list(); page_params.presences = {}; } diff --git a/frontend_tests/node_tests/alert_words_ui.js b/frontend_tests/node_tests/alert_words_ui.js index b136255674..8cb1f7fc6d 100644 --- a/frontend_tests/node_tests/alert_words_ui.js +++ b/frontend_tests/node_tests/alert_words_ui.js @@ -50,31 +50,31 @@ run_test("add_alert_word", ({override_rewire}) => { alert_words_ui.set_up_alert_words(); - const create_form = $("#create_alert_word_form"); - const add_func = create_form.get_on_handler("click", "#create_alert_word_button"); + const $create_form = $("#create_alert_word_form"); + const add_func = $create_form.get_on_handler("click", "#create_alert_word_button"); - const new_alert_word = $("#create_alert_word_name"); - const alert_word_status = $("#alert_word_status"); - const alert_word_status_text = $(".alert_word_status_text"); - alert_word_status.set_find_results(".alert_word_status_text", alert_word_status_text); + const $new_alert_word = $("#create_alert_word_name"); + const $alert_word_status = $("#alert_word_status"); + const $alert_word_status_text = $(".alert_word_status_text"); + $alert_word_status.set_find_results(".alert_word_status_text", $alert_word_status_text); // add '' as alert word add_func(); - assert.equal(new_alert_word.val(), ""); - assert.ok(alert_word_status.hasClass("alert-danger")); - assert.equal(alert_word_status_text.text(), "translated: Alert word can't be empty!"); - assert.ok(alert_word_status.visible()); + assert.equal($new_alert_word.val(), ""); + assert.ok($alert_word_status.hasClass("alert-danger")); + assert.equal($alert_word_status_text.text(), "translated: Alert word can't be empty!"); + assert.ok($alert_word_status.visible()); // add 'foo' as alert word (existing word) - new_alert_word.val("foo"); + $new_alert_word.val("foo"); add_func(); - assert.ok(alert_word_status.hasClass("alert-danger")); - assert.equal(alert_word_status_text.text(), "translated: Alert word already exists!"); - assert.ok(alert_word_status.visible()); + assert.ok($alert_word_status.hasClass("alert-danger")); + assert.equal($alert_word_status_text.text(), "translated: Alert word already exists!"); + assert.ok($alert_word_status.visible()); // add 'zot' as alert word (new word) - new_alert_word.val("zot"); + $new_alert_word.val("zot"); let success_func; let fail_func; @@ -89,26 +89,29 @@ run_test("add_alert_word", ({override_rewire}) => { // test failure fail_func(); - assert.ok(alert_word_status.hasClass("alert-danger")); - assert.equal(alert_word_status_text.text(), "translated: Error adding alert word!"); - assert.ok(alert_word_status.visible()); + assert.ok($alert_word_status.hasClass("alert-danger")); + assert.equal($alert_word_status_text.text(), "translated: Error adding alert word!"); + assert.ok($alert_word_status.visible()); // test success success_func(); - assert.ok(alert_word_status.hasClass("alert-success")); - assert.equal(alert_word_status_text.text(), 'translated: Alert word "zot" added successfully!'); - assert.ok(alert_word_status.visible()); + assert.ok($alert_word_status.hasClass("alert-success")); + assert.equal( + $alert_word_status_text.text(), + 'translated: Alert word "zot" added successfully!', + ); + assert.ok($alert_word_status.visible()); }); run_test("add_alert_word_keypress", ({override_rewire}) => { override_rewire(alert_words_ui, "rerender_alert_words_ui", () => {}); alert_words_ui.set_up_alert_words(); - const create_form = $("#create_alert_word_form"); - const keypress_func = create_form.get_on_handler("keypress", "#create_alert_word_name"); + const $create_form = $("#create_alert_word_form"); + const keypress_func = $create_form.get_on_handler("keypress", "#create_alert_word_name"); - const new_alert_word = $("#create_alert_word_name"); - new_alert_word.val("zot"); + const $new_alert_word = $("#create_alert_word_name"); + $new_alert_word.val("zot"); const event = { preventDefault: () => {}, @@ -130,16 +133,16 @@ run_test("remove_alert_word", ({override_rewire}) => { override_rewire(alert_words_ui, "rerender_alert_words_ui", () => {}); alert_words_ui.set_up_alert_words(); - const word_list = $("#alert-words-table"); - const remove_func = word_list.get_on_handler("click", ".remove-alert-word"); + const $word_list = $("#alert-words-table"); + const remove_func = $word_list.get_on_handler("click", ".remove-alert-word"); - const remove_alert_word = $(".remove-alert-word"); - const list_item = $("tr.alert-word-item"); - const val_item = $("span.value"); - val_item.text($t({defaultMessage: "zot"})); + const $remove_alert_word = $(".remove-alert-word"); + const $list_item = $("tr.alert-word-item"); + const $val_item = $("span.value"); + $val_item.text($t({defaultMessage: "zot"})); - remove_alert_word.set_parents_result("tr", list_item); - list_item.set_find_results(".value", val_item); + $remove_alert_word.set_parents_result("tr", $list_item); + $list_item.set_find_results(".value", $val_item); const event = { currentTarget: ".remove-alert-word", @@ -156,42 +159,42 @@ run_test("remove_alert_word", ({override_rewire}) => { remove_func(event); - const alert_word_status = $("#alert_word_status"); - const alert_word_status_text = $(".alert_word_status_text"); - alert_word_status.set_find_results(".alert_word_status_text", alert_word_status_text); + const $alert_word_status = $("#alert_word_status"); + const $alert_word_status_text = $(".alert_word_status_text"); + $alert_word_status.set_find_results(".alert_word_status_text", $alert_word_status_text); // test failure fail_func(); - assert.ok(alert_word_status.hasClass("alert-danger")); - assert.equal(alert_word_status_text.text(), "translated: Error removing alert word!"); - assert.ok(alert_word_status.visible()); + assert.ok($alert_word_status.hasClass("alert-danger")); + assert.equal($alert_word_status_text.text(), "translated: Error removing alert word!"); + assert.ok($alert_word_status.visible()); // test success success_func(); - assert.ok(alert_word_status.hasClass("alert-success")); - assert.equal(alert_word_status_text.text(), "translated: Alert word removed successfully!"); - assert.ok(alert_word_status.visible()); + assert.ok($alert_word_status.hasClass("alert-success")); + assert.equal($alert_word_status_text.text(), "translated: Alert word removed successfully!"); + assert.ok($alert_word_status.visible()); }); run_test("close_status_message", ({override_rewire}) => { override_rewire(alert_words_ui, "rerender_alert_words_ui", () => {}); alert_words_ui.set_up_alert_words(); - const alert_word_settings = $("#alert-word-settings"); - const close = alert_word_settings.get_on_handler("click", ".close-alert-word-status"); + const $alert_word_settings = $("#alert-word-settings"); + const close = $alert_word_settings.get_on_handler("click", ".close-alert-word-status"); - const alert = $(".alert"); - const close_btn = $(".close-alert-word-status"); - close_btn.set_parents_result(".alert", alert); + const $alert = $(".alert"); + const $close_btn = $(".close-alert-word-status"); + $close_btn.set_parents_result(".alert", $alert); - alert.show(); + $alert.show(); const event = { preventDefault: () => {}, currentTarget: ".close-alert-word-status", }; - assert.ok(alert.visible()); + assert.ok($alert.visible()); close(event); - assert.ok(!alert.visible()); + assert.ok(!$alert.visible()); }); diff --git a/frontend_tests/node_tests/buddy_list.js b/frontend_tests/node_tests/buddy_list.js index 7de390b8d2..903a4e3c26 100644 --- a/frontend_tests/node_tests/buddy_list.js +++ b/frontend_tests/node_tests/buddy_list.js @@ -39,18 +39,18 @@ people.add_active_user(alice); run_test("get_items", () => { const buddy_list = new BuddyList(); - // We don't make alice_li an actual jQuery stub, + // We don't make $alice_li an actual jQuery stub, // because our test only cares that it comes // back from get_items. - const alice_li = "alice stub"; + const $alice_li = "alice stub"; const sel = "li.user_sidebar_entry"; - const container = $.create("get_items container", { - children: [{to_$: () => alice_li}], + const $container = $.create("get_items container", { + children: [{to_$: () => $alice_li}], }); - buddy_list.container.set_find_results(sel, container); + buddy_list.$container.set_find_results(sel, $container); const items = buddy_list.get_items(); - assert.deepEqual(items, [alice_li]); + assert.deepEqual(items, [$alice_li]); }); run_test("basics", ({override}) => { @@ -83,19 +83,19 @@ run_test("basics", ({override}) => { }); assert.ok(appended); - const alice_li = {length: 1}; + const $alice_li = {length: 1}; override(buddy_list, "get_li_from_key", (opts) => { const key = opts.key; assert.equal(key, alice.user_id); - return alice_li; + return $alice_li; }); - const li = buddy_list.find_li({ + const $li = buddy_list.find_li({ key: alice.user_id, }); - assert.equal(li, alice_li); + assert.equal($li, $alice_li); }); run_test("big_list", ({override}) => { @@ -163,11 +163,11 @@ run_test("find_li w/force_render", ({override}) => { // key is not already rendered in DOM, then the // widget will call show_key to force-render it. const key = "999"; - const stub_li = {length: 0}; + const $stub_li = {length: 0}; override(buddy_list, "get_li_from_key", (opts) => { assert.equal(opts.key, key); - return stub_li; + return $stub_li; }); buddy_list.keys = ["foo", "bar", key, "baz"]; @@ -179,18 +179,18 @@ run_test("find_li w/force_render", ({override}) => { shown = true; }); - const empty_li = buddy_list.find_li({ + const $empty_li = buddy_list.find_li({ key, }); - assert.equal(empty_li, stub_li); + assert.equal($empty_li, $stub_li); assert.ok(!shown); - const li = buddy_list.find_li({ + const $li = buddy_list.find_li({ key, force_render: true, }); - assert.equal(li, stub_li); + assert.equal($li, $stub_li); assert.ok(shown); }); @@ -198,12 +198,12 @@ run_test("find_li w/bad key", ({override}) => { const buddy_list = new BuddyList(); override(buddy_list, "get_li_from_key", () => ({length: 0})); - const undefined_li = buddy_list.find_li({ + const $undefined_li = buddy_list.find_li({ key: "not-there", force_render: true, }); - assert.deepEqual(undefined_li, []); + assert.deepEqual($undefined_li, []); }); run_test("scrolling", ({override}) => { diff --git a/frontend_tests/node_tests/common.js b/frontend_tests/node_tests/common.js index 2917b6d547..9036c4d0ff 100644 --- a/frontend_tests/node_tests/common.js +++ b/frontend_tests/node_tests/common.js @@ -39,41 +39,41 @@ run_test("phrase_match", () => { run_test("copy_data_attribute_value", ({override}) => { const admin_emails_val = "iago@zulip.com"; - const input = $.create("input"); + const $input = $.create("input"); let removed; - input.remove = () => { + $input.remove = () => { removed = true; }; - override(document, "createElement", () => input); + override(document, "createElement", () => $input); override(document, "execCommand", noop); $("body").append = noop; - $(input).val = (arg) => { + $($input).val = (arg) => { assert.equal(arg, admin_emails_val); return { trigger: noop, }; }; - const elem = {}; + const $elem = {}; let faded_in = false; let faded_out = false; - elem.data = (key) => { + $elem.data = (key) => { assert.equal(key, "admin-emails"); return admin_emails_val; }; - elem.fadeOut = (val) => { + $elem.fadeOut = (val) => { assert.equal(val, 250); faded_out = true; }; - elem.fadeIn = (val) => { + $elem.fadeIn = (val) => { assert.equal(val, 1000); faded_in = true; }; - common.copy_data_attribute_value(elem, "admin-emails"); + common.copy_data_attribute_value($elem, "admin-emails"); assert.ok(removed); assert.ok(faded_in); assert.ok(faded_out); @@ -111,17 +111,17 @@ run_test("adjust_mac_shortcuts mac", ({override_rewire}) => { for (const [old_key, mac_key] of keys_to_test_mac) { const test_item = {}; - const stub = $.create("hotkey_" + key_no); - stub.text(old_key); - assert.equal(stub.hasClass("mac-cmd-key"), false); - test_item.stub = stub; + const $stub = $.create("hotkey_" + key_no); + $stub.text(old_key); + assert.equal($stub.hasClass("mac-cmd-key"), false); + test_item.$stub = $stub; test_item.mac_key = mac_key; test_item.is_cmd_key = old_key.includes("Ctrl"); test_items.push(test_item); key_no += 1; } - const children = test_items.map((test_item) => ({to_$: () => test_item.stub})); + const children = test_items.map((test_item) => ({to_$: () => test_item.$stub})); $.create(".markdown_content", {children}); @@ -129,8 +129,8 @@ run_test("adjust_mac_shortcuts mac", ({override_rewire}) => { common.adjust_mac_shortcuts(".markdown_content", require_cmd); for (const test_item of test_items) { - assert.equal(test_item.stub.hasClass("mac-cmd-key"), test_item.is_cmd_key); - assert.equal(test_item.stub.text(), test_item.mac_key); + assert.equal(test_item.$stub.hasClass("mac-cmd-key"), test_item.is_cmd_key); + assert.equal(test_item.$stub.text(), test_item.mac_key); } }); diff --git a/frontend_tests/node_tests/components.js b/frontend_tests/node_tests/components.js index c0207b544e..ec89dac22d 100644 --- a/frontend_tests/node_tests/components.js +++ b/frontend_tests/node_tests/components.js @@ -10,35 +10,35 @@ const blueslip = require("../zjsunit/zblueslip"); let env; function make_tab(i) { - const self = {}; + const $self = {}; assert.equal(env.tabs.length, i); - self.stub = true; - self.class = []; + $self.stub = true; + $self.class = []; - self.addClass = (c) => { - self.class += " " + c; - const tokens = self.class.trim().split(/ +/); - self.class = Array.from(new Set(tokens)).join(" "); + $self.addClass = (c) => { + $self.class += " " + c; + const tokens = $self.class.trim().split(/ +/); + $self.class = Array.from(new Set(tokens)).join(" "); }; - self.removeClass = (c) => { - const tokens = self.class.trim().split(/ +/); - self.class = tokens.filter((token) => token !== c).join(" "); + $self.removeClass = (c) => { + const tokens = $self.class.trim().split(/ +/); + $self.class = tokens.filter((token) => token !== c).join(" "); }; - self.hasClass = (c) => { - const tokens = self.class.trim().split(/ +/); + $self.hasClass = (c) => { + const tokens = $self.class.trim().split(/ +/); return tokens.includes(c); }; - self.data = (name) => { + $self.data = (name) => { assert.equal(name, "tab-id"); return i; }; - self.text = (text) => { + $self.text = (text) => { assert.equal( text, [ @@ -49,23 +49,23 @@ function make_tab(i) { ); }; - self.trigger = (type) => { + $self.trigger = (type) => { if (type === "focus") { env.focused_tab = i; } }; - env.tabs.push(self); + env.tabs.push($self); - return self; + return $self; } const ind_tab = (function () { - const self = {}; + const $self = {}; - self.stub = true; + $self.stub = true; - self.on = (name, f) => { + $self.on = (name, f) => { if (name === "click") { env.click_f = f; } else if (name === "keydown") { @@ -73,36 +73,36 @@ const ind_tab = (function () { } }; - self.removeClass = (c) => { - for (const tab of env.tabs) { - tab.removeClass(c); + $self.removeClass = (c) => { + for (const $tab of env.tabs) { + $tab.removeClass(c); } }; - self.eq = (idx) => env.tabs[idx]; + $self.eq = (idx) => env.tabs[idx]; - return self; + return $self; })(); function make_switcher() { - const self = {}; + const $self = {}; - self.stub = true; + $self.stub = true; - self.children = []; + $self.children = []; - self.classList = new Set(); + $self.classList = new Set(); - self.append = (child) => { - self.children.push(child); + $self.append = (child) => { + $self.children.push(child); }; - self.addClass = (c) => { - self.classList.add(c); - self.addedClass = c; + $self.addClass = (c) => { + $self.classList.add(c); + $self.addedClass = c; }; - self.find = (sel) => { + $self.find = (sel) => { switch (sel) { case ".ind-tab": return ind_tab; @@ -111,7 +111,7 @@ function make_switcher() { } }; - return self; + return $self; } mock_jquery((sel, attributes) => { diff --git a/frontend_tests/node_tests/compose.js b/frontend_tests/node_tests/compose.js index 6d5637e9f9..092db83106 100644 --- a/frontend_tests/node_tests/compose.js +++ b/frontend_tests/node_tests/compose.js @@ -552,27 +552,28 @@ test_ui("on_events", ({override, override_rewire}) => { override(rendered_markdown, "update_elements", () => {}); function setup_parents_and_mock_remove(container_sel, target_sel, parent) { - const container = $.create("fake " + container_sel); + const $container = $.create("fake " + container_sel); let container_removed = false; - container.remove = () => { + $container.remove = () => { container_removed = true; }; - const target = $.create("fake click target (" + target_sel + ")"); + const $target = $.create("fake click target (" + target_sel + ")"); - target.set_parents_result(parent, container); + $target.set_parents_result(parent, $container); const event = { preventDefault: noop, stopPropagation: noop, - target, + // FIXME: event.target should not be a jQuery object + target: $target, }; const helper = { event, - container, - target, + $container, + $target, container_was_removed: () => container_removed, }; @@ -633,7 +634,7 @@ test_ui("on_events", ({override, override_rewire}) => { ".compose_invite_user", ); - helper.container.data = (field) => { + helper.$container.data = (field) => { if (field === "user-id") { return "34"; } @@ -642,7 +643,7 @@ test_ui("on_events", ({override, override_rewire}) => { } throw new Error(`Unknown field ${field}`); }; - helper.target.prop("disabled", false); + helper.$target.prop("disabled", false); // !sub will result in true here and we check the success code path. stream_data.add_sub(subscription); diff --git a/frontend_tests/node_tests/compose_pm_pill.js b/frontend_tests/node_tests/compose_pm_pill.js index 528ff831d0..795a7d347c 100644 --- a/frontend_tests/node_tests/compose_pm_pill.js +++ b/frontend_tests/node_tests/compose_pm_pill.js @@ -43,9 +43,9 @@ run_test("pills", ({override}) => { people.get_realm_users = () => [iago, othello, hamlet]; - const recipient_stub = $("#private_message_recipient"); + const $recipient_stub = $("#private_message_recipient"); const pill_container_stub = "pill-container"; - recipient_stub.set_parent(pill_container_stub); + $recipient_stub.set_parent(pill_container_stub); let create_item_handler; const all_pills = new Map(); @@ -132,7 +132,7 @@ run_test("pills", ({override}) => { } function input_pill_stub(opts) { - assert.equal(opts.container, pill_container_stub); + assert.equal(opts.$container, pill_container_stub); create_item_handler = opts.create_item_from_text; assert.ok(create_item_handler); return pills; diff --git a/frontend_tests/node_tests/compose_ui.js b/frontend_tests/node_tests/compose_ui.js index 1a5f357ce2..e2dee76df7 100644 --- a/frontend_tests/node_tests/compose_ui.js +++ b/frontend_tests/node_tests/compose_ui.js @@ -46,48 +46,48 @@ people.add_active_user(bob); function make_textbox(s) { // Simulate a jQuery textbox for testing purposes. - const widget = {}; + const $widget = {}; - widget.s = s; - widget.focused = false; + $widget.s = s; + $widget.focused = false; - widget.caret = function (arg) { + $widget.caret = function (arg) { if (typeof arg === "number") { - widget.pos = arg; + $widget.pos = arg; return this; } if (arg) { - widget.insert_pos = widget.pos; - widget.insert_text = arg; - const before = widget.s.slice(0, widget.pos); - const after = widget.s.slice(widget.pos); - widget.s = before + arg + after; - widget.pos += arg.length; + $widget.insert_pos = $widget.pos; + $widget.insert_text = arg; + const before = $widget.s.slice(0, $widget.pos); + const after = $widget.s.slice($widget.pos); + $widget.s = before + arg + after; + $widget.pos += arg.length; return this; } - return widget.pos; + return $widget.pos; }; - widget.val = function (new_val) { + $widget.val = function (new_val) { if (new_val) { - widget.s = new_val; + $widget.s = new_val; return this; } - return widget.s; + return $widget.s; }; - widget.trigger = function (type) { + $widget.trigger = function (type) { if (type === "focus") { - widget.focused = true; + $widget.focused = true; } else if (type === "blur") { - widget.focused = false; + $widget.focused = false; } return this; }; - return widget; + return $widget; } run_test("autosize_textarea", ({override}) => { @@ -121,59 +121,59 @@ run_test("insert_syntax_and_focus", () => { }); run_test("smart_insert", () => { - let textbox = make_textbox("abc"); - textbox.caret(4); + let $textbox = make_textbox("abc"); + $textbox.caret(4); - compose_ui.smart_insert(textbox, ":smile:"); - assert.equal(textbox.insert_pos, 4); - assert.equal(textbox.insert_text, " :smile: "); - assert.equal(textbox.val(), "abc :smile: "); - assert.ok(textbox.focused); + compose_ui.smart_insert($textbox, ":smile:"); + assert.equal($textbox.insert_pos, 4); + assert.equal($textbox.insert_text, " :smile: "); + assert.equal($textbox.val(), "abc :smile: "); + assert.ok($textbox.focused); - textbox.trigger("blur"); - compose_ui.smart_insert(textbox, ":airplane:"); - assert.equal(textbox.insert_text, ":airplane: "); - assert.equal(textbox.val(), "abc :smile: :airplane: "); - assert.ok(textbox.focused); + $textbox.trigger("blur"); + compose_ui.smart_insert($textbox, ":airplane:"); + assert.equal($textbox.insert_text, ":airplane: "); + assert.equal($textbox.val(), "abc :smile: :airplane: "); + assert.ok($textbox.focused); - textbox.caret(0); - textbox.trigger("blur"); - compose_ui.smart_insert(textbox, ":octopus:"); - assert.equal(textbox.insert_text, ":octopus: "); - assert.equal(textbox.val(), ":octopus: abc :smile: :airplane: "); - assert.ok(textbox.focused); + $textbox.caret(0); + $textbox.trigger("blur"); + compose_ui.smart_insert($textbox, ":octopus:"); + assert.equal($textbox.insert_text, ":octopus: "); + assert.equal($textbox.val(), ":octopus: abc :smile: :airplane: "); + assert.ok($textbox.focused); - textbox.caret(textbox.val().length); - textbox.trigger("blur"); - compose_ui.smart_insert(textbox, ":heart:"); - assert.equal(textbox.insert_text, ":heart: "); - assert.equal(textbox.val(), ":octopus: abc :smile: :airplane: :heart: "); - assert.ok(textbox.focused); + $textbox.caret($textbox.val().length); + $textbox.trigger("blur"); + compose_ui.smart_insert($textbox, ":heart:"); + assert.equal($textbox.insert_text, ":heart: "); + assert.equal($textbox.val(), ":octopus: abc :smile: :airplane: :heart: "); + assert.ok($textbox.focused); // Test handling of spaces for ```quote - textbox = make_textbox(""); - textbox.caret(0); - textbox.trigger("blur"); - compose_ui.smart_insert(textbox, "```quote\nquoted message\n```\n"); - assert.equal(textbox.insert_text, "```quote\nquoted message\n```\n"); - assert.equal(textbox.val(), "```quote\nquoted message\n```\n"); - assert.ok(textbox.focused); + $textbox = make_textbox(""); + $textbox.caret(0); + $textbox.trigger("blur"); + compose_ui.smart_insert($textbox, "```quote\nquoted message\n```\n"); + assert.equal($textbox.insert_text, "```quote\nquoted message\n```\n"); + assert.equal($textbox.val(), "```quote\nquoted message\n```\n"); + assert.ok($textbox.focused); - textbox = make_textbox(""); - textbox.caret(0); - textbox.trigger("blur"); - compose_ui.smart_insert(textbox, "translated: [Quoting…]\n"); - assert.equal(textbox.insert_text, "translated: [Quoting…]\n"); - assert.equal(textbox.val(), "translated: [Quoting…]\n"); - assert.ok(textbox.focused); + $textbox = make_textbox(""); + $textbox.caret(0); + $textbox.trigger("blur"); + compose_ui.smart_insert($textbox, "translated: [Quoting…]\n"); + assert.equal($textbox.insert_text, "translated: [Quoting…]\n"); + assert.equal($textbox.val(), "translated: [Quoting…]\n"); + assert.ok($textbox.focused); - textbox = make_textbox("abc"); - textbox.caret(3); - textbox.trigger("blur"); - compose_ui.smart_insert(textbox, " test with space"); - assert.equal(textbox.insert_text, " test with space "); - assert.equal(textbox.val(), "abc test with space "); - assert.ok(textbox.focused); + $textbox = make_textbox("abc"); + $textbox.caret(3); + $textbox.trigger("blur"); + compose_ui.smart_insert($textbox, " test with space"); + assert.equal($textbox.insert_text, " test with space "); + assert.equal($textbox.val(), "abc test with space "); + assert.ok($textbox.focused); // Note that we don't have any special logic for strings that are // already surrounded by spaces, since we are usually inserting things @@ -481,14 +481,14 @@ run_test("format_text", () => { wrap_syntax = ""; } - const textarea = $("#compose-textarea"); - textarea.get = () => ({ + const $textarea = $("#compose-textarea"); + $textarea.get = () => ({ setSelectionRange: () => {}, }); function init_textarea(val, range) { - textarea.val = () => val; - textarea.range = () => range; + $textarea.val = () => val; + $textarea.range = () => range; } const italic_syntax = "*"; @@ -502,7 +502,7 @@ run_test("format_text", () => { text: "abc", length: 3, }); - compose_ui.format_text(textarea, "bold"); + compose_ui.format_text($textarea, "bold"); assert.equal(set_text, ""); assert.equal(wrap_selection_called, true); assert.equal(wrap_syntax, bold_syntax); @@ -515,7 +515,7 @@ run_test("format_text", () => { text: "abc", length: 7, }); - compose_ui.format_text(textarea, "bold"); + compose_ui.format_text($textarea, "bold"); assert.equal(set_text, "abc"); assert.equal(wrap_selection_called, false); @@ -527,7 +527,7 @@ run_test("format_text", () => { text: "**abc**", length: 7, }); - compose_ui.format_text(textarea, "bold"); + compose_ui.format_text($textarea, "bold"); assert.equal(set_text, "abc"); assert.equal(wrap_selection_called, false); @@ -539,7 +539,7 @@ run_test("format_text", () => { text: "abc", length: 3, }); - compose_ui.format_text(textarea, "italic"); + compose_ui.format_text($textarea, "italic"); assert.equal(set_text, ""); assert.equal(wrap_selection_called, true); assert.equal(wrap_syntax, italic_syntax); @@ -552,7 +552,7 @@ run_test("format_text", () => { text: "abc", length: 3, }); - compose_ui.format_text(textarea, "italic"); + compose_ui.format_text($textarea, "italic"); assert.equal(set_text, "abc"); assert.equal(wrap_selection_called, false); @@ -564,7 +564,7 @@ run_test("format_text", () => { text: "*abc*", length: 5, }); - compose_ui.format_text(textarea, "italic"); + compose_ui.format_text($textarea, "italic"); assert.equal(set_text, "abc"); assert.equal(wrap_selection_called, false); @@ -576,7 +576,7 @@ run_test("format_text", () => { text: "abc", length: 3, }); - compose_ui.format_text(textarea, "bold"); + compose_ui.format_text($textarea, "bold"); assert.equal(set_text, "*abc*"); assert.equal(wrap_selection_called, false); @@ -588,7 +588,7 @@ run_test("format_text", () => { text: "***abc***", length: 9, }); - compose_ui.format_text(textarea, "bold"); + compose_ui.format_text($textarea, "bold"); assert.equal(set_text, "*abc*"); assert.equal(wrap_selection_called, false); @@ -600,7 +600,7 @@ run_test("format_text", () => { text: "abc", length: 3, }); - compose_ui.format_text(textarea, "italic"); + compose_ui.format_text($textarea, "italic"); assert.equal(set_text, "**abc**"); assert.equal(wrap_selection_called, false); @@ -612,14 +612,14 @@ run_test("format_text", () => { text: "***abc***", length: 9, }); - compose_ui.format_text(textarea, "italic"); + compose_ui.format_text($textarea, "italic"); assert.equal(set_text, "**abc**"); assert.equal(wrap_selection_called, false); }); run_test("markdown_shortcuts", ({override_rewire}) => { let format_text_type; - override_rewire(compose_ui, "format_text", (textarea, type) => { + override_rewire(compose_ui, "format_text", ($textarea, type) => { format_text_type = type; }); @@ -711,21 +711,21 @@ run_test("markdown_shortcuts", ({override_rewire}) => { }); run_test("right-to-left", () => { - const textarea = $("#compose-textarea"); + const $textarea = $("#compose-textarea"); const event = { key: "A", }; - assert.equal(textarea.hasClass("rtl"), false); + assert.equal($textarea.hasClass("rtl"), false); - textarea.val("```quote\nمرحبا"); + $textarea.val("```quote\nمرحبا"); compose_ui.handle_keyup(event, $("#compose-textarea")); - assert.equal(textarea.hasClass("rtl"), true); + assert.equal($textarea.hasClass("rtl"), true); - textarea.val("```quote foo"); - compose_ui.handle_keyup(event, textarea); + $textarea.val("```quote foo"); + compose_ui.handle_keyup(event, $textarea); - assert.equal(textarea.hasClass("rtl"), false); + assert.equal($textarea.hasClass("rtl"), false); }); diff --git a/frontend_tests/node_tests/compose_validate.js b/frontend_tests/node_tests/compose_validate.js index ce45927700..06847db66b 100644 --- a/frontend_tests/node_tests/compose_validate.js +++ b/frontend_tests/node_tests/compose_validate.js @@ -131,10 +131,10 @@ test_ui("validate", ({override, mock_template}) => { $("#compose-send-button").trigger("focus"); $("#compose-send-button .loader").hide(); - const pm_pill_container = $.create("fake-pm-pill-container"); + const $pm_pill_container = $.create("fake-pm-pill-container"); $("#private_message_recipient")[0] = {}; - $("#private_message_recipient").set_parent(pm_pill_container); - pm_pill_container.set_find_results(".input", $("#private_message_recipient")); + $("#private_message_recipient").set_parent($pm_pill_container); + $pm_pill_container.set_find_results(".input", $("#private_message_recipient")); $("#private_message_recipient").before = () => {}; compose_pm_pill.initialize(); @@ -474,38 +474,38 @@ test_ui("test_validate_stream_message_post_policy_full_members_only", () => { test_ui("test_check_overflow_text", () => { page_params.max_message_length = 10000; - const textarea = $("#compose-textarea"); - const indicator = $("#compose_limit_indicator"); - const send_button = $("#compose-send-button"); + const $textarea = $("#compose-textarea"); + const $indicator = $("#compose_limit_indicator"); + const $send_button = $("#compose-send-button"); // Indicator should show red colored text - textarea.val("a".repeat(10000 + 1)); + $textarea.val("a".repeat(10000 + 1)); compose_validate.check_overflow_text(); - assert.ok(indicator.hasClass("over_limit")); - assert.equal(indicator.text(), "10001/10000"); - assert.ok(textarea.hasClass("over_limit")); + assert.ok($indicator.hasClass("over_limit")); + assert.equal($indicator.text(), "10001/10000"); + assert.ok($textarea.hasClass("over_limit")); assert.equal( $("#compose-error-msg").html(), "translated HTML: Message length shouldn't be greater than 10000 characters.", ); - assert.ok(send_button.prop("disabled")); + assert.ok($send_button.prop("disabled")); $("#compose-send-status").stop = () => ({fadeOut: () => {}}); // Indicator should show orange colored text - textarea.val("a".repeat(9000 + 1)); + $textarea.val("a".repeat(9000 + 1)); compose_validate.check_overflow_text(); - assert.ok(!indicator.hasClass("over_limit")); - assert.equal(indicator.text(), "9001/10000"); - assert.ok(!textarea.hasClass("over_limit")); - assert.ok(!send_button.prop("disabled")); + assert.ok(!$indicator.hasClass("over_limit")); + assert.equal($indicator.text(), "9001/10000"); + assert.ok(!$textarea.hasClass("over_limit")); + assert.ok(!$send_button.prop("disabled")); // Indicator must be empty - textarea.val("a".repeat(9000)); + $textarea.val("a".repeat(9000)); compose_validate.check_overflow_text(); - assert.ok(!indicator.hasClass("over_limit")); - assert.equal(indicator.text(), ""); - assert.ok(!textarea.hasClass("over_limit")); + assert.ok(!$indicator.hasClass("over_limit")); + assert.equal($indicator.text(), ""); + assert.ok(!$textarea.hasClass("over_limit")); }); test_ui("test_message_overflow", () => { @@ -736,10 +736,10 @@ test_ui("warn_if_mentioning_unsubscribed_user", ({override, override_rewire, moc } // Simulate that the row was added to the DOM. - const warning_row = $(""); + const $warning_row = $(""); let looked_for_existing; - warning_row.data = (field) => { + $warning_row.data = (field) => { if (field === "user-id") { looked_for_existing = true; return "34"; @@ -750,9 +750,9 @@ test_ui("warn_if_mentioning_unsubscribed_user", ({override, override_rewire, moc throw new Error(`Unknown field ${field}`); }; - const previous_users = $("#compose_invite_users .compose_invite_user"); - previous_users.length = 1; - previous_users[0] = warning_row; + const $previous_users = $("#compose_invite_users .compose_invite_user"); + $previous_users.length = 1; + $previous_users[0] = $warning_row; $("#compose_invite_users").hide(); // Now try to mention the same person again. The template should @@ -788,12 +788,12 @@ test_ui("test warn_if_topic_resolved", ({override, mock_template}) => { stream_data.add_sub(sub); // The error message area where it is shown - const error_area = $("#compose_resolved_topic"); + const $error_area = $("#compose_resolved_topic"); compose_validate.clear_topic_resolved_warning(); // Hack to make this empty for zjquery; this is conceptually done // in the previous line. - error_area.html(""); - assert.ok(!error_area.visible()); + $error_area.html(""); + assert.ok(!$error_area.visible()); compose_state.set_message_type("stream"); compose_state.stream_name("Do not exist"); @@ -802,25 +802,25 @@ test_ui("test warn_if_topic_resolved", ({override, mock_template}) => { // Do not show a warning if stream name does not exist compose_validate.warn_if_topic_resolved(true); - assert.ok(!error_area.visible()); + assert.ok(!$error_area.visible()); compose_state.stream_name("random"); // Show the warning now as stream also exists compose_validate.warn_if_topic_resolved(true); - assert.ok(error_area.visible()); + assert.ok($error_area.visible()); // Call it again with false; this should be a noop. compose_validate.warn_if_topic_resolved(false); - assert.ok(error_area.visible()); + assert.ok($error_area.visible()); compose_state.topic("hello"); // The warning will be cleared now compose_validate.warn_if_topic_resolved(true); - assert.ok(!error_area.visible()); + assert.ok(!$error_area.visible()); // Calling with false won't do anything. compose_validate.warn_if_topic_resolved(false); - assert.ok(!error_area.visible()); + assert.ok(!$error_area.visible()); }); diff --git a/frontend_tests/node_tests/compose_video.js b/frontend_tests/node_tests/compose_video.js index d5ddc16658..f65090e065 100644 --- a/frontend_tests/node_tests/compose_video.js +++ b/frontend_tests/node_tests/compose_video.js @@ -29,12 +29,12 @@ const server_events_dispatch = zrequire("server_events_dispatch"); const compose_ui = zrequire("compose_ui"); const compose = zrequire("compose"); function stub_out_video_calls() { - const elem = $("#below-compose-content .video_link"); - elem.toggle = (show) => { + const $elem = $("#below-compose-content .video_link"); + $elem.toggle = (show) => { if (show) { - elem.show(); + $elem.show(); } else { - elem.hide(); + $elem.hide(); } }; } @@ -78,14 +78,14 @@ test("videos", ({override, override_rewire}) => { (function test_no_provider_video_link_compose_clicked() { let called = false; - const textarea = $.create("target-stub"); - textarea.set_parents_result(".message_edit_form", []); + const $textarea = $.create("target-stub"); + $textarea.set_parents_result(".message_edit_form", []); const ev = { preventDefault: () => {}, stopPropagation: () => {}, target: { - to_$: () => textarea, + to_$: () => $textarea, }, }; @@ -104,14 +104,14 @@ test("videos", ({override, override_rewire}) => { let syntax_to_insert; let called = false; - const textarea = $.create("jitsi-target-stub"); - textarea.set_parents_result(".message_edit_form", []); + const $textarea = $.create("jitsi-target-stub"); + $textarea.set_parents_result(".message_edit_form", []); const ev = { preventDefault: () => {}, stopPropagation: () => {}, target: { - to_$: () => textarea, + to_$: () => $textarea, }, }; @@ -142,14 +142,14 @@ test("videos", ({override, override_rewire}) => { let syntax_to_insert; let called = false; - const textarea = $.create("zoom-target-stub"); - textarea.set_parents_result(".message_edit_form", []); + const $textarea = $.create("zoom-target-stub"); + $textarea.set_parents_result(".message_edit_form", []); const ev = { preventDefault: () => {}, stopPropagation: () => {}, target: { - to_$: () => textarea, + to_$: () => $textarea, }, }; @@ -188,14 +188,14 @@ test("videos", ({override, override_rewire}) => { let syntax_to_insert; let called = false; - const textarea = $.create("bbb-target-stub"); - textarea.set_parents_result(".message_edit_form", []); + const $textarea = $.create("bbb-target-stub"); + $textarea.set_parents_result(".message_edit_form", []); const ev = { preventDefault: () => {}, stopPropagation: () => {}, target: { - to_$: () => textarea, + to_$: () => $textarea, }, }; diff --git a/frontend_tests/node_tests/drafts.js b/frontend_tests/node_tests/drafts.js index b09f4d54b6..926d213b10 100644 --- a/frontend_tests/node_tests/drafts.js +++ b/frontend_tests/node_tests/drafts.js @@ -120,8 +120,8 @@ test("draft_model add", ({override}) => { const ls = localstorage(); assert.equal(ls.get("draft"), undefined); - const unread_count = $(''); - $(".top_left_drafts").set_find_results(".unread_count", unread_count); + const $unread_count = $(''); + $(".top_left_drafts").set_find_results(".unread_count", $unread_count); override(Date, "now", () => 1); const expected = {...draft_1}; @@ -136,8 +136,8 @@ test("draft_model edit", () => { assert.equal(ls.get("draft"), undefined); let id; - const unread_count = $(''); - $(".top_left_drafts").set_find_results(".unread_count", unread_count); + const $unread_count = $(''); + $(".top_left_drafts").set_find_results(".unread_count", $unread_count); with_overrides(({override}) => { override(Date, "now", () => 1); @@ -161,8 +161,8 @@ test("draft_model delete", ({override}) => { const ls = localstorage(); assert.equal(ls.get("draft"), undefined); - const unread_count = $(''); - $(".top_left_drafts").set_find_results(".unread_count", unread_count); + const $unread_count = $(''); + $(".top_left_drafts").set_find_results(".unread_count", $unread_count); override(Date, "now", () => 1); const expected = {...draft_1}; @@ -212,8 +212,8 @@ test("initialize", ({override_rewire}) => { assert.ok(called); }; - const unread_count = $(''); - $(".top_left_drafts").set_find_results(".unread_count", unread_count); + const $unread_count = $(''); + $(".top_left_drafts").set_find_results(".unread_count", $unread_count); drafts.initialize(); }); @@ -239,8 +239,8 @@ test("remove_old_drafts", () => { ls.set("drafts", data); assert.deepEqual(draft_model.get(), data); - const unread_count = $(''); - $(".top_left_drafts").set_find_results(".unread_count", unread_count); + const $unread_count = $(''); + $(".top_left_drafts").set_find_results(".unread_count", $unread_count); drafts.remove_old_drafts(); assert.deepEqual(draft_model.get(), {id3: draft_3}); @@ -256,9 +256,9 @@ test("update_draft", ({override}) => { override(compose_state, "get_message_type", () => "private"); override(compose_state, "private_message_recipient", () => "aaron@zulip.com"); - const container = $(".top_left_drafts"); - const child = $(".unread_count"); - container.set_find_results(".unread_count", child); + const $container = $(".top_left_drafts"); + const $child = $(".unread_count"); + $container.set_find_results(".unread_count", $child); tippy_args = { content: "translated: Saved as draft", @@ -313,8 +313,8 @@ test("delete_all_drafts", () => { ls.set("drafts", data); assert.deepEqual(draft_model.get(), data); - const unread_count = $(''); - $(".top_left_drafts").set_find_results(".unread_count", unread_count); + const $unread_count = $(''); + $(".top_left_drafts").set_find_results(".unread_count", $unread_count); drafts.delete_all_drafts(); assert.deepEqual(draft_model.get(), {}); @@ -451,8 +451,8 @@ test("format_drafts", ({override_rewire, mock_template}) => { expected[0].stream_name = "stream-rename"; - const unread_count = $(''); - $(".top_left_drafts").set_find_results(".unread_count", unread_count); + const $unread_count = $(''); + $(".top_left_drafts").set_find_results(".unread_count", $unread_count); drafts.launch(); timerender.__Rewire__("render_now", stub_render_now); diff --git a/frontend_tests/node_tests/dropdown_list_widget.js b/frontend_tests/node_tests/dropdown_list_widget.js index 8946d469a5..9b5f975278 100644 --- a/frontend_tests/node_tests/dropdown_list_widget.js +++ b/frontend_tests/node_tests/dropdown_list_widget.js @@ -25,12 +25,12 @@ const {DropdownListWidget, MultiSelectDropdownListWidget} = zrequire("dropdown_l // For DropdownListWidget const setup_dropdown_zjquery_data = (name) => { - const input_group = $(".input_group"); - const reset_button = $(".dropdown_list_reset_button"); - input_group.set_find_results(".dropdown_list_reset_button", reset_button); - $(`#${CSS.escape(name)}_widget #${CSS.escape(name)}_name`).closest = () => input_group; + const $input_group = $(".input_group"); + const $reset_button = $(".dropdown_list_reset_button"); + $input_group.set_find_results(".dropdown_list_reset_button", $reset_button); + $(`#${CSS.escape(name)}_widget #${CSS.escape(name)}_name`).closest = () => $input_group; const $widget = $(`#${CSS.escape(name)}_widget #${CSS.escape(name)}_name`); - return {reset_button, $widget}; + return {$reset_button, $widget}; }; run_test("basic_functions", () => { @@ -46,31 +46,31 @@ run_test("basic_functions", () => { render_text: (text) => `rendered: ${text}`, }; - const {reset_button, $widget} = setup_dropdown_zjquery_data(opts.widget_name); + const {$reset_button, $widget} = setup_dropdown_zjquery_data(opts.widget_name); const widget = new DropdownListWidget(opts); assert.equal(widget.value(), "one"); assert.equal(updated_value, undefined); // We haven't 'updated' the widget yet. - assert.ok(reset_button.visible()); + assert.ok($reset_button.visible()); widget.update("two"); assert.equal($widget.text(), "rendered: two"); assert.equal(widget.value(), "two"); assert.equal(updated_value, "two"); - assert.ok(reset_button.visible()); + assert.ok($reset_button.visible()); widget.update(null); assert.equal($widget.text(), "translated: not set"); assert.equal(widget.value(), ""); assert.equal(updated_value, null); - assert.ok(!reset_button.visible()); + assert.ok(!$reset_button.visible()); widget.update("four"); assert.equal($widget.text(), "translated: not set"); assert.equal(widget.value(), "four"); assert.equal(updated_value, "four"); - assert.ok(!reset_button.visible()); + assert.ok(!$reset_button.visible()); }); run_test("no_default_value", () => { @@ -110,7 +110,7 @@ run_test("basic MDLW functions", () => { default_text: $t({defaultMessage: "not set"}), }; - const {reset_button, $widget} = setup_multiselect_dropdown_zjquery_data(opts.widget_name); + const {$reset_button, $widget} = setup_multiselect_dropdown_zjquery_data(opts.widget_name); const widget = new MultiSelectDropdownListWidget(opts); function set_dropdown_variables(widget, value) { @@ -121,7 +121,7 @@ run_test("basic MDLW functions", () => { assert.deepEqual(widget.value(), ["one"]); assert.equal(updated_value, undefined); assert.equal($widget.text(), "one"); - assert.ok(reset_button.visible()); + assert.ok($reset_button.visible()); set_dropdown_variables(widget, ["one", "two"]); widget.update(widget.data_selected); @@ -129,7 +129,7 @@ run_test("basic MDLW functions", () => { assert.equal($widget.text(), "one,two"); assert.deepEqual(widget.value(), ["one", "two"]); assert.deepEqual(updated_value, ["one", "two"]); - assert.ok(reset_button.visible()); + assert.ok($reset_button.visible()); set_dropdown_variables(widget, ["one", "two", "three"]); widget.update(widget.data_selected); @@ -137,7 +137,7 @@ run_test("basic MDLW functions", () => { assert.equal($widget.text(), "translated: 3 selected"); assert.deepEqual(widget.value(), ["one", "two", "three"]); assert.deepEqual(updated_value, ["one", "two", "three"]); - assert.ok(reset_button.visible()); + assert.ok($reset_button.visible()); set_dropdown_variables(widget, null); widget.update(widget.data_selected); @@ -145,7 +145,7 @@ run_test("basic MDLW functions", () => { assert.equal($widget.text(), "translated: not set"); assert.equal(widget.value(), null); assert.equal(updated_value, null); - assert.ok(!reset_button.visible()); + assert.ok(!$reset_button.visible()); set_dropdown_variables(widget, ["one"]); widget.update(widget.data_selected); @@ -153,7 +153,7 @@ run_test("basic MDLW functions", () => { assert.equal($widget.text(), "one"); assert.deepEqual(widget.value(), ["one"]); assert.deepEqual(updated_value, ["one"]); - assert.ok(reset_button.visible()); + assert.ok($reset_button.visible()); }); run_test("MDLW no_default_value", () => { diff --git a/frontend_tests/node_tests/example8.js b/frontend_tests/node_tests/example8.js index a49834000d..70f708d26a 100644 --- a/frontend_tests/node_tests/example8.js +++ b/frontend_tests/node_tests/example8.js @@ -67,7 +67,7 @@ people.add_active_user(kitty); */ run_test("typing_events.render_notifications_for_narrow", ({override_rewire, mock_template}) => { // All typists are rendered in `#typing_notifications`. - const typing_notifications = $("#typing_notifications"); + const $typing_notifications = $("#typing_notifications"); const two_typing_users_ids = [anna.user_id, vronsky.user_id]; const two_typing_users = [anna, vronsky]; @@ -107,7 +107,7 @@ run_test("typing_events.render_notifications_for_narrow", ({override_rewire, moc typing_events.render_notifications_for_narrow(); // Make sure #typing_notifications's html content is set to the rendered template // which we mocked and gave a custom return value. - assert.equal(typing_notifications.html(), two_typing_users_rendered_html); + assert.equal($typing_notifications.html(), two_typing_users_rendered_html); // Now we'll see how setting the second argument to `true` // can be helpful in testing conditionals inside the template. @@ -118,9 +118,9 @@ run_test("typing_events.render_notifications_for_narrow", ({override_rewire, moc // Since we only have two( four_typing_users_ids); typing_events.render_notifications_for_narrow(); - assert.ok(typing_notifications.html().includes("Several people are typing…")); - assert.ok(!typing_notifications.html().includes(`${anna.full_name} is typing…`)); - assert.ok(!typing_notifications.html().includes(`${vronsky.full_name} is typing…`)); - assert.ok(!typing_notifications.html().includes(`${levin.full_name} is typing…`)); - assert.ok(!typing_notifications.html().includes(`${kitty.full_name} is typing…`)); + assert.ok($typing_notifications.html().includes("Several people are typing…")); + assert.ok(!$typing_notifications.html().includes(`${anna.full_name} is typing…`)); + assert.ok(!$typing_notifications.html().includes(`${vronsky.full_name} is typing…`)); + assert.ok(!$typing_notifications.html().includes(`${levin.full_name} is typing…`)); + assert.ok(!$typing_notifications.html().includes(`${kitty.full_name} is typing…`)); }); diff --git a/frontend_tests/node_tests/hashchange.js b/frontend_tests/node_tests/hashchange.js index e7b69e1f43..4a3f161c0c 100644 --- a/frontend_tests/node_tests/hashchange.js +++ b/frontend_tests/node_tests/hashchange.js @@ -8,8 +8,8 @@ const blueslip = require("../zjsunit/zblueslip"); const $ = require("../zjsunit/zjquery"); const {user_settings} = require("../zjsunit/zpage_params"); -let window_stub; -set_global("to_$", () => window_stub); +let $window_stub; +set_global("to_$", () => $window_stub); mock_esm("../../static/js/search", { update_button_visibility: () => {}, @@ -165,7 +165,7 @@ function test_helper({override, override_rewire, change_tab}) { } run_test("hash_interactions", ({override, override_rewire}) => { - window_stub = $.create("window-stub"); + $window_stub = $.create("window-stub"); user_settings.default_view = "recent_topics"; override_rewire(recent_topics_util, "is_visible", () => false); @@ -189,7 +189,7 @@ run_test("hash_interactions", ({override, override_rewire}) => { window.location.hash = "#all_messages"; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([ [overlays, "close_for_hash_change"], [message_viewport, "stop_auto_scrolling"], @@ -199,7 +199,7 @@ run_test("hash_interactions", ({override, override_rewire}) => { ]); helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([ [overlays, "close_for_hash_change"], [message_viewport, "stop_auto_scrolling"], @@ -211,7 +211,7 @@ run_test("hash_interactions", ({override, override_rewire}) => { window.location.hash = "#narrow/stream/Denmark"; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([ [overlays, "close_for_hash_change"], [message_viewport, "stop_auto_scrolling"], @@ -225,7 +225,7 @@ run_test("hash_interactions", ({override, override_rewire}) => { window.location.hash = "#narrow"; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([ [overlays, "close_for_hash_change"], [message_viewport, "stop_auto_scrolling"], @@ -240,7 +240,7 @@ run_test("hash_interactions", ({override, override_rewire}) => { window.location.hash = "#narrow/foo.foo"; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([ [overlays, "close_for_hash_change"], [message_viewport, "stop_auto_scrolling"], @@ -251,7 +251,7 @@ run_test("hash_interactions", ({override, override_rewire}) => { window.location.hash = "#streams/whatever"; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([ [overlays, "close_for_hash_change"], [stream_settings_ui, "launch"], @@ -261,7 +261,7 @@ run_test("hash_interactions", ({override, override_rewire}) => { window.location.hash = "#reload:send_after_reload=0..."; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([]); // If it's reload hash it shouldn't show the default view. assert.equal(recent_topics_ui_shown, false); @@ -269,25 +269,25 @@ run_test("hash_interactions", ({override, override_rewire}) => { window.location.hash = "#keyboard-shortcuts/whatever"; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([[overlays, "close_for_hash_change"], "info: keyboard-shortcuts"]); window.location.hash = "#message-formatting/whatever"; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([[overlays, "close_for_hash_change"], "info: message-formatting"]); window.location.hash = "#search-operators/whatever"; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([[overlays, "close_for_hash_change"], "info: search-operators"]); window.location.hash = "#drafts"; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([ [overlays, "close_for_hash_change"], [drafts, "launch"], @@ -296,7 +296,7 @@ run_test("hash_interactions", ({override, override_rewire}) => { window.location.hash = "#settings/alert-words"; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([ [overlays, "close_for_hash_change"], [settings, "launch"], @@ -305,7 +305,7 @@ run_test("hash_interactions", ({override, override_rewire}) => { window.location.hash = "#organization/user-list-admin"; helper.clear_events(); - window_stub.trigger("hashchange"); + $window_stub.trigger("hashchange"); helper.assert_events([ [overlays, "close_for_hash_change"], [admin, "launch"], diff --git a/frontend_tests/node_tests/input_pill.js b/frontend_tests/node_tests/input_pill.js index 01e6fca4be..21be4c2bfc 100644 --- a/frontend_tests/node_tests/input_pill.js +++ b/frontend_tests/node_tests/input_pill.js @@ -69,12 +69,12 @@ run_test("basics", ({override_rewire, mock_template}) => { blueslip.expect("error", "Pill needs container."); input_pill.create(config); - const pill_input = $.create("pill_input"); - const container = $.create("container"); - container.set_find_results(".input", pill_input); + const $pill_input = $.create("pill_input"); + const $container = $.create("container"); + $container.set_find_results(".input", $pill_input); blueslip.expect("error", "Pill needs create_item_from_text"); - config.container = container; + config.$container = $container; input_pill.create(config); blueslip.expect("error", "Pill needs get_text_from_item"); @@ -101,9 +101,9 @@ run_test("basics", ({override_rewire, mock_template}) => { let inserted_before; const expected_html = pill_html("JavaScript", "some_id1", example_img_link, status_emoji_info); - pill_input.before = (elem) => { + $pill_input.before = ($elem) => { inserted_before = true; - assert.equal(elem.html(), expected_html); + assert.equal($elem.html(), expected_html); }; widget.appendValidatedData(item); @@ -134,27 +134,27 @@ function set_up() { }, }; - const pill_input = $.create("pill_input"); + const $pill_input = $.create("pill_input"); - pill_input[0] = {}; - pill_input.before = () => {}; + $pill_input[0] = {}; + $pill_input.before = () => {}; const create_item_from_text = (text) => items[text]; - const container = $.create("container"); - container.set_find_results(".input", pill_input); + const $container = $.create("container"); + $container.set_find_results(".input", $pill_input); const config = { - container, + $container, create_item_from_text, get_text_from_item: (item) => item.display_value, }; return { config, - pill_input, + $pill_input, items, - container, + $container, }; } @@ -167,16 +167,16 @@ run_test("copy from pill", ({override_rewire, mock_template}) => { override_random_id({override_rewire}); const info = set_up(); const config = info.config; - const container = info.container; + const $container = info.$container; const widget = input_pill.create(config); widget.appendValue("blue,red"); - const copy_handler = container.get_on_handler("copy", ".pill"); + const copy_handler = $container.get_on_handler("copy", ".pill"); let copied_text; - const pill_stub = { + const $pill_stub = { data: (field) => { assert.equal(field, "id"); return "some_id2"; @@ -195,7 +195,7 @@ run_test("copy from pill", ({override_rewire, mock_template}) => { preventDefault: noop, }; - container.set_find_results(":focus", pill_stub); + $container.set_find_results(":focus", $pill_stub); copy_handler(e); @@ -210,12 +210,12 @@ run_test("paste to input", ({mock_template}) => { const info = set_up(); const config = info.config; - const container = info.container; + const $container = info.$container; const items = info.items; const widget = input_pill.create(config); - const paste_handler = container.get_on_handler("paste", ".input"); + const paste_handler = $container.get_on_handler("paste", ".input"); const paste_text = "blue,yellow"; @@ -233,7 +233,7 @@ run_test("paste to input", ({mock_template}) => { document.execCommand = (cmd, _, text) => { assert.equal(cmd, "insertText"); - container.find(".input").text(text); + $container.find(".input").text(text); }; paste_handler(e); @@ -257,12 +257,12 @@ run_test("arrows on pills", ({mock_template}) => { const info = set_up(); const config = info.config; - const container = info.container; + const $container = info.$container; const widget = input_pill.create(config); widget.appendValue("blue,red"); - const key_handler = container.get_on_handler("keydown", ".pill"); + const key_handler = $container.get_on_handler("keydown", ".pill"); function test_key(c) { key_handler({ @@ -273,7 +273,7 @@ run_test("arrows on pills", ({mock_template}) => { let prev_focused = false; let next_focused = false; - const pill_stub = { + const $pill_stub = { prev: () => ({ trigger: (type) => { if (type === "focus") { @@ -290,7 +290,7 @@ run_test("arrows on pills", ({mock_template}) => { }), }; - container.set_find_results(".pill:focus", pill_stub); + $container.set_find_results(".pill:focus", $pill_stub); // We use the same stub to test both arrows, since we don't // actually cause any real state changes here. We stub out @@ -310,16 +310,16 @@ run_test("left arrow on input", ({mock_template}) => { const info = set_up(); const config = info.config; - const container = info.container; + const $container = info.$container; const widget = input_pill.create(config); widget.appendValue("blue,red"); - const key_handler = container.get_on_handler("keydown", ".input"); + const key_handler = $container.get_on_handler("keydown", ".input"); let last_pill_focused = false; - container.set_find_results(".pill", { + $container.set_find_results(".pill", { last: () => ({ trigger: (type) => { if (type === "focus") { @@ -345,17 +345,17 @@ run_test("comma", ({mock_template}) => { const info = set_up(); const config = info.config; const items = info.items; - const pill_input = info.pill_input; - const container = info.container; + const $pill_input = info.$pill_input; + const $container = info.$container; const widget = input_pill.create(config); widget.appendValue("blue,red"); assert.deepEqual(widget.items(), [items.blue, items.red]); - const key_handler = container.get_on_handler("keydown", ".input"); + const key_handler = $container.get_on_handler("keydown", ".input"); - pill_input.text(" yel"); + $pill_input.text(" yel"); key_handler({ key: ",", @@ -364,7 +364,7 @@ run_test("comma", ({mock_template}) => { assert.deepEqual(widget.items(), [items.blue, items.red]); - pill_input.text(" yellow"); + $pill_input.text(" yellow"); key_handler({ key: ",", @@ -383,14 +383,14 @@ run_test("Enter key with text", ({mock_template}) => { const info = set_up(); const config = info.config; const items = info.items; - const container = info.container; + const $container = info.$container; const widget = input_pill.create(config); widget.appendValue("blue,red"); assert.deepEqual(widget.items(), [items.blue, items.red]); - const key_handler = container.get_on_handler("keydown", ".input"); + const key_handler = $container.get_on_handler("keydown", ".input"); key_handler({ key: "Enter", @@ -415,13 +415,13 @@ run_test("insert_remove", ({override_rewire, mock_template}) => { const info = set_up(); const config = info.config; - const pill_input = info.pill_input; + const $pill_input = info.$pill_input; const items = info.items; - const container = info.container; + const $container = info.$container; const inserted_html = []; - pill_input.before = (elem) => { - inserted_html.push(elem.html()); + $pill_input.before = ($elem) => { + inserted_html.push($elem.html()); }; const widget = input_pill.create(config); @@ -450,11 +450,11 @@ run_test("insert_remove", ({override_rewire, mock_template}) => { assert.deepEqual(widget.items(), [items.blue, items.red, items.yellow]); - assert.equal(pill_input.text(), "chartreuse, mauve"); + assert.equal($pill_input.text(), "chartreuse, mauve"); assert.equal(widget.is_pending(), true); widget.clear_text(); - assert.equal(pill_input.text(), ""); + assert.equal($pill_input.text(), ""); assert.equal(widget.is_pending(), false); let color_removed; @@ -469,7 +469,7 @@ run_test("insert_remove", ({override_rewire, mock_template}) => { pill.$element.remove = set_colored_removed_func(pill.item.display_value); } - let key_handler = container.get_on_handler("keydown", ".input"); + let key_handler = $container.get_on_handler("keydown", ".input"); key_handler({ key: "Backspace", @@ -486,7 +486,7 @@ run_test("insert_remove", ({override_rewire, mock_template}) => { let next_pill_focused = false; - const next_pill_stub = { + const $next_pill_stub = { trigger: (type) => { if (type === "focus") { next_pill_focused = true; @@ -494,17 +494,17 @@ run_test("insert_remove", ({override_rewire, mock_template}) => { }, }; - const focus_pill_stub = { - next: () => next_pill_stub, + const $focus_pill_stub = { + next: () => $next_pill_stub, data: (field) => { assert.equal(field, "id"); return "some_id1"; }, }; - container.set_find_results(".pill:focus", focus_pill_stub); + $container.set_find_results(".pill:focus", $focus_pill_stub); - key_handler = container.get_on_handler("keydown", ".pill"); + key_handler = $container.get_on_handler("keydown", ".pill"); key_handler({ key: "Backspace", preventDefault: noop, @@ -526,7 +526,7 @@ run_test("exit button on pill", ({override_rewire, mock_template}) => { const config = info.config; const items = info.items; - const container = info.container; + const $container = info.$container; const widget = input_pill.create(config); @@ -539,7 +539,7 @@ run_test("exit button on pill", ({override_rewire, mock_template}) => { let next_pill_focused = false; - const next_pill_stub = { + const $next_pill_stub = { trigger: (type) => { if (type === "focus") { next_pill_focused = true; @@ -547,8 +547,8 @@ run_test("exit button on pill", ({override_rewire, mock_template}) => { }, }; - const curr_pill_stub = { - next: () => next_pill_stub, + const $curr_pill_stub = { + next: () => $next_pill_stub, data: (field) => { assert.equal(field, "id"); return "some_id1"; @@ -559,7 +559,7 @@ run_test("exit button on pill", ({override_rewire, mock_template}) => { to_$: () => ({ closest: (sel) => { assert.equal(sel, ".pill"); - return curr_pill_stub; + return $curr_pill_stub; }, }), }; @@ -567,7 +567,7 @@ run_test("exit button on pill", ({override_rewire, mock_template}) => { const e = { stopPropagation: noop, }; - const exit_click_handler = container.get_on_handler("click", ".exit"); + const exit_click_handler = $container.get_on_handler("click", ".exit"); exit_click_handler.call(exit_button_stub, e); @@ -580,13 +580,13 @@ run_test("misc things", () => { const info = set_up(); const config = info.config; - const container = info.container; - const pill_input = info.pill_input; + const $container = info.$container; + const $pill_input = info.$pill_input; const widget = input_pill.create(config); // animation - const animation_end_handler = container.get_on_handler("animationend", ".input"); + const animation_end_handler = $container.get_on_handler("animationend", ".input"); let shake_class_removed = false; @@ -614,17 +614,17 @@ run_test("misc things", () => { }); // click on container - const container_click_handler = container.get_on_handler("click"); + const container_click_handler = $container.get_on_handler("click"); - const stub = $.create("the-pill-container"); - stub.set_find_results(".input", pill_input); - stub.is = (sel) => { + const $stub = $.create("the-pill-container"); + $stub.set_find_results(".input", $pill_input); + $stub.is = (sel) => { assert.equal(sel, ".pill-container"); return true; }; const this_ = { - to_$: () => stub, + to_$: () => $stub, }; container_click_handler.call(this_, {target: this_}); @@ -637,18 +637,18 @@ run_test("appendValue/clear", ({mock_template}) => { return html; }); - const pill_input = $.create("pill_input"); - const container = $.create("container"); - container.set_find_results(".input", pill_input); + const $pill_input = $.create("pill_input"); + const $container = $.create("container"); + $container.set_find_results(".input", $pill_input); const config = { - container, + $container, create_item_from_text: (s) => ({type: "color", display_value: s}), get_text_from_item: (s) => s.display_value, }; - pill_input.before = () => {}; - pill_input[0] = {}; + $pill_input.before = () => {}; + $pill_input[0] = {}; const widget = input_pill.create(config); @@ -672,5 +672,5 @@ run_test("appendValue/clear", ({mock_template}) => { // Note that we remove colors in the reverse order that we inserted. assert.deepEqual(removed_colors, ["blue", "yellow", "red"]); - assert.equal(pill_input[0].textContent, ""); + assert.equal($pill_input[0].textContent, ""); }); diff --git a/frontend_tests/node_tests/keydown_util.js b/frontend_tests/node_tests/keydown_util.js index 31d536768b..5f5a0c26ab 100644 --- a/frontend_tests/node_tests/keydown_util.js +++ b/frontend_tests/node_tests/keydown_util.js @@ -7,9 +7,9 @@ const $ = require("../zjsunit/zjquery"); const keydown_util = zrequire("keydown_util"); run_test("test_early_returns", () => { - const stub = $.create("stub"); + const $stub = $.create("stub"); const opts = { - elem: stub, + $elem: $stub, handlers: { ArrowLeft: () => { throw new Error("do not dispatch this with alt key"); @@ -24,14 +24,14 @@ run_test("test_early_returns", () => { key: "a", // not in keys }; - stub.trigger(e1); + $stub.trigger(e1); const e2 = { type: "keydown", key: "Enter", // no handler }; - stub.trigger(e2); + $stub.trigger(e2); const e3 = { type: "keydown", @@ -39,5 +39,5 @@ run_test("test_early_returns", () => { altKey: true, // let browser handle }; - stub.trigger(e3); + $stub.trigger(e3); }); diff --git a/frontend_tests/node_tests/lightbox.js b/frontend_tests/node_tests/lightbox.js index 3a132d6dcd..871184eeeb 100644 --- a/frontend_tests/node_tests/lightbox.js +++ b/frontend_tests/node_tests/lightbox.js @@ -30,21 +30,21 @@ function test(label, f) { } test("pan_and_zoom", ({override_rewire}) => { - const img = $.create("img-stub"); - const link = $.create("link-stub"); - const msg = $.create("msg-stub"); + const $img = $.create("img-stub"); + const $link = $.create("link-stub"); + const $msg = $.create("msg-stub"); - $(img).closest = () => []; + $($img).closest = () => []; - img.set_parent(link); - link.closest = () => msg; + $img.set_parent($link); + $link.closest = () => $msg; - override_rewire(rows, "id", (row) => { - assert.equal(row, msg); + override_rewire(rows, "id", ($row) => { + assert.equal($row, $msg); return 1234; }); - img.attr("src", "example"); + $img.attr("src", "example"); let fetched_zid; @@ -55,25 +55,25 @@ test("pan_and_zoom", ({override_rewire}) => { override_rewire(lightbox, "render_lightbox_list_images", () => {}); const open_image = lightbox.build_open_image_function(); - open_image(img); + open_image($img); assert.equal(fetched_zid, 1234); }); test("youtube", ({override_rewire}) => { const href = "https://youtube.com/some-random-clip"; - const img = $.create("img-stub"); - const link = $.create("link-stub"); - const msg = $.create("msg-stub"); + const $img = $.create("img-stub"); + const $link = $.create("link-stub"); + const $msg = $.create("msg-stub"); - override_rewire(rows, "id", (row) => { - assert.equal(row, msg); + override_rewire(rows, "id", ($row) => { + assert.equal($row, $msg); return 4321; }); - $(img).attr("src", href); + $($img).attr("src", href); - $(img).closest = (sel) => { + $($img).closest = (sel) => { if (sel === ".youtube-video") { // We just need a nonempty array to // set is_youtube_video to true. @@ -82,13 +82,13 @@ test("youtube", ({override_rewire}) => { return []; }; - img.set_parent(link); - link.closest = () => msg; - link.attr("href", href); + $img.set_parent($link); + $link.closest = () => $msg; + $link.attr("href", href); override_rewire(lightbox, "render_lightbox_list_images", () => {}); const open_image = lightbox.build_open_image_function(); - open_image(img); + open_image($img); assert.equal($(".image-actions .open").attr("href"), href); }); diff --git a/frontend_tests/node_tests/list_cursor.js b/frontend_tests/node_tests/list_cursor.js index c07b0238d6..0aae475143 100644 --- a/frontend_tests/node_tests/list_cursor.js +++ b/frontend_tests/node_tests/list_cursor.js @@ -70,12 +70,12 @@ run_test("single item list", ({override}) => { }); const cursor = new ListCursor(conf); - const li_stub = { + const $li_stub = { length: 1, addClass: () => {}, }; - override(conf.list, "find_li", () => li_stub); + override(conf.list, "find_li", () => $li_stub); override(cursor, "adjust_scroll", () => {}); cursor.go_to(valid_key); diff --git a/frontend_tests/node_tests/list_widget.js b/frontend_tests/node_tests/list_widget.js index 1fb36703ce..53ca433f82 100644 --- a/frontend_tests/node_tests/list_widget.js +++ b/frontend_tests/node_tests/list_widget.js @@ -41,81 +41,81 @@ const ListWidget = zrequire("list_widget"); // in the real code. function make_container() { - const container = {}; + const $container = {}; - container.length = () => 1; - container.is = () => false; - container.css = (prop) => { + $container.length = () => 1; + $container.is = () => false; + $container.css = (prop) => { assert.equal(prop, "max-height"); return "none"; }; // Make our append function just set a field we can // check in our tests. - container.append = (data) => { - container.appended_data = data; + $container.append = ($data) => { + $container.$appended_data = $data; }; - return container; + return $container; } function make_scroll_container() { - const scroll_container = {}; + const $scroll_container = {}; - scroll_container.cleared = false; + $scroll_container.cleared = false; // Capture the scroll callback so we can call it in // our tests. - scroll_container.on = (ev, f) => { + $scroll_container.on = (ev, f) => { assert.equal(ev, "scroll.list_widget_container"); - scroll_container.call_scroll = () => { - f.call(scroll_container); + $scroll_container.call_scroll = () => { + f.call($scroll_container); }; }; - scroll_container.off = (ev) => { + $scroll_container.off = (ev) => { assert.equal(ev, "scroll.list_widget_container"); - scroll_container.cleared = true; + $scroll_container.cleared = true; }; - return scroll_container; + return $scroll_container; } function make_sort_container() { - const sort_container = {}; + const $sort_container = {}; - sort_container.cleared = false; + $sort_container.cleared = false; - sort_container.on = (ev, sel, f) => { + $sort_container.on = (ev, sel, f) => { assert.equal(ev, "click.list_widget_sort"); assert.equal(sel, "[data-sort]"); - sort_container.f = f; + $sort_container.f = f; }; - sort_container.off = (ev) => { + $sort_container.off = (ev) => { assert.equal(ev, "click.list_widget_sort"); - sort_container.cleared = true; + $sort_container.cleared = true; }; - return sort_container; + return $sort_container; } function make_filter_element() { - const element = {}; + const $element = {}; - element.cleared = false; + $element.cleared = false; - element.on = (ev, f) => { + $element.on = (ev, f) => { assert.equal(ev, "input.list_widget_filter"); - element.f = f; + $element.f = f; }; - element.off = (ev) => { + $element.off = (ev) => { assert.equal(ev, "input.list_widget_filter"); - element.cleared = true; + $element.cleared = true; }; - return element; + return $element; } function make_search_input() { @@ -143,15 +143,15 @@ function div(item) { } run_test("scrolling", () => { - const container = make_container(); - const scroll_container = make_scroll_container(); + const $container = make_container(); + const $scroll_container = make_scroll_container(); const items = []; let get_scroll_element_called = false; - ui.get_scroll_element = (element) => { + ui.get_scroll_element = ($element) => { get_scroll_element_called = true; - return element; + return $element; }; for (let i = 0; i < 200; i += 1) { @@ -160,38 +160,38 @@ run_test("scrolling", () => { const opts = { modifier: (item) => item, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }; - container.html = (html) => { + $container.html = (html) => { assert.equal(html, ""); }; - ListWidget.create(container, items, opts); + ListWidget.create($container, items, opts); - assert.deepEqual(container.appended_data.html(), items.slice(0, 80).join("")); + assert.deepEqual($container.$appended_data.html(), items.slice(0, 80).join("")); assert.equal(get_scroll_element_called, true); // Set up our fake geometry so it forces a scroll action. - scroll_container.scrollTop = 180; - scroll_container.clientHeight = 100; - scroll_container.scrollHeight = 260; + $scroll_container.scrollTop = 180; + $scroll_container.clientHeight = 100; + $scroll_container.scrollHeight = 260; // Scrolling gets the next two elements from the list into // our widget. - scroll_container.call_scroll(); - assert.deepEqual(container.appended_data.html(), items.slice(80, 100).join("")); + $scroll_container.call_scroll(); + assert.deepEqual($container.$appended_data.html(), items.slice(80, 100).join("")); }); run_test("not_scrolling", () => { - const container = make_container(); - const scroll_container = make_scroll_container(); + const $container = make_container(); + const $scroll_container = make_scroll_container(); const items = []; let get_scroll_element_called = false; - ui.get_scroll_element = (element) => { + ui.get_scroll_element = ($element) => { get_scroll_element_called = true; - return element; + return $element; }; let post_scroll__pre_render_callback_called = false; @@ -211,54 +211,54 @@ run_test("not_scrolling", () => { const opts = { modifier: (item) => item, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, is_scroll_position_for_render: () => false, post_scroll__pre_render_callback, get_min_load_count, }; - container.html = (html) => { + $container.html = (html) => { assert.equal(html, ""); }; - ListWidget.create(container, items, opts); + ListWidget.create($container, items, opts); - assert.deepEqual(container.appended_data.html(), items.slice(0, 80).join("")); + assert.deepEqual($container.$appended_data.html(), items.slice(0, 80).join("")); assert.equal(get_scroll_element_called, true); // Set up our fake geometry. - scroll_container.scrollTop = 180; - scroll_container.clientHeight = 100; - scroll_container.scrollHeight = 260; + $scroll_container.scrollTop = 180; + $scroll_container.clientHeight = 100; + $scroll_container.scrollHeight = 260; // Since `should_render` is always false, no elements will be // added regardless of scrolling. - scroll_container.call_scroll(); - // appended_data remains the same. - assert.deepEqual(container.appended_data.html(), items.slice(0, 80).join("")); + $scroll_container.call_scroll(); + // $appended_data remains the same. + assert.deepEqual($container.$appended_data.html(), items.slice(0, 80).join("")); assert.equal(post_scroll__pre_render_callback_called, true); assert.equal(get_min_load_count_called, true); }); run_test("filtering", () => { - const container = make_container(); - const scroll_container = make_scroll_container(); + const $container = make_container(); + const $scroll_container = make_scroll_container(); - const search_input = make_search_input(); + const $search_input = make_search_input(); const list = ["apple", "banana", "carrot", "dog", "egg", "fence", "grape"]; const opts = { filter: { - element: search_input, + $element: $search_input, predicate: (item, value) => item.includes(value), }, modifier: (item) => div(item), - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }; - container.html = (html) => { + $container.html = (html) => { assert.equal(html, ""); }; - const widget = ListWidget.create(container, list, opts); + const widget = ListWidget.create($container, list, opts); let expected_html = "
apple
" + @@ -269,45 +269,45 @@ run_test("filtering", () => { "
fence
" + "
grape
"; - assert.deepEqual(container.appended_data.html(), expected_html); + assert.deepEqual($container.$appended_data.html(), expected_html); // Filtering will pick out dog/egg/grape when we put "g" // into our search input. (This uses the default filter, which // is a glorified indexOf call.) - search_input.val = () => "g"; - search_input.simulate_input_event(); + $search_input.val = () => "g"; + $search_input.simulate_input_event(); assert.deepEqual(widget.get_current_list(), ["dog", "egg", "grape"]); expected_html = "
dog
egg
grape
"; - assert.deepEqual(container.appended_data.html(), expected_html); + assert.deepEqual($container.$appended_data.html(), expected_html); // We can insert new data into the widget. const new_data = ["greta", "faye", "gary", "frank", "giraffe", "fox"]; widget.replace_list_data(new_data); expected_html = "
greta
gary
giraffe
"; - assert.deepEqual(container.appended_data.html(), expected_html); + assert.deepEqual($container.$appended_data.html(), expected_html); }); run_test("no filtering", () => { - const container = make_container(); - const scroll_container = make_scroll_container(); - container.html = () => {}; + const $container = make_container(); + const $scroll_container = make_scroll_container(); + $container.html = () => {}; let callback_called = false; // Opts does not require a filter key. const opts = { modifier: (item) => div(item), - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, callback_after_render: () => { callback_called = true; }, }; - const widget = ListWidget.create(container, ["apple", "banana"], opts); + const widget = ListWidget.create($container, ["apple", "banana"], opts); widget.render(); assert.deepEqual(callback_called, true); const expected_html = "
apple
banana
"; - assert.deepEqual(container.appended_data.html(), expected_html); + assert.deepEqual($container.$appended_data.html(), expected_html); }); function sort_button(opts) { @@ -336,7 +336,7 @@ function sort_button(opts) { const classList = new Set(); - const button = { + const $button = { data, closest: lookup(".progressive-table-wrapper", { data: lookup("list-widget", opts.list_name), @@ -351,47 +351,47 @@ function sort_button(opts) { siblings: lookup(".active", { removeClass: (cls) => { assert.equal(cls, "active"); - button.siblings_deactivated = true; + $button.siblings_deactivated = true; }, }), siblings_deactivated: false, - to_jquery: () => button, + to_jquery: () => $button, }; - return button; + return $button; } run_test("wire up filter element", () => { const lst = ["alice", "JESSE", "moses", "scott", "Sean", "Xavier"]; - const container = make_container(); - const scroll_container = make_scroll_container(); - const filter_element = make_filter_element(); + const $container = make_container(); + const $scroll_container = make_scroll_container(); + const $filter_element = make_filter_element(); // We don't care about what gets drawn initially. - container.html = () => {}; + $container.html = () => {}; const opts = { filter: { filterer: (list, value) => list.filter((item) => item.toLowerCase().includes(value)), - element: filter_element, + $element: $filter_element, }, modifier: (s) => "(" + s + ")", - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }; - ListWidget.create(container, lst, opts); - filter_element.f.apply({value: "se"}); - assert.equal(container.appended_data.html(), "(JESSE)(moses)(Sean)"); + ListWidget.create($container, lst, opts); + $filter_element.f.apply({value: "se"}); + assert.equal($container.$appended_data.html(), "(JESSE)(moses)(Sean)"); }); run_test("sorting", () => { - const container = make_container(); - const scroll_container = make_scroll_container(); - const sort_container = make_sort_container(); + const $container = make_container(); + const $scroll_container = make_scroll_container(); + const $sort_container = make_sort_container(); let cleared; - container.html = (html) => { + $container.html = (html) => { assert.equal(html, ""); cleared = true; }; @@ -406,22 +406,22 @@ run_test("sorting", () => { const opts = { name: "sorting-list", - parent_container: sort_container, + $parent_container: $sort_container, modifier: (item) => div(item.name) + div(item.salary), filter: { predicate: () => true, }, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }; function html_for(people) { return people.map((item) => opts.modifier(item)).join(""); } - ListWidget.create(container, list, opts); + ListWidget.create($container, list, opts); let button_opts; - let button; + let $button; let expected_html; button_opts = { @@ -431,31 +431,31 @@ run_test("sorting", () => { active: false, }; - button = sort_button(button_opts); + $button = sort_button(button_opts); - sort_container.f.apply(button); + $sort_container.f.apply($button); assert.ok(cleared); - assert.ok(button.siblings_deactivated); + assert.ok($button.siblings_deactivated); expected_html = html_for([alice, bob, cal, dave, ellen]); - assert.deepEqual(container.appended_data.html(), expected_html); + assert.deepEqual($container.$appended_data.html(), expected_html); // Hit same button again to reverse the data. cleared = false; - sort_container.f.apply(button); + $sort_container.f.apply($button); assert.ok(cleared); expected_html = html_for([ellen, dave, cal, bob, alice]); - assert.deepEqual(container.appended_data.html(), expected_html); - assert.ok(button.hasClass("descend")); + assert.deepEqual($container.$appended_data.html(), expected_html); + assert.ok($button.hasClass("descend")); // And then hit a third time to go back to the forward sort. cleared = false; - sort_container.f.apply(button); + $sort_container.f.apply($button); assert.ok(cleared); expected_html = html_for([alice, bob, cal, dave, ellen]); - assert.deepEqual(container.appended_data.html(), expected_html); - assert.ok(!button.hasClass("descend")); + assert.deepEqual($container.$appended_data.html(), expected_html); + assert.ok(!$button.hasClass("descend")); // Now try a numeric sort. button_opts = { @@ -465,32 +465,32 @@ run_test("sorting", () => { active: false, }; - button = sort_button(button_opts); + $button = sort_button(button_opts); cleared = false; - button.siblings_deactivated = false; + $button.siblings_deactivated = false; - sort_container.f.apply(button); + $sort_container.f.apply($button); assert.ok(cleared); - assert.ok(button.siblings_deactivated); + assert.ok($button.siblings_deactivated); expected_html = html_for([dave, cal, bob, alice, ellen]); - assert.deepEqual(container.appended_data.html(), expected_html); + assert.deepEqual($container.$appended_data.html(), expected_html); // Hit same button again to reverse the numeric sort. cleared = false; - sort_container.f.apply(button); + $sort_container.f.apply($button); assert.ok(cleared); expected_html = html_for([ellen, alice, bob, cal, dave]); - assert.deepEqual(container.appended_data.html(), expected_html); - assert.ok(button.hasClass("descend")); + assert.deepEqual($container.$appended_data.html(), expected_html); + assert.ok($button.hasClass("descend")); }); run_test("custom sort", () => { - const container = make_container(); - const scroll_container = make_scroll_container(); - container.html = () => {}; + const $container = make_container(); + const $scroll_container = make_scroll_container(); + $container.html = () => {}; const n42 = {x: 6, y: 7}; const n43 = {x: 1, y: 43}; @@ -506,7 +506,7 @@ run_test("custom sort", () => { return a.x * a.y - b.x * b.y; } - ListWidget.create(container, list, { + ListWidget.create($container, list, { name: "custom-sort-list", modifier: (n) => "(" + n.x + ", " + n.y + ")", sort_fields: { @@ -514,15 +514,15 @@ run_test("custom sort", () => { x_value: sort_by_x, }, init_sort: [sort_by_product], - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); - assert.deepEqual(container.appended_data.html(), "(6, 7)(1, 43)(4, 11)"); + assert.deepEqual($container.$appended_data.html(), "(6, 7)(1, 43)(4, 11)"); const widget = ListWidget.get("custom-sort-list"); widget.sort("x_value"); - assert.deepEqual(container.appended_data.html(), "(1, 43)(4, 11)(6, 7)"); + assert.deepEqual($container.$appended_data.html(), "(1, 43)(4, 11)(6, 7)"); // We can sort without registering the function, too. function sort_by_y(a, b) { @@ -530,97 +530,97 @@ run_test("custom sort", () => { } widget.sort(sort_by_y); - assert.deepEqual(container.appended_data.html(), "(6, 7)(4, 11)(1, 43)"); + assert.deepEqual($container.$appended_data.html(), "(6, 7)(4, 11)(1, 43)"); }); run_test("clear_event_handlers", () => { - const container = make_container(); - const scroll_container = make_scroll_container(); - const sort_container = make_sort_container(); - const filter_element = make_filter_element(); + const $container = make_container(); + const $scroll_container = make_scroll_container(); + const $sort_container = make_sort_container(); + const $filter_element = make_filter_element(); // We don't care about actual data for this test. const list = []; - container.html = () => {}; + $container.html = () => {}; const opts = { name: "list-we-create-twice", - parent_container: sort_container, + $parent_container: $sort_container, modifier: () => {}, filter: { - element: filter_element, + $element: $filter_element, predicate: () => true, }, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }; // Create it the first time. - ListWidget.create(container, list, opts); - assert.equal(sort_container.cleared, false); - assert.equal(scroll_container.cleared, false); - assert.equal(filter_element.cleared, false); + ListWidget.create($container, list, opts); + assert.equal($sort_container.cleared, false); + assert.equal($scroll_container.cleared, false); + assert.equal($filter_element.cleared, false); // The second time we'll clear the old events. - ListWidget.create(container, list, opts); - assert.equal(sort_container.cleared, true); - assert.equal(scroll_container.cleared, true); - assert.equal(filter_element.cleared, true); + ListWidget.create($container, list, opts); + assert.equal($sort_container.cleared, true); + assert.equal($scroll_container.cleared, true); + assert.equal($filter_element.cleared, true); }); run_test("errors", () => { // We don't care about actual data for this test. const list = ["stub"]; - const container = make_container(); - const scroll_container = make_scroll_container(); + const $container = make_container(); + const $scroll_container = make_scroll_container(); blueslip.expect("error", "Need opts to create widget."); - ListWidget.create(container, list); + ListWidget.create($container, list); blueslip.reset(); - blueslip.expect("error", "simplebar_container is missing."); - ListWidget.create(container, list, { + blueslip.expect("error", "$simplebar_container is missing."); + ListWidget.create($container, list, { modifier: "hello world", }); blueslip.reset(); blueslip.expect("error", "get_item should be a function"); - ListWidget.create(container, list, { + ListWidget.create($container, list, { get_item: "not a function", - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); blueslip.reset(); blueslip.expect("error", "Filter predicate is not a function."); - ListWidget.create(container, list, { + ListWidget.create($container, list, { filter: { predicate: "wrong type", }, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); blueslip.reset(); blueslip.expect("error", "Filterer and predicate are mutually exclusive."); - ListWidget.create(container, list, { + ListWidget.create($container, list, { filter: { filterer: () => true, predicate: () => true, }, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); blueslip.reset(); blueslip.expect("error", "Filter filterer is not a function (or missing)."); - ListWidget.create(container, list, { + ListWidget.create($container, list, { filter: {}, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); blueslip.reset(); - container.html = () => {}; + $container.html = () => {}; blueslip.expect("error", "List item is not a string: 999"); - ListWidget.create(container, list, { + ListWidget.create($container, list, { modifier: () => 999, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); blueslip.reset(); }); @@ -648,14 +648,14 @@ run_test("sort helpers", () => { }); run_test("replace_list_data w/filter update", () => { - const container = make_container(); - const scroll_container = make_scroll_container(); - container.html = () => {}; + const $container = make_container(); + const $scroll_container = make_scroll_container(); + $container.html = () => {}; const list = [1, 2, 3, 4]; let num_updates = 0; - ListWidget.create(container, list, { + ListWidget.create($container, list, { name: "replace-list", modifier: (n) => "(" + n.toString() + ")", filter: { @@ -664,19 +664,19 @@ run_test("replace_list_data w/filter update", () => { num_updates += 1; }, }, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); assert.equal(num_updates, 0); - assert.deepEqual(container.appended_data.html(), "(2)(4)"); + assert.deepEqual($container.$appended_data.html(), "(2)(4)"); const widget = ListWidget.get("replace-list"); widget.replace_list_data([5, 6, 7, 8]); assert.equal(num_updates, 1); - assert.deepEqual(container.appended_data.html(), "(6)(8)"); + assert.deepEqual($container.$appended_data.html(), "(6)(8)"); }); run_test("opts.get_item", () => { @@ -722,12 +722,12 @@ run_test("opts.get_item", () => { }); run_test("render item", () => { - const container = make_container(); - const scroll_container = make_scroll_container(); + const $container = make_container(); + const $scroll_container = make_scroll_container(); const INITIAL_RENDER_COUNT = 80; // Keep this in sync with the actual code. - container.html = () => {}; + $container.html = () => {}; let called = false; - scroll_container.find = (query) => { + $scroll_container.find = (query) => { const expected_queries = [ `tr[data-item='${INITIAL_RENDER_COUNT}']`, `tr[data-item='${INITIAL_RENDER_COUNT - 1}']`, @@ -746,7 +746,7 @@ run_test("render item", () => { replaceWith: (html) => { assert.equal(new_html, html); called = true; - container.appended_data.replace(regex, new_html); + $container.$appended_data.replace(regex, new_html); }, }; }; @@ -756,29 +756,29 @@ run_test("render item", () => { let text = "initial"; const get_item = (item) => ({text: `${text}: ${item}`, value: item}); - const widget = ListWidget.create(container, list, { + const widget = ListWidget.create($container, list, { name: "replace-list", modifier: (item) => `${item.text}\n`, get_item, html_selector: (item) => `tr[data-item='${item}']`, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); const item = INITIAL_RENDER_COUNT - 1; - assert.ok(container.appended_data.html().includes("initial: 2")); - assert.ok(container.appended_data.html().includes("initial: 3")); + assert.ok($container.$appended_data.html().includes("initial: 2")); + assert.ok($container.$appended_data.html().includes("initial: 3")); text = "updated"; called = false; widget.render_item(INITIAL_RENDER_COUNT - 1); assert.ok(called); - assert.ok(container.appended_data.html().includes("initial: 2")); + assert.ok($container.$appended_data.html().includes("initial: 2")); assert.ok( - container.appended_data.html().includes(`updated: ${item}`), + $container.$appended_data.html().includes(`updated: ${item}`), ); // Item 80 should not be in the rendered list. (0 indexed) assert.ok( - !container.appended_data + !$container.$appended_data .html() .includes( `initial: ${INITIAL_RENDER_COUNT}`, @@ -793,24 +793,24 @@ run_test("render item", () => { // Tests below this are for the corner cases, where we abort the rerender. blueslip.expect("error", "html_selector should be a function."); - ListWidget.create(container, list, { + ListWidget.create($container, list, { name: "replace-list", modifier: (item) => `${item.text}\n`, get_item, html_selector: "hello world", - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); blueslip.reset(); let get_item_called; - const widget_2 = ListWidget.create(container, list, { + const widget_2 = ListWidget.create($container, list, { name: "replace-list", modifier: (item) => `${item.text}\n`, get_item: (item) => { get_item_called = true; return item; }, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); get_item_called = false; widget_2.render_item(item); @@ -818,12 +818,12 @@ run_test("render item", () => { assert.ok(!get_item_called); let rendering_item = false; - const widget_3 = ListWidget.create(container, list, { + const widget_3 = ListWidget.create($container, list, { name: "replace-list", modifier: (item) => (rendering_item ? undefined : `${item}\n`), get_item, html_selector: (item) => `tr[data-item='${item}']`, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); // Once we have initially rendered the widget, change the // behavior of the modifier function. @@ -834,16 +834,16 @@ run_test("render item", () => { }); run_test("Multiselect dropdown retain_selected_items", () => { - const container = make_container(); - const scroll_container = make_scroll_container(); - const filter_element = make_filter_element(); + const $container = make_container(); + const $scroll_container = make_scroll_container(); + const $filter_element = make_filter_element(); let data_rendered = []; const list = ["one", "two", "three", "four"].map((x) => ({name: x, value: x})); const data = ["one"]; // Data initially selected. - container.html = () => {}; - container.find = (elem) => DropdownItem(elem); + $container.html = () => {}; + $container.find = (elem) => DropdownItem(elem); // We essentially create fake jQuery functions // whose return value are stored in objects so that @@ -880,8 +880,8 @@ run_test("Multiselect dropdown retain_selected_items", () => { return ListItem(element, temp); } - function prepend(data) { - temp.prepended_data = data.html(); + function prepend($data) { + temp.prepended_data = $data.html(); } return { @@ -890,17 +890,17 @@ run_test("Multiselect dropdown retain_selected_items", () => { }; } - const widget = ListWidget.create(container, list, { + const widget = ListWidget.create($container, list, { name: "replace-list", modifier: (item) => `
  • ${item.name}
    • \n`, multiselect: { selected_items: data, }, filter: { - element: filter_element, + $element: $filter_element, predicate: () => true, }, - simplebar_container: scroll_container, + $simplebar_container: $scroll_container, }); const expected_value = [ diff --git a/frontend_tests/node_tests/message_events.js b/frontend_tests/node_tests/message_events.js index 8424cd95fa..0e5fc99d1b 100644 --- a/frontend_tests/node_tests/message_events.js +++ b/frontend_tests/node_tests/message_events.js @@ -117,9 +117,9 @@ run_test("update_messages", () => { page_params.realm_allow_edit_history = false; message_list.narrowed = "stub-to-ignore"; - const message_edit_history_modal = $.create("#message-edit-history"); - const modal = $.create("micromodal").addClass("modal--open"); - message_edit_history_modal.set_parents_result(".micromodal", modal); + const $message_edit_history_modal = $.create("#message-edit-history"); + const $modal = $.create("micromodal").addClass("modal--open"); + $message_edit_history_modal.set_parents_result(".micromodal", $modal); // TEST THIS: message_events.update_messages(events); diff --git a/frontend_tests/node_tests/password.js b/frontend_tests/node_tests/password.js index 083f98207a..32e7d01711 100644 --- a/frontend_tests/node_tests/password.js +++ b/frontend_tests/node_tests/password.js @@ -27,47 +27,47 @@ run_test("basics w/progress bar", () => { let password; let warning; - const bar = (function () { - const self = {}; + const $bar = (function () { + const $self = {}; - self.width = (width) => { - self.w = width; - return self; + $self.width = (width) => { + $self.w = width; + return $self; }; - self.removeClass = (arg) => { + $self.removeClass = (arg) => { assert.equal(arg, "bar-success bar-danger"); - return self; + return $self; }; - self.addClass = (arg) => { - self.added_class = arg; - return self; + $self.addClass = (arg) => { + $self.added_class = arg; + return $self; }; - return self; + return $self; })(); password = "z!X4@S_&"; - accepted = password_quality(password, bar, password_field(10, 80000)); + accepted = password_quality(password, $bar, password_field(10, 80000)); assert.ok(!accepted); - assert.equal(bar.w, "39.7%"); - assert.equal(bar.added_class, "bar-danger"); + assert.equal($bar.w, "39.7%"); + assert.equal($bar.added_class, "bar-danger"); warning = password_warning(password, password_field(10)); assert.equal(warning, "translated: Password should be at least 10 characters long"); password = "foo"; - accepted = password_quality(password, bar, password_field(2, 200)); + accepted = password_quality(password, $bar, password_field(2, 200)); assert.ok(accepted); - assert.equal(bar.w, "10.390277164940581%"); - assert.equal(bar.added_class, "bar-success"); + assert.equal($bar.w, "10.390277164940581%"); + assert.equal($bar.added_class, "bar-success"); warning = password_warning(password, password_field(2)); assert.equal(warning, "translated: Password is too weak"); password = "aaaaaaaa"; - accepted = password_quality(password, bar, password_field(6, 1e100)); + accepted = password_quality(password, $bar, password_field(6, 1e100)); assert.ok(!accepted); - assert.equal(bar.added_class, "bar-danger"); + assert.equal($bar.added_class, "bar-danger"); warning = password_warning(password, password_field(6)); assert.equal(warning, 'Repeats like "aaa" are easy to guess'); }); diff --git a/frontend_tests/node_tests/pill_typeahead.js b/frontend_tests/node_tests/pill_typeahead.js index 0f5f3309dc..1747481248 100644 --- a/frontend_tests/node_tests/pill_typeahead.js +++ b/frontend_tests/node_tests/pill_typeahead.js @@ -19,19 +19,19 @@ const user_groups = zrequire("user_groups"); // set global test variables. let sort_recipients_called = false; let sort_streams_called = false; -const fake_rendered_person = $.create("fake-rendered-person"); -const fake_rendered_stream = $.create("fake-rendered-stream"); -const fake_rendered_group = $.create("fake-rendered-group"); +const $fake_rendered_person = $.create("fake-rendered-person"); +const $fake_rendered_stream = $.create("fake-rendered-stream"); +const $fake_rendered_group = $.create("fake-rendered-group"); mock_esm("../../static/js/typeahead_helper", { render_person() { - return fake_rendered_person; + return $fake_rendered_person; }, render_user_group() { - return fake_rendered_group; + return $fake_rendered_group; }, render_stream() { - return fake_rendered_stream; + return $fake_rendered_stream; }, sort_streams() { sort_streams_called = true; @@ -113,20 +113,20 @@ run_test("set_up", ({mock_template}) => { return html; }); let input_pill_typeahead_called = false; - const fake_input = $.create(".input"); - fake_input.before = noop; + const $fake_input = $.create(".input"); + $fake_input.before = noop; - const container = $.create(".pill-container"); - container.find = () => fake_input; + const $container = $.create(".pill-container"); + $container.find = () => $fake_input; - const pill_widget = input_pill.create({ - container, + const $pill_widget = input_pill.create({ + $container, create_item_from_text: noop, get_text_from_item: noop, }); let opts = {}; - fake_input.typeahead = (config) => { + $fake_input.typeahead = (config) => { assert.equal(config.items, 5); assert.ok(config.fixed); assert.ok(config.dropup); @@ -154,7 +154,7 @@ run_test("set_up", ({mock_template}) => { // Test stream highlighter for widgets that allow stream pills. assert.equal( config.highlighter.call(fake_stream_this, denmark), - fake_rendered_stream, + $fake_rendered_stream, ); } if (opts.user_group && opts.user) { @@ -162,17 +162,17 @@ run_test("set_up", ({mock_template}) => { // then we should check that each of them rendered correctly. assert.equal( config.highlighter.call(fake_group_this, testers), - fake_rendered_group, + $fake_rendered_group, ); - assert.equal(config.highlighter.call(fake_person_this, me), fake_rendered_person); + assert.equal(config.highlighter.call(fake_person_this, me), $fake_rendered_person); } if (opts.user && !opts.user_group) { - assert.equal(config.highlighter.call(fake_person_this, me), fake_rendered_person); + assert.equal(config.highlighter.call(fake_person_this, me), $fake_rendered_person); } if (!opts.user && opts.user_group) { assert.equal( config.highlighter.call(fake_group_this, testers), - fake_rendered_group, + $fake_rendered_group, ); } })(); @@ -288,7 +288,7 @@ run_test("set_up", ({mock_template}) => { // updater in pill_typeahead. function number_of_pills() { - const pills = pill_widget.items(); + const pills = $pill_widget.items(); return pills.length; } assert.equal(number_of_pills(), 0); @@ -307,7 +307,7 @@ run_test("set_up", ({mock_template}) => { }; function test_pill_typeahead(opts) { - pill_typeahead.set_up(fake_input, pill_widget, opts); + pill_typeahead.set_up($fake_input, $pill_widget, opts); assert.ok(input_pill_typeahead_called); } @@ -339,6 +339,6 @@ run_test("set_up", ({mock_template}) => { opts = {}; input_pill_typeahead_called = false; blueslip.expect("error", "Unspecified possible item types"); - pill_typeahead.set_up(fake_input, pill_widget, {}); + pill_typeahead.set_up($fake_input, $pill_widget, {}); assert.ok(!input_pill_typeahead_called); }); diff --git a/frontend_tests/node_tests/pm_list.js b/frontend_tests/node_tests/pm_list.js index 5c21d921e2..daba91ef7d 100644 --- a/frontend_tests/node_tests/pm_list.js +++ b/frontend_tests/node_tests/pm_list.js @@ -16,23 +16,23 @@ run_test("update_dom_with_unread_counts", () => { narrow_state.set_current_filter("stub"); assert.equal(narrow_state.active(), true); - const total_count = $.create("total-count-stub"); - const private_li = $(".top_left_private_messages .private_messages_header"); - private_li.set_find_results(".unread_count", total_count); + const $total_count = $.create("total-count-stub"); + const $private_li = $(".top_left_private_messages .private_messages_header"); + $private_li.set_find_results(".unread_count", $total_count); counts = { private_message_count: 10, }; pm_list.update_dom_with_unread_counts(counts); - assert.equal(total_count.text(), "10"); - assert.ok(total_count.visible()); + assert.equal($total_count.text(), "10"); + assert.ok($total_count.visible()); counts = { private_message_count: 0, }; pm_list.update_dom_with_unread_counts(counts); - assert.equal(total_count.text(), ""); - assert.ok(!total_count.visible()); + assert.equal($total_count.text(), ""); + assert.ok(!$total_count.visible()); }); diff --git a/frontend_tests/node_tests/poll_widget.js b/frontend_tests/node_tests/poll_widget.js index 3ab6da4a83..53b71bb8ae 100644 --- a/frontend_tests/node_tests/poll_widget.js +++ b/frontend_tests/node_tests/poll_widget.js @@ -210,7 +210,7 @@ run_test("activate another person poll", ({mock_template}) => { mock_template("widgets/poll_widget.hbs", false, () => "widgets/poll_widget"); mock_template("widgets/poll_widget_results.hbs", false, () => "widgets/poll_widget_results"); - const widget_elem = $("
    ").addClass("widget-content"); + const $widget_elem = $("
    ").addClass("widget-content"); let out_data; // Used to check the event data sent to the server const callback = (data) => { @@ -218,7 +218,7 @@ run_test("activate another person poll", ({mock_template}) => { }; const opts = { - elem: widget_elem, + $elem: $widget_elem, callback, message: { sender_id: alice.user_id, @@ -229,53 +229,53 @@ run_test("activate another person poll", ({mock_template}) => { }; const set_widget_find_result = (selector) => { - const elem = $.create(selector); - widget_elem.set_find_results(selector, elem); - return elem; + const $elem = $.create(selector); + $widget_elem.set_find_results(selector, $elem); + return $elem; }; - const poll_option = set_widget_find_result("button.poll-option"); - const poll_option_input = set_widget_find_result("input.poll-option"); - const widget_option_container = set_widget_find_result("ul.poll-widget"); + const $poll_option = set_widget_find_result("button.poll-option"); + const $poll_option_input = set_widget_find_result("input.poll-option"); + const $widget_option_container = set_widget_find_result("ul.poll-widget"); - const poll_question_submit = set_widget_find_result("button.poll-question-check"); - const poll_edit_question = set_widget_find_result(".poll-edit-question"); - const poll_question_header = set_widget_find_result(".poll-question-header"); - const poll_question_container = set_widget_find_result(".poll-question-bar"); - const poll_option_container = set_widget_find_result(".poll-option-bar"); + const $poll_question_submit = set_widget_find_result("button.poll-question-check"); + const $poll_edit_question = set_widget_find_result(".poll-edit-question"); + const $poll_question_header = set_widget_find_result(".poll-question-header"); + const $poll_question_container = set_widget_find_result(".poll-question-bar"); + const $poll_option_container = set_widget_find_result(".poll-option-bar"); - const poll_vote_button = set_widget_find_result("button.poll-vote"); - const poll_please_wait = set_widget_find_result(".poll-please-wait"); - const poll_author_help = set_widget_find_result(".poll-author-help"); + const $poll_vote_button = set_widget_find_result("button.poll-vote"); + const $poll_please_wait = set_widget_find_result(".poll-please-wait"); + const $poll_author_help = set_widget_find_result(".poll-author-help"); set_widget_find_result("button.poll-question-remove"); set_widget_find_result("input.poll-question"); poll_widget.activate(opts); - assert.ok(poll_option_container.visible()); - assert.ok(poll_question_header.visible()); + assert.ok($poll_option_container.visible()); + assert.ok($poll_question_header.visible()); - assert.ok(!poll_question_container.visible()); - assert.ok(!poll_question_submit.visible()); - assert.ok(!poll_edit_question.visible()); - assert.ok(!poll_please_wait.visible()); - assert.ok(!poll_author_help.visible()); + assert.ok(!$poll_question_container.visible()); + assert.ok(!$poll_question_submit.visible()); + assert.ok(!$poll_edit_question.visible()); + assert.ok(!$poll_please_wait.visible()); + assert.ok(!$poll_author_help.visible()); - assert.equal(widget_elem.html(), "widgets/poll_widget"); - assert.equal(widget_option_container.html(), "widgets/poll_widget_results"); - assert.equal(poll_question_header.text(), "What do you want?"); + assert.equal($widget_elem.html(), "widgets/poll_widget"); + assert.equal($widget_option_container.html(), "widgets/poll_widget_results"); + assert.equal($poll_question_header.text(), "What do you want?"); { /* Testing data sent to server on adding option */ - poll_option_input.val("cool choice"); + $poll_option_input.val("cool choice"); out_data = undefined; - poll_option.trigger("click"); + $poll_option.trigger("click"); assert.deepEqual(out_data, {type: "new_option", idx: 1, option: "cool choice"}); - poll_option_input.val(""); + $poll_option_input.val(""); out_data = undefined; - poll_option.trigger("click"); + $poll_option.trigger("click"); assert.deepEqual(out_data, undefined); } @@ -298,13 +298,13 @@ run_test("activate another person poll", ({mock_template}) => { }, ]; - widget_elem.handle_events(vote_events); + $widget_elem.handle_events(vote_events); { /* Testing data sent to server on voting */ - poll_vote_button.attr("data-key", "100,1"); + $poll_vote_button.attr("data-key", "100,1"); out_data = undefined; - poll_vote_button.trigger("click"); + $poll_vote_button.trigger("click"); assert.deepEqual(out_data, {type: "vote", key: "100,1", vote: 1}); } @@ -318,20 +318,20 @@ run_test("activate another person poll", ({mock_template}) => { }, ]; - widget_elem.handle_events(add_question_event); + $widget_elem.handle_events(add_question_event); }); run_test("activate own poll", ({mock_template}) => { mock_template("widgets/poll_widget.hbs", false, () => "widgets/poll_widget"); mock_template("widgets/poll_widget_results.hbs", false, () => "widgets/poll_widget_results"); - const widget_elem = $("
    ").addClass("widget-content"); + const $widget_elem = $("
    ").addClass("widget-content"); let out_data; const callback = (data) => { out_data = data; }; const opts = { - elem: widget_elem, + $elem: $widget_elem, callback, message: { sender_id: me.user_id, @@ -342,59 +342,59 @@ run_test("activate own poll", ({mock_template}) => { }; const set_widget_find_result = (selector) => { - const elem = $.create(selector); - widget_elem.set_find_results(selector, elem); - return elem; + const $elem = $.create(selector); + $widget_elem.set_find_results(selector, $elem); + return $elem; }; set_widget_find_result("button.poll-option"); - const poll_option_input = set_widget_find_result("input.poll-option"); - const widget_option_container = set_widget_find_result("ul.poll-widget"); + const $poll_option_input = set_widget_find_result("input.poll-option"); + const $widget_option_container = set_widget_find_result("ul.poll-widget"); - const poll_question_submit = set_widget_find_result("button.poll-question-check"); - const poll_edit_question = set_widget_find_result(".poll-edit-question"); - const poll_question_input = set_widget_find_result("input.poll-question"); - const poll_question_header = set_widget_find_result(".poll-question-header"); - const poll_question_container = set_widget_find_result(".poll-question-bar"); - const poll_option_container = set_widget_find_result(".poll-option-bar"); + const $poll_question_submit = set_widget_find_result("button.poll-question-check"); + const $poll_edit_question = set_widget_find_result(".poll-edit-question"); + const $poll_question_input = set_widget_find_result("input.poll-question"); + const $poll_question_header = set_widget_find_result(".poll-question-header"); + const $poll_question_container = set_widget_find_result(".poll-question-bar"); + const $poll_option_container = set_widget_find_result(".poll-option-bar"); set_widget_find_result("button.poll-vote"); - const poll_please_wait = set_widget_find_result(".poll-please-wait"); - const poll_author_help = set_widget_find_result(".poll-author-help"); + const $poll_please_wait = set_widget_find_result(".poll-please-wait"); + const $poll_author_help = set_widget_find_result(".poll-author-help"); set_widget_find_result("button.poll-question-remove"); function assert_visibility() { - assert.ok(poll_option_container.visible()); - assert.ok(poll_question_header.visible()); - assert.ok(!poll_question_container.visible()); - assert.ok(poll_edit_question.visible()); - assert.ok(!poll_please_wait.visible()); - assert.ok(!poll_author_help.visible()); + assert.ok($poll_option_container.visible()); + assert.ok($poll_question_header.visible()); + assert.ok(!$poll_question_container.visible()); + assert.ok($poll_edit_question.visible()); + assert.ok(!$poll_please_wait.visible()); + assert.ok(!$poll_author_help.visible()); } poll_widget.activate(opts); assert_visibility(); - assert.ok(!poll_question_submit.visible()); + assert.ok(!$poll_question_submit.visible()); - assert.equal(widget_elem.html(), "widgets/poll_widget"); - assert.equal(widget_option_container.html(), "widgets/poll_widget_results"); - assert.equal(poll_question_header.text(), "Where to go?"); + assert.equal($widget_elem.html(), "widgets/poll_widget"); + assert.equal($widget_option_container.html(), "widgets/poll_widget_results"); + assert.equal($poll_question_header.text(), "Where to go?"); { /* Testing data sent to server on editing question */ - poll_question_input.val("Is it new?"); + $poll_question_input.val("Is it new?"); out_data = undefined; - poll_question_submit.trigger("click"); + $poll_question_submit.trigger("click"); assert.deepEqual(out_data, {type: "question", question: "Is it new?"}); assert_visibility(); - assert.ok(poll_question_submit.visible()); + assert.ok($poll_question_submit.visible()); - poll_option_input.val(""); + $poll_option_input.val(""); out_data = undefined; - poll_question_submit.trigger("click"); + $poll_question_submit.trigger("click"); assert.deepEqual(out_data, undefined); } }); diff --git a/frontend_tests/node_tests/popovers.js b/frontend_tests/node_tests/popovers.js index 7a270457f5..1e3cbbd80a 100644 --- a/frontend_tests/node_tests/popovers.js +++ b/frontend_tests/node_tests/popovers.js @@ -146,9 +146,9 @@ test_ui("sender_hover", ({override, mock_template}) => { assert.equal(msg_id, message.id); }; - const target = $.create("click target"); + const $target = $.create("click target"); - target.closest = (sel) => { + $target.closest = (sel) => { assert.equal(sel, ".message_row"); return {}; }; @@ -205,7 +205,7 @@ test_ui("sender_hover", ({override, mock_template}) => { $.create(".user_popover_email", {children: []}); const image_stubber = make_image_stubber(); - handler.call(target, e); + handler.call($target, e); const avatar_img = image_stubber.get(0); assert.equal(avatar_img.src.toString(), "/avatar/42/medium"); @@ -216,7 +216,7 @@ test_ui("sender_hover", ({override, mock_template}) => { test_ui("actions_popover", ({override, override_rewire, mock_template}) => { override($.fn, "popover", noop); - const target = $.create("click target"); + const $target = $.create("click target"); const handler = $("#main_div").get_on_handler("click", ".actions_hover"); @@ -241,7 +241,7 @@ test_ui("actions_popover", ({override, override_rewire, mock_template}) => { override_rewire(message_edit, "get_editability", () => 4); - target.closest = (sel) => { + $target.closest = (sel) => { assert.equal(sel, ".message_row"); return { toggleClass: noop, @@ -257,5 +257,5 @@ test_ui("actions_popover", ({override, override_rewire, mock_template}) => { return "actions-content"; }); - handler.call(target, e); + handler.call($target, e); }); diff --git a/frontend_tests/node_tests/reactions.js b/frontend_tests/node_tests/reactions.js index e72a0d57cb..1f9fb700ca 100644 --- a/frontend_tests/node_tests/reactions.js +++ b/frontend_tests/node_tests/reactions.js @@ -361,46 +361,46 @@ test("sending", ({override, override_rewire}) => { }); test("set_reaction_count", () => { - const count_element = $.create("count-stub"); - const reaction_element = $.create("reaction-stub"); + const $count_element = $.create("count-stub"); + const $reaction_element = $.create("reaction-stub"); - reaction_element.set_find_results(".message_reaction_count", count_element); + $reaction_element.set_find_results(".message_reaction_count", $count_element); - reactions.set_reaction_count(reaction_element, 5); + reactions.set_reaction_count($reaction_element, 5); - assert.equal(count_element.text(), "5"); + assert.equal($count_element.text(), "5"); }); test("find_reaction", ({override_rewire}) => { const message_id = 99; const local_id = "unicode_emoji,1f44b"; - const reaction_section = $.create("section-stub"); + const $reaction_section = $.create("section-stub"); const reaction_stub = "reaction-stub"; - reaction_section.set_find_results( + $reaction_section.set_find_results( `[data-reaction-id='${CSS.escape(local_id)}']`, reaction_stub, ); override_rewire(reactions, "get_reaction_section", (arg) => { assert.equal(arg, message_id); - return reaction_section; + return $reaction_section; }); assert.equal(reactions.find_reaction(message_id, local_id), reaction_stub); }); test("get_reaction_section", () => { - const message_table = $.create(".message_table"); - const message_row = $.create("some-message-row"); - const message_reactions = $.create("our-reactions-section"); + const $message_table = $.create(".message_table"); + const $message_row = $.create("some-message-row"); + const $message_reactions = $.create("our-reactions-section"); - message_table.set_find_results(`[zid='${CSS.escape(555)}']`, message_row); - message_row.set_find_results(".message_reactions", message_reactions); + $message_table.set_find_results(`[zid='${CSS.escape(555)}']`, $message_row); + $message_row.set_find_results(".message_reactions", $message_reactions); const section = reactions.get_reaction_section(555); - assert.equal(section, message_reactions); + assert.equal(section, $message_reactions); }); test("emoji_reaction_title", ({override}) => { @@ -599,14 +599,14 @@ test("view.insert_new_reaction (me w/unicode emoji)", ({override_rewire, mock_te user_id: alice.user_id, }; - const message_reactions = $.create("our-reactions"); + const $message_reactions = $.create("our-reactions"); override_rewire(reactions, "get_reaction_section", (message_id) => { assert.equal(message_id, opts.message_id); - return message_reactions; + return $message_reactions; }); - message_reactions.find = (selector) => { + $message_reactions.find = (selector) => { assert.equal(selector, ".reaction_button"); return "reaction-button-stub"; }; @@ -646,14 +646,14 @@ test("view.insert_new_reaction (them w/zulip emoji)", ({override_rewire, mock_te user_id: bob.user_id, }; - const message_reactions = $.create("our-reactions"); + const $message_reactions = $.create("our-reactions"); override_rewire(reactions, "get_reaction_section", (message_id) => { assert.equal(message_id, opts.message_id); - return message_reactions; + return $message_reactions; }); - message_reactions.find = (selector) => { + $message_reactions.find = (selector) => { assert.equal(selector, ".reaction_button"); return "reaction-button-stub"; }; @@ -696,24 +696,24 @@ test("view.update_existing_reaction (me)", ({override_rewire}) => { user_list: [alice.user_id, bob.user_id], }; - const our_reaction = $.create("our-reaction-stub"); + const $our_reaction = $.create("our-reaction-stub"); override_rewire(reactions, "find_reaction", (message_id, local_id) => { assert.equal(message_id, opts.message_id); assert.equal(local_id, "unicode_emoji,1f3b1"); - return our_reaction; + return $our_reaction; }); override_rewire(reactions, "set_reaction_count", (reaction, count) => { - assert.equal(reaction, our_reaction); + assert.equal(reaction, $our_reaction); assert.equal(count, 2); }); reactions.view.update_existing_reaction(opts); - assert.ok(our_reaction.hasClass("reacted")); + assert.ok($our_reaction.hasClass("reacted")); assert.equal( - our_reaction.attr("aria-label"), + $our_reaction.attr("aria-label"), "translated: You (click to remove) and Bob van Roberts reacted with :8ball:", ); }); @@ -728,24 +728,24 @@ test("view.update_existing_reaction (them)", ({override_rewire}) => { user_list: [alice.user_id, bob.user_id, cali.user_id, alexus.user_id], }; - const our_reaction = $.create("our-reaction-stub"); + const $our_reaction = $.create("our-reaction-stub"); override_rewire(reactions, "find_reaction", (message_id, local_id) => { assert.equal(message_id, opts.message_id); assert.equal(local_id, "unicode_emoji,1f3b1"); - return our_reaction; + return $our_reaction; }); override_rewire(reactions, "set_reaction_count", (reaction, count) => { - assert.equal(reaction, our_reaction); + assert.equal(reaction, $our_reaction); assert.equal(count, 4); }); reactions.view.update_existing_reaction(opts); - assert.ok(!our_reaction.hasClass("reacted")); + assert.ok(!$our_reaction.hasClass("reacted")); assert.equal( - our_reaction.attr("aria-label"), + $our_reaction.attr("aria-label"), "translated: You (click to remove), Bob van Roberts, Cali and Alexus reacted with :8ball:", ); }); @@ -760,25 +760,25 @@ test("view.remove_reaction (me)", ({override_rewire}) => { user_list: [bob.user_id, cali.user_id], }; - const our_reaction = $.create("our-reaction-stub"); - our_reaction.addClass("reacted"); + const $our_reaction = $.create("our-reaction-stub"); + $our_reaction.addClass("reacted"); override_rewire(reactions, "find_reaction", (message_id, local_id) => { assert.equal(message_id, opts.message_id); assert.equal(local_id, "unicode_emoji,1f3b1"); - return our_reaction; + return $our_reaction; }); override_rewire(reactions, "set_reaction_count", (reaction, count) => { - assert.equal(reaction, our_reaction); + assert.equal(reaction, $our_reaction); assert.equal(count, 2); }); reactions.view.remove_reaction(opts); - assert.ok(!our_reaction.hasClass("reacted")); + assert.ok(!$our_reaction.hasClass("reacted")); assert.equal( - our_reaction.attr("aria-label"), + $our_reaction.attr("aria-label"), "translated: Bob van Roberts and Cali reacted with :8ball:", ); }); @@ -793,26 +793,26 @@ test("view.remove_reaction (them)", ({override_rewire}) => { user_list: [alice.user_id], }; - const our_reaction = $.create("our-reaction-stub"); - our_reaction.addClass("reacted"); + const $our_reaction = $.create("our-reaction-stub"); + $our_reaction.addClass("reacted"); override_rewire(reactions, "find_reaction", (message_id, local_id) => { assert.equal(message_id, opts.message_id); assert.equal(local_id, "unicode_emoji,1f3b1"); - return our_reaction; + return $our_reaction; }); override_rewire(reactions, "set_reaction_count", (reaction, count) => { - assert.equal(reaction, our_reaction); + assert.equal(reaction, $our_reaction); assert.equal(count, 1); }); - our_reaction.addClass("reacted"); + $our_reaction.addClass("reacted"); reactions.view.remove_reaction(opts); - assert.ok(our_reaction.hasClass("reacted")); + assert.ok($our_reaction.hasClass("reacted")); assert.equal( - our_reaction.attr("aria-label"), + $our_reaction.attr("aria-label"), "translated: You (click to remove) reacted with :8ball:", ); }); @@ -827,16 +827,16 @@ test("view.remove_reaction (last person)", ({override_rewire}) => { user_list: [], }; - const our_reaction = $.create("our-reaction-stub"); + const $our_reaction = $.create("our-reaction-stub"); override_rewire(reactions, "find_reaction", (message_id, local_id) => { assert.equal(message_id, opts.message_id); assert.equal(local_id, "unicode_emoji,1f3b1"); - return our_reaction; + return $our_reaction; }); let removed; - our_reaction.remove = () => { + $our_reaction.remove = () => { removed = true; }; reactions.view.remove_reaction(opts); diff --git a/frontend_tests/node_tests/recent_topics.js b/frontend_tests/node_tests/recent_topics.js index b9b2a44056..8155e3b7fc 100644 --- a/frontend_tests/node_tests/recent_topics.js +++ b/frontend_tests/node_tests/recent_topics.js @@ -323,9 +323,9 @@ function stub_out_filter_buttons() { // See show_selected_filters() and set_filter() in the // implementation. for (const filter of ["all", "unread", "muted", "participated"]) { - const stub = $.create(`filter-${filter}-stub`); + const $stub = $.create(`filter-${filter}-stub`); const selector = `[data-filter="${filter}"]`; - $("#recent_topics_filter_buttons").set_find_results(selector, stub); + $("#recent_topics_filter_buttons").set_find_results(selector, $stub); } } diff --git a/frontend_tests/node_tests/rendered_markdown.js b/frontend_tests/node_tests/rendered_markdown.js index 87b78f8df9..15facbd3cb 100644 --- a/frontend_tests/node_tests/rendered_markdown.js +++ b/frontend_tests/node_tests/rendered_markdown.js @@ -104,12 +104,12 @@ const get_content_element = () => { }; run_test("misc_helpers", () => { - const elem = $.create("user-mention"); - rm.set_name_in_mention_element(elem, "Aaron"); - assert.equal(elem.text(), "@Aaron"); - elem.addClass("silent"); - rm.set_name_in_mention_element(elem, "Aaron, but silent"); - assert.equal(elem.text(), "Aaron, but silent"); + const $elem = $.create("user-mention"); + rm.set_name_in_mention_element($elem, "Aaron"); + assert.equal($elem.text(), "@Aaron"); + $elem.addClass("silent"); + rm.set_name_in_mention_element($elem, "Aaron, but silent"); + assert.equal($elem.text(), "Aaron, but silent"); }); run_test("user-mention", () => { @@ -423,8 +423,8 @@ function test_code_playground(mock_template, viewing_code) { return { prepends, - copy_code: $copy_code_button, - view_code: $view_code_in_playground, + $copy_code: $copy_code_button, + $view_code: $view_code_in_playground, }; } @@ -434,12 +434,12 @@ run_test("code playground none", ({override, mock_template}) => { return undefined; }); - const {prepends, copy_code, view_code} = test_code_playground(mock_template, false); - assert.deepEqual(prepends, [copy_code]); + const {prepends, $copy_code, $view_code} = test_code_playground(mock_template, false); + assert.deepEqual(prepends, [$copy_code]); assert_clipboard_setup(); - assert.equal(view_code.attr("data-tippy-content"), undefined); - assert.equal(view_code.attr("aria-label"), undefined); + assert.equal($view_code.attr("data-tippy-content"), undefined); + assert.equal($view_code.attr("aria-label"), undefined); }); run_test("code playground single", ({override, mock_template}) => { @@ -448,16 +448,16 @@ run_test("code playground single", ({override, mock_template}) => { return [{name: "Some Javascript Playground"}]; }); - const {prepends, copy_code, view_code} = test_code_playground(mock_template, true); - assert.deepEqual(prepends, [view_code, copy_code]); + const {prepends, $copy_code, $view_code} = test_code_playground(mock_template, true); + assert.deepEqual(prepends, [$view_code, $copy_code]); assert_clipboard_setup(); assert.equal( - view_code.attr("data-tippy-content"), + $view_code.attr("data-tippy-content"), "translated: View in Some Javascript Playground", ); - assert.equal(view_code.attr("aria-label"), "translated: View in Some Javascript Playground"); - assert.equal(view_code.attr("aria-haspopup"), undefined); + assert.equal($view_code.attr("aria-label"), "translated: View in Some Javascript Playground"); + assert.equal($view_code.attr("aria-haspopup"), undefined); }); run_test("code playground multiple", ({override, mock_template}) => { @@ -466,13 +466,13 @@ run_test("code playground multiple", ({override, mock_template}) => { return ["whatever", "whatever"]; }); - const {prepends, copy_code, view_code} = test_code_playground(mock_template, true); - assert.deepEqual(prepends, [view_code, copy_code]); + const {prepends, $copy_code, $view_code} = test_code_playground(mock_template, true); + assert.deepEqual(prepends, [$view_code, $copy_code]); assert_clipboard_setup(); - assert.equal(view_code.attr("data-tippy-content"), "translated: View in playground"); - assert.equal(view_code.attr("aria-label"), "translated: View in playground"); - assert.equal(view_code.attr("aria-haspopup"), "true"); + assert.equal($view_code.attr("data-tippy-content"), "translated: View in playground"); + assert.equal($view_code.attr("aria-label"), "translated: View in playground"); + assert.equal($view_code.attr("aria-haspopup"), "true"); }); run_test("rtl", () => { diff --git a/frontend_tests/node_tests/rtl.js b/frontend_tests/node_tests/rtl.js index ecd85bd9e0..7bf3055907 100644 --- a/frontend_tests/node_tests/rtl.js +++ b/frontend_tests/node_tests/rtl.js @@ -129,20 +129,20 @@ run_test("get_direction", () => { }); run_test("set_rtl_class_for_textarea rtl", () => { - const textarea = $.create("some-textarea"); - assert.ok(!textarea.hasClass("rtl")); + const $textarea = $.create("some-textarea"); + assert.ok(!$textarea.hasClass("rtl")); const text = "```quote\nمرحبا"; - textarea.val(text); - rtl.set_rtl_class_for_textarea(textarea); - assert.ok(textarea.hasClass("rtl")); + $textarea.val(text); + rtl.set_rtl_class_for_textarea($textarea); + assert.ok($textarea.hasClass("rtl")); }); run_test("set_rtl_class_for_textarea ltr", () => { - const textarea = $.create("some-textarea"); - textarea.addClass("rtl"); - assert.ok(textarea.hasClass("rtl")); + const $textarea = $.create("some-textarea"); + $textarea.addClass("rtl"); + assert.ok($textarea.hasClass("rtl")); const text = "```quote\nEnglish text"; - textarea.val(text); - rtl.set_rtl_class_for_textarea(textarea); - assert.ok(!textarea.hasClass("rtl")); + $textarea.val(text); + rtl.set_rtl_class_for_textarea($textarea); + assert.ok(!$textarea.hasClass("rtl")); }); diff --git a/frontend_tests/node_tests/scroll_util.js b/frontend_tests/node_tests/scroll_util.js index 3b8b783476..95644cc6aa 100644 --- a/frontend_tests/node_tests/scroll_util.js +++ b/frontend_tests/node_tests/scroll_util.js @@ -89,7 +89,7 @@ run_test("scroll_delta", () => { }); run_test("scroll_element_into_container", () => { - const container = (function () { + const $container = (function () { let top = 3; return { height: () => 100, @@ -103,21 +103,21 @@ run_test("scroll_element_into_container", () => { }; })(); - const elem1 = { + const $elem1 = { innerHeight: () => 25, position: () => ({ top: 0, }), }; - scroll_util.scroll_element_into_container(elem1, container); - assert.equal(container.scrollTop(), 3); + scroll_util.scroll_element_into_container($elem1, $container); + assert.equal($container.scrollTop(), 3); - const elem2 = { + const $elem2 = { innerHeight: () => 15, position: () => ({ top: 250, }), }; - scroll_util.scroll_element_into_container(elem2, container); - assert.equal(container.scrollTop(), 250 - 100 + 3 + 15); + scroll_util.scroll_element_into_container($elem2, $container); + assert.equal($container.scrollTop(), 250 - 100 + 3 + 15); }); diff --git a/frontend_tests/node_tests/search.js b/frontend_tests/node_tests/search.js index 2f4545b810..7251c6acd7 100644 --- a/frontend_tests/node_tests/search.js +++ b/frontend_tests/node_tests/search.js @@ -51,50 +51,50 @@ test("clear_search_form", () => { }); test("update_button_visibility", () => { - const search_query = $("#search_query"); - const search_button = $(".search_button"); + const $search_query = $("#search_query"); + const $search_button = $(".search_button"); - search_query.is = () => false; - search_query.val(""); + $search_query.is = () => false; + $search_query.val(""); narrow_state.active = () => false; - search_button.prop("disabled", true); + $search_button.prop("disabled", true); search.update_button_visibility(); - assert.ok(search_button.prop("disabled")); + assert.ok($search_button.prop("disabled")); - search_query.is = () => true; - search_query.val(""); + $search_query.is = () => true; + $search_query.val(""); narrow_state.active = () => false; - search_button.prop("disabled", true); + $search_button.prop("disabled", true); search.update_button_visibility(); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); - search_query.is = () => false; - search_query.val("Test search term"); + $search_query.is = () => false; + $search_query.val("Test search term"); narrow_state.active = () => false; - search_button.prop("disabled", true); + $search_button.prop("disabled", true); search.update_button_visibility(); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); - search_query.is = () => false; - search_query.val(""); + $search_query.is = () => false; + $search_query.val(""); narrow_state.active = () => true; - search_button.prop("disabled", true); + $search_button.prop("disabled", true); search.update_button_visibility(); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); }); test("initialize", () => { - const search_query_box = $("#search_query"); - const searchbox_form = $("#searchbox_form"); - const search_button = $(".search_button"); - const searchbox = $("#searchbox"); + const $search_query_box = $("#search_query"); + const $searchbox_form = $("#searchbox_form"); + const $search_button = $(".search_button"); + const $searchbox = $("#searchbox"); - search_query_box[0] = "stub"; + $search_query_box[0] = "stub"; search_pill.get_search_string_for_current_filter = () => "is:starred"; search_suggestion.max_num_of_search_results = 99; - search_query_box.typeahead = (opts) => { + $search_query_box.typeahead = (opts) => { assert.equal(opts.fixed, true); assert.equal(opts.items, 99); assert.equal(opts.naturalSearch, true); @@ -144,7 +144,7 @@ test("initialize", () => { let operators; let is_blurred; let is_append_search_string_called; - search_query_box.on("blur", () => { + $search_query_box.on("blur", () => { is_blurred = true; }); search_pill.append_search_string = () => { @@ -154,7 +154,7 @@ test("initialize", () => { const _setup = (search_box_val) => { is_blurred = false; is_append_search_string_called = false; - search_query_box.val(search_box_val); + $search_query_box.val(search_box_val); Filter.parse = (search_string) => { assert.equal(search_string, search_box_val); return operators; @@ -199,34 +199,35 @@ test("initialize", () => { assert.ok(!is_blurred); assert.ok(is_append_search_string_called); - search_query_box.off("blur"); + $search_query_box.off("blur"); } }; search.initialize(); - const search_pill_stub = $.create(".pill"); - search_pill_stub.closest = () => ({data: noop}); + const $search_pill_stub = $.create(".pill"); + $search_pill_stub.closest = () => ({data: noop}); const stub_event = { - relatedTarget: search_pill_stub, + // FIXME: event.relatedTarget should not be a jQuery object + relatedTarget: $search_pill_stub, }; - search_query_box.val("test string"); + $search_query_box.val("test string"); narrow_state.search_string = () => "ver"; - search_query_box.trigger(new $.Event("blur", stub_event)); - assert.equal(search_query_box.val(), "test string"); + $search_query_box.trigger(new $.Event("blur", stub_event)); + assert.equal($search_query_box.val(), "test string"); let css_args; - searchbox.css = (args) => { + $searchbox.css = (args) => { css_args = args; }; - searchbox.trigger("focusout"); + $searchbox.trigger("focusout"); assert.deepEqual(css_args, {"box-shadow": "unset"}); search.__Rewire__("is_using_input_method", false); - searchbox_form.trigger("compositionend"); + $searchbox_form.trigger("compositionend"); assert.ok(search.is_using_input_method); - const keydown = searchbox_form.get_on_handler("keydown"); + const keydown = $searchbox_form.get_on_handler("keydown"); let default_prevented = false; let ev = { type: "keydown", @@ -235,7 +236,7 @@ test("initialize", () => { default_prevented = true; }, }; - search_query_box.is = () => false; + $search_query_box.is = () => false; assert.equal(keydown(ev), undefined); assert.ok(!default_prevented); @@ -244,22 +245,22 @@ test("initialize", () => { assert.ok(!default_prevented); ev.key = "Enter"; - search_query_box.is = () => true; + $search_query_box.is = () => true; assert.equal(keydown(ev), undefined); assert.ok(default_prevented); let operators; let is_blurred; narrow_state.active = () => false; - search_query_box.off("blur"); - search_query_box.on("blur", () => { + $search_query_box.off("blur"); + $search_query_box.on("blur", () => { is_blurred = true; }); const _setup = (search_box_val) => { is_blurred = false; - search_button.prop("disabled", false); - search_query_box.val(search_box_val); + $search_button.prop("disabled", false); + $search_query_box.val(search_box_val); Filter.parse = (search_string) => { assert.equal(search_string, search_box_val); return operators; @@ -284,41 +285,41 @@ test("initialize", () => { type: "keyup", which: 15, }; - search_query_box.is = () => false; - searchbox_form.trigger(ev); + $search_query_box.is = () => false; + $searchbox_form.trigger(ev); assert.ok(!is_blurred); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); ev.key = "Enter"; - search_query_box.is = () => false; - searchbox_form.trigger(ev); + $search_query_box.is = () => false; + $searchbox_form.trigger(ev); assert.ok(!is_blurred); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); ev.key = "Enter"; - search_query_box.is = () => true; - searchbox_form.trigger(ev); + $search_query_box.is = () => true; + $searchbox_form.trigger(ev); assert.ok(is_blurred); _setup("ver"); search.__Rewire__("is_using_input_method", true); - searchbox_form.trigger(ev); + $searchbox_form.trigger(ev); // No change on Enter keyup event when using input tool assert.ok(!is_blurred); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); _setup("ver"); ev.key = "Enter"; - search_query_box.is = () => true; - searchbox_form.trigger(ev); + $search_query_box.is = () => true; + $searchbox_form.trigger(ev); assert.ok(is_blurred); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); - search_button.prop("disabled", true); - search_query_box.trigger("focus"); - assert.ok(!search_button.prop("disabled")); + $search_button.prop("disabled", true); + $search_query_box.trigger("focus"); + assert.ok(!$search_button.prop("disabled")); }); test("initiate_search", () => { @@ -345,9 +346,9 @@ test("initiate_search", () => { $("#search_query")[0] = "stub"; - const searchbox = $("#searchbox"); + const $searchbox = $("#searchbox"); let css_args; - searchbox.css = (args) => { + $searchbox.css = (args) => { css_args = args; }; diff --git a/frontend_tests/node_tests/search_legacy.js b/frontend_tests/node_tests/search_legacy.js index aaa52528a2..5f55b6dcfc 100644 --- a/frontend_tests/node_tests/search_legacy.js +++ b/frontend_tests/node_tests/search_legacy.js @@ -29,45 +29,45 @@ set_global("setTimeout", (func) => func()); const search = zrequire("search"); run_test("update_button_visibility", () => { - const search_query = $("#search_query"); - const search_button = $(".search_button"); + const $search_query = $("#search_query"); + const $search_button = $(".search_button"); - search_query.is = () => false; - search_query.val(""); + $search_query.is = () => false; + $search_query.val(""); narrow_state.active = () => false; - search_button.prop("disabled", true); + $search_button.prop("disabled", true); search.update_button_visibility(); - assert.ok(search_button.prop("disabled")); + assert.ok($search_button.prop("disabled")); - search_query.is = () => true; - search_query.val(""); + $search_query.is = () => true; + $search_query.val(""); narrow_state.active = () => false; - search_button.prop("disabled", true); + $search_button.prop("disabled", true); search.update_button_visibility(); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); - search_query.is = () => false; - search_query.val("Test search term"); + $search_query.is = () => false; + $search_query.val("Test search term"); narrow_state.active = () => false; - search_button.prop("disabled", true); + $search_button.prop("disabled", true); search.update_button_visibility(); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); - search_query.is = () => false; - search_query.val(""); + $search_query.is = () => false; + $search_query.val(""); narrow_state.active = () => true; - search_button.prop("disabled", true); + $search_button.prop("disabled", true); search.update_button_visibility(); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); }); run_test("initialize", () => { - const search_query_box = $("#search_query"); - const searchbox_form = $("#searchbox_form"); - const search_button = $(".search_button"); + const $search_query_box = $("#search_query"); + const $searchbox_form = $("#searchbox_form"); + const $search_button = $(".search_button"); search_suggestion.max_num_of_search_results = 999; - search_query_box.typeahead = (opts) => { + $search_query_box.typeahead = (opts) => { assert.equal(opts.fixed, true); assert.equal(opts.items, 999); assert.equal(opts.naturalSearch, true); @@ -115,13 +115,13 @@ run_test("initialize", () => { { let operators; let is_blurred; - search_query_box.on("blur", () => { + $search_query_box.on("blur", () => { is_blurred = true; }); /* Test updater */ const _setup = (search_box_val) => { is_blurred = false; - search_query_box.val(search_box_val); + $search_query_box.val(search_box_val); Filter.parse = (search_string) => { assert.equal(search_string, search_box_val); return operators; @@ -159,26 +159,26 @@ run_test("initialize", () => { assert.equal(opts.updater("stream:Verona"), "stream:Verona"); assert.ok(!is_blurred); - search_query_box.off("blur"); + $search_query_box.off("blur"); } }; search.initialize(); - search_button.prop("disabled", true); - search_query_box.trigger("focus"); - assert.ok(!search_button.prop("disabled")); + $search_button.prop("disabled", true); + $search_query_box.trigger("focus"); + assert.ok(!$search_button.prop("disabled")); - search_query_box.val("test string"); + $search_query_box.val("test string"); narrow_state.search_string = () => "ver"; - search_query_box.trigger("blur"); - assert.equal(search_query_box.val(), "test string"); + $search_query_box.trigger("blur"); + assert.equal($search_query_box.val(), "test string"); search.__Rewire__("is_using_input_method", false); - searchbox_form.trigger("compositionend"); + $searchbox_form.trigger("compositionend"); assert.ok(search.is_using_input_method); - const keydown = searchbox_form.get_on_handler("keydown"); + const keydown = $searchbox_form.get_on_handler("keydown"); let default_prevented = false; let ev = { type: "keydown", @@ -187,7 +187,7 @@ run_test("initialize", () => { default_prevented = true; }, }; - search_query_box.is = () => false; + $search_query_box.is = () => false; assert.equal(keydown(ev), undefined); assert.ok(!default_prevented); @@ -196,7 +196,7 @@ run_test("initialize", () => { assert.ok(!default_prevented); ev.key = "Enter"; - search_query_box.is = () => true; + $search_query_box.is = () => true; assert.equal(keydown(ev), undefined); assert.ok(default_prevented); @@ -206,15 +206,15 @@ run_test("initialize", () => { let operators; let is_blurred; narrow_state.active = () => false; - search_query_box.off("blur"); - search_query_box.on("blur", () => { + $search_query_box.off("blur"); + $search_query_box.on("blur", () => { is_blurred = true; }); const _setup = (search_box_val) => { is_blurred = false; - search_button.prop("disabled", false); - search_query_box.val(search_box_val); + $search_button.prop("disabled", false); + $search_query_box.val(search_box_val); Filter.parse = (search_string) => { assert.equal(search_string, search_box_val); return operators; @@ -235,37 +235,37 @@ run_test("initialize", () => { _setup(""); ev.key = "a"; - search_query_box.is = () => false; - searchbox_form.trigger(ev); + $search_query_box.is = () => false; + $searchbox_form.trigger(ev); assert.ok(!is_blurred); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); ev.key = "Enter"; - search_query_box.is = () => false; - searchbox_form.trigger(ev); + $search_query_box.is = () => false; + $searchbox_form.trigger(ev); assert.ok(!is_blurred); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); ev.key = "Enter"; - search_query_box.is = () => true; - searchbox_form.trigger(ev); + $search_query_box.is = () => true; + $searchbox_form.trigger(ev); assert.ok(is_blurred); _setup("ver"); search.__Rewire__("is_using_input_method", true); - searchbox_form.trigger(ev); + $searchbox_form.trigger(ev); // No change on Enter keyup event when using input tool assert.ok(!is_blurred); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); _setup("ver"); ev.key = "Enter"; - search_query_box.is = () => true; - searchbox_form.trigger(ev); + $search_query_box.is = () => true; + $searchbox_form.trigger(ev); assert.ok(is_blurred); - assert.ok(!search_button.prop("disabled")); + assert.ok(!$search_button.prop("disabled")); }); run_test("initiate_search", () => { diff --git a/frontend_tests/node_tests/settings_bots.js b/frontend_tests/node_tests/settings_bots.js index 9abdcd792a..a901a00937 100644 --- a/frontend_tests/node_tests/settings_bots.js +++ b/frontend_tests/node_tests/settings_bots.js @@ -91,32 +91,32 @@ test("generate_botserverrc_content", () => { }); function test_create_bot_type_input_box_toggle(f) { - const create_payload_url = $("#create_payload_url"); - const payload_url_inputbox = $("#payload_url_inputbox"); - const config_inputbox = $("#config_inputbox"); + const $create_payload_url = $("#create_payload_url"); + const $payload_url_inputbox = $("#payload_url_inputbox"); + const $config_inputbox = $("#config_inputbox"); const EMBEDDED_BOT_TYPE = "4"; const OUTGOING_WEBHOOK_BOT_TYPE = "3"; const GENERIC_BOT_TYPE = "1"; $("#create_bot_type :selected").val(EMBEDDED_BOT_TYPE); f(); - assert.ok(!create_payload_url.hasClass("required")); - assert.ok(!payload_url_inputbox.visible()); + assert.ok(!$create_payload_url.hasClass("required")); + assert.ok(!$payload_url_inputbox.visible()); assert.ok($("#select_service_name").hasClass("required")); assert.ok($("#service_name_list").visible()); - assert.ok(config_inputbox.visible()); + assert.ok($config_inputbox.visible()); $("#create_bot_type :selected").val(OUTGOING_WEBHOOK_BOT_TYPE); f(); - assert.ok(create_payload_url.hasClass("required")); - assert.ok(payload_url_inputbox.visible()); - assert.ok(!config_inputbox.visible()); + assert.ok($create_payload_url.hasClass("required")); + assert.ok($payload_url_inputbox.visible()); + assert.ok(!$config_inputbox.visible()); $("#create_bot_type :selected").val(GENERIC_BOT_TYPE); f(); - assert.ok(!create_payload_url.hasClass("required")); - assert.ok(!payload_url_inputbox.visible()); - assert.ok(!config_inputbox.visible()); + assert.ok(!$create_payload_url.hasClass("required")); + assert.ok(!$payload_url_inputbox.visible()); + assert.ok(!$config_inputbox.visible()); } test("test tab clicks", ({override}) => { @@ -125,10 +125,10 @@ test("test tab clicks", ({override}) => { $("#create_bot_form").validate = () => {}; $("#config_inputbox").children = () => { - const mock_children = { + const $mock_children = { hide: () => {}, }; - return mock_children; + return $mock_children; }; override(avatar, "build_bot_create_widget", () => {}); @@ -137,55 +137,55 @@ test("test tab clicks", ({override}) => { test_create_bot_type_input_box_toggle(() => $("#create_bot_type").trigger("change")); - function click_on_tab(tab_elem) { - tab_elem.trigger("click"); + function click_on_tab($tab_elem) { + $tab_elem.trigger("click"); } const tabs = { - add: $("#bots_lists_navbar .add-a-new-bot-tab"), - active: $("#bots_lists_navbar .active-bots-tab"), - inactive: $("#bots_lists_navbar .inactive-bots-tab"), + $add: $("#bots_lists_navbar .add-a-new-bot-tab"), + $active: $("#bots_lists_navbar .active-bots-tab"), + $inactive: $("#bots_lists_navbar .inactive-bots-tab"), }; $("#bots_lists_navbar .active").removeClass = (cls) => { assert.equal(cls, "active"); - for (const tab of Object.values(tabs)) { - tab.removeClass("active"); + for (const $tab of Object.values(tabs)) { + $tab.removeClass("active"); } }; const forms = { - add: $("#add-a-new-bot-form"), - active: $("#active_bots_list"), - inactive: $("#inactive_bots_list"), + $add: $("#add-a-new-bot-form"), + $active: $("#active_bots_list"), + $inactive: $("#inactive_bots_list"), }; - click_on_tab(tabs.add); - assert.ok(tabs.add.hasClass("active")); - assert.ok(!tabs.active.hasClass("active")); - assert.ok(!tabs.inactive.hasClass("active")); + click_on_tab(tabs.$add); + assert.ok(tabs.$add.hasClass("active")); + assert.ok(!tabs.$active.hasClass("active")); + assert.ok(!tabs.$inactive.hasClass("active")); - assert.ok(forms.add.visible()); - assert.ok(!forms.active.visible()); - assert.ok(!forms.inactive.visible()); + assert.ok(forms.$add.visible()); + assert.ok(!forms.$active.visible()); + assert.ok(!forms.$inactive.visible()); - click_on_tab(tabs.active); - assert.ok(!tabs.add.hasClass("active")); - assert.ok(tabs.active.hasClass("active")); - assert.ok(!tabs.inactive.hasClass("active")); + click_on_tab(tabs.$active); + assert.ok(!tabs.$add.hasClass("active")); + assert.ok(tabs.$active.hasClass("active")); + assert.ok(!tabs.$inactive.hasClass("active")); - assert.ok(!forms.add.visible()); - assert.ok(forms.active.visible()); - assert.ok(!forms.inactive.visible()); + assert.ok(!forms.$add.visible()); + assert.ok(forms.$active.visible()); + assert.ok(!forms.$inactive.visible()); - click_on_tab(tabs.inactive); - assert.ok(!tabs.add.hasClass("active")); - assert.ok(!tabs.active.hasClass("active")); - assert.ok(tabs.inactive.hasClass("active")); + click_on_tab(tabs.$inactive); + assert.ok(!tabs.$add.hasClass("active")); + assert.ok(!tabs.$active.hasClass("active")); + assert.ok(tabs.$inactive.hasClass("active")); - assert.ok(!forms.add.visible()); - assert.ok(!forms.active.visible()); - assert.ok(forms.inactive.visible()); + assert.ok(!forms.$add.visible()); + assert.ok(!forms.$active.visible()); + assert.ok(forms.$inactive.visible()); }); test("can_create_new_bots", () => { diff --git a/frontend_tests/node_tests/settings_muted_topics.js b/frontend_tests/node_tests/settings_muted_topics.js index a2781e2791..787eb73e76 100644 --- a/frontend_tests/node_tests/settings_muted_topics.js +++ b/frontend_tests/node_tests/settings_muted_topics.js @@ -51,15 +51,15 @@ run_test("settings", ({override_rewire}) => { stopPropagation: noop, }; - const topic_fake_this = $.create("fake.settings-unmute-topic"); - const topic_tr_html = $('tr[data-topic="js"]'); - topic_fake_this.closest = (opts) => { + const $topic_fake_this = $.create("fake.settings-unmute-topic"); + const $topic_tr_html = $('tr[data-topic="js"]'); + $topic_fake_this.closest = (opts) => { assert.equal(opts, "tr"); - return topic_tr_html; + return $topic_tr_html; }; let topic_data_called = 0; - topic_tr_html.attr = (opts) => { + $topic_tr_html.attr = (opts) => { if (opts === "data-stream-id") { topic_data_called += 1; return frontend.stream_id; @@ -77,7 +77,7 @@ run_test("settings", ({override_rewire}) => { assert.equal(topic, "js"); unmute_topic_called = true; }; - topic_click_handler.call(topic_fake_this, event); + topic_click_handler.call($topic_fake_this, event); assert.ok(unmute_topic_called); assert.equal(topic_data_called, 2); }); diff --git a/frontend_tests/node_tests/settings_muted_users.js b/frontend_tests/node_tests/settings_muted_users.js index 5b35cbc271..35059f7263 100644 --- a/frontend_tests/node_tests/settings_muted_users.js +++ b/frontend_tests/node_tests/settings_muted_users.js @@ -42,15 +42,15 @@ run_test("settings", ({override_rewire}) => { stopPropagation: noop, }; - const unmute_button = $.create("settings-unmute-user"); - const fake_row = $('tr[data-user-id="5"]'); - unmute_button.closest = (opts) => { + const $unmute_button = $.create("settings-unmute-user"); + const $fake_row = $('tr[data-user-id="5"]'); + $unmute_button.closest = (opts) => { assert.equal(opts, "tr"); - return fake_row; + return $fake_row; }; let row_attribute_fetched = false; - fake_row.attr = (opts) => { + $fake_row.attr = (opts) => { if (opts === "data-user-id") { row_attribute_fetched += 1; return "5"; @@ -64,7 +64,7 @@ run_test("settings", ({override_rewire}) => { unmute_user_called = true; }; - unmute_click_handler.call(unmute_button, event); + unmute_click_handler.call($unmute_button, event); assert.ok(unmute_user_called); assert.ok(row_attribute_fetched); }); diff --git a/frontend_tests/node_tests/settings_org.js b/frontend_tests/node_tests/settings_org.js index 19b503eb67..d47a7dcb86 100644 --- a/frontend_tests/node_tests/settings_org.js +++ b/frontend_tests/node_tests/settings_org.js @@ -31,12 +31,12 @@ mock_esm("../../static/js/loading", { destroy_indicator: noop, }); mock_esm("../../static/js/ui_report", { - success(msg, elem) { - elem.val(msg); + success(msg, $elem) { + $elem.val(msg); }, - error(msg, xhr, elem) { - elem.val(msg); + error(msg, xhr, $elem) { + $elem.val(msg); }, }); @@ -74,9 +74,9 @@ test("unloaded", () => { }); function simulate_realm_domains_table() { - const tr_stub = $.create("realm-tr-stub"); - $("#realm_domains_table tbody").set_find_results("tr", tr_stub); - tr_stub.remove = () => {}; + const $tr_stub = $.create("realm-tr-stub"); + $("#realm_domains_table tbody").set_find_results("tr", $tr_stub); + $tr_stub.remove = () => {}; let appended; $("#realm_domains_table tbody").append = (html) => { @@ -90,7 +90,7 @@ function simulate_realm_domains_table() { } function test_realms_domain_modal(override, add_realm_domain) { - const info = $(".realm_domains_info"); + const $info = $(".realm_domains_info"); $("#add-realm-domain-widget").set_find_results( ".new-realm-domain", @@ -117,46 +117,46 @@ function test_realms_domain_modal(override, add_realm_domain) { assert.ok(posted); success_callback(); - assert.equal(info.val(), "translated HTML: Added successfully!"); + assert.equal($info.val(), "translated HTML: Added successfully!"); error_callback({}); - assert.equal(info.val(), "translated HTML: Failed"); + assert.equal($info.val(), "translated HTML: Failed"); } function createSaveButtons(subsection) { - const stub_save_button_header = $(`#org-${CSS.escape(subsection)}`); - const save_button_controls = $(".save-button-controls"); - const stub_save_button = $(`#org-submit-${CSS.escape(subsection)}`); - const stub_discard_button = $(`#org-discard-${CSS.escape(subsection)}`); - const stub_save_button_text = $(".save-discard-widget-button-text"); - stub_save_button_header.set_find_results( + const $stub_save_button_header = $(`#org-${CSS.escape(subsection)}`); + const $save_button_controls = $(".save-button-controls"); + const $stub_save_button = $(`#org-submit-${CSS.escape(subsection)}`); + const $stub_discard_button = $(`#org-discard-${CSS.escape(subsection)}`); + const $stub_save_button_text = $(".save-discard-widget-button-text"); + $stub_save_button_header.set_find_results( ".subsection-failed-status p", $(""), ); - stub_save_button.closest = () => stub_save_button_header; - save_button_controls.set_find_results(".save-button", stub_save_button); - stub_save_button.set_find_results(".save-discard-widget-button-text", stub_save_button_text); - stub_save_button_header.set_find_results(".save-button-controls", save_button_controls); - stub_save_button_header.set_find_results( + $stub_save_button.closest = () => $stub_save_button_header; + $save_button_controls.set_find_results(".save-button", $stub_save_button); + $stub_save_button.set_find_results(".save-discard-widget-button-text", $stub_save_button_text); + $stub_save_button_header.set_find_results(".save-button-controls", $save_button_controls); + $stub_save_button_header.set_find_results( ".subsection-changes-discard button", $(`#org-discard-${CSS.escape(subsection)}`), ); - save_button_controls.set_find_results(".discard-button", stub_discard_button); + $save_button_controls.set_find_results(".discard-button", $stub_discard_button); const props = {}; props.hidden = false; - save_button_controls.fadeIn = () => { + $save_button_controls.fadeIn = () => { props.hidden = false; }; - save_button_controls.fadeOut = () => { + $save_button_controls.fadeOut = () => { props.hidden = true; }; return { props, - save_button: stub_save_button, - discard_button: stub_discard_button, - save_button_header: stub_save_button_header, - save_button_controls, - save_button_text: stub_save_button_text, + $save_button: $stub_save_button, + $discard_button: $stub_discard_button, + $save_button_header: $stub_save_button_header, + $save_button_controls, + $save_button_text: $stub_save_button_text, }; } @@ -193,55 +193,55 @@ function test_submit_settings_form(override, submit_form) { let subsection = "other-permissions"; ev.currentTarget = `#org-submit-${CSS.escape(subsection)}`; let stubs = createSaveButtons(subsection); - let save_button = stubs.save_button; - save_button.attr("id", `org-submit-${subsection}`); - save_button.replace = () => `${subsection}`; + let $save_button = stubs.$save_button; + $save_button.attr("id", `org-submit-${subsection}`); + $save_button.replace = () => `${subsection}`; $("#id_realm_waiting_period_threshold").val(10); - const invite_to_stream_policy_elem = $("#id_realm_invite_to_stream_policy"); - invite_to_stream_policy_elem.val("1"); - invite_to_stream_policy_elem.attr("id", "id_realm_invite_to_stream_policy"); - invite_to_stream_policy_elem.data = () => "number"; + const $invite_to_stream_policy_elem = $("#id_realm_invite_to_stream_policy"); + $invite_to_stream_policy_elem.val("1"); + $invite_to_stream_policy_elem.attr("id", "id_realm_invite_to_stream_policy"); + $invite_to_stream_policy_elem.data = () => "number"; - const create_public_stream_policy_elem = $("#id_realm_create_public_stream_policy"); - create_public_stream_policy_elem.val("2"); - create_public_stream_policy_elem.attr("id", "id_realm_create_public_stream_policy"); - create_public_stream_policy_elem.data = () => "number"; + const $create_public_stream_policy_elem = $("#id_realm_create_public_stream_policy"); + $create_public_stream_policy_elem.val("2"); + $create_public_stream_policy_elem.attr("id", "id_realm_create_public_stream_policy"); + $create_public_stream_policy_elem.data = () => "number"; - const create_private_stream_policy_elem = $("#id_realm_create_private_stream_policy"); - create_private_stream_policy_elem.val("2"); - create_private_stream_policy_elem.attr("id", "id_realm_create_private_stream_policy"); - create_private_stream_policy_elem.data = () => "number"; + const $create_private_stream_policy_elem = $("#id_realm_create_private_stream_policy"); + $create_private_stream_policy_elem.val("2"); + $create_private_stream_policy_elem.attr("id", "id_realm_create_private_stream_policy"); + $create_private_stream_policy_elem.data = () => "number"; - const add_custom_emoji_policy_elem = $("#id_realm_add_custom_emoji_policy"); - add_custom_emoji_policy_elem.val("1"); - add_custom_emoji_policy_elem.attr("id", "id_realm_add_custom_emoji_policy"); - add_custom_emoji_policy_elem.data = () => "number"; + const $add_custom_emoji_policy_elem = $("#id_realm_add_custom_emoji_policy"); + $add_custom_emoji_policy_elem.val("1"); + $add_custom_emoji_policy_elem.attr("id", "id_realm_add_custom_emoji_policy"); + $add_custom_emoji_policy_elem.data = () => "number"; - const bot_creation_policy_elem = $("#id_realm_bot_creation_policy"); - bot_creation_policy_elem.val("1"); - bot_creation_policy_elem.attr("id", "id_realm_bot_creation_policy"); - bot_creation_policy_elem.data = () => "number"; - const email_address_visibility_elem = $("#id_realm_email_address_visibility"); - email_address_visibility_elem.val("1"); - email_address_visibility_elem.attr("id", "id_realm_email_address_visibility"); - email_address_visibility_elem.data = () => "number"; + const $bot_creation_policy_elem = $("#id_realm_bot_creation_policy"); + $bot_creation_policy_elem.val("1"); + $bot_creation_policy_elem.attr("id", "id_realm_bot_creation_policy"); + $bot_creation_policy_elem.data = () => "number"; + const $email_address_visibility_elem = $("#id_realm_email_address_visibility"); + $email_address_visibility_elem.val("1"); + $email_address_visibility_elem.attr("id", "id_realm_email_address_visibility"); + $email_address_visibility_elem.data = () => "number"; - const invite_to_realm_policy_elem = $("#id_realm_invite_to_realm_policy"); - invite_to_realm_policy_elem.val("2"); - invite_to_realm_policy_elem.attr("id", "id_realm_invite_to_realm_policy"); - invite_to_realm_policy_elem.data = () => "number"; + const $invite_to_realm_policy_elem = $("#id_realm_invite_to_realm_policy"); + $invite_to_realm_policy_elem.val("2"); + $invite_to_realm_policy_elem.attr("id", "id_realm_invite_to_realm_policy"); + $invite_to_realm_policy_elem.data = () => "number"; - let subsection_elem = $(`#org-${CSS.escape(subsection)}`); - subsection_elem.closest = () => subsection_elem; - subsection_elem.set_find_results(".prop-element", [ - bot_creation_policy_elem, - email_address_visibility_elem, - add_custom_emoji_policy_elem, - create_public_stream_policy_elem, - create_private_stream_policy_elem, - invite_to_stream_policy_elem, + let $subsection_elem = $(`#org-${CSS.escape(subsection)}`); + $subsection_elem.closest = () => $subsection_elem; + $subsection_elem.set_find_results(".prop-element", [ + $bot_creation_policy_elem, + $email_address_visibility_elem, + $add_custom_emoji_policy_elem, + $create_public_stream_policy_elem, + $create_private_stream_policy_elem, + $invite_to_stream_policy_elem, ]); patched = false; @@ -261,17 +261,17 @@ function test_submit_settings_form(override, submit_form) { subsection = "user-defaults"; ev.currentTarget = `#org-submit-${CSS.escape(subsection)}`; stubs = createSaveButtons(subsection); - save_button = stubs.save_button; - save_button.attr("id", `org-submit-${subsection}`); + $save_button = stubs.$save_button; + $save_button.attr("id", `org-submit-${subsection}`); - const realm_default_language_elem = $("#id_realm_default_language"); - realm_default_language_elem.val("en"); - realm_default_language_elem.attr("id", "id_realm_default_language"); - realm_default_language_elem.data = () => "string"; + const $realm_default_language_elem = $("#id_realm_default_language"); + $realm_default_language_elem.val("en"); + $realm_default_language_elem.attr("id", "id_realm_default_language"); + $realm_default_language_elem.data = () => "string"; - subsection_elem = $(`#org-${CSS.escape(subsection)}`); - subsection_elem.closest = () => subsection_elem; - subsection_elem.set_find_results(".prop-element", [realm_default_language_elem]); + $subsection_elem = $(`#org-${CSS.escape(subsection)}`); + $subsection_elem.closest = () => $subsection_elem; + $subsection_elem.set_find_results(".prop-element", [$realm_default_language_elem]); submit_form(ev); assert.ok(patched); @@ -284,50 +284,50 @@ function test_submit_settings_form(override, submit_form) { // Testing only once for since callback is same for all cases success_callback(); assert.equal(stubs.props.hidden, true); - assert.equal(save_button.attr("data-status"), "saved"); - assert.equal(stubs.save_button_text.text(), "translated: Saved"); + assert.equal($save_button.attr("data-status"), "saved"); + assert.equal(stubs.$save_button_text.text(), "translated: Saved"); } function test_change_save_button_state() { - const {save_button_controls, save_button_text, save_button, discard_button, props} = + const {$save_button_controls, $save_button_text, $save_button, $discard_button, props} = createSaveButtons("msg-editing"); - save_button.attr("id", "org-submit-msg-editing"); + $save_button.attr("id", "org-submit-msg-editing"); { - settings_org.change_save_button_state(save_button_controls, "unsaved"); - assert.equal(save_button_text.text(), "translated: Save changes"); + settings_org.change_save_button_state($save_button_controls, "unsaved"); + assert.equal($save_button_text.text(), "translated: Save changes"); assert.equal(props.hidden, false); - assert.equal(save_button.attr("data-status"), "unsaved"); - assert.equal(discard_button.visible(), true); + assert.equal($save_button.attr("data-status"), "unsaved"); + assert.equal($discard_button.visible(), true); } { - settings_org.change_save_button_state(save_button_controls, "saved"); - assert.equal(save_button_text.text(), "translated: Save changes"); + settings_org.change_save_button_state($save_button_controls, "saved"); + assert.equal($save_button_text.text(), "translated: Save changes"); assert.equal(props.hidden, true); - assert.equal(save_button.attr("data-status"), ""); + assert.equal($save_button.attr("data-status"), ""); } { - settings_org.change_save_button_state(save_button_controls, "saving"); - assert.equal(save_button_text.text(), "translated: Saving"); - assert.equal(save_button.attr("data-status"), "saving"); - assert.equal(save_button.hasClass("saving"), true); - assert.equal(discard_button.visible(), false); + settings_org.change_save_button_state($save_button_controls, "saving"); + assert.equal($save_button_text.text(), "translated: Saving"); + assert.equal($save_button.attr("data-status"), "saving"); + assert.equal($save_button.hasClass("saving"), true); + assert.equal($discard_button.visible(), false); } { - settings_org.change_save_button_state(save_button_controls, "discarded"); + settings_org.change_save_button_state($save_button_controls, "discarded"); assert.equal(props.hidden, true); } { - settings_org.change_save_button_state(save_button_controls, "succeeded"); + settings_org.change_save_button_state($save_button_controls, "succeeded"); assert.equal(props.hidden, true); - assert.equal(save_button.attr("data-status"), "saved"); - assert.equal(save_button_text.text(), "translated: Saved"); + assert.equal($save_button.attr("data-status"), "saved"); + assert.equal($save_button_text.text(), "translated: Saved"); } { - settings_org.change_save_button_state(save_button_controls, "failed"); + settings_org.change_save_button_state($save_button_controls, "failed"); assert.equal(props.hidden, false); - assert.equal(save_button.attr("data-status"), "failed"); - assert.equal(save_button_text.text(), "translated: Save changes"); + assert.equal($save_button.attr("data-status"), "failed"); + assert.equal($save_button_text.text(), "translated: Save changes"); } } @@ -358,8 +358,8 @@ function test_change_allow_subdomains(change_allow_subdomains) { stopPropagation: noop, }; - const info = $(".realm_domains_info"); - info.fadeOut = noop; + const $info = $(".realm_domains_info"); + $info.fadeOut = noop; const domain = "example.com"; let allow = true; @@ -372,33 +372,33 @@ function test_change_allow_subdomains(change_allow_subdomains) { error_callback = req.error; }; - const domain_obj = $.create("domain object"); - domain_obj.text(domain); + const $domain_obj = $.create("domain object"); + $domain_obj.text(domain); - const elem_obj = $.create(""); - const parents_obj = $.create("parents object"); + const $elem_obj = $.create(""); + const $parents_obj = $.create("parents object"); - elem_obj.set_parents_result("tr", parents_obj); - parents_obj.set_find_results(".domain", domain_obj); - elem_obj.prop("checked", allow); + $elem_obj.set_parents_result("tr", $parents_obj); + $parents_obj.set_find_results(".domain", $domain_obj); + $elem_obj.prop("checked", allow); - change_allow_subdomains.call(elem_obj, ev); + change_allow_subdomains.call($elem_obj, ev); success_callback(); assert.equal( - info.val(), + $info.val(), "translated HTML: Update successful: Subdomains allowed for example.com", ); error_callback({}); - assert.equal(info.val(), "translated HTML: Failed"); + assert.equal($info.val(), "translated HTML: Failed"); allow = false; - elem_obj.prop("checked", allow); - change_allow_subdomains.call(elem_obj, ev); + $elem_obj.prop("checked", allow); + change_allow_subdomains.call($elem_obj, ev); success_callback(); assert.equal( - info.val(), + $info.val(), "translated HTML: Update successful: Subdomains no longer allowed for example.com", ); } @@ -431,9 +431,9 @@ function test_sync_realm_settings() { { /* Test invalid settings property sync */ - const property_elem = $("#id_realm_invalid_settings_property"); - property_elem.attr("id", "id_realm_invalid_settings_property"); - property_elem.length = 1; + const $property_elem = $("#id_realm_invalid_settings_property"); + $property_elem.attr("id", "id_realm_invalid_settings_property"); + $property_elem.length = 1; blueslip.expect( "error", @@ -443,9 +443,9 @@ function test_sync_realm_settings() { } function test_common_policy(property_name) { - const property_elem = $(`#id_realm_${CSS.escape(property_name)}`); - property_elem.length = 1; - property_elem.attr("id", `id_realm_${CSS.escape(property_name)}`); + const $property_elem = $(`#id_realm_${CSS.escape(property_name)}`); + $property_elem.length = 1; + $property_elem.attr("id", `id_realm_${CSS.escape(property_name)}`); /* Each policy is initialized to 'by_members' and then all the values are tested in the following order - by_admins_only, by_moderators_only, by_full_members, @@ -453,14 +453,14 @@ function test_sync_realm_settings() { page_params[`realm_${property_name}`] = settings_config.common_policy_values.by_members.code; - property_elem.val(settings_config.common_policy_values.by_members.code); + $property_elem.val(settings_config.common_policy_values.by_members.code); for (const policy_value of Array.from( Object.values(settings_config.common_policy_values), )) { page_params[`realm_${property_name}`] = policy_value.code; settings_org.sync_realm_settings(property_name); - assert.equal(property_elem.val(), policy_value.code); + assert.equal($property_elem.val(), policy_value.code); } } @@ -471,9 +471,9 @@ function test_sync_realm_settings() { { /* Test message content edit limit minutes sync */ - const property_elem = $("#id_realm_message_content_edit_limit_minutes"); - property_elem.length = 1; - property_elem.attr("id", "id_realm_message_content_edit_limit_minutes"); + const $property_elem = $("#id_realm_message_content_edit_limit_minutes"); + $property_elem.length = 1; + $property_elem.attr("id", "id_realm_message_content_edit_limit_minutes"); page_params.realm_create_public_stream_policy = 1; page_params.realm_message_content_edit_limit_seconds = 120; @@ -484,9 +484,9 @@ function test_sync_realm_settings() { { /* Test message content edit limit dropdown value sync */ - const property_elem = $("#id_realm_msg_edit_limit_setting"); - property_elem.length = 1; - property_elem.attr("id", "id_realm_msg_edit_limit_setting"); + const $property_elem = $("#id_realm_msg_edit_limit_setting"); + $property_elem.length = 1; + $property_elem.attr("id", "id_realm_msg_edit_limit_setting"); page_params.realm_allow_message_editing = false; page_params.realm_message_content_edit_limit_seconds = 120; @@ -506,9 +506,9 @@ function test_sync_realm_settings() { { /* Test message content edit limit minutes sync */ - const property_elem = $("#id_realm_message_content_edit_limit_minutes"); - property_elem.length = 1; - property_elem.attr("id", "id_realm_message_content_edit_limit_minutes"); + const $property_elem = $("#id_realm_message_content_edit_limit_minutes"); + $property_elem.length = 1; + $property_elem.attr("id", "id_realm_message_content_edit_limit_minutes"); page_params.realm_create_public_stream_policy = 1; page_params.realm_message_content_edit_limit_seconds = 120; @@ -519,9 +519,9 @@ function test_sync_realm_settings() { { /* Test organization joining restrictions settings sync */ - const property_elem = $("#id_realm_org_join_restrictions"); - property_elem.length = 1; - property_elem.attr("id", "id_realm_org_join_restrictions"); + const $property_elem = $("#id_realm_org_join_restrictions"); + $property_elem.length = 1; + $property_elem.attr("id", "id_realm_org_join_restrictions"); page_params.realm_emails_restricted_to_domains = true; page_params.realm_disallow_disposable_email_addresses = false; @@ -541,10 +541,10 @@ function test_sync_realm_settings() { } function test_parse_time_limit() { - const elem = $("#id_realm_message_content_edit_limit_minutes"); + const $elem = $("#id_realm_message_content_edit_limit_minutes"); const test_function = (value, expected_value = value) => { - elem.val(value); - page_params.realm_message_content_edit_limit_seconds = settings_org.parse_time_limit(elem); + $elem.val(value); + page_params.realm_message_content_edit_limit_seconds = settings_org.parse_time_limit($elem); assert.equal( settings_org.get_realm_time_limits_in_minutes( "realm_message_content_edit_limit_seconds", @@ -587,40 +587,40 @@ function test_discard_changes_button(discard_changes) { settings_config.common_message_policy_values.by_everyone.code; page_params.realm_message_content_delete_limit_seconds = 120; - const allow_edit_history = $("#id_realm_allow_edit_history").prop("checked", false); - const edit_topic_policy = $("#id_realm_edit_topic_policy").val( + const $allow_edit_history = $("#id_realm_allow_edit_history").prop("checked", false); + const $edit_topic_policy = $("#id_realm_edit_topic_policy").val( settings_config.common_message_policy_values.by_admins_only.code, ); - const msg_edit_limit_setting = $("#id_realm_msg_edit_limit_setting").val("custom_limit"); - const message_content_edit_limit_minutes = $( + const $msg_edit_limit_setting = $("#id_realm_msg_edit_limit_setting").val("custom_limit"); + const $message_content_edit_limit_minutes = $( "#id_realm_message_content_edit_limit_minutes", ).val(130); - const msg_delete_limit_setting = $("#id_realm_msg_delete_limit_setting").val("custom_limit"); - const message_content_delete_limit_minutes = $( + const $msg_delete_limit_setting = $("#id_realm_msg_delete_limit_setting").val("custom_limit"); + const $message_content_delete_limit_minutes = $( "#id_realm_message_content_delete_limit_minutes", ).val(130); - allow_edit_history.attr("id", "id_realm_allow_edit_history"); - msg_edit_limit_setting.attr("id", "id_realm_msg_edit_limit_setting"); - msg_delete_limit_setting.attr("id", "id_realm_msg_delete_limit_setting"); - edit_topic_policy.attr("id", "id_realm_edit_topic_policy"); - message_content_edit_limit_minutes.attr("id", "id_realm_message_content_edit_limit_minutes"); - message_content_delete_limit_minutes.attr( + $allow_edit_history.attr("id", "id_realm_allow_edit_history"); + $msg_edit_limit_setting.attr("id", "id_realm_msg_edit_limit_setting"); + $msg_delete_limit_setting.attr("id", "id_realm_msg_delete_limit_setting"); + $edit_topic_policy.attr("id", "id_realm_edit_topic_policy"); + $message_content_edit_limit_minutes.attr("id", "id_realm_message_content_edit_limit_minutes"); + $message_content_delete_limit_minutes.attr( "id", "id_realm_message_content_delete_limit_minutes", ); - const discard_button_parent = $(".org-subsection-parent"); - discard_button_parent.find = () => [ - allow_edit_history, - msg_edit_limit_setting, - msg_delete_limit_setting, - edit_topic_policy, - message_content_edit_limit_minutes, - message_content_delete_limit_minutes, + const $discard_button_parent = $(".org-subsection-parent"); + $discard_button_parent.find = () => [ + $allow_edit_history, + $msg_edit_limit_setting, + $msg_delete_limit_setting, + $edit_topic_policy, + $message_content_edit_limit_minutes, + $message_content_delete_limit_minutes, ]; - $("#org-discard-msg-editing").closest = () => discard_button_parent; + $("#org-discard-msg-editing").closest = () => $discard_button_parent; const stubbed_function = settings_org.change_save_button_state; settings_org.__Rewire__("change_save_button_state", (save_button_controls, state) => { @@ -629,15 +629,15 @@ function test_discard_changes_button(discard_changes) { discard_changes(ev); - assert.equal(allow_edit_history.prop("checked"), true); + assert.equal($allow_edit_history.prop("checked"), true); assert.equal( - edit_topic_policy.val(), + $edit_topic_policy.val(), settings_config.common_message_policy_values.by_everyone.code, ); - assert.equal(msg_edit_limit_setting.val(), "upto_one_hour"); - assert.equal(message_content_edit_limit_minutes.val(), "60"); - assert.equal(msg_delete_limit_setting.val(), "upto_two_min"); - assert.equal(message_content_delete_limit_minutes.val(), "2"); + assert.equal($msg_edit_limit_setting.val(), "upto_one_hour"); + assert.equal($message_content_edit_limit_minutes.val(), "60"); + assert.equal($msg_delete_limit_setting.val(), "upto_two_min"); + assert.equal($message_content_delete_limit_minutes.val(), "2"); settings_org.__Rewire__("change_save_button_state", stubbed_function); } @@ -683,8 +683,8 @@ test("set_up", ({override, override_rewire, mock_template}) => { $("#enable_digest_emails_label").set_parent($.create("")); $("#id_realm_digest_weekday").set_parent($.create("")); $("#allowed_domains_label").set_parent($.create("")); - const waiting_period_parent_elem = $.create("waiting-period-parent-stub"); - $("#id_realm_waiting_period_threshold").set_parent(waiting_period_parent_elem); + const $waiting_period_parent_elem = $.create("waiting-period-parent-stub"); + $("#id_realm_waiting_period_threshold").set_parent($waiting_period_parent_elem); $("#id_realm_create_web_public_stream_policy").set_parent( $.create(""), ); @@ -829,8 +829,8 @@ test("test get_sorted_options_list", () => { test("misc", ({override_rewire}) => { page_params.is_admin = false; - const stub_notification_disable_parent = $.create(""), ); @@ -904,14 +904,14 @@ test("misc", ({override_rewire}) => { "realm_signup_notifications_stream_id", "realm_default_code_block_language", ]; - const dropdown_list_parent = $.create(""); - dropdown_list_parent.set_find_results( + const $dropdown_list_parent = $.create(""); + $dropdown_list_parent.set_find_results( ".dropdown_list_reset_button", $.create(""), ); for (const name of widget_settings) { - const elem = $.create(`#${CSS.escape(name)}_widget #${CSS.escape(name)}_name`); - elem.closest = () => dropdown_list_parent; + const $elem = $.create(`#${CSS.escape(name)}_widget #${CSS.escape(name)}_name`); + $elem.closest = () => $dropdown_list_parent; } // We do not define any settings we need in page_params yet, but we don't need to for this test. @@ -923,32 +923,32 @@ test("misc", ({override_rewire}) => { settings_org.init_dropdown_widgets(); let setting_name = "realm_notifications_stream_id"; - let elem = $(`#${CSS.escape(setting_name)}_widget #${CSS.escape(setting_name)}_name`); - elem.closest = () => stub_notification_disable_parent; + let $elem = $(`#${CSS.escape(setting_name)}_widget #${CSS.escape(setting_name)}_name`); + $elem.closest = () => $stub_notification_disable_parent; sub_store.__Rewire__("get", (stream_id) => { assert.equal(stream_id, 42); return {name: "some_stream"}; }); settings_org.notifications_stream_widget.render(42); - assert.equal(elem.text(), "#some_stream"); - assert.ok(!elem.hasClass("text-warning")); + assert.equal($elem.text(), "#some_stream"); + assert.ok(!$elem.hasClass("text-warning")); settings_org.notifications_stream_widget.render(undefined); - assert.equal(elem.text(), "translated: Disabled"); - assert.ok(elem.hasClass("text-warning")); + assert.equal($elem.text(), "translated: Disabled"); + assert.ok($elem.hasClass("text-warning")); setting_name = "realm_signup_notifications_stream_id"; - elem = $(`#${CSS.escape(setting_name)}_widget #${CSS.escape(setting_name)}_name`); - elem.closest = () => stub_notification_disable_parent; + $elem = $(`#${CSS.escape(setting_name)}_widget #${CSS.escape(setting_name)}_name`); + $elem.closest = () => $stub_notification_disable_parent; sub_store.__Rewire__("get", (stream_id) => { assert.equal(stream_id, 75); return {name: "some_stream"}; }); settings_org.signup_notifications_stream_widget.render(75); - assert.equal(elem.text(), "#some_stream"); - assert.ok(!elem.hasClass("text-warning")); + assert.equal($elem.text(), "#some_stream"); + assert.ok(!$elem.hasClass("text-warning")); settings_org.signup_notifications_stream_widget.render(undefined); - assert.equal(elem.text(), "translated: Disabled"); - assert.ok(elem.hasClass("text-warning")); + assert.equal($elem.text(), "translated: Disabled"); + assert.ok($elem.hasClass("text-warning")); }); diff --git a/frontend_tests/node_tests/settings_profile_fields.js b/frontend_tests/node_tests/settings_profile_fields.js index 1a54a17b13..f897959084 100644 --- a/frontend_tests/node_tests/settings_profile_fields.js +++ b/frontend_tests/node_tests/settings_profile_fields.js @@ -43,19 +43,19 @@ function test_populate(opts, template_data) { const fields_data = opts.fields_data; page_params.is_admin = opts.is_admin; - const table = $("#admin_profile_fields_table"); - const rows = $.create("rows"); - const form = $.create("forms"); - table.set_find_results("tr.profile-field-row", rows); - table.set_find_results("tr.profile-field-form", form); + const $table = $("#admin_profile_fields_table"); + const $rows = $.create("rows"); + const $form = $.create("forms"); + $table.set_find_results("tr.profile-field-row", $rows); + $table.set_find_results("tr.profile-field-form", $form); - table[0] = "stub"; + $table[0] = "stub"; - rows.remove = () => {}; - form.remove = () => {}; + $rows.remove = () => {}; + $form.remove = () => {}; let num_appends = 0; - table.append = () => { + $table.append = () => { num_appends += 1; }; diff --git a/frontend_tests/node_tests/settings_user_groups.js b/frontend_tests/node_tests/settings_user_groups.js index 1620299337..56b66ac512 100644 --- a/frontend_tests/node_tests/settings_user_groups.js +++ b/frontend_tests/node_tests/settings_user_groups.js @@ -34,9 +34,9 @@ const settings_data = zrequire("settings_data"); const settings_user_groups = zrequire("settings_user_groups"); const user_pill = zrequire("user_pill"); -function reset_test_setup(pill_container_stub) { +function reset_test_setup($pill_container_stub) { function input_pill_stub(opts) { - assert.equal(opts.container, pill_container_stub); + assert.equal(opts.$container, $pill_container_stub); create_item_handler = opts.create_item_from_text; assert.ok(create_item_handler); return pills; @@ -119,18 +119,18 @@ test_ui("populate_user_groups", ({override_rewire, mock_template}) => { people.get_visible_email = () => bob.email; let templates_render_called = false; - const fake_rendered_temp = $.create("fake_admin_user_group_list_template_rendered"); + const $fake_rendered_temp = $.create("fake_admin_user_group_list_template_rendered"); mock_template("settings/admin_user_group_list.hbs", false, (args) => { assert.equal(args.user_group.id, 1); assert.equal(args.user_group.name, "Mobile"); assert.equal(args.user_group.description, "All mobile people"); templates_render_called = true; - return fake_rendered_temp; + return $fake_rendered_temp; }); let user_groups_list_append_called = false; $("#user-groups").append = (rendered_temp) => { - assert.equal(rendered_temp, fake_rendered_temp); + assert.equal(rendered_temp, $fake_rendered_temp); user_groups_list_append_called = true; }; @@ -158,7 +158,7 @@ test_ui("populate_user_groups", ({override_rewire, mock_template}) => { const all_pills = new Map(); - const pill_container_stub = $(`.pill-container[data-group-pills="${CSS.escape(1)}"]`); + const $pill_container_stub = $(`.pill-container[data-group-pills="${CSS.escape(1)}"]`); pills.appendValidatedData = (item) => { const id = item.user_id; assert.ok(!all_pills.has(id)); @@ -171,11 +171,11 @@ test_ui("populate_user_groups", ({override_rewire, mock_template}) => { text_cleared = true; }; - const input_field_stub = $.create("fake-input-field"); - pill_container_stub.children = () => input_field_stub; + const $input_field_stub = $.create("fake-input-field"); + $pill_container_stub.children = () => $input_field_stub; let input_typeahead_called = false; - input_field_stub.typeahead = (config) => { + $input_field_stub.typeahead = (config) => { assert.equal(config.items, 5); assert.ok(config.fixed); assert.ok(config.dropup); @@ -187,9 +187,9 @@ test_ui("populate_user_groups", ({override_rewire, mock_template}) => { assert.equal(typeof config.updater, "function"); (function test_highlighter() { - const fake_person = $.create("fake-person"); - typeahead_helper.render_person = () => fake_person; - assert.equal(config.highlighter(), fake_person); + const $fake_person = $.create("fake-person"); + typeahead_helper.render_person = () => $fake_person; + assert.equal(config.highlighter(), $fake_person); })(); const fake_context = { @@ -236,7 +236,7 @@ test_ui("populate_user_groups", ({override_rewire, mock_template}) => { })(); (function test_updater() { - input_field_stub.text("@ali"); + $input_field_stub.text("@ali"); user_groups.get_user_group_from_id = () => realm_user_group; let saved_fade_out_called = false; @@ -334,7 +334,7 @@ test_ui("populate_user_groups", ({override_rewire, mock_template}) => { handler(); }; - reset_test_setup(pill_container_stub); + reset_test_setup($pill_container_stub); settings_user_groups.set_up(); assert.ok(templates_render_called); assert.ok(user_groups_list_append_called); @@ -386,63 +386,63 @@ test_ui("with_external_user", ({override_rewire, mock_template}) => { $.clear_all_elements(); let user_group_find_called = 0; - const user_group_stub = $(`div.user-group[id="${CSS.escape(1)}"]`); - const name_field_stub = $.create("fake-name-field"); - const description_field_stub = $.create("fake-description-field"); - const input_stub = $.create("fake-input"); - user_group_stub.find = (elem) => { + const $user_group_stub = $(`div.user-group[id="${CSS.escape(1)}"]`); + const $name_field_stub = $.create("fake-name-field"); + const $description_field_stub = $.create("fake-description-field"); + const $input_stub = $.create("fake-input"); + $user_group_stub.find = (elem) => { if (elem === ".name") { user_group_find_called += 1; - return name_field_stub; + return $name_field_stub; } if (elem === ".description") { user_group_find_called += 1; - return description_field_stub; + return $description_field_stub; } throw new Error(`Unknown element ${elem}`); }; - const pill_container_stub = $(`.pill-container[data-group-pills="${CSS.escape(1)}"]`); - const pill_stub = $.create("fake-pill"); + const $pill_container_stub = $(`.pill-container[data-group-pills="${CSS.escape(1)}"]`); + const $pill_stub = $.create("fake-pill"); let pill_container_find_called = 0; - pill_container_stub.find = (elem) => { + $pill_container_stub.find = (elem) => { if (elem === ".input") { pill_container_find_called += 1; - return input_stub; + return $input_stub; } if (elem === ".pill") { pill_container_find_called += 1; - return pill_stub; + return $pill_stub; } throw new Error(`Unknown element ${elem}`); }; - input_stub.css = (property, val) => { + $input_stub.css = (property, val) => { assert.equal(property, "display"); assert.equal(val, "none"); }; // Test the 'off' handlers on the pill-container const turned_off = {}; - pill_container_stub.off = (event_name, sel = "whole") => { + $pill_container_stub.off = (event_name, sel = "whole") => { turned_off[event_name + "/" + sel] = true; }; - const exit_button = $.create("fake-pill-exit"); - pill_stub.set_find_results(".exit", exit_button); + const $exit_button = $.create("fake-pill-exit"); + $pill_stub.set_find_results(".exit", $exit_button); let exit_button_called = false; - exit_button.css = (property, value) => { + $exit_button.css = (property, value) => { exit_button_called = true; assert.equal(property, "opacity"); assert.equal(value, "0.5"); }; // We return noop because these are already tested, so we skip them - pill_container_stub.children = () => noop; + $pill_container_stub.children = () => noop; $("#user-groups").append = () => noop; - reset_test_setup(pill_container_stub); + reset_test_setup($pill_container_stub); settings_user_groups.set_up(); @@ -451,8 +451,8 @@ test_ui("with_external_user", ({override_rewire, mock_template}) => { // Test different handlers with an external user const delete_handler = $("#user-groups").get_on_handler("click", ".delete"); - const fake_delete = $.create("fk-#user-groups.delete_btn"); - fake_delete.set_parents_result(".user-group", $(".user-group")); + const $fake_delete = $.create("fk-#user-groups.delete_btn"); + $fake_delete.set_parents_result(".user-group", $(".user-group")); set_parents_result_called += 1; $(".user-group").attr("id", "1"); set_attributes_called += 1; @@ -470,11 +470,11 @@ test_ui("with_external_user", ({override_rewire, mock_template}) => { const event = { stopPropagation: noop, }; - const pill_mouseenter_handler = pill_stub.get_on_handler("mouseenter"); - const pill_click_handler = pill_container_stub.get_on_handler("click"); + const pill_mouseenter_handler = $pill_stub.get_on_handler("mouseenter"); + const pill_click_handler = $pill_container_stub.get_on_handler("click"); pill_mouseenter_handler(event); pill_click_handler(event); - assert.equal(delete_handler.call(fake_delete), undefined); + assert.equal(delete_handler.call($fake_delete), undefined); assert.equal(name_update_handler(), undefined); assert.equal(des_update_handler(), undefined); assert.equal(member_change_handler(), undefined); @@ -524,7 +524,7 @@ test_ui("on_events", ({override_rewire, mock_template}) => { stopPropagation: noop, preventDefault: noop, }; - const fake_this = $.create("fake-form.admin-user-group-form"); + const $fake_this = $.create("fake-form.admin-user-group-form"); const fake_object_array = [ { name: "fake-name", @@ -535,7 +535,7 @@ test_ui("on_events", ({override_rewire, mock_template}) => { value: "fake-value", }, ]; - fake_this.serializeArray = () => fake_object_array; + $fake_this.serializeArray = () => fake_object_array; channel.post = (opts) => { const data = { members: "[null]", @@ -577,13 +577,13 @@ test_ui("on_events", ({override_rewire, mock_template}) => { })(); }; - handler.call(fake_this, event); + handler.call($fake_this, event); })(); (function test_user_groups_delete_click_triggered() { const handler = $("#user-groups").get_on_handler("click", ".delete"); - const fake_this = $.create("fake-#user-groups.delete_btn"); - fake_this.set_parents_result(".user-group", $(".user-group")); + const $fake_this = $.create("fake-#user-groups.delete_btn"); + $fake_this.set_parents_result(".user-group", $(".user-group")); $(".user-group").attr("id", "1"); channel.del = (opts) => { @@ -593,16 +593,16 @@ test_ui("on_events", ({override_rewire, mock_template}) => { assert.equal(opts.url, "/json/user_groups/1"); assert.deepEqual(opts.data, data); - fake_this.text($t({defaultMessage: "fake-text"})); + $fake_this.text($t({defaultMessage: "fake-text"})); opts.error(); - assert.equal(fake_this.text(), "translated: Failed!"); + assert.equal($fake_this.text(), "translated: Failed!"); }; confirm_dialog.launch = (conf) => { conf.on_click(); }; - handler.call(fake_this); + handler.call($fake_this); })(); (function test_user_groups_keypress_enter_triggered() { @@ -625,9 +625,10 @@ test_ui("on_events", ({override_rewire, mock_template}) => { api_endpoint_called = true; }; channel.patch = noop; - const fake_this = $.create("fake-#user-groups_do_not_blur"); + const $fake_this = $.create("fake-#user-groups_do_not_blur"); const event = { - relatedTarget: fake_this, + // FIXME: event.relatedTarget should not be a jQuery object + relatedTarget: $fake_this, }; // Any of the blur_exceptions trigger blur event. @@ -645,24 +646,24 @@ test_ui("on_events", ({override_rewire, mock_template}) => { continue; } api_endpoint_called = false; - fake_this.closest = (class_name) => { + $fake_this.closest = (class_name) => { if (class_name === blur_exception || class_name === user_group_selector) { return [1]; } return []; }; - handler.call(fake_this, event); + handler.call($fake_this, event); assert.ok(!api_endpoint_called); } api_endpoint_called = false; - fake_this.closest = (class_name) => { + $fake_this.closest = (class_name) => { if (class_name === ".typeahead") { return [1]; } return []; }; - handler.call(fake_this, event); + handler.call($fake_this, event); assert.ok(!api_endpoint_called); // Cancel button triggers blur event. @@ -671,7 +672,7 @@ test_ui("on_events", ({override_rewire, mock_template}) => { settings_user_groups_reload_called = true; }); api_endpoint_called = false; - fake_this.closest = (class_name) => { + $fake_this.closest = (class_name) => { if ( class_name === ".save-status.btn-danger" || class_name === user_group_selector @@ -680,7 +681,7 @@ test_ui("on_events", ({override_rewire, mock_template}) => { } return []; }; - handler.call(fake_this, event); + handler.call($fake_this, event); assert.ok(!api_endpoint_called); assert.ok(settings_user_groups_reload_called); } @@ -689,10 +690,10 @@ test_ui("on_events", ({override_rewire, mock_template}) => { (function test_update_cancel_button() { const handler_name = $(user_group_selector).get_on_handler("input", ".name"); const handler_desc = $(user_group_selector).get_on_handler("input", ".description"); - const sib_des = $(description_selector); - const sib_name = $(name_selector); - sib_name.text($t({defaultMessage: "mobile"})); - sib_des.text($t({defaultMessage: "All mobile members"})); + const $sib_des = $(description_selector); + const $sib_name = $(name_selector); + $sib_name.text($t({defaultMessage: "mobile"})); + $sib_des.text($t({defaultMessage: "All mobile members"})); const group_data = { name: "translated: mobile", @@ -712,8 +713,8 @@ test_ui("on_events", ({override_rewire, mock_template}) => { }; // Cancel button removed if user group if user group has no changes. - const fake_this = $.create("fake-#update_cancel_button"); - handler_name.call(fake_this); + const $fake_this = $.create("fake-#update_cancel_button"); + handler_name.call($fake_this); assert.ok(cancel_fade_out_called); assert.ok(instructions_fade_out_called); @@ -721,14 +722,14 @@ test_ui("on_events", ({override_rewire, mock_template}) => { $(user_group_selector + " .user-group-status").show(); cancel_fade_out_called = false; instructions_fade_out_called = false; - handler_name.call(fake_this); + handler_name.call($fake_this); assert.ok(cancel_fade_out_called); assert.ok(instructions_fade_out_called); // Check for handler_desc to achieve 100% coverage. cancel_fade_out_called = false; instructions_fade_out_called = false; - handler_desc.call(fake_this); + handler_desc.call($fake_this); assert.ok(cancel_fade_out_called); assert.ok(instructions_fade_out_called); })(); @@ -736,10 +737,10 @@ test_ui("on_events", ({override_rewire, mock_template}) => { (function test_user_groups_save_group_changes_triggered() { const handler_name = $(user_group_selector).get_on_handler("blur", ".name"); const handler_desc = $(user_group_selector).get_on_handler("blur", ".description"); - const sib_des = $(description_selector); - const sib_name = $(name_selector); - sib_name.text($t({defaultMessage: "mobile"})); - sib_des.text($t({defaultMessage: "All mobile members"})); + const $sib_des = $(description_selector); + const $sib_name = $(name_selector); + $sib_name.text($t({defaultMessage: "mobile"})); + $sib_des.text($t({defaultMessage: "All mobile members"})); const group_data = {members: new Set([2, 31])}; user_groups.get_user_group_from_id = () => group_data; @@ -782,46 +783,47 @@ test_ui("on_events", ({override_rewire, mock_template}) => { assert.ok(saved_fade_to_called); })(); (function test_post_error() { - const user_group_error = $(user_group_selector + " .user-group-status"); - user_group_error.show(); + const $user_group_error = $(user_group_selector + " .user-group-status"); + $user_group_error.show(); ui_report.error = (error_msg, error_obj, ele) => { const xhr = { responseText: '{"msg":"fake-msg"}', }; assert.equal(error_msg, "translated HTML: Failed"); assert.deepEqual(error_obj, xhr); - assert.equal(ele, user_group_error); + assert.equal(ele, $user_group_error); }; const xhr = { responseText: '{"msg":"fake-msg", "attrib":"val"}', }; opts.error(xhr); - assert.ok(user_group_error.visible()); + assert.ok($user_group_error.visible()); })(); }; - const fake_this = $.create("fake-#user-groups_blur_name"); - fake_this.closest = () => []; - fake_this.set_parents_result(user_group_selector, $(user_group_selector)); + const $fake_this = $.create("fake-#user-groups_blur_name"); + $fake_this.closest = () => []; + $fake_this.set_parents_result(user_group_selector, $(user_group_selector)); const event = { - relatedTarget: fake_this, + // FIXME: event.relatedTarget should not be a jQuery object + relatedTarget: $fake_this, }; api_endpoint_called = false; - handler_name.call(fake_this, event); + handler_name.call($fake_this, event); assert.ok(api_endpoint_called); // Check API endpoint isn't called if name and desc haven't changed. group_data.name = "translated: mobile"; group_data.description = "translated: All mobile members"; api_endpoint_called = false; - handler_name.call(fake_this, event); + handler_name.call($fake_this, event); assert.ok(!api_endpoint_called); // Check for handler_desc to achieve 100% coverage. api_endpoint_called = false; - handler_desc.call(fake_this, event); + handler_desc.call($fake_this, event); assert.ok(!api_endpoint_called); })(); @@ -869,15 +871,16 @@ test_ui("on_events", ({override_rewire, mock_template}) => { })(); }; - const fake_this = $.create("fake-#user-groups_blur_input"); - fake_this.set_parents_result(user_group_selector, $(user_group_selector)); - fake_this.closest = () => []; + const $fake_this = $.create("fake-#user-groups_blur_input"); + $fake_this.set_parents_result(user_group_selector, $(user_group_selector)); + $fake_this.closest = () => []; const event = { - relatedTarget: fake_this, + // FIXME: event.relatedTarget should not be a jQuery object + relatedTarget: $fake_this, }; api_endpoint_called = false; - handler.call(fake_this, event); + handler.call($fake_this, event); assert.ok(api_endpoint_called); })(); }); diff --git a/frontend_tests/node_tests/spoilers.js b/frontend_tests/node_tests/spoilers.js index ac940a6c84..ce2832e895 100644 --- a/frontend_tests/node_tests/spoilers.js +++ b/frontend_tests/node_tests/spoilers.js @@ -11,30 +11,30 @@ const spoilers = zrequire("spoilers"); // This function is taken from rendered_markdown.js and slightly modified. const $array = (array) => { const each = (func) => { - for (const [index, elem] of array.entries()) { - func.call(this, index, elem); + for (const [index, $elem] of array.entries()) { + func.call(this, index, $elem); } }; return {each}; }; const get_spoiler_elem = (title) => { - const block = $.create(`block-${title}`); - const header = $.create(`header-${title}`); - const content = $.create(`content-${title}`); - content.remove = () => {}; - header.text(title); - block.set_find_results(".spoiler-header", header); - block.set_find_results(".spoiler-content", content); - return block; + const $block = $.create(`block-${title}`); + const $header = $.create(`header-${title}`); + const $content = $.create(`content-${title}`); + $content.remove = () => {}; + $header.text(title); + $block.set_find_results(".spoiler-header", $header); + $block.set_find_results(".spoiler-content", $content); + return $block; }; run_test("hide spoilers in notifications", () => { - const root = $.create("root element"); - const spoiler_1 = get_spoiler_elem("this is the title"); - const spoiler_2 = get_spoiler_elem(""); - root.set_find_results(".spoiler-block", $array([spoiler_1, spoiler_2])); - spoilers.hide_spoilers_in_notification(root); - assert.equal(spoiler_1.find(".spoiler-header").text(), "this is the title (…)"); - assert.equal(spoiler_2.find(".spoiler-header").text(), "(…)"); + const $root = $.create("root element"); + const $spoiler_1 = get_spoiler_elem("this is the title"); + const $spoiler_2 = get_spoiler_elem(""); + $root.set_find_results(".spoiler-block", $array([$spoiler_1, $spoiler_2])); + spoilers.hide_spoilers_in_notification($root); + assert.equal($spoiler_1.find(".spoiler-header").text(), "this is the title (…)"); + assert.equal($spoiler_2.find(".spoiler-header").text(), "(…)"); }); diff --git a/frontend_tests/node_tests/stream_events.js b/frontend_tests/node_tests/stream_events.js index fef52a82a4..81a71459e0 100644 --- a/frontend_tests/node_tests/stream_events.js +++ b/frontend_tests/node_tests/stream_events.js @@ -136,32 +136,32 @@ test("update_property", ({override}) => { // Test desktop notifications stream_events.update_property(stream_id, "desktop_notifications", true); assert.equal(sub.desktop_notifications, true); - let checkbox = checkbox_for("desktop_notifications"); - assert.equal(checkbox.prop("checked"), true); + let $checkbox = checkbox_for("desktop_notifications"); + assert.equal($checkbox.prop("checked"), true); // Tests audible notifications stream_events.update_property(stream_id, "audible_notifications", true); assert.equal(sub.audible_notifications, true); - checkbox = checkbox_for("audible_notifications"); - assert.equal(checkbox.prop("checked"), true); + $checkbox = checkbox_for("audible_notifications"); + assert.equal($checkbox.prop("checked"), true); // Tests push notifications stream_events.update_property(stream_id, "push_notifications", true); assert.equal(sub.push_notifications, true); - checkbox = checkbox_for("push_notifications"); - assert.equal(checkbox.prop("checked"), true); + $checkbox = checkbox_for("push_notifications"); + assert.equal($checkbox.prop("checked"), true); // Tests email notifications stream_events.update_property(stream_id, "email_notifications", true); assert.equal(sub.email_notifications, true); - checkbox = checkbox_for("email_notifications"); - assert.equal(checkbox.prop("checked"), true); + $checkbox = checkbox_for("email_notifications"); + assert.equal($checkbox.prop("checked"), true); // Tests wildcard_mentions_notify notifications stream_events.update_property(stream_id, "wildcard_mentions_notify", true); assert.equal(sub.wildcard_mentions_notify, true); - checkbox = checkbox_for("wildcard_mentions_notify"); - assert.equal(checkbox.prop("checked"), true); + $checkbox = checkbox_for("wildcard_mentions_notify"); + assert.equal($checkbox.prop("checked"), true); // Test name change { @@ -195,8 +195,8 @@ test("update_property", ({override}) => { { override(stream_list, "refresh_pinned_or_unpinned_stream", noop); stream_events.update_property(stream_id, "pin_to_top", true); - checkbox = checkbox_for("pin_to_top"); - assert.equal(checkbox.prop("checked"), true); + $checkbox = checkbox_for("pin_to_top"); + assert.equal($checkbox.prop("checked"), true); } // Test stream privacy change event diff --git a/frontend_tests/node_tests/stream_list.js b/frontend_tests/node_tests/stream_list.js index a51f150670..b35b7394f6 100644 --- a/frontend_tests/node_tests/stream_list.js +++ b/frontend_tests/node_tests/stream_list.js @@ -19,7 +19,7 @@ const topic_list = mock_esm("../../static/js/topic_list"); mock_esm("../../static/js/keydown_util", { handle: noop, }); -mock_esm("../../static/js/ui", {get_scroll_element: (element) => element}); +mock_esm("../../static/js/ui", {get_scroll_element: ($element) => $element}); const {Filter} = zrequire("../js/filter"); const stream_sort = zrequire("stream_sort"); @@ -47,13 +47,13 @@ const social = { let num_unread_for_stream; function create_devel_sidebar_row({mock_template}) { - const devel_count = $.create("devel-count"); - const subscription_block = $.create("devel-block"); + const $devel_count = $.create("devel-count"); + const $subscription_block = $.create("devel-block"); - const sidebar_row = $(""); + const $sidebar_row = $(""); - sidebar_row.set_find_results(".subscription_block", subscription_block); - subscription_block.set_find_results(".unread_count", devel_count); + $sidebar_row.set_find_results(".subscription_block", $subscription_block); + $subscription_block.set_find_results(".unread_count", $devel_count); mock_template("stream_sidebar_row.hbs", false, (data) => { assert.equal(data.uri, "#narrow/stream/100-devel"); @@ -62,17 +62,17 @@ function create_devel_sidebar_row({mock_template}) { num_unread_for_stream = 42; stream_list.create_sidebar_row(devel); - assert.equal(devel_count.text(), "42"); + assert.equal($devel_count.text(), "42"); } function create_social_sidebar_row({mock_template}) { - const social_count = $.create("social-count"); - const subscription_block = $.create("social-block"); + const $social_count = $.create("social-count"); + const $subscription_block = $.create("social-block"); - const sidebar_row = $(""); + const $sidebar_row = $(""); - sidebar_row.set_find_results(".subscription_block", subscription_block); - subscription_block.set_find_results(".unread_count", social_count); + $sidebar_row.set_find_results(".subscription_block", $subscription_block); + $subscription_block.set_find_results(".unread_count", $social_count); mock_template("stream_sidebar_row.hbs", false, (data) => { assert.equal(data.uri, "#narrow/stream/200-social"); @@ -81,7 +81,7 @@ function create_social_sidebar_row({mock_template}) { num_unread_for_stream = 99; stream_list.create_sidebar_row(social); - assert.equal(social_count.text(), "99"); + assert.equal($social_count.text(), "99"); } function test_ui(label, f) { @@ -105,8 +105,8 @@ test_ui("create_sidebar_row", ({override_rewire, mock_template}) => { create_social_sidebar_row({mock_template}); const split = '
    '; - const devel_sidebar = $(""); - const social_sidebar = $(""); + const $devel_sidebar = $(""); + const $social_sidebar = $(""); let appended_elems; $("#stream_filters").append = (elems) => { @@ -123,20 +123,20 @@ test_ui("create_sidebar_row", ({override_rewire, mock_template}) => { assert.ok(topic_list_cleared); const expected_elems = [ - devel_sidebar, // pinned + $devel_sidebar, // pinned split, // separator - social_sidebar, // not pinned + $social_sidebar, // not pinned ]; assert.deepEqual(appended_elems, expected_elems); - const social_li = $(""); + const $social_li = $(""); const stream_id = social.stream_id; - social_li.length = 0; + $social_li.length = 0; - const privacy_elem = $.create("privacy-stub"); - social_li.set_find_results(".stream-privacy", privacy_elem); + const $privacy_elem = $.create("privacy-stub"); + $social_li.set_find_results(".stream-privacy", $privacy_elem); social.invite_only = true; social.color = "#222222"; @@ -147,25 +147,25 @@ test_ui("create_sidebar_row", ({override_rewire, mock_template}) => { return "
    privacy-html"; }); stream_list.redraw_stream_privacy(social); - assert.equal(privacy_elem.html(), "
    privacy-html"); + assert.equal($privacy_elem.html(), "
    privacy-html"); stream_list.set_in_home_view(stream_id, false); - assert.ok(social_li.hasClass("out_of_home_view")); + assert.ok($social_li.hasClass("out_of_home_view")); stream_list.set_in_home_view(stream_id, true); - assert.ok(!social_li.hasClass("out_of_home_view")); + assert.ok(!$social_li.hasClass("out_of_home_view")); const row = stream_list.stream_sidebar.get_row(stream_id); override_rewire(stream_data, "is_active", () => true); row.update_whether_active(); - assert.ok(!social_li.hasClass("inactive_stream")); + assert.ok(!$social_li.hasClass("inactive_stream")); override_rewire(stream_data, "is_active", () => false); row.update_whether_active(); - assert.ok(social_li.hasClass("inactive_stream")); + assert.ok($social_li.hasClass("inactive_stream")); let removed; - social_li.remove = () => { + $social_li.remove = () => { removed = true; }; @@ -183,33 +183,33 @@ test_ui("pinned_streams_never_inactive", ({override_rewire, mock_template}) => { create_social_sidebar_row({mock_template}); // non-pinned streams can be made inactive - const social_sidebar = $(""); + const $social_sidebar = $(""); let stream_id = social.stream_id; let row = stream_list.stream_sidebar.get_row(stream_id); override_rewire(stream_data, "is_active", () => false); stream_list.build_stream_list(); - assert.ok(social_sidebar.hasClass("inactive_stream")); + assert.ok($social_sidebar.hasClass("inactive_stream")); override_rewire(stream_data, "is_active", () => true); row.update_whether_active(); - assert.ok(!social_sidebar.hasClass("inactive_stream")); + assert.ok(!$social_sidebar.hasClass("inactive_stream")); override_rewire(stream_data, "is_active", () => false); row.update_whether_active(); - assert.ok(social_sidebar.hasClass("inactive_stream")); + assert.ok($social_sidebar.hasClass("inactive_stream")); // pinned streams can never be made inactive - const devel_sidebar = $(""); + const $devel_sidebar = $(""); stream_id = devel.stream_id; row = stream_list.stream_sidebar.get_row(stream_id); override_rewire(stream_data, "is_active", () => false); stream_list.build_stream_list(); - assert.ok(!devel_sidebar.hasClass("inactive_stream")); + assert.ok(!$devel_sidebar.hasClass("inactive_stream")); row.update_whether_active(); - assert.ok(!devel_sidebar.hasClass("inactive_stream")); + assert.ok(!$devel_sidebar.hasClass("inactive_stream")); }); function add_row(sub) { @@ -218,11 +218,11 @@ function add_row(sub) { update_whether_active() {}, get_li() { const html = "<" + sub.name + " sidebar row html>"; - const obj = $(html); + const $obj = $(html); - obj.length = 1; // bypass blueslip error + $obj.length = 1; // bypass blueslip error - return obj; + return $obj; }, }; stream_list.stream_sidebar.set_row(sub.stream_id, row); @@ -293,30 +293,30 @@ function elem($obj) { } test_ui("zoom_in_and_zoom_out", () => { - const label1 = $.create("label1 stub"); - const label2 = $.create("label2 stub"); + const $label1 = $.create("label1 stub"); + const $label2 = $.create("label2 stub"); - label1.show(); - label2.show(); + $label1.show(); + $label2.show(); - assert.ok(label1.visible()); - assert.ok(label2.visible()); + assert.ok($label1.visible()); + assert.ok($label2.visible()); $.create(".stream-filters-label", { - children: [elem(label1), elem(label2)], + children: [elem($label1), elem($label2)], }); - const splitter = $.create("hr stub"); + const $splitter = $.create("hr stub"); - splitter.show(); - assert.ok(splitter.visible()); + $splitter.show(); + assert.ok($splitter.visible()); $.create(".stream-split", { - children: [elem(splitter)], + children: [elem($splitter)], }); - const stream_li1 = $.create("stream1 stub"); - const stream_li2 = $.create("stream2 stub"); + const $stream_li1 = $.create("stream1 stub"); + const $stream_li2 = $.create("stream2 stub"); function make_attr(arg) { return (sel) => { @@ -325,12 +325,12 @@ test_ui("zoom_in_and_zoom_out", () => { }; } - stream_li1.attr = make_attr("42"); - stream_li1.hide(); - stream_li2.attr = make_attr("99"); + $stream_li1.attr = make_attr("42"); + $stream_li1.hide(); + $stream_li2.attr = make_attr("99"); $.create("#stream_filters li.narrow-filter", { - children: [elem(stream_li1), elem(stream_li2)], + children: [elem($stream_li1), elem($stream_li2)], }); $("#stream-filters-container")[0] = { @@ -340,26 +340,26 @@ test_ui("zoom_in_and_zoom_out", () => { stream_list.zoom_in_topics({stream_id: 42}); - assert.ok(!label1.visible()); - assert.ok(!label2.visible()); - assert.ok(!splitter.visible()); - assert.ok(stream_li1.visible()); - assert.ok(!stream_li2.visible()); + assert.ok(!$label1.visible()); + assert.ok(!$label2.visible()); + assert.ok(!$splitter.visible()); + assert.ok($stream_li1.visible()); + assert.ok(!$stream_li2.visible()); assert.ok($("#streams_list").hasClass("zoom-in")); $("#stream_filters li.narrow-filter").show = () => { - stream_li1.show(); - stream_li2.show(); + $stream_li1.show(); + $stream_li2.show(); }; - stream_li1.length = 1; - stream_list.zoom_out_topics({stream_li: stream_li1}); + $stream_li1.length = 1; + stream_list.zoom_out_topics({$stream_li: $stream_li1}); - assert.ok(label1.visible()); - assert.ok(label2.visible()); - assert.ok(splitter.visible()); - assert.ok(stream_li1.visible()); - assert.ok(stream_li2.visible()); + assert.ok($label1.visible()); + assert.ok($label2.visible()); + assert.ok($splitter.visible()); + assert.ok($stream_li1.visible()); + assert.ok($stream_li2.visible()); assert.ok($("#streams_list").hasClass("zoom-out")); }); @@ -591,8 +591,8 @@ test_ui("rename_stream", ({override_rewire, mock_template}) => { stream_data.rename_sub(sub, new_name); - const li_stub = $.create("li stub"); - li_stub.length = 0; + const $li_stub = $.create("li stub"); + $li_stub.length = 0; mock_template("stream_sidebar_row.hbs", false, (payload) => { assert.deepEqual(payload, { @@ -606,12 +606,12 @@ test_ui("rename_stream", ({override_rewire, mock_template}) => { pin_to_top: true, dark_background: payload.dark_background, }); - return {to_$: () => li_stub}; + return {to_$: () => $li_stub}; }); let count_updated; - override_rewire(stream_list, "update_count_in_dom", (li) => { - assert.equal(li, li_stub); + override_rewire(stream_list, "update_count_in_dom", ($li) => { + assert.equal($li, $li_stub); count_updated = true; }); @@ -638,17 +638,17 @@ test_ui("refresh_pin", ({override_rewire, mock_template}) => { pin_to_top: true, }; - const li_stub = $.create("li stub"); - li_stub.length = 0; + const $li_stub = $.create("li stub"); + $li_stub.length = 0; - mock_template("stream_sidebar_row.hbs", false, () => ({to_$: () => li_stub})); + mock_template("stream_sidebar_row.hbs", false, () => ({to_$: () => $li_stub})); override_rewire(stream_list, "update_count_in_dom", noop); $("#stream_filters").append = noop; let scrolled; - override_rewire(stream_list, "scroll_stream_into_view", (li) => { - assert.equal(li, li_stub); + override_rewire(stream_list, "scroll_stream_into_view", ($li) => { + assert.equal($li, $li_stub); scrolled = true; }); diff --git a/frontend_tests/node_tests/stream_search.js b/frontend_tests/node_tests/stream_search.js index b49e57585b..443f0c4663 100644 --- a/frontend_tests/node_tests/stream_search.js +++ b/frontend_tests/node_tests/stream_search.js @@ -64,32 +64,32 @@ function clear_search_input() { run_test("basics", ({override_rewire}) => { let cursor_helper; - const input = $(".stream-list-filter"); - const section = $(".stream_search_section"); + const $input = $(".stream-list-filter"); + const $section = $(".stream_search_section"); expand_sidebar(); - section.addClass("notdisplayed"); + $section.addClass("notdisplayed"); cursor_helper = make_cursor_helper(); function verify_expanded() { - assert.ok(!section.hasClass("notdisplayed")); + assert.ok(!$section.hasClass("notdisplayed")); simulate_search_expanded(); } function verify_focused() { assert.ok(stream_list.searching()); - assert.ok(input.is_focused()); + assert.ok($input.is_focused()); } function verify_blurred() { assert.ok(stream_list.searching()); - assert.ok(input.is_focused()); + assert.ok($input.is_focused()); } function verify_collapsed() { - assert.ok(section.hasClass("notdisplayed")); - assert.ok(!input.is_focused()); + assert.ok($section.hasClass("notdisplayed")); + assert.ok(!$input.is_focused()); assert.ok(!stream_list.searching()); simulate_search_collapsed(); } @@ -126,7 +126,7 @@ run_test("basics", ({override_rewire}) => { (function add_some_text_and_collapse() { cursor_helper = make_cursor_helper(); - input.val("foo"); + $input.val("foo"); verify_list_updated(() => { toggle_filter(); }); @@ -149,7 +149,7 @@ run_test("basics", ({override_rewire}) => { stream_list.initiate_search(); // Clear a non-empty search. - input.val("foo"); + $input.val("foo"); verify_list_updated(() => { clear_search_input(); }); @@ -160,7 +160,7 @@ run_test("basics", ({override_rewire}) => { stream_list.initiate_search(); // Escape a non-empty search. - input.val("foo"); + $input.val("foo"); stream_list.escape_search(); verify_blurred(); @@ -169,7 +169,7 @@ run_test("basics", ({override_rewire}) => { stream_list.initiate_search(); // Escape an empty search. - input.val(""); + $input.val(""); stream_list.escape_search(); verify_collapsed(); }); diff --git a/frontend_tests/node_tests/stream_settings_ui.js b/frontend_tests/node_tests/stream_settings_ui.js index ff99c0f6a3..07d31fba7c 100644 --- a/frontend_tests/node_tests/stream_settings_ui.js +++ b/frontend_tests/node_tests/stream_settings_ui.js @@ -9,8 +9,8 @@ const $ = require("../zjsunit/zjquery"); const denmark_stream_id = 101; const ui = mock_esm("../../static/js/ui", { - get_content_element: (element) => element, - get_scroll_element: (element) => element, + get_content_element: ($element) => $element, + get_scroll_element: ($element) => $element, }); mock_esm("../../static/js/hash_util", { @@ -103,16 +103,16 @@ run_test("redraw_left_panel", ({mock_template}) => { $.create("#manage_streams_container .stream-row", {children: sub_stubs}); let ui_called = false; - ui.reset_scrollbar = (elem) => { + ui.reset_scrollbar = ($elem) => { ui_called = true; - assert.equal(elem, $("#subscription_overlay .streams-list")); + assert.equal($elem, $("#subscription_overlay .streams-list")); }; // Filtering has the side effect of setting the "active" class // on our current stream, even if it doesn't match the filter. - const denmark_row = $(`.stream-row[data-stream-id='${CSS.escape(denmark_stream_id)}']`); + const $denmark_row = $(`.stream-row[data-stream-id='${CSS.escape(denmark_stream_id)}']`); // sanity check it's not set to active - assert.ok(!denmark_row.hasClass("active")); + assert.ok(!$denmark_row.hasClass("active")); function test_filter(params, expected_streams) { const stream_ids = stream_settings_ui.redraw_left_panel(params); @@ -127,7 +127,7 @@ run_test("redraw_left_panel", ({mock_template}) => { assert.ok(ui_called); // The denmark row is active, even though it's not displayed. - assert.ok(denmark_row.hasClass("active")); + assert.ok($denmark_row.hasClass("active")); // Search with multiple keywords test_filter({input: "Denmark, Pol", subscribed_only: false}, [denmark, poland]); diff --git a/frontend_tests/node_tests/support.js b/frontend_tests/node_tests/support.js index 02f00519b0..7798da6e45 100644 --- a/frontend_tests/node_tests/support.js +++ b/frontend_tests/node_tests/support.js @@ -19,14 +19,14 @@ run_test("scrub_realm", () => { $.get_initialize_function()(); const click_handler = $("body").get_on_handler("click", ".scrub-realm-button"); - const fake_this = $.create("fake-.scrub-realm-button"); - fake_this.data = (name) => { + const $fake_this = $.create("fake-.scrub-realm-button"); + $fake_this.data = (name) => { assert.equal(name, "string-id"); return "zulip"; }; let submit_form_called = false; - fake_this.form = { + $fake_this.form = { submit: () => { submit_form_called = true; }, @@ -36,7 +36,7 @@ run_test("scrub_realm", () => { }; window.prompt = () => "zulip"; - click_handler.call(fake_this, event); + click_handler.call($fake_this, event); assert.ok(submit_form_called); submit_form_called = false; @@ -45,7 +45,7 @@ run_test("scrub_realm", () => { window.alert = () => { alert_called = true; }; - click_handler.call(fake_this, event); + click_handler.call($fake_this, event); assert.ok(!submit_form_called); assert.ok(alert_called); diff --git a/frontend_tests/node_tests/timerender.js b/frontend_tests/node_tests/timerender.js index 141db1129d..6e43ce78f6 100644 --- a/frontend_tests/node_tests/timerender.js +++ b/frontend_tests/node_tests/timerender.js @@ -210,20 +210,20 @@ run_test("render_date_renders_time_html", () => { const expected_html = $t({defaultMessage: "Today"}); const attrs = {}; - const span_stub = $(""); + const $span_stub = $(""); - span_stub.attr = (name, val) => { + $span_stub.attr = (name, val) => { attrs[name] = val; - return span_stub; + return $span_stub; }; - span_stub.append = (str) => { - span_stub.html(str); - return span_stub; + $span_stub.append = (str) => { + $span_stub.html(str); + return $span_stub; }; - const actual = timerender.render_date(message_time, undefined, today); - assert.equal(actual.html(), expected_html); + const $actual = timerender.render_date(message_time, undefined, today); + assert.equal($actual.html(), expected_html); assert.equal(attrs["data-tippy-content"], "Friday, April 12, 2019"); assert.equal(attrs.class, "timerender0"); }); @@ -234,12 +234,12 @@ run_test("render_date_renders_time_above_html", () => { const message_time = today; const message_time_above = add(today, {days: -1}); - const span_stub = $(""); + const $span_stub = $(""); let appended_val; - span_stub.append = (...val) => { + $span_stub.append = (...val) => { appended_val = val; - return span_stub; + return $span_stub; }; const expected = [ diff --git a/frontend_tests/node_tests/top_left_corner.js b/frontend_tests/node_tests/top_left_corner.js index b8efe2472f..0d56bfdeed 100644 --- a/frontend_tests/node_tests/top_left_corner.js +++ b/frontend_tests/node_tests/top_left_corner.js @@ -104,12 +104,12 @@ run_test("narrowing", ({override_rewire}) => { }); run_test("update_count_in_dom", () => { - function make_elem(elem, count_selector) { - const count = $(count_selector); - elem.set_find_results(".unread_count", count); - count.set_parent(elem); + function make_elem($elem, count_selector) { + const $count = $(count_selector); + $elem.set_find_results(".unread_count", $count); + $count.set_parent($elem); - return elem; + return $elem; } const counts = { diff --git a/frontend_tests/node_tests/typing_events.js b/frontend_tests/node_tests/typing_events.js index 08d9ef367f..95ecd488a4 100644 --- a/frontend_tests/node_tests/typing_events.js +++ b/frontend_tests/node_tests/typing_events.js @@ -39,7 +39,7 @@ people.add_active_user(levin); people.add_active_user(kitty); run_test("render_notifications_for_narrow", ({override_rewire, mock_template}) => { - const typing_notifications = $("#typing_notifications"); + const $typing_notifications = $("#typing_notifications"); const two_typing_users_ids = [anna.user_id, vronsky.user_id]; const three_typing_users_ids = [anna.user_id, vronsky.user_id, levin.user_id]; @@ -51,32 +51,32 @@ run_test("render_notifications_for_narrow", ({override_rewire, mock_template}) = // should be rendered but not 'Several people are typing…' override_rewire(typing_events, "get_users_typing_for_narrow", () => two_typing_users_ids); typing_events.render_notifications_for_narrow(); - assert.ok(typing_notifications.visible()); - assert.ok(typing_notifications.html().includes(`${anna.full_name} is typing…`)); - assert.ok(typing_notifications.html().includes(`${vronsky.full_name} is typing…`)); - assert.ok(!typing_notifications.html().includes("Several people are typing…")); + assert.ok($typing_notifications.visible()); + assert.ok($typing_notifications.html().includes(`${anna.full_name} is typing…`)); + assert.ok($typing_notifications.html().includes(`${vronsky.full_name} is typing…`)); + assert.ok(!$typing_notifications.html().includes("Several people are typing…")); // Having 3(=MAX_USERS_TO_DISPLAY_NAME) typists should also display only names override_rewire(typing_events, "get_users_typing_for_narrow", () => three_typing_users_ids); typing_events.render_notifications_for_narrow(); - assert.ok(typing_notifications.visible()); - assert.ok(typing_notifications.html().includes(`${anna.full_name} is typing…`)); - assert.ok(typing_notifications.html().includes(`${vronsky.full_name} is typing…`)); - assert.ok(typing_notifications.html().includes(`${levin.full_name} is typing…`)); - assert.ok(!typing_notifications.html().includes("Several people are typing…")); + assert.ok($typing_notifications.visible()); + assert.ok($typing_notifications.html().includes(`${anna.full_name} is typing…`)); + assert.ok($typing_notifications.html().includes(`${vronsky.full_name} is typing…`)); + assert.ok($typing_notifications.html().includes(`${levin.full_name} is typing…`)); + assert.ok(!$typing_notifications.html().includes("Several people are typing…")); // Having 4(>MAX_USERS_TO_DISPLAY_NAME) typists should display "Several people are typing…" override_rewire(typing_events, "get_users_typing_for_narrow", () => four_typing_users_ids); typing_events.render_notifications_for_narrow(); - assert.ok(typing_notifications.visible()); - assert.ok(typing_notifications.html().includes("Several people are typing…")); - assert.ok(!typing_notifications.html().includes(`${anna.full_name} is typing…`)); - assert.ok(!typing_notifications.html().includes(`${vronsky.full_name} is typing…`)); - assert.ok(!typing_notifications.html().includes(`${levin.full_name} is typing…`)); - assert.ok(!typing_notifications.html().includes(`${kitty.full_name} is typing…`)); + assert.ok($typing_notifications.visible()); + assert.ok($typing_notifications.html().includes("Several people are typing…")); + assert.ok(!$typing_notifications.html().includes(`${anna.full_name} is typing…`)); + assert.ok(!$typing_notifications.html().includes(`${vronsky.full_name} is typing…`)); + assert.ok(!$typing_notifications.html().includes(`${levin.full_name} is typing…`)); + assert.ok(!$typing_notifications.html().includes(`${kitty.full_name} is typing…`)); // #typing_notifications should be hidden when there are no typists. override_rewire(typing_events, "get_users_typing_for_narrow", () => []); typing_events.render_notifications_for_narrow(); - assert.ok(!typing_notifications.visible()); + assert.ok(!$typing_notifications.visible()); }); diff --git a/frontend_tests/node_tests/upload.js b/frontend_tests/node_tests/upload.js index a409b29cf5..aadf251485 100644 --- a/frontend_tests/node_tests/upload.js +++ b/frontend_tests/node_tests/upload.js @@ -36,14 +36,14 @@ function test(label, f) { } test("feature_check", ({override}) => { - const upload_button = $.create("upload-button-stub"); - upload_button.addClass("notdisplayed"); - upload.feature_check(upload_button); - assert.ok(upload_button.hasClass("notdisplayed")); + const $upload_button = $.create("upload-button-stub"); + $upload_button.addClass("notdisplayed"); + upload.feature_check($upload_button); + assert.ok($upload_button.hasClass("notdisplayed")); override(window, "XMLHttpRequest", () => ({upload: true})); - upload.feature_check(upload_button); - assert.ok(!upload_button.hasClass("notdisplayed")); + upload.feature_check($upload_button); + assert.ok(!$upload_button.hasClass("notdisplayed")); }); test("get_item", () => { diff --git a/frontend_tests/node_tests/user_search.js b/frontend_tests/node_tests/user_search.js index 8bfb5575ba..015efd103b 100644 --- a/frontend_tests/node_tests/user_search.js +++ b/frontend_tests/node_tests/user_search.js @@ -194,7 +194,7 @@ test("filter_user_ids", ({override}) => { }); test("click on user header to toggle display", ({override}) => { - const user_filter = $(".user-list-filter"); + const $user_filter = $(".user-list-filter"); override(popovers, "hide_all", () => {}); override(popovers, "hide_all_except_sidebars", () => {}); @@ -205,11 +205,11 @@ test("click on user header to toggle display", ({override}) => { assert.ok(!$("#user_search_section").hasClass("notdisplayed")); - user_filter.val("bla"); + $user_filter.val("bla"); $("#userlist-header").trigger("click"); assert.ok($("#user_search_section").hasClass("notdisplayed")); - assert.equal(user_filter.val(), ""); + assert.equal($user_filter.val(), ""); $(".user-list-filter").closest = (selector) => { assert.equal(selector, ".app-main [class^='column-']"); diff --git a/frontend_tests/node_tests/widgetize.js b/frontend_tests/node_tests/widgetize.js index b51d23826e..8d7efe6ba9 100644 --- a/frontend_tests/node_tests/widgetize.js +++ b/frontend_tests/node_tests/widgetize.js @@ -35,16 +35,16 @@ const sample_events = [ ]; let events; -let widget_elem; +let $widget_elem; let is_event_handled; let is_widget_activated; const fake_poll_widget = { activate(data) { is_widget_activated = true; - widget_elem = data.elem; - assert.ok(widget_elem.hasClass("widget-content")); - widget_elem.handle_events = (e) => { + $widget_elem = data.$elem; + assert.ok($widget_elem.hasClass("widget-content")); + $widget_elem.handle_events = (e) => { is_event_handled = true; assert.notDeepStrictEqual(e, events); events.shift(); @@ -65,7 +65,7 @@ const widgetize = zrequire("widgetize"); function test(label, f) { run_test(label, ({override}) => { events = [...sample_events]; - widget_elem = undefined; + $widget_elem = undefined; is_event_handled = false; is_widget_activated = false; widgetize.clear_for_testing(); @@ -76,10 +76,10 @@ function test(label, f) { test("activate", ({override}) => { // Both widgetize.activate and widgetize.handle_event are tested // here to use the "caching" of widgets - const row = $.create(""); - row.attr("id", "zhome2909"); - const message_content = $.create("#zhome2909"); - row.set_find_results(".message_content", message_content); + const $row = $.create(""); + $row.attr("id", "zhome2909"); + const $message_content = $.create("#zhome2909"); + $row.set_find_results(".message_content", $message_content); let narrow_active; override(narrow_state, "active", () => narrow_active); @@ -94,16 +94,16 @@ test("activate", ({override}) => { assert.equal(data.msg_type, "widget"); assert.equal(data.data, "test_data"); }, - row, + $row, widget_type: "poll", }; let is_widget_elem_inserted; - message_content.append = (elem) => { + $message_content.append = ($elem) => { is_widget_elem_inserted = true; - assert.equal(elem, widget_elem); - assert.ok(elem.hasClass("widget-content")); + assert.equal($elem, $widget_elem); + assert.ok($elem.hasClass("widget-content")); }; is_widget_elem_inserted = false; @@ -111,19 +111,19 @@ test("activate", ({override}) => { is_event_handled = false; assert.ok(!widgetize.widget_contents.has(opts.message.id)); - message_content.set_find_results(".widget-content", false); + $message_content.set_find_results(".widget-content", false); widgetize.activate(opts); assert.ok(is_widget_elem_inserted); assert.ok(is_widget_activated); assert.ok(is_event_handled); - assert.equal(widgetize.widget_contents.get(opts.message.id), widget_elem); + assert.equal(widgetize.widget_contents.get(opts.message.id), $widget_elem); is_widget_elem_inserted = false; is_widget_activated = false; is_event_handled = false; - message_content.set_find_results(".widget-content", false); + $message_content.set_find_results(".widget-content", false); widgetize.activate(opts); assert.ok(is_widget_elem_inserted); @@ -135,7 +135,7 @@ test("activate", ({override}) => { is_widget_activated = false; is_event_handled = false; - message_content.set_find_results(".widget-content", false); + $message_content.set_find_results(".widget-content", false); widgetize.activate(opts); assert.ok(!is_widget_elem_inserted); @@ -171,7 +171,7 @@ test("activate", ({override}) => { message_id: 2001, sender_id: 102, }; - widget_elem.handle_events = (e) => { + $widget_elem.handle_events = (e) => { is_event_handled = true; assert.deepEqual(e, [post_activate_event]); }; @@ -191,7 +191,7 @@ test("activate", ({override}) => { }); override(message_lists.current, "get_row", (idx) => { assert.equal(idx, 2001); - return row; + return $row; }); widgetize.set_widgets_for_list(); }); diff --git a/frontend_tests/node_tests/zjquery.js b/frontend_tests/node_tests/zjquery.js index f0a0f1cdfc..51fdcdd78c 100644 --- a/frontend_tests/node_tests/zjquery.js +++ b/frontend_tests/node_tests/zjquery.js @@ -45,28 +45,28 @@ run_test("basics", () => { // Next, look at how several functions correctly simulate setting // and getting for you. - const widget = $("#my-widget"); + const $widget = $("#my-widget"); - widget.attr("data-employee-id", 42); - assert.equal(widget.attr("data-employee-id"), 42); - assert.equal(widget.data("employee-id"), 42); + $widget.attr("data-employee-id", 42); + assert.equal($widget.attr("data-employee-id"), 42); + assert.equal($widget.data("employee-id"), 42); - widget.data("department-id", 77); - assert.equal(widget.attr("data-department-id"), 77); - assert.equal(widget.data("department-id"), 77); + $widget.data("department-id", 77); + assert.equal($widget.attr("data-department-id"), 77); + assert.equal($widget.data("department-id"), 77); - widget.data("department-name", "hr"); - assert.equal(widget.attr("data-department-name"), "hr"); - assert.equal(widget.data("department-name"), "hr"); + $widget.data("department-name", "hr"); + assert.equal($widget.attr("data-department-name"), "hr"); + assert.equal($widget.data("department-name"), "hr"); - widget.html("hello"); - assert.equal(widget.html(), "hello"); + $widget.html("hello"); + assert.equal($widget.html(), "hello"); - widget.prop("title", "My widget"); - assert.equal(widget.prop("title"), "My widget"); + $widget.prop("title", "My widget"); + assert.equal($widget.prop("title"), "My widget"); - widget.val("42"); - assert.equal(widget.val(), "42"); + $widget.val("42"); + assert.equal($widget.val(), "42"); }); run_test("finding_related_objects", () => { @@ -84,17 +84,17 @@ run_test("finding_related_objects", () => { // But you can set up your tests to simulate DOM relationships. // // We will use set_find_results(), which is a special zjquery helper. - const emoji = $('
    '); - $("#my-message").set_find_results(".emoji", emoji); + const $emoji = $('
    '); + $("#my-message").set_find_results(".emoji", $emoji); // And then calling the function produces the desired effect: update_message_emoji("foo.png"); - assert.equal(emoji.attr("src"), "foo.png"); + assert.equal($emoji.attr("src"), "foo.png"); // Sometimes you want to deliberately test paths that do not find an // element. You can pass 'false' as the result for those cases. - emoji.set_find_results(".random", false); - assert.equal(emoji.find(".random").length, 0); + $emoji.set_find_results(".random", false); + assert.equal($emoji.find(".random").length, 0); /* An important thing to understand is that zjquery doesn't truly simulate DOM. The way you make relationships work in zjquery @@ -103,12 +103,12 @@ run_test("finding_related_objects", () => { Here is another example. */ - const my_parents = $("#folder1,#folder4"); - const elem = $("#folder555"); + const $my_parents = $("#folder1,#folder4"); + const $elem = $("#folder555"); - elem.set_parents_result(".folder", my_parents); - elem.parents(".folder").addClass("active"); - assert.ok(my_parents.hasClass("active")); + $elem.set_parents_result(".folder", $my_parents); + $elem.parents(".folder").addClass("active"); + assert.ok($my_parents.hasClass("active")); }); run_test("clicks", () => { @@ -188,12 +188,12 @@ run_test("create", () => { // You can create jQuery objects that aren't tied to any particular // selector, and which just have a name. - const obj1 = $.create("the table holding employees"); - const obj2 = $.create("the collection of rows in the table"); + const $obj1 = $.create("the table holding employees"); + const $obj2 = $.create("the collection of rows in the table"); - obj1.show(); - assert.ok(obj1.visible()); + $obj1.show(); + assert.ok($obj1.visible()); - obj2.addClass(".striped"); - assert.ok(obj2.hasClass(".striped")); + $obj2.addClass(".striped"); + assert.ok($obj2.hasClass(".striped")); }); diff --git a/frontend_tests/puppeteer_lib/common.ts b/frontend_tests/puppeteer_lib/common.ts index 7e350f839f..8aad19f31d 100644 --- a/frontend_tests/puppeteer_lib/common.ts +++ b/frontend_tests/puppeteer_lib/common.ts @@ -331,8 +331,8 @@ class CommonUtils { return false; } - const row = zulip_test.last_visible_row(); - if (zulip_test.row_id(row) !== last_msg.id) { + const $row = zulip_test.last_visible_row(); + if (zulip_test.row_id($row) !== last_msg.id) { return false; } @@ -343,7 +343,7 @@ class CommonUtils { don't add the star icon until the server responds. */ - return row.find(".star").length === 1; + return $row.find(".star").length === 1; }, {}, content, diff --git a/frontend_tests/puppeteer_tests/copy-and-paste.ts b/frontend_tests/puppeteer_tests/copy-and-paste.ts index 6c53ba54c7..66f848ae39 100644 --- a/frontend_tests/puppeteer_tests/copy-and-paste.ts +++ b/frontend_tests/puppeteer_tests/copy-and-paste.ts @@ -31,8 +31,8 @@ async function copy_messages( $("body").trigger(new $.Event("keydown", {which: 67, ctrlKey: true})); // find temp div with copied text - const temp_div = $("#copytempdiv"); - return temp_div + const $temp_div = $("#copytempdiv"); + return $temp_div .children("p") .get() .map((p) => p.textContent!); diff --git a/frontend_tests/puppeteer_tests/delete-message.ts b/frontend_tests/puppeteer_tests/delete-message.ts index 87a269f045..4f7c3a87ab 100644 --- a/frontend_tests/puppeteer_tests/delete-message.ts +++ b/frontend_tests/puppeteer_tests/delete-message.ts @@ -4,10 +4,10 @@ import common from "../puppeteer_lib/common"; async function click_delete_and_return_last_msg_id(page: Page): Promise { return await page.evaluate(() => { - const msg = $("#zhome .message_row").last(); - msg.find(".message_control_button.actions_hover").trigger("click"); + const $msg = $("#zhome .message_row").last(); + $msg.find(".message_control_button.actions_hover").trigger("click"); $(".delete_message").trigger("click"); - return msg.attr("id"); + return $msg.attr("id"); }); } diff --git a/frontend_tests/puppeteer_tests/edit.ts b/frontend_tests/puppeteer_tests/edit.ts index 3d31ae9763..f224929b6e 100644 --- a/frontend_tests/puppeteer_tests/edit.ts +++ b/frontend_tests/puppeteer_tests/edit.ts @@ -4,8 +4,8 @@ import common from "../puppeteer_lib/common"; async function trigger_edit_last_message(page: Page): Promise { await page.evaluate(() => { - const msg = $("#zhome .message_row").last(); - msg.find(".message_control_button.actions_hover").trigger("click"); + const $msg = $("#zhome .message_row").last(); + $msg.find(".message_control_button.actions_hover").trigger("click"); $(".popover_edit_message").trigger("click"); }); await page.waitForSelector(".message_edit_content", {visible: true}); diff --git a/frontend_tests/puppeteer_tests/stars.ts b/frontend_tests/puppeteer_tests/stars.ts index 8fe5b3c866..ce30ec2fc0 100644 --- a/frontend_tests/puppeteer_tests/stars.ts +++ b/frontend_tests/puppeteer_tests/stars.ts @@ -12,17 +12,17 @@ async function stars_count(page: Page): Promise { async function toggle_test_star_message(page: Page): Promise { await page.evaluate((message: string) => { - const msg = $(`.message_content:contains("${CSS.escape(message)}"):visible`).last(); - if (msg.length !== 1) { + const $msg = $(`.message_content:contains("${CSS.escape(message)}"):visible`).last(); + if ($msg.length !== 1) { throw new Error("cannot find test star message"); } - const star_icon = msg.closest(".messagebox").find(".star"); - if (star_icon.length !== 1) { + const $star_icon = $msg.closest(".messagebox").find(".star"); + if ($star_icon.length !== 1) { throw new Error("cannot find star icon"); } - star_icon.trigger("click"); + $star_icon.trigger("click"); }, message); } diff --git a/frontend_tests/zjsunit/namespace.js b/frontend_tests/zjsunit/namespace.js index 2d03d19cdf..698879188a 100644 --- a/frontend_tests/zjsunit/namespace.js +++ b/frontend_tests/zjsunit/namespace.js @@ -188,7 +188,7 @@ exports.mock_cjs = (module_path, obj) => { }; exports.mock_jquery = ($) => { - jquery_function = $; + jquery_function = $; // eslint-disable-line no-jquery/variable-pattern return $; }; diff --git a/frontend_tests/zjsunit/zjquery.js b/frontend_tests/zjsunit/zjquery.js index 577c5a9daa..52c0f4ea78 100644 --- a/frontend_tests/zjsunit/zjquery.js +++ b/frontend_tests/zjsunit/zjquery.js @@ -43,8 +43,8 @@ function make_zjquery() { const fn = {}; function new_elem(selector, create_opts) { - const elem = FakeElement(selector, {...create_opts}); - Object.assign(elem, fn); + const $elem = FakeElement(selector, {...create_opts}); + Object.assign($elem, fn); // Create a proxy handler to detect missing stubs. // @@ -76,7 +76,7 @@ function make_zjquery() { }, }; - const proxy = new Proxy(elem, handler); + const proxy = new Proxy($elem, handler); return proxy; } @@ -130,8 +130,8 @@ function make_zjquery() { verify_selector_for_zulip(selector); if (!elems.has(selector)) { - const elem = new_elem(selector); - elems.set(selector, elem); + const $elem = new_elem(selector); + elems.set(selector, $elem); } return elems.get(selector); }; @@ -146,10 +146,10 @@ function make_zjquery() { zjquery.create = function (name, opts) { assert.ok(!elems.has(name), "You already created an object with this name!!"); - const elem = new_elem(name, opts); - elems.set(name, elem); + const $elem = new_elem(name, opts); + elems.set(name, $elem); - return elem; + return $elem; }; zjquery.trim = function (s) { @@ -250,4 +250,4 @@ const $ = new Proxy(make_zjquery(), { }, }); -module.exports = $; +module.exports = $; // eslint-disable-line no-jquery/variable-pattern diff --git a/frontend_tests/zjsunit/zjquery_element.js b/frontend_tests/zjsunit/zjquery_element.js index 89e90bec58..2ea968e517 100644 --- a/frontend_tests/zjsunit/zjquery_element.js +++ b/frontend_tests/zjsunit/zjquery_element.js @@ -15,38 +15,38 @@ function FakeElement(selector, opts) { let height; const find_results = new Map(); - let my_parent; + let $my_parent; const parents_result = new Map(); const properties = new Map(); const attrs = new Map(); const classes = new Map(); const event_store = make_event_store(selector); - const self = { + const $self = { addClass(class_name) { classes.set(class_name, true); - return self; + return $self; }, append(arg) { html = html + arg; - return self; + return $self; }, attr(name, val) { if (val === undefined) { return attrs.get(name); } attrs.set(name, val); - return self; + return $self; }, data(name, val) { if (val === undefined) { return attrs.get("data-" + name); } attrs.set("data-" + name, val); - return self; + return $self; }, delay() { - return self; + return $self; }, debug() { return { @@ -59,22 +59,22 @@ function FakeElement(selector, opts) { if (arg === undefined) { find_results.clear(); } - return self; + return $self; }, eq() { - return self; + return $self; }, expectOne() { // silently do nothing - return self; + return $self; }, fadeTo: noop, find(child_selector) { - const child = find_results.get(child_selector); - if (child) { - return child; + const $child = find_results.get(child_selector); + if ($child) { + return $child; } - if (child === false) { + if ($child === false) { // This is deliberately set to simulate missing find results. // Return an empty array, the most common check is // if ($.find().length) { //success } @@ -84,12 +84,12 @@ function FakeElement(selector, opts) { We need you to simulate the results of $(...).find(...) by using set_find_results. You want something like this: - const container = ...; - const child = ...; - container.set_find_results("${child_selector}", child); + const $container = ...; + const $child = ...; + $container.set_find_results("${child_selector}", $child); - Then calling container.find("${child_selector}") will return - the "child" zjquery element. + Then calling $container.find("${child_selector}") will return + the "$child" zjquery element. `); }, @@ -107,12 +107,12 @@ function FakeElement(selector, opts) { }, hide() { shown = false; - return self; + return $self; }, html(arg) { if (arg !== undefined) { html = arg; - return self; + return $self; } return html; }, @@ -121,9 +121,9 @@ function FakeElement(selector, opts) { return shown; } if (arg === ":focus") { - return self.is_focused(); + return $self.is_focused(); } - return self; + return $self; }, is_focused() { // is_focused is not a jQuery thing; this is @@ -132,7 +132,7 @@ function FakeElement(selector, opts) { }, off(...args) { event_store.off(...args); - return self; + return $self; }, offset() { return { @@ -142,44 +142,44 @@ function FakeElement(selector, opts) { }, on(...args) { event_store.on(...args); - return self; + return $self; }, one(...args) { event_store.one(...args); - return self; + return $self; }, parent() { - return my_parent; + return $my_parent; }, parents(parents_selector) { - const result = parents_result.get(parents_selector); + const $result = parents_result.get(parents_selector); assert.ok( - result, + $result, "You need to call set_parents_result for " + parents_selector + " in " + selector, ); - return result; + return $result; }, prepend(arg) { html = arg + html; - return self; + return $self; }, prop(name, val) { if (val === undefined) { return properties.get(name); } properties.set(name, val); - return self; + return $self; }, removeAttr(name) { attrs.delete(name); - return self; + return $self; }, removeClass(class_names) { class_names = class_names.split(" "); for (const class_name of class_names) { classes.delete(class_name); } - return self; + return $self; }, remove() { throw new Error(` @@ -193,68 +193,68 @@ function FakeElement(selector, opts) { }, removeData: noop, replaceWith() { - return self; + return $self; }, scrollTop() { - return self; + return $self; }, serializeArray() { - return self; + return $self; }, - set_find_results(find_selector, jquery_object) { - if (jquery_object === undefined) { + set_find_results(find_selector, $jquery_object) { + if ($jquery_object === undefined) { throw new Error( "Please make the 'find result' be something like $.create('unused')", ); } - find_results.set(find_selector, jquery_object); + find_results.set(find_selector, $jquery_object); }, set_height(fake_height) { height = fake_height; }, - set_parent(parent_elem) { - my_parent = parent_elem; + set_parent($parent_elem) { + $my_parent = $parent_elem; }, - set_parents_result(selector, result) { - parents_result.set(selector, result); + set_parents_result(selector, $result) { + parents_result.set(selector, $result); }, show() { shown = true; - return self; + return $self; }, slice() { - return self; + return $self; }, stop() { - return self; + return $self; }, text(...args) { if (args.length !== 0) { if (args[0] !== undefined) { text = args[0].toString(); } - return self; + return $self; } return text; }, toggle(show) { assert.ok([true, false].includes(show)); shown = show; - return self; + return $self; }, tooltip() { - return self; + return $self; }, trigger(ev) { - event_store.trigger(self, ev); - return self; + event_store.trigger($self, ev); + return $self; }, val(...args) { if (args.length === 0) { return value || ""; } [value] = args; - return self; + return $self; }, visible() { return shown; @@ -262,34 +262,34 @@ function FakeElement(selector, opts) { }; if (opts.children) { - self.map = (f) => opts.children.map((i, elem) => f(elem, i)); - self.each = (f) => { + $self.map = (f) => opts.children.map((i, elem) => f(elem, i)); + $self.each = (f) => { for (const child of opts.children) { f.call(child); } }; - self[Symbol.iterator] = function* () { + $self[Symbol.iterator] = function* () { for (const child of opts.children) { yield child; } }; for (const [i, child] of opts.children.entries()) { - self[i] = child; + $self[i] = child; } - self.length = opts.children.length; + $self.length = opts.children.length; } if (selector[0] === "<") { - self.html(selector); + $self.html(selector); } - self.selector = selector; + $self.selector = selector; - self.__zjquery = true; + $self.__zjquery = true; - return self; + return $self; } function make_event_store(selector) { @@ -394,7 +394,8 @@ function make_event_store(selector) { ev = new FakeEvent(ev); } if (!ev.target) { - ev.target = $element; + // FIXME: event.target should not be a jQuery object + ev.target = $element; // eslint-disable-line no-jquery/variable-pattern } const func = on_functions.get(ev.type); diff --git a/static/js/about_zulip.js b/static/js/about_zulip.js index 89c8e4660d..3d72a39650 100644 --- a/static/js/about_zulip.js +++ b/static/js/about_zulip.js @@ -10,7 +10,7 @@ import {page_params} from "./page_params"; export function launch() { overlays.open_overlay({ name: "about-zulip", - overlay: $("#about-zulip"), + $overlay: $("#about-zulip"), on_close() { browser_history.exit_overlay(); }, diff --git a/static/js/activity.js b/static/js/activity.js index 7ca6a98f71..f20e60f012 100644 --- a/static/js/activity.js +++ b/static/js/activity.js @@ -59,8 +59,8 @@ function get_pm_list_item(user_id) { } function set_pm_count(user_ids_string, count) { - const pm_li = get_pm_list_item(user_ids_string); - ui_util.update_unread_count_in_dom(pm_li, count); + const $pm_li = get_pm_list_item(user_ids_string); + ui_util.update_unread_count_in_dom($pm_li, count); } export function update_dom_with_unread_counts(counts) { @@ -285,7 +285,7 @@ export function reset_users() { } export function narrow_for_user(opts) { - const user_id = buddy_list.get_key_from_li({li: opts.li}); + const user_id = buddy_list.get_key_from_li({$li: opts.$li}); return narrow_for_user_id({user_id}); } @@ -324,7 +324,7 @@ export function set_cursor_and_filter() { $input.on("blur", () => user_cursor.clear()); keydown_util.handle({ - elem: $input, + $elem: $input, handlers: { Enter() { keydown_enter_key(); diff --git a/static/js/add_subscribers_pill.js b/static/js/add_subscribers_pill.js index f4e4beeed9..36d4a8f7aa 100644 --- a/static/js/add_subscribers_pill.js +++ b/static/js/add_subscribers_pill.js @@ -34,19 +34,19 @@ function get_text_from_item(item) { return undefined; } -function set_up_pill_typeahead({pill_widget, pill_container, get_users}) { +function set_up_pill_typeahead({pill_widget, $pill_container, get_users}) { const opts = { user_source: get_users, stream: true, user_group: true, user: true, }; - pill_typeahead.set_up(pill_container.find(".input"), pill_widget, opts); + pill_typeahead.set_up($pill_container.find(".input"), pill_widget, opts); } -export function create({pill_container, get_potential_subscribers}) { +export function create({$pill_container, get_potential_subscribers}) { const pill_widget = input_pill.create({ - container: pill_container, + $container: $pill_container, create_item_from_text, get_text_from_item, }); @@ -56,7 +56,7 @@ export function create({pill_container, get_potential_subscribers}) { return user_pill.filter_taken_users(potential_subscribers, pill_widget); } - set_up_pill_typeahead({pill_widget, pill_container, get_users}); + set_up_pill_typeahead({pill_widget, $pill_container, get_users}); return pill_widget; } @@ -70,7 +70,7 @@ function get_pill_user_ids(pill_widget) { export function set_up_handlers({ get_pill_widget, - parent_container, + $parent_container, pill_selector, button_selector, action, @@ -108,14 +108,14 @@ export function set_up_handlers({ action({pill_user_ids}); } - parent_container.on("keyup", pill_selector, (e) => { + $parent_container.on("keyup", pill_selector, (e) => { if (e.key === "Enter") { e.preventDefault(); callback(); } }); - parent_container.on("click", button_selector, (e) => { + $parent_container.on("click", button_selector, (e) => { e.preventDefault(); callback(); }); diff --git a/static/js/alert_words_ui.js b/static/js/alert_words_ui.js index 8083d4f01b..ba9f85aff4 100644 --- a/static/js/alert_words_ui.js +++ b/static/js/alert_words_ui.js @@ -16,15 +16,15 @@ export function rerender_alert_words_ui() { const words = alert_words.get_word_list(); words.sort(); - const word_list = $("#alert-words-table"); + const $word_list = $("#alert-words-table"); - ListWidget.create(word_list, words, { + ListWidget.create($word_list, words, { name: "alert-words-list", modifier(alert_word) { return render_alert_word_settings_item({alert_word}); }, - parent_container: $("#alert-word-settings"), - simplebar_container: $("#alert-word-settings .progressive-table-wrapper"), + $parent_container: $("#alert-word-settings"), + $simplebar_container: $("#alert-word-settings .progressive-table-wrapper"), }); // Focus new alert word name text box. @@ -32,14 +32,14 @@ export function rerender_alert_words_ui() { } function update_alert_word_status(status_text, is_error) { - const alert_word_status = $("#alert_word_status"); + const $alert_word_status = $("#alert_word_status"); if (is_error) { - alert_word_status.removeClass("alert-success").addClass("alert-danger"); + $alert_word_status.removeClass("alert-success").addClass("alert-danger"); } else { - alert_word_status.removeClass("alert-danger").addClass("alert-success"); + $alert_word_status.removeClass("alert-danger").addClass("alert-success"); } - alert_word_status.find(".alert_word_status_text").text(status_text); - alert_word_status.show(); + $alert_word_status.find(".alert_word_status_text").text(status_text); + $alert_word_status.show(); } function add_alert_word(alert_word) { @@ -114,8 +114,8 @@ export function set_up_alert_words() { $("#alert-word-settings").on("click", ".close-alert-word-status", (event) => { event.preventDefault(); - const alert = $(event.currentTarget).parents(".alert"); - alert.hide(); + const $alert = $(event.currentTarget).parents(".alert"); + $alert.hide(); }); } diff --git a/static/js/attachments_ui.js b/static/js/attachments_ui.js index a627580c86..6c0c6df714 100644 --- a/static/js/attachments_ui.js +++ b/static/js/attachments_ui.js @@ -50,15 +50,15 @@ function set_upload_space_stats() { } function delete_attachments(attachment) { - const status = $("#delete-upload-status"); + const $status = $("#delete-upload-status"); channel.del({ url: "/json/attachments/" + attachment, idempotent: true, error(xhr) { - ui_report.error($t_html({defaultMessage: "Failed"}), xhr, status); + ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $status); }, success() { - ui_report.success($t_html({defaultMessage: "Attachment deleted"}), status); + ui_report.success($t_html({defaultMessage: "Attachment deleted"}), $status); }, }); } @@ -86,32 +86,32 @@ function sort_mentioned_in(a, b) { function render_attachments_ui() { set_upload_space_stats(); - const uploaded_files_table = $("#uploaded_files_table").expectOne(); + const $uploaded_files_table = $("#uploaded_files_table").expectOne(); const $search_input = $("#upload_file_search"); - ListWidget.create(uploaded_files_table, attachments, { + ListWidget.create($uploaded_files_table, attachments, { name: "uploaded-files-list", modifier(attachment) { return render_uploaded_files_list({attachment}); }, filter: { - element: $search_input, + $element: $search_input, predicate(item, value) { return item.name.toLocaleLowerCase().includes(value); }, onupdate() { - ui.reset_scrollbar(uploaded_files_table.closest(".progressive-table-wrapper")); + ui.reset_scrollbar($uploaded_files_table.closest(".progressive-table-wrapper")); }, }, - parent_container: $("#attachments-settings").expectOne(), + $parent_container: $("#attachments-settings").expectOne(), init_sort: ["numeric", "create_time"], sort_fields: { mentioned_in: sort_mentioned_in, }, - simplebar_container: $("#attachments-settings .progressive-table-wrapper"), + $simplebar_container: $("#attachments-settings .progressive-table-wrapper"), }); - ui.reset_scrollbar(uploaded_files_table.closest(".progressive-table-wrapper")); + ui.reset_scrollbar($uploaded_files_table.closest(".progressive-table-wrapper")); } function format_attachment_data(new_attachments) { @@ -143,7 +143,7 @@ export function update_attachments(event) { export function set_up_attachments() { // The settings page must be rendered before this function gets called. - const status = $("#delete-upload-status"); + const $status = $("#delete-upload-status"); loading.make_indicator($("#attachments_loading_indicator"), {text: "Loading..."}); $("#uploaded_files_table").on("click", ".remove-attachment", (e) => { @@ -162,7 +162,7 @@ export function set_up_attachments() { }, error(xhr) { loading.destroy_indicator($("#attachments_loading_indicator")); - ui_report.error($t_html({defaultMessage: "Failed"}), xhr, status); + ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $status); }, }); } diff --git a/static/js/avatar.js b/static/js/avatar.js index 441cde8143..1e997ffe87 100644 --- a/static/js/avatar.js +++ b/static/js/avatar.js @@ -17,36 +17,36 @@ export function build_bot_create_widget() { return $("#bot_avatar_file_input"); }; - const file_name_field = $("#bot_avatar_file"); - const input_error = $("#bot_avatar_file_input_error"); - const clear_button = $("#bot_avatar_clear_button"); - const upload_button = $("#bot_avatar_upload_button"); + const $file_name_field = $("#bot_avatar_file"); + const $input_error = $("#bot_avatar_file_input_error"); + const $clear_button = $("#bot_avatar_clear_button"); + const $upload_button = $("#bot_avatar_upload_button"); return upload_widget.build_widget( get_file_input, - file_name_field, - input_error, - clear_button, - upload_button, + $file_name_field, + $input_error, + $clear_button, + $upload_button, ); } -export function build_bot_edit_widget(target) { +export function build_bot_edit_widget($target) { const get_file_input = function () { - return target.find(".edit_bot_avatar_file_input"); + return $target.find(".edit_bot_avatar_file_input"); }; - const file_name_field = target.find(".edit_bot_avatar_file"); - const input_error = target.find(".edit_bot_avatar_error"); - const clear_button = target.find(".edit_bot_avatar_clear_button"); - const upload_button = target.find(".edit_bot_avatar_upload_button"); + const $file_name_field = $target.find(".edit_bot_avatar_file"); + const $input_error = $target.find(".edit_bot_avatar_error"); + const $clear_button = $target.find(".edit_bot_avatar_clear_button"); + const $upload_button = $target.find(".edit_bot_avatar_upload_button"); return upload_widget.build_widget( get_file_input, - file_name_field, - input_error, - clear_button, - upload_button, + $file_name_field, + $input_error, + $clear_button, + $upload_button, ); } diff --git a/static/js/billing/helpers.js b/static/js/billing/helpers.js index c9314fa72a..6287a9b96a 100644 --- a/static/js/billing/helpers.js +++ b/static/js/billing/helpers.js @@ -10,7 +10,7 @@ export function create_ajax_request( type = "POST", success_callback, ) { - const form = $(`#${CSS.escape(form_name)}-form`); + const $form = $(`#${CSS.escape(form_name)}-form`); const form_loading_indicator = `#${CSS.escape(form_name)}_loading_indicator`; const form_input_section = `#${CSS.escape(form_name)}-input-section`; const form_success = `#${CSS.escape(form_name)}-success`; @@ -32,7 +32,7 @@ export function create_ajax_request( const data = {}; - for (const item of form.serializeArray()) { + for (const item of $form.serializeArray()) { if (ignored_inputs.includes(item.name)) { continue; } diff --git a/static/js/buddy_list.js b/static/js/buddy_list.js index 7aa8ae35f2..067065f850 100644 --- a/static/js/buddy_list.js +++ b/static/js/buddy_list.js @@ -28,12 +28,12 @@ class BuddyListConf { get_li_from_key(opts) { const user_id = opts.key; - const container = $(this.container_sel); - return container.find(`${this.item_sel}[data-user-id='${CSS.escape(user_id)}']`); + const $container = $(this.container_sel); + return $container.find(`${this.item_sel}[data-user-id='${CSS.escape(user_id)}']`); } get_key_from_li(opts) { - return Number.parseInt(opts.li.expectOne().attr("data-user-id"), 10); + return Number.parseInt(opts.$li.expectOne().attr("data-user-id"), 10); } get_data_from_keys(opts) { @@ -60,7 +60,7 @@ export class BuddyList extends BuddyListConf { populate(opts) { this.render_count = 0; - this.container.html(""); + this.$container.html(""); // We rely on our caller to give us items // in already-sorted order. @@ -88,8 +88,8 @@ export class BuddyList extends BuddyListConf { const html = this.items_to_html({ items, }); - this.container = $(this.container_sel); - this.container.append(html); + this.$container = $(this.container_sel); + this.$container.append(html); // Invariant: more_keys.length >= items.length. // (Usually they're the same, but occasionally keys @@ -102,8 +102,8 @@ export class BuddyList extends BuddyListConf { } get_items() { - const obj = this.container.find(`${this.item_sel}`); - return obj.map((i, elem) => $(elem)); + const $obj = this.$container.find(`${this.item_sel}`); + return $obj.map((i, elem) => $(elem)); } first_key() { @@ -141,8 +141,8 @@ export class BuddyList extends BuddyListConf { if (pos < this.render_count) { this.render_count -= 1; - const li = this.find_li({key: opts.key}); - li.remove(); + const $li = this.find_li({key: opts.key}); + $li.remove(); this.update_padding(); } } @@ -182,18 +182,18 @@ export class BuddyList extends BuddyListConf { const key = opts.key; // Try direct DOM lookup first for speed. - let li = this.get_li_from_key({ + let $li = this.get_li_from_key({ key, }); - if (li.length === 1) { - return li; + if ($li.length === 1) { + return $li; } if (!opts.force_render) { // Most callers don't force us to render a list // item that wouldn't be on-screen anyway. - return li; + return $li; } const pos = this.keys.indexOf(key); @@ -208,11 +208,11 @@ export class BuddyList extends BuddyListConf { pos, }); - li = this.get_li_from_key({ + $li = this.get_li_from_key({ key, }); - return li; + return $li; } insert_new_html(opts) { @@ -223,7 +223,7 @@ export class BuddyList extends BuddyListConf { if (other_key === undefined) { if (pos === this.render_count) { this.render_count += 1; - this.container.append(html); + this.$container.append(html); this.update_padding(); } return; @@ -231,8 +231,8 @@ export class BuddyList extends BuddyListConf { if (pos < this.render_count) { this.render_count += 1; - const li = this.find_li({key: other_key}); - li.before(html); + const $li = this.find_li({key: other_key}); + $li.before(html); this.update_padding(); } } @@ -288,14 +288,14 @@ export class BuddyList extends BuddyListConf { // This is a bit of a hack to make sure we at least have // an empty list to start, before we get the initial payload. - container = $(this.container_sel); + $container = $(this.container_sel); start_scroll_handler() { // We have our caller explicitly call this to make // sure everything's in place. - const scroll_container = ui.get_scroll_element($(this.scroll_container_sel)); + const $scroll_container = ui.get_scroll_element($(this.scroll_container_sel)); - scroll_container.on("scroll", () => { + $scroll_container.on("scroll", () => { this.fill_screen_with_content(); }); } diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js index 2d14a29f64..b677cac009 100644 --- a/static/js/click_handlers.js +++ b/static/js/click_handlers.js @@ -101,49 +101,49 @@ export function initialize() { initialize_long_tap(); } - function is_clickable_message_element(target) { + function is_clickable_message_element($target) { // This function defines all the elements within a message // body that have UI behavior other than starting a reply. // Links should be handled by the browser. - if (target.closest("a").length > 0) { + if ($target.closest("a").length > 0) { return true; } // Forms for message editing contain input elements - if (target.is("textarea") || target.is("input")) { + if ($target.is("textarea") || $target.is("input")) { return true; } // Widget for adjusting the height of a message. - if (target.is("div.message_length_controller")) { + if ($target.is("div.message_length_controller")) { return true; } // Inline image and twitter previews. - if (target.is("img.message_inline_image") || target.is("img.twitter-avatar")) { + if ($target.is("img.message_inline_image") || $target.is("img.twitter-avatar")) { return true; } // UI elements for triggering message editing or viewing edit history. - if (target.is("i.edit_content_button") || target.is(".message_edit_notice")) { + if ($target.is("i.edit_content_button") || $target.is(".message_edit_notice")) { return true; } // For spoilers, allow clicking either the header or elements within it - if (target.is(".spoiler-header") || target.parents(".spoiler-header").length > 0) { + if ($target.is(".spoiler-header") || $target.parents(".spoiler-header").length > 0) { return true; } // Ideally, this should be done via ClipboardJS, but it doesn't support // feature of stopPropagation once clicked. // See https://github.com/zenorocha/clipboard.js/pull/475 - if (target.is(".copy_codeblock") || target.parents(".copy_codeblock").length > 0) { + if ($target.is(".copy_codeblock") || $target.parents(".copy_codeblock").length > 0) { return true; } // Don't select message on clicking message control buttons. - if (target.parents(".message_controls").length > 0) { + if ($target.parents(".message_controls").length > 0) { return true; } @@ -169,8 +169,8 @@ export function initialize() { return; } - const row = $(this).closest(".message_row"); - const id = rows.id(row); + const $row = $(this).closest(".message_row"); + const id = rows.id($row); if (message_edit.is_editing(id)) { // Clicks on a message being edited shouldn't trigger a reply. @@ -261,45 +261,45 @@ export function initialize() { // MESSAGE EDITING $("body").on("click", ".edit_content_button", function (e) { - const row = message_lists.current.get_row(rows.id($(this).closest(".message_row"))); - message_lists.current.select_id(rows.id(row)); - message_edit.start(row); + const $row = message_lists.current.get_row(rows.id($(this).closest(".message_row"))); + message_lists.current.select_id(rows.id($row)); + message_edit.start($row); e.stopPropagation(); popovers.hide_all(); }); $("body").on("click", ".always_visible_topic_edit,.on_hover_topic_edit", function (e) { - const recipient_row = $(this).closest(".recipient_row"); - message_edit.start_inline_topic_edit(recipient_row); + const $recipient_row = $(this).closest(".recipient_row"); + message_edit.start_inline_topic_edit($recipient_row); e.stopPropagation(); popovers.hide_all(); }); $("body").on("click", ".topic_edit_save", function (e) { - const recipient_row = $(this).closest(".recipient_row"); - message_edit.save_inline_topic_edit(recipient_row); + const $recipient_row = $(this).closest(".recipient_row"); + message_edit.save_inline_topic_edit($recipient_row); e.stopPropagation(); popovers.hide_all(); }); $("body").on("click", ".topic_edit_cancel", function (e) { - const recipient_row = $(this).closest(".recipient_row"); - message_edit.end_inline_topic_edit(recipient_row); + const $recipient_row = $(this).closest(".recipient_row"); + message_edit.end_inline_topic_edit($recipient_row); e.stopPropagation(); popovers.hide_all(); }); $("body").on("click", ".message_edit_save", function (e) { - const row = $(this).closest(".message_row"); - message_edit.save_message_row_edit(row); + const $row = $(this).closest(".message_row"); + message_edit.save_message_row_edit($row); e.stopPropagation(); popovers.hide_all(); }); $("body").on("click", ".message_edit_cancel", function (e) { - const row = $(this).closest(".message_row"); - message_edit.end_message_row_edit(row); + const $row = $(this).closest(".message_row"); + message_edit.end_message_row_edit($row); e.stopPropagation(); popovers.hide_all(); }); $("body").on("click", ".message_edit_close", function (e) { - const row = $(this).closest(".message_row"); - message_edit.end_message_row_edit(row); + const $row = $(this).closest(".message_row"); + message_edit.end_message_row_edit($row); e.stopPropagation(); popovers.hide_all(); }); @@ -310,8 +310,8 @@ export function initialize() { }); $(".message_edit_form .send-status-close").on("click", function () { const row_id = rows.id($(this).closest(".message_row")); - const send_status = $(`#message-edit-send-status-${CSS.escape(row_id)}`); - $(send_status).stop(true).fadeOut(200); + const $send_status = $(`#message-edit-send-status-${CSS.escape(row_id)}`); + $($send_status).stop(true).fadeOut(200); }); $("body").on("click", ".message_edit_form .compose_upload_file", function (e) { e.preventDefault(); @@ -322,44 +322,44 @@ export function initialize() { $("body").on("click", ".message_edit_form .markdown_preview", (e) => { e.preventDefault(); - const row = rows.get_closest_row(e.target); - const $msg_edit_content = row.find(".message_edit_content"); + const $row = rows.get_closest_row(e.target); + const $msg_edit_content = $row.find(".message_edit_content"); const content = $msg_edit_content.val(); $msg_edit_content.hide(); - row.find(".markdown_preview").hide(); - row.find(".undo_markdown_preview").show(); - row.find(".preview_message_area").show(); + $row.find(".markdown_preview").hide(); + $row.find(".undo_markdown_preview").show(); + $row.find(".preview_message_area").show(); compose.render_and_show_preview( - row.find(".markdown_preview_spinner"), - row.find(".preview_content"), + $row.find(".markdown_preview_spinner"), + $row.find(".preview_content"), content, ); }); $("body").on("click", ".message_edit_form .undo_markdown_preview", (e) => { e.preventDefault(); - const row = rows.get_closest_row(e.target); - row.find(".message_edit_content").show(); - row.find(".undo_markdown_preview").hide(); - row.find(".preview_message_area").hide(); - row.find(".preview_content").empty(); - row.find(".markdown_preview").show(); + const $row = rows.get_closest_row(e.target); + $row.find(".message_edit_content").show(); + $row.find(".undo_markdown_preview").hide(); + $row.find(".preview_message_area").hide(); + $row.find(".preview_content").empty(); + $row.find(".markdown_preview").show(); }); // RESOLVED TOPICS $("body").on("click", ".message_header .on_hover_topic_resolve", (e) => { e.stopPropagation(); - const recipient_row = $(e.target).closest(".recipient_row"); - const message_id = rows.id_for_recipient_row(recipient_row); + const $recipient_row = $(e.target).closest(".recipient_row"); + const message_id = rows.id_for_recipient_row($recipient_row); const topic_name = $(e.target).attr("data-topic-name"); message_edit.toggle_resolve_topic(message_id, topic_name); }); $("body").on("click", ".message_header .on_hover_topic_unresolve", (e) => { e.stopPropagation(); - const recipient_row = $(e.target).closest(".recipient_row"); - const message_id = rows.id_for_recipient_row(recipient_row); + const $recipient_row = $(e.target).closest(".recipient_row"); + const message_id = rows.id_for_recipient_row($recipient_row); const topic_name = $(e.target).attr("data-topic-name"); message_edit.toggle_resolve_topic(message_id, topic_name); }); @@ -449,9 +449,9 @@ export function initialize() { e.stopPropagation(); // The element's parent may re-render while it is being passed to // other functions, so, we get topic_key first. - const topic_row = $(e.target).closest("tr"); - const topic_key = topic_row.attr("id").slice("recent_topics:".length - 1); - const topic_row_index = topic_row.index(); + const $topic_row = $(e.target).closest("tr"); + const topic_key = $topic_row.attr("id").slice("recent_topics:".length - 1); + const topic_row_index = $topic_row.index(); recent_topics_ui.focus_clicked_element( topic_row_index, recent_topics_ui.COLUMNS.topic, @@ -479,8 +479,8 @@ export function initialize() { // RECIPIENT BARS function get_row_id_for_narrowing(narrow_link_elem) { - const group = rows.get_closest_group(narrow_link_elem); - const msg_id = rows.id_for_recipient_row(group); + const $group = rows.get_closest_group(narrow_link_elem); + const msg_id = rows.id_for_recipient_row($group); const nearest = message_lists.current.get(msg_id); const selected = message_lists.current.selected_message(); @@ -535,9 +535,9 @@ export function initialize() { $("#user_presences") .expectOne() .on("click", ".selectable_sidebar_block", (e) => { - const li = $(e.target).parents("li"); + const $li = $(e.target).parents("li"); - activity.narrow_for_user({li}); + activity.narrow_for_user({$li}); e.preventDefault(); e.stopPropagation(); @@ -545,7 +545,7 @@ export function initialize() { $(".tooltip").remove(); }); - function do_render_buddy_list_tooltip(elem, title_data) { + function do_render_buddy_list_tooltip($elem, title_data) { let placement = "left"; let observer; if (window.innerWidth < media_breakpoints_num.md) { @@ -553,7 +553,7 @@ export function initialize() { // This will default to "bottom" placement for this tooltip. placement = "auto"; } - tippy(elem[0], { + tippy($elem[0], { // Quickly display and hide right sidebar tooltips // so that they don't stick and overlap with // each other. @@ -598,22 +598,22 @@ export function initialize() { // BUDDY LIST TOOLTIPS $("#user_presences").on("mouseenter", ".selectable_sidebar_block", (e) => { e.stopPropagation(); - const elem = $(e.currentTarget).closest(".user_sidebar_entry").find(".user-presence-link"); - const user_id_string = elem.attr("data-user-id"); + const $elem = $(e.currentTarget).closest(".user_sidebar_entry").find(".user-presence-link"); + const user_id_string = $elem.attr("data-user-id"); const title_data = buddy_data.get_title_data(user_id_string, false); - do_render_buddy_list_tooltip(elem.parent(), title_data); + do_render_buddy_list_tooltip($elem.parent(), title_data); }); // PM LIST TOOLTIPS $("body").on("mouseenter", "#pm_user_status", (e) => { e.stopPropagation(); - const elem = $(e.currentTarget); - const user_ids_string = elem.attr("data-user-ids-string"); + const $elem = $(e.currentTarget); + const user_ids_string = $elem.attr("data-user-ids-string"); // This converts from 'true' in the DOM to true. - const is_group = JSON.parse(elem.attr("data-is-group")); + const is_group = JSON.parse($elem.attr("data-is-group")); const title_data = buddy_data.get_title_data(user_ids_string, is_group); - do_render_buddy_list_tooltip(elem, title_data); + do_render_buddy_list_tooltip($elem, title_data); }); // MISC @@ -791,7 +791,7 @@ export function initialize() { overlays.open_overlay({ name: overlay_name, - overlay: $(`#${CSS.escape(overlay_name)}`), + $overlay: $(`#${CSS.escape(overlay_name)}`), on_close: function () { // close popover $(this).css({display: "block"}); diff --git a/static/js/common.ts b/static/js/common.ts index df66733a19..58b2c1c323 100644 --- a/static/js/common.ts +++ b/static/js/common.ts @@ -32,16 +32,16 @@ export function phrase_match(query: string, phrase: string): boolean { return false; } -export function copy_data_attribute_value(elem: JQuery, key: string): void { +export function copy_data_attribute_value($elem: JQuery, key: string): void { // function to copy the value of data-key // attribute of the element to clipboard - const temp = $(document.createElement("input")); - $("body").append(temp); - temp.val(elem.data(key)).trigger("select"); + const $temp = $(document.createElement("input")); + $("body").append($temp); + $temp.val($elem.data(key)).trigger("select"); document.execCommand("copy"); - temp.remove(); - elem.fadeOut(250); - elem.fadeIn(1000); + $temp.remove(); + $elem.fadeOut(250); + $elem.fadeIn(1000); } export function has_mac_keyboard(): boolean { @@ -105,14 +105,14 @@ function toggle_password_visibility( tippy_tooltips: boolean, ): void { let label; - const password_field = $(password_field_id); + const $password_field = $(password_field_id); - if (password_field.attr("type") === "password") { - password_field.attr("type", "text"); + if ($password_field.attr("type") === "password") { + $password_field.attr("type", "text"); $(password_selector).removeClass("fa-eye-slash").addClass("fa-eye"); label = $t({defaultMessage: "Hide password"}); } else { - password_field.attr("type", "password"); + $password_field.attr("type", "password"); $(password_selector).removeClass("fa-eye").addClass("fa-eye-slash"); label = $t({defaultMessage: "Show password"}); } diff --git a/static/js/components.ts b/static/js/components.ts index c3294ad57a..a20fd854e9 100644 --- a/static/js/components.ts +++ b/static/js/components.ts @@ -32,16 +32,16 @@ export function toggle(opts: { child_wants_focus?: boolean; selected?: number; }): Toggle { - const component = $("
    "); + const $component = $("
    "); if (opts.html_class) { // add a check inside passed arguments in case some extra // classes need to be added for correct alignment or other purposes - component.addClass(opts.html_class); + $component.addClass(opts.html_class); } for (const [i, value] of opts.values.entries()) { // create a tab with a tab-id so they don't have to be referenced // by text value which can be inconsistent. - const tab = $("
    ", { + const $tab = $("
    ", { class: "ind-tab", "data-tab-key": value.key, "data-tab-id": i, @@ -51,37 +51,37 @@ export function toggle(opts: { /* istanbul ignore if */ if (value.label_html !== undefined) { const html = value.label_html; - tab.html(html); + $tab.html(html); } else { - tab.text(value.label); + $tab.text(value.label); } // add proper classes for styling in CSS. if (i === 0) { // this should be default selected unless otherwise specified. - tab.addClass("first selected"); + $tab.addClass("first selected"); } else if (i === opts.values.length - 1) { - tab.addClass("last"); + $tab.addClass("last"); } else { - tab.addClass("middle"); + $tab.addClass("middle"); } - component.append(tab); + $component.append($tab); } const meta = { - $ind_tab: component.find(".ind-tab"), + $ind_tab: $component.find(".ind-tab"), idx: -1, }; // Returns false if the requested tab is disabled. function select_tab(idx: number): boolean { - const elem = meta.$ind_tab.eq(idx); - if (elem.hasClass("disabled")) { + const $elem = meta.$ind_tab.eq(idx); + if ($elem.hasClass("disabled")) { return false; } meta.$ind_tab.removeClass("selected"); - elem.addClass("selected"); + $elem.addClass("selected"); meta.idx = idx; if (opts.callback) { @@ -89,7 +89,7 @@ export function toggle(opts: { } if (!opts.child_wants_focus) { - elem.trigger("focus"); + $elem.trigger("focus"); } return true; } @@ -124,7 +124,7 @@ export function toggle(opts: { }); keydown_util.handle({ - elem: meta.$ind_tab, + $elem: meta.$ind_tab, handlers: { ArrowLeft: maybe_go_left, ArrowRight: maybe_go_right, @@ -172,7 +172,7 @@ export function toggle(opts: { }, get() { - return component; + return $component; }, // go through the process of finding the correct tab for a given name, // and when found, select that one and provide the proper callback. diff --git a/static/js/compose.js b/static/js/compose.js index e9965b9e78..5fbc91dd33 100644 --- a/static/js/compose.js +++ b/static/js/compose.js @@ -328,7 +328,7 @@ function insert_video_call_url(url, target_textarea) { compose_ui.insert_syntax_and_focus(`[${link_text}](${url})`, target_textarea); } -export function render_and_show_preview(preview_spinner, preview_content_box, content) { +export function render_and_show_preview($preview_spinner, $preview_content_box, content) { function show_preview(rendered_content, raw_content) { // content is passed to check for status messages ("/me ...") // and will be undefined in case of errors @@ -344,16 +344,16 @@ export function render_and_show_preview(preview_spinner, preview_content_box, co rendered_preview_html = rendered_content; } - preview_content_box.html(util.clean_user_content_links(rendered_preview_html)); - rendered_markdown.update_elements(preview_content_box); + $preview_content_box.html(util.clean_user_content_links(rendered_preview_html)); + rendered_markdown.update_elements($preview_content_box); } if (content.length === 0) { show_preview($t_html({defaultMessage: "Nothing to preview"})); } else { if (markdown.contains_backend_only_syntax(content)) { - const spinner = preview_spinner.expectOne(); - loading.make_indicator(spinner); + const $spinner = $preview_spinner.expectOne(); + loading.make_indicator($spinner); } else { // For messages that don't appear to contain syntax that // is only supported by our backend Markdown processor, we @@ -374,13 +374,13 @@ export function render_and_show_preview(preview_spinner, preview_content_box, co data: {content}, success(response_data) { if (markdown.contains_backend_only_syntax(content)) { - loading.destroy_indicator(preview_spinner); + loading.destroy_indicator($preview_spinner); } show_preview(response_data.rendered, content); }, error() { if (markdown.contains_backend_only_syntax(content)) { - loading.destroy_indicator(preview_spinner); + loading.destroy_indicator($preview_spinner); } show_preview($t_html({defaultMessage: "Failed to generate preview"})); }, @@ -463,9 +463,9 @@ export function initialize() { $("#compose_resolved_topic").on("click", ".compose_unresolve_topic", (event) => { event.preventDefault(); - const target = $(event.target).parents(".compose_resolved_topic"); - const stream_id = Number.parseInt(target.attr("data-stream-id"), 10); - const topic_name = target.attr("data-topic-name"); + const $target = $(event.target).parents(".compose_resolved_topic"); + const stream_id = Number.parseInt($target.attr("data-stream-id"), 10); + const topic_name = $target.attr("data-topic-name"); message_edit.with_first_message_id(stream_id, topic_name, (message_id) => { message_edit.toggle_resolve_topic(message_id, topic_name); @@ -482,17 +482,17 @@ export function initialize() { $("#compose_invite_users").on("click", ".compose_invite_link", (event) => { event.preventDefault(); - const invite_row = $(event.target).parents(".compose_invite_user"); + const $invite_row = $(event.target).parents(".compose_invite_user"); - const user_id = Number.parseInt($(invite_row).data("user-id"), 10); - const stream_id = Number.parseInt($(invite_row).data("stream-id"), 10); + const user_id = Number.parseInt($($invite_row).data("user-id"), 10); + const stream_id = Number.parseInt($($invite_row).data("stream-id"), 10); function success() { - const all_invites = $("#compose_invite_users"); - invite_row.remove(); + const $all_invites = $("#compose_invite_users"); + $invite_row.remove(); - if (all_invites.children().length === 0) { - all_invites.hide(); + if ($all_invites.children().length === 0) { + $all_invites.hide(); } } @@ -513,13 +513,13 @@ export function initialize() { }); $("#compose_invite_users").on("click", ".compose_invite_close", (event) => { - const invite_row = $(event.target).parents(".compose_invite_user"); - const all_invites = $("#compose_invite_users"); + const $invite_row = $(event.target).parents(".compose_invite_user"); + const $all_invites = $("#compose_invite_users"); - invite_row.remove(); + $invite_row.remove(); - if (all_invites.children().length === 0) { - all_invites.hide(); + if ($all_invites.children().length === 0) { + $all_invites.hide(); } }); @@ -527,13 +527,13 @@ export function initialize() { "click", ".compose_private_stream_alert_close", (event) => { - const stream_alert_row = $(event.target).parents(".compose_private_stream_alert"); - const stream_alert = $("#compose_private_stream_alert"); + const $stream_alert_row = $(event.target).parents(".compose_private_stream_alert"); + const $stream_alert = $("#compose_private_stream_alert"); - stream_alert_row.remove(); + $stream_alert_row.remove(); - if (stream_alert.children().length === 0) { - stream_alert.hide(); + if ($stream_alert.children().length === 0) { + $stream_alert.hide(); } }, ); @@ -552,11 +552,11 @@ export function initialize() { e.preventDefault(); e.stopPropagation(); - let target_textarea; + let $target_textarea; let edit_message_id; if ($(e.target).parents(".message_edit_form").length === 1) { edit_message_id = rows.id($(e.target).parents(".message_row")); - target_textarea = $(`#edit_form_${CSS.escape(edit_message_id)} .message_edit_content`); + $target_textarea = $(`#edit_form_${CSS.escape(edit_message_id)} .message_edit_content`); } let video_call_link; @@ -581,7 +581,7 @@ export function initialize() { url: "/json/calls/zoom/create", success(res) { video_call_xhrs.delete(key); - insert_video_call_url(res.url, target_textarea); + insert_video_call_url(res.url, $target_textarea); }, error(xhr, status) { video_call_xhrs.delete(key); @@ -619,13 +619,13 @@ export function initialize() { channel.get({ url: "/json/calls/bigbluebutton/create", success(response) { - insert_video_call_url(response.url, target_textarea); + insert_video_call_url(response.url, $target_textarea); }, }); } else { const video_call_id = util.random_int(100000000000000, 999999999999999); video_call_link = page_params.jitsi_server_url + "/" + video_call_id; - insert_video_call_url(video_call_link, target_textarea); + insert_video_call_url(video_call_link, $target_textarea); } }); @@ -635,20 +635,20 @@ export function initialize() { $(e.target).toggleClass("has_popover"); - let target_textarea; + let $target_textarea; let edit_message_id; const compose_click_target = compose_ui.get_compose_click_target(e); if ($(compose_click_target).parents(".message_edit_form").length === 1) { edit_message_id = rows.id($(compose_click_target).parents(".message_row")); - target_textarea = $(`#edit_form_${CSS.escape(edit_message_id)} .message_edit_content`); + $target_textarea = $(`#edit_form_${CSS.escape(edit_message_id)} .message_edit_content`); } else { - target_textarea = $(compose_click_target).closest("form").find("textarea"); + $target_textarea = $(compose_click_target).closest("form").find("textarea"); } if ($(e.target).hasClass("has_popover")) { const on_timestamp_selection = (val) => { const timestr = ` `; - compose_ui.insert_syntax_and_focus(timestr, target_textarea); + compose_ui.insert_syntax_and_focus(timestr, $target_textarea); }; flatpickr.show_flatpickr( @@ -716,10 +716,10 @@ export function initialize() { $("body").on("click", ".formatting_button", (e) => { const $compose_click_target = $(compose_ui.get_compose_click_target(e)); - const textarea = $compose_click_target.closest("form").find("textarea"); + const $textarea = $compose_click_target.closest("form").find("textarea"); const format_type = $(e.target).attr("data-format-type"); - compose_ui.format_text(textarea, format_type); - textarea.trigger("focus"); + compose_ui.format_text($textarea, format_type); + $textarea.trigger("focus"); e.preventDefault(); e.stopPropagation(); }); diff --git a/static/js/compose_actions.js b/static/js/compose_actions.js index 3fb8e22af2..9406f6edd3 100644 --- a/static/js/compose_actions.js +++ b/static/js/compose_actions.js @@ -72,8 +72,8 @@ export const _get_focus_area = get_focus_area; export function set_focus(msg_type, opts) { const focus_area = get_focus_area(msg_type, opts); if (window.getSelection().toString() === "" || opts.trigger !== "message click") { - const elt = $(focus_area); - elt.trigger("focus").trigger("select"); + const $elt = $(focus_area); + $elt.trigger("focus").trigger("select"); } } @@ -156,9 +156,9 @@ export function maybe_scroll_up_selected_message() { // scroll the compose box to avoid it. return; } - const selected_row = message_lists.current.selected_row(); + const $selected_row = message_lists.current.selected_row(); - if (selected_row.height() > message_viewport.height() - 100) { + if ($selected_row.height() > message_viewport.height() - 100) { // For very tall messages whose height is close to the entire // height of the viewport, don't auto-scroll the viewport to // the end of the message (since that makes it feel annoying @@ -166,7 +166,7 @@ export function maybe_scroll_up_selected_message() { return; } - const cover = selected_row.offset().top + selected_row.height() - $("#compose").offset().top; + const cover = $selected_row.offset().top + $selected_row.height() - $("#compose").offset().top; if (cover > 0) { message_viewport.user_initiated_animate_scroll(cover + 20); } @@ -471,7 +471,7 @@ export function on_topic_narrow() { } export function quote_and_reply(opts) { - const textarea = $("#compose-textarea"); + const $textarea = $("#compose-textarea"); const message_id = message_lists.current.selected_id(); const message = message_lists.current.selected_message(); const quoting_placeholder = $t({defaultMessage: "[Quoting…]"}); @@ -484,17 +484,17 @@ export function quote_and_reply(opts) { // text, plus it's a complicated codepath that // can have other unintended consequences.) - if (textarea.caret() !== 0) { + if ($textarea.caret() !== 0) { // Insert a newline before quoted message if there is // already some content in the compose box and quoted // message is not being inserted at the beginning. - textarea.caret("\n"); + $textarea.caret("\n"); } } else { respond_to_message(opts); } - compose_ui.insert_syntax_and_focus(quoting_placeholder + "\n", textarea); + compose_ui.insert_syntax_and_focus(quoting_placeholder + "\n", $textarea); function replace_content(message) { // Final message looks like: @@ -502,7 +502,7 @@ export function quote_and_reply(opts) { // ```quote // message content // ``` - const prev_caret = textarea.caret(); + const prev_caret = $textarea.caret(); let content = $t( {defaultMessage: "{username} [said]({link_to_message}):"}, { @@ -514,8 +514,8 @@ export function quote_and_reply(opts) { const fence = fenced_code.get_unused_fence(message.raw_content); content += `${fence}quote\n${message.raw_content}\n${fence}`; - const placeholder_offset = $(textarea).val().indexOf(quoting_placeholder); - compose_ui.replace_syntax(quoting_placeholder, content, textarea); + const placeholder_offset = $($textarea).val().indexOf(quoting_placeholder); + compose_ui.replace_syntax(quoting_placeholder, content, $textarea); compose_ui.autosize_textarea($("#compose-textarea")); // When replacing content in a textarea, we need to move the @@ -524,14 +524,14 @@ export function quote_and_reply(opts) { // position. If we do, we need to move it by the increase in // the length of the content before the placeholder. if (prev_caret >= placeholder_offset + quoting_placeholder.length) { - textarea.caret(prev_caret + content.length - quoting_placeholder.length); + $textarea.caret(prev_caret + content.length - quoting_placeholder.length); } else if (prev_caret > placeholder_offset) { /* In the rare case that our cursor was inside the * placeholder, we treat that as though the cursor was * just after the placeholder. */ - textarea.caret(placeholder_offset + content.length + 1); + $textarea.caret(placeholder_offset + content.length + 1); } else { - textarea.caret(prev_caret); + $textarea.caret(prev_caret); } } diff --git a/static/js/compose_error.ts b/static/js/compose_error.ts index cb8d6a8887..09032ab26b 100644 --- a/static/js/compose_error.ts +++ b/static/js/compose_error.ts @@ -2,7 +2,7 @@ import $ from "jquery"; import * as common from "./common"; -export function show(error_html: string, bad_input?: JQuery, alert_class = "alert-error"): void { +export function show(error_html: string, $bad_input?: JQuery, alert_class = "alert-error"): void { $("#compose-send-status") .removeClass(common.status_classes) .addClass(alert_class) @@ -14,13 +14,13 @@ export function show(error_html: string, bad_input?: JQuery, alert_class = "aler $("#compose-send-button span").show(); $("#compose-send-button").removeClass("disable-btn"); - if (bad_input !== undefined) { - bad_input.trigger("focus").trigger("select"); + if ($bad_input !== undefined) { + $bad_input.trigger("focus").trigger("select"); } } -export function show_not_subscribed(error_html: string, bad_input?: JQuery): void { - show(error_html, bad_input, "home-error-bar"); +export function show_not_subscribed(error_html: string, $bad_input?: JQuery): void { + show(error_html, $bad_input, "home-error-bar"); $(".compose-send-status-close").hide(); } diff --git a/static/js/compose_fade.js b/static/js/compose_fade.js index b6aae3962e..6c796ed807 100644 --- a/static/js/compose_fade.js +++ b/static/js/compose_fade.js @@ -46,25 +46,25 @@ export function set_focused_recipient(msg_type) { } function display_messages_normally() { - const table = rows.get_table(message_lists.current.table_name); - table.find(".recipient_row").removeClass("message-fade"); + const $table = rows.get_table(message_lists.current.table_name); + $table.find(".recipient_row").removeClass("message-fade"); normal_display = true; floating_recipient_bar.update(); } -function change_fade_state(elt, should_fade_group) { +function change_fade_state($elt, should_fade_group) { if (should_fade_group) { - elt.addClass("message-fade"); + $elt.addClass("message-fade"); } else { - elt.removeClass("message-fade"); + $elt.removeClass("message-fade"); } } function fade_messages() { let i; let first_message; - let first_row; + let $first_row; let should_fade_group = false; const visible_groups = message_viewport.visible_groups(false); @@ -72,8 +72,8 @@ function fade_messages() { // Update the visible messages first, before the compose box opens for (i = 0; i < visible_groups.length; i += 1) { - first_row = rows.first_message_in_group(visible_groups[i]); - first_message = message_lists.current.get(rows.id(first_row)); + $first_row = rows.first_message_in_group(visible_groups[i]); + first_message = message_lists.current.get(rows.id($first_row)); should_fade_group = compose_fade_helper.should_fade_message(first_message); change_fade_state($(visible_groups[i]), should_fade_group); @@ -99,11 +99,11 @@ function fade_messages() { // Note: The below algorithm relies on the fact that all_elts is // sorted as it would be displayed in the message view for (i = 0; i < all_groups.length; i += 1) { - const group_elt = $(all_groups[i]); + const $group_elt = $(all_groups[i]); should_fade_group = compose_fade_helper.should_fade_message( - rows.recipient_from_group(group_elt), + rows.recipient_from_group($group_elt), ); - change_fade_state(group_elt, should_fade_group); + change_fade_state($group_elt, should_fade_group); } floating_recipient_bar.update(); @@ -115,14 +115,14 @@ function fade_messages() { } const user_fade_config = { - get_user_id(li) { - return buddy_list.get_key_from_li({li}); + get_user_id($li) { + return buddy_list.get_key_from_li({$li}); }, - fade(li) { - return li.addClass("user-fade"); + fade($li) { + return $li.addClass("user-fade"); }, - unfade(li) { - return li.removeClass("user-fade"); + unfade($li) { + return $li.removeClass("user-fade"); }, }; @@ -180,9 +180,9 @@ export function update_rendered_message_groups(message_groups, get_element) { // important difference here is that we look at each message individually, whereas // the other code takes advantage of blocks beneath recipient bars. for (const message_group of message_groups) { - const elt = get_element(message_group); + const $elt = get_element(message_group); const first_message = message_group.message_containers[0].msg; const should_fade = compose_fade_helper.should_fade_message(first_message); - change_fade_state(elt, should_fade); + change_fade_state($elt, should_fade); } } diff --git a/static/js/compose_pm_pill.js b/static/js/compose_pm_pill.js index 0bc7f271ce..dea9a5e881 100644 --- a/static/js/compose_pm_pill.js +++ b/static/js/compose_pm_pill.js @@ -13,10 +13,10 @@ const pill_config = { }; export function initialize_pill() { - const container = $("#private_message_recipient").parent(); + const $container = $("#private_message_recipient").parent(); const pill = input_pill.create({ - container, + $container, pill_config, create_item_from_text: user_pill.create_item_from_email, get_text_from_item: user_pill.get_email_from_item, diff --git a/static/js/compose_state.js b/static/js/compose_state.js index 27d4010e3d..d8df637474 100644 --- a/static/js/compose_state.js +++ b/static/js/compose_state.js @@ -19,14 +19,14 @@ export function composing() { } function get_or_set(fieldname, keep_leading_whitespace) { - // We can't hoist the assignment of 'elem' out of this lambda, + // We can't hoist the assignment of '$elem' out of this lambda, // because the DOM element might not exist yet when get_or_set // is called. return function (newval) { - const elem = $(`#${CSS.escape(fieldname)}`); - const oldval = elem.val(); + const $elem = $(`#${CSS.escape(fieldname)}`); + const oldval = $elem.val(); if (newval !== undefined) { - elem.val(newval); + $elem.val(newval); } return keep_leading_whitespace ? oldval.trimEnd() : oldval.trim(); }; diff --git a/static/js/compose_ui.js b/static/js/compose_ui.js index f441283557..544171b612 100644 --- a/static/js/compose_ui.js +++ b/static/js/compose_ui.js @@ -21,22 +21,22 @@ export function is_full_size() { return full_size_status; } -export function autosize_textarea(textarea) { +export function autosize_textarea($textarea) { // Since this supports both compose and file upload, one must pass // in the text area to autosize. if (!is_full_size()) { - autosize.update(textarea); + autosize.update($textarea); } } -export function smart_insert(textarea, syntax) { +export function smart_insert($textarea, syntax) { function is_space(c) { return c === " " || c === "\t" || c === "\n"; } - const pos = textarea.caret(); - const before_str = textarea.val().slice(0, pos); - const after_str = textarea.val().slice(pos); + const pos = $textarea.caret(); + const before_str = $textarea.val().slice(0, pos); + const after_str = $textarea.val().slice(pos); if ( pos > 0 && @@ -60,32 +60,32 @@ export function smart_insert(textarea, syntax) { syntax += " "; } - textarea.trigger("focus"); + $textarea.trigger("focus"); // We prefer to use insertText, which supports things like undo better // for rich-text editing features like inserting links. But we fall // back to textarea.caret if the browser doesn't support insertText. if (!document.execCommand("insertText", false, syntax)) { - textarea.caret(syntax); + $textarea.caret(syntax); } - autosize_textarea(textarea); + autosize_textarea($textarea); } -export function insert_syntax_and_focus(syntax, textarea = $("#compose-textarea")) { +export function insert_syntax_and_focus(syntax, $textarea = $("#compose-textarea")) { // Generic helper for inserting syntax into the main compose box // where the cursor was and focusing the area. Mostly a thin // wrapper around smart_insert. - smart_insert(textarea, syntax); + smart_insert($textarea, syntax); } -export function replace_syntax(old_syntax, new_syntax, textarea = $("#compose-textarea")) { +export function replace_syntax(old_syntax, new_syntax, $textarea = $("#compose-textarea")) { // Replaces `old_syntax` with `new_syntax` text in the compose box. Due to // the way that JavaScript handles string replacements, if `old_syntax` is // a string it will only replace the first instance. If `old_syntax` is // a RegExp with a global flag, it will replace all instances. - textarea.val( - textarea.val().replace( + $textarea.val( + $textarea.val().replace( old_syntax, () => // We need this anonymous function to avoid JavaScript's @@ -193,7 +193,7 @@ export function make_compose_box_original_size() { $("#compose-textarea").trigger("focus"); } -export function handle_keydown(event, textarea) { +export function handle_keydown(event, $textarea) { // The event.key property will have uppercase letter if // the "Shift + " combo was used or the Caps Lock // key was on. We turn to key to lowercase so the key bindings @@ -212,26 +212,26 @@ export function handle_keydown(event, textarea) { const isCmdOrCtrl = common.has_mac_keyboard() ? event.metaKey : event.ctrlKey; if (type && isCmdOrCtrl) { - format_text(textarea, type); - autosize_textarea(textarea); + format_text($textarea, type); + autosize_textarea($textarea); event.preventDefault(); } } -export function handle_keyup(event, textarea) { +export function handle_keyup(event, $textarea) { // Set the rtl class if the text has an rtl direction, remove it otherwise - rtl.set_rtl_class_for_textarea(textarea); + rtl.set_rtl_class_for_textarea($textarea); } -export function format_text(textarea, type) { +export function format_text($textarea, type) { const italic_syntax = "*"; const bold_syntax = "**"; const bold_and_italic_syntax = "***"; let is_selected_text_italic = false; let is_inner_text_italic = false; - const field = textarea.get(0); - let range = textarea.range(); - let text = textarea.val(); + const field = $textarea.get(0); + let range = $textarea.range(); + let text = $textarea.val(); const selected_text = range.text; // Remove new line and space around selected text. @@ -239,7 +239,7 @@ export function format_text(textarea, type) { const right_trim_length = range.text.length - range.text.trimEnd().length; field.setSelectionRange(range.start + left_trim_length, range.end - right_trim_length); - range = textarea.range(); + range = $textarea.range(); const is_selection_bold = () => // First check if there are enough characters before/after selection. diff --git a/static/js/compose_validate.js b/static/js/compose_validate.js index 2f403819b0..11f40c5091 100644 --- a/static/js/compose_validate.js +++ b/static/js/compose_validate.js @@ -106,12 +106,12 @@ export function warn_if_private_stream_is_linked(linked_stream) { const stream_name = linked_stream.name; - const warning_area = $("#compose_private_stream_alert"); + const $warning_area = $("#compose_private_stream_alert"); const context = {stream_name}; const new_row = render_compose_private_stream_alert(context); - warning_area.append(new_row); - warning_area.show(); + $warning_area.append(new_row); + $warning_area.show(); } export function warn_if_mentioning_unsubscribed_user(mentioned) { @@ -143,10 +143,10 @@ export function warn_if_mentioning_unsubscribed_user(mentioned) { } if (needs_subscribe_warning(user_id, sub.stream_id)) { - const error_area = $("#compose_invite_users"); - const existing_invites_area = $("#compose_invite_users .compose_invite_user"); + const $error_area = $("#compose_invite_users"); + const $existing_invites_area = $("#compose_invite_users .compose_invite_user"); - const existing_invites = Array.from($(existing_invites_area), (user_row) => + const existing_invites = Array.from($($existing_invites_area), (user_row) => Number.parseInt($(user_row).data("user-id"), 10), ); @@ -159,10 +159,10 @@ export function warn_if_mentioning_unsubscribed_user(mentioned) { }; const new_row = render_compose_invite_users(context); - error_area.append(new_row); + $error_area.append(new_row); } - error_area.show(); + $error_area.show(); } } @@ -224,14 +224,14 @@ function show_all_everyone_warnings(stream_id) { count: stream_count, mention: wildcard_mention, }); - const error_area_all_everyone = $("#compose-all-everyone"); + const $error_area_all_everyone = $("#compose-all-everyone"); // only show one error for any number of @all or @everyone mentions - if (!error_area_all_everyone.is(":visible")) { - error_area_all_everyone.append(all_everyone_template); + if (!$error_area_all_everyone.is(":visible")) { + $error_area_all_everyone.append(all_everyone_template); } - error_area_all_everyone.show(); + $error_area_all_everyone.show(); user_acknowledged_all_everyone = false; } @@ -245,13 +245,13 @@ function show_announce_warnings(stream_id) { const stream_count = peer_data.get_subscriber_count(stream_id) || 0; const announce_template = render_compose_announce({count: stream_count}); - const error_area_announce = $("#compose-announce"); + const $error_area_announce = $("#compose-announce"); - if (!error_area_announce.is(":visible")) { - error_area_announce.append(announce_template); + if (!$error_area_announce.is(":visible")) { + $error_area_announce.append(announce_template); } - error_area_announce.show(); + $error_area_announce.show(); user_acknowledged_announce = false; } @@ -660,12 +660,12 @@ export function check_overflow_text() { // expensive. const text = compose_state.message_content(); const max_length = page_params.max_message_length; - const indicator = $("#compose_limit_indicator"); + const $indicator = $("#compose_limit_indicator"); if (text.length > max_length) { - indicator.addClass("over_limit"); + $indicator.addClass("over_limit"); $("#compose-textarea").addClass("over_limit"); - indicator.text(text.length + "/" + max_length); + $indicator.text(text.length + "/" + max_length); compose_error.show( $t_html( { @@ -677,16 +677,16 @@ export function check_overflow_text() { ); $("#compose-send-button").prop("disabled", true); } else if (text.length > 0.9 * max_length) { - indicator.removeClass("over_limit"); + $indicator.removeClass("over_limit"); $("#compose-textarea").removeClass("over_limit"); - indicator.text(text.length + "/" + max_length); + $indicator.text(text.length + "/" + max_length); $("#compose-send-button").prop("disabled", false); if ($("#compose-send-status").hasClass("alert-error")) { $("#compose-send-status").stop(true).fadeOut(); } } else { - indicator.text(""); + $indicator.text(""); $("#compose-textarea").removeClass("over_limit"); $("#compose-send-button").prop("disabled", false); diff --git a/static/js/composebox_typeahead.js b/static/js/composebox_typeahead.js index f3ec98333f..c55a254ac7 100644 --- a/static/js/composebox_typeahead.js +++ b/static/js/composebox_typeahead.js @@ -153,7 +153,7 @@ export function should_enter_send(e) { return this_enter_sends; } -export function handle_enter(textarea, e) { +export function handle_enter($textarea, e) { // Used only if Enter doesn't send. // Since this Enter doesn't send, we just want to do @@ -175,15 +175,15 @@ export function handle_enter(textarea, e) { // To properly emulate browser "Enter", if the // user had selected something in the textarea, // we need those characters to be cleared. - const range = textarea.range(); + const range = $textarea.range(); if (range.length > 0) { - textarea.range(range.start, range.end).range(""); + $textarea.range(range.start, range.end).range(""); } // Now add the newline, remembering to resize the // textarea if needed. - textarea.caret("\n"); - compose_ui.autosize_textarea(textarea); + $textarea.caret("\n"); + compose_ui.autosize_textarea($textarea); e.preventDefault(); } @@ -191,7 +191,7 @@ export function handle_enter(textarea, e) { // We can't focus at the time of keydown because we need to wait for typeahead. // And we can't compute where to focus at the time of keyup because only the keydown // has reliable information about whether it was a Tab or a Shift+Tab. -let nextFocus = false; +let $nextFocus = false; function handle_keydown(e) { const key = e.key; @@ -245,11 +245,11 @@ function handle_keydown(e) { } else if (on_stream || on_topic || on_pm) { // We are doing the focusing on keyup to not abort the typeahead. if (on_stream) { - nextFocus = $("#stream_message_recipient_topic"); + $nextFocus = $("#stream_message_recipient_topic"); } else if (on_topic) { - nextFocus = $("#compose-textarea"); + $nextFocus = $("#compose-textarea"); } else if (on_pm) { - nextFocus = $("#compose-textarea"); + $nextFocus = $("#compose-textarea"); } } } @@ -259,18 +259,18 @@ function handle_keyup(e) { if ( // Enter key or Tab key (e.key === "Enter" || (e.key === "Tab" && !e.shiftKey)) && - nextFocus + $nextFocus ) { - nextFocus.trigger("focus"); - nextFocus = false; + $nextFocus.trigger("focus"); + $nextFocus = false; // Prevent the form from submitting e.preventDefault(); } } -export function split_at_cursor(query, input) { - const cursor = input.caret(); +export function split_at_cursor(query, $input) { + const cursor = $input.caret(); return [query.slice(0, cursor), query.slice(cursor)]; } @@ -517,10 +517,10 @@ export function get_person_suggestions(query, opts) { export function get_stream_topic_data(hacky_this) { const opts = {}; - const message_row = hacky_this.$element.closest(".message_row"); - if (message_row.length === 1) { + const $message_row = hacky_this.$element.closest(".message_row"); + if ($message_row.length === 1) { // we are editing a message so we try to use it's keys. - const msg = message_store.get(rows.id(message_row)); + const msg = message_store.get(rows.id($message_row)); if (msg.type === "stream") { opts.stream = msg.stream; opts.topic = msg.topic; @@ -770,7 +770,7 @@ export function content_typeahead_selected(item, event) { const pieces = split_at_cursor(this.query, this.$element); let beginning = pieces[0]; let rest = pieces[1]; - const textbox = this.$element; + const $textbox = this.$element; // this highlight object will hold the start and end indices // for highlighting any placeholder text const highlight = {}; @@ -898,9 +898,9 @@ export function content_typeahead_selected(item, event) { if (rest.startsWith(">")) { rest = rest.slice(1); } - textbox.val(beginning + rest); - textbox.caret(beginning.length, beginning.length); - compose_ui.autosize_textarea(textbox); + $textbox.val(beginning + rest); + $textbox.caret(beginning.length, beginning.length); + compose_ui.autosize_textarea($textbox); }; flatpickr.show_flatpickr(this.$element[0], on_timestamp_selection, timestamp); return beginning + rest; @@ -908,19 +908,19 @@ export function content_typeahead_selected(item, event) { } // Keep the cursor after the newly inserted text / selecting the - // placeholder text, as Bootstrap will call textbox.change() to + // placeholder text, as Bootstrap will call $textbox.change() to // overwrite the text in the textbox. setTimeout(() => { if (item.placeholder) { // This placeholder block is exclusively for slash // commands, which always appear at the start of the message. - textbox.get(0).setSelectionRange(highlight.start, highlight.end); - textbox.trigger("focus"); + $textbox.get(0).setSelectionRange(highlight.start, highlight.end); + $textbox.trigger("focus"); } else { - textbox.caret(beginning.length, beginning.length); + $textbox.caret(beginning.length, beginning.length); } // Also, trigger autosize to check if compose box needs to be resized. - compose_ui.autosize_textarea(textbox); + compose_ui.autosize_textarea($textbox); }, 0); return beginning + rest; } diff --git a/static/js/condense.js b/static/js/condense.js index 30fe913364..4db57b4e09 100644 --- a/static/js/condense.js +++ b/static/js/condense.js @@ -20,67 +20,67 @@ This library implements two related, similar concepts: const _message_content_height_cache = new Map(); -function show_more_link(row) { - row.find(".message_condenser").hide(); - row.find(".message_expander").show(); +function show_more_link($row) { + $row.find(".message_condenser").hide(); + $row.find(".message_expander").show(); } -function show_condense_link(row) { - row.find(".message_expander").hide(); - row.find(".message_condenser").show(); +function show_condense_link($row) { + $row.find(".message_expander").hide(); + $row.find(".message_condenser").show(); } -function condense_row(row) { - const content = row.find(".message_content"); - content.addClass("condensed"); - show_more_link(row); +function condense_row($row) { + const $content = $row.find(".message_content"); + $content.addClass("condensed"); + show_more_link($row); } -function uncondense_row(row) { - const content = row.find(".message_content"); - content.removeClass("condensed"); - show_condense_link(row); +function uncondense_row($row) { + const $content = $row.find(".message_content"); + $content.removeClass("condensed"); + show_condense_link($row); } -export function uncollapse(row) { +export function uncollapse($row) { // Uncollapse a message, restoring the condensed message [More] or // [Show less] link if necessary. - const message = message_lists.current.get(rows.id(row)); + const message = message_lists.current.get(rows.id($row)); message.collapsed = false; message_flags.save_uncollapsed(message); - const process_row = function process_row(row) { - const content = row.find(".message_content"); - content.removeClass("collapsed"); + const process_row = function process_row($row) { + const $content = $row.find(".message_content"); + $content.removeClass("collapsed"); if (message.condensed === true) { // This message was condensed by the user, so re-show the // [More] link. - condense_row(row); + condense_row($row); } else if (message.condensed === false) { // This message was un-condensed by the user, so re-show the // [Show less] link. - uncondense_row(row); - } else if (content.hasClass("could-be-condensed")) { + uncondense_row($row); + } else if ($content.hasClass("could-be-condensed")) { // By default, condense a long message. - condense_row(row); + condense_row($row); } else { // This was a short message, no more need for a [More] link. - row.find(".message_expander").hide(); + $row.find(".message_expander").hide(); } }; // We also need to collapse this message in the home view - const home_row = message_lists.home.get_row(rows.id(row)); + const $home_row = message_lists.home.get_row(rows.id($row)); - process_row(row); - process_row(home_row); + process_row($row); + process_row($home_row); } -export function collapse(row) { +export function collapse($row) { // Collapse a message, hiding the condensed message [More] or // [Show less] link if necessary. - const message = message_lists.current.get(rows.id(row)); + const message = message_lists.current.get(rows.id($row)); message.collapsed = true; if (message.locally_echoed) { @@ -93,16 +93,16 @@ export function collapse(row) { message_flags.save_collapsed(message); - const process_row = function process_row(row) { - row.find(".message_content").addClass("collapsed"); - show_more_link(row); + const process_row = function process_row($row) { + $row.find(".message_content").addClass("collapsed"); + show_more_link($row); }; // We also need to collapse this message in the home view - const home_row = message_lists.home.get_row(rows.id(row)); + const $home_row = message_lists.home.get_row(rows.id($row)); - process_row(row); - process_row(home_row); + process_row($row); + process_row($home_row); } export function toggle_collapse(message) { @@ -121,30 +121,30 @@ export function toggle_collapse(message) { // * If the message is fully visible, either because it's too short to // condense or because it's already uncondensed, collapse it - const row = message_lists.current.get_row(message.id); - if (!row) { + const $row = message_lists.current.get_row(message.id); + if (!$row) { return; } - const content = row.find(".message_content"); - const is_condensable = content.hasClass("could-be-condensed"); - const is_condensed = content.hasClass("condensed"); + const $content = $row.find(".message_content"); + const is_condensable = $content.hasClass("could-be-condensed"); + const is_condensed = $content.hasClass("condensed"); if (message.collapsed) { if (is_condensable) { message.condensed = true; - content.addClass("condensed"); - show_message_expander(row); - row.find(".message_condenser").hide(); + $content.addClass("condensed"); + show_message_expander($row); + $row.find(".message_condenser").hide(); } - uncollapse(row); + uncollapse($row); } else { if (is_condensed) { message.condensed = false; - content.removeClass("condensed"); - hide_message_expander(row); - row.find(".message_condenser").show(); + $content.removeClass("condensed"); + hide_message_expander($row); + $row.find(".message_condenser").show(); } else { - collapse(row); + collapse($row); } } } @@ -170,27 +170,27 @@ function get_message_height(elem, message_id) { return height; } -export function hide_message_expander(row) { - if (row.find(".could-be-condensed").length !== 0) { - row.find(".message_expander").hide(); +export function hide_message_expander($row) { + if ($row.find(".could-be-condensed").length !== 0) { + $row.find(".message_expander").hide(); } } -export function hide_message_condenser(row) { - if (row.find(".could-be-condensed").length !== 0) { - row.find(".message_condenser").hide(); +export function hide_message_condenser($row) { + if ($row.find(".could-be-condensed").length !== 0) { + $row.find(".message_condenser").hide(); } } -export function show_message_expander(row) { - if (row.find(".could-be-condensed").length !== 0) { - row.find(".message_expander").show(); +export function show_message_expander($row) { + if ($row.find(".could-be-condensed").length !== 0) { + $row.find(".message_expander").show(); } } -export function show_message_condenser(row) { - if (row.find(".could-be-condensed").length !== 0) { - row.find(".message_condenser").show(); +export function show_message_condenser($row) { + if ($row.find(".could-be-condensed").length !== 0) { + $row.find(".message_condenser").show(); } } @@ -198,9 +198,9 @@ export function condense_and_collapse(elems) { const height_cutoff = message_viewport.height() * 0.65; for (const elem of elems) { - const content = $(elem).find(".message_content"); + const $content = $(elem).find(".message_content"); - if (content.length !== 1) { + if ($content.length !== 1) { // We could have a "/me did this" message or something // else without a `message_content` div. continue; @@ -221,9 +221,9 @@ export function condense_and_collapse(elems) { const long_message = message_height > height_cutoff; if (long_message) { // All long messages are flagged as such. - content.addClass("could-be-condensed"); + $content.addClass("could-be-condensed"); } else { - content.removeClass("could-be-condensed"); + $content.removeClass("could-be-condensed"); } // If message.condensed is defined, then the user has manually @@ -242,14 +242,14 @@ export function condense_and_collapse(elems) { // By default, condense a long message. condense_row($(elem)); } else { - content.removeClass("condensed"); + $content.removeClass("condensed"); $(elem).find(".message_expander").hide(); } // Completely hide the message and replace it with a [More] // link if the user has collapsed it. if (message.collapsed) { - content.addClass("collapsed"); + $content.addClass("collapsed"); $(elem).find(".message_expander").show(); } } @@ -259,27 +259,27 @@ export function initialize() { $("#message_feed_container").on("click", ".message_expander", function (e) { // Expanding a message can mean either uncollapsing or // uncondensing it. - const row = $(this).closest(".message_row"); - const message = message_lists.current.get(rows.id(row)); - const content = row.find(".message_content"); + const $row = $(this).closest(".message_row"); + const message = message_lists.current.get(rows.id($row)); + const $content = $row.find(".message_content"); if (message.collapsed) { // Uncollapse. - uncollapse(row); - } else if (content.hasClass("condensed")) { + uncollapse($row); + } else if ($content.hasClass("condensed")) { // Uncondense (show the full long message). message.condensed = false; - content.removeClass("condensed"); + $content.removeClass("condensed"); $(this).hide(); - row.find(".message_condenser").show(); + $row.find(".message_condenser").show(); } e.stopPropagation(); e.preventDefault(); }); $("#message_feed_container").on("click", ".message_condenser", function (e) { - const row = $(this).closest(".message_row"); - message_lists.current.get(rows.id(row)).condensed = true; - condense_row(row); + const $row = $(this).closest(".message_row"); + message_lists.current.get(rows.id($row)).condensed = true; + condense_row($row); e.stopPropagation(); e.preventDefault(); }); diff --git a/static/js/copy_and_paste.js b/static/js/copy_and_paste.js index d34e033238..0cb1ed9a76 100644 --- a/static/js/copy_and_paste.js +++ b/static/js/copy_and_paste.js @@ -6,15 +6,15 @@ import * as message_lists from "./message_lists"; import {page_params} from "./page_params"; import * as rows from "./rows"; -function find_boundary_tr(initial_tr, iterate_row) { +function find_boundary_tr($initial_tr, iterate_row) { let j; let skip_same_td_check = false; - let tr = initial_tr; + let $tr = $initial_tr; // If the selection boundary is somewhere that does not have a // parent tr, we should let the browser handle the copy-paste // entirely on its own - if (tr.length === 0) { + if ($tr.length === 0) { return undefined; } @@ -24,8 +24,8 @@ function find_boundary_tr(initial_tr, iterate_row) { // To ensure we can't enter an infinite loop, bail out (and let the // browser handle the copy-paste on its own) if we don't hit what we // are looking for within 10 rows. - for (j = 0; !tr.is(".message_row") && j < 10; j += 1) { - tr = iterate_row(tr); + for (j = 0; !$tr.is(".message_row") && j < 10; j += 1) { + $tr = iterate_row($tr); } if (j === 10) { return undefined; @@ -36,12 +36,12 @@ function find_boundary_tr(initial_tr, iterate_row) { // in this case) skip_same_td_check = true; } - return [rows.id(tr), skip_same_td_check]; + return [rows.id($tr), skip_same_td_check]; } -function construct_recipient_header(message_row) { +function construct_recipient_header($message_row) { const message_header_content = rows - .get_message_recipient_header(message_row) + .get_message_recipient_header($message_row) .text() .replace(/\s+/g, " ") .replace(/^\s/, "") @@ -64,40 +64,40 @@ Do not be afraid to change this code if you understand how modern browsers deal with copy/paste. Just test your changes carefully. */ -function construct_copy_div(div, start_id, end_id) { +function construct_copy_div($div, start_id, end_id) { const copy_rows = rows.visible_range(start_id, end_id); - const start_row = copy_rows[0]; - const start_recipient_row = rows.get_message_recipient_row(start_row); - const start_recipient_row_id = rows.id_for_recipient_row(start_recipient_row); + const $start_row = copy_rows[0]; + const $start_recipient_row = rows.get_message_recipient_row($start_row); + const start_recipient_row_id = rows.id_for_recipient_row($start_recipient_row); let should_include_start_recipient_header = false; let last_recipient_row_id = start_recipient_row_id; - for (const row of copy_rows) { - const recipient_row_id = rows.id_for_recipient_row(rows.get_message_recipient_row(row)); + for (const $row of copy_rows) { + const recipient_row_id = rows.id_for_recipient_row(rows.get_message_recipient_row($row)); // if we found a message from another recipient, // it means that we have messages from several recipients, // so we have to add new recipient's bar to final copied message // and wouldn't forget to add start_recipient's bar at the beginning of final message if (recipient_row_id !== last_recipient_row_id) { - div.append(construct_recipient_header(row)); + $div.append(construct_recipient_header($row)); last_recipient_row_id = recipient_row_id; should_include_start_recipient_header = true; } - const message = message_lists.current.get(rows.id(row)); - const message_firstp = $(message.content).slice(0, 1); - message_firstp.prepend(message.sender_full_name + ": "); - div.append(message_firstp); - div.append($(message.content).slice(1)); + const message = message_lists.current.get(rows.id($row)); + const $message_firstp = $(message.content).slice(0, 1); + $message_firstp.prepend(message.sender_full_name + ": "); + $div.append($message_firstp); + $div.append($(message.content).slice(1)); } if (should_include_start_recipient_header) { - div.prepend(construct_recipient_header(start_row)); + $div.prepend(construct_recipient_header($start_row)); } } -function select_div(div, selection) { - div.css({ +function select_div($div, selection) { + $div.css({ position: "absolute", left: "-99999px", // Color and background is made according to "light theme" @@ -110,8 +110,8 @@ function select_div(div, selection) { color: "#333", background: "#FFF", }).attr("id", "copytempdiv"); - $("body").append(div); - selection.selectAllChildren(div[0]); + $("body").append($div); + selection.selectAllChildren($div[0]); } function remove_div(div, ranges, selection) { @@ -149,7 +149,7 @@ export function copy_handler() { const start_id = analysis.start_id; const end_id = analysis.end_id; const skip_same_td_check = analysis.skip_same_td_check; - const div = $("
    "); + const $div = $("
    "); if (start_id === undefined || end_id === undefined) { // In this case either the starting message or the ending @@ -176,13 +176,13 @@ export function copy_handler() { // chance for overlaps between same message ids, avoiding which is much // more difficult since we can get a range (start_id and end_id) for // each selection `Range`. - construct_copy_div(div, start_id, end_id); + construct_copy_div($div, start_id, end_id); // Select div so that the browser will copy it // instead of copying the original selection - select_div(div, selection); + select_div($div, selection); document.execCommand("copy"); - remove_div(div, ranges, selection); + remove_div($div, ranges, selection); } export function analyze_selection(selection) { @@ -200,9 +200,9 @@ export function analyze_selection(selection) { let i; let range; const ranges = []; - let startc; - let endc; - let initial_end_tr; + let $startc; + let $endc; + let $initial_end_tr; let start_id; let end_id; let start_data; @@ -216,10 +216,10 @@ export function analyze_selection(selection) { range = selection.getRangeAt(i); ranges.push(range); - startc = $(range.startContainer); + $startc = $(range.startContainer); start_data = find_boundary_tr( - $(startc.parents(".selectable_row, .message_header")[0]), - (row) => row.next(), + $($startc.parents(".selectable_row, .message_header")[0]), + ($row) => $row.next(), ); if (start_data === undefined) { // Skip any selection sections that don't intersect a message. @@ -231,21 +231,21 @@ export function analyze_selection(selection) { start_id = start_data[0]; } - endc = $(range.endContainer); + $endc = $(range.endContainer); // If the selection ends in the bottom whitespace, we should // act as though the selection ends on the final message. // This handles the issue that Chrome seems to like selecting // the compose_close button when you go off the end of the // last message - if (endc.attr("id") === "bottom_whitespace" || endc.attr("id") === "compose_close") { - initial_end_tr = $(".message_row").last(); + if ($endc.attr("id") === "bottom_whitespace" || $endc.attr("id") === "compose_close") { + $initial_end_tr = $(".message_row").last(); // The selection goes off the end of the message feed, so // this is a multi-message selection. skip_same_td_check = true; } else { - initial_end_tr = $(endc.parents(".selectable_row")[0]); + $initial_end_tr = $($endc.parents(".selectable_row")[0]); } - end_data = find_boundary_tr(initial_end_tr, (row) => row.prev()); + end_data = find_boundary_tr($initial_end_tr, ($row) => $row.prev()); if (end_data === undefined) { // Skip any selection sections that don't intersect a message. diff --git a/static/js/csrf.ts b/static/js/csrf.ts index 44e91686a4..abed2adacd 100644 --- a/static/js/csrf.ts +++ b/static/js/csrf.ts @@ -4,8 +4,8 @@ export let csrf_token: string | undefined; $(() => { // This requires that we used Jinja2's {% csrf_input %} somewhere on the page. - const csrf_input = $('input[name="csrfmiddlewaretoken"]'); - csrf_token = csrf_input.attr("value"); + const $csrf_input = $('input[name="csrfmiddlewaretoken"]'); + csrf_token = $csrf_input.attr("value"); if (csrf_token === undefined) { return; } diff --git a/static/js/dialog_widget.js b/static/js/dialog_widget.js index 12e9121778..ca5f450a6e 100644 --- a/static/js/dialog_widget.js +++ b/static/js/dialog_widget.js @@ -45,8 +45,8 @@ export function hide_dialog_spinner() { $(".dialog_submit_button span").show(); $("#dialog_widget_modal .modal__btn").prop("disabled", false); - const spinner = $("#dialog_widget_modal .modal__spinner"); - loading.destroy_indicator(spinner); + const $spinner = $("#dialog_widget_modal .modal__spinner"); + loading.destroy_indicator($spinner); } export function show_dialog_spinner() { @@ -54,8 +54,8 @@ export function show_dialog_spinner() { // Disable both the buttons. $("#dialog_widget_modal .modal__btn").prop("disabled", true); - const spinner = $("#dialog_widget_modal .modal__spinner"); - loading.make_indicator(spinner); + const $spinner = $("#dialog_widget_modal .modal__spinner"); + loading.make_indicator($spinner); } // Supports a callback to be called once the modal finishes closing. @@ -109,24 +109,24 @@ export function launch(conf) { id: conf.id, single_footer_button: conf.single_footer_button, }); - const dialog = $(html); - $("body").append(dialog); + const $dialog = $(html); + $("body").append($dialog); if (conf.post_render !== undefined) { conf.post_render(); } - const submit_button = dialog.find(".dialog_submit_button"); + const $submit_button = $dialog.find(".dialog_submit_button"); // This is used to link the submit button with the form, if present, in the modal. // This makes it so that submitting this form by pressing Enter on an input element // triggers a click on the submit button. if (conf.form_id) { - submit_button.attr("form", conf.form_id); + $submit_button.attr("form", conf.form_id); } // Set up handlers. - submit_button.on("click", (e) => { + $submit_button.on("click", (e) => { if (conf.validate_input && !conf.validate_input(e)) { return; } @@ -144,7 +144,7 @@ export function launch(conf) { micromodal: true, on_show: () => { if (conf.focus_submit_on_open) { - submit_button.trigger("focus"); + $submit_button.trigger("focus"); } if (conf.on_show) { conf.on_show(); diff --git a/static/js/drafts.js b/static/js/drafts.js index 6ace0068e9..bb25d0e653 100644 --- a/static/js/drafts.js +++ b/static/js/drafts.js @@ -30,8 +30,8 @@ import * as ui_util from "./ui_util"; import * as util from "./util"; function set_count(count) { - const drafts_li = $(".top_left_drafts"); - ui_util.update_unread_count_in_dom(drafts_li, count); + const $drafts_li = $(".top_left_drafts"); + ui_util.update_unread_count_in_dom($drafts_li, count); } export const draft_model = (function () { @@ -360,22 +360,22 @@ function row_with_focus() { } function row_before_focus() { - const focused_row = row_with_focus(); - return focused_row.prev(".draft-row:visible"); + const $focused_row = row_with_focus(); + return $focused_row.prev(".draft-row:visible"); } function row_after_focus() { - const focused_row = row_with_focus(); - return focused_row.next(".draft-row:visible"); + const $focused_row = row_with_focus(); + return $focused_row.next(".draft-row:visible"); } -function remove_draft(draft_row) { +function remove_draft($draft_row) { // Deletes the draft and removes it from the list - const draft_id = draft_row.data("draft-id"); + const draft_id = $draft_row.data("draft-id"); draft_model.deleteDraft(draft_id); - draft_row.remove(); + $draft_row.remove(); if ($("#drafts_table .draft-row").length === 0) { $("#drafts_table .no-drafts").show(); @@ -407,15 +407,15 @@ export function launch() { drafts, draft_lifetime: DRAFT_LIFETIME, }); - const drafts_table = $("#drafts_table"); - drafts_table.append(rendered); + const $drafts_table = $("#drafts_table"); + $drafts_table.append(rendered); if ($("#drafts_table .draft-row").length > 0) { $("#drafts_table .no-drafts").hide(); // Update possible dynamic elements. - const rendered_drafts = drafts_table.find( + const $rendered_drafts = $drafts_table.find( ".message_content.rendered_markdown.restore-draft", ); - rendered_drafts.each(function () { + $rendered_drafts.each(function () { rendered_markdown.update_elements($(this)); }); } @@ -429,15 +429,15 @@ export function launch() { e.stopPropagation(); - const draft_row = $(this).closest(".draft-row"); - const draft_id = draft_row.data("draft-id"); - restore_draft(draft_id); + const $draft_row = $(this).closest(".draft-row"); + const $draft_id = $draft_row.data("draft-id"); + restore_draft($draft_id); }); $(".draft_controls .delete-draft").on("click", function () { - const draft_row = $(this).closest(".draft-row"); + const $draft_row = $(this).closest(".draft-row"); - remove_draft(draft_row); + remove_draft($draft_row); }); } @@ -489,35 +489,35 @@ function drafts_initialize_focus(event_name) { activate_element(focus_element); } -function drafts_scroll(next_focus_draft_row) { - if (next_focus_draft_row[0] === undefined) { +function drafts_scroll($next_focus_draft_row) { + if ($next_focus_draft_row[0] === undefined) { return; } - if (next_focus_draft_row[0].children[0] === undefined) { + if ($next_focus_draft_row[0].children[0] === undefined) { return; } - activate_element(next_focus_draft_row[0].children[0]); + activate_element($next_focus_draft_row[0].children[0]); // If focused draft is first draft, scroll to the top. - if ($(".draft-info-box").first()[0].parentElement === next_focus_draft_row[0]) { + if ($(".draft-info-box").first()[0].parentElement === $next_focus_draft_row[0]) { $(".drafts-list")[0].scrollTop = 0; } // If focused draft is the last draft, scroll to the bottom. - if ($(".draft-info-box").last()[0].parentElement === next_focus_draft_row[0]) { + if ($(".draft-info-box").last()[0].parentElement === $next_focus_draft_row[0]) { $(".drafts-list")[0].scrollTop = $(".drafts-list")[0].scrollHeight - $(".drafts-list").height(); } // If focused draft is cut off from the top, scroll up halfway in draft modal. - if (next_focus_draft_row.position().top < 55) { + if ($next_focus_draft_row.position().top < 55) { // 55 is the minimum distance from the top that will require extra scrolling. $(".drafts-list")[0].scrollTop -= $(".drafts-list")[0].clientHeight / 2; } // If focused draft is cut off from the bottom, scroll down halfway in draft modal. - const dist_from_top = next_focus_draft_row.position().top; - const total_dist = dist_from_top + next_focus_draft_row[0].clientHeight; + const dist_from_top = $next_focus_draft_row.position().top; + const total_dist = dist_from_top + $next_focus_draft_row[0].clientHeight; const dist_from_bottom = $(".drafts-container")[0].clientHeight - total_dist; if (dist_from_bottom < -4) { // -4 is the min dist from the bottom that will require extra scrolling. @@ -545,17 +545,17 @@ export function drafts_handle_events(e, event_key) { const focused_draft_id = row_with_focus().data("draft-id"); // Allows user to delete drafts with Backspace if ((event_key === "backspace" || event_key === "delete") && focused_draft_id !== undefined) { - const draft_row = row_with_focus(); - const next_draft_row = row_after_focus(); - const prev_draft_row = row_before_focus(); + const $draft_row = row_with_focus(); + const $next_draft_row = row_after_focus(); + const $prev_draft_row = row_before_focus(); let draft_to_be_focused_id; // Try to get the next draft in the list and 'focus' it // Use previous draft as a fallback - if (next_draft_row[0] !== undefined) { - draft_to_be_focused_id = next_draft_row.data("draft-id"); - } else if (prev_draft_row[0] !== undefined) { - draft_to_be_focused_id = prev_draft_row.data("draft-id"); + if ($next_draft_row[0] !== undefined) { + draft_to_be_focused_id = $next_draft_row.data("draft-id"); + } else if ($prev_draft_row[0] !== undefined) { + draft_to_be_focused_id = $prev_draft_row.data("draft-id"); } const new_focus_element = document.querySelectorAll( @@ -565,7 +565,7 @@ export function drafts_handle_events(e, event_key) { activate_element(new_focus_element[0].children[0]); } - remove_draft(draft_row); + remove_draft($draft_row); } // This handles when pressing Enter while looking at drafts. @@ -583,7 +583,7 @@ export function drafts_handle_events(e, event_key) { export function open_overlay() { overlays.open_overlay({ name: "drafts", - overlay: $("#draft_overlay"), + $overlay: $("#draft_overlay"), on_close() { browser_history.exit_overlay(); }, diff --git a/static/js/dropdown_list_widget.js b/static/js/dropdown_list_widget.js index 8d684b27ba..7260fe9d08 100644 --- a/static/js/dropdown_list_widget.js +++ b/static/js/dropdown_list_widget.js @@ -40,19 +40,19 @@ export function DropdownListWidget({ this.setup(); } -DropdownListWidget.prototype.render_default_text = function (elem) { - elem.text(this.default_text); - elem.addClass("text-warning"); - elem.closest(".input-group").find(".dropdown_list_reset_button").hide(); +DropdownListWidget.prototype.render_default_text = function ($elem) { + $elem.text(this.default_text); + $elem.addClass("text-warning"); + $elem.closest(".input-group").find(".dropdown_list_reset_button").hide(); }; DropdownListWidget.prototype.render = function (value) { $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.value_id)}`).data("value", value); - const elem = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.widget_name)}_name`); + const $elem = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.widget_name)}_name`); if (!value || value === this.null_value) { - this.render_default_text(elem); + this.render_default_text($elem); return; } @@ -60,14 +60,14 @@ DropdownListWidget.prototype.render = function (value) { const item = this.data.find((x) => x.value === value.toString()); if (item === undefined) { - this.render_default_text(elem); + this.render_default_text($elem); return; } const text = this.render_text(item.name); - elem.text(text); - elem.removeClass("text-warning"); - elem.closest(".input-group").find(".dropdown_list_reset_button").show(); + $elem.text(text); + $elem.removeClass("text-warning"); + $elem.closest(".input-group").find(".dropdown_list_reset_button").show(); }; DropdownListWidget.prototype.update = function (value) { @@ -80,12 +80,12 @@ DropdownListWidget.prototype.register_event_handlers = function () { "click keypress", ".list_item", (e) => { - const setting_elem = $(e.currentTarget).closest( + const $setting_elem = $(e.currentTarget).closest( `.${CSS.escape(this.widget_name)}_setting`, ); if (e.type === "keypress") { if (e.key === "Enter") { - setting_elem.find(".dropdown-menu").dropdown("toggle"); + $setting_elem.find(".dropdown-menu").dropdown("toggle"); } else { return; } @@ -101,10 +101,12 @@ DropdownListWidget.prototype.register_event_handlers = function () { }; DropdownListWidget.prototype.setup_dropdown_widget = function (data) { - const dropdown_list_body = $( + const $dropdown_list_body = $( `#${CSS.escape(this.container_id)} .dropdown-list-body`, ).expectOne(); - const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`); + const $search_input = $( + `#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`, + ); const get_data = () => { if (this.include_current_item) { return data; @@ -112,59 +114,63 @@ DropdownListWidget.prototype.setup_dropdown_widget = function (data) { return data.filter((x) => x.value !== this.value.toString()); }; - ListWidget.create(dropdown_list_body, get_data(data), { + ListWidget.create($dropdown_list_body, get_data(data), { name: `${CSS.escape(this.widget_name)}_list`, modifier(item) { return render_dropdown_list({item}); }, filter: { - element: search_input, + $element: $search_input, predicate(item, value) { return item.name.toLowerCase().includes(value); }, }, - simplebar_container: $(`#${CSS.escape(this.container_id)} .dropdown-list-wrapper`), + $simplebar_container: $(`#${CSS.escape(this.container_id)} .dropdown-list-wrapper`), }); }; // Sets the focus to the ListWidget input once the dropdown button is clicked. DropdownListWidget.prototype.dropdown_toggle_click_handler = function () { - const dropdown_toggle = $(`#${CSS.escape(this.container_id)} .dropdown-toggle`); - const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`); + const $dropdown_toggle = $(`#${CSS.escape(this.container_id)} .dropdown-toggle`); + const $search_input = $( + `#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`, + ); - dropdown_toggle.on("click", () => { - search_input.val("").trigger("input"); + $dropdown_toggle.on("click", () => { + $search_input.val("").trigger("input"); }); }; DropdownListWidget.prototype.dropdown_focus_events = function () { - const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`); - const dropdown_menu = $(`.${CSS.escape(this.widget_name)}_setting .dropdown-menu`); + const $search_input = $( + `#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`, + ); + const $dropdown_menu = $(`.${CSS.escape(this.widget_name)}_setting .dropdown-menu`); const dropdown_elements = () => { - const dropdown_list_body = $( + const $dropdown_list_body = $( `#${CSS.escape(this.container_id)} .dropdown-list-body`, ).expectOne(); - return dropdown_list_body.children().find("a"); + return $dropdown_list_body.children().find("a"); }; // Rest of the key handlers are supported by our // bootstrap library. - dropdown_menu.on("keydown", (e) => { - function trigger_element_focus(element) { + $dropdown_menu.on("keydown", (e) => { + function trigger_element_focus($element) { e.preventDefault(); e.stopPropagation(); - element.trigger("focus"); + $element.trigger("focus"); } switch (e.key) { case "ArrowDown": { switch (e.target) { case dropdown_elements().last()[0]: - trigger_element_focus(search_input); + trigger_element_focus($search_input); break; - case search_input[0]: + case $search_input[0]: trigger_element_focus(dropdown_elements().first()); break; } @@ -174,9 +180,9 @@ DropdownListWidget.prototype.dropdown_focus_events = function () { case "ArrowUp": { switch (e.target) { case dropdown_elements().first()[0]: - trigger_element_focus(search_input); + trigger_element_focus($search_input); break; - case search_input[0]: + case $search_input[0]: trigger_element_focus(dropdown_elements().last()); } @@ -184,11 +190,11 @@ DropdownListWidget.prototype.dropdown_focus_events = function () { } case "Tab": { switch (e.target) { - case search_input[0]: + case $search_input[0]: trigger_element_focus(dropdown_elements().first()); break; case dropdown_elements().last()[0]: - trigger_element_focus(search_input); + trigger_element_focus($search_input); break; } @@ -200,11 +206,13 @@ DropdownListWidget.prototype.dropdown_focus_events = function () { DropdownListWidget.prototype.setup = function () { // populate the dropdown - const dropdown_list_body = $( + const $dropdown_list_body = $( `#${CSS.escape(this.container_id)} .dropdown-list-body`, ).expectOne(); - const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`); - const dropdown_toggle = $(`#${CSS.escape(this.container_id)} .dropdown-toggle`); + const $search_input = $( + `#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`, + ); + const $dropdown_toggle = $(`#${CSS.escape(this.container_id)} .dropdown-toggle`); this.setup_dropdown_widget(this.data); @@ -214,7 +222,7 @@ DropdownListWidget.prototype.setup = function () { this.dropdown_toggle_click_handler(); - dropdown_toggle.on("focus", (e) => { + $dropdown_toggle.on("focus", (e) => { // On opening a Bootstrap Dropdown, the parent element receives focus. // Here, we want our search input to have focus instead. e.preventDefault(); @@ -222,8 +230,8 @@ DropdownListWidget.prototype.setup = function () { // dropdown, and only in the second call is the input // field visible in the DOM; so the following visibility // check ensures we wait for the second call to focus. - if (dropdown_list_body.is(":visible")) { - search_input.trigger("focus"); + if ($dropdown_list_body.is(":visible")) { + $search_input.trigger("focus"); } }); @@ -292,15 +300,15 @@ MultiSelectDropdownListWidget.prototype.initialize_dropdown_values = function () if (!this.initial_value || this.initial_value === this.null_value) { return; } - const elem = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.widget_name)}_name`); + const $elem = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.widget_name)}_name`); // Push values from initial valued array to `data_selected`. this.data_selected.push(...this.initial_value); - this.render_button_text(elem, this.limit); + this.render_button_text($elem, this.limit); }; // Set the button text as per the selected data. -MultiSelectDropdownListWidget.prototype.render_button_text = function (elem, limit) { +MultiSelectDropdownListWidget.prototype.render_button_text = function ($elem, limit) { const items_selected = this.data_selected.length; let text = ""; @@ -308,7 +316,7 @@ MultiSelectDropdownListWidget.prototype.render_button_text = function (elem, lim this.destroy_tooltip(); if (items_selected === 0) { - this.render_default_text(elem); + this.render_default_text($elem); return; } else if (limit >= items_selected) { const data_selected = this.data.filter((data) => this.data_selected.includes(data.value)); @@ -318,29 +326,31 @@ MultiSelectDropdownListWidget.prototype.render_button_text = function (elem, lim this.render_tooltip(); } - elem.text(text); - elem.removeClass("text-warning"); - elem.closest(".input-group").find(".dropdown_list_reset_button").show(); + $elem.text(text); + $elem.removeClass("text-warning"); + $elem.closest(".input-group").find(".dropdown_list_reset_button").show(); }; // Override the DrodownListWidget `render` function. MultiSelectDropdownListWidget.prototype.render = function (value) { - const elem = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.widget_name)}_name`); + const $elem = $(`#${CSS.escape(this.container_id)} #${CSS.escape(this.widget_name)}_name`); if (!value || value === this.null_value) { - this.render_default_text(elem); + this.render_default_text($elem); return; } - this.render_button_text(elem, this.limit); + this.render_button_text($elem, this.limit); }; MultiSelectDropdownListWidget.prototype.dropdown_toggle_click_handler = function () { - const dropdown_toggle = $(`#${CSS.escape(this.container_id)} .dropdown-toggle`); - const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`); + const $dropdown_toggle = $(`#${CSS.escape(this.container_id)} .dropdown-toggle`); + const $search_input = $( + `#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`, + ); - dropdown_toggle.on("click", () => { + $dropdown_toggle.on("click", () => { this.reset_dropdown_items(); - search_input.val("").trigger("input"); + $search_input.val("").trigger("input"); }); }; @@ -372,12 +382,14 @@ MultiSelectDropdownListWidget.prototype.reset_dropdown_items = function () { // Override the DrodownListWidget `setup_dropdown_widget` function. MultiSelectDropdownListWidget.prototype.setup_dropdown_widget = function (data) { - const dropdown_list_body = $( + const $dropdown_list_body = $( `#${CSS.escape(this.container_id)} .dropdown-list-body`, ).expectOne(); - const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`); + const $search_input = $( + `#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`, + ); - ListWidget.create(dropdown_list_body, data, { + ListWidget.create($dropdown_list_body, data, { name: `${CSS.escape(this.widget_name)}_list`, modifier(item) { return render_dropdown_list({item}); @@ -386,51 +398,51 @@ MultiSelectDropdownListWidget.prototype.setup_dropdown_widget = function (data) selected_items: this.data_selected, }, filter: { - element: search_input, + $element: $search_input, predicate(item, value) { return item.name.toLowerCase().includes(value); }, }, - simplebar_container: $(`#${CSS.escape(this.container_id)} .dropdown-list-wrapper`), + $simplebar_container: $(`#${CSS.escape(this.container_id)} .dropdown-list-wrapper`), }); }; // Add the check mark to dropdown element passed. -MultiSelectDropdownListWidget.prototype.add_check_mark = function (element) { - const value = element.attr("data-value"); - const link_elem = element.find("a").expectOne(); - link_elem.prepend($("", {class: "fa fa-check"})); - element.addClass("checked"); +MultiSelectDropdownListWidget.prototype.add_check_mark = function ($element) { + const value = $element.attr("data-value"); + const $link_elem = $element.find("a").expectOne(); + $link_elem.prepend($("", {class: "fa fa-check"})); + $element.addClass("checked"); this.data_selected.push(value); }; // Remove the check mark from dropdown element. -MultiSelectDropdownListWidget.prototype.remove_check_mark = function (element) { - const icon = element.find("i").expectOne(); - const value = element.attr("data-value"); +MultiSelectDropdownListWidget.prototype.remove_check_mark = function ($element) { + const $icon = $element.find("i").expectOne(); + const value = $element.attr("data-value"); const index = this.data_selected.indexOf(value); if (index > -1) { - icon.remove(); - element.removeClass("checked"); + $icon.remove(); + $element.removeClass("checked"); this.data_selected.splice(index, 1); } }; // Render the tooltip once the text changes to `n` selected. MultiSelectDropdownListWidget.prototype.render_tooltip = function () { - const elem = $(`#${CSS.escape(this.container_id)}`); + const $elem = $(`#${CSS.escape(this.container_id)}`); const selected_items = this.data.filter((item) => this.checked_items.includes(item.value)); - tippy(elem[0], { + tippy($elem[0], { content: selected_items.map((item) => item.name).join(", "), placement: "top", }); }; MultiSelectDropdownListWidget.prototype.destroy_tooltip = function () { - const elem = $(`#${CSS.escape(this.container_id)}`); - const tippy_instance = elem[0]._tippy; + const $elem = $(`#${CSS.escape(this.container_id)}`); + const tippy_instance = $elem[0]._tippy; if (!tippy_instance) { return; } @@ -442,35 +454,37 @@ MultiSelectDropdownListWidget.prototype.dropdown_focus_events = function () { // Main keydown event handler which transfers the focus from one child element // to another. - const search_input = $(`#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`); - const dropdown_menu = $(`.${CSS.escape(this.widget_name)}_setting .dropdown-menu`); - const filter_button = $(`#${CSS.escape(this.container_id)} .multiselect_btn`); + const $search_input = $( + `#${CSS.escape(this.container_id)} .dropdown-search > input[type=text]`, + ); + const $dropdown_menu = $(`.${CSS.escape(this.widget_name)}_setting .dropdown-menu`); + const $filter_button = $(`#${CSS.escape(this.container_id)} .multiselect_btn`); const dropdown_elements = () => { - const dropdown_list_body = $( + const $dropdown_list_body = $( `#${CSS.escape(this.container_id)} .dropdown-list-body`, ).expectOne(); - return dropdown_list_body.children().find("a"); + return $dropdown_list_body.children().find("a"); }; - dropdown_menu.on("keydown", (e) => { - function trigger_element_focus(element) { + $dropdown_menu.on("keydown", (e) => { + function trigger_element_focus($element) { e.preventDefault(); e.stopPropagation(); - element.trigger("focus"); + $element.trigger("focus"); } switch (e.key) { case "ArrowDown": { switch (e.target) { case dropdown_elements().last()[0]: - trigger_element_focus(filter_button); + trigger_element_focus($filter_button); break; case $(`#${CSS.escape(this.container_id)} .multiselect_btn`)[0]: - trigger_element_focus(search_input); + trigger_element_focus($search_input); break; - case search_input[0]: + case $search_input[0]: trigger_element_focus(dropdown_elements().first()); break; } @@ -480,10 +494,10 @@ MultiSelectDropdownListWidget.prototype.dropdown_focus_events = function () { case "ArrowUp": { switch (e.target) { case dropdown_elements().first()[0]: - trigger_element_focus(search_input); + trigger_element_focus($search_input); break; - case search_input[0]: - trigger_element_focus(filter_button); + case $search_input[0]: + trigger_element_focus($filter_button); break; case $(`#${CSS.escape(this.container_id)} .multiselect_btn`)[0]: trigger_element_focus(dropdown_elements().last()); @@ -494,11 +508,11 @@ MultiSelectDropdownListWidget.prototype.dropdown_focus_events = function () { } case "Tab": { switch (e.target) { - case search_input[0]: + case $search_input[0]: trigger_element_focus(dropdown_elements().first()); break; - case filter_button[0]: - trigger_element_focus(search_input); + case $filter_button[0]: + trigger_element_focus($search_input); break; } @@ -510,20 +524,20 @@ MultiSelectDropdownListWidget.prototype.dropdown_focus_events = function () { // Override the `register_event_handlers` function. MultiSelectDropdownListWidget.prototype.register_event_handlers = function () { - const dropdown_list_body = $( + const $dropdown_list_body = $( `#${CSS.escape(this.container_id)} .dropdown-list-body`, ).expectOne(); - dropdown_list_body.on("click keypress", ".list_item", (e) => { + $dropdown_list_body.on("click keypress", ".list_item", (e) => { if (e.type === "keypress" && e.key !== "Enter") { return; } - const element = $(e.target.closest("li")); - if (element.hasClass("checked")) { - this.remove_check_mark(element); + const $element = $(e.target.closest("li")); + if ($element.hasClass("checked")) { + this.remove_check_mark($element); } else { - this.add_check_mark(element); + this.add_check_mark($element); } e.stopPropagation(); @@ -556,10 +570,10 @@ MultiSelectDropdownListWidget.prototype.register_event_handlers = function () { // the dropdown is closed. if (this.on_close) { e.stopPropagation(); - const setting_elem = $(e.currentTarget).closest( + const $setting_elem = $(e.currentTarget).closest( `.${CSS.escape(this.widget_name)}_setting`, ); - setting_elem.find(".dropdown-menu").dropdown("toggle"); + $setting_elem.find(".dropdown-menu").dropdown("toggle"); this.on_close(); } diff --git a/static/js/echo.js b/static/js/echo.js index fa09331937..3d2a8293fb 100644 --- a/static/js/echo.js +++ b/static/js/echo.js @@ -35,21 +35,21 @@ let waiting_for_ack = new Map(); // These retry spinner functions return true if and only if the // spinner already is in the requested state, which can be used to // avoid sending duplicate requests. -function show_retry_spinner(row) { - const retry_spinner = row.find(".refresh-failed-message"); +function show_retry_spinner($row) { + const $retry_spinner = $row.find(".refresh-failed-message"); - if (!retry_spinner.hasClass("rotating")) { - retry_spinner.toggleClass("rotating", true); + if (!$retry_spinner.hasClass("rotating")) { + $retry_spinner.toggleClass("rotating", true); return false; } return true; } -function hide_retry_spinner(row) { - const retry_spinner = row.find(".refresh-failed-message"); +function hide_retry_spinner($row) { + const $retry_spinner = $row.find(".refresh-failed-message"); - if (retry_spinner.hasClass("rotating")) { - retry_spinner.toggleClass("rotating", false); + if ($retry_spinner.hasClass("rotating")) { + $retry_spinner.toggleClass("rotating", false); return false; } return true; @@ -67,9 +67,9 @@ function failed_message_success(message_id) { ui.show_failed_message_success(message_id); } -function resend_message(message, row) { +function resend_message(message, $row) { message.content = message.raw_content; - if (show_retry_spinner(row)) { + if (show_retry_spinner($row)) { // retry already in in progress return; } @@ -84,7 +84,7 @@ function resend_message(message, row) { const message_id = data.id; const locally_echoed = true; - hide_retry_spinner(row); + hide_retry_spinner($row); compose.send_message_success(local_id, message_id, locally_echoed); @@ -95,7 +95,7 @@ function resend_message(message, row) { function on_error(response) { message_send_error(message.id, response); setTimeout(() => { - hide_retry_spinner(row); + hide_retry_spinner($row); }, 300); blueslip.log("Manual resend of message failed"); } @@ -470,8 +470,8 @@ export function initialize() { $("#main_div").on("click", selector, function (e) { e.stopPropagation(); popovers.hide_all(); - const row = $(this).closest(".message_row"); - const local_id = rows.local_echo_id(row); + const $row = $(this).closest(".message_row"); + const local_id = rows.local_echo_id($row); // Message should be waiting for ack and only have a local id, // otherwise send would not have failed const message = waiting_for_ack.get(local_id); @@ -482,7 +482,7 @@ export function initialize() { ); return; } - callback(message, row); + callback(message, $row); }); } diff --git a/static/js/emoji_picker.js b/static/js/emoji_picker.js index 77a03eeace..458bcafffd 100644 --- a/static/js/emoji_picker.js +++ b/static/js/emoji_picker.js @@ -29,7 +29,7 @@ const APPROX_WIDTH = 255; // implemented as the emoji_popover. export let complete_emoji_catalog = []; -let current_message_emoji_popover_elem; +let $current_message_emoji_popover_elem; let emoji_catalog_last_coordinates = { section: 0, index: 0, @@ -175,9 +175,9 @@ const generate_emoji_picker_content = function (id) { }); }; -function refill_section_head_offsets(popover) { +function refill_section_head_offsets($popover) { section_head_offsets = []; - popover.find(".emoji-popover-subheading").each(function () { + $popover.find(".emoji-popover-subheading").each(function () { section_head_offsets.push({ section: $(this).attr("data-section"), position_y: $(this).position().top, @@ -186,7 +186,7 @@ function refill_section_head_offsets(popover) { } export function reactions_popped() { - return current_message_emoji_popover_elem !== undefined; + return $current_message_emoji_popover_elem !== undefined; } export function hide_emoji_popover() { @@ -198,9 +198,9 @@ export function hide_emoji_popover() { $(".app, .header, .modal__overlay, #set_user_status_modal").css("pointer-events", "all"); } if (reactions_popped()) { - current_message_emoji_popover_elem.popover("destroy"); - current_message_emoji_popover_elem.removeClass("reaction_button_visible"); - current_message_emoji_popover_elem = undefined; + $current_message_emoji_popover_elem.popover("destroy"); + $current_message_emoji_popover_elem.removeClass("reaction_button_visible"); + $current_message_emoji_popover_elem = undefined; } } @@ -210,16 +210,16 @@ function get_selected_emoji() { function get_rendered_emoji(section, index) { const emoji_id = get_emoji_id(section, index); - const emoji = $(`.emoji-popover-emoji[data-emoji-id='${CSS.escape(emoji_id)}']`); - if (emoji.length > 0) { - return emoji; + const $emoji = $(`.emoji-popover-emoji[data-emoji-id='${CSS.escape(emoji_id)}']`); + if ($emoji.length > 0) { + return $emoji; } return undefined; } function filter_emojis() { - const elt = $(".emoji-popover-filter").expectOne(); - const query = elt.val().trim().toLowerCase(); + const $elt = $(".emoji-popover-filter").expectOne(); + const query = $elt.val().trim().toLowerCase(); const message_id = $(".emoji-search-results-container").data("message-id"); const search_results_visible = $(".emoji-search-results-container").is(":visible"); if (query !== "") { @@ -288,12 +288,12 @@ function is_status_emoji(emoji) { function process_enter_while_filtering(e) { if (e.key === "Enter") { e.preventDefault(); - const first_emoji = get_rendered_emoji(0, 0); - if (first_emoji) { - if (is_composition(first_emoji)) { - first_emoji.trigger("click"); + const $first_emoji = get_rendered_emoji(0, 0); + if ($first_emoji) { + if (is_composition($first_emoji)) { + $first_emoji.trigger("click"); } else { - toggle_reaction(first_emoji.attr("data-emoji-name"), e); + toggle_reaction($first_emoji.attr("data-emoji-name"), e); } } } @@ -345,20 +345,20 @@ function update_emoji_showcase($focused_emoji) { } function maybe_change_focused_emoji($emoji_map, next_section, next_index, preserve_scroll) { - const next_emoji = get_rendered_emoji(next_section, next_index); - if (next_emoji) { + const $next_emoji = get_rendered_emoji(next_section, next_index); + if ($next_emoji) { current_section = next_section; current_index = next_index; if (!preserve_scroll) { - next_emoji.trigger("focus"); + $next_emoji.trigger("focus"); } else { const start = ui.get_scroll_element($emoji_map).scrollTop(); - next_emoji.trigger("focus"); + $next_emoji.trigger("focus"); if (ui.get_scroll_element($emoji_map).scrollTop() !== start) { ui.get_scroll_element($emoji_map).scrollTop(start); } } - update_emoji_showcase(next_emoji); + update_emoji_showcase($next_emoji); return true; } return false; @@ -449,7 +449,7 @@ export function navigate(event_name, e) { const $popover = $(".emoji-popover").expectOne(); const $emoji_map = $popover.find(".emoji-popover-emoji-map").expectOne(); - const selected_emoji = get_rendered_emoji(current_section, current_index); + const $selected_emoji = get_rendered_emoji(current_section, current_index); const is_filter_focused = $(".emoji-popover-filter").is(":focus"); // special cases if (is_filter_focused) { @@ -457,16 +457,16 @@ export function navigate(event_name, e) { const filter_text = $(".emoji-popover-filter").val(); const is_cursor_at_end = $(".emoji-popover-filter").caret() === filter_text.length; if (event_name === "down_arrow" || (is_cursor_at_end && event_name === "right_arrow")) { - selected_emoji.trigger("focus"); + $selected_emoji.trigger("focus"); if (current_section === 0 && current_index < 6) { ui.get_scroll_element($emoji_map).scrollTop(0); } - update_emoji_showcase(selected_emoji); + update_emoji_showcase($selected_emoji); return true; } if (event_name === "tab") { - selected_emoji.trigger("focus"); - update_emoji_showcase(selected_emoji); + $selected_emoji.trigger("focus"); + update_emoji_showcase($selected_emoji); return true; } return false; @@ -474,7 +474,7 @@ export function navigate(event_name, e) { (current_section === 0 && current_index < 6 && event_name === "up_arrow") || (current_section === 0 && current_index === 0 && event_name === "left_arrow") ) { - if (selected_emoji) { + if ($selected_emoji) { // In this case, we're move up into the reaction // filter. Here, we override the default browser // behavior, which in Firefox is good (preserving @@ -531,8 +531,8 @@ function process_keypress(e) { e.preventDefault(); e.stopPropagation(); - const emoji_filter = $(".emoji-popover-filter"); - const old_query = emoji_filter.val(); + const $emoji_filter = $(".emoji-popover-filter"); + const old_query = $emoji_filter.val(); let new_query = ""; if (pressed_key === 8) { @@ -544,16 +544,16 @@ function process_keypress(e) { new_query = old_query + key_str; } - emoji_filter.val(new_query); + $emoji_filter.val(new_query); change_focus_to_filter(); filter_emojis(); } } -export function emoji_select_tab(elt) { - const scrolltop = elt.scrollTop(); - const scrollheight = elt.prop("scrollHeight"); - const elt_height = elt.height(); +export function emoji_select_tab($elt) { + const scrolltop = $elt.scrollTop(); + const scrollheight = $elt.prop("scrollHeight"); + const elt_height = $elt.height(); let currently_selected = ""; for (const o of section_head_offsets) { if (scrolltop + elt_height / 2 >= o.position_y) { @@ -577,8 +577,8 @@ export function emoji_select_tab(elt) { } } -function register_popover_events(popover) { - const $emoji_map = popover.find(".emoji-popover-emoji-map"); +function register_popover_events($popover) { + const $emoji_map = $popover.find(".emoji-popover-emoji-map"); ui.get_scroll_element($emoji_map).on("scroll", () => { emoji_select_tab(ui.get_scroll_element($emoji_map)); @@ -598,11 +598,11 @@ function register_popover_events(popover) { }); } -export function build_emoji_popover(elt, id) { +export function build_emoji_popover($elt, id) { const template_args = { class: "emoji-info-popover", }; - let placement = popovers.compute_placement(elt, APPROX_HEIGHT, APPROX_WIDTH, true); + let placement = popovers.compute_placement($elt, APPROX_HEIGHT, APPROX_WIDTH, true); if (placement === "viewport_center") { // For legacy reasons `compute_placement` actually can @@ -619,7 +619,7 @@ export function build_emoji_popover(elt, id) { template = "
    " + template + "
    "; } - elt.popover({ + $elt.popover({ // temporary patch for handling popover placement of `viewport_center` placement, fix_positions: true, @@ -629,11 +629,11 @@ export function build_emoji_popover(elt, id) { html: true, trigger: "manual", }); - elt.popover("show"); + $elt.popover("show"); - const popover = elt.data("popover").$tip; - popover.find(".emoji-popover-filter").trigger("focus"); - current_message_emoji_popover_elem = elt; + const $popover = $elt.data("popover").$tip; + $popover.find(".emoji-popover-filter").trigger("focus"); + $current_message_emoji_popover_elem = $elt; emoji_catalog_last_coordinates = { section: 0, @@ -641,31 +641,31 @@ export function build_emoji_popover(elt, id) { }; show_emoji_catalog(); - elt.ready(() => refill_section_head_offsets(popover)); - register_popover_events(popover); + $elt.ready(() => refill_section_head_offsets($popover)); + register_popover_events($popover); } export function toggle_emoji_popover(element, id) { - const last_popover_elem = current_message_emoji_popover_elem; + const $last_popover_elem = $current_message_emoji_popover_elem; popovers.hide_all(); - if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) { + if ($last_popover_elem !== undefined && $last_popover_elem.get()[0] === element) { // We want it to be the case that a user can dismiss a popover // by clicking on the same element that caused the popover. return; } $(element).closest(".message_row").toggleClass("has_popover has_emoji_popover"); - const elt = $(element); + const $elt = $(element); if (id !== undefined) { message_lists.current.select_id(id); } if (user_status_ui.user_status_picker_open()) { - build_emoji_popover(elt, id, true); - } else if (elt.data("popover") === undefined) { + build_emoji_popover($elt, id, true); + } else if ($elt.data("popover") === undefined) { // Keep the element over which the popover is based off visible. - elt.addClass("reaction_button_visible"); - build_emoji_popover(elt, id); + $elt.addClass("reaction_button_visible"); + build_emoji_popover($elt, id); } reset_emoji_showcase(); } @@ -686,13 +686,13 @@ export function register_click_handlers() { // The following check will return false if emoji was not selected in // message edit form. if (edit_message_id !== null) { - const edit_message_textarea = $( + const $edit_message_textarea = $( `#edit_form_${CSS.escape(edit_message_id)} .message_edit_content`, ); // Assign null to edit_message_id so that the selection of emoji in new // message composition form works correctly. edit_message_id = null; - compose_ui.insert_syntax_and_focus(emoji_text, edit_message_textarea); + compose_ui.insert_syntax_and_focus(emoji_text, $edit_message_textarea); } else { compose_ui.insert_syntax_and_focus(emoji_text); } diff --git a/static/js/flatpickr.js b/static/js/flatpickr.js index 4a3bc1f1d8..1fd27f7f62 100644 --- a/static/js/flatpickr.js +++ b/static/js/flatpickr.js @@ -10,9 +10,9 @@ function is_numeric_key(key) { } export function show_flatpickr(element, callback, default_timestamp, options = {}) { - const flatpickr_input = $(""); + const $flatpickr_input = $(""); - const instance = flatpickr_input.flatpickr({ + const instance = $flatpickr_input.flatpickr({ mode: "single", enableTime: true, clickOpens: false, @@ -59,9 +59,9 @@ export function show_flatpickr(element, callback, default_timestamp, options = { ...options, }); - const container = $($(instance.innerContainer).parent()); + const $container = $($(instance.innerContainer).parent()); - container.on("keydown", (e) => { + $container.on("keydown", (e) => { if (is_numeric_key(e.key)) { // Let users type numeric values return true; @@ -83,7 +83,7 @@ export function show_flatpickr(element, callback, default_timestamp, options = { return true; // use flatpickr default implementation } $(element).toggleClass("has_popover"); - container.find(".flatpickr-confirm").trigger("click"); + $container.find(".flatpickr-confirm").trigger("click"); } if (hotkey.name === "escape") { @@ -106,8 +106,8 @@ export function show_flatpickr(element, callback, default_timestamp, options = { return true; }); - container.on("click", ".flatpickr-confirm", () => { - callback(flatpickr_input.val()); + $container.on("click", ".flatpickr-confirm", () => { + callback($flatpickr_input.val()); instance.close(); instance.destroy(); }); diff --git a/static/js/floating_recipient_bar.js b/static/js/floating_recipient_bar.js index 261a0d7ce2..e6f403895e 100644 --- a/static/js/floating_recipient_bar.js +++ b/static/js/floating_recipient_bar.js @@ -8,28 +8,28 @@ import * as timerender from "./timerender"; let is_floating_recipient_bar_showing = false; -function top_offset(elem) { +function top_offset($elem) { return ( - elem.offset().top - + $elem.offset().top - $("#message_view_header").safeOuterHeight() - $("#navbar_alerts_wrapper").height() ); } -export function first_visible_message(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 // displayed, which will always be the first messages whose bottom // overlaps the floating recipient bar's space (since you ). - const messages = bar.children(".message_row"); - const frb = $("#floating_recipient_bar"); - const frb_top = top_offset(frb); - const frb_bottom = frb_top + frb.safeOuterHeight(); - let result; + const $messages = $bar.children(".message_row"); + const $frb = $("#floating_recipient_bar"); + const frb_top = top_offset($frb); + const frb_bottom = frb_top + $frb.safeOuterHeight(); + let $result; - for (const message_element of messages) { + for (const message_element of $messages) { // The details of this comparison function are sensitive, since we're // balancing between three possible bugs: // @@ -56,40 +56,40 @@ export function first_visible_message(bar) { // message_viewport.scrollTop() to set precise scrolling // positions determines the value for date_bar_height_offset. - let message = $(message_element); - const message_bottom = top_offset(message) + message.safeOuterHeight(); + let $message = $(message_element); + const message_bottom = top_offset($message) + $message.safeOuterHeight(); const date_bar_height_offset = 10; if (message_bottom > frb_top) { - result = message; + $result = $message; } // Important: This will break if we ever have things that are // not message rows inside a recipient_row block. - message = message.next(".message_row"); + $message = $message.next(".message_row"); if ( - message.length > 0 && - result && + $message.length > 0 && + $result && // Before returning a result, we check whether the next // message's top is actually below the bottom of the // floating recipient bar; this is different from the // bottom of our current message because there may be a // between-messages date separator row in between. - top_offset(message) < frb_bottom - date_bar_height_offset + top_offset($message) < frb_bottom - date_bar_height_offset ) { - result = message; + $result = $message; } - if (result) { - return result; + if ($result) { + return $result; } } // If none of the messages are visible, just take the last message. - return messages.last(); + return $messages.last(); } -export function get_date(elem) { - const message_row = first_visible_message(elem); +export function get_date($elem) { + const message_row = first_visible_message($elem); if (!message_row || !message_row.length) { return undefined; @@ -123,39 +123,39 @@ export function relevant_recipient_bars() { // 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 = candidate_recipient_bar(); + let $first_elem = candidate_recipient_bar(); - if (!first_elem) { - first_elem = $(".focused_table").find(".recipient_row").first(); + if (!$first_elem) { + $first_elem = $(".focused_table").find(".recipient_row").first(); } - if (first_elem.length === 0) { + if ($first_elem.length === 0) { return []; } - elems.push(first_elem); + elems.push($first_elem); const max_offset = top_offset($("#compose")); - let header_height = first_elem.find(".message_header").safeOuterHeight(); + let header_height = $first_elem.find(".message_header").safeOuterHeight(); // It's okay to overestimate header_height a bit, as we don't // really need an FRB for a section that barely shows. header_height += 10; - function next(elem) { - elem = elem.next(); - while (elem.length !== 0 && !elem.hasClass("recipient_row")) { - elem = elem.next(); + function next($elem) { + $elem = $elem.next(); + while ($elem.length !== 0 && !$elem.hasClass("recipient_row")) { + $elem = $elem.next(); } - return elem; + return $elem; } // Now start the forward traversal of recipient bars. // We'll stop when we go below the fold. - let elem = next(first_elem); + let $elem = next($first_elem); - while (elem.length) { - if (top_offset(elem) < header_height) { + while ($elem.length) { + if (top_offset($elem) < header_height) { // If we are close to the top, then the prior // elements we found are no longer relevant, // because either the selected item we started @@ -165,15 +165,15 @@ export function relevant_recipient_bars() { elems = []; } - if (top_offset(elem) > max_offset) { + if (top_offset($elem) > max_offset) { // Out of sight, out of mind! // (The element is below the fold, so we stop the // traversal.) break; } - elems.push(elem); - elem = next(elem); + elems.push($elem); + $elem = next($elem); } if (elems.length === 0) { @@ -181,25 +181,25 @@ export function relevant_recipient_bars() { return []; } - const items = elems.map((elem, i) => { + const items = elems.map(($elem, i) => { let date_html; let need_frb; if (i === 0) { - date_html = get_date(elem); - need_frb = top_offset(elem) < 0; + date_html = get_date($elem); + need_frb = top_offset($elem) < 0; } else { - date_html = elem.find(".recipient_row_date").html(); + date_html = $elem.find(".recipient_row_date").html(); need_frb = false; } const date_text = $(date_html).text(); // Add title here to facilitate troubleshooting. - const title = elem.find(".message_label_clickable").last().attr("title"); + const title = $elem.find(".message_label_clickable").last().attr("title"); const item = { - elem, + $elem, title, date_html, date_text, @@ -236,25 +236,25 @@ export function candidate_recipient_bar() { // bars that is still above the fold. // Start with the pointer's current location. - const selected_row = message_lists.current.selected_row(); + const $selected_row = message_lists.current.selected_row(); - if (selected_row === undefined || selected_row.length === 0) { + if ($selected_row === undefined || $selected_row.length === 0) { return undefined; } - let candidate = rows.get_message_recipient_row(selected_row); - if (candidate === undefined) { + let $candidate = rows.get_message_recipient_row($selected_row); + if ($candidate === undefined) { return undefined; } - while (candidate.length) { - if (candidate.hasClass("recipient_row") && top_offset(candidate) < 0) { - return candidate; + while ($candidate.length) { + if ($candidate.hasClass("recipient_row") && top_offset($candidate) < 0) { + return $candidate; } // We cannot use .prev(".recipient_row") here, because that // returns nothing if the previous element is not a recipient // row, rather than finding the first recipient_row. - candidate = candidate.prev(); + $candidate = $candidate.prev(); } return undefined; @@ -267,31 +267,31 @@ function show_floating_recipient_bar() { } } -let old_source; +let $old_source; function replace_floating_recipient_bar(source_info) { - const source_recipient_bar = source_info.elem; + const $source_recipient_bar = source_info.$elem; - let new_label; - let other_label; - let header; + let $new_label; + let $other_label; + let $header; - if (source_recipient_bar !== old_source) { - if (source_recipient_bar.children(".message_header_stream").length !== 0) { - new_label = $("#current_label_stream"); - other_label = $("#current_label_private_message"); - header = source_recipient_bar.children(".message_header_stream"); + if ($source_recipient_bar !== $old_source) { + if ($source_recipient_bar.children(".message_header_stream").length !== 0) { + $new_label = $("#current_label_stream"); + $other_label = $("#current_label_private_message"); + $header = $source_recipient_bar.children(".message_header_stream"); } else { - new_label = $("#current_label_private_message"); - other_label = $("#current_label_stream"); - header = source_recipient_bar.children(".message_header_private_message"); + $new_label = $("#current_label_private_message"); + $other_label = $("#current_label_stream"); + $header = $source_recipient_bar.children(".message_header_private_message"); } - new_label.find(".message_header").replaceWith(header.clone()); - other_label.css("display", "none"); - new_label.css("display", "block"); - new_label.attr("zid", rows.id(rows.first_message_in_group(source_recipient_bar))); + $new_label.find(".message_header").replaceWith($header.clone()); + $other_label.css("display", "none"); + $new_label.css("display", "block"); + $new_label.attr("zid", rows.id(rows.first_message_in_group($source_recipient_bar))); - new_label.toggleClass("message-fade", source_recipient_bar.hasClass("message-fade")); - old_source = source_recipient_bar; + $new_label.toggleClass("message-fade", $source_recipient_bar.hasClass("message-fade")); + $old_source = $source_recipient_bar; } const rendered_date = source_info.date_html || ""; @@ -310,7 +310,7 @@ export function hide() { export function de_clutter_dates(items) { for (const item of items) { - item.elem.find(".recipient_row_date").toggle(item.show_date); + item.$elem.find(".recipient_row_date").toggle(item.show_date); } } diff --git a/static/js/gear_menu.js b/static/js/gear_menu.js index 464fdc8bed..d1558f8979 100644 --- a/static/js/gear_menu.js +++ b/static/js/gear_menu.js @@ -90,11 +90,11 @@ the selector and then calls browser_history.go_to_location. const scroll_positions = new Map(); export function update_org_settings_menu_item() { - const item = $(".admin-menu-item").expectOne(); + const $item = $(".admin-menu-item").expectOne(); if (page_params.is_admin) { - item.find("span").text($t({defaultMessage: "Manage organization"})); + $item.find("span").text($t({defaultMessage: "Manage organization"})); } else { - item.find("span").text($t({defaultMessage: "Organization settings"})); + $item.find("span").text($t({defaultMessage: "Organization settings"})); } } diff --git a/static/js/giphy.js b/static/js/giphy.js index 796a560c8d..b7b1479ee5 100644 --- a/static/js/giphy.js +++ b/static/js/giphy.js @@ -15,13 +15,13 @@ import * as ui_util from "./ui_util"; let giphy_fetch; let search_term = ""; let gifs_grid; -let active_popover_element; +let $active_popover_element; // Only used if popover called from edit message, otherwise it is `undefined`. let edit_message_id; export function is_popped_from_edit_messsage() { - return active_popover_element && edit_message_id !== undefined; + return $active_popover_element && edit_message_id !== undefined; } export function focus_current_edit_message() { @@ -102,16 +102,16 @@ async function renderGIPHYGrid(targetEl) { // GIF; nice in principle but too distracting. hideAttribution: true, onGifClick: (props) => { - let textarea = $("#compose-textarea"); + let $textarea = $("#compose-textarea"); if (edit_message_id !== undefined) { - textarea = $( + $textarea = $( `#edit_form_${CSS.escape(edit_message_id)} .message_edit_content`, ); } compose_ui.insert_syntax_and_focus( `[](${props.images.downsized_medium.url})`, - textarea, + $textarea, ); hide_giphy_popover(); }, @@ -146,11 +146,11 @@ async function update_grid_with_search_term() { return; } - const search_elem = $("#giphy-search-query"); + const $search_elem = $("#giphy-search-query"); // GIPHY popover may have been hidden by the // time this function is called. - if (search_elem.length) { - search_term = search_elem[0].value; + if ($search_elem.length) { + search_term = $search_elem[0].value; gifs_grid.remove(); gifs_grid = await renderGIPHYGrid($("#giphy_grid_in_popover .giphy-content")[0]); return; @@ -162,15 +162,15 @@ async function update_grid_with_search_term() { export function hide_giphy_popover() { // Returns `true` if the popover was open. - if (active_popover_element) { + if ($active_popover_element) { // We need to destroy the popover because when // we hide it, bootstrap popover // library removes `giphy-content` element // as part of cleaning up everything inside // `popover-content`, so we need to reinitialize // the popover by destroying it. - active_popover_element.popover("destroy"); - active_popover_element = undefined; + $active_popover_element.popover("destroy"); + $active_popover_element = undefined; edit_message_id = undefined; gifs_grid = undefined; return true; @@ -188,7 +188,7 @@ function get_popover_content() { function get_popover_placement() { let placement = popovers.compute_placement( - active_popover_element, + $active_popover_element, APPROX_HEIGHT, APPROX_WIDTH, true, @@ -221,7 +221,7 @@ export function initialize() { e.stopPropagation(); const compose_click_target = compose_ui.get_compose_click_target(e); - if (active_popover_element && active_popover_element.get()[0] === compose_click_target) { + if ($active_popover_element && $active_popover_element.get()[0] === compose_click_target) { // Hide giphy popover if already active. hide_giphy_popover(); return; @@ -237,8 +237,8 @@ export function initialize() { edit_message_id = undefined; } - active_popover_element = $elt; - active_popover_element.popover({ + $active_popover_element = $elt; + $active_popover_element.popover({ animation: true, placement: get_popover_placement(), html: true, @@ -250,7 +250,7 @@ export function initialize() { content: " ", }); - active_popover_element.popover("show"); + $active_popover_element.popover("show"); // It takes about 1s for the popover to show; So, // we wait for popover to display before rendering GIFs // in it, otherwise popover is rendered with empty content. diff --git a/static/js/hotkey.js b/static/js/hotkey.js index 420b332b65..74b9228a75 100644 --- a/static/js/hotkey.js +++ b/static/js/hotkey.js @@ -476,20 +476,20 @@ export function process_tab_key() { // TODO: See if browsers like Safari can now handle tabbing correctly // without our intervention. - let message_edit_form; + let $message_edit_form; - const focused_message_edit_content = $(".message_edit_content:focus"); - if (focused_message_edit_content.length > 0) { - message_edit_form = focused_message_edit_content.closest(".message_edit_form"); + const $focused_message_edit_content = $(".message_edit_content:focus"); + if ($focused_message_edit_content.length > 0) { + $message_edit_form = $focused_message_edit_content.closest(".message_edit_form"); // Open message edit forms either have a save button or a close button, but not both. - message_edit_form.find(".message_edit_save,.message_edit_close").trigger("focus"); + $message_edit_form.find(".message_edit_save,.message_edit_close").trigger("focus"); return true; } - const focused_message_edit_save = $(".message_edit_save:focus"); - if (focused_message_edit_save.length > 0) { - message_edit_form = focused_message_edit_save.closest(".message_edit_form"); - message_edit_form.find(".message_edit_cancel").trigger("focus"); + const $focused_message_edit_save = $(".message_edit_save:focus"); + if ($focused_message_edit_save.length > 0) { + $message_edit_form = $focused_message_edit_save.closest(".message_edit_form"); + $message_edit_form.find(".message_edit_cancel").trigger("focus"); return true; } @@ -519,9 +519,9 @@ export function process_shift_tab_key() { } // Shift-Tabbing from the edit message save button takes you to the content. - const focused_message_edit_save = $(".message_edit_save:focus"); - if (focused_message_edit_save.length > 0) { - focused_message_edit_save + const $focused_message_edit_save = $(".message_edit_save:focus"); + if ($focused_message_edit_save.length > 0) { + $focused_message_edit_save .closest(".message_edit_form") .find(".message_edit_content") .trigger("focus"); @@ -925,8 +925,8 @@ export function process_hotkey(e, hotkey) { compose_actions.quote_and_reply({trigger: "hotkey"}); return true; case "edit_message": { - const row = message_lists.current.get_row(msg.id); - message_edit.start(row); + const $row = message_lists.current.get_row(msg.id); + message_edit.start($row); return true; } } diff --git a/static/js/hotspots.js b/static/js/hotspots.js index 002d5dab3d..5f01383739 100644 --- a/static/js/hotspots.js +++ b/static/js/hotspots.js @@ -69,30 +69,30 @@ export function post_hotspot_as_read(hotspot_name) { } function place_icon(hotspot) { - const element = $(hotspot.location.element); - const icon = $(`#hotspot_${CSS.escape(hotspot.name)}_icon`); + const $element = $(hotspot.location.element); + const $icon = $(`#hotspot_${CSS.escape(hotspot.name)}_icon`); if ( - element.length === 0 || - element.css("display") === "none" || - !element.is(":visible") || - element.is(":hidden") + $element.length === 0 || + $element.css("display") === "none" || + !$element.is(":visible") || + $element.is(":hidden") ) { - icon.css("display", "none"); + $icon.css("display", "none"); return false; } const offset = { - top: element.outerHeight() * hotspot.location.offset_y, - left: element.outerWidth() * hotspot.location.offset_x, + top: $element.outerHeight() * hotspot.location.offset_y, + left: $element.outerWidth() * hotspot.location.offset_x, }; - const client_rect = element.get(0).getBoundingClientRect(); + const client_rect = $element.get(0).getBoundingClientRect(); const placement = { top: client_rect.top + offset.top, left: client_rect.left + offset.left, }; - icon.css("display", "block"); - icon.css(placement); + $icon.css("display", "block"); + $icon.css(placement); return true; } diff --git a/static/js/info_overlay.js b/static/js/info_overlay.js index 8b16fb38bb..5889045ffb 100644 --- a/static/js/info_overlay.js +++ b/static/js/info_overlay.js @@ -189,19 +189,19 @@ export function set_up_toggler() { }; toggler = components.toggle(opts); - const elem = toggler.get(); - elem.addClass("large allow-overflow"); + const $elem = toggler.get(); + $elem.addClass("large allow-overflow"); const modals = opts.values.map((item) => { const key = item.key; // e.g. message-formatting - const modal = $(`#${CSS.escape(key)}`).find(".modal-body"); - return modal; + const $modal = $(`#${CSS.escape(key)}`).find(".modal-body"); + return $modal; }); - for (const modal of modals) { - ui.get_scroll_element(modal).prop("tabindex", 0); + for (const $modal of modals) { + ui.get_scroll_element($modal).prop("tabindex", 0); keydown_util.handle({ - elem: modal, + $elem: $modal, handlers: { ArrowLeft: toggler.maybe_go_left, ArrowRight: toggler.maybe_go_right, @@ -209,7 +209,7 @@ export function set_up_toggler() { }); } - $(".informational-overlays .overlay-tabs").append(elem); + $(".informational-overlays .overlay-tabs").append($elem); $("#go-to-default-view-hotkey-help").toggleClass( "notdisplayed", @@ -224,12 +224,12 @@ export function show(target) { set_up_toggler(); } - const overlay = $(".informational-overlays"); + const $overlay = $(".informational-overlays"); - if (!overlay.hasClass("show")) { + if (!$overlay.hasClass("show")) { overlays.open_overlay({ name: "informationalOverlays", - overlay, + $overlay, on_close() { browser_history.exit_overlay(); }, diff --git a/static/js/input_pill.js b/static/js/input_pill.js index 96f5cedf67..ccd480f0d2 100644 --- a/static/js/input_pill.js +++ b/static/js/input_pill.js @@ -14,7 +14,7 @@ export function random_id() { } export function create(opts) { - if (!opts.container) { + if (!opts.$container) { blueslip.error("Pill needs container."); return undefined; } @@ -34,8 +34,8 @@ export function create(opts) { const store = { pills: [], pill_config: opts.pill_config, - $parent: opts.container, - $input: opts.container.find(".input").expectOne(), + $parent: opts.$container, + $input: opts.$container.find(".input").expectOne(), create_item_from_text: opts.create_item_from_text, get_text_from_item: opts.get_text_from_item, }; diff --git a/static/js/invite.js b/static/js/invite.js index 88339d4090..bb81eaf474 100644 --- a/static/js/invite.js +++ b/static/js/invite.js @@ -71,9 +71,9 @@ function beforeSend() { } function submit_invitation_form() { - const invite_status = $("#invite_status"); - const invitee_emails = $("#invitee_emails"); - const invitee_emails_group = invitee_emails.closest(".control-group"); + const $invite_status = $("#invite_status"); + const $invitee_emails = $("#invitee_emails"); + const $invitee_emails_group = $invitee_emails.closest(".control-group"); const data = get_common_invitation_data(); data.invitee_emails = $("#invitee_emails").val(); @@ -84,10 +84,10 @@ function submit_invitation_form() { success() { ui_report.success( $t_html({defaultMessage: "User(s) invited successfully."}), - invite_status, + $invite_status, ); - invitee_emails_group.removeClass("warning"); - invitee_emails.val(""); + $invitee_emails_group.removeClass("warning"); + $invitee_emails.val(""); if (page_params.development_environment) { const rendered_email_msg = render_settings_dev_env_email_access(); @@ -98,7 +98,7 @@ function submit_invitation_form() { const arr = JSON.parse(xhr.responseText); if (arr.errors === undefined) { // There was a fatal error, no partial processing occurred. - ui_report.error("", xhr, invite_status); + ui_report.error("", xhr, $invite_status); } else { // Some users were not invited. const invitee_emails_errored = []; @@ -122,11 +122,11 @@ function submit_invitation_form() { has_billing_access: page_params.is_owner || page_params.is_billing_admin, daily_limit_reached: arr.daily_limit_reached, }); - ui_report.message(error_response, invite_status, "alert-warning"); - invitee_emails_group.addClass("warning"); + ui_report.message(error_response, $invite_status, "alert-warning"); + $invitee_emails_group.addClass("warning"); if (arr.sent_invitations) { - invitee_emails.val(invitee_emails_errored.join("\n")); + $invitee_emails.val(invitee_emails_errored.join("\n")); } } }, @@ -140,7 +140,7 @@ function submit_invitation_form() { } function generate_multiuse_invite() { - const invite_status = $("#multiuse_invite_status"); + const $invite_status = $("#multiuse_invite_status"); const data = get_common_invitation_data(); channel.post({ url: "/json/invites/multiuse", @@ -148,11 +148,11 @@ function generate_multiuse_invite() { beforeSend, success(data) { const copy_link_html = copy_invite_link(data); - ui_report.success(copy_link_html, invite_status); + ui_report.success(copy_link_html, $invite_status); new ClipboardJS("#copy_generated_invite_link"); }, error(xhr) { - ui_report.error("", xhr, invite_status); + ui_report.error("", xhr, $invite_status); }, complete() { $("#submit-invitation").text($t({defaultMessage: "Generate invite link"})); @@ -187,7 +187,7 @@ export function launch() { overlays.open_overlay({ name: "invite", - overlay: $("#invite-user"), + $overlay: $("#invite-user"), on_close() { browser_history.exit_overlay(); }, diff --git a/static/js/keydown_util.ts b/static/js/keydown_util.ts index 0cb2419513..67d4bba70f 100644 --- a/static/js/keydown_util.ts +++ b/static/js/keydown_util.ts @@ -8,12 +8,12 @@ export const vim_up = "k"; export const vim_right = "l"; export function handle(opts: { - elem: JQuery; + $elem: JQuery; handlers: { [handler: string]: (() => boolean) | undefined; }; }): void { - opts.elem.on("keydown", (e) => { + opts.$elem.on("keydown", (e) => { if (e.altKey || e.ctrlKey || e.shiftKey) { return; } diff --git a/static/js/lightbox.js b/static/js/lightbox.js index 2c4c503d1e..d3ceeb1d3c 100644 --- a/static/js/lightbox.js +++ b/static/js/lightbox.js @@ -183,12 +183,12 @@ export function render_lightbox_list_images(preview_source) { const src = img.getAttribute("src"); const className = preview_source === src ? "image selected" : "image"; - const node = $("
    ", { + const $node = $("
    ", { class: className, "data-src": src, }).css({backgroundImage: "url(" + src + ")"}); - $image_list.append(node); + $image_list.append($node); // We parse the data for each image to show in the list, // while we still have its original DOM element handy, so @@ -205,10 +205,10 @@ function display_image(payload) { $(".player-container").hide(); $(".image-preview, .image-actions, .image-description, .download, .lightbox-zoom-reset").show(); - const img_container = $("#lightbox_overlay .image-preview > .zoom-element"); + const $img_container = $("#lightbox_overlay .image-preview > .zoom-element"); const img = new Image(); img.src = payload.source; - img_container.html(img).show(); + $img_container.html(img).show(); $(".image-description .title") .text(payload.title || "N/A") @@ -244,16 +244,16 @@ function display_video(payload) { break; } - const iframe = $(""); - iframe.attr( + const $iframe = $(""); + $iframe.attr( "sandbox", "allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts", ); - iframe.attr("src", source); - iframe.attr("frameborder", 0); - iframe.attr("allowfullscreen", true); + $iframe.attr("src", source); + $iframe.attr("frameborder", 0); + $iframe.attr("allowfullscreen", true); - $("#lightbox_overlay .player-container").html(iframe).show(); + $("#lightbox_overlay .player-container").html($iframe).show(); $(".image-actions .open").attr("href", payload.url); } @@ -303,7 +303,7 @@ export function build_open_image_function(on_close) { overlays.open_overlay({ name: "lightbox", - overlay: $("#lightbox_overlay"), + $overlay: $("#lightbox_overlay"), on_close, }); @@ -359,11 +359,11 @@ export function show_from_selected_message() { // retrieve the metadata from the DOM and store into the asset_map. export function parse_image_data(image) { const $image = $(image); - const $preview_src = $image.attr("src"); + const preview_src = $image.attr("src"); - if (asset_map.has($preview_src)) { + if (asset_map.has(preview_src)) { // check if image's data is already present in asset_map. - return asset_map.get($preview_src); + return asset_map.get(preview_src); } // if wrapped in the .youtube-video class, it will be length = 1, and therefore @@ -376,24 +376,24 @@ export function parse_image_data(image) { const is_compose_preview_image = $image.closest("#compose .preview_content").length === 1; const $parent = $image.parent(); - let $type; - let $source; - const $url = $parent.attr("href"); + let type; + let source; + const url = $parent.attr("href"); if (is_youtube_video) { - $type = "youtube-video"; - $source = $parent.attr("data-id"); + type = "youtube-video"; + source = $parent.attr("data-id"); } else if (is_vimeo_video) { - $type = "vimeo-video"; - $source = $parent.attr("data-id"); + type = "vimeo-video"; + source = $parent.attr("data-id"); } else if (is_embed_video) { - $type = "embed-video"; - $source = $parent.attr("data-id"); + type = "embed-video"; + source = $parent.attr("data-id"); } else { - $type = "image"; + type = "image"; if ($image.attr("data-src-fullsize")) { - $source = $image.attr("data-src-fullsize"); + source = $image.attr("data-src-fullsize"); } else { - $source = $preview_src; + source = preview_src; } } let sender_full_name; @@ -412,13 +412,13 @@ export function parse_image_data(image) { const payload = { user: sender_full_name, title: $parent.attr("title"), - type: $type, - preview: $preview_src, - source: $source, - url: $url, + type, + preview: preview_src, + source, + url, }; - asset_map.set($preview_src, payload); + asset_map.set(preview_src, payload); return payload; } diff --git a/static/js/list_cursor.js b/static/js/list_cursor.js index b2bc7d6632..555a8c6d32 100644 --- a/static/js/list_cursor.js +++ b/static/js/list_cursor.js @@ -49,29 +49,29 @@ export class ListCursor { return undefined; } - const li = this.list.find_li({ + const $li = this.list.find_li({ key, force_render: true, }); - if (!li || li.length === 0) { + if (!$li || $li.length === 0) { return undefined; } return { highlight: () => { - li.addClass(this.highlight_class); - this.adjust_scroll(li); + $li.addClass(this.highlight_class); + this.adjust_scroll($li); }, clear: () => { - li.removeClass(this.highlight_class); + $li.removeClass(this.highlight_class); }, }; } - adjust_scroll(li) { - const scroll_container = $(this.list.scroll_container_sel); - scroll_util.scroll_element_into_container(li, scroll_container); + adjust_scroll($li) { + const $scroll_container = $(this.list.scroll_container_sel); + scroll_util.scroll_element_into_container($li, $scroll_container); } redraw() { diff --git a/static/js/list_widget.js b/static/js/list_widget.js index 41f653d654..ee82e00904 100644 --- a/static/js/list_widget.js +++ b/static/js/list_widget.js @@ -20,8 +20,8 @@ export function validate_opts(opts) { blueslip.error("html_selector should be a function."); return false; } - if (!opts.simplebar_container) { - blueslip.error("simplebar_container is missing."); + if (!opts.$simplebar_container) { + blueslip.error("$simplebar_container is missing."); return false; } return true; @@ -130,7 +130,7 @@ function is_scroll_position_for_render(scroll_container) { } // @params -// container: jQuery object to append to. +// $container: jQuery object to append to. // list: The list of items to progressively append. // opts: An object of random preferences. export function create($container, list, opts) { @@ -198,11 +198,11 @@ export function create($container, list, opts) { if (items.selected_items) { const data = items.selected_items; for (const value of data) { - const list_item = $container.find(`li[data-value = "${value}"]`); - if (list_item.length) { - const link_elem = list_item.find("a").expectOne(); - list_item.addClass("checked"); - link_elem.prepend($("", {class: "fa fa-check"})); + const $list_item = $container.find(`li[data-value = "${value}"]`); + if ($list_item.length) { + const $link_elem = $list_item.find("a").expectOne(); + $list_item.addClass("checked"); + $link_elem.prepend($("", {class: "fa fa-check"})); } } } @@ -256,8 +256,8 @@ export function create($container, list, opts) { // We don't have any way to find the existing item. return; } - const html_item = meta.scroll_container.find(opts.html_selector(item)); - if (!html_item) { + const $html_item = meta.$scroll_container.find(opts.html_selector(item)); + if (!$html_item) { // We don't have the item in the current scroll container; it'll be // rendered with updated data when it is scrolled to. return; @@ -274,7 +274,7 @@ export function create($container, list, opts) { // At this point, we have asserted we have all the information to replace // the html now. - html_item.replaceWith(html); + $html_item.replaceWith(html); }; widget.clear = function () { @@ -306,11 +306,11 @@ export function create($container, list, opts) { }; widget.set_up_event_handlers = function () { - meta.scroll_container = ui.get_scroll_element(opts.simplebar_container); + meta.$scroll_container = ui.get_scroll_element(opts.$simplebar_container); // on scroll of the nearest scrolling container, if it hits the bottom // of the container then fetch a new block of items and render them. - meta.scroll_container.on("scroll.list_widget_container", function () { + meta.$scroll_container.on("scroll.list_widget_container", function () { if (opts.post_scroll__pre_render_callback) { opts.post_scroll__pre_render_callback(); } @@ -325,14 +325,14 @@ export function create($container, list, opts) { } }); - if (opts.parent_container) { - opts.parent_container.on("click.list_widget_sort", "[data-sort]", function () { + if (opts.$parent_container) { + opts.$parent_container.on("click.list_widget_sort", "[data-sort]", function () { handle_sort($(this), widget); }); } - if (opts.filter && opts.filter.element) { - opts.filter.element.on("input.list_widget_filter", function () { + if (opts.filter && opts.filter.$element) { + opts.filter.$element.on("input.list_widget_filter", function () { const value = this.value.toLocaleLowerCase(); widget.set_filter_value(value); widget.hard_redraw(); @@ -341,14 +341,14 @@ export function create($container, list, opts) { }; widget.clear_event_handlers = function () { - meta.scroll_container.off("scroll.list_widget_container"); + meta.$scroll_container.off("scroll.list_widget_container"); - if (opts.parent_container) { - opts.parent_container.off("click.list_widget_sort", "[data-sort]"); + if (opts.$parent_container) { + opts.$parent_container.off("click.list_widget_sort", "[data-sort]"); } - if (opts.filter && opts.filter.element) { - opts.filter.element.off("input.list_widget_filter"); + if (opts.filter && opts.filter.$element) { + opts.filter.$element.off("input.list_widget_filter"); } }; @@ -406,7 +406,7 @@ export function get(name) { return DEFAULTS.instances.get(name) || false; } -export function handle_sort(th, list) { +export function handle_sort($th, list) { /* one would specify sort parameters like this: - name => sort alphabetic. @@ -420,21 +420,21 @@ export function handle_sort(th, list) { */ - const sort_type = th.data("sort"); - const prop_name = th.data("sort-prop"); + const sort_type = $th.data("sort"); + const prop_name = $th.data("sort-prop"); - if (th.hasClass("active")) { - if (!th.hasClass("descend")) { - th.addClass("descend"); + if ($th.hasClass("active")) { + if (!$th.hasClass("descend")) { + $th.addClass("descend"); } else { - th.removeClass("descend"); + $th.removeClass("descend"); } } else { - th.siblings(".active").removeClass("active"); - th.addClass("active"); + $th.siblings(".active").removeClass("active"); + $th.addClass("active"); } - list.set_reverse_mode(th.hasClass("descend")); + list.set_reverse_mode($th.hasClass("descend")); // if `prop_name` is defined, it will trigger the generic codepath, // and not if it is undefined. diff --git a/static/js/loading.ts b/static/js/loading.ts index d74b620b4e..3661067332 100644 --- a/static/js/loading.ts +++ b/static/js/loading.ts @@ -3,74 +3,74 @@ import $ from "jquery"; import render_loader from "../templates/loader.hbs"; export function make_indicator( - outer_container: JQuery, + $outer_container: JQuery, {abs_positioned = false, text}: {abs_positioned?: boolean; text?: string} = {}, ): void { - let container = outer_container; + let $container = $outer_container; // TODO: We set white-space to 'nowrap' because under some // unknown circumstances (it happens on Keegan's laptop) the text // width calculation, above, returns a result that's a few pixels // too small. The container's div will be slightly too small, // but that's probably OK for our purposes. - outer_container.css({"white-space": "nowrap"}); + $outer_container.css({"white-space": "nowrap"}); - container.empty(); + $container.empty(); if (abs_positioned) { // Create some additional containers to facilitate absolutely // positioned spinners. - const container_id = container.attr("id")!; - let inner_container = $("
    ", {id: `${container_id}_box_container`}); - container.append(inner_container); - container = inner_container; - inner_container = $("
    ", {id: `${container_id}_box`}); - container.append(inner_container); - container = inner_container; + const container_id = $container.attr("id")!; + let $inner_container = $("
    ", {id: `${container_id}_box_container`}); + $container.append($inner_container); + $container = $inner_container; + $inner_container = $("
    ", {id: `${container_id}_box`}); + $container.append($inner_container); + $container = $inner_container; } - const spinner_elem = $(''); - spinner_elem.html(render_loader({container_id: outer_container.attr("id")})); - container.append(spinner_elem); + const $spinner_elem = $(''); + $spinner_elem.html(render_loader({container_id: $outer_container.attr("id")})); + $container.append($spinner_elem); let text_width = 0; if (text !== undefined) { - const text_elem = $(''); - text_elem.text(text); - container.append(text_elem); + const $text_elem = $(''); + $text_elem.text(text); + $container.append($text_elem); // See note, below if (!abs_positioned) { - text_width = 20 + (text_elem.width() ?? 0); + text_width = 20 + ($text_elem.width() ?? 0); } } // These width calculations are tied to the spinner width and // margins defined via CSS - container.css({width: 38 + text_width, height: 0}); + $container.css({width: 38 + text_width, height: 0}); - outer_container.data("destroying", false); + $outer_container.data("destroying", false); } -export function destroy_indicator(container: JQuery): void { - if (container.data("destroying")) { +export function destroy_indicator($container: JQuery): void { + if ($container.data("destroying")) { return; } - container.data("destroying", true); + $container.data("destroying", true); - const spinner = container.data("spinner_obj"); + const spinner = $container.data("spinner_obj"); if (spinner !== undefined) { spinner.stop(); } - container.removeData("spinner_obj"); - container.empty(); - container.css({width: 0, height: 0}); + $container.removeData("spinner_obj"); + $container.empty(); + $container.css({width: 0, height: 0}); } -export function show_button_spinner(elt: JQuery, using_dark_theme: boolean): void { +export function show_button_spinner($elt: JQuery, using_dark_theme: boolean): void { if (!using_dark_theme) { - elt.attr("src", "/static/images/loader-black.svg"); + $elt.attr("src", "/static/images/loader-black.svg"); } else { - elt.attr("src", "/static/images/loader-white.svg"); + $elt.attr("src", "/static/images/loader-white.svg"); } - elt.css("display", "inline-block"); + $elt.css("display", "inline-block"); } diff --git a/static/js/message_edit.js b/static/js/message_edit.js index 1842967a02..f1f2db07a2 100644 --- a/static/js/message_edit.js +++ b/static/js/message_edit.js @@ -193,45 +193,45 @@ export function update_message_topic_editing_pencil() { } } -export function hide_message_edit_spinner(row) { - row.find(".loader").hide(); - row.find(".message_edit_save span").show(); - row.find(".message_edit_save").removeClass("disable-btn"); - row.find(".message_edit_cancel").removeClass("disable-btn"); +export function hide_message_edit_spinner($row) { + $row.find(".loader").hide(); + $row.find(".message_edit_save span").show(); + $row.find(".message_edit_save").removeClass("disable-btn"); + $row.find(".message_edit_cancel").removeClass("disable-btn"); } -export function show_message_edit_spinner(row) { +export function show_message_edit_spinner($row) { const using_dark_theme = settings_data.using_dark_theme(); - loading.show_button_spinner(row.find(".loader"), using_dark_theme); - row.find(".message_edit_save span").hide(); - row.find(".message_edit_save").addClass("disable-btn"); - row.find(".message_edit_cancel").addClass("disable-btn"); + loading.show_button_spinner($row.find(".loader"), using_dark_theme); + $row.find(".message_edit_save span").hide(); + $row.find(".message_edit_save").addClass("disable-btn"); + $row.find(".message_edit_cancel").addClass("disable-btn"); } -export function show_topic_edit_spinner(row) { - const spinner = row.find(".topic_edit_spinner"); - loading.make_indicator(spinner); - spinner.css({height: ""}); +export function show_topic_edit_spinner($row) { + const $spinner = $row.find(".topic_edit_spinner"); + loading.make_indicator($spinner); + $spinner.css({height: ""}); $(".topic_edit_save").hide(); $(".topic_edit_cancel").hide(); $(".topic_edit_spinner").show(); } export function end_if_focused_on_inline_topic_edit() { - const focused_elem = $(".topic_edit_form").find(":focus"); - if (focused_elem.length === 1) { - focused_elem.trigger("blur"); - const recipient_row = focused_elem.closest(".recipient_row"); - end_inline_topic_edit(recipient_row); + const $focused_elem = $(".topic_edit_form").find(":focus"); + if ($focused_elem.length === 1) { + $focused_elem.trigger("blur"); + const $recipient_row = $focused_elem.closest(".recipient_row"); + end_inline_topic_edit($recipient_row); } } export function end_if_focused_on_message_row_edit() { - const focused_elem = $(".message_edit").find(":focus"); - if (focused_elem.length === 1) { - focused_elem.trigger("blur"); - const row = focused_elem.closest(".message_row"); - end_message_row_edit(row); + const $focused_elem = $(".message_edit").find(":focus"); + if ($focused_elem.length === 1) { + $focused_elem.trigger("blur"); + const $row = $focused_elem.closest(".message_row"); + end_message_row_edit($row); } } @@ -241,9 +241,9 @@ function handle_message_row_edit_keydown(e) { if ($(e.target).hasClass("message_edit_content")) { // Pressing Enter to save edits is coupled with Enter to send if (composebox_typeahead.should_enter_send(e)) { - const row = $(".message_edit_content:focus").closest(".message_row"); - const message_edit_save_button = row.find(".message_edit_save"); - if (message_edit_save_button.prop("disabled")) { + const $row = $(".message_edit_content:focus").closest(".message_row"); + const $message_edit_save_button = $row.find(".message_edit_save"); + if ($message_edit_save_button.prop("disabled")) { // In cases when the save button is disabled // we need to disable save on pressing Enter // Prevent default to avoid new-line on pressing @@ -251,7 +251,7 @@ function handle_message_row_edit_keydown(e) { e.preventDefault(); return; } - save_message_row_edit(row); + save_message_row_edit($row); e.stopPropagation(); e.preventDefault(); } else { @@ -267,8 +267,8 @@ function handle_message_row_edit_keydown(e) { ) { // Enter should save the topic edit, as long as it's // not being used to accept typeahead. - const row = $(e.target).closest(".message_row"); - save_message_row_edit(row); + const $row = $(e.target).closest(".message_row"); + save_message_row_edit($row); e.stopPropagation(); } return; @@ -283,7 +283,7 @@ function handle_message_row_edit_keydown(e) { } function handle_inline_topic_edit_keydown(e) { - let row; + let $row; switch (e.key) { case "Enter": // Handle Enter key in the recipient bar/inline topic edit form if ($(".typeahead:visible").length > 0) { @@ -291,8 +291,8 @@ function handle_inline_topic_edit_keydown(e) { e.preventDefault(); return; } - row = $(e.target).closest(".recipient_row"); - save_inline_topic_edit(row); + $row = $(e.target).closest(".recipient_row"); + save_inline_topic_edit($row); e.stopPropagation(); e.preventDefault(); return; @@ -320,31 +320,31 @@ function timer_text(seconds_left) { return $t({defaultMessage: "{seconds} sec to edit"}, {seconds: seconds.toString()}); } -function create_copy_to_clipboard_handler(row, source, message_id) { +function create_copy_to_clipboard_handler($row, source, message_id) { const clipboard = new ClipboardJS(source, { target: () => document.querySelector(`#edit_form_${CSS.escape(message_id)} .message_edit_content`), }); clipboard.on("success", () => { - end_message_row_edit(row); - row.find(".alert-msg").text($t({defaultMessage: "Copied!"})); - row.find(".alert-msg").css("display", "block"); - row.find(".alert-msg").delay(1000).fadeOut(300); + end_message_row_edit($row); + $row.find(".alert-msg").text($t({defaultMessage: "Copied!"})); + $row.find(".alert-msg").css("display", "block"); + $row.find(".alert-msg").delay(1000).fadeOut(300); if ($(".tooltip").is(":visible")) { $(".tooltip").hide(); } }); } -function edit_message(row, raw_content) { +function edit_message($row, raw_content) { let stream_widget; - row.find(".message_reactions").hide(); - condense.hide_message_expander(row); - condense.hide_message_condenser(row); - const content_top = row.find(".message_top_line")[0].getBoundingClientRect().top; + $row.find(".message_reactions").hide(); + condense.hide_message_expander($row); + condense.hide_message_condenser($row); + const content_top = $row.find(".message_top_line")[0].getBoundingClientRect().top; - const message = message_lists.current.get(rows.id(row)); + const message = message_lists.current.get(rows.id($row)); // We potentially got to this function by clicking a button that implied the // user would be able to edit their message. Give a little bit of buffer in @@ -387,7 +387,7 @@ function edit_message(row, raw_content) { on_update: set_propagate_selector_display, }; - const form = $( + const $form = $( render_message_edit_form({ is_stream: message.type === "stream", message_id: message.id, @@ -407,57 +407,57 @@ function edit_message(row, raw_content) { }), ); - const edit_obj = {form, raw_content}; + const edit_obj = {$form, raw_content}; currently_editing_messages.set(message.id, edit_obj); - message_lists.current.show_edit_message(row, edit_obj); + message_lists.current.show_edit_message($row, edit_obj); - form.on("keydown", handle_message_row_edit_keydown); + $form.on("keydown", handle_message_row_edit_keydown); - form.find(".message-edit-feature-group .video_link").toggle( - compose.compute_show_video_chat_button(), - ); - upload.feature_check($(`#edit_form_${CSS.escape(rows.id(row))} .compose_upload_file`)); + $form + .find(".message-edit-feature-group .video_link") + .toggle(compose.compute_show_video_chat_button()); + upload.feature_check($(`#edit_form_${CSS.escape(rows.id($row))} .compose_upload_file`)); - const stream_header_colorblock = row.find(".stream_header_colorblock"); - const message_edit_content = row.find("textarea.message_edit_content"); - const message_edit_topic = row.find("input.message_edit_topic"); - const message_edit_topic_propagate = row.find("select.message_edit_topic_propagate"); - const message_edit_breadcrumb_messages = row.find("div.message_edit_breadcrumb_messages"); - const message_edit_countdown_timer = row.find(".message_edit_countdown_timer"); - const copy_message = row.find(".copy_message"); + const $stream_header_colorblock = $row.find(".stream_header_colorblock"); + const $message_edit_content = $row.find("textarea.message_edit_content"); + const $message_edit_topic = $row.find("input.message_edit_topic"); + const $message_edit_topic_propagate = $row.find("select.message_edit_topic_propagate"); + const $message_edit_breadcrumb_messages = $row.find("div.message_edit_breadcrumb_messages"); + const $message_edit_countdown_timer = $row.find(".message_edit_countdown_timer"); + const $copy_message = $row.find(".copy_message"); if (is_stream_editable) { stream_widget = new DropdownListWidget(opts); } - stream_bar.decorate(message.stream, stream_header_colorblock, false); + stream_bar.decorate(message.stream, $stream_header_colorblock, false); switch (editability) { case editability_types.NO: - message_edit_content.attr("readonly", "readonly"); - message_edit_topic.attr("readonly", "readonly"); - create_copy_to_clipboard_handler(row, copy_message[0], message.id); + $message_edit_content.attr("readonly", "readonly"); + $message_edit_topic.attr("readonly", "readonly"); + create_copy_to_clipboard_handler($row, $copy_message[0], message.id); break; case editability_types.NO_LONGER: // You can currently only reach this state in non-streams. If that // changes (e.g. if we stop allowing topics to be modified forever // in streams), then we'll need to disable // row.find('input.message_edit_topic') as well. - message_edit_content.attr("readonly", "readonly"); - message_edit_countdown_timer.text($t({defaultMessage: "View source"})); - create_copy_to_clipboard_handler(row, copy_message[0], message.id); + $message_edit_content.attr("readonly", "readonly"); + $message_edit_countdown_timer.text($t({defaultMessage: "View source"})); + create_copy_to_clipboard_handler($row, $copy_message[0], message.id); break; case editability_types.TOPIC_ONLY: - message_edit_content.attr("readonly", "readonly"); + $message_edit_content.attr("readonly", "readonly"); // Hint why you can edit the topic but not the message content - message_edit_countdown_timer.text($t({defaultMessage: "Topic editing only"})); - create_copy_to_clipboard_handler(row, copy_message[0], message.id); + $message_edit_countdown_timer.text($t({defaultMessage: "Topic editing only"})); + create_copy_to_clipboard_handler($row, $copy_message[0], message.id); break; case editability_types.FULL: { - copy_message.remove(); - const edit_id = `#edit_form_${CSS.escape(rows.id(row))} .message_edit_content`; + $copy_message.remove(); + const edit_id = `#edit_form_${CSS.escape(rows.id($row))} .message_edit_content`; const listeners = resize.watch_manual_resize(edit_id); if (listeners) { - currently_editing_messages.get(rows.id(row)).listeners = listeners; + currently_editing_messages.get(rows.id($row)).listeners = listeners; } composebox_typeahead.initialize_compose_typeahead(edit_id); compose_ui.handle_keyup(null, $(edit_id).expectOne()); @@ -476,7 +476,7 @@ function edit_message(row, raw_content) { editability !== editability_types.NO && page_params.realm_message_content_edit_limit_seconds > 0 ) { - row.find(".message-edit-timer-control-group").show(); + $row.find(".message-edit-timer-control-group").show(); } // add timer @@ -496,50 +496,50 @@ function edit_message(row, raw_content) { // I believe this needs to be defined outside the countdown_timer, since // row just refers to something like the currently selected message, and // can change out from under us - const message_edit_save = row.find("button.message_edit_save"); + const $message_edit_save = $row.find("button.message_edit_save"); // Do this right away, rather than waiting for the timer to do its first update, // since otherwise there is a noticeable lag - message_edit_countdown_timer.text(timer_text(seconds_left)); + $message_edit_countdown_timer.text(timer_text(seconds_left)); const countdown_timer = setInterval(() => { seconds_left -= 1; if (seconds_left <= 0) { clearInterval(countdown_timer); - message_edit_content.prop("readonly", "readonly"); + $message_edit_content.prop("readonly", "readonly"); if (message.type === "stream") { - message_edit_topic.prop("readonly", "readonly"); - message_edit_topic_propagate.hide(); - message_edit_breadcrumb_messages.hide(); + $message_edit_topic.prop("readonly", "readonly"); + $message_edit_topic_propagate.hide(); + $message_edit_breadcrumb_messages.hide(); } // We don't go directly to a "TOPIC_ONLY" type state (with an active Save button), // since it isn't clear what to do with the half-finished edit. It's nice to keep // the half-finished edit around so that they can copy-paste it, but we don't want // people to think "Save" will save the half-finished edit. - message_edit_save.addClass("disabled"); - message_edit_countdown_timer.text($t({defaultMessage: "Time's up!"})); + $message_edit_save.addClass("disabled"); + $message_edit_countdown_timer.text($t({defaultMessage: "Time's up!"})); } else { - message_edit_countdown_timer.text(timer_text(seconds_left)); + $message_edit_countdown_timer.text(timer_text(seconds_left)); } }, 1000); } if (!is_editable) { - row.find(".message_edit_close").trigger("focus"); + $row.find(".message_edit_close").trigger("focus"); } else if (message.type === "stream" && message.topic === compose.empty_topic_placeholder()) { - message_edit_topic.val(""); - message_edit_topic.trigger("focus"); + $message_edit_topic.val(""); + $message_edit_topic.trigger("focus"); } else if (editability === editability_types.TOPIC_ONLY) { - row.find(".message_edit_topic").trigger("focus"); + $row.find(".message_edit_topic").trigger("focus"); } else { - message_edit_content.trigger("focus"); + $message_edit_content.trigger("focus"); // Put cursor at end of input. - const contents = message_edit_content.val(); - message_edit_content.val(""); - message_edit_content.val(contents); + const contents = $message_edit_content.val(); + $message_edit_content.val(""); + $message_edit_content.val(contents); } // Scroll to keep the top of the message content text in the same // place visually, adjusting for border and padding. - const edit_top = message_edit_content[0].getBoundingClientRect().top; + const edit_top = $message_edit_content[0].getBoundingClientRect().top; const scroll_by = edit_top - content_top + 5 - 14; edit_obj.scrolled_by = scroll_by; @@ -558,26 +558,26 @@ function edit_message(row, raw_content) { Number.parseInt(stream_widget.value(), 10), ); - stream_bar.decorate(stream_name, stream_header_colorblock, false); + stream_bar.decorate(stream_name, $stream_header_colorblock, false); } function set_propagate_selector_display() { update_stream_header_colorblock(); - const new_topic = message_edit_topic.val(); + const new_topic = $message_edit_topic.val(); const new_stream_id = is_stream_editable ? Number.parseInt(stream_widget.value(), 10) : null; const is_topic_edited = new_topic !== original_topic && new_topic !== ""; const is_stream_edited = is_stream_editable ? new_stream_id !== original_stream_id : false; - message_edit_topic_propagate.toggle(is_topic_edited || is_stream_edited); - message_edit_breadcrumb_messages.toggle(is_stream_edited); + $message_edit_topic_propagate.toggle(is_topic_edited || is_stream_edited); + $message_edit_breadcrumb_messages.toggle(is_stream_edited); if (is_stream_edited) { /* Reinitialize the typeahead component with content for the new stream. */ const new_stream_name = sub_store.get(new_stream_id).name; - message_edit_topic.data("typeahead").unlisten(); + $message_edit_topic.data("typeahead").unlisten(); composebox_typeahead.initialize_topic_edit_typeahead( - message_edit_topic, + $message_edit_topic, new_stream_name, true, ); @@ -585,43 +585,43 @@ function edit_message(row, raw_content) { } if (!message.locally_echoed) { - message_edit_topic.on("keyup", () => { + $message_edit_topic.on("keyup", () => { set_propagate_selector_display(); }); } - composebox_typeahead.initialize_topic_edit_typeahead(message_edit_topic, message.stream, true); + composebox_typeahead.initialize_topic_edit_typeahead($message_edit_topic, message.stream, true); } -function start_edit_maintaining_scroll(row, content) { - edit_message(row, content); - const row_bottom = row.height() + row.offset().top; +function start_edit_maintaining_scroll($row, content) { + edit_message($row, content); + const row_bottom = $row.height() + $row.offset().top; const composebox_top = $("#compose").offset().top; if (row_bottom > composebox_top) { message_viewport.scrollTop(message_viewport.scrollTop() + row_bottom - composebox_top); } } -function start_edit_with_content(row, content, edit_box_open_callback) { - start_edit_maintaining_scroll(row, content); +function start_edit_with_content($row, content, edit_box_open_callback) { + start_edit_maintaining_scroll($row, content); if (edit_box_open_callback) { edit_box_open_callback(); } upload.setup_upload({ mode: "edit", - row: rows.id(row), + row: rows.id($row), }); } -export function start(row, edit_box_open_callback) { - const message = message_lists.current.get(rows.id(row)); +export function start($row, edit_box_open_callback) { + const message = message_lists.current.get(rows.id($row)); if (message === undefined) { - blueslip.error("Couldn't find message ID for edit " + rows.id(row)); + blueslip.error("Couldn't find message ID for edit " + rows.id($row)); return; } if (message.raw_content) { - start_edit_with_content(row, message.raw_content, edit_box_open_callback); + start_edit_with_content($row, message.raw_content, edit_box_open_callback); return; } @@ -632,7 +632,7 @@ export function start(row, edit_box_open_callback) { success(data) { if (message_lists.current === msg_list) { message.raw_content = data.raw_content; - start_edit_with_content(row, message.raw_content, edit_box_open_callback); + start_edit_with_content($row, message.raw_content, edit_box_open_callback); } }, }); @@ -659,21 +659,21 @@ export function toggle_resolve_topic(message_id, old_topic_name) { }); } -export function start_inline_topic_edit(recipient_row) { - const form = $(render_topic_edit_form()); - message_lists.current.show_edit_topic_on_recipient_row(recipient_row, form); - form.on("keydown", handle_inline_topic_edit_keydown); +export function start_inline_topic_edit($recipient_row) { + const $form = $(render_topic_edit_form()); + message_lists.current.show_edit_topic_on_recipient_row($recipient_row, $form); + $form.on("keydown", handle_inline_topic_edit_keydown); $(".topic_edit_spinner").hide(); - const msg_id = rows.id_for_recipient_row(recipient_row); + const msg_id = rows.id_for_recipient_row($recipient_row); const message = message_lists.current.get(msg_id); let topic = message.topic; if (topic === compose.empty_topic_placeholder()) { topic = ""; } - const inline_topic_edit_input = form.find(".inline_topic_edit"); - inline_topic_edit_input.val(topic).trigger("select").trigger("focus"); + const $inline_topic_edit_input = $form.find(".inline_topic_edit"); + $inline_topic_edit_input.val(topic).trigger("select").trigger("focus"); composebox_typeahead.initialize_topic_edit_typeahead( - inline_topic_edit_input, + $inline_topic_edit_input, message.stream, false, ); @@ -683,12 +683,12 @@ export function is_editing(id) { return currently_editing_messages.has(id); } -export function end_inline_topic_edit(row) { - message_lists.current.hide_edit_topic_on_recipient_row(row); +export function end_inline_topic_edit($row) { + message_lists.current.hide_edit_topic_on_recipient_row($row); } -export function end_message_row_edit(row) { - const message = message_lists.current.get(rows.id(row)); +export function end_message_row_edit($row) { + const message = message_lists.current.get(rows.id($row)); if (message !== undefined && currently_editing_messages.has(message.id)) { const scroll_by = currently_editing_messages.get(message.id).scrolled_by; const original_scrollTop = message_viewport.scrollTop(); @@ -705,49 +705,49 @@ export function end_message_row_edit(row) { } currently_editing_messages.delete(message.id); - message_lists.current.hide_edit_message(row); + message_lists.current.hide_edit_message($row); message_viewport.scrollTop(original_scrollTop - scroll_by); compose.abort_video_callbacks(message.id); } - if (row.find(".condensed").length !== 0) { - condense.show_message_expander(row); + if ($row.find(".condensed").length !== 0) { + condense.show_message_expander($row); } else { - condense.show_message_condenser(row); + condense.show_message_condenser($row); } - row.find(".message_reactions").show(); + $row.find(".message_reactions").show(); // We have to blur out text fields, or else hotkeys.js // thinks we are still editing. - row.find(".message_edit").trigger("blur"); + $row.find(".message_edit").trigger("blur"); // We should hide the editing typeahead if it is visible - row.find("input.message_edit_topic").trigger("blur"); + $row.find("input.message_edit_topic").trigger("blur"); } -export function save_inline_topic_edit(row) { +export function save_inline_topic_edit($row) { const msg_list = message_lists.current; - let message_id = rows.id_for_recipient_row(row); + let message_id = rows.id_for_recipient_row($row); const message = message_lists.current.get(message_id); const old_topic = message.topic; - const new_topic = row.find(".inline_topic_edit").val(); + const new_topic = $row.find(".inline_topic_edit").val(); const topic_changed = new_topic !== old_topic && new_topic.trim() !== ""; if (!topic_changed) { // this means the inline_topic_edit was opened and submitted without // changing anything, therefore, we should just close the inline topic edit. - end_inline_topic_edit(row); + end_inline_topic_edit($row); return; } - show_topic_edit_spinner(row); + show_topic_edit_spinner($row); if (message.locally_echoed) { if (topic_changed) { echo.edit_locally(message, {new_topic}); - row = message_lists.current.get_row(message_id); + $row = message_lists.current.get_row(message_id); } - end_inline_topic_edit(row); + end_inline_topic_edit($row); return; } @@ -761,34 +761,34 @@ export function save_inline_topic_edit(row) { url: "/json/messages/" + message.id, data: request, success() { - const spinner = row.find(".topic_edit_spinner"); - loading.destroy_indicator(spinner); + const $spinner = $row.find(".topic_edit_spinner"); + loading.destroy_indicator($spinner); }, error(xhr) { - const spinner = row.find(".topic_edit_spinner"); - loading.destroy_indicator(spinner); + const $spinner = $row.find(".topic_edit_spinner"); + loading.destroy_indicator($spinner); if (msg_list === message_lists.current) { - message_id = rows.id_for_recipient_row(row); + message_id = rows.id_for_recipient_row($row); const message = channel.xhr_error_message( $t({defaultMessage: "Error saving edit"}), xhr, ); - row.find(".edit_error").text(message).css("display", "inline-block"); + $row.find(".edit_error").text(message).css("display", "inline-block"); } }, }); } -export function save_message_row_edit(row) { +export function save_message_row_edit($row) { const msg_list = message_lists.current; - let message_id = rows.id(row); + let message_id = rows.id($row); const message = message_lists.current.get(message_id); const can_edit_stream = message.is_stream && settings_data.user_can_move_messages_between_streams(); let changed = false; let edit_locally_echoed = false; - const new_content = row.find(".message_edit_content").val(); + const new_content = $row.find(".message_edit_content").val(); let topic_changed = false; let new_topic; const old_topic = message.topic; @@ -797,15 +797,15 @@ export function save_message_row_edit(row) { let new_stream_id; const old_stream_id = message.stream_id; - show_message_edit_spinner(row); + show_message_edit_spinner($row); if (message.type === "stream") { - new_topic = row.find(".message_edit_topic").val(); + new_topic = $row.find(".message_edit_topic").val(); topic_changed = new_topic !== old_topic && new_topic.trim() !== ""; if (can_edit_stream) { - const dropdown_list_widget_value_elem = $(`#id_select_move_stream_${message_id}`); - new_stream_id = Number.parseInt(dropdown_list_widget_value_elem.data("value"), 10); + const $dropdown_list_widget_value_elem = $(`#id_select_move_stream_${message_id}`); + new_stream_id = Number.parseInt($dropdown_list_widget_value_elem.data("value"), 10); stream_changed = new_stream_id !== old_stream_id; } } @@ -819,9 +819,9 @@ export function save_message_row_edit(row) { new_topic, new_stream_id, }); - row = message_lists.current.get_row(message_id); + $row = message_lists.current.get_row(message_id); } - end_message_row_edit(row); + end_message_row_edit($row); return; } @@ -829,11 +829,11 @@ export function save_message_row_edit(row) { if (topic_changed || stream_changed) { const selected_topic_propagation = - row.find("select.message_edit_topic_propagate").val() || "change_later"; - const send_notification_to_old_thread = row + $row.find("select.message_edit_topic_propagate").val() || "change_later"; + const send_notification_to_old_thread = $row .find(".send_notification_to_old_thread") .is(":checked"); - const send_notification_to_new_thread = row + const send_notification_to_new_thread = $row .find(".send_notification_to_new_thread") .is(":checked"); request.propagate_mode = selected_topic_propagation; @@ -857,7 +857,7 @@ export function save_message_row_edit(row) { if (!changed) { // If they didn't change anything, just cancel it. - end_message_row_edit(row); + end_message_row_edit($row); return; } @@ -898,8 +898,8 @@ export function save_message_row_edit(row) { echo.edit_locally(message, currently_echoing_messages.get(message_id)); - row = message_lists.current.get_row(message_id); - end_message_row_edit(row); + $row = message_lists.current.get_row(message_id); + end_message_row_edit($row); } channel.patch({ @@ -910,11 +910,11 @@ export function save_message_row_edit(row) { delete message.local_edit_timestamp; currently_echoing_messages.delete(message_id); } - hide_message_edit_spinner(row); + hide_message_edit_spinner($row); }, error(xhr) { if (msg_list === message_lists.current) { - message_id = rows.id(row); + message_id = rows.id($row); if (edit_locally_echoed) { const echoed_message = message_store.get(message_id); @@ -932,28 +932,28 @@ export function save_message_row_edit(row) { alerted: echo_data.alerted, }); - row = message_lists.current.get_row(message_id); + $row = message_lists.current.get_row(message_id); if (!is_editing(message_id)) { // Return to the message editing open UI state with the edited content. - start_edit_maintaining_scroll(row, echo_data.raw_content); + start_edit_maintaining_scroll($row, echo_data.raw_content); } } - hide_message_edit_spinner(row); + hide_message_edit_spinner($row); const message = channel.xhr_error_message( $t({defaultMessage: "Error saving edit"}), xhr, ); - row.find(".edit_error").text(message).show(); + $row.find(".edit_error").text(message).show(); } }, }); // The message will automatically get replaced via message_list.update_message. } -export function maybe_show_edit(row, id) { +export function maybe_show_edit($row, id) { if (currently_editing_messages.has(id)) { - message_lists.current.show_edit_message(row, currently_editing_messages.get(id)); + message_lists.current.show_edit_message($row, currently_editing_messages.get(id)); } } @@ -974,8 +974,8 @@ export function edit_last_sent_message() { return; } - const msg_row = message_lists.current.get_row(msg.id); - if (!msg_row) { + const $msg_row = message_lists.current.get_row(msg.id); + if (!$msg_row) { // This should never happen, since we got the message above // from message_lists.current. blueslip.error("Could not find row for id " + msg.id); @@ -986,7 +986,7 @@ export function edit_last_sent_message() { // Finally do the real work! compose_actions.cancel(); - start(msg_row, () => { + start($msg_row, () => { $(".message_edit_content").trigger("focus"); }); } @@ -1041,8 +1041,8 @@ export function delete_topic(stream_id, topic_name) { export function handle_narrow_deactivated() { for (const [idx, elem] of currently_editing_messages) { if (message_lists.current.get(idx) !== undefined) { - const row = message_lists.current.get_row(idx); - message_lists.current.show_edit_message(row, elem); + const $row = message_lists.current.get_row(idx); + message_lists.current.show_edit_message($row, elem); } } } diff --git a/static/js/message_edit_history.js b/static/js/message_edit_history.js index c436f09d9f..8623ec721e 100644 --- a/static/js/message_edit_history.js +++ b/static/js/message_edit_history.js @@ -178,8 +178,8 @@ export function initialize() { $("body").on("click", ".message_edit_notice", (e) => { popovers.hide_all(); const message_id = rows.id($(e.currentTarget).closest(".message_row")); - const row = message_lists.current.get_row(message_id); - const message = message_lists.current.get(rows.id(row)); + const $row = message_lists.current.get_row(message_id); + const message = message_lists.current.get(rows.id($row)); if (page_params.realm_allow_edit_history) { show_history(message); diff --git a/static/js/message_events.js b/static/js/message_events.js index a013685b7f..1c11bd9916 100644 --- a/static/js/message_events.js +++ b/static/js/message_events.js @@ -173,9 +173,9 @@ export function update_messages(events) { msg.is_me_message = event.is_me_message; } - const row = message_lists.current.get_row(event.message_id); - if (row.length > 0) { - message_edit.end_message_row_edit(row); + const $row = message_lists.current.get_row(event.message_id); + if ($row.length > 0) { + message_edit.end_message_row_edit($row); } const new_topic = util.get_edit_event_topic(event); diff --git a/static/js/message_list.js b/static/js/message_list.js index 1286b381e6..7570c1ff00 100644 --- a/static/js/message_list.js +++ b/static/js/message_list.js @@ -281,49 +281,49 @@ export class MessageList { this.rerender(); } - show_edit_message(row, edit_obj) { - if (row.find(".message_edit_form form").length !== 0) { + show_edit_message($row, edit_obj) { + if ($row.find(".message_edit_form form").length !== 0) { return; } - row.find(".message_edit_form").append(edit_obj.form); - row.find(".message_content, .status-message, .message_controls").hide(); - row.find(".message_edit").css("display", "block"); - autosize(row.find(".message_edit_content")); + $row.find(".message_edit_form").append(edit_obj.$form); + $row.find(".message_content, .status-message, .message_controls").hide(); + $row.find(".message_edit").css("display", "block"); + autosize($row.find(".message_edit_content")); } - hide_edit_message(row) { - row.find(".message_content, .status-message, .message_controls").show(); - row.find(".message_edit_form").empty(); - row.find(".message_edit").hide(); - row.trigger("mouseleave"); + hide_edit_message($row) { + $row.find(".message_content, .status-message, .message_controls").show(); + $row.find(".message_edit_form").empty(); + $row.find(".message_edit").hide(); + $row.trigger("mouseleave"); } - show_edit_topic_on_recipient_row(recipient_row, form) { - recipient_row.find(".topic_edit_form").append(form); - recipient_row.find(".on_hover_topic_edit").hide(); - recipient_row.find(".edit_content_button").hide(); - recipient_row.find(".stream_topic").hide(); - recipient_row.find(".topic_edit").show(); - recipient_row.find(".always_visible_topic_edit").hide(); + show_edit_topic_on_recipient_row($recipient_row, $form) { + $recipient_row.find(".topic_edit_form").append($form); + $recipient_row.find(".on_hover_topic_edit").hide(); + $recipient_row.find(".edit_content_button").hide(); + $recipient_row.find(".stream_topic").hide(); + $recipient_row.find(".topic_edit").show(); + $recipient_row.find(".always_visible_topic_edit").hide(); } - hide_edit_topic_on_recipient_row(recipient_row) { - recipient_row.find(".stream_topic").show(); - recipient_row.find(".on_hover_topic_edit").show(); - recipient_row.find(".edit_content_button").show(); - recipient_row.find(".topic_edit_form").empty(); - recipient_row.find(".topic_edit").hide(); - recipient_row.find(".always_visible_topic_edit").show(); + hide_edit_topic_on_recipient_row($recipient_row) { + $recipient_row.find(".stream_topic").show(); + $recipient_row.find(".on_hover_topic_edit").show(); + $recipient_row.find(".edit_content_button").show(); + $recipient_row.find(".topic_edit_form").empty(); + $recipient_row.find(".topic_edit").hide(); + $recipient_row.find(".always_visible_topic_edit").show(); } show_message_as_read(message, options) { - const row = this.get_row(message.id); + const $row = this.get_row(message.id); if (options.from === "pointer" || options.from === "server") { - row.find(".unread_marker").addClass("fast_fade"); + $row.find(".unread_marker").addClass("fast_fade"); } else { - row.find(".unread_marker").addClass("slow_fade"); + $row.find(".unread_marker").addClass("slow_fade"); } - row.removeClass("unread"); + $row.removeClass("unread"); } rerender_view() { diff --git a/static/js/message_list_view.js b/static/js/message_list_view.js index 06bda51f4e..fe66ffefee 100644 --- a/static/js/message_list_view.js +++ b/static/js/message_list_view.js @@ -19,7 +19,7 @@ import {$t} from "./i18n"; import * as message_edit from "./message_edit"; import * as message_lists from "./message_lists"; import * as message_store from "./message_store"; -import * as message_viewport from "./message_viewport"; +import * as $message_viewport from "./message_viewport"; import * as muted_topics from "./muted_topics"; import * as muted_users from "./muted_users"; import * as narrow_state from "./narrow_state"; @@ -611,10 +611,10 @@ export class MessageListView { return message_actions; } - _put_row(row) { - // row is a jQuery object wrapping one message row - if (row.hasClass("message_row")) { - this._rows.set(rows.id(row), row); + _put_row($row) { + // $row is a jQuery object wrapping one message row + if ($row.hasClass("message_row")) { + this._rows.set(rows.id($row), $row); } } @@ -627,13 +627,13 @@ export class MessageListView { } for (const dom_row of $message_rows) { - const row = $(dom_row); - this._put_row(row); - this._post_process_single_row(row); + const $row = $(dom_row); + this._put_row($row); + this._post_process_single_row($row); } } - _post_process_single_row(row) { + _post_process_single_row($row) { // For message formatting that requires some post-processing // (and is not possible to handle solely via CSS), this is // where we modify the content. It is a goal to minimize how @@ -641,19 +641,19 @@ export class MessageListView { // we should implement features with the Markdown processor, // HTML and CSS. - if (row.length !== 1) { + if ($row.length !== 1) { blueslip.error("programming error--expected single element"); } - const content = row.find(".message_content"); + const $content = $row.find(".message_content"); - rendered_markdown.update_elements(content); + rendered_markdown.update_elements($content); - const id = rows.id(row); - message_edit.maybe_show_edit(row, id); + const id = rows.id($row); + message_edit.maybe_show_edit($row, id); submessage.process_submessages({ - row, + $row, message_id: id, }); } @@ -692,14 +692,14 @@ export class MessageListView { const list = this.list; // for convenience const table_name = this.table_name; - const table = rows.get_table(table_name); + const $table = rows.get_table(table_name); let orig_scrolltop_offset; // If we start with the message feed scrolled up (i.e. // the bottom message is not visible), then we will respect // the user's current position after rendering, rather // than auto-scrolling. - const started_scrolled_up = message_viewport.is_scrolled_up(); + const started_scrolled_up = $message_viewport.is_scrolled_up(); // The messages we are being asked to render are shared with between // all messages lists. To prevent having both list views overwriting @@ -741,10 +741,10 @@ export class MessageListView { const new_message_groups = this.build_message_groups(message_containers, this.table_name); const message_actions = this.merge_message_groups(new_message_groups, where); let new_dom_elements = []; - let rendered_groups; - let dom_messages; - let last_message_row; - let last_group_row; + let $rendered_groups; + let $dom_messages; + let $last_message_row; + let $last_group_row; for (const message_container of message_containers) { this.message_containers.set(message_container.msg.id, message_container); @@ -754,22 +754,22 @@ export class MessageListView { if (message_actions.prepend_groups.length > 0) { save_scroll_position(); - rendered_groups = this._render_group({ + $rendered_groups = this._render_group({ message_groups: message_actions.prepend_groups, use_match_properties: this.list.is_search(), table_name: this.table_name, }); - dom_messages = rendered_groups.find(".message_row"); - new_dom_elements = new_dom_elements.concat(rendered_groups); + $dom_messages = $rendered_groups.find(".message_row"); + new_dom_elements = new_dom_elements.concat($rendered_groups); - this._post_process(dom_messages); + this._post_process($dom_messages); // The date row will be included in the message groups or will be // added in a rerendered in the group below - table.find(".recipient_row").first().prev(".date_row").remove(); - table.prepend(rendered_groups); - condense.condense_and_collapse(dom_messages); + $table.find(".recipient_row").first().prev(".date_row").remove(); + $table.prepend($rendered_groups); + condense.condense_and_collapse($dom_messages); } // Rerender message groups @@ -777,22 +777,22 @@ export class MessageListView { save_scroll_position(); for (const message_group of message_actions.rerender_groups) { - const old_message_group = $(`#${CSS.escape(message_group.message_group_id)}`); + const $old_message_group = $(`#${CSS.escape(message_group.message_group_id)}`); // Remove the top date_row, we'll re-add it after rendering - old_message_group.prev(".date_row").remove(); + $old_message_group.prev(".date_row").remove(); - rendered_groups = this._render_group({ + $rendered_groups = this._render_group({ message_groups: [message_group], use_match_properties: this.list.is_search(), table_name: this.table_name, }); - dom_messages = rendered_groups.find(".message_row"); + $dom_messages = $rendered_groups.find(".message_row"); // Not adding to new_dom_elements it is only used for autoscroll - this._post_process(dom_messages); - old_message_group.replaceWith(rendered_groups); - condense.condense_and_collapse(dom_messages); + this._post_process($dom_messages); + $old_message_group.replaceWith($rendered_groups); + condense.condense_and_collapse($dom_messages); } } @@ -807,8 +807,8 @@ export class MessageListView { const targets = message_actions.rerender_messages_next_same_sender; for (const message_container of targets) { - const row = this.get_row(message_container.msg.id); - $(row) + const $row = this.get_row(message_container.msg.id); + $($row) .find("div.messagebox") .toggleClass("next_is_same_sender", message_container.next_is_same_sender); } @@ -816,19 +816,19 @@ export class MessageListView { // Insert new messages in to the last message group if (message_actions.append_messages.length > 0) { - last_message_row = table.find(".message_row").last().expectOne(); - last_group_row = rows.get_message_recipient_row(last_message_row); - dom_messages = $( + $last_message_row = $table.find(".message_row").last().expectOne(); + $last_group_row = rows.get_message_recipient_row($last_message_row); + $dom_messages = $( message_actions.append_messages .map((message_container) => this._get_message_template(message_container)) .join(""), ).filter(".message_row"); - this._post_process(dom_messages); - last_group_row.append(dom_messages); + this._post_process($dom_messages); + $last_group_row.append($dom_messages); - condense.condense_and_collapse(dom_messages); - new_dom_elements = new_dom_elements.concat(dom_messages); + condense.condense_and_collapse($dom_messages); + new_dom_elements = new_dom_elements.concat($dom_messages); } // Add new message groups to the end @@ -836,16 +836,16 @@ export class MessageListView { // Remove the trailing bookend; it'll be re-added after we do our rendering this.clear_trailing_bookend(); - rendered_groups = this._render_group({ + $rendered_groups = this._render_group({ message_groups: message_actions.append_groups, use_match_properties: this.list.is_search(), table_name: this.table_name, }); - dom_messages = rendered_groups.find(".message_row"); - new_dom_elements = new_dom_elements.concat(rendered_groups); + $dom_messages = $rendered_groups.find(".message_row"); + new_dom_elements = new_dom_elements.concat($rendered_groups); - this._post_process(dom_messages); + this._post_process($dom_messages); // This next line is a workaround for a weird scrolling // bug on Chrome. Basically, in Chrome 64, we had a @@ -859,10 +859,10 @@ export class MessageListView { // additional fetches (from bottom_whitespace ending up in // the view). During debugging, we found that this adding // this next line seems to prevent the Chrome bug from firing. - message_viewport.scrollTop(); + $message_viewport.scrollTop(); - table.append(rendered_groups); - condense.condense_and_collapse(dom_messages); + $table.append($rendered_groups); + condense.condense_and_collapse($dom_messages); } restore_scroll_position(); @@ -891,8 +891,8 @@ export class MessageListView { // of rows.js from compose_fade. We provide a callback function to be lazy-- // compose_fade may not actually need the elements depending on its internal // state. - const message_row = this.get_row(message_group.message_containers[0].msg.id); - return rows.get_message_recipient_row(message_row); + const $message_row = this.get_row(message_group.message_containers[0].msg.id); + return rows.get_message_recipient_row($message_row); }; compose_fade.update_rendered_message_groups(new_message_groups, get_element); @@ -920,23 +920,23 @@ export class MessageListView { _new_messages_height(rendered_elems) { let new_messages_height = 0; - for (const elem of rendered_elems.reverse()) { + for (const $elem of rendered_elems.reverse()) { // Sometimes there are non-DOM elements in rendered_elems; only // try to get the heights of actual trs. - if (elem.is("div")) { - new_messages_height += elem.height(); + if ($elem.is("div")) { + new_messages_height += $elem.height(); } } return new_messages_height; } - _scroll_limit(selected_row, viewport_info) { + _scroll_limit($selected_row, viewport_info) { // This scroll limit is driven by the TOP of the feed, and // it's the max amount that we can scroll down (or "skooch // up" the messages) before knocking the selected message // out of the feed. - const selected_row_top = selected_row.offset().top; + const selected_row_top = $selected_row.offset().top; let scroll_limit = selected_row_top - viewport_info.visible_top; if (scroll_limit < 0) { @@ -956,11 +956,11 @@ export class MessageListView { // // returns `true` if we need the user to scroll - const selected_row = this.selected_row(); - const last_visible = rows.last_visible(); + const $selected_row = this.selected_row(); + const $last_visible = rows.last_visible(); // Make sure we have a selected row and last visible row. (defensive) - if (!(selected_row && selected_row.length > 0 && last_visible)) { + if (!($selected_row && $selected_row.length > 0 && $last_visible)) { return false; } @@ -987,8 +987,8 @@ export class MessageListView { return false; } - const info = message_viewport.message_viewport_info(); - const scroll_limit = this._scroll_limit(selected_row, info); + const info = $message_viewport.message_viewport_info(); + const scroll_limit = this._scroll_limit($selected_row, info); // This next decision is fairly debatable. For a big message that // would push the pointer off the screen, we do a partial autoscroll, @@ -1013,7 +1013,7 @@ export class MessageListView { // (Even if we are somewhat constrained here, the message may // still end up being visible, so we do some arithmetic.) scroll_amount = scroll_limit; - const offset = message_viewport.offset_from_bottom(last_visible); + const offset = $message_viewport.offset_from_bottom($last_visible); // For determining whether we need to show the user a "you // need to scroll down" notification, the obvious check @@ -1037,7 +1037,7 @@ export class MessageListView { // Ok, we are finally ready to actually scroll. if (scroll_amount > 0) { - message_viewport.system_initiated_animate_scroll(scroll_amount); + $message_viewport.system_initiated_animate_scroll(scroll_amount); } return need_user_to_scroll; @@ -1106,10 +1106,10 @@ export class MessageListView { // old_offset is the number of pixels between the top of the // viewable window and the selected message let old_offset; - const selected_row = this.selected_row(); - const selected_in_view = selected_row.length > 0; + const $selected_row = this.selected_row(); + const selected_in_view = $selected_row.length > 0; if (selected_in_view) { - old_offset = selected_row.offset().top; + old_offset = $selected_row.offset().top; } if (discard_rendering_state) { // If we know that the existing render is invalid way @@ -1118,12 +1118,12 @@ export class MessageListView { this.clear_rendering_state(true); this.update_render_window(this.list.selected_idx(), false); } - return this.rerender_with_target_scrolltop(selected_row, old_offset); + return this.rerender_with_target_scrolltop($selected_row, old_offset); } set_message_offset(offset) { - const msg = this.selected_row(); - message_viewport.scrollTop(message_viewport.scrollTop() + msg.offset().top - offset); + const $msg = this.selected_row(); + $message_viewport.scrollTop($message_viewport.scrollTop() + $msg.offset().top - offset); } rerender_with_target_scrolltop(selected_row, target_offset) { @@ -1170,16 +1170,16 @@ export class MessageListView { return; } - const first_row = this.get_row(message_containers[0].msg.id); + const $first_row = this.get_row(message_containers[0].msg.id); // We may not have the row if the stream or topic was muted - if (first_row.length === 0) { + if ($first_row.length === 0) { return; } - const recipient_row = rows.get_message_recipient_row(first_row); - const header = recipient_row.find(".message_header"); - const message_group_id = recipient_row.attr("id"); + const $recipient_row = rows.get_message_recipient_row($first_row); + const $header = $recipient_row.find(".message_header"); + const message_group_id = $recipient_row.attr("id"); // Since there might be multiple dates within the message // group, it's important to look up the original/full message @@ -1198,23 +1198,23 @@ export class MessageListView { // rerendering rather than looking up the original version. populate_group_from_message_container(group, group.message_containers[0]); - const rendered_recipient_row = $(render_recipient_row(group)); + const $rendered_recipient_row = $(render_recipient_row(group)); - header.replaceWith(rendered_recipient_row); + $header.replaceWith($rendered_recipient_row); } _rerender_message(message_container, {message_content_edited, is_revealed}) { - const row = this.get_row(message_container.msg.id); + const $row = this.get_row(message_container.msg.id); const was_selected = this.list.selected_message() === message_container.msg; this.set_calculated_message_container_variables(message_container, is_revealed); - const rendered_msg = $(this._get_message_template(message_container)); + const $rendered_msg = $(this._get_message_template(message_container)); if (message_content_edited) { - rendered_msg.addClass("fade-in-message"); + $rendered_msg.addClass("fade-in-message"); } - this._post_process(rendered_msg); - row.replaceWith(rendered_msg); + this._post_process($rendered_msg); + $row.replaceWith($rendered_msg); if (was_selected) { this.list.select_id(message_container.msg.id); @@ -1321,20 +1321,20 @@ export class MessageListView { } get_row(id) { - const row = this._rows.get(id); + const $row = this._rows.get(id); - if (row === undefined) { + if ($row === undefined) { // For legacy reasons we need to return an empty // jQuery object here. return $(undefined); } - return row; + return $row; } clear_trailing_bookend() { - const trailing_bookend = rows.get_table(this.table_name).find(".trailing_bookend"); - trailing_bookend.remove(); + const $trailing_bookend = rows.get_table(this.table_name).find(".trailing_bookend"); + $trailing_bookend.remove(); } render_trailing_bookend( @@ -1347,7 +1347,7 @@ export class MessageListView { ) { // This is not the only place we render bookends; see also the // partial in message_group.hbs, which do not set is_trailing_bookend. - const rendered_trailing_bookend = $( + const $rendered_trailing_bookend = $( render_bookend({ stream_name, can_toggle_subscription, @@ -1358,7 +1358,7 @@ export class MessageListView { is_trailing_bookend: true, }), ); - rows.get_table(this.table_name).append(rendered_trailing_bookend); + rows.get_table(this.table_name).append($rendered_trailing_bookend); } selected_row() { @@ -1371,13 +1371,13 @@ export class MessageListView { change_message_id(old_id, new_id) { if (this._rows.has(old_id)) { - const row = this._rows.get(old_id); + const $row = this._rows.get(old_id); this._rows.delete(old_id); - row.attr("zid", new_id); - row.attr("id", this.table_name + new_id); - row.removeClass("local"); - this._rows.set(new_id, row); + $row.attr("zid", new_id); + $row.attr("id", this.table_name + new_id); + $row.removeClass("local"); + this._rows.set(new_id, $row); } if (this.message_containers.has(old_id)) { diff --git a/static/js/message_scroll.js b/static/js/message_scroll.js index c92b9520c9..6eb3bdcf1b 100644 --- a/static/js/message_scroll.js +++ b/static/js/message_scroll.js @@ -223,7 +223,7 @@ function scroll_finish() { } export function initialize() { - message_viewport.message_pane.on( + message_viewport.$message_pane.on( "scroll", _.throttle(() => { unread_ops.process_visible(); diff --git a/static/js/message_view_header.js b/static/js/message_view_header.js index 3995d79fae..7c1cc5b9b1 100644 --- a/static/js/message_view_header.js +++ b/static/js/message_view_header.js @@ -77,18 +77,18 @@ export function colorize_message_view_header() { } function append_and_display_title_area(message_view_header_data) { - const message_view_header_elem = $("#message_view_header"); - message_view_header_elem.empty(); + const $message_view_header_elem = $("#message_view_header"); + $message_view_header_elem.empty(); const rendered = render_message_view_header(message_view_header_data); - message_view_header_elem.append(rendered); + $message_view_header_elem.append(rendered); if (message_view_header_data.stream_settings_link) { colorize_message_view_header(); } - message_view_header_elem.removeClass("notdisplayed"); - const content = message_view_header_elem.find("span.rendered_markdown"); - if (content) { + $message_view_header_elem.removeClass("notdisplayed"); + const $content = $message_view_header_elem.find("span.rendered_markdown"); + if ($content) { // Update syntax like stream names, emojis, mentions, timestamps. - rendered_markdown.update_elements(content); + rendered_markdown.update_elements($content); } } diff --git a/static/js/message_viewport.js b/static/js/message_viewport.js index f8694f5736..f3ec101cf7 100644 --- a/static/js/message_viewport.js +++ b/static/js/message_viewport.js @@ -9,29 +9,29 @@ import * as overlays from "./overlays"; import * as rows from "./rows"; import * as util from "./util"; -export let message_pane; +export let $message_pane; -let jwindow; +let $jwindow; const dimensions = {}; let in_stoppable_autoscroll = false; function make_dimen_wrapper(dimen_name, dimen_func) { dimensions[dimen_name] = new util.CachedValue({ compute_value() { - return dimen_func.call(message_pane); + return dimen_func.call($message_pane); }, }); return function viewport_dimension_wrapper(...args) { if (args.length !== 0) { dimensions[dimen_name].reset(); - return dimen_func.apply(message_pane, args); + return dimen_func.apply($message_pane, args); } return dimensions[dimen_name].get(); }; } -export const height = make_dimen_wrapper("height", $(message_pane).height); -export const width = make_dimen_wrapper("width", $(message_pane).width); +export const height = make_dimen_wrapper("height", $($message_pane).height); +export const width = make_dimen_wrapper("width", $($message_pane).width); // Includes both scroll and arrow events. Negative means scroll up, // positive means scroll down. @@ -56,12 +56,13 @@ export function message_viewport_info() { const res = {}; - const element_just_above_us = $(".floating_recipient"); - const element_just_below_us = $("#compose"); + const $element_just_above_us = $(".floating_recipient"); + const $element_just_below_us = $("#compose"); - res.visible_top = element_just_above_us.offset().top + element_just_above_us.safeOuterHeight(); + res.visible_top = + $element_just_above_us.offset().top + $element_just_above_us.safeOuterHeight(); - res.visible_bottom = element_just_below_us.position().top; + res.visible_bottom = $element_just_below_us.position().top; res.visible_height = res.visible_bottom - res.visible_top; @@ -70,7 +71,7 @@ export function message_viewport_info() { export function at_bottom() { const bottom = scrollTop() + height(); - const full_height = message_pane.prop("scrollHeight"); + const full_height = $message_pane.prop("scrollHeight"); // We only know within a pixel or two if we're // exactly at the bottom, due to browser quirkiness, @@ -82,9 +83,9 @@ export function at_bottom() { // This differs from at_bottom in that it only requires the bottom message to // be visible, but you may be able to scroll down further. export function bottom_message_visible() { - const last_row = rows.last_visible(); - if (last_row.length) { - const message_bottom = last_row[0].getBoundingClientRect().bottom; + const $last_row = rows.last_visible(); + if ($last_row.length) { + const message_bottom = $last_row[0].getBoundingClientRect().bottom; const bottom_of_feed = $("#compose")[0].getBoundingClientRect().top; return bottom_of_feed > message_bottom; } @@ -99,21 +100,21 @@ export function is_scrolled_up() { // Let's determine whether the user was already dealing // with messages off the screen, which can guide auto // scrolling decisions. - const last_row = rows.last_visible(); - if (last_row.length === 0) { + const $last_row = rows.last_visible(); + if ($last_row.length === 0) { return false; } - const offset = offset_from_bottom(last_row); + const offset = offset_from_bottom($last_row); return offset > 0; } -export function offset_from_bottom(last_row) { +export function offset_from_bottom($last_row) { // A positive return value here means the last row is // below the bottom of the feed (i.e. obscured by the compose // box or even further below the bottom). - const message_bottom = last_row.offset().top + last_row.height(); + const message_bottom = $last_row.offset().top + $last_row.height(); const info = message_viewport_info(); return message_bottom - info.visible_bottom; @@ -162,14 +163,14 @@ function in_viewport_or_tall(rect, top_of_feed, bottom_of_feed, require_fully_vi } function add_to_visible( - candidates, + $candidates, visible, top_of_feed, bottom_of_feed, require_fully_visible, row_to_id, ) { - for (const row of candidates) { + for (const row of $candidates) { const row_rect = row.getBoundingClientRect(); // Mark very tall messages as read once we've gotten past them if (in_viewport_or_tall(row_rect, top_of_feed, bottom_of_feed, require_fully_visible)) { @@ -193,7 +194,7 @@ const bottom_of_feed = new util.CachedValue({ }); function _visible_divs( - selected_row, + $selected_row, row_min_height, row_to_output, div_class, @@ -209,10 +210,10 @@ function _visible_divs( // We do this explicitly without merges and without recalculating // the feed bounds to keep this computation as cheap as possible. const visible = []; - const above_pointer = selected_row.prevAll("div." + div_class).slice(0, num_neighbors); - const below_pointer = selected_row.nextAll("div." + div_class).slice(0, num_neighbors); + const $above_pointer = $selected_row.prevAll("div." + div_class).slice(0, num_neighbors); + const $below_pointer = $selected_row.nextAll("div." + div_class).slice(0, num_neighbors); add_to_visible( - selected_row, + $selected_row, visible, top_of_feed.get(), bottom_of_feed.get(), @@ -220,7 +221,7 @@ function _visible_divs( row_to_output, ); add_to_visible( - above_pointer, + $above_pointer, visible, top_of_feed.get(), bottom_of_feed.get(), @@ -228,7 +229,7 @@ function _visible_divs( row_to_output, ); add_to_visible( - below_pointer, + $below_pointer, visible, top_of_feed.get(), bottom_of_feed.get(), @@ -240,39 +241,39 @@ function _visible_divs( } export function visible_groups(require_fully_visible) { - const selected_row = message_lists.current.selected_row(); - if (selected_row === undefined || selected_row.length === 0) { + const $selected_row = message_lists.current.selected_row(); + if ($selected_row === undefined || $selected_row.length === 0) { return []; } - const selected_group = rows.get_message_recipient_row(selected_row); + const $selected_group = rows.get_message_recipient_row($selected_row); function get_row(row) { return row; } // Being simplistic about this, the smallest group is about 75 px high. - return _visible_divs(selected_group, 75, get_row, "recipient_row", require_fully_visible); + return _visible_divs($selected_group, 75, get_row, "recipient_row", require_fully_visible); } export function visible_messages(require_fully_visible) { - const selected_row = message_lists.current.selected_row(); + const $selected_row = message_lists.current.selected_row(); function row_to_id(row) { return message_lists.current.get(rows.id($(row))); } // Being simplistic about this, the smallest message is 25 px high. - return _visible_divs(selected_row, 25, row_to_id, "message_row", require_fully_visible); + return _visible_divs($selected_row, 25, row_to_id, "message_row", require_fully_visible); } export function scrollTop(target_scrollTop) { - const orig_scrollTop = message_pane.scrollTop(); + const orig_scrollTop = $message_pane.scrollTop(); if (target_scrollTop === undefined) { return orig_scrollTop; } - let ret = message_pane.scrollTop(target_scrollTop); - const new_scrollTop = message_pane.scrollTop(); + let $ret = $message_pane.scrollTop(target_scrollTop); + const new_scrollTop = $message_pane.scrollTop(); const space_to_scroll = $("#bottom_whitespace").offset().top - height(); // Check whether our scrollTop didn't move even though one could have scrolled down @@ -291,10 +292,10 @@ export function scrollTop(target_scrollTop) { "ScrollTop did nothing when scrolling to " + target_scrollTop + ", fixing...", ); // First scroll to 1 in order to clear the stuck state - message_pane.scrollTop(1); + $message_pane.scrollTop(1); // And then scroll where we intended to scroll to - ret = message_pane.scrollTop(target_scrollTop); - if (message_pane.scrollTop() === 0) { + $ret = $message_pane.scrollTop(target_scrollTop); + if ($message_pane.scrollTop() === 0) { blueslip.info( "ScrollTop fix did not work when scrolling to " + target_scrollTop + @@ -303,12 +304,12 @@ export function scrollTop(target_scrollTop) { ); } } - return ret; + return $ret; } export function stop_auto_scrolling() { if (in_stoppable_autoscroll) { - message_pane.stop(); + $message_pane.stop(); } } @@ -323,7 +324,7 @@ export function system_initiated_animate_scroll(scroll_amount) { message_scroll.suppress_selection_update_on_next_scroll(); const viewport_offset = scrollTop(); in_stoppable_autoscroll = true; - message_pane.animate({ + $message_pane.animate({ scrollTop: viewport_offset + scroll_amount, always() { in_stoppable_autoscroll = false; @@ -337,12 +338,12 @@ export function user_initiated_animate_scroll(scroll_amount) { const viewport_offset = scrollTop(); - message_pane.animate({ + $message_pane.animate({ scrollTop: viewport_offset + scroll_amount, }); } -export function recenter_view(message, {from_scroll = false, force_center = false} = {}) { +export function recenter_view($message, {from_scroll = false, force_center = false} = {}) { // BarnOwl-style recentering: if the pointer is too high, move it to // the 1/2 marks. If the pointer is too low, move it to the 1/7 mark. // See keep_pointer_in_view() for related logic to keep the pointer onscreen. @@ -352,8 +353,8 @@ export function recenter_view(message, {from_scroll = false, force_center = fals const bottom_threshold = viewport_info.visible_bottom; - const message_top = message.offset().top; - const message_height = message.safeOuterHeight(true); + const message_top = $message.offset().top; + const message_height = $message.safeOuterHeight(true); const message_bottom = message_top + message_height; const is_above = message_top < top_threshold; @@ -387,10 +388,10 @@ export function keep_pointer_in_view() { // mouse, the pointer is kind of meaningless to them, but keyboard // users will occasionally do big mouse scrolls, so this gives them // a pointer reasonably close to the middle of the screen. - let candidate; - let next_row = message_lists.current.selected_row(); + let $candidate; + let $next_row = message_lists.current.selected_row(); - if (next_row.length === 0) { + if ($next_row.length === 0) { return; } @@ -403,7 +404,7 @@ export function keep_pointer_in_view() { return true; } - const message_top = next_row.offset().top; + const message_top = $next_row.offset().top; // If the message starts after the very top of the screen, we just // leave it alone. This avoids bugs like #1608, where overzealousness @@ -414,7 +415,7 @@ export function keep_pointer_in_view() { // If at least part of the message is below top_threshold (10% from // the top), then we also leave it alone. - const bottom_offset = message_top + next_row.safeOuterHeight(true); + const bottom_offset = message_top + $next_row.safeOuterHeight(true); if (bottom_offset >= top_threshold) { return true; } @@ -424,21 +425,21 @@ export function keep_pointer_in_view() { } function message_is_far_enough_up() { - return at_bottom() || next_row.offset().top <= bottom_threshold; + return at_bottom() || $next_row.offset().top <= bottom_threshold; } function adjust(in_view, get_next_row) { // return true only if we make an actual adjustment, so // that we know to short circuit the other direction - if (in_view(next_row)) { + if (in_view($next_row)) { return false; // try other side } - while (!in_view(next_row)) { - candidate = get_next_row(next_row); - if (candidate.length === 0) { + while (!in_view($next_row)) { + $candidate = get_next_row($next_row); + if ($candidate.length === 0) { break; } - next_row = candidate; + $next_row = $candidate; } return true; } @@ -447,14 +448,14 @@ export function keep_pointer_in_view() { adjust(message_is_far_enough_up, rows.prev_visible); } - message_lists.current.select_id(rows.id(next_row), {from_scroll: true}); + message_lists.current.select_id(rows.id($next_row), {from_scroll: true}); } export function initialize() { - jwindow = $(window); - message_pane = $(".app"); + $jwindow = $(window); + $message_pane = $(".app"); // This handler must be placed before all resize handlers in our application - jwindow.on("resize", () => { + $jwindow.on("resize", () => { dimensions.height.reset(); dimensions.width.reset(); top_of_feed.reset(); diff --git a/static/js/muted_topics_ui.js b/static/js/muted_topics_ui.js index 37e6834d96..dc34c4ab67 100644 --- a/static/js/muted_topics_ui.js +++ b/static/js/muted_topics_ui.js @@ -69,11 +69,11 @@ export function mute_topic(stream_id, topic, from_hotkey) { // know what you did if you triggered muting with the // mouse. feedback_widget.show({ - populate(container) { + populate($container) { const rendered_html = render_topic_muted(); - container.html(rendered_html); - container.find(".stream").text(stream_name); - container.find(".topic").text(topic); + $container.html(rendered_html); + $container.find(".stream").text(stream_name); + $container.find(".topic").text(topic); }, on_undo() { unmute_topic(stream_id, topic); diff --git a/static/js/narrow.js b/static/js/narrow.js index e4d1791223..d9c6f95cac 100644 --- a/static/js/narrow.js +++ b/static/js/narrow.js @@ -277,9 +277,9 @@ export function activate(raw_operators, opts) { // having a near: narrow auto-reloaded. id_info.target_id = opts.then_select_id; if (opts.then_select_offset === undefined) { - const row = message_lists.current.get_row(opts.then_select_id); - if (row.length > 0) { - opts.then_select_offset = row.offset().top; + const $row = message_lists.current.get_row(opts.then_select_id); + if ($row.length > 0) { + opts.then_select_offset = $row.offset().top; } } } diff --git a/static/js/navigate.js b/static/js/navigate.js index 71fe2e2f1e..fa312c72d3 100644 --- a/static/js/navigate.js +++ b/static/js/navigate.js @@ -23,9 +23,9 @@ export function down(with_centering) { if (with_centering) { // At the last message, scroll to the bottom so we have // lots of nice whitespace for new messages coming in. - const current_msg_table = rows.get_table(message_lists.current.table_name); + const $current_msg_table = rows.get_table(message_lists.current.table_name); message_viewport.scrollTop( - current_msg_table.safeOuterHeight(true) - message_viewport.height() * 0.1, + $current_msg_table.safeOuterHeight(true) - message_viewport.height() * 0.1, ); unread_ops.process_scrolled_to_bottom(); } @@ -118,9 +118,9 @@ export function page_down() { } export function scroll_to_selected() { - const selected_row = message_lists.current.selected_row(); - if (selected_row && selected_row.length !== 0) { - message_viewport.recenter_view(selected_row); + const $selected_row = message_lists.current.selected_row(); + if ($selected_row && $selected_row.length !== 0) { + message_viewport.recenter_view($selected_row); } } diff --git a/static/js/notifications.js b/static/js/notifications.js index cfc199bc16..b081375c6c 100644 --- a/static/js/notifications.js +++ b/static/js/notifications.js @@ -170,7 +170,7 @@ export function notify_above_composebox( link_msg_id, link_text, ) { - const notification_html = $( + const $notification = $( render_compose_notification({ note, link_class, @@ -180,7 +180,7 @@ export function notify_above_composebox( }), ); clear_compose_notifications(); - $("#out-of-view-notification").append(notification_html); + $("#out-of-view-notification").append($notification); $("#out-of-view-notification").show(); } @@ -237,10 +237,10 @@ export function process_notification(notification) { let msg_count = 1; let notification_source; // Convert the content to plain text, replacing emoji with their alt text - content = $("
    ").html(message.content); - ui.replace_emoji_with_text(content); - spoilers.hide_spoilers_in_notification(content); - content = content.text(); + const $content = $("
    ").html(message.content); + ui.replace_emoji_with_text($content); + spoilers.hide_spoilers_in_notification($content); + content = $content.text(); const topic = message.topic; @@ -552,8 +552,8 @@ function get_message_header(message) { } export function get_local_notify_mix_reason(message) { - const row = message_lists.current.get_row(message.id); - if (row.length > 0) { + const $row = message_lists.current.get_row(message.id); + if ($row.length > 0) { // If our message is in the current message list, we do // not have a mix, so we are happy. return undefined; @@ -697,11 +697,11 @@ export function reify_message_id(opts) { // If a message ID that we're currently storing (as a link) has changed, // update that link as well for (const e of $("#out-of-view-notification a")) { - const elem = $(e); - const message_id = elem.data("message-id"); + const $elem = $(e); + const message_id = $elem.data("message-id"); if (message_id === old_id) { - elem.data("message-id", new_id); + $elem.data("message-id", new_id); } } } diff --git a/static/js/overlays.js b/static/js/overlays.js index 1ef913e074..7ec35b5a47 100644 --- a/static/js/overlays.js +++ b/static/js/overlays.js @@ -5,12 +5,12 @@ import * as blueslip from "./blueslip"; import * as browser_history from "./browser_history"; import * as popovers from "./popovers"; -let active_overlay; +let $active_overlay; let close_handler; let open_overlay_name; function reset_state() { - active_overlay = undefined; + $active_overlay = undefined; close_handler = undefined; open_overlay_name = undefined; } @@ -69,9 +69,9 @@ export function active_modal() { } // Check for Micromodal modals. - const micromodal = $(".micromodal.modal--open"); - if (micromodal.length) { - return `#${CSS.escape(micromodal.attr("id"))}`; + const $micromodal = $(".micromodal.modal--open"); + if ($micromodal.length) { + return `#${CSS.escape($micromodal.attr("id"))}`; } return `#${CSS.escape($(".modal.in").attr("id"))}`; } @@ -79,12 +79,12 @@ export function active_modal() { export function open_overlay(opts) { popovers.hide_all(); - if (!opts.name || !opts.overlay || !opts.on_close) { + if (!opts.name || !opts.$overlay || !opts.on_close) { blueslip.error("Programming error in open_overlay"); return; } - if (active_overlay || open_overlay_name || close_handler) { + if ($active_overlay || open_overlay_name || close_handler) { blueslip.error( "Programming error — trying to open " + opts.name + @@ -99,16 +99,16 @@ export function open_overlay(opts) { // Our overlays are kind of crufty...we have an HTML id // attribute for them and then a data-overlay attribute for // them. Make sure they match. - if (opts.overlay.attr("data-overlay") !== opts.name) { + if (opts.$overlay.attr("data-overlay") !== opts.name) { blueslip.error("Bad overlay setup for " + opts.name); return; } open_overlay_name = opts.name; - active_overlay = opts.overlay; - opts.overlay.addClass("show"); + $active_overlay = opts.$overlay; + opts.$overlay.addClass("show"); - opts.overlay.attr("aria-hidden", "false"); + opts.$overlay.attr("aria-hidden", "false"); $(".app").attr("aria-hidden", "true"); $(".fixed-app").attr("aria-hidden", "true"); $(".header").attr("aria-hidden", "true"); @@ -157,9 +157,9 @@ export function open_modal(selector, conf) { // Micromodal gets elements using the getElementById DOM function // which doesn't require the hash. We add it manually here. const id_selector = `#${selector}`; - const micromodal = $(id_selector); + const $micromodal = $(id_selector); - micromodal.find(".modal__container").on("animationend", (event) => { + $micromodal.find(".modal__container").on("animationend", (event) => { // Micromodal doesn't support Bootstrap-style `shown.bs.modal` and // `hidden.bs.modal` events. We workaround this by using the animationName // from the native event and running the required functions after the @@ -172,8 +172,8 @@ export function open_modal(selector, conf) { // is complete, which isn't really helpful since a modal is open after the // animation is complete. So, we manually add a class after the // animation is complete. - micromodal.addClass("modal--open"); - micromodal.removeClass("modal--opening"); + $micromodal.addClass("modal--open"); + $micromodal.removeClass("modal--opening"); if (conf.on_shown) { conf.on_shown(); @@ -183,9 +183,9 @@ export function open_modal(selector, conf) { // // Call the on_hidden callback after the modal finishes hiding. - micromodal.removeClass("modal--open"); + $micromodal.removeClass("modal--open"); if (conf.autoremove) { - micromodal.remove(); + $micromodal.remove(); } if (conf.on_hidden) { conf.on_hidden(); @@ -202,17 +202,17 @@ export function open_modal(selector, conf) { return; } - const elem = $(selector).expectOne(); - elem.modal("show").attr("aria-hidden", false); + const $elem = $(selector).expectOne(); + $elem.modal("show").attr("aria-hidden", false); // Disable background mouse events when modal is active disable_background_mouse_events(); // Remove previous alert messages from modal, if exists. - elem.find(".alert").hide(); - elem.find(".alert-notification").html(""); + $elem.find(".alert").hide(); + $elem.find(".alert-notification").html(""); if (conf && conf.autoremove) { - elem.on("hidden.bs.modal", () => { - elem.remove(); + $elem.on("hidden.bs.modal", () => { + $elem.remove(); }); } } @@ -232,9 +232,9 @@ export function close_overlay(name) { blueslip.debug("close overlay: " + name); - active_overlay.removeClass("show"); + $active_overlay.removeClass("show"); - active_overlay.attr("aria-hidden", "true"); + $active_overlay.attr("aria-hidden", "true"); $(".app").attr("aria-hidden", "false"); $(".fixed-app").attr("aria-hidden", "false"); $(".header").attr("aria-hidden", "false"); @@ -284,13 +284,13 @@ export function close_modal(selector, conf) { if (conf && conf.micromodal) { const id_selector = `#${selector}`; - const micromodal = $(id_selector); + const $micromodal = $(id_selector); // On-hidden hooks should typically be registered in // overlays.open_modal. However, we offer this alternative // mechanism as a convenience for hooks only known when // closing the modal. - micromodal.find(".modal__container").on("animationend", (event) => { + $micromodal.find(".modal__container").on("animationend", (event) => { const animation_name = event.originalEvent.animationName; if (animation_name === "mmfadeOut" && conf.on_hidden) { conf.on_hidden(); @@ -301,8 +301,8 @@ export function close_modal(selector, conf) { return; } - const elem = $(selector).expectOne(); - elem.modal("hide").attr("aria-hidden", true); + const $elem = $(selector).expectOne(); + $elem.modal("hide").attr("aria-hidden", true); } export function close_active_modal() { @@ -312,9 +312,9 @@ export function close_active_modal() { } // Check for Micromodal modals. - const micromodal = $(".micromodal.modal--open"); - if (micromodal.length) { - Micromodal.close(`${CSS.escape(micromodal.attr("id"))}`); + const $micromodal = $(".micromodal.modal--open"); + if ($micromodal.length) { + Micromodal.close(`${CSS.escape($micromodal.attr("id"))}`); return; } @@ -323,7 +323,7 @@ export function close_active_modal() { export function close_for_hash_change() { $("div.overlay.show").removeClass("show"); - if (active_overlay) { + if ($active_overlay) { close_handler(); } } @@ -331,7 +331,7 @@ export function close_for_hash_change() { export function open_settings() { open_overlay({ name: "settings", - overlay: $("#settings_overlay_container"), + $overlay: $("#settings_overlay_container"), on_close() { browser_history.exit_overlay(); }, diff --git a/static/js/padded_widget.ts b/static/js/padded_widget.ts index c6b180e38b..1d4be747b5 100644 --- a/static/js/padded_widget.ts +++ b/static/js/padded_widget.ts @@ -6,26 +6,26 @@ export function update_padding(opts: { total_rows: number; shown_rows: number; }): void { - const content = $(opts.content_sel); - const padding = $(opts.padding_sel); + const $content = $(opts.content_sel); + const $padding = $(opts.padding_sel); const total_rows = opts.total_rows; const shown_rows = opts.shown_rows; const hidden_rows = total_rows - shown_rows; if (shown_rows === 0) { - padding.height(0); + $padding.height(0); return; } const ratio = hidden_rows / shown_rows; - const content_height = content.height(); + const content_height = $content.height(); if (content_height === undefined) { return; } const new_padding_height = ratio * content_height; - padding.height(new_padding_height); - padding.width(1); + $padding.height(new_padding_height); + $padding.width(1); } diff --git a/static/js/password_quality.ts b/static/js/password_quality.ts index f441fef230..d56561af4d 100644 --- a/static/js/password_quality.ts +++ b/static/js/password_quality.ts @@ -11,16 +11,16 @@ import {$t} from "./i18n"; // if provided. export function password_quality( password: string, - bar: JQuery | undefined, - password_field: JQuery, + $bar: JQuery | undefined, + $password_field: JQuery, ): boolean { - const min_length = password_field.data("minLength"); - const min_guesses = password_field.data("minGuesses"); + const min_length = $password_field.data("minLength"); + const min_guesses = $password_field.data("minGuesses"); const result = zxcvbn(password); const acceptable = password.length >= min_length && result.guesses >= min_guesses; - if (bar !== undefined) { + if ($bar !== undefined) { const t = Number(result.crack_times_seconds.offline_slow_hashing_1e4_per_second); let bar_progress = Math.min(1, Math.log(1 + t) / 22); @@ -32,7 +32,7 @@ export function password_quality( // The bar bottoms out at 10% so there's always something // for the user to see. - bar.width(`${90 * bar_progress + 10}%`) + $bar.width(`${90 * bar_progress + 10}%`) .removeClass("bar-success bar-danger") .addClass(acceptable ? "bar-success" : "bar-danger"); } @@ -40,8 +40,8 @@ export function password_quality( return acceptable; } -export function password_warning(password: string, password_field: JQuery): string { - const min_length = password_field.data("minLength"); +export function password_warning(password: string, $password_field: JQuery): string { + const min_length = $password_field.data("minLength"); if (password.length < min_length) { return $t( diff --git a/static/js/pill_typeahead.js b/static/js/pill_typeahead.js index 2c34b83f28..22efe27459 100644 --- a/static/js/pill_typeahead.js +++ b/static/js/pill_typeahead.js @@ -21,7 +21,7 @@ function group_matcher(query, item) { return false; } -export function set_up(input, pills, opts) { +export function set_up($input, pills, opts) { if (!opts.user && !opts.user_group && !opts.stream) { blueslip.error("Unspecified possible item types"); return; @@ -30,7 +30,7 @@ export function set_up(input, pills, opts) { const include_user_groups = opts.user_group; const include_users = opts.user; - input.typeahead({ + $input.typeahead({ items: 5, fixed: true, dropup: true, @@ -126,7 +126,7 @@ export function set_up(input, pills, opts) { user_pill.append_user(item, pills); } - input.trigger("focus"); + $input.trigger("focus"); if (opts.update_func) { opts.update_func(); } diff --git a/static/js/pm_list.js b/static/js/pm_list.js index 0e14b02445..dcf487d9fb 100644 --- a/static/js/pm_list.js +++ b/static/js/pm_list.js @@ -45,15 +45,15 @@ export function update_private_messages() { } if (private_messages_open) { - const container = ui.get_content_element($("#private-container")); + const $container = ui.get_content_element($("#private-container")); const new_dom = _build_private_messages_list(); function replace_content(html) { - container.html(html); + $container.html(html); } function find() { - return container.find("ul"); + return $container.find("ul"); } vdom.update(replace_content, find, new_dom, prior_dom); diff --git a/static/js/poll_widget.js b/static/js/poll_widget.js index 0f7b39ae70..5d9b53955a 100644 --- a/static/js/poll_widget.js +++ b/static/js/poll_widget.js @@ -9,7 +9,7 @@ import {$t} from "./i18n"; import * as people from "./people"; export function activate({ - elem, + $elem, callback, extra_data: {question = "", options = []} = {}, message, @@ -26,8 +26,8 @@ export function activate({ }); function update_edit_controls() { - const has_question = elem.find("input.poll-question").val().trim() !== ""; - elem.find("button.poll-question-check").toggle(has_question); + const has_question = $elem.find("input.poll-question").val().trim() !== ""; + $elem.find("button.poll-question-check").toggle(has_question); } function render_question() { @@ -39,26 +39,26 @@ export function activate({ const waiting = !is_my_poll && !has_question; const author_help = is_my_poll && !has_question; - elem.find(".poll-question-header").toggle(!input_mode); - elem.find(".poll-question-header").text(question); - elem.find(".poll-edit-question").toggle(can_edit); + $elem.find(".poll-question-header").toggle(!input_mode); + $elem.find(".poll-question-header").text(question); + $elem.find(".poll-edit-question").toggle(can_edit); update_edit_controls(); - elem.find(".poll-question-bar").toggle(input_mode); - elem.find(".poll-option-bar").toggle(can_vote); + $elem.find(".poll-question-bar").toggle(input_mode); + $elem.find(".poll-option-bar").toggle(can_vote); - elem.find(".poll-please-wait").toggle(waiting); + $elem.find(".poll-please-wait").toggle(waiting); - elem.find(".poll-author-help").toggle(author_help); + $elem.find(".poll-author-help").toggle(author_help); } function start_editing() { poll_data.set_input_mode(); const question = poll_data.get_question(); - elem.find("input.poll-question").val(question); + $elem.find("input.poll-question").val(question); render_question(); - elem.find("input.poll-question").trigger("focus"); + $elem.find("input.poll-question").trigger("focus"); } function abort_edit() { @@ -67,8 +67,8 @@ export function activate({ } function submit_question() { - const poll_question_input = elem.find("input.poll-question"); - let new_question = poll_question_input.val().trim(); + const $poll_question_input = $elem.find("input.poll-question"); + let new_question = $poll_question_input.val().trim(); const old_question = poll_data.get_question(); // We should disable the button for blank questions, @@ -92,8 +92,8 @@ export function activate({ } function submit_option() { - const poll_option_input = elem.find("input.poll-option"); - const option = poll_option_input.val().trim(); + const $poll_option_input = $elem.find("input.poll-option"); + const option = $poll_option_input.val().trim(); const options = poll_data.get_widget_data().options; if (poll_data.is_option_present(options, option)) { @@ -104,7 +104,7 @@ export function activate({ return; } - poll_option_input.val("").trigger("focus"); + $poll_option_input.val("").trigger("focus"); const data = poll_data.handle.new_option.outbound(option); callback(data); @@ -117,14 +117,14 @@ export function activate({ function build_widget() { const html = render_widgets_poll_widget(); - elem.html(html); + $elem.html(html); - elem.find("input.poll-question").on("keyup", (e) => { + $elem.find("input.poll-question").on("keyup", (e) => { e.stopPropagation(); update_edit_controls(); }); - elem.find("input.poll-question").on("keydown", (e) => { + $elem.find("input.poll-question").on("keydown", (e) => { e.stopPropagation(); if (e.key === "Enter") { @@ -138,28 +138,28 @@ export function activate({ } }); - elem.find(".poll-edit-question").on("click", (e) => { + $elem.find(".poll-edit-question").on("click", (e) => { e.stopPropagation(); start_editing(); }); - elem.find("button.poll-question-check").on("click", (e) => { + $elem.find("button.poll-question-check").on("click", (e) => { e.stopPropagation(); submit_question(); }); - elem.find("button.poll-question-remove").on("click", (e) => { + $elem.find("button.poll-question-remove").on("click", (e) => { e.stopPropagation(); abort_edit(); }); - elem.find("button.poll-option").on("click", (e) => { + $elem.find("button.poll-option").on("click", (e) => { e.stopPropagation(); check_option_button(); submit_option(); }); - elem.find("input.poll-option").on("keyup", (e) => { + $elem.find("input.poll-option").on("keyup", (e) => { e.stopPropagation(); check_option_button(); @@ -176,19 +176,18 @@ export function activate({ } function check_option_button() { - const poll_option_input = elem.find("input.poll-option"); - const option = poll_option_input.val().trim(); + const $poll_option_input = $elem.find("input.poll-option"); + const option = $poll_option_input.val().trim(); const options = poll_data.get_widget_data().options; if (poll_data.is_option_present(options, option)) { - elem.find("button.poll-option").attr("disabled", true); - elem.find("button.poll-option").attr( - "title", - $t({defaultMessage: "Option already present."}), - ); + $elem.find("button.poll-option").attr("disabled", true); + $elem + .find("button.poll-option") + .attr("title", $t({defaultMessage: "Option already present."})); } else { - elem.find("button.poll-option").attr("disabled", false); - elem.find("button.poll-option").removeAttr("title"); + $elem.find("button.poll-option").attr("disabled", false); + $elem.find("button.poll-option").removeAttr("title"); } } @@ -196,9 +195,10 @@ export function activate({ const widget_data = poll_data.get_widget_data(); const html = render_widgets_poll_widget_results(widget_data); - elem.find("ul.poll-widget").html(html); + $elem.find("ul.poll-widget").html(html); - elem.find("button.poll-vote") + $elem + .find("button.poll-vote") .off("click") .on("click", (e) => { e.stopPropagation(); @@ -207,7 +207,7 @@ export function activate({ }); } - elem.handle_events = function (events) { + $elem.handle_events = function (events) { for (const event of events) { poll_data.handle_event(event.sender_id, event.data); } diff --git a/static/js/popovers.js b/static/js/popovers.js index 53befac646..b6251b1709 100644 --- a/static/js/popovers.js +++ b/static/js/popovers.js @@ -50,21 +50,21 @@ import * as user_status from "./user_status"; import * as user_status_ui from "./user_status_ui"; import * as util from "./util"; -let current_actions_popover_elem; +let $current_actions_popover_elem; let current_flatpickr_instance; -let current_message_info_popover_elem; -let current_user_info_popover_elem; -let current_playground_links_popover_elem; +let $current_message_info_popover_elem; +let $current_user_info_popover_elem; +let $current_playground_links_popover_elem; let userlist_placement = "right"; let list_of_popovers = []; export function clear_for_testing() { - current_actions_popover_elem = undefined; + $current_actions_popover_elem = undefined; current_flatpickr_instance = undefined; - current_message_info_popover_elem = undefined; - current_user_info_popover_elem = undefined; - current_playground_links_popover_elem = undefined; + $current_message_info_popover_elem = undefined; + $current_user_info_popover_elem = undefined; + $current_playground_links_popover_elem = undefined; list_of_popovers.length = 0; userlist_placement = "right"; } @@ -75,8 +75,8 @@ export function clipboard_enable(arg) { return new ClipboardJS(arg); } -export function elem_to_user_id(elem) { - return Number.parseInt(elem.attr("data-user-id"), 10); +export function elem_to_user_id($elem) { + return Number.parseInt($elem.attr("data-user-id"), 10); } // this utilizes the proxy pattern to intercept all calls to $.fn.popover @@ -96,19 +96,19 @@ $.fn.popover = Object.assign(function (...args) { }, old_popover); function copy_email_handler(e) { - const email_el = $(e.trigger.parentElement); - const copy_icon = email_el.find("i"); + const $email_el = $(e.trigger.parentElement); + const $copy_icon = $email_el.find("i"); // only change the parent element's text back to email // and not overwrite the tooltip. - const email_textnode = email_el[0].childNodes[2]; + const email_textnode = $email_el[0].childNodes[2]; - email_el.addClass("email_copied"); + $email_el.addClass("email_copied"); email_textnode.nodeValue = $t({defaultMessage: "Email copied"}); setTimeout(() => { - email_el.removeClass("email_copied"); - email_textnode.nodeValue = copy_icon.attr("data-clipboard-text"); + $email_el.removeClass("email_copied"); + email_textnode.nodeValue = $copy_icon.attr("data-clipboard-text"); }, 1500); e.clearSelection(); } @@ -121,8 +121,8 @@ function init_email_clipboard() { */ $(".user_popover_email").each(function () { if (this.clientWidth < this.scrollWidth) { - const email_el = $(this); - const copy_email_icon = email_el.find("i"); + const $email_el = $(this); + const $copy_email_icon = $email_el.find("i"); /* For deactivated users, the copy-email icon will @@ -130,9 +130,9 @@ function init_email_clipboard() { anything. We don't reveal emails for deactivated users. */ - if (copy_email_icon[0]) { - copy_email_icon.removeClass("hide_copy_icon"); - const copy_email_clipboard = clipboard_enable(copy_email_icon[0]); + if ($copy_email_icon[0]) { + $copy_email_icon.removeClass("hide_copy_icon"); + const copy_email_clipboard = clipboard_enable($copy_email_icon[0]); copy_email_clipboard.on("success", copy_email_handler); } } @@ -157,18 +157,18 @@ function init_email_tooltip(user) { }); } -function load_medium_avatar(user, elt) { +function load_medium_avatar(user, $elt) { const user_avatar_url = people.medium_avatar_url_for_person(user); const sender_avatar_medium = new Image(); sender_avatar_medium.src = user_avatar_url; $(sender_avatar_medium).on("load", function () { - elt.css("background-image", "url(" + $(this).attr("src") + ")"); + $elt.css("background-image", "url(" + $(this).attr("src") + ")"); }); } -function calculate_info_popover_placement(size, elt) { - const ypos = elt.offset().top; +function calculate_info_popover_placement(size, $elt) { + const ypos = $elt.offset().top; if (!(ypos + size / 2 < message_viewport.height() && ypos > size / 2)) { if (ypos + size < message_viewport.height()) { @@ -297,16 +297,16 @@ export const _test_calculate_info_popover_placement = calculate_info_popover_pla // user is the user whose profile to show // message is the message containing it, which should be selected function show_user_info_popover_for_message(element, user, message) { - const last_popover_elem = current_message_info_popover_elem; + const $last_popover_elem = $current_message_info_popover_elem; hide_all(); - if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) { + if ($last_popover_elem !== undefined && $last_popover_elem.get()[0] === element) { // We want it to be the case that a user can dismiss a popover // by clicking on the same element that caused the popover. return; } message_lists.current.select_id(message.id); - const elt = $(element); - if (elt.data("popover") === undefined) { + const $elt = $(element); + if ($elt.data("popover") === undefined) { if (user === undefined) { // This is never supposed to happen, not even for deactivated // users, so we'll need to debug this error if it occurs. @@ -317,7 +317,7 @@ function show_user_info_popover_for_message(element, user, message) { const is_sender_popover = message.sender_id === user.user_id; render_user_info_popover( user, - elt, + $elt, is_sender_popover, true, "respond_personal_button", @@ -325,36 +325,36 @@ function show_user_info_popover_for_message(element, user, message) { "right", ); - current_message_info_popover_elem = elt; + $current_message_info_popover_elem = $elt; } } export function show_user_info_popover(element, user) { - const last_popover_elem = current_user_info_popover_elem; + const $last_popover_elem = $current_user_info_popover_elem; hide_all(); - if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) { + if ($last_popover_elem !== undefined && $last_popover_elem.get()[0] === element) { return; } - const elt = $(element); + const $elt = $(element); render_user_info_popover( user, - elt, + $elt, false, false, "compose_private_message", "user-info-popover", "right", ); - current_user_info_popover_elem = elt; + $current_user_info_popover_elem = $elt; } function get_user_info_popover_for_message_items() { - if (!current_message_info_popover_elem) { + if (!$current_message_info_popover_elem) { blueslip.error("Trying to get menu items when action popover is closed."); return undefined; } - const popover_data = current_message_info_popover_elem.data("popover"); + const popover_data = $current_message_info_popover_elem.data("popover"); if (!popover_data) { blueslip.error("Cannot find popover data for actions menu."); return undefined; @@ -364,18 +364,18 @@ function get_user_info_popover_for_message_items() { } function get_user_info_popover_items() { - const popover_elt = $("div.user-info-popover"); - if (!current_user_info_popover_elem || !popover_elt.length) { + const $popover_elt = $("div.user-info-popover"); + if (!$current_user_info_popover_elem || !$popover_elt.length) { blueslip.error("Trying to get menu items when action popover is closed."); return undefined; } - if (popover_elt.length >= 2) { + if ($popover_elt.length >= 2) { blueslip.error("More than one user info popovers cannot be opened at same time."); return undefined; } - return $("li:not(.divider):visible a", popover_elt); + return $("li:not(.divider):visible a", $popover_elt); } function fetch_group_members(member_ids) { @@ -403,40 +403,40 @@ export const _test_sort_group_members = sort_group_members; // user is the user whose profile to show // message is the message containing it, which should be selected function show_user_group_info_popover(element, group, message) { - const last_popover_elem = current_message_info_popover_elem; + const $last_popover_elem = $current_message_info_popover_elem; // hardcoded pixel height of the popover // note that the actual size varies (in group size), but this is about as big as it gets const popover_size = 390; hide_all(); - if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) { + if ($last_popover_elem !== undefined && $last_popover_elem.get()[0] === element) { // We want it to be the case that a user can dismiss a popover // by clicking on the same element that caused the popover. return; } message_lists.current.select_id(message.id); - const elt = $(element); - if (elt.data("popover") === undefined) { + const $elt = $(element); + if ($elt.data("popover") === undefined) { const args = { group_name: group.name, group_description: group.description, members: sort_group_members(fetch_group_members(Array.from(group.members))), }; - elt.popover({ - placement: calculate_info_popover_placement(popover_size, elt), + $elt.popover({ + placement: calculate_info_popover_placement(popover_size, $elt), template: render_user_group_info_popover({class: "message-info-popover"}), content: render_user_group_info_popover_content(args), html: true, trigger: "manual", }); - elt.popover("show"); - current_message_info_popover_elem = elt; + $elt.popover("show"); + $current_message_info_popover_elem = $elt; } } export function toggle_actions_popover(element, id) { - const last_popover_elem = current_actions_popover_elem; + const $last_popover_elem = $current_actions_popover_elem; hide_all(); - if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) { + if ($last_popover_elem !== undefined && $last_popover_elem.get()[0] === element) { // We want it to be the case that a user can dismiss a popover // by clicking on the same element that caused the popover. return; @@ -445,8 +445,8 @@ export function toggle_actions_popover(element, id) { $(element).closest(".message_row").toggleClass("has_popover has_actions_popover"); message_lists.current.select_id(id); const not_spectator = !page_params.is_spectator; - const elt = $(element); - if (elt.data("popover") === undefined) { + const $elt = $(element); + if ($elt.data("popover") === undefined) { const message = message_lists.current.get(id); const message_container = message_lists.current.view.message_containers.get(message.id); const should_display_hide_option = @@ -530,8 +530,8 @@ export function toggle_actions_popover(element, id) { should_display_quote_and_reply, }; - const ypos = elt.offset().top; - elt.popover({ + const ypos = $elt.offset().top; + $elt.popover({ // Popover height with 7 items in it is ~190 px placement: message_viewport.height() - ypos < 220 ? "top" : "bottom", title: "", @@ -539,8 +539,8 @@ export function toggle_actions_popover(element, id) { html: true, trigger: "manual", }); - elt.popover("show"); - current_actions_popover_elem = elt; + $elt.popover("show"); + $current_actions_popover_elem = $elt; } } @@ -548,14 +548,14 @@ export function render_actions_remind_popover(element, id) { hide_all(); $(element).closest(".message_row").toggleClass("has_popover has_actions_popover"); message_lists.current.select_id(id); - const elt = $(element); - if (elt.data("popover") === undefined) { + const $elt = $(element); + if ($elt.data("popover") === undefined) { const message = message_lists.current.get(id); const args = { message, }; - const ypos = elt.offset().top; - elt.popover({ + const ypos = $elt.offset().top; + $elt.popover({ // Popover height with 7 items in it is ~190 px placement: message_viewport.height() - ypos < 220 ? "top" : "bottom", title: "", @@ -563,7 +563,7 @@ export function render_actions_remind_popover(element, id) { html: true, trigger: "manual", }); - elt.popover("show"); + $elt.popover("show"); current_flatpickr_instance = $( `.remind.custom[data-message-id="${CSS.escape(message.id)}"]`, ).flatpickr({ @@ -573,17 +573,17 @@ export function render_actions_remind_popover(element, id) { minDate: "today", plugins: [new ConfirmDatePlugin({})], }); - current_actions_popover_elem = elt; + $current_actions_popover_elem = $elt; } } function get_action_menu_menu_items() { - if (!current_actions_popover_elem) { + if (!$current_actions_popover_elem) { blueslip.error("Trying to get menu items when action popover is closed."); return undefined; } - const popover_data = current_actions_popover_elem.data("popover"); + const popover_data = $current_actions_popover_elem.data("popover"); if (!popover_data) { blueslip.error("Cannot find popover data for actions menu."); return undefined; @@ -592,40 +592,40 @@ function get_action_menu_menu_items() { return $("li:not(.divider):visible a", popover_data.$tip); } -export function focus_first_popover_item(items) { - if (!items) { +export function focus_first_popover_item($items) { + if (!$items) { return; } - items.eq(0).expectOne().trigger("focus"); + $items.eq(0).expectOne().trigger("focus"); } -export function popover_items_handle_keyboard(key, items) { - if (!items) { +export function popover_items_handle_keyboard(key, $items) { + if (!$items) { return; } - let index = items.index(items.filter(":focus")); + let index = $items.index($items.filter(":focus")); - if (key === "enter" && index >= 0 && index < items.length) { - items[index].click(); + if (key === "enter" && index >= 0 && index < $items.length) { + $items[index].click(); return; } if (index === -1) { index = 0; - } else if ((key === "down_arrow" || key === "vim_down") && index < items.length - 1) { + } else if ((key === "down_arrow" || key === "vim_down") && index < $items.length - 1) { index += 1; } else if ((key === "up_arrow" || key === "vim_up") && index > 0) { index -= 1; } - items.eq(index).trigger("focus"); + $items.eq(index).trigger("focus"); } function focus_first_action_popover_item() { // For now I recommend only calling this when the user opens the menu with a hotkey. // Our popup menus act kind of funny when you mix keyboard and mouse. - const items = get_action_menu_menu_items(); - focus_first_popover_item(items); + const $items = get_action_menu_menu_items(); + focus_first_popover_item($items); } export function open_message_menu(message) { @@ -638,26 +638,26 @@ export function open_message_menu(message) { const message_id = message.id; toggle_actions_popover($(".selected_message .actions_hover")[0], message_id); - if (current_actions_popover_elem) { + if ($current_actions_popover_elem) { focus_first_action_popover_item(); } return true; } export function actions_menu_handle_keyboard(key) { - const items = get_action_menu_menu_items(); - popover_items_handle_keyboard(key, items); + const $items = get_action_menu_menu_items(); + popover_items_handle_keyboard(key, $items); } export function actions_popped() { - return current_actions_popover_elem !== undefined; + return $current_actions_popover_elem !== undefined; } export function hide_actions_popover() { if (actions_popped()) { $(".has_popover").removeClass("has_popover has_actions_popover"); - current_actions_popover_elem.popover("destroy"); - current_actions_popover_elem = undefined; + $current_actions_popover_elem.popover("destroy"); + $current_actions_popover_elem = undefined; } if (current_flatpickr_instance !== undefined) { current_flatpickr_instance.destroy(); @@ -666,24 +666,24 @@ export function hide_actions_popover() { } export function message_info_popped() { - return current_message_info_popover_elem !== undefined; + return $current_message_info_popover_elem !== undefined; } export function hide_message_info_popover() { if (message_info_popped()) { - current_message_info_popover_elem.popover("destroy"); - current_message_info_popover_elem = undefined; + $current_message_info_popover_elem.popover("destroy"); + $current_message_info_popover_elem = undefined; } } export function user_info_popped() { - return current_user_info_popover_elem !== undefined; + return $current_user_info_popover_elem !== undefined; } export function hide_user_info_popover() { if (user_info_popped()) { - current_user_info_popover_elem.popover("destroy"); - current_user_info_popover_elem = undefined; + $current_user_info_popover_elem.popover("destroy"); + $current_user_info_popover_elem = undefined; } } @@ -729,8 +729,8 @@ export function hide_user_sidebar_popover() { function focus_user_info_popover_item() { // For now I recommend only calling this when the user opens the menu with a hotkey. // Our popup menus act kind of funny when you mix keyboard and mouse. - const items = get_user_info_popover_for_message_items(); - focus_first_popover_item(items); + const $items = get_user_info_popover_for_message_items(); + focus_first_popover_item($items); } function get_user_sidebar_popover_items() { @@ -743,18 +743,18 @@ function get_user_sidebar_popover_items() { } export function user_sidebar_popover_handle_keyboard(key) { - const items = get_user_sidebar_popover_items(); - popover_items_handle_keyboard(key, items); + const $items = get_user_sidebar_popover_items(); + popover_items_handle_keyboard(key, $items); } export function user_info_popover_for_message_handle_keyboard(key) { - const items = get_user_info_popover_for_message_items(); - popover_items_handle_keyboard(key, items); + const $items = get_user_info_popover_for_message_items(); + popover_items_handle_keyboard(key, $items); } export function user_info_popover_handle_keyboard(key) { - const items = get_user_info_popover_items(); - popover_items_handle_keyboard(key, items); + const $items = get_user_info_popover_items(); + popover_items_handle_keyboard(key, $items); } export function show_sender_info() { @@ -764,7 +764,7 @@ export function show_sender_info() { const message = message_lists.current.get(rows.id($message)); const user = people.get_by_user_id(message.sender_id); show_user_info_popover_for_message($sender[0], user, message); - if (current_message_info_popover_elem && !page_params.is_spectator) { + if ($current_message_info_popover_elem && !page_params.is_spectator) { focus_user_info_popover_item(); } } @@ -784,17 +784,17 @@ export function set_suppress_scroll_hide() { // playground links for each code block. The element is the target element // to pop off of. export function toggle_playground_link_popover(element, playground_info) { - const last_popover_elem = current_playground_links_popover_elem; + const $last_popover_elem = $current_playground_links_popover_elem; hide_all(); - if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) { + if ($last_popover_elem !== undefined && $last_popover_elem.get()[0] === element) { // We want it to be the case that a user can dismiss a popover // by clicking on the same element that caused the popover. return; } - const elt = $(element); - if (elt.data("popover") === undefined) { - const ypos = elt.offset().top; - elt.popover({ + const $elt = $(element); + if ($elt.data("popover") === undefined) { + const ypos = $elt.offset().top; + $elt.popover({ // It's unlikely we'll have more than 3-4 playground links // for one language, so it should be OK to hardcode 120 here. placement: message_viewport.height() - ypos < 120 ? "top" : "bottom", @@ -803,32 +803,32 @@ export function toggle_playground_link_popover(element, playground_info) { html: true, trigger: "manual", }); - elt.popover("show"); - current_playground_links_popover_elem = elt; + $elt.popover("show"); + $current_playground_links_popover_elem = $elt; } } export function hide_playground_links_popover() { - if (current_playground_links_popover_elem !== undefined) { - current_playground_links_popover_elem.popover("destroy"); - current_playground_links_popover_elem = undefined; + if ($current_playground_links_popover_elem !== undefined) { + $current_playground_links_popover_elem.popover("destroy"); + $current_playground_links_popover_elem = undefined; } } export function register_click_handlers() { $("#main_div").on("click", ".actions_hover", function (e) { - const row = $(this).closest(".message_row"); + const $row = $(this).closest(".message_row"); e.stopPropagation(); - toggle_actions_popover(this, rows.id(row)); + toggle_actions_popover(this, rows.id($row)); }); $("#main_div").on( "click", ".sender_name, .sender_name-in-status, .inline_profile_picture", function (e) { - const row = $(this).closest(".message_row"); + const $row = $(this).closest(".message_row"); e.stopPropagation(); - const message = message_lists.current.get(rows.id(row)); + const message = message_lists.current.get(rows.id($row)); const user = people.get_by_user_id(message.sender_id); show_user_info_popover_for_message(this, user, message); }, @@ -842,9 +842,9 @@ export function register_click_handlers() { if (id_string === "*" || email === "*") { return; } - const row = $(this).closest(".message_row"); + const $row = $(this).closest(".message_row"); e.stopPropagation(); - const message = message_lists.current.get(rows.id(row)); + const message = message_lists.current.get(rows.id($row)); let user; if (id_string) { const user_id = Number.parseInt(id_string, 10); @@ -857,9 +857,9 @@ export function register_click_handlers() { $("#main_div").on("click", ".user-group-mention", function (e) { const user_group_id = Number.parseInt($(this).attr("data-user-group-id"), 10); - const row = $(this).closest(".message_row"); + const $row = $(this).closest(".message_row"); e.stopPropagation(); - const message = message_lists.current.get(rows.id(row)); + const message = message_lists.current.get(rows.id($row)); try { const group = user_groups.get_user_group_from_id(user_group_id); show_user_group_info_popover(this, group, message); @@ -873,19 +873,19 @@ export function register_click_handlers() { "click", ".code_external_link", function (e) { - const view_in_playground_button = $(this); - const codehilite_div = $(this).closest(".codehilite"); + const $view_in_playground_button = $(this); + const $codehilite_div = $(this).closest(".codehilite"); e.stopPropagation(); const playground_info = realm_playground.get_playground_info_for_languages( - codehilite_div.data("code-language"), + $codehilite_div.data("code-language"), ); // We do the code extraction here and set the target href combining the url_prefix // and the extracted code. Depending on whether the language has multiple playground // links configured, a popover is show. - const extracted_code = codehilite_div.find("code").text(); + const extracted_code = $codehilite_div.find("code").text(); if (playground_info.length === 1) { const url_prefix = playground_info[0].url_prefix; - view_in_playground_button.attr( + $view_in_playground_button.attr( "href", url_prefix + encodeURIComponent(extracted_code), ); @@ -1036,8 +1036,8 @@ export function register_click_handlers() { // use email of currently selected user, rather than some elem comparison, // as the presence list may be redrawn with new elements. - const target = $(this).closest("li"); - const user_id = elem_to_user_id(target.find("a")); + const $target = $(this).closest("li"); + const user_id = elem_to_user_id($target.find("a")); if (current_user_sidebar_user_id === user_id) { // If the popover is already shown, clicking again should toggle it. @@ -1059,7 +1059,7 @@ export function register_click_handlers() { render_user_info_popover( user, - target, + $target, false, false, "compose_private_message", @@ -1068,7 +1068,7 @@ export function register_click_handlers() { ); current_user_sidebar_user_id = user.user_id; - current_user_sidebar_popover = target.data("popover"); + current_user_sidebar_popover = $target.data("popover"); }); $("body").on("click", ".respond_button", (e) => { @@ -1161,16 +1161,16 @@ export function register_click_handlers() { }); $("body").on("click", ".popover_toggle_collapse", (e) => { const message_id = $(e.currentTarget).data("message-id"); - const row = message_lists.current.get_row(message_id); - const message = message_lists.current.get(rows.id(row)); + const $row = message_lists.current.get_row(message_id); + const message = message_lists.current.get(rows.id($row)); hide_actions_popover(); - if (row) { + if ($row) { if (message.collapsed) { - condense.uncollapse(row); + condense.uncollapse($row); } else { - condense.collapse(row); + condense.collapse($row); } } @@ -1179,21 +1179,21 @@ export function register_click_handlers() { }); $("body").on("click", ".popover_edit_message", (e) => { const message_id = $(e.currentTarget).data("message-id"); - const row = message_lists.current.get_row(message_id); + const $row = message_lists.current.get_row(message_id); hide_actions_popover(); - message_edit.start(row); + message_edit.start($row); e.stopPropagation(); e.preventDefault(); }); $("body").on("click", ".rehide_muted_user_message", (e) => { const message_id = $(e.currentTarget).data("message-id"); - const row = message_lists.current.get_row(message_id); - const message = message_lists.current.get(rows.id(row)); + const $row = message_lists.current.get_row(message_id); + const message = message_lists.current.get(rows.id($row)); const message_container = message_lists.current.view.message_containers.get(message.id); hide_actions_popover(); - if (row && !message_container.is_hidden) { + if ($row && !message_container.is_hidden) { message_lists.current.view.hide_revealed_message(message_id); } @@ -1202,8 +1202,8 @@ export function register_click_handlers() { }); $("body").on("click", ".view_edit_history", (e) => { const message_id = $(e.currentTarget).data("message-id"); - const row = message_lists.current.get_row(message_id); - const message = message_lists.current.get(rows.id(row)); + const $row = message_lists.current.get_row(message_id); + const message = message_lists.current.get(rows.id($row)); hide_actions_popover(); message_edit_history.show_history(message); @@ -1244,8 +1244,8 @@ export function register_click_handlers() { hide_actions_popover(); // e.trigger returns the DOM element triggering the copy action const message_id = e.trigger.dataset.messageId; - const row = $(`[zid='${CSS.escape(message_id)}']`); - row.find(".alert-msg") + const $row = $(`[zid='${CSS.escape(message_id)}']`); + $row.find(".alert-msg") .text($t({defaultMessage: "Copied!"})) .css("display", "block") .delay(1000) @@ -1359,20 +1359,25 @@ export function set_userlist_placement(placement) { userlist_placement = placement || "right"; } -export function compute_placement(elt, popover_height, popover_width, prefer_vertical_positioning) { - const client_rect = elt.get(0).getBoundingClientRect(); +export function compute_placement( + $elt, + popover_height, + popover_width, + prefer_vertical_positioning, +) { + const client_rect = $elt.get(0).getBoundingClientRect(); const distance_from_top = client_rect.top; const distance_from_bottom = message_viewport.height() - client_rect.bottom; const distance_from_left = client_rect.left; const distance_from_right = message_viewport.width() - client_rect.right; const elt_will_fit_horizontally = - distance_from_left + elt.width() / 2 > popover_width / 2 && - distance_from_right + elt.width() / 2 > popover_width / 2; + distance_from_left + $elt.width() / 2 > popover_width / 2 && + distance_from_right + $elt.width() / 2 > popover_width / 2; const elt_will_fit_vertically = - distance_from_bottom + elt.height() / 2 > popover_height / 2 && - distance_from_top + elt.height() / 2 > popover_height / 2; + distance_from_bottom + $elt.height() / 2 > popover_height / 2 && + distance_from_top + $elt.height() / 2 > popover_height / 2; // default to placing the popover in the center of the screen let placement = "viewport_center"; diff --git a/static/js/portico/help.js b/static/js/portico/help.js index d3053a5c6f..84b5073b56 100644 --- a/static/js/portico/help.js +++ b/static/js/portico/help.js @@ -37,17 +37,17 @@ function highlight_current_article() { } const hash = window.location.hash; - let article = $(`.help .sidebar a[href="${CSS.escape(path + hash)}"]`); - if (!article.length) { + let $article = $(`.help .sidebar a[href="${CSS.escape(path + hash)}"]`); + if (!$article.length) { // If there isn't an entry in the left sidebar that matches // the full URL+hash pair, instead highlight an entry in the // left sidebar that just matches the URL part. - article = $(`.help .sidebar a[href="${CSS.escape(path)}"]`); + $article = $(`.help .sidebar a[href="${CSS.escape(path)}"]`); } // Highlight current article link and the heading of the same - article.closest("ul").css("display", "block"); - article.addClass("highlighted"); - article.attr("tabindex", "-1"); + $article.closest("ul").css("display", "block"); + $article.addClass("highlighted"); + $article.attr("tabindex", "-1"); } function render_code_sections() { diff --git a/static/js/portico/integrations.js b/static/js/portico/integrations.js index 7141cb832f..128ac1787f 100644 --- a/static/js/portico/integrations.js +++ b/static/js/portico/integrations.js @@ -156,11 +156,11 @@ function hide_catalog_show_integration() { link = name; } } - const category_el = $("") + const $category_el = $("") .attr("href", "/integrations/" + link) .append('

    '); - category_el.find(".integration-category").attr("data-category", link).text(category); - $("#integration-instructions-group .categories").append(category_el); + $category_el.find(".integration-category").attr("data-category", link).text(category); + $("#integration-instructions-group .categories").append($category_el); } $("#integration-instructions-group").css({ opacity: 0, @@ -305,10 +305,10 @@ function integration_events() { $('#integration-search input[type="text"]').on("keypress", (e) => { if (e.key === "Enter" && e.target.value !== "") { for (const integration_element of $(".integration-lozenges").children()) { - const integration = $(integration_element).find(".integration-lozenge"); + const $integration = $(integration_element).find(".integration-lozenge"); - if ($(integration).css("display") !== "none") { - $(integration).closest("a")[0].click(); + if ($($integration).css("display") !== "none") { + $($integration).closest("a")[0].click(); break; } } diff --git a/static/js/portico/signup.js b/static/js/portico/signup.js index 5932165acb..6ebb6d6c05 100644 --- a/static/js/portico/signup.js +++ b/static/js/portico/signup.js @@ -7,18 +7,18 @@ $(() => { // NB: this file is included on multiple pages. In each context, // some of the jQuery selectors below will return empty lists. - const password_field = $("#id_password, #id_new_password1"); - if (password_field.length > 0) { + const $password_field = $("#id_password, #id_new_password1"); + if ($password_field.length > 0) { $.validator.addMethod( "password_strength", - (value) => password_quality(value, undefined, password_field), - () => password_warning(password_field.val(), password_field), + (value) => password_quality(value, undefined, $password_field), + () => password_warning($password_field.val(), $password_field), ); // Reset the state of the password strength bar if the page // was just reloaded due to a validation failure on the backend. - password_quality(password_field.val(), $("#pw_strength .bar"), password_field); + password_quality($password_field.val(), $("#pw_strength .bar"), $password_field); - password_field.on("input", function () { + $password_field.on("input", function () { // Update the password strength bar even if we aren't validating // the field yet. password_quality($(this).val(), $("#pw_strength .bar"), $(this)); @@ -58,17 +58,17 @@ $(() => { new_password1: "password_strength", }, errorElement: "p", - errorPlacement(error, element) { + errorPlacement($error, $element) { // NB: this is called at most once, when the error element // is created. - element.next(".help-inline.alert.alert-error").remove(); - if (element.next().is('label[for="' + element.attr("id") + '"]')) { - error.insertAfter(element.next()).addClass("help-inline alert alert-error"); - } else if (element.parent().is('label[for="' + element.attr("id") + '"]')) { + $element.next(".help-inline.alert.alert-error").remove(); + if ($element.next().is('label[for="' + $element.attr("id") + '"]')) { + $error.insertAfter($element.next()).addClass("help-inline alert alert-error"); + } else if ($element.parent().is('label[for="' + $element.attr("id") + '"]')) { // For checkboxes and radio-buttons - error.insertAfter(element.parent()).addClass("help-inline alert alert-error"); + $error.insertAfter($element.parent()).addClass("help-inline alert alert-error"); } else { - error.insertAfter(element).addClass("help-inline alert alert-error"); + $error.insertAfter($element).addClass("help-inline alert alert-error"); } }, highlight: highlight("error"), @@ -80,18 +80,18 @@ $(() => { if ($(".help-inline:not(:empty)").length === 0) { // Find the first input field present in the form that is // not hidden and disabled and store it in a variable. - const firstInputElement = $("input:not(:hidden, :disabled)").first(); + const $firstInputElement = $("input:not(:hidden, :disabled)").first(); // Focus on the first input field in the form. - common.autofocus(firstInputElement); + common.autofocus($firstInputElement); } else { // If input field with errors is present. // Find the input field having errors and stores it in a variable. - const inputElementWithError = $(".help-inline:not(:empty)") + const $inputElementWithError = $(".help-inline:not(:empty)") .first() .parent() .find("input"); // Focus on the input field having errors. - common.autofocus(inputElementWithError); + common.autofocus($inputElementWithError); } // reset error message displays @@ -144,10 +144,10 @@ $(() => { $("#send_confirm").validate({ errorElement: "div", - errorPlacement(error) { + errorPlacement($error) { $(".email-frontend-error").empty(); $("#send_confirm .alert.email-backend-error").remove(); - error.appendTo(".email-frontend-error").addClass("text-error"); + $error.appendTo(".email-frontend-error").addClass("text-error"); }, success() { $("#errors").empty(); diff --git a/static/js/portico/tabbed-instructions.js b/static/js/portico/tabbed-instructions.js index 0e00084b12..f6d097e277 100644 --- a/static/js/portico/tabbed-instructions.js +++ b/static/js/portico/tabbed-instructions.js @@ -52,8 +52,8 @@ export function activate_correct_tab($codeSection) { }); // if no tab was activated, just activate the first one - const active_list_items = $li.filter(".active"); - if (!active_list_items.length) { + const $active_list_items = $li.filter(".active"); + if (!$active_list_items.length) { $li.first().addClass("active"); const language = $li.first()[0].dataset.language; $blocks.filter("[data-language=" + language + "]").addClass("active"); diff --git a/static/js/reactions.js b/static/js/reactions.js index 328e0f718b..a2fa0b2e36 100644 --- a/static/js/reactions.js +++ b/static/js/reactions.js @@ -204,26 +204,26 @@ export function get_reaction_title_data(message_id, local_id) { } export function get_reaction_section(message_id) { - const message_element = $(".message_table").find(`[zid='${CSS.escape(message_id)}']`); - const section = message_element.find(".message_reactions"); - return section; + const $message_element = $(".message_table").find(`[zid='${CSS.escape(message_id)}']`); + const $section = $message_element.find(".message_reactions"); + return $section; } export function find_reaction(message_id, local_id) { - const reaction_section = get_reaction_section(message_id); - const reaction = reaction_section.find(`[data-reaction-id='${CSS.escape(local_id)}']`); - return reaction; + const $reaction_section = get_reaction_section(message_id); + const $reaction = $reaction_section.find(`[data-reaction-id='${CSS.escape(local_id)}']`); + return $reaction; } export function get_add_reaction_button(message_id) { - const reaction_section = get_reaction_section(message_id); - const add_button = reaction_section.find(".reaction_button"); - return add_button; + const $reaction_section = get_reaction_section(message_id); + const $add_button = $reaction_section.find(".reaction_button"); + return $add_button; } -export function set_reaction_count(reaction, count) { - const count_element = reaction.find(".message_reaction_count"); - count_element.text(count); +export function set_reaction_count($reaction, count) { + const $count_element = $reaction.find(".message_reaction_count"); + $count_element.text(count); } export function add_reaction(event) { @@ -292,15 +292,15 @@ view.update_existing_reaction = function ({ // for this emoji and sets up our user_list. This function // simply updates the DOM. const local_id = get_local_reaction_id({reaction_type, emoji_code}); - const reaction = find_reaction(message_id, local_id); + const $reaction = find_reaction(message_id, local_id); - set_reaction_count(reaction, user_list.length); + set_reaction_count($reaction, user_list.length); const new_label = generate_title(emoji_name, user_list); - reaction.attr("aria-label", new_label); + $reaction.attr("aria-label", new_label); if (user_id === page_params.user_id) { - reaction.addClass("reacted"); + $reaction.addClass("reacted"); } }; @@ -332,11 +332,11 @@ view.insert_new_reaction = function ({message_id, user_id, emoji_name, emoji_cod context.class = "message_reaction"; } - const new_reaction = $(render_message_reaction(context)); + const $new_reaction = $(render_message_reaction(context)); // Now insert it before the add button. - const reaction_button_element = get_add_reaction_button(message_id); - new_reaction.insertBefore(reaction_button_element); + const $reaction_button_element = get_add_reaction_button(message_id); + $new_reaction.insertBefore($reaction_button_element); }; export function remove_reaction(event) { @@ -393,12 +393,12 @@ view.remove_reaction = function ({ emoji_code, }) { const local_id = get_local_reaction_id({reaction_type, emoji_code}); - const reaction = find_reaction(message_id, local_id); + const $reaction = find_reaction(message_id, local_id); if (user_list.length === 0) { // If this user was the only one reacting for this emoji, we simply // remove the reaction and exit. - reaction.remove(); + $reaction.remove(); return; } @@ -407,14 +407,14 @@ view.remove_reaction = function ({ // "reacted" class. const new_label = generate_title(emoji_name, user_list); - reaction.attr("aria-label", new_label); + $reaction.attr("aria-label", new_label); // If the user is the current user, turn off the "reacted" class. - set_reaction_count(reaction, user_list.length); + set_reaction_count($reaction, user_list.length); if (user_id === page_params.user_id) { - reaction.removeClass("reacted"); + $reaction.removeClass("reacted"); } }; diff --git a/static/js/realm_icon.js b/static/js/realm_icon.js index a1d9ac88f7..c48e845835 100644 --- a/static/js/realm_icon.js +++ b/static/js/realm_icon.js @@ -42,7 +42,7 @@ export function rerender() { $("#realm-icon-upload-widget .image-delete-button").hide(); // Need to clear input because of a small edge case // where you try to upload the same image you just deleted. - const file_input = $("#realm-icon-upload-widget .image_file_input"); - file_input.val(""); + const $file_input = $("#realm-icon-upload-widget .image_file_input"); + $file_input.val(""); } } diff --git a/static/js/realm_logo.js b/static/js/realm_logo.js index f47916fe6a..2e3c9c20af 100644 --- a/static/js/realm_logo.js +++ b/static/js/realm_logo.js @@ -14,13 +14,13 @@ export function build_realm_logo_widget(upload_function, is_night) { logo_source = page_params.realm_night_logo_source; } - const delete_button_elem = $(logo_section_id + " .image-delete-button"); - const file_input_elem = $(logo_section_id + " .image_file_input"); - const file_input_error_elem = $(logo_section_id + " .image_file_input_error"); - const upload_button_elem = $(logo_section_id + " .image_upload_button"); + const $delete_button_elem = $(logo_section_id + " .image-delete-button"); + const $file_input_elem = $(logo_section_id + " .image_file_input"); + const $file_input_error_elem = $(logo_section_id + " .image_file_input_error"); + const $upload_button_elem = $(logo_section_id + " .image_upload_button"); const get_file_input = function () { - return file_input_elem.expectOne(); + return $file_input_elem.expectOne(); }; if (!page_params.is_admin) { @@ -28,13 +28,13 @@ export function build_realm_logo_widget(upload_function, is_night) { } if (logo_source === "D") { - delete_button_elem.hide(); + $delete_button_elem.hide(); } else { - delete_button_elem.show(); + $delete_button_elem.show(); } const data = {night: JSON.stringify(is_night)}; - delete_button_elem.on("click", (e) => { + $delete_button_elem.on("click", (e) => { e.preventDefault(); e.stopPropagation(); channel.del({ @@ -45,27 +45,27 @@ export function build_realm_logo_widget(upload_function, is_night) { return upload_widget.build_direct_upload_widget( get_file_input, - file_input_error_elem.expectOne(), - upload_button_elem.expectOne(), + $file_input_error_elem.expectOne(), + $upload_button_elem.expectOne(), upload_function, page_params.max_logo_file_size_mib, ); } -function change_logo_delete_button(logo_source, logo_delete_button, file_input) { +function change_logo_delete_button(logo_source, $logo_delete_button, $file_input) { if (logo_source === "U") { - logo_delete_button.show(); + $logo_delete_button.show(); } else { - logo_delete_button.hide(); + $logo_delete_button.hide(); // Need to clear input because of a small edge case // where you try to upload the same image you just deleted. - file_input.val(""); + $file_input.val(""); } } export function render() { - const file_input = $("#realm-day-logo-upload-widget .image_file_input"); - const night_file_input = $("#realm-night-logo-upload-widget .realm-logo-file-input"); + const $file_input = $("#realm-day-logo-upload-widget .image_file_input"); + const $night_file_input = $("#realm-night-logo-upload-widget .realm-logo-file-input"); $("#realm-day-logo-upload-widget .image-block").attr("src", page_params.realm_logo_url); if (page_params.realm_night_logo_source === "D" && page_params.realm_logo_source !== "D") { @@ -91,11 +91,11 @@ export function render() { change_logo_delete_button( page_params.realm_logo_source, $("#realm-day-logo-upload-widget .image-delete-button"), - file_input, + $file_input, ); change_logo_delete_button( page_params.realm_night_logo_source, $("#realm-night-logo-upload-widget .image-delete-button"), - night_file_input, + $night_file_input, ); } diff --git a/static/js/recent_topics_ui.js b/static/js/recent_topics_ui.js index acc3deff42..7fd013cefb 100644 --- a/static/js/recent_topics_ui.js +++ b/static/js/recent_topics_ui.js @@ -47,7 +47,7 @@ const MAX_EXTRA_SENDERS = 10; // So, we use table as a grid system and // track the coordinates of the focus element via // `row_focus` and `col_focus`. -export let current_focus_elem = "table"; +export let $current_focus_elem = "table"; // If user clicks a topic in recent topics, then // we store that topic here so that we can restore focus @@ -93,8 +93,8 @@ export function load_filters() { export function set_default_focus() { // If at any point we are confused about the currently // focused element, we switch focus to search. - current_focus_elem = $("#recent_topics_search"); - current_focus_elem.trigger("focus"); + $current_focus_elem = $("#recent_topics_search"); + $current_focus_elem.trigger("focus"); compose_closed_ui.set_standard_text_for_reply_button(); } @@ -107,32 +107,32 @@ function get_min_load_count(already_rendered_count, load_count) { } function is_table_focused() { - return current_focus_elem === "table"; + return $current_focus_elem === "table"; } function set_table_focus(row, col, using_keyboard) { - const topic_rows = $("#recent_topics_table table tbody tr"); - if (topic_rows.length === 0 || row < 0 || row >= topic_rows.length) { + const $topic_rows = $("#recent_topics_table table tbody tr"); + if ($topic_rows.length === 0 || row < 0 || row >= $topic_rows.length) { row_focus = 0; // return focus back to filters if we cannot focus on the table. set_default_focus(); return true; } - const topic_row = topic_rows.eq(row); + const $topic_row = $topic_rows.eq(row); // We need to allow table to render first before setting focus. setTimeout( - () => topic_row.find(".recent_topics_focusable").eq(col).children().trigger("focus"), + () => $topic_row.find(".recent_topics_focusable").eq(col).children().trigger("focus"), 0, ); - current_focus_elem = "table"; + $current_focus_elem = "table"; if (using_keyboard) { const scroll_element = document.querySelector( "#recent_topics_table .table_fix_head .simplebar-content-wrapper", ); const half_height_of_visible_area = scroll_element.offsetHeight / 2; - const topic_offset = topic_offset_to_visible_area(topic_row); + const topic_offset = topic_offset_to_visible_area($topic_row); if (topic_offset === "above") { scroll_element.scrollBy({top: -1 * half_height_of_visible_area}); @@ -142,8 +142,8 @@ function set_table_focus(row, col, using_keyboard) { } const message = { - stream: topic_row.find(".recent_topic_stream a").text(), - topic: topic_row.find(".recent_topic_name a").text(), + stream: $topic_row.find(".recent_topic_stream a").text(), + topic: $topic_row.find(".recent_topic_name a").text(), }; compose_closed_ui.update_reply_recipient_label(message); return true; @@ -152,13 +152,13 @@ function set_table_focus(row, col, using_keyboard) { export function get_focused_row_message() { if (is_table_focused()) { const recent_topic_id_prefix_len = "recent_topic:".length; - const topic_rows = $("#recent_topics_table table tbody tr"); - if (topic_rows.length === 0) { + const $topic_rows = $("#recent_topics_table table tbody tr"); + if ($topic_rows.length === 0) { return undefined; } - const topic_row = topic_rows.eq(row_focus); - const topic_id = topic_row.attr("id").slice(recent_topic_id_prefix_len); + const $topic_row = $topic_rows.eq(row_focus); + const topic_id = $topic_row.attr("id").slice(recent_topic_id_prefix_len); const topic_last_msg_id = topics.get(topic_id).last_msg_id; return message_store.get(topic_last_msg_id); } @@ -176,7 +176,7 @@ export function revive_current_focus() { return false; } - if (!current_focus_elem) { + if (!$current_focus_elem) { set_default_focus(); return false; } @@ -198,14 +198,14 @@ export function revive_current_focus() { return true; } - const filter_button = current_focus_elem.data("filter"); + const filter_button = $current_focus_elem.data("filter"); if (!filter_button) { set_default_focus(); } else { - current_focus_elem = $("#recent_topics_filter_buttons").find( + $current_focus_elem = $("#recent_topics_filter_buttons").find( `[data-filter='${CSS.escape(filter_button)}']`, ); - current_focus_elem.trigger("focus"); + $current_focus_elem.trigger("focus"); } return true; } @@ -439,7 +439,7 @@ export function set_filter(filter) { // set `filters`. // Get the button which was clicked. - const filter_elem = $("#recent_topics_filter_buttons").find( + const $filter_elem = $("#recent_topics_filter_buttons").find( `[data-filter="${CSS.escape(filter)}"]`, ); @@ -447,7 +447,7 @@ export function set_filter(filter) { if (filter === "all" && filters.size !== 0) { filters = new Set(); // If the button was already selected, remove the filter. - } else if (filter_elem.hasClass("btn-recent-selected")) { + } else if ($filter_elem.hasClass("btn-recent-selected")) { filters.delete(filter); // If the button was not selected, we add the filter. } else { @@ -510,13 +510,13 @@ function topic_sort(a, b) { } function topic_offset_to_visible_area(topic_row) { - const scroll_container = $("#recent_topics_table .table_fix_head"); + const $scroll_container = $("#recent_topics_table .table_fix_head"); const thead_height = 30; const under_closed_compose_region_height = 50; - const scroll_container_top = $(scroll_container).offset().top + thead_height; + const scroll_container_top = $($scroll_container).offset().top + thead_height; const scroll_container_bottom = - scroll_container_top + $(scroll_container).height() - under_closed_compose_region_height; + scroll_container_top + $($scroll_container).height() - under_closed_compose_region_height; const topic_row_top = $(topic_row).offset().top; const topic_row_bottom = topic_row_top + $(topic_row).height(); @@ -535,24 +535,24 @@ function topic_offset_to_visible_area(topic_row) { function set_focus_to_element_in_center() { const table_wrapper_element = document.querySelector("#recent_topics_table .table_fix_head"); - const topic_rows = $("#recent_topics_table table tbody tr"); + const $topic_rows = $("#recent_topics_table table tbody tr"); - if (row_focus > topic_rows.length) { + if (row_focus > $topic_rows.length) { // User used a filter which reduced // the number of visible rows. return; } - let topic_row = topic_rows.eq(row_focus); - const topic_offset = topic_offset_to_visible_area(topic_row); + let $topic_row = $topic_rows.eq(row_focus); + const topic_offset = topic_offset_to_visible_area($topic_row); if (topic_offset !== "visible") { // Get the element at the center of the table. const position = table_wrapper_element.getBoundingClientRect(); const topic_center_x = (position.left + position.right) / 2; const topic_center_y = (position.top + position.bottom) / 2; - topic_row = $(document.elementFromPoint(topic_center_x, topic_center_y)).closest("tr"); + $topic_row = $(document.elementFromPoint(topic_center_x, topic_center_y)).closest("tr"); - row_focus = topic_rows.index(topic_row); + row_focus = $topic_rows.index($topic_row); set_table_focus(row_focus, col_focus); } } @@ -593,11 +593,11 @@ export function complete_rerender() { search_val: $("#recent_topics_search").val() || "", }); $("#recent_topics_table").html(rendered_body); - const container = $("#recent_topics_table table tbody"); - container.empty(); - topics_widget = ListWidget.create(container, mapped_topic_values, { + const $container = $("#recent_topics_table table tbody"); + $container.empty(); + topics_widget = ListWidget.create($container, mapped_topic_values, { name: "recent_topics_table", - parent_container: $("#recent_topics_table"), + $parent_container: $("#recent_topics_table"), modifier(item) { return render_recent_topic_row(format_topic(item)); }, @@ -613,7 +613,7 @@ export function complete_rerender() { topic_sort, }, html_selector: get_topic_row, - simplebar_container: $("#recent_topics_table .table_fix_head"), + $simplebar_container: $("#recent_topics_table .table_fix_head"), callback_after_render: revive_current_focus, is_scroll_position_for_render, post_scroll__pre_render_callback: set_focus_to_element_in_center, @@ -662,9 +662,9 @@ export function hide() { // remains on the focused element even after it is hidden. We // forcefully blur it so that focus returns to the visible // focused element. - const focused_element = $(document.activeElement); - if ($("#recent_topics_view").has(focused_element)) { - focused_element.trigger("blur"); + const $focused_element = $(document.activeElement); + if ($("#recent_topics_view").has($focused_element)) { + $focused_element.trigger("blur"); } $("#message_view_header_underpadding").show(); @@ -690,12 +690,12 @@ export function hide() { } function is_focus_at_last_table_row() { - const topic_rows = $("#recent_topics_table table tbody tr"); - return row_focus === topic_rows.length - 1; + const $topic_rows = $("#recent_topics_table table tbody tr"); + return row_focus === $topic_rows.length - 1; } export function focus_clicked_element(topic_row_index, col, topic_key) { - current_focus_elem = "table"; + $current_focus_elem = "table"; col_focus = col; row_focus = topic_row_index; @@ -736,22 +736,22 @@ export function change_focused_element($elt, input_key) { case "open_recent_topics": return false; case "shift_tab": - current_focus_elem = filter_buttons().last(); + $current_focus_elem = filter_buttons().last(); break; case "left_arrow": if (start !== 0 || is_selected) { return false; } - current_focus_elem = filter_buttons().last(); + $current_focus_elem = filter_buttons().last(); break; case "tab": - current_focus_elem = filter_buttons().first(); + $current_focus_elem = filter_buttons().first(); break; case "right_arrow": if (end !== text_length || is_selected) { return false; } - current_focus_elem = filter_buttons().first(); + $current_focus_elem = filter_buttons().first(); break; case "down_arrow": set_table_focus(row_focus, col_focus); @@ -763,7 +763,7 @@ export function change_focused_element($elt, input_key) { // We only do this for search because we don't want the focus to // go away from the input box when `revive_current_focus` is called // on rerender when user is typing. - current_focus_elem = $("#recent_topics_search"); + $current_focus_elem = $("#recent_topics_search"); compose_closed_ui.set_standard_text_for_reply_button(); return true; case "escape": @@ -776,24 +776,24 @@ export function change_focused_element($elt, input_key) { } else if ($elt.hasClass("btn-recent-filters")) { switch (input_key) { case "click": - current_focus_elem = $elt; + $current_focus_elem = $elt; return true; case "shift_tab": case "vim_left": case "left_arrow": if (filter_buttons().first()[0] === $elt[0]) { - current_focus_elem = $("#recent_topics_search"); + $current_focus_elem = $("#recent_topics_search"); } else { - current_focus_elem = $elt.prev(); + $current_focus_elem = $elt.prev(); } break; case "tab": case "vim_right": case "right_arrow": if (filter_buttons().last()[0] === $elt[0]) { - current_focus_elem = $("#recent_topics_search"); + $current_focus_elem = $("#recent_topics_search"); } else { - current_focus_elem = $elt.next(); + $current_focus_elem = $elt.next(); } break; case "vim_down": @@ -865,9 +865,9 @@ export function change_focused_element($elt, input_key) { set_table_focus(row_focus, col_focus, true); return true; } - if (current_focus_elem && input_key !== "escape") { - current_focus_elem.trigger("focus"); - if (current_focus_elem.hasClass("btn-recent-filters")) { + if ($current_focus_elem && input_key !== "escape") { + $current_focus_elem.trigger("focus"); + if ($current_focus_elem.hasClass("btn-recent-filters")) { compose_closed_ui.set_standard_text_for_reply_button(); } return true; diff --git a/static/js/reload.js b/static/js/reload.js index 5a8e535599..e396f03673 100644 --- a/static/js/reload.js +++ b/static/js/reload.js @@ -65,10 +65,10 @@ function preserve_state(send_after_reload, save_pointer, save_narrow, save_compo } if (save_narrow) { - const row = message_lists.home.selected_row(); + const $row = message_lists.home.selected_row(); if (!narrow_state.active()) { - if (row.length > 0) { - url += "+offset=" + row.offset().top; + if ($row.length > 0) { + url += "+offset=" + $row.offset().top; } } else { url += "+offset=" + message_lists.home.pre_narrow_offset; @@ -77,9 +77,9 @@ function preserve_state(send_after_reload, save_pointer, save_narrow, save_compo if (narrow_pointer !== -1) { url += "+narrow_pointer=" + narrow_pointer; } - const narrow_row = message_list.narrowed.selected_row(); - if (narrow_row.length > 0) { - url += "+narrow_offset=" + narrow_row.offset().top; + const $narrow_row = message_list.narrowed.selected_row(); + if ($narrow_row.length > 0) { + url += "+narrow_offset=" + $narrow_row.offset().top; } } } diff --git a/static/js/reminder.js b/static/js/reminder.js index 2f62cd3017..ac6e23d678 100644 --- a/static/js/reminder.js +++ b/static/js/reminder.js @@ -107,9 +107,9 @@ export function schedule_message(request = compose.create_message_object()) { } export function do_set_reminder_for_message(message_id, timestamp) { - const row = $(`[zid='${CSS.escape(message_id)}']`); + const $row = $(`[zid='${CSS.escape(message_id)}']`); function error() { - row.find(".alert-msg") + $row.find(".alert-msg") .text($t({defaultMessage: "Reminder not set!"})) .css("display", "block") .css("color", "#b94a48") @@ -155,7 +155,7 @@ export function do_set_reminder_for_message(message_id, timestamp) { reminder_message.to_user_ids = people.email_list_to_user_ids_string(emails); function success() { - row.find(".alert-msg") + $row.find(".alert-msg") .text($t({defaultMessage: "Reminder set!"})) .css("display", "block") .delay(1000) diff --git a/static/js/rendered_markdown.js b/static/js/rendered_markdown.js index df253a843e..d846746e0a 100644 --- a/static/js/rendered_markdown.js +++ b/static/js/rendered_markdown.js @@ -70,13 +70,13 @@ export function set_name_in_mention_element(element, name) { } } -export const update_elements = (content) => { +export const update_elements = ($content) => { // Set the rtl class if the text has an rtl direction - if (rtl.get_direction(content.text()) === "rtl") { - content.addClass("rtl"); + if (rtl.get_direction($content.text()) === "rtl") { + $content.addClass("rtl"); } - content.find(".user-mention").each(function () { + $content.find(".user-mention").each(function () { const user_id = get_user_id_for_mention_button(this); // We give special highlights to the mention buttons // that refer to the current user. @@ -98,7 +98,7 @@ export const update_elements = (content) => { } }); - content.find(".user-group-mention").each(function () { + $content.find(".user-group-mention").each(function () { const user_group_id = get_user_group_id_for_mention_button(this); let user_group; try { @@ -124,7 +124,7 @@ export const update_elements = (content) => { } }); - content.find("a.stream").each(function () { + $content.find("a.stream").each(function () { const stream_id = Number.parseInt($(this).attr("data-stream-id"), 10); if (stream_id && !$(this).find(".highlight").length) { // Display the current name for stream if it is not @@ -139,7 +139,7 @@ export const update_elements = (content) => { } }); - content.find("a.stream-topic").each(function () { + $content.find("a.stream-topic").each(function () { const stream_id = Number.parseInt($(this).attr("data-stream-id"), 10); if (stream_id && !$(this).find(".highlight").length) { // Display the current name for stream if it is not @@ -155,7 +155,7 @@ export const update_elements = (content) => { } }); - content.find("time").each(function () { + $content.find("time").each(function () { // Populate each timestamp span with mentioned time // in user's local time zone. const time_str = $(this).attr("datetime"); @@ -175,7 +175,7 @@ export const update_elements = (content) => { } }); - content.find("span.timestamp-error").each(function () { + $content.find("span.timestamp-error").each(function () { const [, time_str] = /^Invalid time format: (.*)$/.exec($(this).text()); const text = $t( {defaultMessage: "Invalid time format: {timestamp}"}, @@ -184,7 +184,7 @@ export const update_elements = (content) => { $(this).text(text); }); - content.find("div.spoiler-header").each(function () { + $content.find("div.spoiler-header").each(function () { // If a spoiler block has no header content, it should have a default header. // We do this client side to allow for i18n by the client. if ($(this).html().trim().length === 0) { @@ -198,7 +198,7 @@ export const update_elements = (content) => { }); // Display the view-code-in-playground and the copy-to-clipboard button inside the div.codehilite element. - content.find("div.codehilite").each(function () { + $content.find("div.codehilite").each(function () { const $codehilite = $(this); const $pre = $codehilite.find("pre"); const fenced_code_lang = $codehilite.data("code-language"); @@ -211,23 +211,23 @@ export const update_elements = (content) => { // there are multiple playgrounds, we display a // popover listing the options. let title = $t({defaultMessage: "View in playground"}); - const view_in_playground_button = $(view_code_in_playground()); - $pre.prepend(view_in_playground_button); + const $view_in_playground_button = $(view_code_in_playground()); + $pre.prepend($view_in_playground_button); if (playground_info.length === 1) { title = $t( {defaultMessage: "View in {playground_name}"}, {playground_name: playground_info[0].name}, ); } else { - view_in_playground_button.attr("aria-haspopup", "true"); + $view_in_playground_button.attr("aria-haspopup", "true"); } - view_in_playground_button.attr("data-tippy-content", title); - view_in_playground_button.attr("aria-label", title); + $view_in_playground_button.attr("data-tippy-content", title); + $view_in_playground_button.attr("aria-label", title); } } - const copy_button = $(copy_code_button()); - $pre.prepend(copy_button); - new ClipboardJS(copy_button[0], { + const $copy_button = $(copy_code_button()); + $pre.prepend($copy_button); + new ClipboardJS($copy_button[0], { text(copy_element) { return $(copy_element).siblings("code").text(); }, @@ -237,7 +237,7 @@ export const update_elements = (content) => { // Display emoji (including realm emoji) as text if // user_settings.emojiset is 'text'. if (user_settings.emojiset === "text") { - content.find(".emoji").replaceWith(function () { + $content.find(".emoji").replaceWith(function () { const text = $(this).attr("title"); return ":" + text + ":"; }); diff --git a/static/js/resize.js b/static/js/resize.js index ad57004f9a..4dcec23152 100644 --- a/static/js/resize.js +++ b/static/js/resize.js @@ -86,11 +86,11 @@ function left_userlist_get_new_heights() { res.main_div_min_height = viewport_height - top_navbar_height; // left sidebar - const stream_filters = $("#stream_filters").expectOne(); - const buddy_list_wrapper = $("#buddy_list_wrapper").expectOne(); + const $stream_filters = $("#stream_filters").expectOne(); + const $buddy_list_wrapper = $("#buddy_list_wrapper").expectOne(); - const stream_filters_real_height = stream_filters.prop("scrollHeight"); - const user_list_real_height = ui.get_scroll_element(buddy_list_wrapper).prop("scrollHeight"); + const stream_filters_real_height = $stream_filters.prop("scrollHeight"); + const user_list_real_height = ui.get_scroll_element($buddy_list_wrapper).prop("scrollHeight"); res.total_leftlist_height = viewport_height - @@ -101,7 +101,7 @@ function left_userlist_get_new_heights() { $("#streams_header").safeOuterHeight(true) - $("#userlist-header").safeOuterHeight(true) - $("#user_search_section").safeOuterHeight(true) - - Number.parseInt(stream_filters.css("marginBottom"), 10); + Number.parseInt($stream_filters.css("marginBottom"), 10); const blocks = [ { @@ -171,15 +171,15 @@ export function reset_compose_message_max_height(bottom_whitespace_height) { } // Take properties of the whichever message area is visible. - const visible_textarea = $("#compose-textarea:visible, #preview_message_area:visible"); + const $visible_textarea = $("#compose-textarea:visible, #preview_message_area:visible"); const compose_height = Number.parseInt($("#compose").outerHeight(), 10); - const compose_textarea_height = Number.parseInt(visible_textarea.outerHeight(), 10); + const compose_textarea_height = Number.parseInt($visible_textarea.outerHeight(), 10); const compose_non_textarea_height = compose_height - compose_textarea_height; // The `preview_message_area` can have a slightly different height // than `compose-textarea` based on operating system. We just // ensure that the last message is not overlapped by compose box. - visible_textarea.css( + $visible_textarea.css( "max-height", // The 10 here leaves space for the selected message border. bottom_whitespace_height - compose_non_textarea_height - 10, @@ -207,21 +207,21 @@ export function resize_stream_filters_container(h) { } export function resize_sidebars() { - let sidebar; + let $sidebar; if (user_settings.left_side_userlist) { const css_narrow_mode = message_viewport.is_narrow(); $("#top_navbar").removeClass("rightside-userlist"); - const right_items = $(".right-sidebar-items").expectOne(); + const $right_items = $(".right-sidebar-items").expectOne(); if (css_narrow_mode && !narrow_window) { // move stuff to the left sidebar (skinny mode) narrow_window = true; popovers.set_userlist_placement("left"); - sidebar = $("#left-sidebar").expectOne(); - sidebar.append(right_items); + $sidebar = $("#left-sidebar").expectOne(); + $sidebar.append($right_items); $("#buddy_list_wrapper").css("margin", "0px"); $("#userlist-toggle").css("display", "none"); $("#invite-user-link").hide(); @@ -229,8 +229,8 @@ export function resize_sidebars() { // move stuff to the right sidebar (wide mode) narrow_window = false; popovers.set_userlist_placement("right"); - sidebar = $("#right-sidebar").expectOne(); - sidebar.append(right_items); + $sidebar = $("#right-sidebar").expectOne(); + $sidebar.append($right_items); $("#buddy_list_wrapper").css("margin", ""); $("#userlist-toggle").css("display", ""); $("#invite-user-link").show(); diff --git a/static/js/rows.js b/static/js/rows.js index ded8b56229..49049b5547 100644 --- a/static/js/rows.js +++ b/static/js/rows.js @@ -6,36 +6,36 @@ import * as message_store from "./message_store"; // We don't need an andSelf() here because we already know // that our next element is *not* a message_row, so this // isn't going to end up empty unless we're at the bottom or top. -export function next_visible(message_row) { - if (message_row === undefined || message_row.length === 0) { +export function next_visible($message_row) { + if ($message_row === undefined || $message_row.length === 0) { return $(); } - const row = message_row.next(".selectable_row"); - if (row.length !== 0) { - return row; + const $row = $message_row.next(".selectable_row"); + if ($row.length !== 0) { + return $row; } - const recipient_row = get_message_recipient_row(message_row); - const next_recipient_rows = $(recipient_row).nextAll(".recipient_row"); - if (next_recipient_rows.length === 0) { + const $recipient_row = get_message_recipient_row($message_row); + const $next_recipient_rows = $($recipient_row).nextAll(".recipient_row"); + if ($next_recipient_rows.length === 0) { return $(); } - return $(".selectable_row", next_recipient_rows[0]).first(); + return $(".selectable_row", $next_recipient_rows[0]).first(); } -export function prev_visible(message_row) { - if (message_row === undefined || message_row.length === 0) { +export function prev_visible($message_row) { + if ($message_row === undefined || $message_row.length === 0) { return $(); } - const row = message_row.prev(".selectable_row"); - if (row.length !== 0) { - return row; + const $row = $message_row.prev(".selectable_row"); + if ($row.length !== 0) { + return $row; } - const recipient_row = get_message_recipient_row(message_row); - const prev_recipient_rows = $(recipient_row).prevAll(".recipient_row"); - if (prev_recipient_rows.length === 0) { + const $recipient_row = get_message_recipient_row($message_row); + const $prev_recipient_rows = $($recipient_row).prevAll(".recipient_row"); + if ($prev_recipient_rows.length === 0) { return $(); } - return $(".selectable_row", prev_recipient_rows[0]).last(); + return $(".selectable_row", $prev_recipient_rows[0]).last(); } export function first_visible() { @@ -54,28 +54,28 @@ export function visible_range(start_id, end_id) { const rows = []; - let row = message_lists.current.get_row(start_id); - let msg_id = id(row); + let $row = message_lists.current.get_row(start_id); + let msg_id = id($row); while (msg_id <= end_id) { - rows.push(row); + rows.push($row); if (msg_id >= end_id) { break; } - row = next_visible(row); - msg_id = id(row); + $row = next_visible($row); + msg_id = id($row); } return rows; } -export function is_draft_row(row) { - return row.find(".restore-draft").length >= 1; +export function is_draft_row($row) { + return $row.find(".restore-draft").length >= 1; } -export function id(message_row) { - if (is_draft_row(message_row)) { +export function id($message_row) { + if (is_draft_row($message_row)) { blueslip.error("Drafts have no zid"); return undefined; } @@ -88,11 +88,11 @@ export function id(message_row) { more data now. */ - if (message_row.length !== 1) { + if ($message_row.length !== 1) { blueslip.error("Caller should pass in a single row."); } - const zid = message_row.attr("zid"); + const zid = $message_row.attr("zid"); if (zid === undefined) { blueslip.error("Calling code passed rows.id a row with no zid attr."); @@ -101,8 +101,8 @@ export function id(message_row) { return Number.parseFloat(zid); } -export function local_echo_id(message_row) { - const zid = message_row.attr("zid"); +export function local_echo_id($message_row) { + const zid = $message_row.attr("zid"); if (zid === undefined) { blueslip.error("Calling code passed rows.local_id a row with no zid attr."); @@ -130,8 +130,8 @@ export function get_message_id(elem) { // Gets the message_id for elem, where elem is a DOM // element inside a message. This is typically used // in click handlers for things like the reaction button. - const row = $(elem).closest(".message_row"); - const message_id = id(row); + const $row = $(elem).closest(".message_row"); + const message_id = id($row); return message_id; } @@ -150,27 +150,27 @@ export function first_message_in_group(message_group) { return $("div.message_row", message_group).first(); } -export function get_message_recipient_row(message_row) { - return $(message_row).parent(".recipient_row").expectOne(); +export function get_message_recipient_row($message_row) { + return $($message_row).parent(".recipient_row").expectOne(); } -export function get_message_recipient_header(message_row) { - return $(message_row).parent(".recipient_row").find(".message_header").expectOne(); +export function get_message_recipient_header($message_row) { + return $($message_row).parent(".recipient_row").find(".message_header").expectOne(); } export function recipient_from_group(message_group) { return message_store.get(id($(message_group).children(".message_row").first().expectOne())); } -export function id_for_recipient_row(recipient_row) { +export function id_for_recipient_row($recipient_row) { // A recipient row can be either a normal recipient row, or // the FRB, which is a fake recipient row. If it's a FRB, it has // a 'zid' property that stores the message id it is directly over - const msg_row = first_message_in_group(recipient_row); - if (msg_row.length === 0) { + const $msg_row = first_message_in_group($recipient_row); + if ($msg_row.length === 0) { // If we're narrowing from the FRB, take the msg id // directly from it - return id(recipient_row); + return id($recipient_row); } - return id(msg_row); + return id($msg_row); } diff --git a/static/js/rtl.js b/static/js/rtl.js index 0ceadedf90..4959fc902f 100644 --- a/static/js/rtl.js +++ b/static/js/rtl.js @@ -137,15 +137,15 @@ export function get_direction(str) { return "ltr"; } -export function set_rtl_class_for_textarea(textarea) { +export function set_rtl_class_for_textarea($textarea) { // Set the rtl class if the text has an rtl direction, remove it otherwise - let text = textarea.val(); + let text = $textarea.val(); if (text.startsWith("```quote")) { text = text.slice(8); } if (get_direction(text) === "rtl") { - textarea.addClass("rtl"); + $textarea.addClass("rtl"); } else { - textarea.removeClass("rtl"); + $textarea.removeClass("rtl"); } } diff --git a/static/js/scroll_util.js b/static/js/scroll_util.js index 78b5a2a607..f81ae30a22 100644 --- a/static/js/scroll_util.js +++ b/static/js/scroll_util.js @@ -20,20 +20,20 @@ export function scroll_delta(opts) { return delta; } -export function scroll_element_into_container(elem, container) { +export function scroll_element_into_container($elem, $container) { // This does the minimum amount of scrolling that is needed to make // the element visible. It doesn't try to center the element, so // this will be non-intrusive to users when they already have // the element visible. - container = ui.get_scroll_element(container); - const elem_top = elem.position().top; - const elem_bottom = elem_top + elem.innerHeight(); + $container = ui.get_scroll_element($container); + const elem_top = $elem.position().top; + const elem_bottom = elem_top + $elem.innerHeight(); const opts = { elem_top, elem_bottom, - container_height: container.height(), + container_height: $container.height(), }; const delta = scroll_delta(opts); @@ -42,5 +42,5 @@ export function scroll_element_into_container(elem, container) { return; } - container.scrollTop(container.scrollTop() + delta); + $container.scrollTop($container.scrollTop() + delta); } diff --git a/static/js/search.js b/static/js/search.js index 11457bc377..9476117007 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -14,12 +14,12 @@ import * as ui_util from "./ui_util"; export let is_using_input_method = false; export function narrow_or_search_for_term(search_string) { - const search_query_box = $("#search_query"); + const $search_query_box = $("#search_query"); if (is_using_input_method) { // Neither narrow nor search when using input tools as // `updater` is also triggered when 'enter' is triggered // while using input tool - return search_query_box.val(); + return $search_query_box.val(); } ui_util.change_tab_to("#message_feed_container"); @@ -44,17 +44,17 @@ export function narrow_or_search_for_term(search_string) { // Narrowing will have already put some operators in the search box, // so leave the current text in. if (!page_params.search_pills_enabled) { - search_query_box.trigger("blur"); + $search_query_box.trigger("blur"); } - return search_query_box.val(); + return $search_query_box.val(); } function update_buttons_with_focus(focused) { - const search_query_box = $("#search_query"); + const $search_query_box = $("#search_query"); // Show buttons iff the search input is focused, or has non-empty contents, // or we are narrowed. - if (focused || search_query_box.val() || narrow_state.active()) { + if (focused || $search_query_box.val() || narrow_state.active()) { $(".search_button").prop("disabled", false); } } @@ -64,9 +64,9 @@ export function update_button_visibility() { } export function initialize() { - const search_query_box = $("#search_query"); - const searchbox_form = $("#searchbox_form"); - const searchbox = $("#searchbox"); + const $search_query_box = $("#search_query"); + const $searchbox_form = $("#searchbox_form"); + const $searchbox = $("#searchbox"); // Data storage for the typeahead. // This maps a search string to an object with a "description" field. @@ -75,7 +75,7 @@ export function initialize() { // just represents the key of the hash, so it's redundant.) let search_map = new Map(); - search_query_box.typeahead({ + $search_query_box.typeahead({ source(query) { let base_query = ""; if (page_params.search_pills_enabled) { @@ -102,7 +102,7 @@ export function initialize() { updater(search_string) { if (page_params.search_pills_enabled) { search_pill.append_search_string(search_string, search_pill_widget.widget); - return search_query_box.val(); + return $search_query_box.val(); } return narrow_or_search_for_term(search_string); }, @@ -114,7 +114,7 @@ export function initialize() { on_move() { if (page_params.search_pills_enabled) { - ui_util.place_caret_at_end(search_query_box[0]); + ui_util.place_caret_at_end($search_query_box[0]); } }, // Use our custom typeahead `on_escape` hook to exit @@ -122,7 +122,7 @@ export function initialize() { on_escape: message_view_header.exit_search, }); - searchbox_form.on("compositionend", () => { + $searchbox_form.on("compositionend", () => { // Set `is_using_input_method` to true if Enter is pressed to exit // the input tool popover and get the text in the search bar. Then // we suppress searching triggered by this Enter key by checking @@ -131,10 +131,10 @@ export function initialize() { is_using_input_method = true; }); - searchbox_form + $searchbox_form .on("keydown", (e) => { update_button_visibility(); - if (e.key === "Enter" && search_query_box.is(":focus")) { + if (e.key === "Enter" && $search_query_box.is(":focus")) { // Don't submit the form so that the typeahead can instead // handle our Enter keypress. Any searching that needs // to be done will be handled in the keyup. @@ -147,7 +147,7 @@ export function initialize() { return; } - if (e.key === "Enter" && search_query_box.is(":focus")) { + if (e.key === "Enter" && $search_query_box.is(":focus")) { // We just pressed Enter and the box had focus, which // means we didn't use the typeahead at all. In that // case, we should act as though we're searching by @@ -156,8 +156,8 @@ export function initialize() { // indicate that they've done what they need to do) // Pill is already added during keydown event of input pills. - narrow_or_search_for_term(search_query_box.val()); - search_query_box.trigger("blur"); + narrow_or_search_for_term($search_query_box.val()); + $search_query_box.trigger("blur"); update_buttons_with_focus(false); } }); @@ -166,8 +166,8 @@ export function initialize() { // but the code was moved here from elsewhere, and it would be // more work to re-order everything and make them private. - search_query_box.on("focus", focus_search); - search_query_box.on("blur", (e) => { + $search_query_box.on("focus", focus_search); + $search_query_box.on("blur", (e) => { // The search query box is a visual cue as to // whether search or narrowing is active. If // the user blurs the search box, then we should @@ -204,9 +204,9 @@ export function initialize() { // Uses jquery instead of pure css as the `:focus` event occurs on `#search_query`, // while we want to add box-shadow to `#searchbox`. This could have been done // with `:focus-within` CSS selector, but it is not supported in IE or Opera. - searchbox.on("focusout", () => { + $searchbox.on("focusout", () => { message_view_header.close_search_bar_and_open_narrow_description(); - searchbox.css({"box-shadow": "unset"}); + $searchbox.css({"box-shadow": "unset"}); }); } } diff --git a/static/js/search_pill.js b/static/js/search_pill.js index ab60181b0b..d4ed02e6a3 100644 --- a/static/js/search_pill.js +++ b/static/js/search_pill.js @@ -14,9 +14,9 @@ export function get_search_string_from_item(item) { return item.display_value; } -export function create_pills(pill_container) { +export function create_pills($pill_container) { const pills = input_pill.create({ - container: pill_container, + $container: $pill_container, create_item_from_text: create_item_from_search_string, get_text_from_item: get_search_string_from_item, }); diff --git a/static/js/search_pill_widget.js b/static/js/search_pill_widget.js index b38af44349..ad271477b5 100644 --- a/static/js/search_pill_widget.js +++ b/static/js/search_pill_widget.js @@ -10,8 +10,8 @@ export function initialize() { if (!page_params.search_pills_enabled) { return; } - const container = $("#search_arrows"); - widget = search_pill.create_pills(container); + const $container = $("#search_arrows"); + widget = search_pill.create_pills($container); widget.onPillRemove(() => { if (widget.items().length === 0) { diff --git a/static/js/settings_account.js b/static/js/settings_account.js index c65f7c54d9..2b485894a8 100644 --- a/static/js/settings_account.js +++ b/static/js/settings_account.js @@ -30,10 +30,10 @@ import {user_settings} from "./user_settings"; let password_quality; // Loaded asynchronously export function update_email(new_email) { - const email_input = $("#change_email"); + const $email_input = $("#change_email"); - if (email_input) { - email_input.text(new_email); + if ($email_input) { + $email_input.text(new_email); } } @@ -41,9 +41,9 @@ export function update_full_name(new_full_name) { // Arguably, this should work more like how the `update_email` // flow works, where we update the name in the modal on open, // rather than updating it here, but this works. - const full_name_input = $(".full-name-change-form input[name='full_name']"); - if (full_name_input) { - full_name_input.val(new_full_name); + const $full_name_input = $(".full-name-change-form input[name='full_name']"); + if ($full_name_input) { + $full_name_input.val(new_full_name); } } @@ -103,14 +103,14 @@ function update_custom_profile_field(field, method) { field_id = field.id; } - const spinner_element = $( + const $spinner_element = $( `.custom_user_field[data-field-id="${CSS.escape(field_id)}"] .custom-field-status`, ).expectOne(); settings_ui.do_settings_change( method, "/json/users/me/profile_data", {data: JSON.stringify([field])}, - spinner_element, + $spinner_element, ); } @@ -225,10 +225,10 @@ export function initialize_custom_user_type_fields( // If field is not editable and field value is null, we don't expect // pill container for that field and proceed further if (field.type === field_types.USER.id && (field_value_raw || is_editable)) { - const pill_container = $(element_id) + const $pill_container = $(element_id) .find(`.custom_user_field[data-field-id="${CSS.escape(field.id)}"] .pill-container`) .expectOne(); - const pills = user_pill.create_pills(pill_container); + const pills = user_pill.create_pills($pill_container); function update_custom_user_field() { const fields = []; @@ -253,15 +253,15 @@ export function initialize_custom_user_type_fields( } if (is_editable) { - const input = pill_container.children(".input"); + const $input = $pill_container.children(".input"); if (set_handler_on_update) { const opts = {update_func: update_custom_user_field, user: true}; - pill_typeahead.set_up(input, pills, opts); + pill_typeahead.set_up($input, pills, opts); pills.onPillRemove(() => { update_custom_user_field(); }); } else { - pill_typeahead.set_up(input, pills, {user: true}); + pill_typeahead.set_up($input, pills, {user: true}); } } user_pills.set(field.id, pills); @@ -499,15 +499,15 @@ export function set_up() { function do_change_password(e) { e.preventDefault(); e.stopPropagation(); - const change_password_error = $("#change_password_modal").find("#dialog_error"); - change_password_error.hide(); + const $change_password_error = $("#change_password_modal").find("#dialog_error"); + $change_password_error.hide(); const data = { old_password: $("#old_password").val(), new_password: $("#new_password").val(), }; - const new_pw_field = $("#new_password"); + const $new_pw_field = $("#new_password"); const new_pw = data.new_password; if (new_pw !== "") { if (password_quality === undefined) { @@ -517,7 +517,7 @@ export function set_up() { "Sorry for the trouble!", ); return; - } else if (!password_quality(new_pw, undefined, new_pw_field)) { + } else if (!password_quality(new_pw, undefined, $new_pw_field)) { settings_change_error($t_html({defaultMessage: "New password is too weak"})); return; } @@ -533,7 +533,7 @@ export function set_up() { dialog_widget.hide_dialog_spinner(); channel.set_password_change_in_progress(false); }, - error_msg_element: change_password_error, + $error_msg_element: $change_password_error, failure_msg_html: null, }; settings_ui.do_settings_change( @@ -547,8 +547,8 @@ export function set_up() { } $("#new_password").on("input", () => { - const field = $("#new_password"); - password_quality?.(field.val(), $("#pw_strength .bar"), field); + const $field = $("#new_password"); + password_quality?.($field.val(), $("#pw_strength .bar"), $field); }); $("#full_name").on("change", (e) => { @@ -569,7 +569,7 @@ export function set_up() { function do_change_email(e) { e.preventDefault(); e.stopPropagation(); - const change_email_error = $("#change_email_modal").find("#dialog_error"); + const $change_email_error = $("#change_email_modal").find("#dialog_error"); const data = {}; data.email = $("#change_email_container").find("input[name='email']").val(); @@ -588,7 +588,7 @@ export function set_up() { error_continuation() { dialog_widget.hide_dialog_spinner(); }, - error_msg_element: change_email_error, + $error_msg_element: $change_email_error, success_msg_html: $t_html( {defaultMessage: "Check your email ({email}) to confirm the new address."}, {email: data.email}, @@ -605,9 +605,9 @@ export function set_up() { } function change_email_post_render() { - const input_elem = $("#change_email_container").find("input[name='email']"); + const $input_elem = $("#change_email_container").find("input[name='email']"); const email = $("#change_email").text().trim(); - input_elem.val(email); + $input_elem.val(email); } $("#change_email").on("click", (e) => { @@ -633,8 +633,8 @@ export function set_up() { $("#profile-settings").on("click", ".custom_user_field .remove_date", (e) => { e.preventDefault(); e.stopPropagation(); - const field = $(e.target).closest(".custom_user_field").expectOne(); - const field_id = Number.parseInt($(field).attr("data-field-id"), 10); + const $field = $(e.target).closest(".custom_user_field").expectOne(); + const field_id = Number.parseInt($($field).attr("data-field-id"), 10); update_user_custom_profile_fields([field_id], channel.del); }); @@ -731,11 +731,11 @@ export function set_up() { }); }); - function upload_avatar(file_input) { + function upload_avatar($file_input) { const form_data = new FormData(); form_data.append("csrfmiddlewaretoken", csrf_token); - for (const [i, file] of Array.prototype.entries.call(file_input[0].files)) { + for (const [i, file] of Array.prototype.entries.call($file_input[0].files)) { form_data.append("file-" + i, file); } display_avatar_upload_started(); @@ -785,9 +785,9 @@ export function set_up() { e.preventDefault(); e.stopPropagation(); - const input_elem = $(e.currentTarget); - const setting_name = input_elem.attr("name"); - const checked = input_elem.prop("checked"); + const $input_elem = $(e.currentTarget); + const setting_name = $input_elem.attr("name"); + const checked = $input_elem.prop("checked"); const data = {[setting_name]: checked}; settings_ui.do_settings_change( diff --git a/static/js/settings_bots.js b/static/js/settings_bots.js index 4717703df4..329b819818 100644 --- a/static/js/settings_bots.js +++ b/static/js/settings_bots.js @@ -55,20 +55,20 @@ export function get_bot_info_div(bot_id) { } export function bot_error(bot_id, xhr) { - const bot_info = get_bot_info_div(bot_id); - const bot_error_div = bot_info.find(".bot_error"); - bot_error_div.text(JSON.parse(xhr.responseText).msg); - bot_error_div.show(); - const bot_box = bot_info.closest(".bot-information-box"); - bot_box.scrollTop(bot_box[0].scrollHeight - bot_box[0].clientHeight); + const $bot_info = get_bot_info_div(bot_id); + const $bot_error_div = $bot_info.find(".bot_error"); + $bot_error_div.text(JSON.parse(xhr.responseText).msg); + $bot_error_div.show(); + const $bot_box = $bot_info.closest(".bot-information-box"); + $bot_box.scrollTop($bot_box[0].scrollHeight - $bot_box[0].clientHeight); } function add_bot_row(info) { - const row = $(render_bot_avatar_row(info)); + const $row = $(render_bot_avatar_row(info)); if (info.is_active) { - $("#active_bots_list").append(row); + $("#active_bots_list").append($row); } else { - $("#inactive_bots_list").append(row); + $("#inactive_bots_list").append($row); } } @@ -277,7 +277,7 @@ export function set_up() { const interface_type = $("#create_interface_type").val(); const service_name = $("#select_service_name :selected").val(); const formData = new FormData(); - const spinner = $(".create_bot_spinner"); + const $spinner = $(".create_bot_spinner"); formData.append("csrfmiddlewaretoken", csrf_token); formData.append("bot_type", bot_type); @@ -301,7 +301,7 @@ export function set_up() { )) { formData.append("file-" + i, file); } - loading.make_indicator(spinner, {text: $t({defaultMessage: "Creating bot"})}); + loading.make_indicator($spinner, {text: $t({defaultMessage: "Creating bot"})}); channel.post({ url: "/json/bots", data: formData, @@ -330,7 +330,7 @@ export function set_up() { $("#bot_table_error").text(JSON.parse(xhr.responseText).msg).show(); }, complete() { - loading.destroy_indicator(spinner); + loading.destroy_indicator($spinner); }, }); }, @@ -368,9 +368,9 @@ export function set_up() { channel.del({ url: "/json/bots/" + encodeURIComponent(bot_id), success() { - const row = $(e.currentTarget).closest("li"); - row.hide("slow", () => { - row.remove(); + const $row = $(e.currentTarget).closest("li"); + $row.hide("slow", () => { + $row.remove(); }); }, error(xhr) { @@ -396,13 +396,13 @@ export function set_up() { url: "/json/bots/" + encodeURIComponent(bot_id) + "/api_key/regenerate", idempotent: true, success(data) { - const row = $(e.currentTarget).closest("li"); - row.find(".api_key").find(".value").text(data.api_key); - row.find("api_key_error").hide(); + const $row = $(e.currentTarget).closest("li"); + $row.find(".api_key").find(".value").text(data.api_key); + $row.find("api_key_error").hide(); }, error(xhr) { - const row = $(e.currentTarget).closest("li"); - row.find(".api_key_error").text(JSON.parse(xhr.responseText).msg).show(); + const $row = $(e.currentTarget).closest("li"); + $row.find(".api_key_error").text(JSON.parse(xhr.responseText).msg).show(); }, }); }); @@ -412,8 +412,8 @@ export function set_up() { $("#active_bots_list").on("click", "button.open_edit_bot_form", (e) => { e.preventDefault(); e.stopPropagation(); - const li = $(e.currentTarget).closest("li"); - const bot_id = Number.parseInt(li.find(".bot_info").attr("data-user-id"), 10); + const $li = $(e.currentTarget).closest("li"); + const bot_id = Number.parseInt($li.find(".bot_info").attr("data-user-id"), 10); const bot = bot_data.get(bot_id); const user_ids = people.get_active_human_ids(); const users_list = user_ids.map((user_id) => ({ @@ -439,9 +439,9 @@ export function set_up() { function edit_bot_post_render() { const avatar_widget = avatar.build_bot_edit_widget($(".edit_bot_form")); - const form = $(".edit_bot_form"); - const image = li.find(".image"); - const errors = form.find(".bot_edit_errors"); + const $form = $(".edit_bot_form"); + const $image = $li.find(".image"); + const $errors = $form.find(".bot_edit_errors"); const opts = { widget_name: "bot_owner", @@ -470,18 +470,18 @@ export function set_up() { avatar_widget.clear(); - form.validate({ + $form.validate({ errorClass: "text-error", success() { - errors.hide(); + $errors.hide(); }, submitHandler() { - const bot_id = Number.parseInt(form.attr("data-user-id"), 10); - const type = form.attr("data-type"); + const bot_id = Number.parseInt($form.attr("data-user-id"), 10); + const type = $form.attr("data-type"); - const full_name = form.find(".edit_bot_name").val(); + const full_name = $form.find(".edit_bot_name").val(); const bot_owner_id = owner_widget.value(); - const file_input = $(".edit_bot_form").find(".edit_bot_avatar_file_input"); + const $file_input = $(".edit_bot_form").find(".edit_bot_avatar_file_input"); const formData = new FormData(); formData.append("csrfmiddlewaretoken", csrf_token); @@ -500,7 +500,7 @@ export function set_up() { }); formData.append("config_data", JSON.stringify(config_data)); } - for (const [i, file] of Array.prototype.entries.call(file_input[0].files)) { + for (const [i, file] of Array.prototype.entries.call($file_input[0].files)) { formData.append("file-" + i, file); } channel.patch({ @@ -516,7 +516,7 @@ export function set_up() { // when the user had a previous uploaded avatar. Only the content // changes, so we version it to get an uncached copy. image_version += 1; - image + $image .find("img") .attr( "src", @@ -527,7 +527,7 @@ export function set_up() { }, error(xhr) { dialog_widget.hide_dialog_spinner(); - errors.text(JSON.parse(xhr.responseText).msg).show(); + $errors.text(JSON.parse(xhr.responseText).msg).show(); }, }); }, @@ -536,15 +536,15 @@ export function set_up() { }); $("#active_bots_list").on("click", "a.download_bot_zuliprc", function () { - const bot_info = $(this).closest(".bot-information-box").find(".bot_info"); - const bot_id = Number.parseInt(bot_info.attr("data-user-id"), 10); + const $bot_info = $(this).closest(".bot-information-box").find(".bot_info"); + const bot_id = Number.parseInt($bot_info.attr("data-user-id"), 10); $(this).attr("href", generate_zuliprc_uri(bot_id)); }); new ClipboardJS("#copy_zuliprc", { text(trigger) { - const bot_info = $(trigger).closest(".bot-information-box").find(".bot_info"); - const bot_id = Number.parseInt(bot_info.attr("data-user-id"), 10); + const $bot_info = $(trigger).closest(".bot-information-box").find(".bot_info"); + const bot_id = Number.parseInt($bot_info.attr("data-user-id"), 10); const bot = bot_data.get(bot_id); const data = generate_zuliprc_content(bot); return data; diff --git a/static/js/settings_display.js b/static/js/settings_display.js index 12f0783fc7..6b873d2eeb 100644 --- a/static/js/settings_display.js +++ b/static/js/settings_display.js @@ -44,21 +44,23 @@ function change_display_setting(data, $status_el, success_msg_html, sticky) { export function set_up(settings_panel) { meta.loaded = true; - const container = $(settings_panel.container); + const $container = $(settings_panel.container); const settings_object = settings_panel.settings_object; const for_realm_settings = settings_panel.for_realm_settings; - container.find(".advanced-settings-status").hide(); + $container.find(".advanced-settings-status").hide(); // Select current values for enum/select type fields. For boolean // fields, the current value is set automatically in the template. - container.find(".setting_demote_inactive_streams").val(settings_object.demote_inactive_streams); - container.find(".setting_color_scheme").val(settings_object.color_scheme); - container.find(".setting_default_view").val(settings_object.default_view); - container + $container + .find(".setting_demote_inactive_streams") + .val(settings_object.demote_inactive_streams); + $container.find(".setting_color_scheme").val(settings_object.color_scheme); + $container.find(".setting_default_view").val(settings_object.default_view); + $container .find(".setting_twenty_four_hour_time") .val(JSON.stringify(settings_object.twenty_four_hour_time)); - container + $container .find(`.setting_emojiset_choice[value="${CSS.escape(settings_object.emojiset)}"]`) .prop("checked", true); @@ -70,17 +72,19 @@ export function set_up(settings_panel) { // Common handler for sending requests to the server when an input // element is changed. - container.on("change", "input[type=checkbox], select", function (e) { - const input_elem = $(e.currentTarget); - const setting = input_elem.attr("name"); + $container.on("change", "input[type=checkbox], select", function (e) { + const $input_elem = $(e.currentTarget); + const setting = $input_elem.attr("name"); const data = {}; data[setting] = settings_org.get_input_element_value(this); - const status_element = input_elem.closest(".subsection-parent").find(".alert-notification"); + const $status_element = $input_elem + .closest(".subsection-parent") + .find(".alert-notification"); if (["left_side_userlist"].includes(setting)) { change_display_setting( data, - status_element, + $status_element, $t_html( { defaultMessage: @@ -91,7 +95,7 @@ export function set_up(settings_panel) { true, ); } else { - change_display_setting(data, status_element); + change_display_setting(data, $status_element); } }); @@ -108,11 +112,11 @@ export function set_up(settings_panel) { const data = {default_language: setting_value}; const new_language = $link.attr("data-name"); - container.find(".default_language_name").text(new_language); + $container.find(".default_language_name").text(new_language); change_display_setting( data, - container.find(".lang-time-settings-status"), + $container.find(".lang-time-settings-status"), $t_html( { defaultMessage: @@ -125,7 +129,7 @@ export function set_up(settings_panel) { }); } - container.find(".setting_default_language").on("click", (e) => { + $container.find(".setting_default_language").on("click", (e) => { e.preventDefault(); e.stopPropagation(); @@ -150,14 +154,14 @@ export function set_up(settings_panel) { window.location.reload(); }); - container.find(".setting_emojiset_choice").on("click", function () { + $container.find(".setting_emojiset_choice").on("click", function () { const data = {emojiset: $(this).val()}; const current_emojiset = settings_object.emojiset; if (current_emojiset === data.emojiset) { return; } - const spinner = container.find(".theme-settings-status").expectOne(); - loading.make_indicator(spinner, {text: settings_ui.strings.saving}); + const $spinner = $container.find(".theme-settings-status").expectOne(); + loading.make_indicator($spinner, {text: settings_ui.strings.saving}); channel.patch({ url: "/json/settings", @@ -167,7 +171,7 @@ export function set_up(settings_panel) { ui_report.error( settings_ui.strings.failure_html, xhr, - container.find(".theme-settings-status").expectOne(), + $container.find(".theme-settings-status").expectOne(), ); }, }); @@ -183,15 +187,15 @@ export async function report_emojiset_change(settings_panel) { // update in all active browser windows. await emojisets.select(settings_panel.settings_object.emojiset); - const spinner = $(settings_panel.container).find(".theme-settings-status"); - if (spinner.length) { - loading.destroy_indicator(spinner); + const $spinner = $(settings_panel.container).find(".theme-settings-status"); + if ($spinner.length) { + loading.destroy_indicator($spinner); ui_report.success( $t_html({defaultMessage: "Emoji set changed successfully!"}), - spinner.expectOne(), + $spinner.expectOne(), ); - spinner.expectOne(); - settings_ui.display_checkmark(spinner); + $spinner.expectOne(); + settings_ui.display_checkmark($spinner); } } @@ -199,20 +203,20 @@ export function update_page(property) { if (!overlays.settings_open()) { return; } - const container = $(user_settings_panel.container); + const $container = $(user_settings_panel.container); let value = user_settings[property]; // The default_language button text updates to the language // name and not the value of the user_settings property. if (property === "default_language") { - container.find(".default_language_name").text(user_default_language_name); + $container.find(".default_language_name").text(user_default_language_name); return; } // settings_org.set_input_element_value doesn't support radio // button widgets like this one. if (property === "emojiset") { - container.find(`input[value=${CSS.escape(value)}]`).prop("checked", true); + $container.find(`input[value=${CSS.escape(value)}]`).prop("checked", true); return; } @@ -223,8 +227,8 @@ export function update_page(property) { value = value.toString(); } - const input_elem = container.find(`[name=${CSS.escape(property)}]`); - settings_org.set_input_element_value(input_elem, value); + const $input_elem = $container.find(`[name=${CSS.escape(property)}]`); + settings_org.set_input_element_value($input_elem, value); } export function initialize() { diff --git a/static/js/settings_emoji.js b/static/js/settings_emoji.js index b16582ba90..9a163c684b 100644 --- a/static/js/settings_emoji.js +++ b/static/js/settings_emoji.js @@ -97,8 +97,8 @@ export function populate_emoji() { } } - const emoji_table = $("#admin_emoji_table").expectOne(); - ListWidget.create(emoji_table, Object.values(emoji_data), { + const $emoji_table = $("#admin_emoji_table").expectOne(); + ListWidget.create($emoji_table, Object.values(emoji_data), { name: "emoji_list", modifier(item) { if (item.deactivated !== true) { @@ -115,20 +115,20 @@ export function populate_emoji() { return ""; }, filter: { - element: emoji_table.closest(".settings-section").find(".search"), + $element: $emoji_table.closest(".settings-section").find(".search"), predicate(item, value) { return item.name.toLowerCase().includes(value); }, onupdate() { - ui.reset_scrollbar(emoji_table); + ui.reset_scrollbar($emoji_table); }, }, - parent_container: $("#emoji-settings").expectOne(), + $parent_container: $("#emoji-settings").expectOne(), sort_fields: { author_full_name: sort_author_full_name, }, init_sort: ["alphabetic", "name"], - simplebar_container: $("#emoji-settings .progressive-table-wrapper"), + $simplebar_container: $("#emoji-settings .progressive-table-wrapper"), }); loading.destroy_indicator($("#admin_page_emoji_loading_indicator")); @@ -139,21 +139,21 @@ export function build_emoji_upload_widget() { return $("#emoji_file_input"); }; - const file_name_field = $("#emoji-file-name"); - const input_error = $("#emoji_file_input_error"); - const clear_button = $("#emoji_image_clear_button"); - const upload_button = $("#emoji_upload_button"); - const preview_text = $("#emoji_preview_text"); - const preview_image = $("#emoji_preview_image"); + const $file_name_field = $("#emoji-file-name"); + const $input_error = $("#emoji_file_input_error"); + const $clear_button = $("#emoji_image_clear_button"); + const $upload_button = $("#emoji_upload_button"); + const $preview_text = $("#emoji_preview_text"); + const $preview_image = $("#emoji_preview_image"); return upload_widget.build_widget( get_file_input, - file_name_field, - input_error, - clear_button, - upload_button, - preview_text, - preview_image, + $file_name_field, + $input_error, + $clear_button, + $upload_button, + $preview_text, + $preview_image, ); } @@ -168,16 +168,16 @@ export function set_up() { $(".admin_emoji_table").on("click", ".delete", function (e) { e.preventDefault(); e.stopPropagation(); - const btn = $(this); + const $btn = $(this); channel.del({ - url: "/json/realm/emoji/" + encodeURIComponent(btn.attr("data-emoji-name")), + url: "/json/realm/emoji/" + encodeURIComponent($btn.attr("data-emoji-name")), error(xhr) { - ui_report.generic_row_button_error(xhr, btn); + ui_report.generic_row_button_error(xhr, $btn); }, success() { - const row = btn.parents("tr"); - row.remove(); + const $row = $btn.parents("tr"); + $row.remove(); }, }); }); @@ -189,7 +189,7 @@ export function set_up() { .on("submit", function (e) { e.preventDefault(); e.stopPropagation(); - const emoji_status = $("#admin-emoji-status"); + const $emoji_status = $("#admin-emoji-status"); const emoji = {}; function submit_custom_emoji_request() { @@ -211,7 +211,7 @@ export function set_up() { $("#admin-emoji-status").hide(); ui_report.success( $t_html({defaultMessage: "Custom emoji added!"}), - emoji_status, + $emoji_status, ); $("form.admin-emoji-form input[type='text']").val(""); $("#admin_emoji_submit").prop("disabled", false); @@ -221,7 +221,7 @@ export function set_up() { $("#admin-emoji-status").hide(); const errors = JSON.parse(xhr.responseText).msg; xhr.responseText = JSON.stringify({msg: errors}); - ui_report.error($t_html({defaultMessage: "Failed"}), xhr, emoji_status); + ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $emoji_status); $("#admin_emoji_submit").prop("disabled", false); }, }); @@ -234,7 +234,7 @@ export function set_up() { if (emoji.name.trim() === "") { ui_report.client_error( $t_html({defaultMessage: "Failed: Emoji name is required."}), - emoji_status, + $emoji_status, ); return; } @@ -244,7 +244,7 @@ export function set_up() { $t_html({ defaultMessage: "Failed: A custom emoji with this name already exists.", }), - emoji_status, + $emoji_status, ); return; } diff --git a/static/js/settings_exports.js b/static/js/settings_exports.js index b56f816ed9..f1739ee384 100644 --- a/static/js/settings_exports.js +++ b/static/js/settings_exports.js @@ -35,8 +35,8 @@ export function populate_exports_table(exports) { return; } - const exports_table = $("#admin_exports_table").expectOne(); - ListWidget.create(exports_table, Object.values(exports), { + const $exports_table = $("#admin_exports_table").expectOne(); + ListWidget.create($exports_table, Object.values(exports), { name: "admin_exports_list", modifier(data) { let failed_timestamp = data.failed_timestamp; @@ -70,27 +70,27 @@ export function populate_exports_table(exports) { }); }, filter: { - element: exports_table.closest(".settings-section").find(".search"), + $element: $exports_table.closest(".settings-section").find(".search"), predicate(item, value) { return people.get_full_name(item.acting_user_id).toLowerCase().includes(value); }, onupdate() { - ui.reset_scrollbar(exports_table); + ui.reset_scrollbar($exports_table); }, }, - parent_container: $("#data-exports").expectOne(), + $parent_container: $("#data-exports").expectOne(), init_sort: [sort_user], sort_fields: { user: sort_user, }, - simplebar_container: $("#data-exports .progressive-table-wrapper"), + $simplebar_container: $("#data-exports .progressive-table-wrapper"), }); - const spinner = $(".export_row .export_url_spinner"); - if (spinner.length) { - loading.make_indicator(spinner); + const $spinner = $(".export_row .export_url_spinner"); + if ($spinner.length) { + loading.make_indicator($spinner); } else { - loading.destroy_indicator(spinner); + loading.destroy_indicator($spinner); } } @@ -100,19 +100,19 @@ export function set_up() { $("#export-data").on("click", (e) => { e.preventDefault(); e.stopPropagation(); - const export_status = $("#export_status"); + const $export_status = $("#export_status"); channel.post({ url: "/json/export/realm", success() { ui_report.success( $t_html({defaultMessage: "Export started. Check back in a few minutes."}), - export_status, + $export_status, 4000, ); }, error(xhr) { - ui_report.error($t_html({defaultMessage: "Export failed"}), xhr, export_status); + ui_report.error($t_html({defaultMessage: "Export failed"}), xhr, $export_status); }, }); }); @@ -128,12 +128,12 @@ export function set_up() { $(".admin_exports_table").on("click", ".delete", function (e) { e.preventDefault(); e.stopPropagation(); - const btn = $(this); + const $btn = $(this); channel.del({ - url: "/json/export/realm/" + encodeURIComponent(btn.attr("data-export-id")), + url: "/json/export/realm/" + encodeURIComponent($btn.attr("data-export-id")), error(xhr) { - ui_report.generic_row_button_error(xhr, btn); + ui_report.generic_row_button_error(xhr, $btn); }, // No success function, since UI updates are done via server_events }); diff --git a/static/js/settings_invites.js b/static/js/settings_invites.js index bb23cef7a2..5dfc93abb8 100644 --- a/static/js/settings_invites.js +++ b/static/js/settings_invites.js @@ -57,8 +57,8 @@ function populate_invites(invites_data) { add_invited_as_text(invites_data.invites); - const invites_table = $("#admin_invites_table").expectOne(); - ListWidget.create(invites_table, invites_data.invites, { + const $invites_table = $("#admin_invites_table").expectOne(); + ListWidget.create($invites_table, invites_data.invites, { name: "admin_invites_list", modifier(item) { item.invited_absolute_time = timerender.absolute_time(item.invited * 1000); @@ -73,7 +73,7 @@ function populate_invites(invites_data) { return render_admin_invites_list({invite: item}); }, filter: { - element: invites_table.closest(".settings-section").find(".search"), + $element: $invites_table.closest(".settings-section").find(".search"), predicate(item, value) { const referrer = people.get_by_user_id(item.invited_by_user_id); const referrer_email = referrer.email; @@ -87,12 +87,12 @@ function populate_invites(invites_data) { return referrer_email_matched || referrer_name_matched || invitee_email_matched; }, }, - parent_container: $("#admin-invites-list").expectOne(), + $parent_container: $("#admin-invites-list").expectOne(), init_sort: [sort_invitee], sort_fields: { invitee: sort_invitee, }, - simplebar_container: $("#admin-invites-list .progressive-table-wrapper"), + $simplebar_container: $("#admin-invites-list .progressive-table-wrapper"), }); loading.destroy_indicator($("#admin_page_invites_loading_indicator")); @@ -101,7 +101,7 @@ function populate_invites(invites_data) { function do_revoke_invite() { const modal_invite_id = $(".dialog_submit_button").attr("data-invite-id"); const modal_is_multiuse = $(".dialog_submit_button").attr("data-is-multiuse"); - const revoke_button = meta.current_revoke_invite_user_modal_row.find("button.revoke"); + const $revoke_button = meta.$current_revoke_invite_user_modal_row.find("button.revoke"); if (modal_invite_id !== meta.invite_id || modal_is_multiuse !== meta.is_multiuse) { blueslip.error("Invite revoking canceled due to non-matching fields."); @@ -113,7 +113,7 @@ function do_revoke_invite() { ); } - revoke_button.prop("disabled", true).text($t({defaultMessage: "Working…"})); + $revoke_button.prop("disabled", true).text($t({defaultMessage: "Working…"})); let url = "/json/invites/" + meta.invite_id; if (modal_is_multiuse === "true") { @@ -122,17 +122,17 @@ function do_revoke_invite() { channel.del({ url, error(xhr) { - ui_report.generic_row_button_error(xhr, revoke_button); + ui_report.generic_row_button_error(xhr, $revoke_button); }, success() { - meta.current_revoke_invite_user_modal_row.remove(); + meta.$current_revoke_invite_user_modal_row.remove(); }, }); } function do_resend_invite() { const modal_invite_id = $(".dialog_submit_button").attr("data-invite-id"); - const resend_button = meta.current_resend_invite_user_modal_row.find("button.resend"); + const $resend_button = meta.$current_resend_invite_user_modal_row.find("button.resend"); if (modal_invite_id !== meta.invite_id) { blueslip.error("Invite resending canceled due to non-matching fields."); @@ -144,17 +144,17 @@ function do_resend_invite() { ); } - resend_button.prop("disabled", true).text($t({defaultMessage: "Working…"})); + $resend_button.prop("disabled", true).text($t({defaultMessage: "Working…"})); channel.post({ url: "/json/invites/" + meta.invite_id + "/resend", error(xhr) { - ui_report.generic_row_button_error(xhr, resend_button); + ui_report.generic_row_button_error(xhr, $resend_button); }, success(data) { - resend_button.text($t({defaultMessage: "Sent!"})); - resend_button.removeClass("resend btn-warning").addClass("sea-green"); + $resend_button.text($t({defaultMessage: "Sent!"})); + $resend_button.removeClass("resend btn-warning").addClass("sea-green"); data.timestamp = timerender.absolute_time(data.timestamp * 1000); - meta.current_resend_invite_user_modal_row.find(".invited_at").text(data.timestamp); + meta.$current_resend_invite_user_modal_row.find(".invited_at").text(data.timestamp); }, }); } @@ -188,10 +188,10 @@ export function on_load_success(invites_data, initialize_event_handlers) { // will not show up because of a call to `close_active_modal` in `settings.js`. e.preventDefault(); e.stopPropagation(); - const row = $(e.target).closest(".invite_row"); - const email = row.find(".email").text(); - const referred_by = row.find(".referred_by").text(); - meta.current_revoke_invite_user_modal_row = row; + const $row = $(e.target).closest(".invite_row"); + const email = $row.find(".email").text(); + const referred_by = $row.find(".referred_by").text(); + meta.$current_revoke_invite_user_modal_row = $row; meta.invite_id = $(e.currentTarget).attr("data-invite-id"); meta.is_multiuse = $(e.currentTarget).attr("data-is-multiuse"); const ctx = { @@ -219,9 +219,9 @@ export function on_load_success(invites_data, initialize_event_handlers) { e.preventDefault(); e.stopPropagation(); - const row = $(e.target).closest(".invite_row"); - const email = row.find(".email").text(); - meta.current_resend_invite_user_modal_row = row; + const $row = $(e.target).closest(".invite_row"); + const email = $row.find(".email").text(); + meta.$current_resend_invite_user_modal_row = $row; meta.invite_id = $(e.currentTarget).attr("data-invite-id"); const html_body = render_settings_resend_invite_modal({email}); diff --git a/static/js/settings_linkifiers.js b/static/js/settings_linkifiers.js index 7db7d3365e..70c9255d4d 100644 --- a/static/js/settings_linkifiers.js +++ b/static/js/settings_linkifiers.js @@ -53,39 +53,43 @@ function open_linkifier_edit_form(linkifier_id) { }); function submit_linkifier_form() { - const change_linkifier_button = $(".dialog_submit_button"); - change_linkifier_button.prop("disabled", true); + const $change_linkifier_button = $(".dialog_submit_button"); + $change_linkifier_button.prop("disabled", true); - const modal = $("#dialog_widget_modal"); + const $modal = $("#dialog_widget_modal"); const url = "/json/realm/filters/" + encodeURIComponent(linkifier_id); - const pattern = modal.find("#edit-linkifier-pattern").val().trim(); - const url_format_string = modal.find("#edit-linkifier-url-format-string").val().trim(); + const pattern = $modal.find("#edit-linkifier-pattern").val().trim(); + const url_format_string = $modal.find("#edit-linkifier-url-format-string").val().trim(); const data = {pattern, url_format_string}; - const pattern_status = modal.find("#edit-linkifier-pattern-status").expectOne(); - const format_status = modal.find("#edit-linkifier-format-status").expectOne(); - const dialog_error_element = modal.find("#dialog_error").expectOne(); + const $pattern_status = $modal.find("#edit-linkifier-pattern-status").expectOne(); + const $format_status = $modal.find("#edit-linkifier-format-status").expectOne(); + const $dialog_error_element = $modal.find("#dialog_error").expectOne(); const opts = { success_continuation() { - change_linkifier_button.prop("disabled", false); + $change_linkifier_button.prop("disabled", false); dialog_widget.close_modal(); }, error_continuation(xhr) { - change_linkifier_button.prop("disabled", false); + $change_linkifier_button.prop("disabled", false); const response_text = JSON.parse(xhr.responseText); if (response_text.errors !== undefined) { handle_linkifier_api_error( xhr, - pattern_status, - format_status, - dialog_error_element, + $pattern_status, + $format_status, + $dialog_error_element, ); } else { // This must be `Linkifier not found` error. - ui_report.error($t_html({defaultMessage: "Failed"}), xhr, dialog_error_element); + ui_report.error( + $t_html({defaultMessage: "Failed"}), + xhr, + $dialog_error_element, + ); } }, // Show the error message only on edit linkifier modal. - error_msg_element: $(), + $error_msg_element: $(), }; settings_ui.do_settings_change( channel.patch, @@ -127,8 +131,8 @@ export function populate_linkifiers(linkifiers_data) { return; } - const linkifiers_table = $("#admin_linkifiers_table").expectOne(); - ListWidget.create(linkifiers_table, linkifiers_data, { + const $linkifiers_table = $("#admin_linkifiers_table").expectOne(); + ListWidget.create($linkifiers_table, linkifiers_data, { name: "linkifiers_list", modifier(linkifier) { return render_admin_linkifier_list({ @@ -141,7 +145,7 @@ export function populate_linkifiers(linkifiers_data) { }); }, filter: { - element: linkifiers_table.closest(".settings-section").find(".search"), + $element: $linkifiers_table.closest(".settings-section").find(".search"), predicate(item, value) { return ( item.pattern.toLowerCase().includes(value) || @@ -149,16 +153,16 @@ export function populate_linkifiers(linkifiers_data) { ); }, onupdate() { - ui.reset_scrollbar(linkifiers_table); + ui.reset_scrollbar($linkifiers_table); }, }, - parent_container: $("#linkifier-settings").expectOne(), + $parent_container: $("#linkifier-settings").expectOne(), init_sort: [sort_pattern], sort_fields: { pattern: sort_pattern, url: sort_url, }, - simplebar_container: $("#linkifier-settings .progressive-table-wrapper"), + $simplebar_container: $("#linkifier-settings .progressive-table-wrapper"), }); } @@ -176,12 +180,12 @@ export function build_page() { $(".admin_linkifiers_table").on("click", ".delete", function (e) { e.preventDefault(); e.stopPropagation(); - const btn = $(this); + const $btn = $(this); channel.del({ - url: "/json/realm/filters/" + encodeURIComponent(btn.attr("data-linkifier-id")), + url: "/json/realm/filters/" + encodeURIComponent($btn.attr("data-linkifier-id")), error(xhr) { - ui_report.generic_row_button_error(xhr, btn); + ui_report.generic_row_button_error(xhr, $btn); }, // There is no need for an on-success action here since the row is removed by // the `realm_linkifiers` event handler which builds the linkifier list again. @@ -192,8 +196,8 @@ export function build_page() { e.preventDefault(); e.stopPropagation(); - const btn = $(this); - const linkifier_id = Number.parseInt(btn.attr("data-linkifier-id"), 10); + const $btn = $(this); + const linkifier_id = Number.parseInt($btn.attr("data-linkifier-id"), 10); open_linkifier_edit_form(linkifier_id); }); @@ -202,14 +206,14 @@ export function build_page() { .on("submit", function (e) { e.preventDefault(); e.stopPropagation(); - const linkifier_status = $("#admin-linkifier-status"); - const pattern_status = $("#admin-linkifier-pattern-status"); - const format_status = $("#admin-linkifier-format-status"); - const add_linkifier_button = $(".new-linkifier-form button"); - add_linkifier_button.prop("disabled", true); - linkifier_status.hide(); - pattern_status.hide(); - format_status.hide(); + const $linkifier_status = $("#admin-linkifier-status"); + const $pattern_status = $("#admin-linkifier-pattern-status"); + const $format_status = $("#admin-linkifier-format-status"); + const $add_linkifier_button = $(".new-linkifier-form button"); + $add_linkifier_button.prop("disabled", true); + $linkifier_status.hide(); + $pattern_status.hide(); + $format_status.hide(); const linkifier = {}; for (const obj of $(this).serializeArray()) { @@ -222,20 +226,20 @@ export function build_page() { success(data) { $("#linkifier_pattern").val(""); $("#linkifier_format_string").val(""); - add_linkifier_button.prop("disabled", false); + $add_linkifier_button.prop("disabled", false); linkifier.id = data.id; ui_report.success( $t_html({defaultMessage: "Custom linkifier added!"}), - linkifier_status, + $linkifier_status, ); }, error(xhr) { - add_linkifier_button.prop("disabled", false); + $add_linkifier_button.prop("disabled", false); handle_linkifier_api_error( xhr, - pattern_status, - format_status, - linkifier_status, + $pattern_status, + $format_status, + $linkifier_status, ); }, }); diff --git a/static/js/settings_muted_topics.js b/static/js/settings_muted_topics.js index 8cea0204ef..7f12ecdde3 100644 --- a/static/js/settings_muted_topics.js +++ b/static/js/settings_muted_topics.js @@ -11,25 +11,25 @@ export let loaded = false; export function populate_list() { const all_muted_topics = muted_topics.get_muted_topics(); - const muted_topics_table = $("#muted_topics_table"); + const $muted_topics_table = $("#muted_topics_table"); const $search_input = $("#muted_topics_search"); - ListWidget.create(muted_topics_table, all_muted_topics, { + ListWidget.create($muted_topics_table, all_muted_topics, { name: "muted-topics-list", modifier(muted_topic) { return render_muted_topic_ui_row({muted_topic}); }, filter: { - element: $search_input, + $element: $search_input, predicate(item, value) { return item.topic.toLocaleLowerCase().includes(value); }, onupdate() { - ui.reset_scrollbar(muted_topics_table.closest(".progressive-table-wrapper")); + ui.reset_scrollbar($muted_topics_table.closest(".progressive-table-wrapper")); }, }, - parent_container: $("#muted-topic-settings"), - simplebar_container: $("#muted-topic-settings .progressive-table-wrapper"), + $parent_container: $("#muted-topic-settings"), + $simplebar_container: $("#muted-topic-settings .progressive-table-wrapper"), }); } diff --git a/static/js/settings_muted_users.js b/static/js/settings_muted_users.js index 8b84bfc56f..7f18982157 100644 --- a/static/js/settings_muted_users.js +++ b/static/js/settings_muted_users.js @@ -16,25 +16,25 @@ export function populate_list() { user_name: people.get_full_name(user.id), date_muted_str: user.date_muted_str, })); - const muted_users_table = $("#muted_users_table"); + const $muted_users_table = $("#muted_users_table"); const $search_input = $("#muted_users_search"); - ListWidget.create(muted_users_table, all_muted_users, { + ListWidget.create($muted_users_table, all_muted_users, { name: "muted-users-list", modifier(muted_user) { return render_muted_user_ui_row({muted_user}); }, filter: { - element: $search_input, + $element: $search_input, predicate(item, value) { return item.user_name.toLocaleLowerCase().includes(value); }, onupdate() { - ui.reset_scrollbar(muted_users_table.closest(".progressive-table-wrapper")); + ui.reset_scrollbar($muted_users_table.closest(".progressive-table-wrapper")); }, }, - parent_container: $("#muted-user-settings"), - simplebar_container: $("#muted-user-settings .progressive-table-wrapper"), + $parent_container: $("#muted-user-settings"), + $simplebar_container: $("#muted-user-settings .progressive-table-wrapper"), }); } diff --git a/static/js/settings_notifications.js b/static/js/settings_notifications.js index 4c2926ca9f..67696cba64 100644 --- a/static/js/settings_notifications.js +++ b/static/js/settings_notifications.js @@ -20,8 +20,8 @@ import {user_settings} from "./user_settings"; export const user_settings_panel = {}; function rerender_ui() { - const unmatched_streams_table = $("#stream-specific-notify-table"); - if (unmatched_streams_table.length === 0) { + const $unmatched_streams_table = $("#stream-specific-notify-table"); + if ($unmatched_streams_table.length === 0) { // If we haven't rendered "notification settings" yet, do nothing. return; } @@ -29,12 +29,12 @@ function rerender_ui() { const unmatched_streams = stream_settings_data.get_unmatched_streams_for_notification_settings(); - unmatched_streams_table.find(".stream-row").remove(); + $unmatched_streams_table.find(".stream-row").remove(); const muted_stream_ids = stream_data.muted_stream_ids(); for (const stream of unmatched_streams) { - unmatched_streams_table.append( + $unmatched_streams_table.append( render_stream_specific_notification_row({ stream, stream_specific_notification_settings: @@ -48,9 +48,9 @@ function rerender_ui() { } if (unmatched_streams.length === 0) { - unmatched_streams_table.css("display", "none"); + $unmatched_streams_table.css("display", "none"); } else { - unmatched_streams_table.css("display", "table-row-group"); + $unmatched_streams_table.css("display", "table-row-group"); } } @@ -61,9 +61,9 @@ function change_notification_setting(setting, value, status_element) { } function update_desktop_icon_count_display(settings_panel) { - const container = $(settings_panel.container); + const $container = $(settings_panel.container); const settings_object = settings_panel.settings_object; - container + $container .find(".setting_desktop_icon_count_display") .val(settings_object.desktop_icon_count_display); if (!settings_panel.for_realm_settings) { @@ -71,8 +71,8 @@ function update_desktop_icon_count_display(settings_panel) { } } -export function set_notification_batching_ui(container, setting_seconds, force_custom) { - const edit_elem = container.find(".email_notification_batching_period_edit_minutes"); +export function set_notification_batching_ui($container, setting_seconds, force_custom) { + const $edit_elem = $container.find(".email_notification_batching_period_edit_minutes"); const valid_period_values = settings_config.email_notifications_batching_period_values.map( (x) => x.value, ); @@ -83,70 +83,70 @@ export function set_notification_batching_ui(container, setting_seconds, force_c const show_edit_elem = force_custom || !valid_period_values.includes(setting_seconds); const select_elem_val = show_edit_elem ? "custom_period" : setting_seconds; - container.find(".setting_email_notifications_batching_period_seconds").val(select_elem_val); - edit_elem.val(setting_seconds / 60); - settings_org.change_element_block_display_property(edit_elem.attr("id"), show_edit_elem); + $container.find(".setting_email_notifications_batching_period_seconds").val(select_elem_val); + $edit_elem.val(setting_seconds / 60); + settings_org.change_element_block_display_property($edit_elem.attr("id"), show_edit_elem); } export function set_enable_digest_emails_visibility(settings_panel) { - const container = $(settings_panel.container); + const $container = $(settings_panel.container); const for_realm_settings = settings_panel.for_realm_settings; if (page_params.realm_digest_emails_enabled) { if (for_realm_settings) { - container.find(".other_email_notifications").show(); + $container.find(".other_email_notifications").show(); return; } - container.find(".enable_digest_emails_label").parent().show(); + $container.find(".enable_digest_emails_label").parent().show(); } else { if (for_realm_settings) { - container.find(".other_email_notifications").hide(); + $container.find(".other_email_notifications").hide(); return; } - container.find(".enable_digest_emails_label").parent().hide(); + $container.find(".enable_digest_emails_label").parent().hide(); } } export function set_enable_marketing_emails_visibility() { - const container = $("#user-notification-settings"); + const $container = $("#user-notification-settings"); if (page_params.corporate_enabled) { - container.find(".enable_marketing_emails_label").parent().show(); + $container.find(".enable_marketing_emails_label").parent().show(); } else { - container.find(".enable_marketing_emails_label").parent().hide(); + $container.find(".enable_marketing_emails_label").parent().hide(); } } export function set_up(settings_panel) { - const container = $(settings_panel.container); + const $container = $(settings_panel.container); const settings_object = settings_panel.settings_object; - const notification_sound_elem = $(settings_panel.notification_sound_elem); + const $notification_sound_elem = $(settings_panel.notification_sound_elem); const for_realm_settings = settings_panel.for_realm_settings; - container.find(".play_notification_sound").on("click", () => { + $container.find(".play_notification_sound").on("click", () => { if (settings_object.notification_sound !== "none") { - notification_sound_elem[0].play(); + $notification_sound_elem[0].play(); } }); update_desktop_icon_count_display(settings_panel); - const notification_sound_dropdown = container.find(".setting_notification_sound"); - notification_sound_dropdown.val(settings_object.notification_sound); + const $notification_sound_dropdown = $container.find(".setting_notification_sound"); + $notification_sound_dropdown.val(settings_object.notification_sound); - container.find(".enable_sounds, .enable_stream_audible_notifications").on("change", () => { + $container.find(".enable_sounds, .enable_stream_audible_notifications").on("change", () => { if ( - container.find(".enable_stream_audible_notifications").prop("checked") || - container.find(".enable_sounds").prop("checked") + $container.find(".enable_stream_audible_notifications").prop("checked") || + $container.find(".enable_sounds").prop("checked") ) { - notification_sound_dropdown.prop("disabled", false); - notification_sound_dropdown.parent().removeClass("control-label-disabled"); + $notification_sound_dropdown.prop("disabled", false); + $notification_sound_dropdown.parent().removeClass("control-label-disabled"); } else { - notification_sound_dropdown.prop("disabled", true); - notification_sound_dropdown.parent().addClass("control-label-disabled"); + $notification_sound_dropdown.prop("disabled", true); + $notification_sound_dropdown.parent().addClass("control-label-disabled"); } }); set_notification_batching_ui( - container, + $container, settings_object.email_notifications_batching_period_seconds, ); @@ -160,45 +160,45 @@ export function set_up(settings_panel) { // Common handler for sending requests to the server when an input // element is changed. - container.find(".notification-settings-form").on("change", "input, select", function (e) { + $container.find(".notification-settings-form").on("change", "input, select", function (e) { e.preventDefault(); e.stopPropagation(); - const input_elem = $(e.currentTarget); - if (input_elem.parents("#stream-specific-notify-table").length) { + const $input_elem = $(e.currentTarget); + if ($input_elem.parents("#stream-specific-notify-table").length) { stream_edit.stream_setting_changed(e, true); return; } - let setting_name = input_elem.attr("name"); + let setting_name = $input_elem.attr("name"); let setting_value = settings_org.get_input_element_value(this); if (setting_name === "email_notifications_batching_period_seconds") { - if (input_elem.val() === "custom_period") { + if ($input_elem.val() === "custom_period") { set_notification_batching_ui( - container, + $container, settings_object.email_notifications_batching_period_seconds, true, ); return; } - set_notification_batching_ui(container, setting_value); + set_notification_batching_ui($container, setting_value); } else if (setting_name === "email_notification_batching_period_edit_minutes") { // This field is in minutes, but the actual setting is seconds setting_value = setting_value * 60; - set_notification_batching_ui(container, setting_value); + set_notification_batching_ui($container, setting_value); setting_name = "email_notifications_batching_period_seconds"; } change_notification_setting( setting_name, setting_value, - input_elem.closest(".subsection-parent").find(".alert-notification"), + $input_elem.closest(".subsection-parent").find(".alert-notification"), ); }); // This final patch of settings are ones for which we // intentionally don't let organization administrators set // organization-level defaults. - container.find(".send_test_notification").on("click", () => { + $container.find(".send_test_notification").on("click", () => { notifications.send_test_notification( $t({defaultMessage: "This is what a Zulip notification looks like."}), ); @@ -209,7 +209,7 @@ export function set_up(settings_panel) { } export function update_page(settings_panel) { - const container = $(settings_panel.container); + const $container = $(settings_panel.container); const settings_object = settings_panel.settings_object; for (const setting of settings_config.all_notification_settings) { switch (setting) { @@ -219,7 +219,9 @@ export function update_page(settings_panel) { // we should just leave the checkbox always off. break; } - container.find(`.${CSS.escape(setting)}`).prop("checked", settings_object[setting]); + $container + .find(`.${CSS.escape(setting)}`) + .prop("checked", settings_object[setting]); break; } case "desktop_icon_count_display": { @@ -227,15 +229,17 @@ export function update_page(settings_panel) { break; } case "email_notifications_batching_period_seconds": { - set_notification_batching_ui(container, settings_object[setting]); + set_notification_batching_ui($container, settings_object[setting]); break; } case "notification_sound": { - container.find(`.setting_${CSS.escape(setting)}`).val(settings_object[setting]); + $container.find(`.setting_${CSS.escape(setting)}`).val(settings_object[setting]); break; } default: { - container.find(`.${CSS.escape(setting)}`).prop("checked", settings_object[setting]); + $container + .find(`.${CSS.escape(setting)}`) + .prop("checked", settings_object[setting]); break; } } @@ -244,18 +248,18 @@ export function update_page(settings_panel) { } export function update_muted_stream_state(sub) { - const row = $( + const $row = $( `#stream-specific-notify-table .stream-row[data-stream-id='${CSS.escape(sub.stream_id)}']`, ); - $(row).toggleClass("control-label-disabled", sub.is_muted); + $($row).toggleClass("control-label-disabled", sub.is_muted); if (sub.is_muted) { - $(row).find(".unmute_stream").show(); + $($row).find(".unmute_stream").show(); } else { - $(row).find(".unmute_stream").hide(); + $($row).find(".unmute_stream").hide(); } - $(row).find("input").prop("disabled", sub.is_muted); - $(row) + $($row).find("input").prop("disabled", sub.is_muted); + $($row) .find('[name="push_notifications"]') .prop("disabled", !page_params.realm_push_notifications_enabled || sub.is_muted); } @@ -270,14 +274,14 @@ export function initialize() { $("body").on("click", "#stream-specific-notify-table .unmute_stream", (e) => { e.preventDefault(); e.stopPropagation(); - const row = $(e.currentTarget).closest(".stream-row"); - const stream_id = Number.parseInt(row.attr("data-stream-id"), 10); + const $row = $(e.currentTarget).closest(".stream-row"); + const stream_id = Number.parseInt($row.attr("data-stream-id"), 10); const sub = sub_store.get(stream_id); stream_settings_ui.set_muted( sub, !sub.is_muted, - row.closest(".subsection-parent").find(".alert-notification"), + $row.closest(".subsection-parent").find(".alert-notification"), ); }); } diff --git a/static/js/settings_org.js b/static/js/settings_org.js index 3bdee36ff0..592db4e12b 100644 --- a/static/js/settings_org.js +++ b/static/js/settings_org.js @@ -201,29 +201,29 @@ function get_property_value(property_name, for_realm_default_settings) { return page_params[property_name]; } -export function extract_property_name(elem, for_realm_default_settings) { +export function extract_property_name($elem, for_realm_default_settings) { if (for_realm_default_settings) { // We use the name attribute, rather than the ID attribute, // for realm_user_default_settings. This is because the // display/notification settings elements do not always have // IDs, and also the emojiset input is not compatible with the // ID approach. - return elem.attr("name"); + return $elem.attr("name"); } - return /^id_(.*)$/.exec(elem.attr("id").replace(/-/g, "_"))[1]; + return /^id_(.*)$/.exec($elem.attr("id").replace(/-/g, "_"))[1]; } function get_subsection_property_elements(element) { - const subsection = $(element).closest(".org-subsection-parent"); - if (subsection.hasClass("theme-settings")) { + const $subsection = $(element).closest(".org-subsection-parent"); + if ($subsection.hasClass("theme-settings")) { // Because the emojiset widget has a unique radio button // structure, it needs custom code. - const color_scheme_elem = subsection.find(".setting_color_scheme"); - const emojiset_elem = subsection.find("input[name='emojiset']:checked"); - const translate_emoticons_elem = subsection.find(".translate_emoticons"); - return [color_scheme_elem, emojiset_elem, translate_emoticons_elem]; + const $color_scheme_elem = $subsection.find(".setting_color_scheme"); + const $emojiset_elem = $subsection.find("input[name='emojiset']:checked"); + const $translate_emoticons_elem = $subsection.find(".translate_emoticons"); + return [$color_scheme_elem, $emojiset_elem, $translate_emoticons_elem]; } - return Array.from(subsection.find(".prop-element")); + return Array.from($subsection.find(".prop-element")); } const simple_dropdown_properties = [ @@ -245,11 +245,11 @@ function set_property_dropdown_value(property_name) { } export function change_element_block_display_property(elem_id, show_element) { - const elem = $(`#${CSS.escape(elem_id)}`); + const $elem = $(`#${CSS.escape(elem_id)}`); if (show_element) { - elem.parent().show(); + $elem.parent().show(); } else { - elem.parent().hide(); + $elem.parent().hide(); } } @@ -382,11 +382,11 @@ export function populate_realm_domains(realm_domains) { } $("#allowed_domains_label").text($t({defaultMessage: "Allowed domains: {domains}"}, {domains})); - const realm_domains_table_body = $("#realm_domains_table tbody").expectOne(); - realm_domains_table_body.find("tr").remove(); + const $realm_domains_table_body = $("#realm_domains_table tbody").expectOne(); + $realm_domains_table_body.find("tr").remove(); for (const realm_domain of realm_domains) { - realm_domains_table_body.append( + $realm_domains_table_body.append( render_settings_admin_realm_domains_list({ realm_domain, }), @@ -409,7 +409,7 @@ export function populate_auth_methods(auth_methods) { if (!meta.loaded) { return; } - const auth_methods_table = $("#id_realm_authentication_methods").expectOne(); + const $auth_methods_table = $("#id_realm_authentication_methods").expectOne(); auth_methods = sort_object_by_key(auth_methods); let rendered_auth_method_rows = ""; for (const [auth_method, value] of Object.entries(auth_methods)) { @@ -419,7 +419,7 @@ export function populate_auth_methods(auth_methods) { is_owner: page_params.is_owner, }); } - auth_methods_table.html(rendered_auth_method_rows); + $auth_methods_table.html(rendered_auth_method_rows); } function update_dependent_subsettings(property_name) { @@ -475,8 +475,8 @@ export let notifications_stream_widget = null; export let signup_notifications_stream_widget = null; function discard_property_element_changes(elem, for_realm_default_settings) { - elem = $(elem); - const property_name = extract_property_name(elem, for_realm_default_settings); + const $elem = $(elem); + const property_name = extract_property_name($elem, for_realm_default_settings); const property_value = get_property_value(property_name, for_realm_default_settings); switch (property_name) { @@ -495,7 +495,8 @@ function discard_property_element_changes(elem, for_realm_default_settings) { case "emojiset": // Because the emojiset widget has a unique radio button // structure, it needs custom reset code. - elem.closest(".org-subsection-parent") + $elem + .closest(".org-subsection-parent") .find(`.setting_emojiset_choice[value='${CSS.escape(property_value)}'`) .prop("checked", true); break; @@ -508,7 +509,7 @@ function discard_property_element_changes(elem, for_realm_default_settings) { break; default: if (property_value !== undefined) { - set_input_element_value(elem, property_value); + set_input_element_value($elem, property_value); } else { blueslip.error("Element refers to unknown property " + property_name); } @@ -550,9 +551,9 @@ export function sync_realm_settings(property) { property = "message_content_delete_limit_minutes"; break; } - const element = $(`#id_realm_${CSS.escape(property)}`); - if (element.length) { - discard_property_element_changes(element); + const $element = $(`#id_realm_${CSS.escape(property)}`); + if ($element.length) { + discard_property_element_changes($element); } } @@ -620,46 +621,46 @@ export function change_save_button_state($element, state) { show_hide_element($element, is_show, 800); } -export function save_organization_settings(data, save_button, patch_url) { - const subsection_parent = save_button.closest(".org-subsection-parent"); - const save_btn_container = subsection_parent.find(".save-button-controls"); - const failed_alert_elem = subsection_parent.find(".subsection-failed-status p"); - change_save_button_state(save_btn_container, "saving"); +export function save_organization_settings(data, $save_button, patch_url) { + const $subsection_parent = $save_button.closest(".org-subsection-parent"); + const $save_btn_container = $subsection_parent.find(".save-button-controls"); + const $failed_alert_elem = $subsection_parent.find(".subsection-failed-status p"); + change_save_button_state($save_btn_container, "saving"); channel.patch({ url: patch_url, data, success() { - failed_alert_elem.hide(); - change_save_button_state(save_btn_container, "succeeded"); + $failed_alert_elem.hide(); + change_save_button_state($save_btn_container, "succeeded"); }, error(xhr) { - change_save_button_state(save_btn_container, "failed"); - save_button.hide(); - ui_report.error($t_html({defaultMessage: "Save failed"}), xhr, failed_alert_elem); + change_save_button_state($save_btn_container, "failed"); + $save_button.hide(); + ui_report.error($t_html({defaultMessage: "Save failed"}), xhr, $failed_alert_elem); }, }); } -function get_input_type(input_elem, input_type) { +function get_input_type($input_elem, input_type) { if (["boolean", "string", "number"].includes(input_type)) { return input_type; } - return input_elem.data("setting-widget-type"); + return $input_elem.data("setting-widget-type"); } export function get_input_element_value(input_elem, input_type) { - input_elem = $(input_elem); - input_type = get_input_type(input_elem, input_type); + const $input_elem = $(input_elem); + input_type = get_input_type($input_elem, input_type); switch (input_type) { case "boolean": - return input_elem.prop("checked"); + return $input_elem.prop("checked"); case "string": - return input_elem.val().trim(); + return $input_elem.val().trim(); case "number": - return Number.parseInt(input_elem.val().trim(), 10); + return Number.parseInt($input_elem.val().trim(), 10); case "radio-group": - if (input_elem.prop("checked")) { - return input_elem.val().trim(); + if ($input_elem.prop("checked")) { + return $input_elem.val().trim(); } return undefined; default: @@ -667,16 +668,16 @@ export function get_input_element_value(input_elem, input_type) { } } -export function set_input_element_value(input_elem, value) { - const input_type = get_input_type(input_elem, typeof value); +export function set_input_element_value($input_elem, value) { + const input_type = get_input_type($input_elem, typeof value); if (input_type) { if (input_type === "boolean") { - return input_elem.prop("checked", value); + return $input_elem.prop("checked", value); } else if (input_type === "string" || input_type === "number") { - return input_elem.val(value); + return $input_elem.val(value); } } - blueslip.error(`Failed to set value of property ${extract_property_name(input_elem)}`); + blueslip.error(`Failed to set value of property ${extract_property_name($input_elem)}`); return undefined; } @@ -687,9 +688,9 @@ export function set_up() { function get_auth_method_table_data() { const new_auth_methods = {}; - const auth_method_rows = $("#id_realm_authentication_methods").find("tr.method_row"); + const $auth_method_rows = $("#id_realm_authentication_methods").find("tr.method_row"); - for (const method_row of auth_method_rows) { + for (const method_row of $auth_method_rows) { new_auth_methods[$(method_row).data("method")] = $(method_row) .find("input") .prop("checked"); @@ -711,8 +712,8 @@ function get_email_notification_batching_setting_element_value() { } function check_property_changed(elem, for_realm_default_settings) { - elem = $(elem); - const property_name = extract_property_name(elem, for_realm_default_settings); + const $elem = $(elem); + const property_name = extract_property_name($elem, for_realm_default_settings); let current_val = get_property_value(property_name, for_realm_default_settings); let changed_val; @@ -739,7 +740,7 @@ function check_property_changed(elem, for_realm_default_settings) { } default: if (current_val !== undefined) { - changed_val = get_input_element_value(elem, typeof current_val); + changed_val = get_input_element_value($elem, typeof current_val); } else { blueslip.error("Element refers to unknown property " + property_name); } @@ -747,17 +748,17 @@ function check_property_changed(elem, for_realm_default_settings) { return current_val !== changed_val; } -export function save_discard_widget_status_handler(subsection, for_realm_default_settings) { - subsection.find(".subsection-failed-status p").hide(); - subsection.find(".save-button").show(); - const properties_elements = get_subsection_property_elements(subsection); +export function save_discard_widget_status_handler($subsection, for_realm_default_settings) { + $subsection.find(".subsection-failed-status p").hide(); + $subsection.find(".save-button").show(); + const properties_elements = get_subsection_property_elements($subsection); const show_change_process_button = properties_elements.some((elem) => check_property_changed(elem, for_realm_default_settings), ); - const save_btn_controls = subsection.find(".subsection-header .save-button-controls"); + const $save_btn_controls = $subsection.find(".subsection-header .save-button-controls"); const button_state = show_change_process_button ? "unsaved" : "discarded"; - change_save_button_state(save_btn_controls, button_state); + change_save_button_state($save_btn_controls, button_state); } export function init_dropdown_widgets() { @@ -799,11 +800,11 @@ export function init_dropdown_widgets() { } export function register_save_discard_widget_handlers( - container, + $container, patch_url, for_realm_default_settings, ) { - container.on("change input", "input, select, textarea", (e) => { + $container.on("change input", "input, select, textarea", (e) => { e.preventDefault(); e.stopPropagation(); @@ -829,23 +830,23 @@ export function register_save_discard_widget_handlers( ); } - const subsection = $(e.target).closest(".org-subsection-parent"); - save_discard_widget_status_handler(subsection, for_realm_default_settings); + const $subsection = $(e.target).closest(".org-subsection-parent"); + save_discard_widget_status_handler($subsection, for_realm_default_settings); return undefined; }); - container.on("click", ".subsection-header .subsection-changes-discard button", (e) => { + $container.on("click", ".subsection-header .subsection-changes-discard button", (e) => { e.preventDefault(); e.stopPropagation(); for (const elem of get_subsection_property_elements(e.target)) { discard_property_element_changes(elem, for_realm_default_settings); } - const save_btn_controls = $(e.target).closest(".save-button-controls"); - change_save_button_state(save_btn_controls, "discarded"); + const $save_btn_controls = $(e.target).closest(".save-button-controls"); + change_save_button_state($save_btn_controls, "discarded"); }); - parse_time_limit = function parse_time_limit(elem) { - return Math.floor(Number.parseFloat(elem.val(), 10).toFixed(1) * 60); + parse_time_limit = function parse_time_limit($elem) { + return Math.floor(Number.parseFloat($elem.val(), 10).toFixed(1) * 60); }; function get_complete_data_for_subsection(subsection) { @@ -967,18 +968,18 @@ export function register_save_discard_widget_handlers( const data = {}; const properties_elements = get_subsection_property_elements(subsection); - for (let input_elem of properties_elements) { - input_elem = $(input_elem); - if (check_property_changed(input_elem, for_realm_default_settings)) { + for (const input_elem of properties_elements) { + const $input_elem = $(input_elem); + if (check_property_changed($input_elem, for_realm_default_settings)) { if ( - input_elem.hasClass("email_notification_batching_period_edit_minutes") || - input_elem.hasClass("setting_email_notifications_batching_period_seconds") + $input_elem.hasClass("email_notification_batching_period_edit_minutes") || + $input_elem.hasClass("setting_email_notifications_batching_period_seconds") ) { const setting_value = get_email_notification_batching_setting_element_value(); data.email_notifications_batching_period_seconds = setting_value; continue; } - const input_value = get_input_element_value(input_elem); + const input_value = get_input_element_value($input_elem); if (input_value !== undefined) { let property_name; if (for_realm_default_settings) { @@ -987,9 +988,9 @@ export function register_save_discard_widget_handlers( // display/notification settings elements do not always have // IDs, and also the emojiset input is not compatible with the // ID approach. - property_name = input_elem.attr("name"); + property_name = $input_elem.attr("name"); } else { - [, property_name] = /^id_realm_(.*)$/.exec(input_elem.attr("id")); + [, property_name] = /^id_realm_(.*)$/.exec($input_elem.attr("id")); } data[property_name] = input_value; } @@ -999,27 +1000,27 @@ export function register_save_discard_widget_handlers( return data; } - container.on("click", ".subsection-header .subsection-changes-save button", (e) => { + $container.on("click", ".subsection-header .subsection-changes-save button", (e) => { e.preventDefault(); e.stopPropagation(); - const save_button = $(e.currentTarget); - const subsection_elem = save_button.closest(".org-subsection-parent"); + const $save_button = $(e.currentTarget); + const $subsection_elem = $save_button.closest(".org-subsection-parent"); let extra_data = {}; if (!for_realm_default_settings) { // The organization settings system has some coupled // fields that must be submitted together, which is // managed by the get_complete_data_for_subsection function. - const [, subsection_id] = /^org-submit-(.*)$/.exec(save_button.attr("id")); + const [, subsection_id] = /^org-submit-(.*)$/.exec($save_button.attr("id")); const subsection = subsection_id.replace(/-/g, "_"); extra_data = get_complete_data_for_subsection(subsection); } const data = { - ...populate_data_for_request(subsection_elem), + ...populate_data_for_request($subsection_elem), ...extra_data, }; - save_organization_settings(data, save_button, patch_url); + save_organization_settings(data, $save_button, patch_url); }); } @@ -1107,14 +1108,14 @@ export function build_page() { $("#id_realm_org_join_restrictions").on("change", (e) => { const org_join_restrictions = e.target.value; - const node = $("#allowed_domains_label").parent(); + const $node = $("#allowed_domains_label").parent(); if (org_join_restrictions === "only_selected_domain") { - node.show(); + $node.show(); if (page_params.realm_domains.length === 0) { overlays.open_modal("#realm_domains_modal"); } } else { - node.hide(); + $node.hide(); } }); @@ -1125,38 +1126,38 @@ export function build_page() { e.stopPropagation(); }); - function fade_status_element(elem) { + function fade_status_element($elem) { setTimeout(() => { - elem.fadeOut(500); + $elem.fadeOut(500); }, 1000); } $("#realm_domains_table").on("click", ".delete_realm_domain", function () { const domain = $(this).parents("tr").find(".domain").text(); const url = "/json/realm/domains/" + domain; - const realm_domains_info = $(".realm_domains_info"); + const $realm_domains_info = $(".realm_domains_info"); channel.del({ url, success() { ui_report.success( $t_html({defaultMessage: "Deleted successfully!"}), - realm_domains_info, + $realm_domains_info, ); - fade_status_element(realm_domains_info); + fade_status_element($realm_domains_info); }, error(xhr) { - ui_report.error($t_html({defaultMessage: "Failed"}), xhr, realm_domains_info); - fade_status_element(realm_domains_info); + ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $realm_domains_info); + fade_status_element($realm_domains_info); }, }); }); $("#submit-add-realm-domain").on("click", () => { - const realm_domains_info = $(".realm_domains_info"); - const widget = $("#add-realm-domain-widget"); - const domain = widget.find(".new-realm-domain").val(); - const allow_subdomains = widget.find(".new-realm-domain-allow-subdomains").prop("checked"); + const $realm_domains_info = $(".realm_domains_info"); + const $widget = $("#add-realm-domain-widget"); + const domain = $widget.find(".new-realm-domain").val(); + const allow_subdomains = $widget.find(".new-realm-domain-allow-subdomains").prop("checked"); const data = { domain, allow_subdomains: JSON.stringify(allow_subdomains), @@ -1173,20 +1174,20 @@ export function build_page() { ); ui_report.success( $t_html({defaultMessage: "Added successfully!"}), - realm_domains_info, + $realm_domains_info, ); - fade_status_element(realm_domains_info); + fade_status_element($realm_domains_info); }, error(xhr) { - ui_report.error($t_html({defaultMessage: "Failed"}), xhr, realm_domains_info); - fade_status_element(realm_domains_info); + ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $realm_domains_info); + fade_status_element($realm_domains_info); }, }); }); $("#realm_domains_table").on("change", ".allow-subdomains", function (e) { e.stopPropagation(); - const realm_domains_info = $(".realm_domains_info"); + const $realm_domains_info = $(".realm_domains_info"); const domain = $(this).parents("tr").find(".domain").text(); const allow_subdomains = $(this).prop("checked"); const url = "/json/realm/domains/" + domain; @@ -1204,7 +1205,7 @@ export function build_page() { {defaultMessage: "Update successful: Subdomains allowed for {domain}"}, {domain}, ), - realm_domains_info, + $realm_domains_info, ); } else { ui_report.success( @@ -1215,37 +1216,37 @@ export function build_page() { }, {domain}, ), - realm_domains_info, + $realm_domains_info, ); } - fade_status_element(realm_domains_info); + fade_status_element($realm_domains_info); }, error(xhr) { - ui_report.error($t_html({defaultMessage: "Failed"}), xhr, realm_domains_info); - fade_status_element(realm_domains_info); + ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $realm_domains_info); + fade_status_element($realm_domains_info); }, }); }); - function realm_icon_logo_upload_complete(spinner, upload_text, delete_button) { - spinner.css({visibility: "hidden"}); - upload_text.show(); - delete_button.show(); + function realm_icon_logo_upload_complete($spinner, $upload_text, $delete_button) { + $spinner.css({visibility: "hidden"}); + $upload_text.show(); + $delete_button.show(); } - function realm_icon_logo_upload_start(spinner, upload_text, delete_button) { - spinner.css({visibility: "visible"}); - upload_text.hide(); - delete_button.hide(); + function realm_icon_logo_upload_start($spinner, $upload_text, $delete_button) { + $spinner.css({visibility: "visible"}); + $upload_text.hide(); + $delete_button.hide(); } - function upload_realm_logo_or_icon(file_input, night, icon) { + function upload_realm_logo_or_icon($file_input, night, icon) { const form_data = new FormData(); let widget; let url; form_data.append("csrfmiddlewaretoken", csrf_token); - for (const [i, file] of Array.prototype.entries.call(file_input[0].files)) { + for (const [i, file] of Array.prototype.entries.call($file_input[0].files)) { form_data.append("file-" + i, file); } if (icon) { @@ -1260,12 +1261,12 @@ export function build_page() { url = "/json/realm/logo"; form_data.append("night", JSON.stringify(night)); } - const spinner = $(`${widget} .upload-spinner-background`).expectOne(); - const upload_text = $(`${widget} .image-upload-text`).expectOne(); - const delete_button = $(`${widget} .image-delete-button`).expectOne(); - const error_field = $(`${widget} .image_file_input_error`).expectOne(); - realm_icon_logo_upload_start(spinner, upload_text, delete_button); - error_field.hide(); + const $spinner = $(`${widget} .upload-spinner-background`).expectOne(); + const $upload_text = $(`${widget} .image-upload-text`).expectOne(); + const $delete_button = $(`${widget} .image-delete-button`).expectOne(); + const $error_field = $(`${widget} .image_file_input_error`).expectOne(); + realm_icon_logo_upload_start($spinner, $upload_text, $delete_button); + $error_field.hide(); channel.post({ url, data: form_data, @@ -1273,11 +1274,11 @@ export function build_page() { processData: false, contentType: false, success() { - realm_icon_logo_upload_complete(spinner, upload_text, delete_button); + realm_icon_logo_upload_complete($spinner, $upload_text, $delete_button); }, error(xhr) { - realm_icon_logo_upload_complete(spinner, upload_text, delete_button); - ui_report.error("", xhr, error_field); + realm_icon_logo_upload_complete($spinner, $upload_text, $delete_button); + ui_report.error("", xhr, $error_field); }, }); } diff --git a/static/js/settings_panel_menu.js b/static/js/settings_panel_menu.js index ff058d9807..d3393c8439 100644 --- a/static/js/settings_panel_menu.js +++ b/static/js/settings_panel_menu.js @@ -22,11 +22,11 @@ function two_column_mode() { export class SettingsPanelMenu { constructor(opts) { - this.main_elem = opts.main_elem; + this.$main_elem = opts.$main_elem; this.hash_prefix = opts.hash_prefix; - this.curr_li = this.main_elem.children("li").eq(0); + this.$curr_li = this.$main_elem.children("li").eq(0); - this.main_elem.on("click", "li[data-section]", (e) => { + this.$main_elem.on("click", "li[data-section]", (e) => { const section = $(e.currentTarget).attr("data-section"); this.activate_section_or_default(section); @@ -39,32 +39,32 @@ export class SettingsPanelMenu { } show() { - this.main_elem.show(); + this.$main_elem.show(); const section = this.current_tab(); if (two_column_mode()) { // In one column mode want to show the settings list, not the first settings section. this.activate_section_or_default(section); } - this.curr_li.trigger("focus"); + this.$curr_li.trigger("focus"); } hide() { - this.main_elem.hide(); + this.$main_elem.hide(); } current_tab() { - return this.curr_li.data("section"); + return this.$curr_li.data("section"); } li_for_section(section) { - const li = $(`#settings_overlay_container li[data-section='${CSS.escape(section)}']`); - return li; + const $li = $(`#settings_overlay_container li[data-section='${CSS.escape(section)}']`); + return $li; } set_key_handlers(toggler) { const {vim_left, vim_right, vim_up, vim_down} = keydown_util; keydown_util.handle({ - elem: this.main_elem, + $elem: this.$main_elem, handlers: { ArrowLeft: toggler.maybe_go_left, ArrowRight: toggler.maybe_go_right, @@ -82,20 +82,20 @@ export class SettingsPanelMenu { } prev() { - this.curr_li.prevAll(":visible:first").trigger("focus").trigger("click"); + this.$curr_li.prevAll(":visible:first").trigger("focus").trigger("click"); return true; } next() { - this.curr_li.nextAll(":visible:first").trigger("focus").trigger("click"); + this.$curr_li.nextAll(":visible:first").trigger("focus").trigger("click"); return true; } enter_panel() { - const panel = this.get_panel(); - const panel_elem = panel.find("input:visible,button:visible,select:visible").first(); + const $panel = this.get_panel(); + const $panel_elem = $panel.find("input:visible,button:visible,select:visible").first(); - panel_elem.trigger("focus"); + $panel_elem.trigger("focus"); return true; } @@ -115,10 +115,10 @@ export class SettingsPanelMenu { } } - this.curr_li = this.li_for_section(section); + this.$curr_li = this.li_for_section(section); - this.main_elem.children("li").removeClass("active"); - this.curr_li.addClass("active"); + this.$main_elem.children("li").removeClass("active"); + this.$curr_li.addClass("active"); const settings_section_hash = "#" + this.hash_prefix + section; @@ -141,20 +141,20 @@ export class SettingsPanelMenu { } get_panel() { - const section = this.curr_li.data("section"); + const section = this.$curr_li.data("section"); const sel = `[data-name='${CSS.escape(section)}']`; - const panel = $(".settings-section" + sel); - return panel; + const $panel = $(".settings-section" + sel); + return $panel; } } export function initialize() { normal_settings = new SettingsPanelMenu({ - main_elem: $(".normal-settings-list"), + $main_elem: $(".normal-settings-list"), hash_prefix: "settings/", }); org_settings = new SettingsPanelMenu({ - main_elem: $(".org-settings-list"), + $main_elem: $(".org-settings-list"), hash_prefix: "organization/", }); } diff --git a/static/js/settings_playgrounds.js b/static/js/settings_playgrounds.js index 3dcdc240ac..c4f3bd6f80 100644 --- a/static/js/settings_playgrounds.js +++ b/static/js/settings_playgrounds.js @@ -46,8 +46,8 @@ export function populate_playgrounds(playgrounds_data) { return; } - const playgrounds_table = $("#admin_playgrounds_table").expectOne(); - ListWidget.create(playgrounds_table, playgrounds_data, { + const $playgrounds_table = $("#admin_playgrounds_table").expectOne(); + ListWidget.create($playgrounds_table, playgrounds_data, { name: "playgrounds_list", modifier(playground) { return render_admin_playground_list({ @@ -61,7 +61,7 @@ export function populate_playgrounds(playgrounds_data) { }); }, filter: { - element: playgrounds_table.closest(".settings-section").find(".search"), + $element: $playgrounds_table.closest(".settings-section").find(".search"), predicate(item, value) { return ( item.name.toLowerCase().includes(value) || @@ -69,16 +69,16 @@ export function populate_playgrounds(playgrounds_data) { ); }, onupdate() { - ui.reset_scrollbar(playgrounds_table); + ui.reset_scrollbar($playgrounds_table); }, }, - parent_container: $("#playground-settings").expectOne(), + $parent_container: $("#playground-settings").expectOne(), init_sort: [sort_pygments_language], sort_fields: { pygments_language: sort_pygments_language, playground_name: sort_playground_name, }, - simplebar_container: $("#playground-settings .progressive-table-wrapper"), + $simplebar_container: $("#playground-settings .progressive-table-wrapper"), }); } @@ -94,12 +94,12 @@ function build_page() { $(".admin_playgrounds_table").on("click", ".delete", function (e) { e.preventDefault(); e.stopPropagation(); - const btn = $(this); + const $btn = $(this); channel.del({ - url: "/json/realm/playgrounds/" + encodeURIComponent(btn.attr("data-playground-id")), + url: "/json/realm/playgrounds/" + encodeURIComponent($btn.attr("data-playground-id")), error(xhr) { - ui_report.generic_row_button_error(xhr, btn); + ui_report.generic_row_button_error(xhr, $btn); }, // There is no need for an on-success action here since the row is removed by the // `realm_playgrounds` events handler which builds the playground list again. @@ -111,10 +111,10 @@ function build_page() { .on("submit", (e) => { e.preventDefault(); e.stopPropagation(); - const playground_status = $("#admin-playground-status"); - const add_playground_button = $(".new-playground-form button"); - add_playground_button.prop("disabled", true); - playground_status.hide(); + const $playground_status = $("#admin-playground-status"); + const $add_playground_button = $(".new-playground-form button"); + $add_playground_button.prop("disabled", true); + $playground_status.hide(); const data = { name: $("#playground_name").val(), pygments_language: $("#playground_pygments_language").val(), @@ -127,10 +127,10 @@ function build_page() { $("#playground_pygments_language").val(""); $("#playground_name").val(""); $("#playground_url_prefix").val(""); - add_playground_button.prop("disabled", false); + $add_playground_button.prop("disabled", false); ui_report.success( $t_html({defaultMessage: "Custom playground added!"}), - playground_status, + $playground_status, 3000, ); // FIXME: One thing to note here is that the "view code in playground" @@ -144,21 +144,21 @@ function build_page() { // take this up later. }, error(xhr) { - add_playground_button.prop("disabled", false); + $add_playground_button.prop("disabled", false); ui_report.error( $t_html({defaultMessage: "Failed"}), xhr, - playground_status, + $playground_status, 3000, ); }, }); }); - const search_pygments_box = $("#playground_pygments_language"); + const $search_pygments_box = $("#playground_pygments_language"); let language_labels = new Map(); - search_pygments_box.typeahead({ + $search_pygments_box.typeahead({ source(query) { language_labels = realm_playground.get_pygments_typeahead_list(query); return Array.from(language_labels.keys()); @@ -175,8 +175,8 @@ function build_page() { }, }); - search_pygments_box.on("click", (e) => { - search_pygments_box.typeahead("lookup").trigger("select"); + $search_pygments_box.on("click", (e) => { + $search_pygments_box.typeahead("lookup").trigger("select"); e.preventDefault(); e.stopPropagation(); }); diff --git a/static/js/settings_profile_fields.js b/static/js/settings_profile_fields.js index 6e3cd5efca..313181151e 100644 --- a/static/js/settings_profile_fields.js +++ b/static/js/settings_profile_fields.js @@ -43,13 +43,13 @@ export function field_type_id_to_string(type_id) { } function update_profile_fields_table_element() { - const profile_fields_table = $("#admin_profile_fields_table").expectOne(); + const $profile_fields_table = $("#admin_profile_fields_table").expectOne(); // If there are no custom fields, hide the table headers at the top if (page_params.custom_profile_fields.length < 1) { - profile_fields_table.hide(); + $profile_fields_table.hide(); } else { - profile_fields_table.show(); + $profile_fields_table.show(); } } @@ -91,16 +91,16 @@ function read_external_account_field_data(field_elem) { return field_data; } -function update_choice_delete_btn(container, display_flag) { - const no_of_choice_row = container.find(".choice-row").length; +function update_choice_delete_btn($container, display_flag) { + const no_of_choice_row = $container.find(".choice-row").length; // Disable delete button if there only one choice row // Enable choice delete button more one than once choice if (no_of_choice_row === 1) { if (display_flag === true) { - container.find(".choice-row .delete-choice").show(); + $container.find(".choice-row .delete-choice").show(); } else { - container.find(".choice-row .delete-choice").hide(); + $container.find(".choice-row .delete-choice").hide(); } } } @@ -131,25 +131,25 @@ function clear_form_data() { } function set_up_create_field_form() { - const field_elem = $("#profile_field_external_accounts"); - const field_url_pattern_elem = $("#custom_external_account_url_pattern"); + const $field_elem = $("#profile_field_external_accounts"); + const $field_url_pattern_elem = $("#custom_external_account_url_pattern"); if (Number.parseInt($("#profile_field_type").val(), 10) === field_types.EXTERNAL_ACCOUNT.id) { - field_elem.show(); + $field_elem.show(); if ($("#profile_field_external_accounts_type").val() === "custom") { - field_url_pattern_elem.show(); + $field_url_pattern_elem.show(); $("#profile_field_name").val("").closest(".control-group").show(); $("#profile_field_hint").val("").closest(".control-group").show(); } else { - field_url_pattern_elem.hide(); + $field_url_pattern_elem.hide(); $("#profile_field_name").closest(".control-group").hide(); $("#profile_field_hint").closest(".control-group").hide(); } } else { $("#profile_field_name").closest(".control-group").show(); $("#profile_field_hint").closest(".control-group").show(); - field_url_pattern_elem.hide(); - field_elem.hide(); + $field_url_pattern_elem.hide(); + $field_elem.hide(); } } @@ -205,16 +205,16 @@ function add_choice_row(e) { } function delete_choice_row(e) { - const row = $(e.currentTarget).parent(); - const container = row.parent(); - row.remove(); - update_choice_delete_btn(container, false); + const $row = $(e.currentTarget).parent(); + const $container = $row.parent(); + $row.remove(); + update_choice_delete_btn($container, false); } function get_profile_field_info(id) { const info = {}; - info.row = $(`tr.profile-field-row[data-profile-field-id='${CSS.escape(id)}']`); - info.form = $(`tr.profile-field-form[data-profile-field-id='${CSS.escape(id)}']`); + info.$row = $(`tr.profile-field-row[data-profile-field-id='${CSS.escape(id)}']`); + info.$form = $(`tr.profile-field-form[data-profile-field-id='${CSS.escape(id)}']`); return info; } @@ -236,28 +236,28 @@ export function parse_field_choices_from_field_data(field_data) { } function set_up_external_account_field_edit_form(field_elem, url_pattern_val) { - if (field_elem.form.find("select[name=external_acc_field_type]").val() === "custom") { - field_elem.form.find("input[name=url_pattern]").val(url_pattern_val); - field_elem.form.find(".custom_external_account_detail").show(); - field_elem.form.find("input[name=name]").val("").closest(".control-group").show(); - field_elem.form.find("input[name=hint]").val("").closest(".control-group").show(); + if (field_elem.$form.find("select[name=external_acc_field_type]").val() === "custom") { + field_elem.$form.find("input[name=url_pattern]").val(url_pattern_val); + field_elem.$form.find(".custom_external_account_detail").show(); + field_elem.$form.find("input[name=name]").val("").closest(".control-group").show(); + field_elem.$form.find("input[name=hint]").val("").closest(".control-group").show(); } else { - field_elem.form.find("input[name=name]").closest(".control-group").hide(); - field_elem.form.find("input[name=hint]").closest(".control-group").hide(); - field_elem.form.find(".custom_external_account_detail").hide(); + field_elem.$form.find("input[name=name]").closest(".control-group").hide(); + field_elem.$form.find("input[name=hint]").closest(".control-group").hide(); + field_elem.$form.find(".custom_external_account_detail").hide(); } } function set_up_select_field_edit_form(profile_field, field_data) { // Re-render field choices in edit form to load initial select data - const choice_list = profile_field.form.find(".edit_profile_field_choices_container"); - choice_list.off(); - choice_list.html(""); + const $choice_list = profile_field.$form.find(".edit_profile_field_choices_container"); + $choice_list.off(); + $choice_list.html(""); const choices_data = parse_field_choices_from_field_data(field_data); for (const choice of choices_data) { - choice_list.append( + $choice_list.append( render_settings_profile_field_choice({ text: choice.text, }), @@ -265,9 +265,9 @@ function set_up_select_field_edit_form(profile_field, field_data) { } // Add blank choice at last - create_choice_row(choice_list); - update_choice_delete_btn(choice_list, false); - Sortable.create(choice_list[0], { + create_choice_row($choice_list); + update_choice_delete_btn($choice_list, false); + Sortable.create($choice_list[0], { onUpdate() {}, filter: "input", preventOnFilter: false, @@ -278,8 +278,8 @@ function open_edit_form(e) { const field_id = Number.parseInt($(e.currentTarget).attr("data-profile-field-id"), 10); const profile_field = get_profile_field_info(field_id); - profile_field.row.hide(); - profile_field.form.show(); + profile_field.$row.hide(); + profile_field.$form.show(); const field = get_profile_field(field_id); let field_data = {}; if (field.field_data) { @@ -291,47 +291,47 @@ function open_edit_form(e) { } if (Number.parseInt(field.type, 10) === field_types.EXTERNAL_ACCOUNT.id) { - profile_field.form.find("select[name=external_acc_field_type]").val(field_data.subtype); + profile_field.$form.find("select[name=external_acc_field_type]").val(field_data.subtype); set_up_external_account_field_edit_form(profile_field, field_data.url_pattern); } // Set initial value in edit form - profile_field.form.find("input[name=name]").val(field.name); - profile_field.form.find("input[name=hint]").val(field.hint); + profile_field.$form.find("input[name=name]").val(field.name); + profile_field.$form.find("input[name=hint]").val(field.hint); - profile_field.form.find(".reset").on("click", () => { - profile_field.form.hide(); - profile_field.row.show(); + profile_field.$form.find(".reset").on("click", () => { + profile_field.$form.hide(); + profile_field.$row.show(); }); - profile_field.form.find(".submit").on("click", () => { + profile_field.$form.find(".submit").on("click", () => { e.preventDefault(); e.stopPropagation(); - const profile_field_status = $("#admin-profile-field-status").expectOne(); + const $profile_field_status = $("#admin-profile-field-status").expectOne(); // For some reason jQuery's serialize() is not working with // channel.patch even though it is supported by $.ajax. const data = {}; - data.name = profile_field.form.find("input[name=name]").val(); - data.hint = profile_field.form.find("input[name=hint]").val(); + data.name = profile_field.$form.find("input[name=name]").val(); + data.hint = profile_field.$form.find("input[name=hint]").val(); data.field_data = JSON.stringify( - read_field_data_from_form(Number.parseInt(field.type, 10), profile_field.form), + read_field_data_from_form(Number.parseInt(field.type, 10), profile_field.$form), ); settings_ui.do_settings_change( channel.patch, "/json/realm/profile_fields/" + field_id, data, - profile_field_status, + $profile_field_status, ); }); - profile_field.form + profile_field.$form .find(".edit_profile_field_choices_container") .on("input", ".choice-row input", add_choice_row); - profile_field.form + profile_field.$form .find(".edit_profile_field_choices_container") .on("click", "button.delete-choice", delete_choice_row); $(".profile_field_external_accounts_edit select").on("change", (e) => { @@ -372,10 +372,10 @@ export function populate_profile_fields(profile_fields_data) { export function do_populate_profile_fields(profile_fields_data) { // We should only call this internally or from tests. - const profile_fields_table = $("#admin_profile_fields_table").expectOne(); + const $profile_fields_table = $("#admin_profile_fields_table").expectOne(); - profile_fields_table.find("tr.profile-field-row").remove(); // Clear all rows. - profile_fields_table.find("tr.profile-field-form").remove(); // Clear all rows. + $profile_fields_table.find("tr.profile-field-row").remove(); // Clear all rows. + $profile_fields_table.find("tr.profile-field-form").remove(); // Clear all rows. order = []; for (const profile_field of profile_fields_data) { @@ -389,7 +389,7 @@ export function do_populate_profile_fields(profile_fields_data) { choices = parse_field_choices_from_field_data(field_data); } - profile_fields_table.append( + $profile_fields_table.append( render_admin_profile_field_list({ profile_field: { id: profile_field.id, diff --git a/static/js/settings_realm_user_settings_defaults.js b/static/js/settings_realm_user_settings_defaults.js index d9450d54cd..8ab6471558 100644 --- a/static/js/settings_realm_user_settings_defaults.js +++ b/static/js/settings_realm_user_settings_defaults.js @@ -25,18 +25,18 @@ export function update_page(property) { if (!overlays.settings_open()) { return; } - const container = $(realm_default_settings_panel.container); + const $container = $(realm_default_settings_panel.container); let value = realm_user_settings_defaults[property]; // settings_org.set_input_element_value doesn't support radio // button widgets like this one. if (property === "emojiset") { - container.find(`input[value=${CSS.escape(value)}]`).prop("checked", true); + $container.find(`input[value=${CSS.escape(value)}]`).prop("checked", true); return; } if (property === "email_notifications_batching_period_seconds") { - settings_notifications.set_notification_batching_ui(container, value); + settings_notifications.set_notification_batching_ui($container, value); return; } @@ -47,17 +47,17 @@ export function update_page(property) { value = value.toString(); } - const input_elem = container.find(`[name=${CSS.escape(property)}]`); - settings_org.set_input_element_value(input_elem, value); + const $input_elem = $container.find(`[name=${CSS.escape(property)}]`); + settings_org.set_input_element_value($input_elem, value); } export function set_up() { - const container = $(realm_default_settings_panel.container); + const $container = $(realm_default_settings_panel.container); settings_display.set_up(realm_default_settings_panel); settings_notifications.set_up(realm_default_settings_panel); settings_org.register_save_discard_widget_handlers( - container, + $container, "/json/realm/user_settings_defaults", true, ); diff --git a/static/js/settings_streams.js b/static/js/settings_streams.js index ebbeeb543b..cc95f622c2 100644 --- a/static/js/settings_streams.js +++ b/static/js/settings_streams.js @@ -33,12 +33,12 @@ export function maybe_disable_widgets() { } export function build_default_stream_table() { - const table = $("#admin_default_streams_table").expectOne(); + const $table = $("#admin_default_streams_table").expectOne(); const stream_ids = stream_data.get_default_stream_ids(); const subs = stream_ids.map((stream_id) => sub_store.get(stream_id)); - ListWidget.create(table, subs, { + ListWidget.create($table, subs, { name: "default_streams_list", modifier(item) { return render_admin_default_streams_list({ @@ -47,17 +47,17 @@ export function build_default_stream_table() { }); }, filter: { - element: table.closest(".settings-section").find(".search"), + $element: $table.closest(".settings-section").find(".search"), predicate(item, query) { return item.name.toLowerCase().includes(query.toLowerCase()); }, onupdate() { - ui.reset_scrollbar(table); + ui.reset_scrollbar($table); }, }, - parent_container: $("#admin-default-streams-list").expectOne(), + $parent_container: $("#admin-default-streams-list").expectOne(), init_sort: ["alphabetic", "name"], - simplebar_container: $("#admin-default-streams-list .progressive-table-wrapper"), + $simplebar_container: $("#admin-default-streams-list .progressive-table-wrapper"), }); loading.destroy_indicator($("#admin_page_default_streams_loading_indicator")); @@ -74,27 +74,27 @@ function make_stream_default(stream_id) { const data = { stream_id, }; - const default_stream_status = $("#admin-default-stream-status"); - default_stream_status.hide(); + const $default_stream_status = $("#admin-default-stream-status"); + $default_stream_status.hide(); channel.post({ url: "/json/default_streams", data, error(xhr) { - ui_report.error($t_html({defaultMessage: "Failed"}), xhr, default_stream_status); - default_stream_status.show(); + ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $default_stream_status); + $default_stream_status.show(); }, }); } -export function delete_default_stream(stream_id, default_stream_row, alert_element) { +export function delete_default_stream(stream_id, $default_stream_row, $alert_element) { channel.del({ url: "/json/default_streams?" + $.param({stream_id}), error(xhr) { - ui_report.generic_row_button_error(xhr, alert_element); + ui_report.generic_row_button_error(xhr, $alert_element); }, success() { - default_stream_row.remove(); + $default_stream_row.remove(); }, }); } @@ -113,9 +113,9 @@ export function build_page() { if (e.key === "Enter") { e.preventDefault(); e.stopPropagation(); - const default_stream_input = $(".create_default_stream"); - make_stream_default(stream_data.get_stream_id(default_stream_input.val())); - default_stream_input[0].value = ""; + const $default_stream_input = $(".create_default_stream"); + make_stream_default(stream_data.get_stream_id($default_stream_input.val())); + $default_stream_input[0].value = ""; } }); @@ -133,15 +133,15 @@ export function build_page() { $(".default-stream-form").on("click", "#do_submit_stream", (e) => { e.preventDefault(); e.stopPropagation(); - const default_stream_input = $(".create_default_stream"); - make_stream_default(stream_data.get_stream_id(default_stream_input.val())); + const $default_stream_input = $(".create_default_stream"); + make_stream_default(stream_data.get_stream_id($default_stream_input.val())); // Clear value inside input box - default_stream_input[0].value = ""; + $default_stream_input[0].value = ""; }); $("body").on("click", ".default_stream_row .remove-default-stream", function (e) { - const row = $(this).closest(".default_stream_row"); - const stream_id = Number.parseInt(row.attr("data-stream-id"), 10); - delete_default_stream(stream_id, row, $(e.target)); + const $row = $(this).closest(".default_stream_row"); + const stream_id = Number.parseInt($row.attr("data-stream-id"), 10); + delete_default_stream(stream_id, $row, $(e.target)); }); } diff --git a/static/js/settings_toggle.js b/static/js/settings_toggle.js index c759209bb4..1e5b42409b 100644 --- a/static/js/settings_toggle.js +++ b/static/js/settings_toggle.js @@ -60,8 +60,8 @@ export function toggle_org_setting_collapse() { } // If current tab is about to be collapsed, go to default tab. - const current_tab = $(".org-settings-list .active"); - if (current_tab.hasClass("hide-org-settings")) { + const $current_tab = $(".org-settings-list .active"); + if ($current_tab.hasClass("hide-org-settings")) { $(location).attr("href", "/#organization/organization-profile"); } } diff --git a/static/js/settings_ui.js b/static/js/settings_ui.js index 8523906479..e6aa5d443a 100644 --- a/static/js/settings_ui.js +++ b/static/js/settings_ui.js @@ -31,12 +31,12 @@ export function do_settings_change( success_continuation, error_continuation, sticky = false, - error_msg_element, + $error_msg_element, } = {}, ) { - const spinner = $(status_element).expectOne(); - spinner.fadeTo(0, 1); - loading.make_indicator(spinner, {text: strings.saving}); + const $spinner = $(status_element).expectOne(); + $spinner.fadeTo(0, 1); + loading.make_indicator($spinner, {text: strings.saving}); const remove_after = sticky ? undefined : 1000; const appear_after = 500; @@ -45,19 +45,19 @@ export function do_settings_change( data, success(reponse_data) { setTimeout(() => { - ui_report.success(success_msg_html, spinner, remove_after); - display_checkmark(spinner); + ui_report.success(success_msg_html, $spinner, remove_after); + display_checkmark($spinner); }, appear_after); if (success_continuation !== undefined) { success_continuation(reponse_data); } }, error(xhr) { - if (error_msg_element) { - loading.destroy_indicator(spinner); - ui_report.error(failure_msg_html, xhr, error_msg_element); + if ($error_msg_element) { + loading.destroy_indicator($spinner); + ui_report.error(failure_msg_html, xhr, $error_msg_element); } else { - ui_report.error(failure_msg_html, xhr, spinner); + ui_report.error(failure_msg_html, xhr, $spinner); } if (error_continuation !== undefined) { error_continuation(xhr); diff --git a/static/js/settings_user_groups.js b/static/js/settings_user_groups.js index 2e4603a101..b48c689d20 100644 --- a/static/js/settings_user_groups.js +++ b/static/js/settings_user_groups.js @@ -28,8 +28,8 @@ export function reload() { return; } - const user_groups_section = $("#user-groups").expectOne(); - user_groups_section.html(""); + const $user_groups_section = $("#user-groups").expectOne(); + $user_groups_section.html(""); populate_user_groups(); } @@ -49,11 +49,11 @@ export function can_edit(group_id) { } export function populate_user_groups() { - const user_groups_section = $("#user-groups").expectOne(); + const $user_groups_section = $("#user-groups").expectOne(); const user_groups_array = user_groups.get_realm_user_groups(); for (const data of user_groups_array) { - user_groups_section.append( + $user_groups_section.append( render_admin_user_group_list({ user_group: { name: data.name, @@ -67,14 +67,14 @@ export function populate_user_groups() { show_user_status_emoji: false, }; - const pill_container = $(`.pill-container[data-group-pills="${CSS.escape(data.id)}"]`); - const pills = user_pill.create_pills(pill_container, pill_config); + const $pill_container = $(`.pill-container[data-group-pills="${CSS.escape(data.id)}"]`); + const pills = user_pill.create_pills($pill_container, pill_config); function get_pill_user_ids() { return user_pill.get_user_ids(pills); } - const userg = $(`div.user-group[id="${CSS.escape(data.id)}"]`); + const $userg = $(`div.user-group[id="${CSS.escape(data.id)}"]`); for (const user_id of data.members) { const user = people.get_by_user_id(user_id); user_pill.append_user(user, pills); @@ -84,20 +84,20 @@ export function populate_user_groups() { if (can_edit(group_id)) { return; } - userg.find(".name").attr("contenteditable", "false"); - userg.find(".description").attr("contenteditable", "false"); - userg.addClass("ntm"); - pill_container.find(".input").attr("contenteditable", "false"); - pill_container.find(".input").css("display", "none"); - pill_container.addClass("not-editable"); - pill_container.off("keydown", ".pill"); - pill_container.off("keydown", ".input"); - pill_container.off("click"); - pill_container.on("click", (e) => { + $userg.find(".name").attr("contenteditable", "false"); + $userg.find(".description").attr("contenteditable", "false"); + $userg.addClass("ntm"); + $pill_container.find(".input").attr("contenteditable", "false"); + $pill_container.find(".input").css("display", "none"); + $pill_container.addClass("not-editable"); + $pill_container.off("keydown", ".pill"); + $pill_container.off("keydown", ".input"); + $pill_container.off("click"); + $pill_container.on("click", (e) => { e.stopPropagation(); }); - pill_container.find(".pill").on("mouseenter", () => { - pill_container.find(".pill").find(".exit").css("opacity", "0.5"); + $pill_container.find(".pill").on("mouseenter", () => { + $pill_container.find(".pill").find(".exit").css("opacity", "0.5"); }); } update_membership(data.id); @@ -113,9 +113,9 @@ export function populate_user_groups() { const name = $(`#user-groups #${CSS.escape(data.id)} .name`) .text() .trim(); - const user_group_status = $(`#user-groups #${CSS.escape(data.id)} .user-group-status`); + const $user_group_status = $(`#user-groups #${CSS.escape(data.id)} .user-group-status`); - if (user_group_status.is(":visible")) { + if ($user_group_status.is(":visible")) { return false; } @@ -133,28 +133,32 @@ export function populate_user_groups() { if (!can_edit(data.id)) { return; } - const cancel_button = $(`#user-groups #${CSS.escape(data.id)} .save-status.btn-danger`); - const saved_button = $(`#user-groups #${CSS.escape(data.id)} .save-status.sea-green`); - const save_instructions = $(`#user-groups #${CSS.escape(data.id)} .save-instructions`); + const $cancel_button = $( + `#user-groups #${CSS.escape(data.id)} .save-status.btn-danger`, + ); + const $saved_button = $(`#user-groups #${CSS.escape(data.id)} .save-status.sea-green`); + const $save_instructions = $(`#user-groups #${CSS.escape(data.id)} .save-instructions`); - if (is_user_group_changed() && !cancel_button.is(":visible")) { - saved_button.fadeOut(0); - cancel_button.css({display: "inline-block", opacity: "0"}).fadeTo(400, 1); - save_instructions.css({display: "block", opacity: "0"}).fadeTo(400, 1); - } else if (!is_user_group_changed() && cancel_button.is(":visible")) { - cancel_button.fadeOut(); - save_instructions.fadeOut(); + if (is_user_group_changed() && !$cancel_button.is(":visible")) { + $saved_button.fadeOut(0); + $cancel_button.css({display: "inline-block", opacity: "0"}).fadeTo(400, 1); + $save_instructions.css({display: "block", opacity: "0"}).fadeTo(400, 1); + } else if (!is_user_group_changed() && $cancel_button.is(":visible")) { + $cancel_button.fadeOut(); + $save_instructions.fadeOut(); } } function show_saved_button() { - const cancel_button = $(`#user-groups #${CSS.escape(data.id)} .save-status.btn-danger`); - const saved_button = $(`#user-groups #${CSS.escape(data.id)} .save-status.sea-green`); - const save_instructions = $(`#user-groups #${CSS.escape(data.id)} .save-instructions`); - if (!saved_button.is(":visible")) { - cancel_button.fadeOut(0); - save_instructions.fadeOut(0); - saved_button + const $cancel_button = $( + `#user-groups #${CSS.escape(data.id)} .save-status.btn-danger`, + ); + const $saved_button = $(`#user-groups #${CSS.escape(data.id)} .save-status.sea-green`); + const $save_instructions = $(`#user-groups #${CSS.escape(data.id)} .save-instructions`); + if (!$saved_button.is(":visible")) { + $cancel_button.fadeOut(0); + $save_instructions.fadeOut(0); + $saved_button .css({display: "inline-block", opacity: "0"}) .fadeTo(400, 1) .delay(2000) @@ -185,7 +189,7 @@ export function populate_user_groups() { } function save_name_desc() { - const user_group_status = $(`#user-groups #${CSS.escape(data.id)} .user-group-status`); + const $user_group_status = $(`#user-groups #${CSS.escape(data.id)} .user-group-status`); const group_data = user_groups.get_user_group_from_id(data.id); const description = $(`#user-groups #${CSS.escape(data.id)} .description`) .text() @@ -205,13 +209,13 @@ export function populate_user_groups() { description, }, success() { - user_group_status.hide(); + $user_group_status.hide(); setTimeout(show_saved_button, 200); }, error(xhr) { const errors = JSON.parse(xhr.responseText).msg; xhr.responseText = JSON.stringify({msg: errors}); - ui_report.error($t_html({defaultMessage: "Failed"}), xhr, user_group_status); + ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $user_group_status); update_cancel_button(); $(`#user-groups #${CSS.escape(data.id)} .name`).text(group_data.name); $(`#user-groups #${CSS.escape(data.id)} .description`).text( @@ -274,10 +278,10 @@ export function populate_user_groups() { update_cancel_button(); }); - const input = pill_container.children(".input"); + const $input = $pill_container.children(".input"); if (can_edit(data.id)) { const opts = {update_func: update_cancel_button, user: true}; - pill_typeahead.set_up(input, pills, opts); + pill_typeahead.set_up($input, pills, opts); } if (can_edit(data.id)) { @@ -286,7 +290,7 @@ export function populate_user_groups() { // the DOM. update_cancel_button(); setTimeout(() => { - input.trigger("focus"); + $input.trigger("focus"); }, 100); }); } @@ -303,7 +307,7 @@ export function set_up() { e.preventDefault(); e.stopPropagation(); - const user_group_status = $("#admin-user-group-status"); + const $user_group_status = $("#admin-user-group-status"); const group = { members: JSON.stringify([people.my_current_user_id()]), @@ -320,18 +324,18 @@ export function set_up() { url: "/json/user_groups/create", data: group, success() { - user_group_status.hide(); + $user_group_status.hide(); ui_report.success( $t_html({defaultMessage: "User group added!"}), - user_group_status, + $user_group_status, ); $("form.admin-user-group-form input[type='text']").val(""); }, error(xhr) { - user_group_status.hide(); + $user_group_status.hide(); const errors = JSON.parse(xhr.responseText).msg; xhr.responseText = JSON.stringify({msg: errors}); - ui_report.error($t_html({defaultMessage: "Failed"}), xhr, user_group_status); + ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $user_group_status); }, }); }); @@ -342,7 +346,7 @@ export function set_up() { return; } const user_group = user_groups.get_user_group_from_id(group_id); - const btn = $(this); + const $btn = $(this); function delete_user_group() { channel.del({ @@ -351,7 +355,7 @@ export function set_up() { id: group_id, }, error() { - btn.text($t({defaultMessage: "Failed!"})); + $btn.text($t({defaultMessage: "Failed!"})); }, }); } diff --git a/static/js/settings_users.js b/static/js/settings_users.js index 09485974d6..ecbb3761b0 100644 --- a/static/js/settings_users.js +++ b/static/js/settings_users.js @@ -85,42 +85,44 @@ function get_user_info_row(user_id) { } export function update_view_on_deactivate(user_id) { - const row = get_user_info_row(user_id); - if (row.length === 0) { + const $row = get_user_info_row(user_id); + if ($row.length === 0) { return; } - const button = row.find("button.deactivate"); - const user_role = row.find(".user_role"); - button.prop("disabled", false); - row.find("button.open-user-form").hide(); - row.find("i.deactivated-user-icon").show(); - button.addClass("btn-warning reactivate"); - button.removeClass("deactivate btn-danger"); - button.html(""); - button.attr("title", "Reactivate"); - row.addClass("deactivated_user"); + const $button = $row.find("button.deactivate"); + const $user_role = $row.find(".user_role"); + $button.prop("disabled", false); + $row.find("button.open-user-form").hide(); + $row.find("i.deactivated-user-icon").show(); + $button.addClass("btn-warning reactivate"); + $button.removeClass("deactivate btn-danger"); + $button.html(""); + $button.attr("title", "Reactivate"); + $row.addClass("deactivated_user"); - if (user_role) { - const user_id = row.data("user-id"); - user_role.text(`${$t({defaultMessage: "Deactivated"})} (${people.get_user_type(user_id)})`); + if ($user_role) { + const user_id = $row.data("user-id"); + $user_role.text( + `${$t({defaultMessage: "Deactivated"})} (${people.get_user_type(user_id)})`, + ); } } -function update_view_on_reactivate(row) { - const button = row.find("button.reactivate"); - const user_role = row.find(".user_role"); - row.find("button.open-user-form").show(); - row.find("i.deactivated-user-icon").hide(); - button.addClass("btn-danger deactivate"); - button.removeClass("btn-warning reactivate"); - button.attr("title", "Deactivate"); - button.html(''); - row.removeClass("deactivated_user"); +function update_view_on_reactivate($row) { + const $button = $row.find("button.reactivate"); + const $user_role = $row.find(".user_role"); + $row.find("button.open-user-form").show(); + $row.find("i.deactivated-user-icon").hide(); + $button.addClass("btn-danger deactivate"); + $button.removeClass("btn-warning reactivate"); + $button.attr("title", "Deactivate"); + $button.html(''); + $row.removeClass("deactivated_user"); - if (user_role) { - const user_id = row.data("user-id"); - user_role.text(people.get_user_type(user_id)); + if ($user_role) { + const user_id = $row.data("user-id"); + $user_role.text(people.get_user_type(user_id)); } } @@ -260,7 +262,7 @@ section.bots.create_table = () => { modifier: render_admin_user_list, html_selector: (item) => `tr[data-user-id='${CSS.escape(item)}']`, filter: { - element: $bots_table.closest(".settings-section").find(".search"), + $element: $bots_table.closest(".settings-section").find(".search"), predicate(item, value) { if (!item) { return false; @@ -272,14 +274,14 @@ section.bots.create_table = () => { }, onupdate: reset_scrollbar($bots_table), }, - parent_container: $("#admin-bot-list").expectOne(), + $parent_container: $("#admin-bot-list").expectOne(), init_sort: ["alphabetic", "full_name"], sort_fields: { email: sort_bot_email, bot_owner: sort_bot_owner, id: sort_user_id, }, - simplebar_container: $("#admin-bot-list .progressive-table-wrapper"), + $simplebar_container: $("#admin-bot-list .progressive-table-wrapper"), }); loading.destroy_indicator($("#admin_page_bots_loading_indicator")); @@ -296,11 +298,11 @@ section.active.create_table = (active_users) => { return render_admin_user_list(info); }, filter: { - element: $users_table.closest(".settings-section").find(".search"), + $element: $users_table.closest(".settings-section").find(".search"), filterer: people.filter_for_user_settings_search, onupdate: reset_scrollbar($users_table), }, - parent_container: $("#admin-user-list").expectOne(), + $parent_container: $("#admin-user-list").expectOne(), init_sort: ["alphabetic", "full_name"], sort_fields: { email: sort_email, @@ -308,7 +310,7 @@ section.active.create_table = (active_users) => { role: sort_role, id: sort_user_id, }, - simplebar_container: $("#admin-user-list .progressive-table-wrapper"), + $simplebar_container: $("#admin-user-list .progressive-table-wrapper"), }); loading.destroy_indicator($("#admin_page_users_loading_indicator")); @@ -325,18 +327,18 @@ section.deactivated.create_table = (deactivated_users) => { return render_admin_user_list(info); }, filter: { - element: $deactivated_users_table.closest(".settings-section").find(".search"), + $element: $deactivated_users_table.closest(".settings-section").find(".search"), filterer: people.filter_for_user_settings_search, onupdate: reset_scrollbar($deactivated_users_table), }, - parent_container: $("#admin-deactivated-users-list").expectOne(), + $parent_container: $("#admin-deactivated-users-list").expectOne(), init_sort: ["alphabetic", "full_name"], sort_fields: { email: sort_email, role: sort_role, id: sort_user_id, }, - simplebar_container: $("#admin-deactivated-users-list .progressive-table-wrapper"), + $simplebar_container: $("#admin-deactivated-users-list .progressive-table-wrapper"), }); loading.destroy_indicator($("#admin_page_deactivated_users_loading_indicator")); @@ -352,19 +354,19 @@ export function update_bot_data(bot_user_id) { } export function update_user_data(user_id, new_data) { - const user_row = get_user_info_row(user_id); + const $user_row = get_user_info_row(user_id); - if (user_row.length === 0) { + if ($user_row.length === 0) { return; } if (new_data.full_name !== undefined) { // Update the full name in the table - user_row.find(".user_name").text(new_data.full_name); + $user_row.find(".user_name").text(new_data.full_name); } if (new_data.role !== undefined) { - user_row.find(".user_role").text(people.get_user_type(user_id)); + $user_row.find(".user_role").text(people.get_user_type(user_id)); } } @@ -431,77 +433,77 @@ export function confirm_deactivation(user_id, handle_confirm, loading_spinner) { }); } -function handle_deactivation(tbody, status_field) { - tbody.on("click", ".deactivate", (e) => { +function handle_deactivation($tbody, $status_field) { + $tbody.on("click", ".deactivate", (e) => { // This click event must not get propagated to parent container otherwise the modal // will not show up because of a call to `close_active_modal` in `settings.js`. e.preventDefault(); e.stopPropagation(); - const row = $(e.target).closest(".user_row"); - const user_id = row.data("user-id"); + const $row = $(e.target).closest(".user_row"); + const user_id = $row.data("user-id"); function handle_confirm() { - const row = get_user_info_row(user_id); - const row_deactivate_button = row.find("button.deactivate"); - row_deactivate_button.prop("disabled", true).text($t({defaultMessage: "Working…"})); + const $row = get_user_info_row(user_id); + const $row_deactivate_button = $row.find("button.deactivate"); + $row_deactivate_button.prop("disabled", true).text($t({defaultMessage: "Working…"})); const opts = { error_continuation() { - row_deactivate_button.text($t({defaultMessage: "Deactivate"})); + $row_deactivate_button.text($t({defaultMessage: "Deactivate"})); }, }; const url = "/json/users/" + encodeURIComponent(user_id); - settings_ui.do_settings_change(channel.del, url, {}, status_field, opts); + settings_ui.do_settings_change(channel.del, url, {}, $status_field, opts); } confirm_deactivation(user_id, handle_confirm, false); }); } -function handle_bot_deactivation(tbody, status_field) { - tbody.on("click", ".deactivate", (e) => { +function handle_bot_deactivation($tbody, $status_field) { + $tbody.on("click", ".deactivate", (e) => { e.preventDefault(); e.stopPropagation(); - const button_elem = $(e.target); - const row = button_elem.closest(".user_row"); - const bot_id = Number.parseInt(row.attr("data-user-id"), 10); + const $button_elem = $(e.target); + const $row = $button_elem.closest(".user_row"); + const bot_id = Number.parseInt($row.attr("data-user-id"), 10); const url = "/json/bots/" + encodeURIComponent(bot_id); const opts = { error_continuation(xhr) { - ui_report.generic_row_button_error(xhr, button_elem); + ui_report.generic_row_button_error(xhr, $button_elem); }, }; - settings_ui.do_settings_change(channel.del, url, {}, status_field, opts); + settings_ui.do_settings_change(channel.del, url, {}, $status_field, opts); }); } -function handle_reactivation(tbody, status_field) { - tbody.on("click", ".reactivate", (e) => { +function handle_reactivation($tbody, $status_field) { + $tbody.on("click", ".reactivate", (e) => { e.preventDefault(); e.stopPropagation(); // Go up the tree until we find the user row, then grab the email element - const button_elem = $(e.target); - const row = button_elem.closest(".user_row"); - const user_id = Number.parseInt(row.attr("data-user-id"), 10); + const $button_elem = $(e.target); + const $row = $button_elem.closest(".user_row"); + const user_id = Number.parseInt($row.attr("data-user-id"), 10); const url = "/json/users/" + encodeURIComponent(user_id) + "/reactivate"; const data = {}; const opts = { success_continuation() { - update_view_on_reactivate(row); + update_view_on_reactivate($row); }, error_continuation(xhr) { - ui_report.generic_row_button_error(xhr, button_elem); + ui_report.generic_row_button_error(xhr, $button_elem); }, }; - settings_ui.do_settings_change(channel.post, url, data, status_field, opts); + settings_ui.do_settings_change(channel.post, url, data, $status_field, opts); }); } -export function show_edit_user_info_modal(user_id, from_user_info_popover, status_field) { +export function show_edit_user_info_modal(user_id, from_user_info_popover, $status_field) { const person = people.get_by_user_id(user_id); if (!person) { @@ -576,18 +578,18 @@ export function show_edit_user_info_modal(user_id, from_user_info_popover, statu function submit_user_details() { const role = Number.parseInt($("#user-role-select").val().trim(), 10); - const full_name = $("#edit-user-form").find("input[name='full_name']"); + const $full_name = $("#edit-user-form").find("input[name='full_name']"); const profile_data = get_human_profile_data(fields_user_pills); const url = "/json/users/" + encodeURIComponent(user_id); const data = { - full_name: full_name.val(), + full_name: $full_name.val(), role: JSON.stringify(role), profile_data: JSON.stringify(profile_data), }; if (!from_user_info_popover) { - settings_ui.do_settings_change(channel.patch, url, data, status_field); + settings_ui.do_settings_change(channel.patch, url, data, $status_field); dialog_widget.close_modal(); return; } @@ -614,17 +616,17 @@ export function show_edit_user_info_modal(user_id, from_user_info_popover, statu }); } -function handle_human_form(tbody, status_field) { - tbody.on("click", ".open-user-form", (e) => { +function handle_human_form($tbody, $status_field) { + $tbody.on("click", ".open-user-form", (e) => { e.stopPropagation(); e.preventDefault(); const user_id = Number.parseInt($(e.currentTarget).attr("data-user-id"), 10); - show_edit_user_info_modal(user_id, false, status_field); + show_edit_user_info_modal(user_id, false, $status_field); }); } -function handle_bot_form(tbody, status_field) { - tbody.on("click", ".open-user-form", (e) => { +function handle_bot_form($tbody, $status_field) { + $tbody.on("click", ".open-user-form", (e) => { e.stopPropagation(); e.preventDefault(); const user_id = Number.parseInt($(e.currentTarget).attr("data-user-id"), 10); @@ -643,11 +645,11 @@ function handle_bot_form(tbody, status_field) { let owner_widget; function submit_bot_details() { - const full_name = $("#dialog_widget_modal").find("input[name='full_name']"); + const $full_name = $("#dialog_widget_modal").find("input[name='full_name']"); const url = "/json/bots/" + encodeURIComponent(user_id); const data = { - full_name: full_name.val(), + full_name: $full_name.val(), }; if (owner_widget === undefined) { @@ -658,7 +660,7 @@ function handle_bot_form(tbody, status_field) { data.bot_owner_id = human_user_id; } - settings_ui.do_settings_change(channel.patch, url, data, status_field); + settings_ui.do_settings_change(channel.patch, url, data, $status_field); dialog_widget.close_modal(); } @@ -693,30 +695,30 @@ function handle_bot_form(tbody, status_field) { } section.active.handle_events = () => { - const tbody = $("#admin_users_table").expectOne(); - const status_field = $("#user-field-status").expectOne(); + const $tbody = $("#admin_users_table").expectOne(); + const $status_field = $("#user-field-status").expectOne(); - handle_deactivation(tbody, status_field); - handle_reactivation(tbody, status_field); - handle_human_form(tbody, status_field); + handle_deactivation($tbody, $status_field); + handle_reactivation($tbody, $status_field); + handle_human_form($tbody, $status_field); }; section.deactivated.handle_events = () => { - const tbody = $("#admin_deactivated_users_table").expectOne(); - const status_field = $("#deactivated-user-field-status").expectOne(); + const $tbody = $("#admin_deactivated_users_table").expectOne(); + const $status_field = $("#deactivated-user-field-status").expectOne(); - handle_deactivation(tbody, status_field); - handle_reactivation(tbody, status_field); - handle_human_form(tbody, status_field); + handle_deactivation($tbody, $status_field); + handle_reactivation($tbody, $status_field); + handle_human_form($tbody, $status_field); }; section.bots.handle_events = () => { - const tbody = $("#admin_bots_table").expectOne(); - const status_field = $("#bot-field-status").expectOne(); + const $tbody = $("#admin_bots_table").expectOne(); + const $status_field = $("#bot-field-status").expectOne(); - handle_bot_deactivation(tbody, status_field); - handle_reactivation(tbody, status_field); - handle_bot_form(tbody, status_field); + handle_bot_deactivation($tbody, $status_field); + handle_reactivation($tbody, $status_field); + handle_bot_form($tbody, $status_field); }; export function set_up_humans() { diff --git a/static/js/spoilers.ts b/static/js/spoilers.ts index bd603767e6..dbce690aa3 100644 --- a/static/js/spoilers.ts +++ b/static/js/spoilers.ts @@ -1,42 +1,42 @@ import $ from "jquery"; -function collapse_spoiler(spoiler: JQuery): void { - const spoiler_height = spoiler.height() || 0; +function collapse_spoiler($spoiler: JQuery): void { + const spoiler_height = $spoiler.height() || 0; // Set height to rendered height on next frame, then to zero on following // frame to allow CSS transition animation to work requestAnimationFrame(() => { - spoiler.height(`${spoiler_height}px`); - spoiler.removeClass("spoiler-content-open"); + $spoiler.height(`${spoiler_height}px`); + $spoiler.removeClass("spoiler-content-open"); requestAnimationFrame(() => { - spoiler.height("0px"); + $spoiler.height("0px"); }); }); } -function expand_spoiler(spoiler: JQuery): void { +function expand_spoiler($spoiler: JQuery): void { // Normally, the height of the spoiler block is not defined absolutely on // the `spoiler-content-open` class, but just set to `auto` (i.e. the height // of the content). CSS animations do not work with properties set to // `auto`, so we get the actual height of the content here and temporarily // put it explicitly on the element styling to allow the transition to work. - const spoiler_height: number = spoiler.prop("scrollHeight"); - spoiler.height(`${spoiler_height}px`); + const spoiler_height: number = $spoiler.prop("scrollHeight"); + $spoiler.height(`${spoiler_height}px`); // The `spoiler-content-open` class has CSS animations defined on it which // will trigger on the frame after this class change. - spoiler.addClass("spoiler-content-open"); + $spoiler.addClass("spoiler-content-open"); - spoiler.on("transitionend", () => { - spoiler.off("transitionend"); + $spoiler.on("transitionend", () => { + $spoiler.off("transitionend"); // When the CSS transition is over, reset the height to auto // This keeps things working if, e.g., the viewport is resized - spoiler.height(""); + $spoiler.height(""); }); } -export const hide_spoilers_in_notification = (content: JQuery): JQuery => { - content.find(".spoiler-block").each((_i, elem) => { +export const hide_spoilers_in_notification = ($content: JQuery): JQuery => { + $content.find(".spoiler-block").each((_i, elem) => { $(elem).find(".spoiler-content").remove(); let text = $(elem).find(".spoiler-header").text().trim(); if (text.length > 0) { @@ -45,20 +45,20 @@ export const hide_spoilers_in_notification = (content: JQuery): JQuery => { text = `${text}(…)`; $(elem).find(".spoiler-header").text(text); }); - return content; + return $content; }; export function initialize(): void { $("body").on("click", ".spoiler-header", function (e) { - const button = $(this).children(".spoiler-button"); - const arrow = button.children(".spoiler-arrow"); - const spoiler_content = $(this).siblings(".spoiler-content"); - const target = $(e.target); + const $button = $(this).children(".spoiler-button"); + const $arrow = $button.children(".spoiler-arrow"); + const $spoiler_content = $(this).siblings(".spoiler-content"); + const $target = $(e.target); // Spoiler headers can contain Markdown, including links. We // return so that clicking such links will be be processed by // the browser rather than opening the header. - if (target.closest("a").length > 0) { + if ($target.closest("a").length > 0) { return; } @@ -71,24 +71,24 @@ export function initialize(): void { e.preventDefault(); e.stopPropagation(); - if (spoiler_content.hasClass("spoiler-content-open")) { + if ($spoiler_content.hasClass("spoiler-content-open")) { // Content was open, we are collapsing - arrow.removeClass("spoiler-button-open"); + $arrow.removeClass("spoiler-button-open"); // Modify ARIA roles for screen readers - button.attr("aria-expanded", "false"); - spoiler_content.attr("aria-hidden", "true"); + $button.attr("aria-expanded", "false"); + $spoiler_content.attr("aria-hidden", "true"); - collapse_spoiler(spoiler_content); + collapse_spoiler($spoiler_content); } else { // Content was closed, we are expanding - arrow.addClass("spoiler-button-open"); + $arrow.addClass("spoiler-button-open"); // Modify ARIA roles for screen readers - button.attr("aria-expanded", "true"); - spoiler_content.attr("aria-hidden", "false"); + $button.attr("aria-expanded", "true"); + $spoiler_content.attr("aria-hidden", "false"); - expand_spoiler(spoiler_content); + expand_spoiler($spoiler_content); } }); } diff --git a/static/js/stats/stats.js b/static/js/stats/stats.js index aeea3482b5..79b9abcfc2 100644 --- a/static/js/stats/stats.js +++ b/static/js/stats/stats.js @@ -540,14 +540,14 @@ function populate_messages_sent_by_client(data) { draw_plot(); // Click handlers - function set_user_button(button) { + function set_user_button($button) { $("#pie_messages_sent_by_client button[data-user]").removeClass("selected"); - button.addClass("selected"); + $button.addClass("selected"); } - function set_time_button(button) { + function set_time_button($button) { $("#pie_messages_sent_by_client button[data-time]").removeClass("selected"); - button.addClass("selected"); + $button.addClass("selected"); } $("#pie_messages_sent_by_client button").on("click", function () { @@ -670,14 +670,14 @@ function populate_messages_sent_by_message_type(data) { draw_plot(); // Click handlers - function set_user_button(button) { + function set_user_button($button) { $("#pie_messages_sent_by_type button[data-user]").removeClass("selected"); - button.addClass("selected"); + $button.addClass("selected"); } - function set_time_button(button) { + function set_time_button($button) { $("#pie_messages_sent_by_type button[data-time]").removeClass("selected"); - button.addClass("selected"); + $button.addClass("selected"); } $("#pie_messages_sent_by_type button").on("click", function () { diff --git a/static/js/stream_bar.js b/static/js/stream_bar.js index 5a8b04bd74..e84274dd17 100644 --- a/static/js/stream_bar.js +++ b/static/js/stream_bar.js @@ -4,21 +4,21 @@ import * as color_class from "./color_class"; import * as stream_data from "./stream_data"; function update_compose_stream_icon(stream_name) { - const streamfield = $("#stream_message_recipient_stream"); - const globe_icon = $("#compose-globe-icon"); - const lock_icon = $("#compose-lock-icon"); + const $streamfield = $("#stream_message_recipient_stream"); + const $globe_icon = $("#compose-globe-icon"); + const $lock_icon = $("#compose-lock-icon"); // Reset state - globe_icon.hide(); - lock_icon.hide(); - streamfield.removeClass("lock-padding"); + $globe_icon.hide(); + $lock_icon.hide(); + $streamfield.removeClass("lock-padding"); if (stream_data.is_invite_only_by_stream_name(stream_name)) { - lock_icon.show(); - streamfield.addClass("lock-padding"); + $lock_icon.show(); + $streamfield.addClass("lock-padding"); } else if (stream_data.is_web_public_by_stream_name(stream_name)) { - globe_icon.show(); - streamfield.addClass("lock-padding"); + $globe_icon.show(); + $streamfield.addClass("lock-padding"); } } @@ -26,7 +26,7 @@ function update_compose_stream_icon(stream_name) { // color look like the stream being used. // (In particular, if there's a color associated with it, // have that color be reflected here too.) -export function decorate(stream_name, element, is_compose) { +export function decorate(stream_name, $element, is_compose) { if (stream_name === undefined) { return; } @@ -34,7 +34,7 @@ export function decorate(stream_name, element, is_compose) { if (is_compose) { update_compose_stream_icon(stream_name); } - element + $element .css("background-color", color) .removeClass("dark_background") .addClass(color_class.get_css_class(color)); diff --git a/static/js/stream_color.js b/static/js/stream_color.js index 3ade5dc5f9..1c460d521f 100644 --- a/static/js/stream_color.js +++ b/static/js/stream_color.js @@ -10,19 +10,19 @@ function update_table_stream_color(table, stream_name, color) { // so that we only have color in the headers. const style = color; - const stream_labels = $("#floating_recipient_bar").add(table).find(".stream_label"); + const $stream_labels = $("#floating_recipient_bar").add(table).find(".stream_label"); - for (const label of stream_labels) { + for (const label of $stream_labels) { const $label = $(label); if ($label.text().trim() === stream_name) { - const messages = $label.closest(".recipient_row").children(".message_row"); - messages + const $messages = $label.closest(".recipient_row").children(".message_row"); + $messages .children(".messagebox") .css( "box-shadow", "inset 2px 0px 0px 0px " + style + ", -1px 0px 0px 0px " + style, ); - messages + $messages .children(".date_row") .css( "box-shadow", diff --git a/static/js/stream_create.js b/static/js/stream_create.js index cf75a1bdf1..5c92de4423 100644 --- a/static/js/stream_create.js +++ b/static/js/stream_create.js @@ -121,21 +121,21 @@ function update_announce_stream_state() { // If the stream is invite only, disable the "Announce stream" option. // Otherwise enable it. - const announce_stream_checkbox = $("#announce-new-stream input"); - const announce_stream_label = $("#announce-new-stream"); + const $announce_stream_checkbox = $("#announce-new-stream input"); + const $announce_stream_label = $("#announce-new-stream"); let disable_it = false; const privacy_type = $("input:radio[name=privacy]:checked").val(); const is_invite_only = privacy_type === "invite-only" || privacy_type === "invite-only-public-history"; - announce_stream_label.removeClass("control-label-disabled"); + $announce_stream_label.removeClass("control-label-disabled"); if (is_invite_only) { disable_it = true; - announce_stream_checkbox.prop("checked", false); - announce_stream_label.addClass("control-label-disabled"); + $announce_stream_checkbox.prop("checked", false); + $announce_stream_label.addClass("control-label-disabled"); } - announce_stream_checkbox.prop("disabled", disable_it); + $announce_stream_checkbox.prop("disabled", disable_it); $("#announce-new-stream").show(); } @@ -321,14 +321,14 @@ export function show_new_stream_modal() { } export function set_up_handlers() { - const people_to_add_holder = $("#people_to_add").expectOne(); - stream_create_subscribers.create_handlers(people_to_add_holder); + const $people_to_add_holder = $("#people_to_add").expectOne(); + stream_create_subscribers.create_handlers($people_to_add_holder); - const container = $("#stream-creation").expectOne(); + const $container = $("#stream-creation").expectOne(); - container.on("change", "#make-invite-only input", update_announce_stream_state); + $container.on("change", "#make-invite-only input", update_announce_stream_state); - container.on("click", ".finalize_create_stream", (e) => { + $container.on("click", ".finalize_create_stream", (e) => { e.preventDefault(); clear_error_display(); @@ -367,16 +367,16 @@ export function set_up_handlers() { } }); - container.on("input", "#create_stream_name", () => { + $container.on("input", "#create_stream_name", () => { const stream_name = $("#create_stream_name").val().trim(); // This is an inexpensive check. stream_name_error.pre_validate(stream_name); }); - container.on("mouseover", "#announce-stream-docs", (e) => { - const announce_stream_docs = $("#announce-stream-docs"); - announce_stream_docs.popover({ + $container.on("mouseover", "#announce-stream-docs", (e) => { + const $announce_stream_docs = $("#announce-stream-docs"); + $announce_stream_docs.popover({ placement: "right", content: render_announce_stream_docs({ notifications_stream: stream_data.get_notifications_stream(), @@ -384,23 +384,23 @@ export function set_up_handlers() { html: true, trigger: "manual", }); - announce_stream_docs.popover("show"); - announce_stream_docs.data("popover").tip().css("z-index", 2000); - announce_stream_docs + $announce_stream_docs.popover("show"); + $announce_stream_docs.data("popover").tip().css("z-index", 2000); + $announce_stream_docs .data("popover") .tip() .find(".popover-content") .css("margin", "9px 14px"); e.stopPropagation(); }); - container.on("mouseout", "#announce-stream-docs", (e) => { + $container.on("mouseout", "#announce-stream-docs", (e) => { $("#announce-stream-docs").popover("hide"); e.stopPropagation(); }); // Do not allow the user to enter newline characters while typing out the // stream's description during it's creation. - container.on("keydown", "#create_stream_description", (e) => { + $container.on("keydown", "#create_stream_description", (e) => { if (e.key === "Enter") { e.preventDefault(); } diff --git a/static/js/stream_create_subscribers.js b/static/js/stream_create_subscribers.js index 44ba463d9b..880fe7804d 100644 --- a/static/js/stream_create_subscribers.js +++ b/static/js/stream_create_subscribers.js @@ -36,24 +36,24 @@ function remove_user_ids(user_ids) { redraw_subscriber_list(); } -function build_pill_widget({parent_container}) { - const pill_container = parent_container.find(".pill-container"); +function build_pill_widget({$parent_container}) { + const $pill_container = $parent_container.find(".pill-container"); const get_potential_subscribers = stream_create_subscribers_data.get_potential_subscribers; - pill_widget = add_subscribers_pill.create({pill_container, get_potential_subscribers}); + pill_widget = add_subscribers_pill.create({$pill_container, get_potential_subscribers}); } -export function create_handlers(container) { - container.on("click", ".add_all_users_to_stream", (e) => { +export function create_handlers($container) { + $container.on("click", ".add_all_users_to_stream", (e) => { e.preventDefault(); add_all_users(); $(".add-user-list-filter").focus(); }); - container.on("click", ".remove_potential_subscriber", (e) => { + $container.on("click", ".remove_potential_subscriber", (e) => { e.preventDefault(); - const elem = $(e.target); - const user_id = Number.parseInt(elem.attr("data-user-id"), 10); + const $elem = $(e.target); + const user_id = Number.parseInt($elem.attr("data-user-id"), 10); remove_user_ids([user_id]); }); @@ -64,7 +64,7 @@ export function create_handlers(container) { add_subscribers_pill.set_up_handlers({ get_pill_widget: () => pill_widget, - parent_container: container, + $parent_container: $container, pill_selector: ".add_subscribers_container .input", button_selector: ".add_subscribers_container button.add-subscriber-button", action: add_users, @@ -72,19 +72,19 @@ export function create_handlers(container) { } export function build_widgets() { - const add_people_container = $("#people_to_add"); - add_people_container.html(render_new_stream_users({})); + const $add_people_container = $("#people_to_add"); + $add_people_container.html(render_new_stream_users({})); - const simplebar_container = add_people_container.find(".subscriber_list_container"); + const $simplebar_container = $add_people_container.find(".subscriber_list_container"); - build_pill_widget({parent_container: add_people_container}); + build_pill_widget({$parent_container: $add_people_container}); stream_create_subscribers_data.initialize_with_current_user(); const current_user_id = page_params.user_id; all_users_list_widget = ListWidget.create($("#create_stream_subscribers"), [current_user_id], { name: "new_stream_add_users", - parent_container: add_people_container, + $parent_container: $add_people_container, modifier(user_id) { const user = people.get_by_user_id(user_id); const item = { @@ -98,13 +98,13 @@ export function build_widgets() { return render_new_stream_user(item); }, filter: { - element: $("#people_to_add .add-user-list-filter"), + $element: $("#people_to_add .add-user-list-filter"), predicate(user_id, search_term) { const user = people.get_by_user_id(user_id); return people.build_person_matcher(search_term)(user); }, }, - simplebar_container, + $simplebar_container, html_selector: (user_id) => { const user = people.get_by_user_id(user_id); return $(`#${CSS.escape("user_checkbox_" + user.user_id)}`); diff --git a/static/js/stream_edit.js b/static/js/stream_edit.js index 2a24731438..11640ee286 100644 --- a/static/js/stream_edit.js +++ b/static/js/stream_edit.js @@ -113,10 +113,10 @@ function set_stream_message_retention_setting_dropdown(stream) { } function get_stream_id(target) { - const row = $(target).closest( + const $row = $(target).closest( ".stream-row, .stream_settings_header, .subscription_settings, .save-button", ); - return Number.parseInt(row.attr("data-stream-id"), 10); + return Number.parseInt($row.attr("data-stream-id"), 10); } function get_sub_for_target(target) { @@ -145,16 +145,16 @@ export function open_edit_panel_for_row(stream_row) { } export function open_edit_panel_empty() { - const tab_key = $(stream_settings_ui.get_active_data().tabs[0]).attr("data-tab-key"); + const tab_key = $(stream_settings_ui.get_active_data().$tabs[0]).attr("data-tab-key"); $(".stream-row.active").removeClass("active"); stream_settings_ui.show_subs_pane.nothing_selected(); setup_subscriptions_tab_hash(tab_key); } export function update_stream_name(sub, new_name) { - const edit_container = stream_settings_containers.get_edit_container(sub); - edit_container.find(".email-address").text(sub.email_address); - edit_container.find(".sub-stream-name").text(new_name); + const $edit_container = stream_settings_containers.get_edit_container(sub); + $edit_container.find(".email-address").text(sub.email_address); + $edit_container.find(".sub-stream-name").text(new_name); const active_data = stream_settings_ui.get_active_data(); if (active_data.id === sub.stream_id) { @@ -163,20 +163,20 @@ export function update_stream_name(sub, new_name) { } export function update_stream_description(sub) { - const edit_container = stream_settings_containers.get_edit_container(sub); - edit_container.find("input.description").val(sub.description); + const $edit_container = stream_settings_containers.get_edit_container(sub); + $edit_container.find("input.description").val(sub.description); const html = render_stream_description({ rendered_description: util.clean_user_content_links(sub.rendered_description), }); - edit_container.find(".stream-description").html(html); + $edit_container.find(".stream-description").html(html); } function show_subscription_settings(sub) { - const edit_container = stream_settings_containers.get_edit_container(sub); + const $edit_container = stream_settings_containers.get_edit_container(sub); - const colorpicker = edit_container.find(".colorpicker"); + const $colorpicker = $edit_container.find(".colorpicker"); const color = stream_data.get_color(sub.name); - stream_color.set_colorpicker_color(colorpicker, color); + stream_color.set_colorpicker_color($colorpicker, color); stream_ui_updates.update_add_subscriptions_elements(sub); if (!sub.render_subscribers) { @@ -187,10 +187,10 @@ function show_subscription_settings(sub) { stream_ui_updates.initialize_cant_subscribe_popover(sub); } - const subscriber_container = edit_container.find(".edit_subscribers_for_stream"); + const $subscriber_container = $edit_container.find(".edit_subscribers_for_stream"); stream_edit_subscribers.enable_subscriber_management({ sub, - parent_container: subscriber_container, + $parent_container: $subscriber_container, }); } @@ -261,12 +261,12 @@ export function show_settings_for(node) { $("#stream_settings .tab-container").prepend(toggler.get()); stream_ui_updates.update_toggler_for_sub(sub); - const edit_container = stream_settings_containers.get_edit_container(sub); + const $edit_container = stream_settings_containers.get_edit_container(sub); $(".nothing-selected").hide(); $("#subscription_overlay .stream_change_property_info").hide(); - edit_container.addClass("show"); + $edit_container.addClass("show"); show_subscription_settings(sub); } @@ -290,14 +290,14 @@ export function setup_stream_settings(node) { } export function update_muting_rendering(sub) { - const edit_container = stream_settings_containers.get_edit_container(sub); - const notification_checkboxes = edit_container.find(".sub_notification_setting"); - const is_muted_checkbox = edit_container.find("#sub_is_muted_setting .sub_setting_control"); + const $edit_container = stream_settings_containers.get_edit_container(sub); + const $notification_checkboxes = $edit_container.find(".sub_notification_setting"); + const $is_muted_checkbox = $edit_container.find("#sub_is_muted_setting .sub_setting_control"); - is_muted_checkbox.prop("checked", sub.is_muted); - edit_container.find(".mute-note").toggleClass("hide-mute-note", !sub.is_muted); - notification_checkboxes.toggleClass("muted-sub", sub.is_muted); - notification_checkboxes.find("input[type='checkbox']").prop("disabled", sub.is_muted); + $is_muted_checkbox.prop("checked", sub.is_muted); + $edit_container.find(".mute-note").toggleClass("hide-mute-note", !sub.is_muted); + $notification_checkboxes.toggleClass("muted-sub", sub.is_muted); + $notification_checkboxes.find("input[type='checkbox']").prop("disabled", sub.is_muted); } function stream_is_muted_changed(e) { @@ -374,7 +374,7 @@ function change_stream_privacy(e) { const data = {}; const stream_id = $(e.target).closest(".dialog_submit_button").data("stream-id"); const url = "/json/streams/" + stream_id; - const status_element = $(".stream_permission_change_info"); + const $status_element = $(".stream_permission_change_info"); const sub = sub_store.get(stream_id); const privacy_setting = $("#stream_privacy_modal input[name=privacy]:checked").val(); @@ -450,17 +450,17 @@ function change_stream_privacy(e) { return; } - settings_ui.do_settings_change(channel.patch, url, data, status_element); + settings_ui.do_settings_change(channel.patch, url, data, $status_element); } -export function archive_stream(stream_id, alert_element, stream_row) { +export function archive_stream(stream_id, $alert_element, $stream_row) { channel.del({ url: "/json/streams/" + stream_id, error(xhr) { - ui_report.error($t_html({defaultMessage: "Failed"}), xhr, alert_element); + ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $alert_element); }, success() { - stream_row.remove(); + $stream_row.remove(); }, }); } @@ -584,9 +584,9 @@ export function initialize() { data.description = new_description; } - const status_element = $(".stream_change_property_info"); + const $status_element = $(".stream_change_property_info"); dialog_widget.close_modal(); - settings_ui.do_settings_change(channel.patch, url, data, status_element); + settings_ui.do_settings_change(channel.patch, url, data, $status_element); } $("#manage_streams_container").on( @@ -616,15 +616,15 @@ export function initialize() { $("#manage_streams_container").on("click", ".sub_unsub_button", (e) => { const sub = get_sub_for_target(e.target); // Makes sure we take the correct stream_row. - const stream_row = $( + const $stream_row = $( `#manage_streams_container div.stream-row[data-stream-id='${CSS.escape( sub.stream_id, )}']`, ); - stream_settings_ui.sub_or_unsub(sub, stream_row); + stream_settings_ui.sub_or_unsub(sub, $stream_row); if (!sub.subscribed) { - open_edit_panel_for_row(stream_row); + open_edit_panel_for_row($stream_row); } stream_ui_updates.update_regular_sub_settings(sub); @@ -654,8 +654,8 @@ export function initialize() { ); return; } - const row = $(".stream-row.active"); - archive_stream(stream_id, $(".stream_change_property_info"), row); + const $row = $(".stream-row.active"); + archive_stream(stream_id, $(".stream_change_property_info"), $row); } const stream_name = stream_data.maybe_get_stream_name(stream_id); diff --git a/static/js/stream_edit_subscribers.js b/static/js/stream_edit_subscribers.js index 26488c4329..8f2c790d48 100644 --- a/static/js/stream_edit_subscribers.js +++ b/static/js/stream_edit_subscribers.js @@ -51,7 +51,7 @@ function show_stream_subscription_request_result({ already_subscribed_users, ignored_deactivated_users, }) { - const stream_subscription_req_result_elem = $( + const $stream_subscription_req_result_elem = $( ".stream_subscription_request_result", ).expectOne(); const html = render_stream_subscription_request_result({ @@ -60,19 +60,19 @@ function show_stream_subscription_request_result({ already_subscribed_users, ignored_deactivated_users, }); - ui.get_content_element(stream_subscription_req_result_elem).html(html); + ui.get_content_element($stream_subscription_req_result_elem).html(html); if (add_class) { - stream_subscription_req_result_elem.addClass(add_class); + $stream_subscription_req_result_elem.addClass(add_class); } if (remove_class) { - stream_subscription_req_result_elem.removeClass(remove_class); + $stream_subscription_req_result_elem.removeClass(remove_class); } } -export function enable_subscriber_management({sub, parent_container}) { +export function enable_subscriber_management({sub, $parent_container}) { const stream_id = sub.stream_id; - const pill_container = parent_container.find(".pill-container"); + const $pill_container = $parent_container.find(".pill-container"); // current_stream_id and pill_widget are module-level variables current_stream_id = stream_id; @@ -82,7 +82,7 @@ export function enable_subscriber_management({sub, parent_container}) { } pill_widget = add_subscribers_pill.create({ - pill_container, + $pill_container, get_potential_subscribers, }); @@ -91,28 +91,28 @@ export function enable_subscriber_management({sub, parent_container}) { // We track a single subscribers_list_widget for this module, since we // only ever have one list of subscribers visible at a time. subscribers_list_widget = make_list_widget({ - parent_container, + $parent_container, name: "stream_subscribers", user_ids, }); } -function make_list_widget({parent_container, name, user_ids}) { +function make_list_widget({$parent_container, name, user_ids}) { const users = people.get_users_from_ids(user_ids); people.sort_but_pin_current_user_on_top(users); - const list_container = parent_container.find(".subscriber_table"); - list_container.empty(); + const $list_container = $parent_container.find(".subscriber_table"); + $list_container.empty(); - const simplebar_container = parent_container.find(".subscriber_list_container"); + const $simplebar_container = $parent_container.find(".subscriber_list_container"); - return ListWidget.create(list_container, users, { + return ListWidget.create($list_container, users, { name, modifier(item) { return format_member_list_elem(item); }, filter: { - element: parent_container.find(".search"), + $element: $parent_container.find(".search"), predicate(person, value) { const matcher = people.build_person_matcher(value); const match = matcher(person); @@ -120,7 +120,7 @@ function make_list_widget({parent_container, name, user_ids}) { return match; }, }, - simplebar_container, + $simplebar_container, }); } @@ -196,7 +196,7 @@ function subscribe_new_users({pill_user_ids}) { subscriber_api.add_user_ids_to_stream(user_ids, sub, invite_success, invite_failure); } -function remove_subscriber({stream_id, target_user_id, list_entry}) { +function remove_subscriber({stream_id, target_user_id, $list_entry}) { const sub = get_sub(stream_id); if (!sub) { return; @@ -212,7 +212,7 @@ function remove_subscriber({stream_id, target_user_id, list_entry}) { if (data.removed.length > 0) { // Remove the user from the subscriber list. - list_entry.remove(); + $list_entry.remove(); message = $t({defaultMessage: "Unsubscribed successfully!"}); // The rest of the work is done via the subscription -> remove event we will get } else { @@ -302,7 +302,7 @@ function update_subscribers_list_widget(subscriber_ids) { export function initialize() { add_subscribers_pill.set_up_handlers({ get_pill_widget: () => pill_widget, - parent_container: $("#manage_streams_container"), + $parent_container: $("#manage_streams_container"), pill_selector: ".edit_subscribers_for_stream .pill-container", button_selector: ".edit_subscribers_for_stream .add-subscriber-button", action: subscribe_new_users, @@ -314,11 +314,11 @@ export function initialize() { (e) => { e.preventDefault(); - const list_entry = $(e.target).closest("tr"); - const target_user_id = Number.parseInt(list_entry.attr("data-subscriber-id"), 10); + const $list_entry = $(e.target).closest("tr"); + const target_user_id = Number.parseInt($list_entry.attr("data-subscriber-id"), 10); const stream_id = current_stream_id; - remove_subscriber({stream_id, target_user_id, list_entry}); + remove_subscriber({stream_id, target_user_id, $list_entry}); }, ); } diff --git a/static/js/stream_events.js b/static/js/stream_events.js index f18ffb3769..338110caf9 100644 --- a/static/js/stream_events.js +++ b/static/js/stream_events.js @@ -23,8 +23,8 @@ import * as sub_store from "./sub_store"; // doing so is unnecessary with the current code. Ideally, we'd do a // refactor to address that, however. function update_stream_setting(sub, value, setting) { - const setting_checkbox = $(`#${CSS.escape(setting)}_${CSS.escape(sub.stream_id)}`); - setting_checkbox.prop("checked", value); + const $setting_checkbox = $(`#${CSS.escape(setting)}_${CSS.escape(sub.stream_id)}`); + $setting_checkbox.prop("checked", value); sub[setting] = value; } diff --git a/static/js/stream_list.js b/static/js/stream_list.js index 5115b4254e..e1d033dbb9 100644 --- a/static/js/stream_list.js +++ b/static/js/stream_list.js @@ -28,18 +28,18 @@ export let stream_cursor; let has_scrolled = false; -export function update_count_in_dom(stream_li, count) { +export function update_count_in_dom($stream_li, count) { // The subscription_block properly excludes the topic list, // and it also has sensitive margins related to whether the // count is there or not. - const subscription_block = stream_li.find(".subscription_block"); + const $subscription_block = $stream_li.find(".subscription_block"); - ui_util.update_unread_count_in_dom(subscription_block, count); + ui_util.update_unread_count_in_dom($subscription_block, count); if (count === 0) { - subscription_block.removeClass("stream-with-count"); + $subscription_block.removeClass("stream-with-count"); } else { - subscription_block.addClass("stream-with-count"); + $subscription_block.addClass("stream-with-count"); } } @@ -71,8 +71,8 @@ class StreamSidebar { export const stream_sidebar = new StreamSidebar(); function get_search_term() { - const search_box = $(".stream-list-filter"); - const search_term = search_box.expectOne().val().trim(); + const $search_box = $(".stream-list-filter"); + const search_term = $search_box.expectOne().val().trim(); return search_term; } @@ -105,9 +105,9 @@ export function build_stream_list(force_rerender) { // which largely is a matter of arranging the individual rows in // the right order. const streams = stream_data.subscribed_stream_ids(); - const parent = $("#stream_filters"); + const $parent = $("#stream_filters"); if (streams.length === 0) { - parent.empty(); + $parent.empty(); return; } @@ -128,7 +128,7 @@ export function build_stream_list(force_rerender) { } topic_list.clear(); - parent.empty(); + $parent.empty(); for (const stream_id of stream_groups.pinned_streams) { add_sidebar_li(stream_id); @@ -154,7 +154,7 @@ export function build_stream_list(force_rerender) { add_sidebar_li(stream_id); } - parent.append(elems); + $parent.append(elems); } export function get_stream_li(stream_id) { @@ -166,22 +166,22 @@ export function get_stream_li(stream_id) { return undefined; } - const li = row.get_li(); - if (!li) { + const $li = row.get_li(); + if (!$li) { blueslip.error("Cannot find li for id " + stream_id); return undefined; } - if (li.length > 1) { + if ($li.length > 1) { blueslip.error("stream_li has too many elements for " + stream_id); return undefined; } - return li; + return $li; } -function stream_id_for_elt(elt) { - return Number.parseInt(elt.attr("data-stream-id"), 10); +function stream_id_for_elt($elt) { + return Number.parseInt($elt.attr("data-stream-id"), 10); } export function zoom_in_topics(options) { @@ -200,13 +200,13 @@ export function zoom_in_topics(options) { }); $("#stream_filters li.narrow-filter").each(function () { - const elt = $(this); + const $elt = $(this); const stream_id = options.stream_id; - if (stream_id_for_elt(elt) === stream_id) { - elt.show(); + if (stream_id_for_elt($elt) === stream_id) { + $elt.show(); } else { - elt.hide(); + $elt.hide(); } }); } @@ -225,16 +225,16 @@ export function zoom_out_topics() { } export function set_in_home_view(stream_id, in_home) { - const li = get_stream_li(stream_id); - if (!li) { + const $li = get_stream_li(stream_id); + if (!$li) { blueslip.error("passed in bad stream id " + stream_id); return; } if (in_home) { - li.removeClass("out_of_home_view"); + $li.removeClass("out_of_home_view"); } else { - li.addClass("out_of_home_view"); + $li.addClass("out_of_home_view"); } } @@ -251,36 +251,36 @@ function build_stream_sidebar_li(sub) { pin_to_top: sub.pin_to_top, }; args.dark_background = color_class.get_css_class(args.color); - const list_item = $(render_stream_sidebar_row(args)); - return list_item; + const $list_item = $(render_stream_sidebar_row(args)); + return $list_item; } class StreamSidebarRow { constructor(sub) { this.sub = sub; - this.list_item = build_stream_sidebar_li(sub); + this.$list_item = build_stream_sidebar_li(sub); this.update_unread_count(); } update_whether_active() { if (stream_data.is_active(this.sub) || this.sub.pin_to_top === true) { - this.list_item.removeClass("inactive_stream"); + this.$list_item.removeClass("inactive_stream"); } else { - this.list_item.addClass("inactive_stream"); + this.$list_item.addClass("inactive_stream"); } } get_li() { - return this.list_item; + return this.$list_item; } remove() { - this.list_item.remove(); + this.$list_item.remove(); } update_unread_count() { const count = unread.num_unread_for_stream(this.sub.stream_id); - update_count_in_dom(this.list_item, count); + update_count_in_dom(this.$list_item, count); } } @@ -298,15 +298,15 @@ export function create_sidebar_row(sub) { } export function redraw_stream_privacy(sub) { - const li = get_stream_li(sub.stream_id); - if (!li) { + const $li = get_stream_li(sub.stream_id); + if (!$li) { // We don't want to raise error here, if we can't find stream in subscription // stream list. Cause we allow org admin to update stream privacy // even if they don't subscribe to public stream. return; } - const div = li.find(".stream-privacy"); + const $div = $li.find(".stream-privacy"); const dark_background = color_class.get_css_class(sub.color); const args = { @@ -316,18 +316,18 @@ export function redraw_stream_privacy(sub) { }; const html = render_stream_privacy(args); - div.html(html); + $div.html(html); } function set_stream_unread_count(stream_id, count) { - const stream_li = get_stream_li(stream_id); - if (!stream_li) { + const $stream_li = get_stream_li(stream_id); + if (!$stream_li) { // This can happen for legitimate reasons, but we warn // just in case. blueslip.warn("stream id no longer in sidebar: " + stream_id); return; } - update_count_in_dom(stream_li, count); + update_count_in_dom($stream_li, count); } export function update_streams_sidebar(force_rerender) { @@ -367,12 +367,12 @@ export function refresh_pinned_or_unpinned_stream(sub) { // a topic, we may be literally trying to get it out of // our sight. if (sub.pin_to_top) { - const stream_li = get_stream_li(sub.stream_id); - if (!stream_li) { + const $stream_li = get_stream_li(sub.stream_id); + if (!$stream_li) { blueslip.error("passed in bad stream id " + sub.stream_id); return; } - scroll_stream_into_view(stream_li); + scroll_stream_into_view($stream_li); } } @@ -422,9 +422,9 @@ export function update_stream_sidebar_for_narrow(filter) { return undefined; } - const stream_li = get_stream_li(stream_id); + const $stream_li = get_stream_li(stream_id); - if (!stream_li) { + if (!$stream_li) { // This is a sanity check. When we narrow to a subscribed // stream, there will always be a stream list item // corresponding to that stream in our sidebar. This error @@ -436,22 +436,22 @@ export function update_stream_sidebar_for_narrow(filter) { } if (!info.topic_selected) { - stream_li.addClass("active-filter"); + $stream_li.addClass("active-filter"); } if (stream_id !== topic_list.active_stream_id()) { topic_zoom.clear_topics(); } - topic_list.rebuild(stream_li, stream_id); + topic_list.rebuild($stream_li, stream_id); - return stream_li; + return $stream_li; } export function handle_narrow_activated(filter) { - const stream_li = update_stream_sidebar_for_narrow(filter); - if (stream_li) { - scroll_stream_into_view(stream_li); + const $stream_li = update_stream_sidebar_for_narrow(filter); + if ($stream_li) { + scroll_stream_into_view($stream_li); } } @@ -554,7 +554,7 @@ export function set_event_handlers() { const $search_input = $(".stream-list-filter").expectOne(); keydown_util.handle({ - elem: $search_input, + $elem: $search_input, handlers: { Enter() { keydown_enter_key(); @@ -581,24 +581,24 @@ export function searching() { } export function escape_search() { - const filter = $(".stream-list-filter").expectOne(); - if (filter.val() === "") { + const $filter = $(".stream-list-filter").expectOne(); + if ($filter.val() === "") { clear_and_hide_search(); return; } - filter.val(""); + $filter.val(""); update_streams_for_search(); } export function clear_search(e) { e.stopPropagation(); - const filter = $(".stream-list-filter").expectOne(); - if (filter.val() === "") { + const $filter = $(".stream-list-filter").expectOne(); + if ($filter.val() === "") { clear_and_hide_search(); return; } - filter.val(""); - filter.trigger("blur"); + $filter.val(""); + $filter.trigger("blur"); update_streams_for_search(); } @@ -615,7 +615,7 @@ export function hide_search_section() { export function initiate_search() { show_search_section(); - const filter = $(".stream-list-filter").expectOne(); + const $filter = $(".stream-list-filter").expectOne(); if ( // Check if left column is a popover and is not visible. @@ -625,19 +625,19 @@ export function initiate_search() { popovers.hide_all(); stream_popover.show_streamlist_sidebar(); } - filter.trigger("focus"); + $filter.trigger("focus"); stream_cursor.reset(); } export function clear_and_hide_search() { - const filter = $(".stream-list-filter"); - if (filter.val() !== "") { - filter.val(""); + const $filter = $(".stream-list-filter"); + if ($filter.val() !== "") { + $filter.val(""); update_streams_for_search(); } stream_cursor.clear(); - filter.trigger("blur"); + $filter.trigger("blur"); hide_search_section(); } @@ -651,15 +651,15 @@ export function toggle_filter_displayed(e) { e.preventDefault(); } -export function scroll_stream_into_view(stream_li) { - const container = $("#stream-filters-container"); +export function scroll_stream_into_view($stream_li) { + const $container = $("#stream-filters-container"); - if (stream_li.length !== 1) { + if ($stream_li.length !== 1) { blueslip.error("Invalid stream_li was passed in"); return; } - scroll_util.scroll_element_into_container(stream_li, container); + scroll_util.scroll_element_into_container($stream_li, $container); } export function maybe_scroll_narrow_into_view() { @@ -668,9 +668,9 @@ export function maybe_scroll_narrow_into_view() { return; } - const stream_li = get_current_stream_li(); - if (stream_li) { - scroll_stream_into_view(stream_li); + const $stream_li = get_current_stream_li(); + if ($stream_li) { + scroll_stream_into_view($stream_li); } } @@ -682,13 +682,13 @@ export function get_current_stream_li() { return undefined; } - const stream_li = get_stream_li(stream_id); + const $stream_li = get_stream_li(stream_id); - if (!stream_li) { + if (!$stream_li) { // This code path shouldn't ever be reached. blueslip.warn("No active stream_li found for defined id " + stream_id); return undefined; } - return stream_li; + return $stream_li; } diff --git a/static/js/stream_popover.js b/static/js/stream_popover.js index a20dc8ac02..3facc5309a 100644 --- a/static/js/stream_popover.js +++ b/static/js/stream_popover.js @@ -46,7 +46,7 @@ let all_messages_sidebar_elem; let starred_messages_sidebar_elem; let drafts_sidebar_elem; let stream_widget; -let stream_header_colorblock; +let $stream_header_colorblock; function get_popover_menu_items(sidebar_elem) { if (!sidebar_elem) { @@ -82,8 +82,8 @@ export function starred_messages_sidebar_menu_handle_keyboard(key) { popovers.popover_items_handle_keyboard(key, items); } -function elem_to_stream_id(elem) { - const stream_id = Number.parseInt(elem.attr("data-stream-id"), 10); +function elem_to_stream_id($elem) { + const stream_id = Number.parseInt($elem.attr("data-stream-id"), 10); if (stream_id === undefined) { blueslip.error("could not find stream id"); @@ -164,8 +164,8 @@ export function hide_streamlist_sidebar() { } function stream_popover_sub(e) { - const elem = $(e.currentTarget).parents("ul"); - const stream_id = elem_to_stream_id(elem); + const $elem = $(e.currentTarget).parents("ul"); + const stream_id = elem_to_stream_id($elem); const sub = sub_store.get(stream_id); if (!sub) { blueslip.error("Unknown stream: " + stream_id); @@ -178,30 +178,30 @@ function stream_popover_sub(e) { // Bootstrap popovers don't properly handle being resized -- // so after resizing our popover to add in the spectrum color // picker, we need to adjust its height accordingly. -function update_spectrum(popover, update_func) { - const initial_height = popover[0].offsetHeight; +function update_spectrum($popover, update_func) { + const initial_height = $popover[0].offsetHeight; - const colorpicker = popover.find(".colorpicker-container").find(".colorpicker"); - update_func(colorpicker); - const after_height = popover[0].offsetHeight; + const $colorpicker = $popover.find(".colorpicker-container").find(".colorpicker"); + update_func($colorpicker); + const after_height = $popover[0].offsetHeight; - const popover_root = popover.closest(".popover"); - const current_top_px = Number.parseFloat(popover_root.css("top").replace("px", "")); + const $popover_root = $popover.closest(".popover"); + const current_top_px = Number.parseFloat($popover_root.css("top").replace("px", "")); const height_delta = after_height - initial_height; let top = current_top_px - height_delta / 2; if (top < 0) { top = 0; - popover_root.find("div.arrow").hide(); + $popover_root.find("div.arrow").hide(); } else if (top + after_height > $(window).height() - 20) { top = $(window).height() - after_height - 20; if (top < 0) { top = 0; } - popover_root.find("div.arrow").hide(); + $popover_root.find("div.arrow").hide(); } - popover_root.css("top", top + "px"); + $popover_root.css("top", top + "px"); } // Builds the `Copy link to topic` topic action. @@ -249,10 +249,10 @@ function build_stream_popover(opts) { }); $(elt).popover("show"); - const popover = $(`.streams_popover[data-stream-id="${CSS.escape(stream_id)}"]`); + const $popover = $(`.streams_popover[data-stream-id="${CSS.escape(stream_id)}"]`); - update_spectrum(popover, (colorpicker) => { - colorpicker.spectrum(stream_color.sidebar_popover_colorpicker_options); + update_spectrum($popover, ($colorpicker) => { + $colorpicker.spectrum(stream_color.sidebar_popover_colorpicker_options); }); current_stream_sidebar_elem = elt; @@ -472,10 +472,10 @@ function build_move_topic_to_stream_popover(e, current_stream_id, topic_name) { } function move_topic_post_render() { - stream_header_colorblock = $("#dialog_widget_modal .topic_stream_edit_header").find( + $stream_header_colorblock = $("#dialog_widget_modal .topic_stream_edit_header").find( ".stream_header_colorblock", ); - stream_bar.decorate(current_stream_name, stream_header_colorblock, false); + stream_bar.decorate(current_stream_name, $stream_header_colorblock, false); const streams_list = stream_data.subscribed_subs().map((stream) => ({ name: stream.name, value: stream.stream_id.toString(), @@ -506,8 +506,8 @@ export function register_click_handlers() { e.stopPropagation(); const elt = e.target; - const stream_li = $(elt).parents("li"); - const stream_id = elem_to_stream_id(stream_li); + const $stream_li = $(elt).parents("li"); + const stream_id = elem_to_stream_id($stream_li); build_stream_popover({ elt, @@ -519,8 +519,8 @@ export function register_click_handlers() { e.stopPropagation(); const elt = $(e.target).closest(".topic-sidebar-menu-icon").expectOne()[0]; - const stream_li = $(elt).closest(".narrow-filter").expectOne(); - const stream_id = elem_to_stream_id(stream_li); + const $stream_li = $(elt).closest(".narrow-filter").expectOne(); + const stream_id = elem_to_stream_id($stream_li); const topic_name = $(elt).closest("li").expectOne().attr("data-topic-name"); const url = $(elt).closest("li").find(".topic-name").expectOne().prop("href"); @@ -555,7 +555,7 @@ export function register_click_handlers() { Number.parseInt(stream_widget.value(), 10), ); - stream_bar.decorate(stream_name, stream_header_colorblock, false); + stream_bar.decorate(stream_name, $stream_header_colorblock, false); }); register_stream_handlers(); @@ -670,16 +670,16 @@ export function register_stream_handlers() { // Choose a different color. $("body").on("click", ".choose_stream_color", (e) => { - update_spectrum($(e.target).closest(".streams_popover"), (colorpicker) => { + update_spectrum($(e.target).closest(".streams_popover"), ($colorpicker) => { $(".colorpicker-container").show(); - colorpicker.spectrum("destroy"); - colorpicker.spectrum(stream_color.sidebar_popover_colorpicker_options_full); + $colorpicker.spectrum("destroy"); + $colorpicker.spectrum(stream_color.sidebar_popover_colorpicker_options_full); // In theory this should clean up the old color picker, // but this seems a bit flaky -- the new colorpicker // doesn't fire until you click a button, but the buttons // have been hidden. We work around this by just manually // fixing it up here. - colorpicker.parent().find(".sp-container").removeClass("sp-buttons-disabled"); + $colorpicker.parent().find(".sp-container").removeClass("sp-buttons-disabled"); $(e.target).hide(); }); @@ -762,9 +762,9 @@ export function register_topic_handlers() { }); $("body").on("click", ".sidebar-popover-toggle-resolved", (e) => { - const topic_row = $(e.currentTarget); - const stream_id = Number.parseInt(topic_row.attr("data-stream-id"), 10); - const topic_name = topic_row.attr("data-topic-name"); + const $topic_row = $(e.currentTarget); + const stream_id = Number.parseInt($topic_row.attr("data-stream-id"), 10); + const topic_name = $topic_row.attr("data-topic-name"); message_edit.with_first_message_id(stream_id, topic_name, (message_id) => { message_edit.toggle_resolve_topic(message_id, topic_name); }); @@ -775,9 +775,9 @@ export function register_topic_handlers() { }); $("body").on("click", ".sidebar-popover-move-topic-messages", (e) => { - const topic_row = $(e.currentTarget); - const stream_id = Number.parseInt(topic_row.attr("data-stream-id"), 10); - const topic_name = topic_row.attr("data-topic-name"); + const $topic_row = $(e.currentTarget); + const stream_id = Number.parseInt($topic_row.attr("data-stream-id"), 10); + const topic_name = $topic_row.attr("data-topic-name"); build_move_topic_to_stream_popover(e, stream_id, topic_name); e.stopPropagation(); e.preventDefault(); diff --git a/static/js/stream_settings_ui.js b/static/js/stream_settings_ui.js index 7093362448..93ab685375 100644 --- a/static/js/stream_settings_ui.js +++ b/static/js/stream_settings_ui.js @@ -76,28 +76,28 @@ export function is_sub_already_present(sub) { } export function update_left_panel_row(sub) { - const row = row_for_stream_id(sub.stream_id); + const $row = row_for_stream_id(sub.stream_id); - if (row.length === 0) { + if ($row.length === 0) { return; } blueslip.debug(`Updating row in left panel of stream settings for: ${sub.name}`); const setting_sub = stream_settings_data.get_sub_for_settings(sub); const html = render_browse_streams_list_item(setting_sub); - const new_row = $(html); + const $new_row = $(html); // TODO: Clean up this hack when we eliminate `notdisplayed` - if (row.hasClass("notdisplayed")) { - new_row.addClass("notdisplayed"); + if ($row.hasClass("notdisplayed")) { + $new_row.addClass("notdisplayed"); } // TODO: Remove this if/when we just handle "active" when rendering templates. - if (row.hasClass("active")) { - new_row.addClass("active"); + if ($row.hasClass("active")) { + $new_row.addClass("active"); } - row.replaceWith(new_row); + $row.replaceWith($new_row); } export function settings_button_for_sub(sub) { @@ -108,8 +108,8 @@ export function settings_button_for_sub(sub) { ); } -function get_row_data(row) { - const row_id = Number.parseInt(row.attr("data-stream-id"), 10); +function get_row_data($row) { + const row_id = Number.parseInt($row.attr("data-stream-id"), 10); if (row_id) { const row_object = sub_store.get(row_id); return { @@ -121,13 +121,13 @@ function get_row_data(row) { } 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"); + 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"); return { - row: active_row, + $row: $active_row, id: valid_active_id, - tabs: active_tabs, + $tabs: $active_tabs, }; } @@ -175,8 +175,8 @@ export function update_stream_name(sub, new_name) { stream_edit.update_stream_name(sub, new_name); // Update the subscriptions page - const sub_row = row_for_stream_id(stream_id); - sub_row.find(".stream-name").text(new_name); + const $sub_row = row_for_stream_id(stream_id); + $sub_row.find(".stream-name").text(new_name); // Update the message feed. message_live_update.update_stream_name(stream_id, new_name); @@ -196,8 +196,8 @@ export function update_stream_description(sub, description, rendered_description stream_data.clean_up_description(sub); // Update stream row - const sub_row = row_for_stream_id(sub.stream_id); - sub_row.find(".description").html(util.clean_user_content_links(sub.rendered_description)); + 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 stream_edit.update_stream_description(sub); @@ -262,13 +262,13 @@ export function add_sub_to_table(sub) { const setting_sub = stream_settings_data.get_sub_for_settings(sub); const html = render_browse_streams_list_item(setting_sub); - const new_row = $(html); + const $new_row = $(html); if (stream_create.get_name() === sub.name) { - ui.get_content_element($(".streams-list")).prepend(new_row); + ui.get_content_element($(".streams-list")).prepend($new_row); ui.reset_scrollbar($(".streams-list")); } else { - ui.get_content_element($(".streams-list")).append(new_row); + ui.get_content_element($(".streams-list")).append($new_row); } const settings_html = render_stream_settings(sub); @@ -289,8 +289,8 @@ export function add_sub_to_table(sub) { 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 = row_for_stream_id(stream_id); - row.remove(); + const $row = row_for_stream_id(stream_id); + $row.remove(); if (hash_util.is_editing_stream(stream_id)) { stream_edit.open_edit_panel_empty(); } @@ -325,8 +325,8 @@ export function show_active_stream_in_left_panel() { const selected_row = hash_util.get_current_hash_section(); if (Number.parseFloat(selected_row)) { - const sub_row = row_for_stream_id(selected_row); - sub_row.addClass("active"); + const $sub_row = row_for_stream_id(selected_row); + $sub_row.addClass("active"); } } @@ -487,8 +487,8 @@ export function redraw_left_panel(left_panel_params = get_left_panel_params()) { let sort_order = "by-stream-name"; export function get_left_panel_params() { - const search_box = $("#stream_filter input[type='text']"); - const input = search_box.expectOne().val().trim(); + const $search_box = $("#stream_filter input[type='text']"); + const input = $search_box.expectOne().val().trim(); const params = { input, subscribed_only, @@ -697,18 +697,18 @@ export function setup_page(callback) { } export function switch_to_stream_row(stream_id) { - const stream_row = row_for_stream_id(stream_id); - const container = $(".streams-list"); + const $stream_row = row_for_stream_id(stream_id); + const $container = $(".streams-list"); - get_active_data().row.removeClass("active"); - stream_row.addClass("active"); + get_active_data().$row.removeClass("active"); + $stream_row.addClass("active"); - scroll_util.scroll_element_into_container(stream_row, container); + scroll_util.scroll_element_into_container($stream_row, $container); // It's dubious that we need this timeout any more. setTimeout(() => { if (stream_id === get_active_data().id) { - stream_row.trigger("click"); + $stream_row.trigger("click"); } }, 100); } @@ -763,7 +763,7 @@ export function launch(section) { setup_page(() => { overlays.open_overlay({ name: "subscriptions", - overlay: $("#subscription_overlay"), + $overlay: $("#subscription_overlay"), on_close() { browser_history.exit_overlay(); $(".colorpicker").spectrum("destroy"); @@ -782,20 +782,20 @@ export function launch(section) { export function switch_rows(event) { const active_data = get_active_data(); - let switch_row; + let $switch_row; if (hash_util.is_create_new_stream_narrow()) { // Prevent switching stream rows when creating a new stream return false; - } else if (!active_data.id || active_data.row.hasClass("notdisplayed")) { - switch_row = $("div.stream-row:not(.notdisplayed)").first(); + } else if (!active_data.id || active_data.$row.hasClass("notdisplayed")) { + $switch_row = $("div.stream-row:not(.notdisplayed)").first(); if ($("#search_stream_name").is(":focus")) { $("#search_stream_name").trigger("blur"); } } else { if (event === "up_arrow") { - switch_row = active_data.row.prevAll().not(".notdisplayed").first(); + $switch_row = active_data.$row.prevAll().not(".notdisplayed").first(); } else if (event === "down_arrow") { - switch_row = active_data.row.nextAll().not(".notdisplayed").first(); + $switch_row = active_data.$row.nextAll().not(".notdisplayed").first(); } if ($("#search_stream_name").is(":focus")) { // remove focus from Filter streams input instead of switching rows @@ -804,7 +804,7 @@ export function switch_rows(event) { } } - const row_data = get_row_data(switch_row); + const row_data = get_row_data($switch_row); if (row_data) { const stream_id = row_data.id; switch_to_stream_row(stream_id); @@ -816,7 +816,7 @@ export function switch_rows(event) { export function keyboard_sub() { const active_data = get_active_data(); - const row_data = get_row_data(active_data.row); + const row_data = get_row_data(active_data.$row); if (row_data) { sub_or_unsub(row_data.object); } @@ -824,7 +824,7 @@ export function keyboard_sub() { export function toggle_view(event) { const active_data = get_active_data(); - const stream_filter_tab = $(active_data.tabs[0]).text(); + const stream_filter_tab = $(active_data.$tabs[0]).text(); if (event === "right_arrow" && stream_filter_tab === "Subscribed") { toggler.goto("all-streams"); @@ -835,7 +835,7 @@ export function toggle_view(event) { export function view_stream() { const active_data = get_active_data(); - const row_data = get_row_data(active_data.row); + 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); @@ -849,13 +849,13 @@ function display_subscribe_toggle_spinner(stream_row) { $(stream_row).find(".check").removeClass("sub_unsub_button"); /* Hide the tick. */ - const tick = $(stream_row).find("svg"); - tick.addClass("hide"); + const $tick = $(stream_row).find("svg"); + $tick.addClass("hide"); /* Add a spinner to show the request is in process. */ - const spinner = $(stream_row).find(".sub_unsub_status").expectOne(); - spinner.show(); - loading.make_indicator(spinner); + const $spinner = $(stream_row).find(".sub_unsub_status").expectOne(); + $spinner.show(); + loading.make_indicator($spinner); } /* For the given stream_row, add the tick and delete the spinner. */ @@ -864,20 +864,20 @@ function hide_subscribe_toggle_spinner(stream_row) { $(stream_row).find(".check").addClass("sub_unsub_button"); /* Show the tick. */ - const tick = $(stream_row).find("svg"); - tick.removeClass("hide"); + const $tick = $(stream_row).find("svg"); + $tick.removeClass("hide"); /* Destroy the spinner. */ - const spinner = $(stream_row).find(".sub_unsub_status").expectOne(); - loading.destroy_indicator(spinner); + const $spinner = $(stream_row).find(".sub_unsub_status").expectOne(); + loading.destroy_indicator($spinner); } -function ajaxSubscribe(stream, color, stream_row) { +function ajaxSubscribe(stream, color, $stream_row) { // Subscribe yourself to a single stream. let true_stream_name; - if (stream_row !== undefined) { - display_subscribe_toggle_spinner(stream_row); + if ($stream_row !== undefined) { + display_subscribe_toggle_spinner($stream_row); } return channel.post({ url: "/json/users/me/subscriptions", @@ -901,13 +901,13 @@ function ajaxSubscribe(stream, color, stream_row) { } // The rest of the work is done via the subscribe event we will get - if (stream_row !== undefined) { - hide_subscribe_toggle_spinner(stream_row); + if ($stream_row !== undefined) { + hide_subscribe_toggle_spinner($stream_row); } }, error(xhr) { - if (stream_row !== undefined) { - hide_subscribe_toggle_spinner(stream_row); + if ($stream_row !== undefined) { + hide_subscribe_toggle_spinner($stream_row); } ui_report.error( $t_html({defaultMessage: "Error adding subscription"}), @@ -918,10 +918,10 @@ function ajaxSubscribe(stream, color, stream_row) { }); } -function ajaxUnsubscribe(sub, stream_row) { +function ajaxUnsubscribe(sub, $stream_row) { // TODO: use stream_id when backend supports it - if (stream_row !== undefined) { - display_subscribe_toggle_spinner(stream_row); + if ($stream_row !== undefined) { + display_subscribe_toggle_spinner($stream_row); } return channel.del({ url: "/json/users/me/subscriptions", @@ -930,13 +930,13 @@ function ajaxUnsubscribe(sub, stream_row) { $(".stream_change_property_info").hide(); // The rest of the work is done via the unsubscribe event we will get - if (stream_row !== undefined) { - hide_subscribe_toggle_spinner(stream_row); + if ($stream_row !== undefined) { + hide_subscribe_toggle_spinner($stream_row); } }, error(xhr) { - if (stream_row !== undefined) { - hide_subscribe_toggle_spinner(stream_row); + if ($stream_row !== undefined) { + hide_subscribe_toggle_spinner($stream_row); } ui_report.error( $t_html({defaultMessage: "Error removing subscription"}), @@ -972,14 +972,14 @@ export function unsubscribe_from_private_stream(sub) { const html_body = render_unsubscribe_private_stream_modal(); function unsubscribe_from_stream() { - let stream_row; + let $stream_row; if (overlays.streams_open()) { - stream_row = $( + $stream_row = $( "#manage_streams_container div.stream-row[data-stream-id='" + sub.stream_id + "']", ); } - ajaxUnsubscribe(sub, stream_row); + ajaxUnsubscribe(sub, $stream_row); } confirm_dialog.launch({ @@ -992,83 +992,83 @@ export function unsubscribe_from_private_stream(sub) { }); } -export function sub_or_unsub(sub, stream_row) { +export function sub_or_unsub(sub, $stream_row) { if (sub.subscribed) { // TODO: This next line should allow guests to access web-public streams. if (sub.invite_only || page_params.is_guest) { unsubscribe_from_private_stream(sub); return; } - ajaxUnsubscribe(sub, stream_row); + ajaxUnsubscribe(sub, $stream_row); } else { - ajaxSubscribe(sub.name, sub.color, stream_row); + ajaxSubscribe(sub.name, sub.color, $stream_row); } } -export function update_web_public_stream_privacy_option_state(container) { - const web_public_stream_elem = container.find( +export function update_web_public_stream_privacy_option_state($container) { + const $web_public_stream_elem = $container.find( `input[value='${CSS.escape(stream_data.stream_privacy_policy_values.web_public.code)}']`, ); if ( !page_params.server_web_public_streams_enabled || !page_params.realm_enable_spectator_access ) { - const for_change_privacy_modal = container.attr("id") === "stream_privacy_modal"; - if (for_change_privacy_modal && web_public_stream_elem.is(":checked")) { + const for_change_privacy_modal = $container.attr("id") === "stream_privacy_modal"; + if (for_change_privacy_modal && $web_public_stream_elem.is(":checked")) { // We do not hide web-public option in the "Change privacy" modal if // stream is web-public already. The option is disabled in this case. - web_public_stream_elem.prop("disabled", true); + $web_public_stream_elem.prop("disabled", true); return; } - web_public_stream_elem.closest(".radio-input-parent").hide(); - container + $web_public_stream_elem.closest(".radio-input-parent").hide(); + $container .find(".stream-privacy-values .radio-input-parent:visible:last") .css("border-bottom", "none"); } else { - if (!web_public_stream_elem.is(":visible")) { - container + if (!$web_public_stream_elem.is(":visible")) { + $container .find(".stream-privacy-values .radio-input-parent:visible:last") .css("border-bottom", ""); - web_public_stream_elem.closest(".radio-input-parent").show(); + $web_public_stream_elem.closest(".radio-input-parent").show(); } - web_public_stream_elem.prop( + $web_public_stream_elem.prop( "disabled", !settings_data.user_can_create_web_public_streams(), ); } } -export function update_public_stream_privacy_option_state(container) { - const public_stream_elem = container.find( +export function update_public_stream_privacy_option_state($container) { + const $public_stream_elem = $container.find( `input[value='${CSS.escape(stream_data.stream_privacy_policy_values.public.code)}']`, ); - public_stream_elem.prop("disabled", !settings_data.user_can_create_public_streams()); + $public_stream_elem.prop("disabled", !settings_data.user_can_create_public_streams()); } -export function update_private_stream_privacy_option_state(container) { +export function update_private_stream_privacy_option_state($container) { // Disable both "Private, shared history" and "Private, protected history" options. - const private_stream_elem = container.find( + const $private_stream_elem = $container.find( `input[value='${CSS.escape(stream_data.stream_privacy_policy_values.private.code)}']`, ); - const private_with_public_history_elem = container.find( + const $private_with_public_history_elem = $container.find( `input[value='${CSS.escape( stream_data.stream_privacy_policy_values.private_with_public_history.code, )}']`, ); - private_stream_elem.prop("disabled", !settings_data.user_can_create_private_streams()); - private_with_public_history_elem.prop( + $private_stream_elem.prop("disabled", !settings_data.user_can_create_private_streams()); + $private_with_public_history_elem.prop( "disabled", !settings_data.user_can_create_private_streams(), ); } -export function hide_or_disable_stream_privacy_options_if_required(container) { - update_web_public_stream_privacy_option_state(container); +export function hide_or_disable_stream_privacy_options_if_required($container) { + update_web_public_stream_privacy_option_state($container); - update_public_stream_privacy_option_state(container); + update_public_stream_privacy_option_state($container); - update_private_stream_privacy_option_state(container); + update_private_stream_privacy_option_state($container); } export function update_stream_privacy_choices(policy) { @@ -1081,19 +1081,19 @@ export function update_stream_privacy_choices(policy) { if (!change_privacy_modal_opened && !stream_creation_form_opened) { return; } - let container = $("#stream-creation"); + let $container = $("#stream-creation"); if (change_privacy_modal_opened) { - container = $("#stream_privacy_modal"); + $container = $("#stream_privacy_modal"); } if (policy === "create_private_stream_policy") { - update_private_stream_privacy_option_state(container); + update_private_stream_privacy_option_state($container); } if (policy === "create_public_stream_policy") { - update_public_stream_privacy_option_state(container); + update_public_stream_privacy_option_state($container); } if (policy === "create_web_public_stream_policy") { - update_web_public_stream_privacy_option_state(container); + update_web_public_stream_privacy_option_state($container); } } diff --git a/static/js/stream_ui_updates.js b/static/js/stream_ui_updates.js index dd69eeb1d2..9e8d6eb334 100644 --- a/static/js/stream_ui_updates.js +++ b/static/js/stream_ui_updates.js @@ -11,16 +11,16 @@ import * as stream_settings_containers from "./stream_settings_containers"; import * as stream_settings_ui from "./stream_settings_ui"; export function initialize_disable_btn_hint_popover( - btn_wrapper, - popover_btn, - disabled_btn, + $btn_wrapper, + $popover_btn, + $disabled_btn, hint_text, ) { // Disabled button blocks mouse events(hover) from reaching // to it's parent div element, so popover don't get triggered. // Add css to prevent this. - disabled_btn.css("pointer-events", "none"); - popover_btn.popover({ + $disabled_btn.css("pointer-events", "none"); + $popover_btn.popover({ placement: "bottom", content: $("
    ", {class: "sub_disable_btn_hint"}).text(hint_text).prop("outerHTML"), trigger: "manual", @@ -28,26 +28,26 @@ export function initialize_disable_btn_hint_popover( animation: false, }); - btn_wrapper.on("mouseover", (e) => { - popover_btn.popover("show"); + $btn_wrapper.on("mouseover", (e) => { + $popover_btn.popover("show"); e.stopPropagation(); }); - btn_wrapper.on("mouseout", (e) => { - popover_btn.popover("hide"); + $btn_wrapper.on("mouseout", (e) => { + $popover_btn.popover("hide"); e.stopPropagation(); }); } export function initialize_cant_subscribe_popover(sub) { - const button_wrapper = stream_settings_containers + const $button_wrapper = stream_settings_containers .get_edit_container(sub) .find(".sub_unsub_button_wrapper"); - const settings_button = stream_settings_ui.settings_button_for_sub(sub); + const $settings_button = stream_settings_ui.settings_button_for_sub(sub); initialize_disable_btn_hint_popover( - button_wrapper, - settings_button, - settings_button, + $button_wrapper, + $settings_button, + $settings_button, $t({defaultMessage: "Only stream members can add users to a private stream"}), ); } @@ -74,20 +74,20 @@ export function update_toggler_for_sub(sub) { export function update_settings_button_for_sub(sub) { // This is for the Subscribe/Unsubscribe button in the right panel. - const settings_button = stream_settings_ui.settings_button_for_sub(sub); + const $settings_button = stream_settings_ui.settings_button_for_sub(sub); if (sub.subscribed) { - settings_button.text($t({defaultMessage: "Unsubscribe"})).removeClass("unsubscribed"); + $settings_button.text($t({defaultMessage: "Unsubscribe"})).removeClass("unsubscribed"); } else { - settings_button.text($t({defaultMessage: "Subscribe"})).addClass("unsubscribed"); + $settings_button.text($t({defaultMessage: "Subscribe"})).addClass("unsubscribed"); } if (stream_data.can_toggle_subscription(sub)) { - settings_button.prop("disabled", false); - settings_button.popover("destroy"); - settings_button.css("pointer-events", ""); + $settings_button.prop("disabled", false); + $settings_button.popover("destroy"); + $settings_button.css("pointer-events", ""); } else { - settings_button.attr("title", ""); + $settings_button.attr("title", ""); initialize_cant_subscribe_popover(sub); - settings_button.prop("disabled", true); + $settings_button.prop("disabled", true); } } @@ -113,22 +113,22 @@ export function update_regular_sub_settings(sub) { export function update_change_stream_privacy_settings(sub) { // This is in the right panel. - const stream_privacy_btn = $(".change-stream-privacy"); + const $stream_privacy_btn = $(".change-stream-privacy"); if (sub.can_change_stream_permissions) { - stream_privacy_btn.show(); + $stream_privacy_btn.show(); } else { - stream_privacy_btn.hide(); + $stream_privacy_btn.hide(); } } export function update_notification_setting_checkbox(notification_name) { // This is in the right panel (Personal settings). - const stream_row = $("#manage_streams_container .stream-row.active"); - if (!stream_row.length) { + const $stream_row = $("#manage_streams_container .stream-row.active"); + if (!$stream_row.length) { return; } - const stream_id = stream_row.data("stream-id"); + const stream_id = $stream_row.data("stream-id"); $(`#${CSS.escape(notification_name)}_${CSS.escape(stream_id)}`).prop( "checked", stream_data.receives_notifications(stream_id, notification_name), @@ -143,18 +143,18 @@ export function update_stream_row_in_settings_tab(sub) { // "Subscribed" tab, otherwise if stream is not public hide // stream row under tab. if (stream_settings_ui.is_subscribed_stream_tab_active()) { - const sub_row = stream_settings_ui.row_for_stream_id(sub.stream_id); + const $sub_row = stream_settings_ui.row_for_stream_id(sub.stream_id); if (sub.subscribed) { - sub_row.removeClass("notdisplayed"); + $sub_row.removeClass("notdisplayed"); } else if (sub.invite_only || page_params.is_guest) { - sub_row.addClass("notdisplayed"); + $sub_row.addClass("notdisplayed"); } } } export function update_stream_subscription_type_text(sub) { // This is in the right panel. - const stream_settings = stream_settings_containers.get_edit_container(sub); + const $stream_settings = stream_settings_containers.get_edit_container(sub); const template_data = { ...sub, stream_post_policy_values: stream_data.stream_post_policy_values, @@ -162,7 +162,7 @@ export function update_stream_subscription_type_text(sub) { }; const html = render_stream_permission_description(template_data); if (hash_util.is_editing_stream(sub.stream_id)) { - stream_settings.find(".subscription-type-text").expectOne().html(html); + $stream_settings.find(".subscription-type-text").expectOne().html(html); } } @@ -172,35 +172,35 @@ export function update_add_subscriptions_elements(sub) { } // We are only concerned with the Subscribers tab for editing streams. - const add_subscribers_container = $(".edit_subscribers_for_stream .add_subscribers_container"); + const $add_subscribers_container = $(".edit_subscribers_for_stream .add_subscribers_container"); if (page_params.is_guest || page_params.realm_is_zephyr_mirror_realm) { // For guest users, we just hide the add_subscribers feature. - add_subscribers_container.hide(); + $add_subscribers_container.hide(); return; } // Otherwise, we adjust whether the widgets are disabled based on // whether this user is authorized to add subscribers. - const input_element = add_subscribers_container.find(".input").expectOne(); - const button_element = add_subscribers_container + const $input_element = $add_subscribers_container.find(".input").expectOne(); + const $button_element = $add_subscribers_container .find('button[name="add_subscriber"]') .expectOne(); const allow_user_to_add_subs = sub.can_add_subscribers; if (allow_user_to_add_subs) { - input_element.prop("disabled", false); - button_element.prop("disabled", false); - button_element.css("pointer-events", ""); - input_element.popover("destroy"); + $input_element.prop("disabled", false); + $button_element.prop("disabled", false); + $button_element.css("pointer-events", ""); + $input_element.popover("destroy"); } else { - input_element.prop("disabled", true); - button_element.prop("disabled", true); + $input_element.prop("disabled", true); + $button_element.prop("disabled", true); initialize_disable_btn_hint_popover( - add_subscribers_container, - input_element, - button_element, + $add_subscribers_container, + $input_element, + $button_element, $t({defaultMessage: "Only stream members can add users to a private stream"}), ); } diff --git a/static/js/submessage.js b/static/js/submessage.js index d9735b96ae..ac3e2c7caa 100644 --- a/static/js/submessage.js +++ b/static/js/submessage.js @@ -56,7 +56,7 @@ export function do_process_submessages(in_opts) { return; } - const row = in_opts.row; + const $row = in_opts.$row; // Right now, our only use of submessages is widgets. @@ -78,7 +78,7 @@ export function do_process_submessages(in_opts) { widget_type, extra_data: data.extra_data, events, - row, + $row, message, post_to_server, }); diff --git a/static/js/timerender.ts b/static/js/timerender.ts index 0a55e35a75..8fdcda8ef7 100644 --- a/static/js/timerender.ts +++ b/static/js/timerender.ts @@ -176,23 +176,23 @@ function maybe_add_update_list_entry(entry: UpdateEntry): void { } function render_date_span( - elem: JQuery, + $elem: JQuery, rendered_time: TimeRender, rendered_time_above?: TimeRender, ): JQuery { - elem.text(""); + $elem.text(""); if (rendered_time_above !== undefined) { - elem.append( + $elem.append( '', _.escape(rendered_time_above.time_str), '
    ', '', _.escape(rendered_time.time_str), ); - return elem; + return $elem; } - elem.append(_.escape(rendered_time.time_str)); - return elem.attr("data-tippy-content", rendered_time.formal_time_str); + $elem.append(_.escape(rendered_time.time_str)); + return $elem.attr("data-tippy-content", rendered_time.formal_time_str); } // Given an Date object 'time', return a DOM node that initially @@ -208,12 +208,12 @@ export function render_date(time: Date, time_above: Date | undefined, today: Dat const className = `timerender${next_timerender_id}`; next_timerender_id += 1; const rendered_time = render_now(time, today); - let node = $("").attr("class", className); + let $node = $("").attr("class", className); if (time_above !== undefined) { const rendered_time_above = render_now(time_above, today); - node = render_date_span(node, rendered_time, rendered_time_above); + $node = render_date_span($node, rendered_time, rendered_time_above); } else { - node = render_date_span(node, rendered_time); + $node = render_date_span($node, rendered_time); } maybe_add_update_list_entry({ needs_update: rendered_time.needs_update, @@ -221,7 +221,7 @@ export function render_date(time: Date, time_above: Date | undefined, today: Dat time, time_above, }); - return node; + return $node; } // Renders the timestamp returned by the Markdown syntax. @@ -249,16 +249,16 @@ export function update_timestamps(): void { for (const entry of to_process) { const className = entry.className; - const elements = $(`.${CSS.escape(className)}`); + const $elements = $(`.${CSS.escape(className)}`); // The element might not exist any more (because it // was in the zfilt table, or because we added // messages above it and re-collapsed). - if (elements.length > 0) { + if ($elements.length > 0) { const time = entry.time; const time_above = entry.time_above; const rendered_time = render_now(time, today); const rendered_time_above = time_above ? render_now(time_above, today) : undefined; - for (const element of elements) { + for (const element of $elements) { render_date_span($(element), rendered_time, rendered_time_above); } maybe_add_update_list_entry({ diff --git a/static/js/tippyjs.js b/static/js/tippyjs.js index 12a9c17e24..c255b3163a 100644 --- a/static/js/tippyjs.js +++ b/static/js/tippyjs.js @@ -73,9 +73,9 @@ export function initialize() { target: ".message_reaction, .message_reactions .reaction_button", placement: "bottom", onShow(instance) { - const elem = $(instance.reference); + const $elem = $(instance.reference); if (!instance.reference.classList.contains("reaction_button")) { - const local_id = elem.attr("data-reaction-id"); + const local_id = $elem.attr("data-reaction-id"); const message_id = rows.get_message_id(instance.reference); const title = reactions.get_reaction_title_data(message_id, local_id); instance.setContent(title); @@ -85,7 +85,7 @@ export function initialize() { // are still active. // We target the message table and check for removal of it, it's children // and the reactions individually down in the subtree. - const target_node = elem.parents(".message_table.focused_table").get(0); + const target_node = $elem.parents(".message_table.focused_table").get(0); if (!target_node) { // The `reaction` was removed from DOM before we reached here. // In that case, we simply hide the tooltip. @@ -96,9 +96,9 @@ export function initialize() { } const nodes_to_check_for_removal = [ - elem.parents(".recipient_row").get(0), - elem.parents(".message_reactions").get(0), - elem.get(0), + $elem.parents(".recipient_row").get(0), + $elem.parents(".message_reactions").get(0), + $elem.get(0), ]; const config = {attributes: false, childList: true, subtree: true}; @@ -146,8 +146,8 @@ export function initialize() { delay: [300, 20], onShow(instance) { // Handle dynamic "starred messages" and "edit" widgets. - const elem = $(instance.reference); - let content = elem.attr("data-tippy-content"); + const $elem = $(instance.reference); + let content = $elem.attr("data-tippy-content"); if (content === undefined) { // Tippy cannot get the content for message edit button // as it is dynamically inserted based on editability. @@ -155,8 +155,8 @@ export function initialize() { // content from it. // // TODO: Change the template structure so logic is unnecessary. - const edit_button = elem.find("i.edit_content_button"); - content = edit_button.attr("data-tippy-content"); + const $edit_button = $elem.find("i.edit_content_button"); + content = $edit_button.attr("data-tippy-content"); } instance.setContent(content); @@ -175,9 +175,9 @@ export function initialize() { target: ".message_table .message_time", 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_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); instance.setContent(timerender.get_full_datetime(time)); }, diff --git a/static/js/todo_widget.js b/static/js/todo_widget.js index b8d7480309..f4bff874bf 100644 --- a/static/js/todo_widget.js +++ b/static/js/todo_widget.js @@ -158,7 +158,7 @@ export class TaskData { } export function activate(opts) { - const elem = opts.elem; + const $elem = opts.$elem; const callback = opts.callback; const task_data = new TaskData({ @@ -167,24 +167,24 @@ export function activate(opts) { function render() { const html = render_widgets_todo_widget(); - elem.html(html); + $elem.html(html); - elem.find("button.add-task").on("click", (e) => { + $elem.find("button.add-task").on("click", (e) => { e.stopPropagation(); - elem.find(".widget-error").text(""); - const task = elem.find("input.add-task").val().trim(); - const desc = elem.find("input.add-desc").val().trim(); + $elem.find(".widget-error").text(""); + const task = $elem.find("input.add-task").val().trim(); + const desc = $elem.find("input.add-desc").val().trim(); if (task === "") { return; } - elem.find(".add-task").val("").trigger("focus"); - elem.find(".add-desc").val("").trigger("focus"); + $elem.find(".add-task").val("").trigger("focus"); + $elem.find(".add-desc").val("").trigger("focus"); const task_exists = task_data.name_in_use(task); if (task_exists) { - elem.find(".widget-error").text($t({defaultMessage: "Task already exists"})); + $elem.find(".widget-error").text($t({defaultMessage: "Task already exists"})); return; } @@ -196,10 +196,10 @@ export function activate(opts) { function render_results() { const widget_data = task_data.get_widget_data(); const html = render_widgets_todo_widget_tasks(widget_data); - elem.find("ul.todo-widget").html(html); - elem.find(".widget-error").text(""); + $elem.find("ul.todo-widget").html(html); + $elem.find(".widget-error").text(""); - elem.find("input.task").on("click", (e) => { + $elem.find("input.task").on("click", (e) => { e.stopPropagation(); if (page_params.is_spectator) { @@ -219,7 +219,7 @@ export function activate(opts) { }); } - elem.handle_events = function (events) { + $elem.handle_events = function (events) { for (const event of events) { task_data.handle_event(event.sender_id, event.data); } diff --git a/static/js/top_left_corner.js b/static/js/top_left_corner.js index 6325586cc5..d950466526 100644 --- a/static/js/top_left_corner.js +++ b/static/js/top_left_corner.js @@ -7,25 +7,25 @@ import * as ui_util from "./ui_util"; import * as unread_ui from "./unread_ui"; export function update_starred_count(count) { - const starred_li = $(".top_left_starred_messages"); - ui_util.update_unread_count_in_dom(starred_li, count); + const $starred_li = $(".top_left_starred_messages"); + ui_util.update_unread_count_in_dom($starred_li, count); } export function update_dom_with_unread_counts(counts) { // Note that "Private messages" counts are handled in pm_list.js. // mentioned/home have simple integer counts - const mentioned_li = $(".top_left_mentions"); - const home_li = $(".top_left_all_messages"); + const $mentioned_li = $(".top_left_mentions"); + const $home_li = $(".top_left_all_messages"); - ui_util.update_unread_count_in_dom(mentioned_li, counts.mentioned_message_count); - ui_util.update_unread_count_in_dom(home_li, counts.home_unread_messages); + ui_util.update_unread_count_in_dom($mentioned_li, counts.mentioned_message_count); + ui_util.update_unread_count_in_dom($home_li, counts.home_unread_messages); - unread_ui.animate_mention_changes(mentioned_li, counts.mentioned_message_count); + unread_ui.animate_mention_changes($mentioned_li, counts.mentioned_message_count); } -function remove(elem) { - elem.removeClass("active-filter active-sub-filter"); +function remove($elem) { + $elem.removeClass("active-filter active-sub-filter"); } function deselect_top_left_corner_items() { @@ -62,26 +62,26 @@ export function handle_narrow_activated(filter) { let ops; let filter_name; - let filter_li; + let $filter_li; // TODO: handle confused filters like "in:all stream:foo" ops = filter.operands("in"); if (ops.length >= 1) { filter_name = ops[0]; if (filter_name === "home") { - filter_li = $(".top_left_all_messages"); - filter_li.addClass("active-filter"); + $filter_li = $(".top_left_all_messages"); + $filter_li.addClass("active-filter"); } } ops = filter.operands("is"); if (ops.length >= 1) { filter_name = ops[0]; if (filter_name === "starred") { - filter_li = $(".top_left_starred_messages"); - filter_li.addClass("active-filter"); + $filter_li = $(".top_left_starred_messages"); + $filter_li.addClass("active-filter"); } else if (filter_name === "mentioned") { - filter_li = $(".top_left_mentions"); - filter_li.addClass("active-filter"); + $filter_li = $(".top_left_mentions"); + $filter_li.addClass("active-filter"); } } @@ -96,8 +96,8 @@ export function handle_narrow_deactivated() { deselect_top_left_corner_items(); pm_list.close(); - const filter_li = $(".top_left_all_messages"); - filter_li.addClass("active-filter"); + const $filter_li = $(".top_left_all_messages"); + $filter_li.addClass("active-filter"); } export function narrow_to_recent_topics() { diff --git a/static/js/topic_list.js b/static/js/topic_list.js index 7f475340e2..0e2575608e 100644 --- a/static/js/topic_list.js +++ b/static/js/topic_list.js @@ -130,8 +130,8 @@ function filter_topics_li() { export class TopicListWidget { prior_dom = undefined; - constructor(parent_elem, my_stream_id) { - this.parent_elem = parent_elem; + constructor($parent_elem, my_stream_id) { + this.$parent_elem = $parent_elem; this.my_stream_id = my_stream_id; this.topic_search_text = ""; this.topic_search_focused_before_build = true; @@ -170,7 +170,7 @@ export class TopicListWidget { } get_parent() { - return this.parent_elem; + return this.$parent_elem; } get_stream_id() { @@ -182,15 +182,15 @@ export class TopicListWidget { } update_topic_search_input() { - const input = this.parent_elem.find("#filter-topic-input"); - if (input.length) { + const $input = this.$parent_elem.find("#filter-topic-input"); + if ($input.length) { // Restore topic search text saved in remove() // after the element was rerendered. - input.val(this.topic_search_text); + $input.val(this.topic_search_text); if (this.topic_search_focused_before_build) { // Don't focus topic search if it wasn't focused before. // This avoids unwanted change of focus. - input.trigger("focus"); + $input.trigger("focus"); } // set up display of clear(x) button. @@ -202,7 +202,7 @@ export class TopicListWidget { // set up event handlers. const rebuild_list = () => this.build(); - input.on("input", rebuild_list); + $input.on("input", rebuild_list); } } @@ -211,9 +211,9 @@ export class TopicListWidget { // the input value lazily before removing old elements. This // is a workaround for the quirk that the filter input is part // of the region that we rerender. - const input = this.parent_elem.find("#filter-topic-input"); - if (input.length) { - this.update_topic_search_text(input.val()); + const $input = this.$parent_elem.find("#filter-topic-input"); + if ($input.length) { + this.update_topic_search_text($input.val()); // Only set focus on search input if it was focused before the update. this.topic_search_focused_before_build = document.activeElement.id === "filter-topic-input"; @@ -221,7 +221,7 @@ export class TopicListWidget { // Clear the topic search input when zooming out. this.update_topic_search_text(""); } - this.parent_elem.find(".topic-list").remove(); + this.$parent_elem.find(".topic-list").remove(); this.prior_dom = undefined; } @@ -230,11 +230,11 @@ export class TopicListWidget { const replace_content = (html) => { this.remove(); - this.parent_elem.append(html); + this.$parent_elem.append(html); this.update_topic_search_input(); }; - const find = () => this.parent_elem.find(".topic-list"); + const find = () => this.$parent_elem.find(".topic-list"); vdom.update(replace_content, find, new_dom, this.prior_dom); @@ -244,10 +244,10 @@ export class TopicListWidget { export function clear_topic_search(e) { e.stopPropagation(); - const input = $("#filter-topic-input"); - if (input.length) { - input.val(""); - input.trigger("blur"); + const $input = $("#filter-topic-input"); + if ($input.length) { + $input.val(""); + $input.trigger("blur"); // Since this changes the contents of the search input, we // need to rerender the topic list. @@ -278,11 +278,11 @@ export function get_stream_li() { return undefined; } - const stream_li = widgets[0].get_parent(); - return stream_li; + const $stream_li = widgets[0].get_parent(); + return $stream_li; } -export function rebuild(stream_li, stream_id) { +export function rebuild($stream_li, stream_id) { const active_widget = active_widgets.get(stream_id); if (active_widget) { @@ -291,7 +291,7 @@ export function rebuild(stream_li, stream_id) { } clear(); - const widget = new TopicListWidget(stream_li, stream_id); + const widget = new TopicListWidget($stream_li, stream_id); widget.build(); active_widgets.set(stream_id, widget); @@ -337,11 +337,11 @@ export function zoom_in() { } export function get_topic_search_term() { - const filter = $("#filter-topic-input"); - if (filter.val() === undefined) { + const $filter = $("#filter-topic-input"); + if ($filter.val() === undefined) { return ""; } - return filter.val().trim(); + return $filter.val().trim(); } export function initialize() { @@ -356,8 +356,8 @@ export function initialize() { // In a more componentized world, we would delegate some // of this stuff back up to our parents. - const stream_row = $(e.target).parents(".narrow-filter"); - const stream_id = Number.parseInt(stream_row.attr("data-stream-id"), 10); + const $stream_row = $(e.target).parents(".narrow-filter"); + const stream_id = Number.parseInt($stream_row.attr("data-stream-id"), 10); const sub = sub_store.get(stream_id); const topic = $(e.target).parents("li").attr("data-topic-name"); diff --git a/static/js/topic_zoom.js b/static/js/topic_zoom.js index 45953356b6..375dc48089 100644 --- a/static/js/topic_zoom.js +++ b/static/js/topic_zoom.js @@ -23,29 +23,29 @@ function zoom_in() { } export function zoom_out() { - const stream_li = topic_list.get_stream_li(); + const $stream_li = topic_list.get_stream_li(); popovers.hide_all_except_sidebars(); topic_list.zoom_out(); stream_list.zoom_out_topics(); - if (stream_li) { - stream_list.scroll_stream_into_view(stream_li); + if ($stream_li) { + stream_list.scroll_stream_into_view($stream_li); } zoomed_in = false; } export function clear_topics() { - const stream_li = topic_list.get_stream_li(); + const $stream_li = topic_list.get_stream_li(); topic_list.close(); if (zoomed_in) { stream_list.zoom_out_topics(); - if (stream_li) { - stream_list.scroll_stream_into_view(stream_li); + if ($stream_li) { + stream_list.scroll_stream_into_view($stream_li); } } diff --git a/static/js/ui.js b/static/js/ui.js index 3f63395b59..4e40f8ec14 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -7,8 +7,8 @@ import * as message_lists from "./message_lists"; // What, if anything, obscures the home tab? -export function replace_emoji_with_text(element) { - element.find(".emoji").replaceWith(function () { +export function replace_emoji_with_text($element) { + $element.find(".emoji").replaceWith(function () { if ($(this).is("img")) { return $(this).attr("alt"); } @@ -16,17 +16,17 @@ export function replace_emoji_with_text(element) { }); } -export function get_content_element(element_selector) { - const element = element_selector.expectOne()[0]; +export function get_content_element($element) { + const element = $element.expectOne()[0]; const sb = SimpleBar.instances.get(element); if (sb) { return $(sb.getContentElement()); } - return element_selector; + return $element; } -export function get_scroll_element(element_selector) { - const element = element_selector.expectOne()[0]; +export function get_scroll_element($element) { + const element = $element.expectOne()[0]; const sb = SimpleBar.instances.get(element); if (sb) { return $(sb.getScrollElement()); @@ -35,11 +35,11 @@ export function get_scroll_element(element_selector) { // Create the SimpleBar early in case we need to add event listeners. return $(new SimpleBar(element).getScrollElement()); } - return element_selector; + return $element; } -export function reset_scrollbar(element_selector) { - const element = element_selector.expectOne()[0]; +export function reset_scrollbar($element) { + const element = $element.expectOne()[0]; const sb = SimpleBar.instances.get(element); if (sb) { sb.getScrollElement().scrollTop = 0; @@ -53,13 +53,13 @@ function update_message_in_all_views(message_id, callback) { if (list === undefined) { continue; } - const row = list.get_row(message_id); - if (row === undefined) { + const $row = list.get_row(message_id); + if ($row === undefined) { // The row may not exist, e.g. if you do an action on a message in // a narrowed view continue; } - callback(row); + callback($row); } } @@ -68,18 +68,18 @@ export function update_starred_view(message_id, new_value) { // Avoid a full re-render, but update the star in each message // table in which it is visible. - update_message_in_all_views(message_id, (row) => { - const elt = row.find(".star"); - const star_container = row.find(".star_container"); + update_message_in_all_views(message_id, ($row) => { + const $elt = $row.find(".star"); + const $star_container = $row.find(".star_container"); if (starred) { - elt.addClass("fa-star").removeClass("fa-star-o"); - star_container.removeClass("empty-star"); + $elt.addClass("fa-star").removeClass("fa-star-o"); + $star_container.removeClass("empty-star"); } else { - elt.removeClass("fa-star").addClass("fa-star-o"); - star_container.addClass("empty-star"); + $elt.removeClass("fa-star").addClass("fa-star-o"); + $star_container.addClass("empty-star"); } const title_state = starred ? $t({defaultMessage: "Unstar"}) : $t({defaultMessage: "Star"}); - star_container.attr( + $star_container.attr( "data-tippy-content", $t( {defaultMessage: "{starred_status} this message (Ctrl + s)"}, @@ -91,17 +91,17 @@ export function update_starred_view(message_id, new_value) { export function show_message_failed(message_id, failed_msg) { // Failed to send message, so display inline retry/cancel - update_message_in_all_views(message_id, (row) => { - const failed_div = row.find(".message_failed"); - failed_div.toggleClass("notvisible", false); - failed_div.find(".failed_text").attr("title", failed_msg); + update_message_in_all_views(message_id, ($row) => { + const $failed_div = $row.find(".message_failed"); + $failed_div.toggleClass("notvisible", false); + $failed_div.find(".failed_text").attr("title", failed_msg); }); } export function show_failed_message_success(message_id) { // Previously failed message succeeded - update_message_in_all_views(message_id, (row) => { - row.find(".message_failed").toggleClass("notvisible", true); + update_message_in_all_views(message_id, ($row) => { + $row.find(".message_failed").toggleClass("notvisible", true); }); } diff --git a/static/js/ui_init.js b/static/js/ui_init.js index 4157ea61c6..b15da43cad 100644 --- a/static/js/ui_init.js +++ b/static/js/ui_init.js @@ -110,24 +110,24 @@ import * as user_status_ui from "./user_status_ui"; because we want to reserve space for the email address. This avoids things jumping around slightly when the email address is shown. */ -let current_message_hover; +let $current_message_hover; function message_unhover() { - if (current_message_hover === undefined) { + if ($current_message_hover === undefined) { return; } - current_message_hover.find("span.edit_content").html(""); - current_message_hover = undefined; + $current_message_hover.find("span.edit_content").html(""); + $current_message_hover = undefined; } -function message_hover(message_row) { - const id = rows.id(message_row); - if (current_message_hover && rows.id(current_message_hover) === id) { +function message_hover($message_row) { + const id = rows.id($message_row); + if ($current_message_hover && rows.id($current_message_hover) === id) { return; } - const message = message_lists.current.get(rows.id(message_row)); + const message = message_lists.current.get(rows.id($message_row)); message_unhover(); - current_message_hover = message_row; + $current_message_hover = $message_row; // Locally echoed messages have !is_topic_editable and thus go // through this code path. @@ -143,7 +143,7 @@ function message_hover(message_row) { is_editable: is_message_editable && !message.status_message, msg_id: id, }; - message_row.find(".edit_content").html(render_edit_content_button(args)); + $message_row.find(".edit_content").html(render_edit_content_button(args)); } function initialize_left_sidebar() { @@ -168,21 +168,21 @@ function initialize_right_sidebar() { } $("#user_presences").on("mouseenter", ".user_sidebar_entry", (e) => { - const status_emoji = $(e.target).closest(".user_sidebar_entry").find("img.status_emoji"); - if (status_emoji.length) { - const animated_url = status_emoji.data("animated-url"); + const $status_emoji = $(e.target).closest(".user_sidebar_entry").find("img.status_emoji"); + if ($status_emoji.length) { + const animated_url = $status_emoji.data("animated-url"); if (animated_url) { - status_emoji.attr("src", animated_url); + $status_emoji.attr("src", animated_url); } } }); $("#user_presences").on("mouseleave", ".user_sidebar_entry", (e) => { - const status_emoji = $(e.target).closest(".user_sidebar_entry").find("img.status_emoji"); - if (status_emoji.length) { - const still_url = status_emoji.data("still-url"); + const $status_emoji = $(e.target).closest(".user_sidebar_entry").find("img.status_emoji"); + if ($status_emoji.length) { + const still_url = $status_emoji.data("still-url"); if (still_url) { - status_emoji.attr("src", still_url); + $status_emoji.attr("src", still_url); } } }); @@ -237,7 +237,7 @@ export function initialize_kitchen_sink_stuff() { message_viewport.set_last_movement_direction(delta); }, 50); - message_viewport.message_pane.on("wheel", (e) => { + message_viewport.$message_pane.on("wheel", (e) => { const delta = e.originalEvent.deltaY; if (!overlays.is_active() && !recent_topics_util.is_visible()) { // In the message view, we use a throttled mousewheel handler. @@ -255,13 +255,13 @@ export function initialize_kitchen_sink_stuff() { // element is already at the top or bottom. Otherwise we get a // new scroll event on the parent (?). $(".modal-body, .scrolling_list, input, textarea").on("wheel", function (e) { - const self = ui.get_scroll_element($(this)); - const scroll = self.scrollTop(); + const $self = ui.get_scroll_element($(this)); + const scroll = $self.scrollTop(); const delta = e.originalEvent.deltaY; // The -1 fudge factor is important here due to rounding errors. Better // to err on the side of not scrolling. - const max_scroll = self.prop("scrollHeight") - self.innerHeight() - 1; + const max_scroll = $self.prop("scrollHeight") - $self.innerHeight() - 1; e.stopPropagation(); if ((delta < 0 && scroll <= 0) || (delta > 0 && scroll >= max_scroll)) { @@ -299,8 +299,8 @@ export function initialize_kitchen_sink_stuff() { } $("#main_div").on("mouseover", ".message_table .message_row", function () { - const row = $(this).closest(".message_row"); - message_hover(row); + const $row = $(this).closest(".message_row"); + message_hover($row); }); $("#main_div").on("mouseleave", ".message_table .message_row", () => { @@ -308,13 +308,13 @@ export function initialize_kitchen_sink_stuff() { }); $("#main_div").on("mouseover", ".sender_info_hover", function () { - const row = $(this).closest(".message_row"); - row.addClass("sender_name_hovered"); + const $row = $(this).closest(".message_row"); + $row.addClass("sender_name_hovered"); }); $("#main_div").on("mouseout", ".sender_info_hover", function () { - const row = $(this).closest(".message_row"); - row.removeClass("sender_name_hovered"); + const $row = $(this).closest(".message_row"); + $row.removeClass("sender_name_hovered"); }); $("#main_div").on("mouseenter", ".youtube-video a", function () { @@ -326,21 +326,21 @@ export function initialize_kitchen_sink_stuff() { }); $("#main_div").on("mouseenter", ".embed-video a", function () { - const elem = $(this); + const $elem = $(this); // Set image height and css vars for play button position, if not done already - const setPosition = !elem.data("entered-before"); + const setPosition = !$elem.data("entered-before"); if (setPosition) { - const imgW = elem.find("img")[0].width; - const imgH = elem.find("img")[0].height; + const imgW = $elem.find("img")[0].width; + const imgH = $elem.find("img")[0].height; // Ensure height doesn't change on mouse enter - elem.css("height", `${imgH}px`); + $elem.css("height", `${imgH}px`); // variables to set play button position const marginLeft = (imgW - 30) / 2; const marginTop = (imgH - 26) / 2; - elem.css("--margin-left", `${marginLeft}px`).css("--margin-top", `${marginTop}px`); - elem.data("entered-before", true); + $elem.css("--margin-left", `${marginLeft}px`).css("--margin-top", `${marginTop}px`); + $elem.data("entered-before", true); } - elem.addClass("fa fa-play"); + $elem.addClass("fa fa-play"); }); $("#main_div").on("mouseleave", ".embed-video a", function () { @@ -375,13 +375,13 @@ export function initialize_kitchen_sink_stuff() { // If the message list is empty, don't do anything return; } - const row = event.msg_list.get_row(event.id); + const $row = event.msg_list.get_row(event.id); $(".selected_message").removeClass("selected_message"); - row.addClass("selected_message"); + $row.addClass("selected_message"); if (event.then_scroll) { - if (row.length === 0) { - const row_from_dom = message_lists.current.get_row(event.id); + if ($row.length === 0) { + const $row_from_dom = message_lists.current.get_row(event.id); const messages = event.msg_list.all_messages(); blueslip.debug("message_selected missing selected row", { previously_selected_id: event.previously_selected_id, @@ -398,7 +398,7 @@ export function initialize_kitchen_sink_stuff() { .map((message) => message.id) .sort(), ), - found_in_dom: row_from_dom.length, + found_in_dom: $row_from_dom.length, }); } if (event.target_scroll_offset !== undefined) { @@ -407,7 +407,7 @@ export function initialize_kitchen_sink_stuff() { // Scroll to place the message within the current view; // but if this is the initial placement of the pointer, // just place it in the very center - message_viewport.recenter_view(row, { + message_viewport.recenter_view($row, { from_scroll: event.from_scroll, force_center: event.previously_selected_id === -1, }); diff --git a/static/js/ui_report.ts b/static/js/ui_report.ts index 78ae990dd0..6d5233d7ff 100644 --- a/static/js/ui_report.ts +++ b/static/js/ui_report.ts @@ -12,13 +12,13 @@ import {$t} from "./i18n"; export function message( response_html: string, - status_box: JQuery, + $status_box: JQuery, cls = "alert", remove_after?: number, ): void { // Note we use html() below, since we can rely on our callers escaping HTML // via $t_html when interpolating data. - status_box + $status_box .removeClass(common.status_classes) .addClass(cls) .html(response_html) @@ -26,10 +26,10 @@ export function message( .fadeTo(0, 1); if (remove_after !== undefined) { setTimeout(() => { - status_box.fadeOut(400); + $status_box.fadeOut(400); }, remove_after); } - status_box.addClass("show"); + $status_box.addClass("show"); } export function error( @@ -60,8 +60,8 @@ export function client_error( message(response_html, status_box, "alert-error", remove_after); } -export function success(response_html: string, status_box: JQuery, remove_after?: number): void { - message(response_html, status_box, "alert-success", remove_after); +export function success(response_html: string, $status_box: JQuery, remove_after?: number): void { + message(response_html, $status_box, "alert-success", remove_after); } export function generic_embed_error(error_html: string): void { @@ -73,12 +73,12 @@ export function generic_embed_error(error_html: string): void { ); } -export function generic_row_button_error(xhr: JQuery.jqXHR, btn: JQuery): void { +export function generic_row_button_error(xhr: JQuery.jqXHR, $btn: JQuery): void { if (xhr.status >= 400 && xhr.status < 500) { const $error = $("

    ").addClass("text-error").text(JSON.parse(xhr.responseText).msg); - btn.closest("td").empty().append($error); + $btn.closest("td").empty().append($error); } else { - btn.text($t({defaultMessage: "Failed!"})); + $btn.text($t({defaultMessage: "Failed!"})); } } diff --git a/static/js/ui_util.ts b/static/js/ui_util.ts index 2f8a04c7b3..dad8d39530 100644 --- a/static/js/ui_util.ts +++ b/static/js/ui_util.ts @@ -34,19 +34,19 @@ export function convert_enter_to_click(e: JQuery.KeyDownEvent): void { } } -export function update_unread_count_in_dom(unread_count_elem: JQuery, count: number): void { +export function update_unread_count_in_dom($unread_count_elem: JQuery, count: number): void { // This function is used to update unread count in top left corner // elements. - const unread_count_span = unread_count_elem.find(".unread_count"); + const $unread_count_span = $unread_count_elem.find(".unread_count"); if (count === 0) { - unread_count_span.hide(); - unread_count_span.text(""); + $unread_count_span.hide(); + $unread_count_span.text(""); return; } - unread_count_span.show(); - unread_count_span.text(count); + $unread_count_span.show(); + $unread_count_span.text(count); } /** diff --git a/static/js/unread_ui.js b/static/js/unread_ui.js index cd783403fb..461a712939 100644 --- a/static/js/unread_ui.js +++ b/static/js/unread_ui.js @@ -15,38 +15,38 @@ import {notify_server_messages_read} from "./unread_ops"; let last_mention_count = 0; -function do_new_messages_animation(li) { - li.addClass("new_messages"); +function do_new_messages_animation($li) { + $li.addClass("new_messages"); function mid_animation() { - li.removeClass("new_messages"); - li.addClass("new_messages_fadeout"); + $li.removeClass("new_messages"); + $li.addClass("new_messages_fadeout"); } function end_animation() { - li.removeClass("new_messages_fadeout"); + $li.removeClass("new_messages_fadeout"); } setTimeout(mid_animation, 3000); setTimeout(end_animation, 6000); } -export function animate_mention_changes(li, new_mention_count) { +export function animate_mention_changes($li, new_mention_count) { if (new_mention_count > last_mention_count) { - do_new_messages_animation(li); + do_new_messages_animation($li); } last_mention_count = new_mention_count; } -export function set_count_toggle_button(elem, count) { +export function set_count_toggle_button($elem, count) { if (count === 0) { - if (elem.is(":animated")) { - return elem.stop(true, true).hide(); + if ($elem.is(":animated")) { + return $elem.stop(true, true).hide(); } - return elem.hide(500); + return $elem.hide(500); } else if (count > 0 && count < 1000) { - elem.show(500); - return elem.text(count); + $elem.show(500); + return $elem.text(count); } - elem.show(500); - return elem.text("1k+"); + $elem.show(500); + return $elem.text("1k+"); } export function update_unread_counts() { diff --git a/static/js/upload.js b/static/js/upload.js index f52455ca7c..620f46a928 100644 --- a/static/js/upload.js +++ b/static/js/upload.js @@ -11,9 +11,9 @@ import {$t} from "./i18n"; import {page_params} from "./page_params"; // Show the upload button only if the browser supports it. -export function feature_check(upload_button) { +export function feature_check($upload_button) { if (window.XMLHttpRequest && new window.XMLHttpRequest().upload) { - upload_button.removeClass("notdisplayed"); + $upload_button.removeClass("notdisplayed"); } } @@ -209,17 +209,17 @@ export function setup_upload(config) { event.target.value = ""; }); - const drag_drop_container = get_item("drag_drop_container", config); - drag_drop_container.on("dragover", (event) => event.preventDefault()); - drag_drop_container.on("dragenter", (event) => event.preventDefault()); + const $drag_drop_container = get_item("drag_drop_container", config); + $drag_drop_container.on("dragover", (event) => event.preventDefault()); + $drag_drop_container.on("dragenter", (event) => event.preventDefault()); - drag_drop_container.on("drop", (event) => { + $drag_drop_container.on("drop", (event) => { event.preventDefault(); const files = event.originalEvent.dataTransfer.files; upload_files(uppy, config, files); }); - drag_drop_container.on("paste", (event) => { + $drag_drop_container.on("paste", (event) => { const clipboard_data = event.clipboardData || event.originalEvent.clipboardData; if (!clipboard_data) { return; diff --git a/static/js/upload_widget.ts b/static/js/upload_widget.ts index ca175597ec..f416173d4f 100644 --- a/static/js/upload_widget.ts +++ b/static/js/upload_widget.ts @@ -16,46 +16,46 @@ export function build_widget( // function returns a jQuery file input object get_file_input: () => JQuery, // jQuery object to show file name - file_name_field: JQuery, + $file_name_field: JQuery, // jQuery object for error text - input_error: JQuery, + $input_error: JQuery, // jQuery button to clear last upload choice - clear_button: JQuery, + $clear_button: JQuery, // jQuery button to open file dialog - upload_button: JQuery, - preview_text?: JQuery, - preview_image?: JQuery, + $upload_button: JQuery, + $preview_text?: JQuery, + $preview_image?: JQuery, max_file_upload_size = default_max_file_size, ): {clear(): void; close(): void} { function accept(file: File): void { - file_name_field.text(file.name); - input_error.hide(); - clear_button.show(); - upload_button.hide(); - if (preview_text !== undefined && preview_image !== undefined) { + $file_name_field.text(file.name); + $input_error.hide(); + $clear_button.show(); + $upload_button.hide(); + if ($preview_text !== undefined && $preview_image !== undefined) { const image_blob = URL.createObjectURL(file); - preview_image.attr("src", image_blob); - preview_text.show(); + $preview_image.attr("src", image_blob); + $preview_text.show(); } } function clear(): void { - const control = get_file_input(); - control.val(""); - file_name_field.text(""); - clear_button.hide(); - upload_button.show(); - if (preview_text !== undefined) { - preview_text.hide(); + const $control = get_file_input(); + $control.val(""); + $file_name_field.text(""); + $clear_button.hide(); + $upload_button.show(); + if ($preview_text !== undefined) { + $preview_text.hide(); } } - clear_button.on("click", (e) => { + $clear_button.on("click", (e) => { clear(); e.preventDefault(); }); - upload_button.on("drop", (e) => { + $upload_button.on("drop", (e) => { const files = e.originalEvent?.dataTransfer?.files; if (files === null || files === undefined || files.length === 0) { return false; @@ -68,41 +68,41 @@ export function build_widget( get_file_input().attr("accept", supported_types.toString()); get_file_input().on("change", (e) => { if (e.target.files?.length === 0) { - input_error.hide(); + $input_error.hide(); } else if (e.target.files?.length === 1) { const file = e.target.files[0]; if (file.size > max_file_upload_size * 1024 * 1024) { - input_error.text( + $input_error.text( $t( {defaultMessage: "File size must be at most {max_file_size} MiB."}, {max_file_size: max_file_upload_size}, ), ); - input_error.show(); + $input_error.show(); clear(); } else if (!is_image_format(file)) { - input_error.text($t({defaultMessage: "File type is not supported."})); - input_error.show(); + $input_error.text($t({defaultMessage: "File type is not supported."})); + $input_error.show(); clear(); } else { accept(file); } } else { - input_error.text($t({defaultMessage: "Please just upload one file."})); + $input_error.text($t({defaultMessage: "Please just upload one file."})); } }); - upload_button.on("click", (e) => { + $upload_button.on("click", (e) => { get_file_input().trigger("click"); e.preventDefault(); }); function close(): void { clear(); - clear_button.off("click"); - upload_button.off("drop"); + $clear_button.off("click"); + $upload_button.off("drop"); get_file_input().off("change"); - upload_button.off("click"); + $upload_button.off("click"); } return { @@ -119,11 +119,11 @@ export function build_direct_upload_widget( // function returns a jQuery file input object get_file_input: () => JQuery, // jQuery object for error text - input_error: JQuery, + $input_error: JQuery, // jQuery button to open file dialog - upload_button: JQuery, + $upload_button: JQuery, upload_function: ( - file_input: JQuery, + $file_input: JQuery, night: boolean | null, icon: boolean, ) => void, @@ -131,11 +131,11 @@ export function build_direct_upload_widget( ): void { // default value of max uploaded file size function accept(): void { - input_error.hide(); - const realm_logo_section = upload_button.closest(".image_upload_widget"); - if (realm_logo_section.attr("id") === "realm-night-logo-upload-widget") { + $input_error.hide(); + const $realm_logo_section = $upload_button.closest(".image_upload_widget"); + if ($realm_logo_section.attr("id") === "realm-night-logo-upload-widget") { upload_function(get_file_input(), true, false); - } else if (realm_logo_section.attr("id") === "realm-day-logo-upload-widget") { + } else if ($realm_logo_section.attr("id") === "realm-day-logo-upload-widget") { upload_function(get_file_input(), false, false); } else { upload_function(get_file_input(), null, true); @@ -143,11 +143,11 @@ export function build_direct_upload_widget( } function clear(): void { - const control = get_file_input(); - control.val(""); + const $control = get_file_input(); + $control.val(""); } - upload_button.on("drop", (e) => { + $upload_button.on("drop", (e) => { const files = e.originalEvent?.dataTransfer?.files; if (files === null || files === undefined || files.length === 0) { return false; @@ -160,31 +160,31 @@ export function build_direct_upload_widget( get_file_input().attr("accept", supported_types.toString()); get_file_input().on("change", (e) => { if (e.target.files?.length === 0) { - input_error.hide(); + $input_error.hide(); } else if (e.target.files?.length === 1) { const file = e.target.files[0]; if (file.size > max_file_upload_size * 1024 * 1024) { - input_error.text( + $input_error.text( $t( {defaultMessage: "File size must be at most {max_file_size} MiB."}, {max_file_size: max_file_upload_size}, ), ); - input_error.show(); + $input_error.show(); clear(); } else if (!is_image_format(file)) { - input_error.text($t({defaultMessage: "File type is not supported."})); - input_error.show(); + $input_error.text($t({defaultMessage: "File type is not supported."})); + $input_error.show(); clear(); } else { accept(); } } else { - input_error.text($t({defaultMessage: "Please just upload one file."})); + $input_error.text($t({defaultMessage: "Please just upload one file."})); } }); - upload_button.on("click", (e) => { + $upload_button.on("click", (e) => { get_file_input().trigger("click"); e.preventDefault(); }); diff --git a/static/js/user_pill.js b/static/js/user_pill.js index 255bb74a0b..ba5a7ed642 100644 --- a/static/js/user_pill.js +++ b/static/js/user_pill.js @@ -130,9 +130,9 @@ export function append_user(user, pills) { } } -export function create_pills(pill_container, pill_config) { +export function create_pills($pill_container, pill_config) { const pills = input_pill.create({ - container: pill_container, + $container: $pill_container, pill_config, create_item_from_text: create_item_from_email, get_text_from_item: get_email_from_item, diff --git a/static/js/user_profile.js b/static/js/user_profile.js index 863382460d..9807afefed 100644 --- a/static/js/user_profile.js +++ b/static/js/user_profile.js @@ -56,33 +56,33 @@ function format_user_group_list_item(group) { function render_user_stream_list(streams, user) { streams.sort(compare_by_name); - const container = $("#user-profile-modal .user-stream-list"); - container.empty(); - ListWidget.create(container, streams, { + const $container = $("#user-profile-modal .user-stream-list"); + $container.empty(); + ListWidget.create($container, streams, { name: `user-${user.user_id}-stream-list`, modifier(item) { return format_user_stream_list_item(item, user); }, filter: { - element: $("#user-profile-streams-tab .stream-search"), + $element: $("#user-profile-streams-tab .stream-search"), predicate(item, value) { return item && item.name.toLocaleLowerCase().includes(value); }, }, - simplebar_container: $("#user-profile-modal .modal__body"), + $simplebar_container: $("#user-profile-modal .modal__body"), }); } function render_user_group_list(groups, user) { groups.sort(compare_by_name); - const container = $("#user-profile-modal .user-group-list"); - container.empty(); - ListWidget.create(container, groups, { + const $container = $("#user-profile-modal .user-group-list"); + $container.empty(); + ListWidget.create($container, groups, { name: `user-${user.user_id}-group-list`, modifier(item) { return format_user_group_list_item(item); }, - simplebar_container: $("#user-profile-modal .modal__body"), + $simplebar_container: $("#user-profile-modal .modal__body"), }); } @@ -190,9 +190,9 @@ export function show_user_profile(user) { }, }; - const elem = components.toggle(opts).get(); - elem.addClass("large allow-overflow"); - $("#tab-toggle").append(elem); + const $elem = components.toggle(opts).get(); + $elem.addClass("large allow-overflow"); + $("#tab-toggle").append($elem); settings_account.initialize_custom_user_type_fields( "#user-profile-modal #content", @@ -228,14 +228,14 @@ export function register_click_handlers() { $("body").on("click", "#user-profile-modal .remove-subscription-button", (e) => { e.preventDefault(); - const stream_row = $(e.currentTarget).closest("[data-stream-id]"); - const stream_id = Number.parseInt(stream_row.attr("data-stream-id"), 10); + const $stream_row = $(e.currentTarget).closest("[data-stream-id]"); + const stream_id = Number.parseInt($stream_row.attr("data-stream-id"), 10); const sub = sub_store.get(stream_id); const target_user_id = Number.parseInt( - stream_row.closest("#user-profile-modal").attr("data-user-id"), + $stream_row.closest("#user-profile-modal").attr("data-user-id"), 10, ); - const alert_box = $("#user-profile-streams-tab .stream_list_info"); + const $alert_box = $("#user-profile-streams-tab .stream_list_info"); function removal_success(data) { if (data.removed.length > 0) { @@ -244,17 +244,17 @@ export function register_click_handlers() { // However, the user profile component has not yet // implemented live update, so we do update its // UI manually here by removing the stream from this list. - stream_row.remove(); + $stream_row.remove(); ui_report.success( $t_html({defaultMessage: "Unsubscribed successfully!"}), - alert_box, + $alert_box, 1200, ); } else { ui_report.client_error( $t_html({defaultMessage: "Already not subscribed."}), - alert_box, + $alert_box, 1200, ); } @@ -274,7 +274,7 @@ export function register_click_handlers() { ); } - ui_report.client_error(error_message, alert_box, 1200); + ui_report.client_error(error_message, $alert_box, 1200); } if (sub.invite_only && people.is_my_user_id(target_user_id)) { @@ -287,12 +287,12 @@ export function register_click_handlers() { }); $("body").on("click", "#user-profile-modal #clear_stream_search", (e) => { - const input = $("#user-profile-streams-tab .stream-search"); - input.val(""); + const $input = $("#user-profile-streams-tab .stream-search"); + $input.val(""); // This is a hack to rerender complete // stream list once the text is cleared. - input.trigger("input"); + $input.trigger("input"); e.stopPropagation(); e.preventDefault(); @@ -309,13 +309,13 @@ export function register_click_handlers() { }); $("body").on("input", "#user-profile-streams-tab .stream-search", () => { - const input = $("#user-profile-streams-tab .stream-search"); - if (input.val().trim().length > 0) { + const $input = $("#user-profile-streams-tab .stream-search"); + if ($input.val().trim().length > 0) { $("#user-profile-streams-tab #clear_stream_search").show(); - input.css("margin-right", "-20px"); + $input.css("margin-right", "-20px"); } else { $("#user-profile-streams-tab #clear_stream_search").hide(); - input.css("margin-right", "0"); + $input.css("margin-right", "0"); } }); } diff --git a/static/js/user_search.js b/static/js/user_search.js index 4ade84b98b..a76383643a 100644 --- a/static/js/user_search.js +++ b/static/js/user_search.js @@ -93,12 +93,12 @@ export class UserSearch { } expand_column() { - const column = this.$input.closest(".app-main [class^='column-']"); - if (!column.hasClass("expanded")) { + const $column = this.$input.closest(".app-main [class^='column-']"); + if (!$column.hasClass("expanded")) { popovers.hide_all(); - if (column.hasClass("column-left")) { + if ($column.hasClass("column-left")) { stream_popover.show_streamlist_sidebar(); - } else if (column.hasClass("column-right")) { + } else if ($column.hasClass("column-right")) { popovers.show_userlist_sidebar(); } } diff --git a/static/js/user_status_ui.js b/static/js/user_status_ui.js index b8db2d4487..8fad7f2864 100644 --- a/static/js/user_status_ui.js +++ b/static/js/user_status_ui.js @@ -79,7 +79,7 @@ export function update_button() { old_status_text = old_status_text.trim(); const old_emoji_info = user_status.get_status_emoji(user_id) || {}; const new_status_text = input_field().val().trim(); - const button = submit_button(); + const $button = submit_button(); if ( old_status_text === new_status_text && @@ -87,9 +87,9 @@ export function update_button() { old_emoji_info.reaction_type === selected_emoji_info.reaction_type && old_emoji_info.emoji_code === selected_emoji_info.emoji_code ) { - button.prop("disabled", true); + $button.prop("disabled", true); } else { - button.prop("disabled", false); + $button.prop("disabled", false); } } @@ -102,8 +102,8 @@ export function toggle_clear_message_button() { } export function clear_message() { - const field = input_field(); - field.val(""); + const $field = input_field(); + $field.val(""); $("#clear_status_message_button").prop("disabled", true); } @@ -125,12 +125,12 @@ function user_status_post_render() { const old_status_text = user_status.get_status_text(user_id); const old_emoji_info = user_status.get_status_emoji(user_id) || {}; set_selected_emoji_info(old_emoji_info); - const field = input_field(); - field.val(old_status_text); + const $field = input_field(); + $field.val(old_status_text); toggle_clear_message_button(); - const button = submit_button(); - button.prop("disabled", true); + const $button = submit_button(); + $button.prop("disabled", true); $("#set_user_status_modal .user-status-value").on("click", (event) => { event.stopPropagation(); diff --git a/static/js/vdom.js b/static/js/vdom.js index 56e049f350..072ca671cd 100644 --- a/static/js/vdom.js +++ b/static/js/vdom.js @@ -57,19 +57,19 @@ export function render_tag(tag) { return start_tag + "\n" + innards + "\n" + end_tag; } -export function update_attrs(elem, new_attrs, old_attrs) { +export function update_attrs($elem, new_attrs, old_attrs) { const new_dict = new Map(new_attrs); const old_dict = new Map(old_attrs); for (const [k, v] of new_attrs) { if (v !== old_dict.get(k)) { - elem.attr(k, v); + $elem.attr(k, v); } } for (const [k] of old_attrs) { if (!new_dict.has(k)) { - elem.removeAttr(k); + $elem.removeAttr(k); } } } @@ -172,7 +172,7 @@ export function update(replace_content, find, new_dom, old_dom) { We will only update nodes whose data has changed. */ - const child_elems = find().children(); + const $child_elems = find().children(); for (const [i, new_node] of new_opts.keyed_nodes.entries()) { const old_node = old_opts.keyed_nodes[i]; @@ -180,7 +180,7 @@ export function update(replace_content, find, new_dom, old_dom) { continue; } const rendered_dom = new_node.render(); - child_elems.eq(i).replaceWith(rendered_dom); + $child_elems.eq(i).replaceWith(rendered_dom); } update_attrs(find(), new_opts.attrs, old_opts.attrs); diff --git a/static/js/widgetize.js b/static/js/widgetize.js index 8121dc2943..fa432fd565 100644 --- a/static/js/widgetize.js +++ b/static/js/widgetize.js @@ -19,16 +19,16 @@ export function clear_for_testing() { widget_contents.clear(); } -function set_widget_in_message(row, widget_elem) { - const content_holder = row.find(".message_content"); +function set_widget_in_message($row, $widget_elem) { + const $content_holder = $row.find(".message_content"); - // Avoid adding the widget_elem if it already exists. + // Avoid adding the $widget_elem if it already exists. // This can happen when the app loads in the "Recent topics" // view and the user changes the view to "All messages". // This is important since jQuery removes all the event handlers // on `empty()`ing an element. - if (content_holder.find(".widget-content").length === 0) { - content_holder.empty().append(widget_elem); + if ($content_holder.find(".widget-content").length === 0) { + $content_holder.empty().append($widget_elem); } } @@ -36,7 +36,7 @@ export function activate(in_opts) { const widget_type = in_opts.widget_type; const extra_data = in_opts.extra_data; const events = in_opts.events; - const row = in_opts.row; + const $row = in_opts.$row; const message = in_opts.message; const post_to_server = in_opts.post_to_server; @@ -57,53 +57,53 @@ export function activate(in_opts) { }); }; - if (row.attr("id").startsWith("zhome") && narrow_state.active()) { + if ($row.attr("id").startsWith("zhome") && narrow_state.active()) { // Don't place widget in a home message row if we are narrowed // to active state return; } - let widget_elem = widget_contents.get(message.id); - if (widget_elem) { - set_widget_in_message(row, widget_elem); + let $widget_elem = widget_contents.get(message.id); + if ($widget_elem) { + set_widget_in_message($row, $widget_elem); return; } // We depend on our widgets to use templates to build // the HTML that will eventually go in this div. - widget_elem = $("

    ").addClass("widget-content"); + $widget_elem = $("
    ").addClass("widget-content"); widgets.get(widget_type).activate({ - elem: widget_elem, + $elem: $widget_elem, callback, message, extra_data, }); - widget_contents.set(message.id, widget_elem); - set_widget_in_message(row, widget_elem); + widget_contents.set(message.id, $widget_elem); + set_widget_in_message($row, $widget_elem); // Replay any events that already happened. (This is common // when you narrow to a message after other users have already // interacted with it.) if (events.length > 0) { - widget_elem.handle_events(events); + $widget_elem.handle_events(events); } } export function set_widgets_for_list() { - for (const [idx, widget_elem] of widget_contents) { + for (const [idx, $widget_elem] of widget_contents) { if (message_lists.current.get(idx) !== undefined) { - const row = message_lists.current.get_row(idx); - set_widget_in_message(row, widget_elem); + const $row = message_lists.current.get_row(idx); + set_widget_in_message($row, $widget_elem); } } } export function handle_event(widget_event) { - const widget_elem = widget_contents.get(widget_event.message_id); + const $widget_elem = widget_contents.get(widget_event.message_id); - if (!widget_elem) { + if (!$widget_elem) { // It is common for submessage events to arrive on // messages that we don't yet have in view. We // just ignore them completely here. @@ -112,5 +112,5 @@ export function handle_event(widget_event) { const events = [widget_event]; - widget_elem.handle_events(events); + $widget_elem.handle_events(events); } diff --git a/static/js/zcommand.js b/static/js/zcommand.js index 32ae898ad6..c5e4ec931c 100644 --- a/static/js/zcommand.js +++ b/static/js/zcommand.js @@ -65,9 +65,9 @@ export function switch_to_light_theme() { on_success(data) { dark_theme.disable(); feedback_widget.show({ - populate(container) { + populate($container) { const rendered_msg = marked(data.msg).trim(); - container.html(rendered_msg); + $container.html(rendered_msg); }, on_undo() { send({ @@ -87,9 +87,9 @@ export function switch_to_dark_theme() { on_success(data) { dark_theme.enable(); feedback_widget.show({ - populate(container) { + populate($container) { const rendered_msg = marked(data.msg).trim(); - container.html(rendered_msg); + $container.html(rendered_msg); }, on_undo() { send({ @@ -109,9 +109,9 @@ export function enter_fluid_mode() { on_success(data) { scroll_bar.set_layout_width(); feedback_widget.show({ - populate(container) { + populate($container) { const rendered_msg = marked(data.msg).trim(); - container.html(rendered_msg); + $container.html(rendered_msg); }, on_undo() { send({ @@ -131,9 +131,9 @@ export function enter_fixed_mode() { on_success(data) { scroll_bar.set_layout_width(); feedback_widget.show({ - populate(container) { + populate($container) { const rendered_msg = marked(data.msg).trim(); - container.html(rendered_msg); + $container.html(rendered_msg); }, on_undo() { send({ diff --git a/static/js/zform.js b/static/js/zform.js index 1d9ce67945..35cdaa77a6 100644 --- a/static/js/zform.js +++ b/static/js/zform.js @@ -47,7 +47,7 @@ export function validate_extra_data(data) { export function activate(opts) { const self = {}; - const outer_elem = opts.elem; + const $outer_elem = opts.$elem; const data = opts.extra_data; if (!validate_extra_data(data)) { @@ -64,9 +64,9 @@ export function activate(opts) { } const html = render_widgets_zform_choices(data); - const elem = $(html); + const $elem = $(html); - elem.find("button").on("click", (e) => { + $elem.find("button").on("click", (e) => { e.stopPropagation(); // Grab our index from the markup. @@ -82,7 +82,7 @@ export function activate(opts) { }); }); - return elem; + return $elem; } function render() { @@ -90,7 +90,7 @@ export function activate(opts) { if (data.type === "choices") { rendered_widget = make_choices(data); - outer_elem.html(rendered_widget); + $outer_elem.html(rendered_widget); } }