Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Lalit 2023-04-25 21:31:02 +05:30 committed by Tim Abbott
parent b55ee161e2
commit b9223088f3
33 changed files with 140 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tools/test-js-with-node
View File

@ -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",

8
web/src/attachments_ui.js
View File

@ -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) {

6
web/src/buddy_list.js
View File

@ -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();

24
web/src/emoji_picker.js
View File

@ -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);
}
});

8
web/src/info_overlay.js
View File

@ -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: {

6
web/src/invite.js
View File

@ -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;
},
});
}

4
web/src/list_widget.js
View File

@ -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.

5
web/src/pm_list.js
View File

@ -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);
}

10
web/src/recent_topics_ui.js
View File

@ -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();

42
web/src/scroll_util.js
View File

@ -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;

4
web/src/settings_emoji.js
View File

@ -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(),

4
web/src/settings_exports.js
View File

@ -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(),

4
web/src/settings_linkifiers.js
View File

@ -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(),

6
web/src/settings_muted_users.js
View File

@ -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"),

4
web/src/settings_panel_menu.js
View File

@ -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");

4
web/src/settings_playgrounds.js
View File

@ -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(),

4
web/src/settings_streams.js
View File

@ -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(),

6
web/src/settings_user_topics.js
View File

@ -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"],

4
web/src/settings_users.js
View File

@ -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);
};
}

4
web/src/stream_edit.js
View File

@ -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);

4
web/src/stream_edit_subscribers.js
View File

@ -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);
}

3
web/src/stream_list.js
View File

@ -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();
});

21
web/src/stream_settings_ui.js
View File

@ -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();

4
web/src/topic_list.js
View File

@ -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);

36
web/src/ui.js
View File

@ -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;
}
}

4
web/src/ui_init.js
View File

@ -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;

4
web/src/user_group_edit.js
View File

@ -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());

4
web/src/user_group_edit_members.js
View File

@ -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);
}

9
web/src/user_groups_settings_ui.js
View File

@ -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);

6
web/tests/list_widget.test.js
View File

@ -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;
};

7
web/tests/scroll_util.test.js
View File

@ -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,
};
})();

2
web/tests/stream_list.test.js
View File

@ -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,

4
web/tests/stream_settings_ui.test.js
View File

@ -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"));
};