From b9223088f3b6b9d094e8efb6e0846628a990bf03 Mon Sep 17 00:00:00 2001 From: Lalit Date: Tue, 25 Apr 2023 21:31:02 +0530 Subject: [PATCH] refactor: Move simplebar helper functions from `ui` to `scroll_util`. This commit eliminates the `ui.js` module from the codebase by moving all simplebar helper functions to the `scroll_util` module. --- tools/test-js-with-node | 2 +- web/src/attachments_ui.js | 8 ++++-- web/src/buddy_list.js | 6 ++-- web/src/emoji_picker.js | 24 ++++++++-------- web/src/info_overlay.js | 8 ++++-- web/src/invite.js | 6 ++-- web/src/list_widget.js | 4 +-- web/src/pm_list.js | 5 ++-- web/src/recent_topics_ui.js | 10 +++++-- web/src/scroll_util.js | 42 ++++++++++++++++++++++++++-- web/src/settings_emoji.js | 4 +-- web/src/settings_exports.js | 4 +-- web/src/settings_linkifiers.js | 4 +-- web/src/settings_muted_users.js | 6 ++-- web/src/settings_panel_menu.js | 4 +-- web/src/settings_playgrounds.js | 4 +-- web/src/settings_streams.js | 4 +-- web/src/settings_user_topics.js | 6 ++-- web/src/settings_users.js | 4 +-- web/src/stream_edit.js | 4 +-- web/src/stream_edit_subscribers.js | 4 +-- web/src/stream_list.js | 3 +- web/src/stream_settings_ui.js | 21 +++++++------- web/src/topic_list.js | 4 +-- web/src/ui.js | 36 ------------------------ web/src/ui_init.js | 4 +-- web/src/user_group_edit.js | 4 +-- web/src/user_group_edit_members.js | 4 +-- web/src/user_groups_settings_ui.js | 9 ++++-- web/tests/list_widget.test.js | 6 ++-- web/tests/scroll_util.test.js | 7 ++--- web/tests/stream_list.test.js | 2 +- web/tests/stream_settings_ui.test.js | 4 +-- 33 files changed, 140 insertions(+), 127 deletions(-) delete mode 100644 web/src/ui.js diff --git a/tools/test-js-with-node b/tools/test-js-with-node index 34cea3f450..a3cfc46618 100755 --- a/tools/test-js-with-node +++ b/tools/test-js-with-node @@ -149,6 +149,7 @@ EXEMPT_FILES = make_set( "web/src/scheduled_messages.js", "web/src/scheduled_messages_overlay_ui.js", "web/src/scroll_bar.ts", + "web/src/scroll_util.js", "web/src/search_pill_widget.js", "web/src/sent_messages.js", "web/src/sentry.ts", @@ -203,7 +204,6 @@ EXEMPT_FILES = make_set( "web/src/types.ts", "web/src/typing.js", "web/src/typing_events.js", - "web/src/ui.js", "web/src/ui_init.js", "web/src/ui_report.ts", "web/src/ui_util.ts", diff --git a/web/src/attachments_ui.js b/web/src/attachments_ui.js index 0c751fef6a..474527653c 100644 --- a/web/src/attachments_ui.js +++ b/web/src/attachments_ui.js @@ -10,8 +10,8 @@ import {$t, $t_html} from "./i18n"; import * as ListWidget from "./list_widget"; import * as loading from "./loading"; import {page_params} from "./page_params"; +import * as scroll_util from "./scroll_util"; import * as timerender from "./timerender"; -import * as ui from "./ui"; import * as ui_report from "./ui_report"; let attachments; @@ -103,7 +103,9 @@ function render_attachments_ui() { return item.name.toLocaleLowerCase().includes(value); }, onupdate() { - ui.reset_scrollbar($uploaded_files_table.closest(".progressive-table-wrapper")); + scroll_util.reset_scrollbar( + $uploaded_files_table.closest(".progressive-table-wrapper"), + ); }, }, $parent_container: $("#attachments-settings").expectOne(), @@ -115,7 +117,7 @@ function render_attachments_ui() { $simplebar_container: $("#attachments-settings .progressive-table-wrapper"), }); - ui.reset_scrollbar($uploaded_files_table.closest(".progressive-table-wrapper")); + scroll_util.reset_scrollbar($uploaded_files_table.closest(".progressive-table-wrapper")); } function format_attachment_data(new_attachments) { diff --git a/web/src/buddy_list.js b/web/src/buddy_list.js index ec9bd84033..d9f63c6122 100644 --- a/web/src/buddy_list.js +++ b/web/src/buddy_list.js @@ -7,7 +7,7 @@ import * as blueslip from "./blueslip"; import * as buddy_data from "./buddy_data"; import * as message_viewport from "./message_viewport"; import * as padded_widget from "./padded_widget"; -import * as ui from "./ui"; +import * as scroll_util from "./scroll_util"; class BuddyListConf { container_sel = "#user_presences"; @@ -264,7 +264,7 @@ export class BuddyList extends BuddyListConf { fill_screen_with_content() { let height = this.height_to_fill(); - const elem = ui.get_scroll_element($(this.scroll_container_sel)).expectOne()[0]; + const elem = scroll_util.get_scroll_element($(this.scroll_container_sel)).expectOne()[0]; // Add a fudge factor. height += 10; @@ -292,7 +292,7 @@ export class BuddyList extends BuddyListConf { 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 = scroll_util.get_scroll_element($(this.scroll_container_sel)); $scroll_container.on("scroll", () => { this.fill_screen_with_content(); diff --git a/web/src/emoji_picker.js b/web/src/emoji_picker.js index 8889482cb0..0389bb0367 100644 --- a/web/src/emoji_picker.js +++ b/web/src/emoji_picker.js @@ -17,8 +17,8 @@ import {page_params} from "./page_params"; import * as popovers from "./popovers"; import * as reactions from "./reactions"; import * as rows from "./rows"; +import * as scroll_util from "./scroll_util"; import * as spectators from "./spectators"; -import * as ui from "./ui"; import {user_settings} from "./user_settings"; import * as user_status_ui from "./user_status_ui"; @@ -272,7 +272,7 @@ function filter_emojis() { message_id, }); $(".emoji-search-results").html(rendered_search_results); - ui.reset_scrollbar($(".emoji-search-results-container")); + scroll_util.reset_scrollbar($(".emoji-search-results-container")); if (!search_results_visible) { show_search_results(); } @@ -373,10 +373,10 @@ function maybe_change_focused_emoji($emoji_map, next_section, next_index, preser if (!preserve_scroll) { $next_emoji.trigger("focus"); } else { - const start = ui.get_scroll_element($emoji_map).scrollTop(); + const start = scroll_util.get_scroll_element($emoji_map).scrollTop(); $next_emoji.trigger("focus"); - if (ui.get_scroll_element($emoji_map).scrollTop() !== start) { - ui.get_scroll_element($emoji_map).scrollTop(start); + if (scroll_util.get_scroll_element($emoji_map).scrollTop() !== start) { + scroll_util.get_scroll_element($emoji_map).scrollTop(start); } } update_emoji_showcase($next_emoji); @@ -393,7 +393,7 @@ function maybe_change_active_section(next_section) { current_index = 0; const offset = section_head_offsets[current_section]; if (offset) { - ui.get_scroll_element($emoji_map).scrollTop(offset.position_y); + scroll_util.get_scroll_element($emoji_map).scrollTop(offset.position_y); maybe_change_focused_emoji($emoji_map, current_section, current_index); } } @@ -480,7 +480,7 @@ export function navigate(event_name, e) { if (event_name === "down_arrow" || (is_cursor_at_end && event_name === "right_arrow")) { $selected_emoji.trigger("focus"); if (current_section === 0 && current_index < 6) { - ui.get_scroll_element($emoji_map).scrollTop(0); + scroll_util.get_scroll_element($emoji_map).scrollTop(0); } update_emoji_showcase($selected_emoji); return true; @@ -504,8 +504,8 @@ export function navigate(event_name, e) { // consistent (cursor goes to the end of the filter // string). $(".emoji-popover-filter").trigger("focus").caret(Number.POSITIVE_INFINITY); - ui.get_scroll_element($emoji_map).scrollTop(0); - ui.get_scroll_element($(".emoji-search-results-container")).scrollTop(0); + scroll_util.get_scroll_element($emoji_map).scrollTop(0); + scroll_util.get_scroll_element($(".emoji-search-results-container")).scrollTop(0); current_section = 0; current_index = 0; reset_emoji_showcase(); @@ -601,8 +601,8 @@ export function emoji_select_tab($elt) { 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)); + scroll_util.get_scroll_element($emoji_map).on("scroll", () => { + emoji_select_tab(scroll_util.get_scroll_element($emoji_map)); }); $(".emoji-popover-filter").on("input", filter_emojis); @@ -760,7 +760,7 @@ export function register_click_handlers() { ); if (offset) { - ui.get_scroll_element($emoji_map).scrollTop(offset.position_y); + scroll_util.get_scroll_element($emoji_map).scrollTop(offset.position_y); } }); diff --git a/web/src/info_overlay.js b/web/src/info_overlay.js index c2540b9dd2..afbce6f0c1 100644 --- a/web/src/info_overlay.js +++ b/web/src/info_overlay.js @@ -12,7 +12,7 @@ import * as keydown_util from "./keydown_util"; import * as markdown from "./markdown"; import * as overlays from "./overlays"; import * as rendered_markdown from "./rendered_markdown"; -import * as ui from "./ui"; +import * as scroll_util from "./scroll_util"; import {user_settings} from "./user_settings"; import * as util from "./util"; @@ -219,7 +219,9 @@ export function set_up_toggler() { callback(name, key) { $(".overlay-modal").hide(); $(`#${CSS.escape(key)}`).show(); - ui.get_scroll_element($(`#${CSS.escape(key)}`).find(".modal-body")).trigger("focus"); + scroll_util + .get_scroll_element($(`#${CSS.escape(key)}`).find(".modal-body")) + .trigger("focus"); }, }; @@ -234,7 +236,7 @@ export function set_up_toggler() { }); for (const $modal of modals) { - ui.get_scroll_element($modal).prop("tabindex", 0); + scroll_util.get_scroll_element($modal).prop("tabindex", 0); keydown_util.handle({ $elem: $modal, handlers: { diff --git a/web/src/invite.js b/web/src/invite.js index dbb765b9dd..126c55e612 100644 --- a/web/src/invite.js +++ b/web/src/invite.js @@ -15,10 +15,10 @@ import * as dialog_widget from "./dialog_widget"; import * as gear_menu from "./gear_menu"; import {$t, $t_html} from "./i18n"; import {page_params} from "./page_params"; +import * as scroll_util from "./scroll_util"; import * as settings_config from "./settings_config"; import * as stream_data from "./stream_data"; import * as timerender from "./timerender"; -import * as ui from "./ui"; import * as ui_report from "./ui_report"; import * as util from "./util"; @@ -147,7 +147,7 @@ function submit_invitation_form() { $("#invite-user-modal .dialog_submit_button").prop("disabled", false); $("#invite-user-modal .dialog_cancel_button").prop("disabled", false); $("#invitee_emails").trigger("focus"); - ui.get_scroll_element($("#invite-user-modal"))[0].scrollTop = 0; + scroll_util.get_scroll_element($("#invite-user-modal"))[0].scrollTop = 0; }, }); } @@ -173,7 +173,7 @@ function generate_multiuse_invite() { ); $("#invite-user-modal .dialog_submit_button").prop("disabled", false); $("#invite-user-modal .dialog_cancel_button").prop("disabled", false); - ui.get_scroll_element($("#invite-user-modal"))[0].scrollTop = 0; + scroll_util.get_scroll_element($("#invite-user-modal"))[0].scrollTop = 0; }, }); } diff --git a/web/src/list_widget.js b/web/src/list_widget.js index 81aee368a3..cebccd9c77 100644 --- a/web/src/list_widget.js +++ b/web/src/list_widget.js @@ -1,7 +1,7 @@ import $ from "jquery"; import * as blueslip from "./blueslip"; -import * as ui from "./ui"; +import * as scroll_util from "./scroll_util"; const DEFAULTS = { INITIAL_RENDER_COUNT: 80, @@ -306,7 +306,7 @@ 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 = scroll_util.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. diff --git a/web/src/pm_list.js b/web/src/pm_list.js index 39d36a38fb..1e1ff427f8 100644 --- a/web/src/pm_list.js +++ b/web/src/pm_list.js @@ -6,7 +6,6 @@ import * as pm_list_dom from "./pm_list_dom"; import * as resize from "./resize"; import * as scroll_util from "./scroll_util"; import * as topic_zoom from "./topic_zoom"; -import * as ui from "./ui"; import * as ui_util from "./ui_util"; import * as vdom from "./vdom"; @@ -60,7 +59,7 @@ export function _build_private_messages_list() { } function set_dom_to(new_dom) { - const $container = ui.get_content_element($("#private_messages_list")); + const $container = scroll_util.get_content_element($("#private_messages_list")); function replace_content(html) { $container.html(html); @@ -140,7 +139,7 @@ function scroll_pm_into_view($target_li) { function scroll_all_private_into_view() { const $container = $("#left_sidebar_scroll_container"); - const $scroll_element = ui.get_scroll_element($container); + const $scroll_element = scroll_util.get_scroll_element($container); $scroll_element.scrollTop(0); } diff --git a/web/src/recent_topics_ui.js b/web/src/recent_topics_ui.js index d3980fa089..2287d6784e 100644 --- a/web/src/recent_topics_ui.js +++ b/web/src/recent_topics_ui.js @@ -35,13 +35,13 @@ import { is_visible, set_visible, } from "./recent_topics_util"; +import * as scroll_util from "./scroll_util"; import * as search from "./search"; import * as stream_data from "./stream_data"; import * as stream_list from "./stream_list"; import * as sub_store from "./sub_store"; import * as timerender from "./timerender"; import * as top_left_corner from "./top_left_corner"; -import * as ui from "./ui"; import * as ui_util from "./ui_util"; import * as unread from "./unread"; import * as unread_ops from "./unread_ops"; @@ -1026,7 +1026,9 @@ function get_page_up_down_delta() { } function page_up_navigation() { - const $scroll_container = ui.get_scroll_element($("#recent_topics_table .table_fix_head")); + const $scroll_container = scroll_util.get_scroll_element( + $("#recent_topics_table .table_fix_head"), + ); const delta = get_page_up_down_delta(); const new_scrollTop = $scroll_container.scrollTop() - delta; if (new_scrollTop <= 0) { @@ -1037,7 +1039,9 @@ function page_up_navigation() { } function page_down_navigation() { - const $scroll_container = ui.get_scroll_element($("#recent_topics_table .table_fix_head")); + const $scroll_container = scroll_util.get_scroll_element( + $("#recent_topics_table .table_fix_head"), + ); const delta = get_page_up_down_delta(); const new_scrollTop = $scroll_container.scrollTop() + delta; const table_height = $("#recent_topics_table .table_fix_head").height(); diff --git a/web/src/scroll_util.js b/web/src/scroll_util.js index 7275068121..279a44711c 100644 --- a/web/src/scroll_util.js +++ b/web/src/scroll_util.js @@ -1,4 +1,42 @@ -import * as ui from "./ui"; +import $ from "jquery"; +import SimpleBar from "simplebar"; + +export function get_content_element($element) { + const element = $element.expectOne()[0]; + const sb = SimpleBar.instances.get(element); + if (sb) { + return $(sb.getContentElement()); + } + return $element; +} + +export function get_scroll_element($element) { + // For testing we just return the element itself. + if ($element && $element.__zjquery) { + return $element; + } + + const element = $element.expectOne()[0]; + const sb = SimpleBar.instances.get(element); + if (sb) { + return $(sb.getScrollElement()); + } else if ("simplebar" in element.dataset) { + // The SimpleBar mutation observer hasn’t processed this element yet. + // Create the SimpleBar early in case we need to add event listeners. + return $(new SimpleBar(element).getScrollElement()); + } + return $element; +} + +export function reset_scrollbar($element) { + const element = $element.expectOne()[0]; + const sb = SimpleBar.instances.get(element); + if (sb) { + sb.getScrollElement().scrollTop = 0; + } else { + element.scrollTop = 0; + } +} export function scroll_delta(opts) { const elem_top = opts.elem_top; @@ -26,7 +64,7 @@ export function scroll_element_into_container($elem, $container, sticky_header_h // this will be non-intrusive to users when they already have // the element visible. - $container = ui.get_scroll_element($container); + $container = get_scroll_element($container); const elem_top = $elem.position().top - sticky_header_height; const elem_bottom = elem_top + $elem.innerHeight(); const container_height = $container.height() - sticky_header_height; diff --git a/web/src/settings_emoji.js b/web/src/settings_emoji.js index fa9bb0e874..a5bd67e3b2 100644 --- a/web/src/settings_emoji.js +++ b/web/src/settings_emoji.js @@ -16,9 +16,9 @@ import * as ListWidget from "./list_widget"; import * as loading from "./loading"; import {page_params} from "./page_params"; import * as people from "./people"; +import * as scroll_util from "./scroll_util"; import * as settings_config from "./settings_config"; import * as settings_data from "./settings_data"; -import * as ui from "./ui"; import * as ui_report from "./ui_report"; import * as upload_widget from "./upload_widget"; @@ -131,7 +131,7 @@ export function populate_emoji() { return item.name.toLowerCase().includes(value); }, onupdate() { - ui.reset_scrollbar($emoji_table); + scroll_util.reset_scrollbar($emoji_table); }, }, $parent_container: $("#emoji-settings").expectOne(), diff --git a/web/src/settings_exports.js b/web/src/settings_exports.js index 0d64f7fec0..dda9fb630a 100644 --- a/web/src/settings_exports.js +++ b/web/src/settings_exports.js @@ -10,8 +10,8 @@ import {$t_html} from "./i18n"; import * as ListWidget from "./list_widget"; import * as loading from "./loading"; import * as people from "./people"; +import * as scroll_util from "./scroll_util"; import * as timerender from "./timerender"; -import * as ui from "./ui"; import * as ui_report from "./ui_report"; const meta = { @@ -78,7 +78,7 @@ export function populate_exports_table(exports) { return people.get_full_name(item.acting_user_id).toLowerCase().includes(value); }, onupdate() { - ui.reset_scrollbar($exports_table); + scroll_util.reset_scrollbar($exports_table); }, }, $parent_container: $("#data-exports").expectOne(), diff --git a/web/src/settings_linkifiers.js b/web/src/settings_linkifiers.js index 658c70a8fc..270f1d6daa 100644 --- a/web/src/settings_linkifiers.js +++ b/web/src/settings_linkifiers.js @@ -10,8 +10,8 @@ import * as dialog_widget from "./dialog_widget"; import {$t_html} from "./i18n"; import * as ListWidget from "./list_widget"; import {page_params} from "./page_params"; +import * as scroll_util from "./scroll_util"; import * as settings_ui from "./settings_ui"; -import * as ui from "./ui"; import * as ui_report from "./ui_report"; const meta = { @@ -155,7 +155,7 @@ export function populate_linkifiers(linkifiers_data) { ); }, onupdate() { - ui.reset_scrollbar($linkifiers_table); + scroll_util.reset_scrollbar($linkifiers_table); }, }, $parent_container: $("#linkifier-settings").expectOne(), diff --git a/web/src/settings_muted_users.js b/web/src/settings_muted_users.js index 7f18982157..78a4edede2 100644 --- a/web/src/settings_muted_users.js +++ b/web/src/settings_muted_users.js @@ -6,7 +6,7 @@ import * as ListWidget from "./list_widget"; import * as muted_users from "./muted_users"; import * as muted_users_ui from "./muted_users_ui"; import * as people from "./people"; -import * as ui from "./ui"; +import * as scroll_util from "./scroll_util"; export let loaded = false; @@ -30,7 +30,9 @@ export function populate_list() { return item.user_name.toLocaleLowerCase().includes(value); }, onupdate() { - ui.reset_scrollbar($muted_users_table.closest(".progressive-table-wrapper")); + scroll_util.reset_scrollbar( + $muted_users_table.closest(".progressive-table-wrapper"), + ); }, }, $parent_container: $("#muted-user-settings"), diff --git a/web/src/settings_panel_menu.js b/web/src/settings_panel_menu.js index 204355da97..575a3f286f 100644 --- a/web/src/settings_panel_menu.js +++ b/web/src/settings_panel_menu.js @@ -3,9 +3,9 @@ import $ from "jquery"; import * as browser_history from "./browser_history"; import * as keydown_util from "./keydown_util"; import * as popovers from "./popovers"; +import * as scroll_util from "./scroll_util"; import * as settings from "./settings"; import * as settings_sections from "./settings_sections"; -import * as ui from "./ui"; export let normal_settings; export let org_settings; @@ -138,7 +138,7 @@ export class SettingsPanelMenu { this.get_panel().addClass("show"); - ui.reset_scrollbar($("#settings_content")); + scroll_util.reset_scrollbar($("#settings_content")); const $settings_overlay_container = $("#settings_overlay_container"); $settings_overlay_container.find(".right").addClass("show"); diff --git a/web/src/settings_playgrounds.js b/web/src/settings_playgrounds.js index d4725edbc1..b11d3a1737 100644 --- a/web/src/settings_playgrounds.js +++ b/web/src/settings_playgrounds.js @@ -10,7 +10,7 @@ import {$t_html} from "./i18n"; import * as ListWidget from "./list_widget"; import {page_params} from "./page_params"; import * as realm_playground from "./realm_playground"; -import * as ui from "./ui"; +import * as scroll_util from "./scroll_util"; import * as ui_report from "./ui_report"; const meta = { @@ -72,7 +72,7 @@ export function populate_playgrounds(playgrounds_data) { ); }, onupdate() { - ui.reset_scrollbar($playgrounds_table); + scroll_util.reset_scrollbar($playgrounds_table); }, }, $parent_container: $("#playground-settings").expectOne(), diff --git a/web/src/settings_streams.js b/web/src/settings_streams.js index 8f4ea13a1c..11806ff3c1 100644 --- a/web/src/settings_streams.js +++ b/web/src/settings_streams.js @@ -9,10 +9,10 @@ import * as keydown_util from "./keydown_util"; import * as ListWidget from "./list_widget"; import * as loading from "./loading"; import {page_params} from "./page_params"; +import * as scroll_util from "./scroll_util"; import * as stream_data from "./stream_data"; import * as sub_store from "./sub_store"; import * as typeahead_helper from "./typeahead_helper"; -import * as ui from "./ui"; import * as ui_report from "./ui_report"; const meta = { @@ -53,7 +53,7 @@ export function build_default_stream_table() { return item.name.toLowerCase().includes(query.toLowerCase()); }, onupdate() { - ui.reset_scrollbar($table); + scroll_util.reset_scrollbar($table); }, }, $parent_container: $("#admin-default-streams-list").expectOne(), diff --git a/web/src/settings_user_topics.js b/web/src/settings_user_topics.js index 60e5a440b6..d380b46a0b 100644 --- a/web/src/settings_user_topics.js +++ b/web/src/settings_user_topics.js @@ -3,8 +3,8 @@ import $ from "jquery"; import render_user_topic_ui_row from "../templates/user_topic_ui_row.hbs"; import * as ListWidget from "./list_widget"; +import * as scroll_util from "./scroll_util"; import * as settings_config from "./settings_config"; -import * as ui from "./ui"; import * as user_topics from "./user_topics"; export let loaded = false; @@ -39,7 +39,9 @@ export function populate_list() { return item.topic.toLocaleLowerCase().includes(value); }, onupdate() { - ui.reset_scrollbar($user_topics_table.closest(".progressive-table-wrapper")); + scroll_util.reset_scrollbar( + $user_topics_table.closest(".progressive-table-wrapper"), + ); }, }, init_sort: ["numeric", "date_updated"], diff --git a/web/src/settings_users.js b/web/src/settings_users.js index 457cf63f94..07ae5877cb 100644 --- a/web/src/settings_users.js +++ b/web/src/settings_users.js @@ -18,12 +18,12 @@ import {page_params} from "./page_params"; import * as people from "./people"; import * as popovers from "./popovers"; import * as presence from "./presence"; +import * as scroll_util from "./scroll_util"; import * as settings_account from "./settings_account"; import * as settings_bots from "./settings_bots"; import * as settings_config from "./settings_config"; import * as settings_panel_menu from "./settings_panel_menu"; import * as timerender from "./timerender"; -import * as ui from "./ui"; import * as user_pill from "./user_pill"; const section = { @@ -182,7 +182,7 @@ function populate_users() { function reset_scrollbar($sel) { return function () { - ui.reset_scrollbar($sel); + scroll_util.reset_scrollbar($sel); }; } diff --git a/web/src/stream_edit.js b/web/src/stream_edit.js index c42d867720..c00a907ce7 100644 --- a/web/src/stream_edit.js +++ b/web/src/stream_edit.js @@ -20,6 +20,7 @@ import {$t, $t_html} from "./i18n"; import * as keydown_util from "./keydown_util"; import * as narrow_state from "./narrow_state"; import {page_params} from "./page_params"; +import * as scroll_util from "./scroll_util"; import * as settings_config from "./settings_config"; import * as settings_org from "./settings_org"; import * as settings_ui from "./settings_ui"; @@ -31,7 +32,6 @@ import * as stream_settings_data from "./stream_settings_data"; import * as stream_settings_ui from "./stream_settings_ui"; import * as stream_ui_updates from "./stream_ui_updates"; import * as sub_store from "./sub_store"; -import * as ui from "./ui"; import * as ui_report from "./ui_report"; import * as user_groups from "./user_groups"; import {user_settings} from "./user_settings"; @@ -241,7 +241,7 @@ export function show_settings_for(node) { is_admin: page_params.is_admin, org_level_message_retention_setting: get_display_text_for_realm_message_retention_setting(), }); - ui.get_content_element($("#stream_settings")).html(html); + scroll_util.get_content_element($("#stream_settings")).html(html); $("#stream_settings .tab-container").prepend(toggler.get()); stream_ui_updates.update_toggler_for_sub(sub); diff --git a/web/src/stream_edit_subscribers.js b/web/src/stream_edit_subscribers.js index cb6c2a8986..7937ed2b92 100644 --- a/web/src/stream_edit_subscribers.js +++ b/web/src/stream_edit_subscribers.js @@ -15,12 +15,12 @@ import * as ListWidget from "./list_widget"; import {page_params} from "./page_params"; import * as peer_data from "./peer_data"; import * as people from "./people"; +import * as scroll_util from "./scroll_util"; import * as settings_users from "./settings_users"; import * as stream_data from "./stream_data"; import * as stream_settings_containers from "./stream_settings_containers"; import * as sub_store from "./sub_store"; import * as subscriber_api from "./subscriber_api"; -import * as ui from "./ui"; export let pill_widget; let current_stream_id; @@ -62,7 +62,7 @@ function show_stream_subscription_request_result({ already_subscribed_users, ignored_deactivated_users, }); - ui.get_content_element($stream_subscription_req_result_elem).html(html); + scroll_util.get_content_element($stream_subscription_req_result_elem).html(html); if (add_class) { $stream_subscription_req_result_elem.addClass(add_class); } diff --git a/web/src/stream_list.js b/web/src/stream_list.js index 1893302d60..2b5b5e30b4 100644 --- a/web/src/stream_list.js +++ b/web/src/stream_list.js @@ -25,7 +25,6 @@ import * as stream_popover from "./stream_popover"; import * as sub_store from "./sub_store"; import * as topic_list from "./topic_list"; import * as topic_zoom from "./topic_zoom"; -import * as ui from "./ui"; import * as ui_util from "./ui_util"; import * as unread from "./unread"; @@ -705,7 +704,7 @@ export function set_event_handlers() { } // check for user scrolls on streams list for first time - ui.get_scroll_element($("#left_sidebar_scroll_container")).on("scroll", () => { + scroll_util.get_scroll_element($("#left_sidebar_scroll_container")).on("scroll", () => { has_scrolled = true; toggle_pm_header_icon(); }); diff --git a/web/src/stream_settings_ui.js b/web/src/stream_settings_ui.js index 63e9524850..b0c142c81c 100644 --- a/web/src/stream_settings_ui.js +++ b/web/src/stream_settings_ui.js @@ -40,7 +40,6 @@ import * as stream_muting from "./stream_muting"; import * as stream_settings_data from "./stream_settings_data"; import * as stream_ui_updates from "./stream_ui_updates"; import * as sub_store from "./sub_store"; -import * as ui from "./ui"; import * as ui_report from "./ui_report"; import * as user_groups from "./user_groups"; import * as util from "./util"; @@ -280,16 +279,18 @@ export function add_sub_to_table(sub) { const $new_row = $(html); if (stream_create.get_name() === sub.name) { - ui.get_content_element($(".streams-list")).prepend($new_row); - ui.reset_scrollbar($(".streams-list")); + scroll_util.get_content_element($(".streams-list")).prepend($new_row); + scroll_util.reset_scrollbar($(".streams-list")); } else { - ui.get_content_element($(".streams-list")).append($new_row); + scroll_util.get_content_element($(".streams-list")).append($new_row); } const settings_html = render_stream_settings({ sub: stream_settings_data.get_sub_for_settings(sub), }); - ui.get_content_element($("#streams_overlay_container .settings")).append($(settings_html)); + scroll_util + .get_content_element($("#streams_overlay_container .settings")) + .append($(settings_html)); if (stream_create.get_name() === sub.name) { // This `stream_create.get_name()` check tells us whether the @@ -443,7 +444,7 @@ export function render_left_panel_superset() { subscriptions: stream_settings_data.get_updated_unsorted_subs(), }); - ui.get_content_element($("#streams_overlay_container .streams-list")).html(html); + scroll_util.get_content_element($("#streams_overlay_container .streams-list")).html(html); } export function update_empty_left_panel_message() { @@ -516,14 +517,14 @@ export function redraw_left_panel(left_panel_params = get_left_panel_params()) { widgets.set(stream_id, $(row).detach()); } - ui.reset_scrollbar($("#subscription_overlay .streams-list")); + scroll_util.reset_scrollbar($("#subscription_overlay .streams-list")); const all_stream_ids = [...buckets.name, ...buckets.desc, ...buckets.other]; for (const stream_id of all_stream_ids) { - ui.get_content_element($("#streams_overlay_container .streams-list")).append( - widgets.get(stream_id), - ); + scroll_util + .get_content_element($("#streams_overlay_container .streams-list")) + .append(widgets.get(stream_id)); } maybe_reset_right_panel(); update_empty_left_panel_message(); diff --git a/web/src/topic_list.js b/web/src/topic_list.js index 2ef2e209ce..23009a6515 100644 --- a/web/src/topic_list.js +++ b/web/src/topic_list.js @@ -8,11 +8,11 @@ import render_topic_list_item from "../templates/topic_list_item.hbs"; import * as blueslip from "./blueslip"; import * as narrow from "./narrow"; import * as popover_menus from "./popover_menus"; +import * as scroll_util from "./scroll_util"; import * as stream_topic_history from "./stream_topic_history"; import * as stream_topic_history_util from "./stream_topic_history_util"; import * as sub_store from "./sub_store"; import * as topic_list_data from "./topic_list_data"; -import * as ui from "./ui"; import * as vdom from "./vdom"; /* @@ -279,7 +279,7 @@ export function zoom_in() { active_widget.build(); } - ui.get_scroll_element($("#left_sidebar_scroll_container")).scrollTop(0); + scroll_util.get_scroll_element($("#left_sidebar_scroll_container")).scrollTop(0); const spinner = true; active_widget.build(spinner); diff --git a/web/src/ui.js b/web/src/ui.js deleted file mode 100644 index d7dc88bed3..0000000000 --- a/web/src/ui.js +++ /dev/null @@ -1,36 +0,0 @@ -import $ from "jquery"; -import SimpleBar from "simplebar"; - -// What, if anything, obscures the home tab? - -export function get_content_element($element) { - const element = $element.expectOne()[0]; - const sb = SimpleBar.instances.get(element); - if (sb) { - return $(sb.getContentElement()); - } - return $element; -} - -export function get_scroll_element($element) { - const element = $element.expectOne()[0]; - const sb = SimpleBar.instances.get(element); - if (sb) { - return $(sb.getScrollElement()); - } else if ("simplebar" in element.dataset) { - // The SimpleBar mutation observer hasn’t processed this element yet. - // Create the SimpleBar early in case we need to add event listeners. - return $(new SimpleBar(element).getScrollElement()); - } - return $element; -} - -export function reset_scrollbar($element) { - const element = $element.expectOne()[0]; - const sb = SimpleBar.instances.get(element); - if (sb) { - sb.getScrollElement().scrollTop = 0; - } else { - element.scrollTop = 0; - } -} diff --git a/web/src/ui_init.js b/web/src/ui_init.js index b22741c047..4e7e1a37a0 100644 --- a/web/src/ui_init.js +++ b/web/src/ui_init.js @@ -76,6 +76,7 @@ import * as resize from "./resize"; import * as rows from "./rows"; import * as scheduled_messages_overlay_ui from "./scheduled_messages_overlay_ui"; import * as scroll_bar from "./scroll_bar"; +import * as scroll_util from "./scroll_util"; import * as search from "./search"; import * as search_pill_widget from "./search_pill_widget"; import * as sent_messages from "./sent_messages"; @@ -102,7 +103,6 @@ import * as topic_list from "./topic_list"; import * as topic_zoom from "./topic_zoom"; import * as tutorial from "./tutorial"; import * as typing from "./typing"; -import * as ui from "./ui"; import * as unread from "./unread"; import * as unread_ui from "./unread_ui"; import * as user_group_edit from "./user_group_edit"; @@ -279,7 +279,7 @@ 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 $self = scroll_util.get_scroll_element($(this)); const scroll = $self.scrollTop(); const delta = e.originalEvent.deltaY; diff --git a/web/src/user_group_edit.js b/web/src/user_group_edit.js index 4ffa4c7bd3..707b9ede67 100644 --- a/web/src/user_group_edit.js +++ b/web/src/user_group_edit.js @@ -15,9 +15,9 @@ import {$t, $t_html} from "./i18n"; import * as overlays from "./overlays"; import {page_params} from "./page_params"; import * as people from "./people"; +import * as scroll_util from "./scroll_util"; import * as settings_data from "./settings_data"; import * as settings_ui from "./settings_ui"; -import * as ui from "./ui"; import * as ui_report from "./ui_report"; import * as user_group_edit_members from "./user_group_edit_members"; import * as user_group_ui_updates from "./user_group_ui_updates"; @@ -135,7 +135,7 @@ export function show_settings_for(node) { can_edit: can_edit(group.id), }); - ui.get_content_element($("#user_group_settings")).html(html); + scroll_util.get_content_element($("#user_group_settings")).html(html); user_group_ui_updates.update_toggler_for_group_setting(group); $("#user_group_settings .tab-container").prepend(toggler.get()); diff --git a/web/src/user_group_edit_members.js b/web/src/user_group_edit_members.js index 76cdc305bf..7a5900dd2d 100644 --- a/web/src/user_group_edit_members.js +++ b/web/src/user_group_edit_members.js @@ -13,8 +13,8 @@ import {$t, $t_html} from "./i18n"; import * as ListWidget from "./list_widget"; import {page_params} from "./page_params"; import * as people from "./people"; +import * as scroll_util from "./scroll_util"; import * as settings_users from "./settings_users"; -import * as ui from "./ui"; import * as user_group_edit from "./user_group_edit"; import * as user_groups from "./user_groups"; @@ -124,7 +124,7 @@ function show_user_group_membership_request_result({ already_subscribed_users, ignored_deactivated_users, }); - ui.get_content_element($user_group_subscription_req_result_elem).html(html); + scroll_util.get_content_element($user_group_subscription_req_result_elem).html(html); if (add_class) { $user_group_subscription_req_result_elem.addClass(add_class); } diff --git a/web/src/user_groups_settings_ui.js b/web/src/user_groups_settings_ui.js index 75b0bcdcc5..c5cacb4e36 100644 --- a/web/src/user_groups_settings_ui.js +++ b/web/src/user_groups_settings_ui.js @@ -12,7 +12,6 @@ import * as overlays from "./overlays"; import * as people from "./people"; import * as scroll_util from "./scroll_util"; import * as settings_data from "./settings_data"; -import * as ui from "./ui"; import * as user_group_create from "./user_group_create"; import * as user_group_edit from "./user_group_edit"; import * as user_groups from "./user_groups"; @@ -124,7 +123,9 @@ export function add_group_to_table(group) { }); group_list_widget.replace_list_data(user_groups.get_realm_user_groups()); - ui.get_content_element($("#groups_overlay_container .settings")).append($(settings_html)); + scroll_util + .get_content_element($("#groups_overlay_container .settings")) + .append($(settings_html)); // TODO: Address issue for visibility of newely created group. if (user_group_create.get_name() === group.name) { @@ -187,7 +188,9 @@ export function setup_page(callback) { const rendered = render_user_group_settings_overlay(template_data); - const $groups_overlay_container = ui.get_content_element($("#groups_overlay_container")); + const $groups_overlay_container = scroll_util.get_content_element( + $("#groups_overlay_container"), + ); $groups_overlay_container.empty(); $groups_overlay_container.append(rendered); diff --git a/web/tests/list_widget.test.js b/web/tests/list_widget.test.js index 750ec2204f..cae6977999 100644 --- a/web/tests/list_widget.test.js +++ b/web/tests/list_widget.test.js @@ -10,7 +10,7 @@ const blueslip = require("./lib/zblueslip"); // The ListWidget library allows you to insert objects // that are either jQuery, Element, or just raw HTML // strings. We initially test with raw strings. -const ui = mock_esm("../src/ui"); +const scroll_util = mock_esm("../src/scroll_util"); // We only need very simple jQuery wrappers for when the @@ -146,7 +146,7 @@ run_test("scrolling", () => { const items = []; let get_scroll_element_called = false; - ui.get_scroll_element = ($element) => { + scroll_util.get_scroll_element = ($element) => { get_scroll_element_called = true; return $element; }; @@ -183,7 +183,7 @@ run_test("not_scrolling", () => { const items = []; let get_scroll_element_called = false; - ui.get_scroll_element = ($element) => { + scroll_util.get_scroll_element = ($element) => { get_scroll_element_called = true; return $element; }; diff --git a/web/tests/scroll_util.test.js b/web/tests/scroll_util.test.js index c42ec45317..06a0da94cf 100644 --- a/web/tests/scroll_util.test.js +++ b/web/tests/scroll_util.test.js @@ -2,13 +2,9 @@ const {strict: assert} = require("assert"); -const {mock_esm, zrequire} = require("./lib/namespace"); +const {zrequire} = require("./lib/namespace"); const {run_test} = require("./lib/test"); -mock_esm("../src/ui", { - get_scroll_element: (element) => element, -}); - const scroll_util = zrequire("scroll_util"); run_test("scroll_delta", () => { @@ -100,6 +96,7 @@ run_test("scroll_element_into_container", () => { top = arg; return this; }, + __zjquery: true, }; })(); diff --git a/web/tests/stream_list.test.js b/web/tests/stream_list.test.js index 97215bed94..7443279221 100644 --- a/web/tests/stream_list.test.js +++ b/web/tests/stream_list.test.js @@ -27,8 +27,8 @@ mock_esm("../src/keydown_util", { }); const scroll_util = mock_esm("../src/scroll_util", { scroll_element_into_container() {}, + get_scroll_element: ($element) => $element, }); -mock_esm("../src/ui", {get_scroll_element: ($element) => $element}); mock_esm("../src/unread", { num_unread_for_stream: () => ({ unmuted_count: num_unread_for_stream, diff --git a/web/tests/stream_settings_ui.test.js b/web/tests/stream_settings_ui.test.js index 52b02c2d90..17d1ec6d36 100644 --- a/web/tests/stream_settings_ui.test.js +++ b/web/tests/stream_settings_ui.test.js @@ -8,7 +8,7 @@ const $ = require("./lib/zjquery"); const denmark_stream_id = 101; -const ui = mock_esm("../src/ui", { +const scroll_util = mock_esm("../src/scroll_util", { get_content_element: ($element) => $element, }); @@ -117,7 +117,7 @@ run_test("redraw_left_panel", ({mock_template}) => { $.create("#streams_overlay_container .stream-row", {children: sub_stubs}); let ui_called = false; - ui.reset_scrollbar = ($elem) => { + scroll_util.reset_scrollbar = ($elem) => { ui_called = true; assert.equal($elem, $("#subscription_overlay .streams-list")); };