views: Write a common show and hide function.

Fixes #26688
This commit is contained in:
Aman Agrawal 2023-09-23 06:20:22 +00:00 committed by Tim Abbott
parent 2f7a260f3a
commit e0ff125116
4 changed files with 104 additions and 123 deletions

View File

@ -240,6 +240,7 @@ EXEMPT_FILES = make_set(
"web/src/user_status_ui.js", "web/src/user_status_ui.js",
"web/src/user_topics.ts", "web/src/user_topics.ts",
"web/src/user_topics_ui.js", "web/src/user_topics_ui.js",
"web/src/views_util.js",
"web/src/webpack_public_path.js", "web/src/webpack_public_path.js",
"web/src/zcommand.js", "web/src/zcommand.js",
"web/src/zform.js", "web/src/zform.js",

View File

@ -14,23 +14,16 @@ import * as keydown_util from "./keydown_util";
import * as left_sidebar_navigation_area from "./left_sidebar_navigation_area"; import * as left_sidebar_navigation_area from "./left_sidebar_navigation_area";
import {localstorage} from "./localstorage"; import {localstorage} from "./localstorage";
import * as message_store from "./message_store"; import * as message_store from "./message_store";
import * as message_view_header from "./message_view_header";
import * as narrow from "./narrow";
import * as narrow_state from "./narrow_state";
import * as navigate from "./navigate";
import * as people from "./people"; import * as people from "./people";
import * as pm_list from "./pm_list";
import * as search from "./search";
import * as stream_color from "./stream_color"; import * as stream_color from "./stream_color";
import * as stream_data from "./stream_data"; import * as stream_data from "./stream_data";
import * as stream_list from "./stream_list";
import * as sub_store from "./sub_store"; import * as sub_store from "./sub_store";
import * as unread from "./unread"; import * as unread from "./unread";
import * as unread_ops from "./unread_ops"; import * as unread_ops from "./unread_ops";
import * as unread_ui from "./unread_ui";
import * as user_status from "./user_status"; import * as user_status from "./user_status";
import * as user_topics from "./user_topics"; import * as user_topics from "./user_topics";
import * as util from "./util"; import * as util from "./util";
import * as views_util from "./views_util";
let dms_dict = {}; let dms_dict = {};
let topics_dict = {}; let topics_dict = {};
@ -75,59 +68,21 @@ function should_include_muted() {
} }
export function show() { export function show() {
// hashchange library is expected to hide other views. views_util.show({
if (narrow.has_shown_message_list_view) { highlight_view_in_left_sidebar: left_sidebar_navigation_area.highlight_inbox_view,
narrow.save_pre_narrow_offset_for_reload(); $view: $("#inbox-view"),
} update_compose: compose_closed_ui.set_standard_text_for_reply_button,
is_visible,
if (is_visible()) { set_visible,
return; complete_rerender,
} });
left_sidebar_navigation_area.highlight_inbox_view();
stream_list.handle_narrow_deactivated();
$("#message_feed_container").hide();
$("#inbox-view").show();
set_visible(true);
unread_ui.hide_unread_banner();
narrow_state.reset_current_filter();
message_view_header.render_title_area();
narrow.handle_middle_pane_transition();
narrow_state.reset_current_filter();
narrow.update_narrow_title(narrow_state.filter());
message_view_header.render_title_area();
pm_list.handle_narrow_deactivated();
search.clear_search_form();
complete_rerender();
compose_closed_ui.set_standard_text_for_reply_button();
} }
export function hide() { export function hide() {
const $focused_element = $(document.activeElement); views_util.hide({
$view: $("#inbox-view"),
if ($("#inbox-view").has($focused_element)) { set_visible,
$focused_element.trigger("blur"); });
}
$("#message_feed_container").show();
$("#inbox-view").hide();
set_visible(false);
// This solves a bug with message_view_header
// being broken sometimes when we narrow
// to a filter and back to recent topics
// before it completely re-rerenders.
message_view_header.render_title_area();
// Fire our custom event
$("#message_feed_container").trigger("message_feed_shown");
// This makes sure user lands on the selected message
// and not always at the top of the narrow.
navigate.plan_scroll_to_selected();
} }
function get_topic_key(stream_id, topic) { function get_topic_key(stream_id, topic) {

View File

@ -18,33 +18,25 @@ import * as loading from "./loading";
import {localstorage} from "./localstorage"; import {localstorage} from "./localstorage";
import * as message_store from "./message_store"; import * as message_store from "./message_store";
import * as message_util from "./message_util"; import * as message_util from "./message_util";
import * as message_view_header from "./message_view_header";
import * as muted_users from "./muted_users"; import * as muted_users from "./muted_users";
import * as narrow from "./narrow";
import * as narrow_state from "./narrow_state";
import * as navigate from "./navigate";
import * as overlays from "./overlays"; import * as overlays from "./overlays";
import {page_params} from "./page_params"; import {page_params} from "./page_params";
import * as people from "./people"; import * as people from "./people";
import * as pm_list from "./pm_list";
import * as popovers from "./popovers"; import * as popovers from "./popovers";
import * as recent_senders from "./recent_senders"; import * as recent_senders from "./recent_senders";
import {get, process_message, topics} from "./recent_view_data"; import {get, process_message, topics} from "./recent_view_data";
import {get_key_from_message, get_topic_key, is_visible, set_visible} from "./recent_view_util"; import {get_key_from_message, get_topic_key, is_visible, set_visible} from "./recent_view_util";
import * as resize from "./resize";
import * as scroll_util from "./scroll_util"; import * as scroll_util from "./scroll_util";
import * as search from "./search";
import * as stream_data from "./stream_data"; import * as stream_data from "./stream_data";
import * as stream_list from "./stream_list";
import * as sub_store from "./sub_store"; import * as sub_store from "./sub_store";
import * as timerender from "./timerender"; import * as timerender from "./timerender";
import * as ui_util from "./ui_util"; import * as ui_util from "./ui_util";
import * as unread from "./unread"; import * as unread from "./unread";
import * as unread_ops from "./unread_ops"; import * as unread_ops from "./unread_ops";
import * as unread_ui from "./unread_ui";
import * as user_card_popover from "./user_card_popover"; import * as user_card_popover from "./user_card_popover";
import * as user_status from "./user_status"; import * as user_status from "./user_status";
import * as user_topics from "./user_topics"; import * as user_topics from "./user_topics";
import * as views_util from "./views_util";
let topics_widget; let topics_widget;
// Sets the number of avatars to display. // Sets the number of avatars to display.
@ -916,40 +908,18 @@ export function complete_rerender() {
} }
export function show() { export function show() {
if (narrow.has_shown_message_list_view) { views_util.show({
narrow.save_pre_narrow_offset_for_reload(); highlight_view_in_left_sidebar: left_sidebar_navigation_area.highlight_recent_view,
} $view: $("#recent_view"),
// We want to show `new stream message` instead of
if (is_visible()) { // `new topic`, which we are already doing in this
// If we're already visible, E.g. because the user hit Esc // function. So, we reuse it here.
// while already in the Recent Conversations view, do nothing. update_compose: compose_closed_ui.update_buttons_for_recent_view,
return; is_recent_view: true,
} is_visible,
// Hide selected elements in the left sidebar. set_visible,
left_sidebar_navigation_area.highlight_recent_view(); complete_rerender,
stream_list.handle_narrow_deactivated(); });
// Hide "middle-column" which has html for rendering
// a messages narrow. We hide it and show Recent Conversations.
$("#message_feed_container").hide();
$("#recent_view").show();
set_visible(true);
unread_ui.hide_unread_banner();
// We want to show `new stream message` instead of
// `new topic`, which we are already doing in this
// function. So, we reuse it here.
compose_closed_ui.update_buttons_for_recent_view();
narrow_state.reset_current_filter();
narrow.update_narrow_title(narrow_state.filter());
message_view_header.render_title_area();
narrow.handle_middle_pane_transition();
pm_list.handle_narrow_deactivated();
search.clear_search_form();
complete_rerender();
resize.update_recent_view_filters_height();
} }
function filter_buttons() { function filter_buttons() {
@ -957,28 +927,10 @@ function filter_buttons() {
} }
export function hide() { export function hide() {
// On firefox (and flaky on other browsers), focus views_util.hide({
// remains on the focused element even after it is hidden. We $view: $("#recent_view"),
// forcefully blur it so that focus returns to the visible set_visible,
// focused element. });
const $focused_element = $(document.activeElement);
if ($("#recent_view").has($focused_element)) {
$focused_element.trigger("blur");
}
$("#message_feed_container").show();
$("#recent_view").hide();
set_visible(false);
// This solves a bug with message_view_header
// being broken sometimes when we narrow
// to a filter and back to Recent Conversations
// before it completely re-rerenders.
message_view_header.render_title_area();
// This makes sure user lands on the selected message
// and not always at the top of the narrow.
navigate.plan_scroll_to_selected();
} }
function is_focus_at_last_table_row() { function is_focus_at_last_table_row() {

73
web/src/views_util.js Normal file
View File

@ -0,0 +1,73 @@
import $ from "jquery";
import * as message_view_header from "./message_view_header";
import * as narrow from "./narrow";
import * as narrow_state from "./narrow_state";
import * as navigate from "./navigate";
import * as pm_list from "./pm_list";
import * as resize from "./resize";
import * as search from "./search";
import * as stream_list from "./stream_list";
import * as unread_ui from "./unread_ui";
export function show(opts) {
if (narrow.has_shown_message_list_view) {
narrow.save_pre_narrow_offset_for_reload();
}
if (opts.is_visible()) {
// If we're already visible, E.g. because the user hit Esc
// while already in the view, do nothing.
return;
}
// Hide selected elements in the left sidebar.
opts.highlight_view_in_left_sidebar();
stream_list.handle_narrow_deactivated();
// Hide "middle-column" which has html for rendering
// a messages narrow. We hide it and show the view.
$("#message_feed_container").hide();
opts.$view.show();
opts.set_visible(true);
unread_ui.hide_unread_banner();
opts.update_compose();
narrow_state.reset_current_filter();
narrow.update_narrow_title(narrow_state.filter());
message_view_header.render_title_area();
narrow.handle_middle_pane_transition();
pm_list.handle_narrow_deactivated();
search.clear_search_form();
opts.complete_rerender();
resize.update_recent_view_filters_height();
// Misc.
if (opts.is_recent_view) {
resize.update_recent_view_filters_height();
}
}
export function hide(opts) {
const $focused_element = $(document.activeElement);
if (opts.$view.has($focused_element)) {
$focused_element.trigger("blur");
}
$("#message_feed_container").show();
opts.$view.hide();
opts.set_visible(false);
// This solves a bug with message_view_header
// being broken sometimes when we narrow
// to a filter and back to view
// before it completely re-rerenders.
message_view_header.render_title_area();
// Fire our custom event
$("#message_feed_container").trigger("message_feed_shown");
// This makes sure user lands on the selected message
// and not always at the top of the narrow.
navigate.plan_scroll_to_selected();
}