zulip/static/js/recent_topics_ui.js

855 lines
29 KiB
JavaScript

import $ from "jquery";
import render_recent_topic_row from "../templates/recent_topic_row.hbs";
import render_recent_topics_filters from "../templates/recent_topics_filters.hbs";
import render_recent_topics_body from "../templates/recent_topics_table.hbs";
import * as compose_closed_ui from "./compose_closed_ui";
import * as hash_util from "./hash_util";
import {$t} from "./i18n";
import * as ListWidget from "./list_widget";
import {localstorage} from "./localstorage";
import * as message_store from "./message_store";
import * as message_util from "./message_util";
import * as message_view_header from "./message_view_header";
import * as muted_topics from "./muted_topics";
import * as narrow from "./narrow";
import * as narrow_state from "./narrow_state";
import * as navbar_alerts from "./navbar_alerts";
import * as navigate from "./navigate";
import * as people from "./people";
import * as recent_senders from "./recent_senders";
import {get, process_message, topics} from "./recent_topics_data";
import {get_topic_key, is_in_focus, is_visible, set_visible} from "./recent_topics_util";
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 unread from "./unread";
let topics_widget;
// Sets the number of avatars to display.
// Rest of the avatars, if present, are displayed as {+x}
const MAX_AVATAR = 4;
const MAX_EXTRA_SENDERS = 10;
// Use this to set the focused element.
//
// We set it's value to `table` in case the
// focus in one of the table rows, since the
// table rows are constantly updated and tracking
// the selected element in them would be tedious via
// jquery.
//
// 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";
// If user clicks a topic in recent topics, then
// we store that topic here so that we can restore focus
// to that topic when user revisits.
let last_visited_topic = "";
let row_focus = 0;
// Start focus on the topic column, so Down+Enter works to visit a topic.
let col_focus = 1;
export const COLUMNS = {
stream: 0,
topic: 1,
mute: 2,
read: 3,
};
// The number of selectable actions in a recent_topics. Used to
// implement wraparound of elements with the right/left keys. Must be
// increased when we add new actions, or rethought if we add optional
// actions that only appear in some rows.
const MAX_SELECTABLE_COLS = 4;
// we use localstorage to persist the recent topic filters
const ls_key = "recent_topic_filters";
const ls = localstorage();
let filters = new Set();
export function clear_for_tests() {
filters.clear();
topics.clear();
topics_widget = undefined;
}
export function save_filters() {
ls.set(ls_key, Array.from(filters));
}
export function load_filters() {
filters = new Set(ls.get(ls_key));
}
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");
compose_closed_ui.set_standard_text_for_reply_button();
}
function get_min_load_count(already_rendered_count, load_count) {
const extra_rows_for_viewing_pleasure = 15;
if (row_focus > already_rendered_count + load_count) {
return row_focus + extra_rows_for_viewing_pleasure - already_rendered_count;
}
return load_count;
}
function is_table_focused() {
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) {
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);
// We need to allow table to render first before setting focus.
setTimeout(
() => topic_row.find(".recent_topics_focusable").eq(col).children().trigger("focus"),
0,
);
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);
if (topic_offset === "above") {
scroll_element.scrollBy({top: -1 * half_height_of_visible_area});
} else if (topic_offset === "below") {
scroll_element.scrollBy({top: half_height_of_visible_area});
}
}
const message = {
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;
}
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) {
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_last_msg_id = topics.get(topic_id).last_msg_id;
return message_store.get(topic_last_msg_id);
}
return undefined;
}
export function revive_current_focus() {
// After re-render, the current_focus_elem is no longer linked
// to the focused element, this function attempts to revive the
// link and focus to the element prior to the rerender.
// We try to avoid setting focus when user
// is not focused on recent topics.
if (!is_in_focus()) {
return false;
}
if (!current_focus_elem) {
set_default_focus();
return false;
}
if (is_table_focused()) {
if (last_visited_topic) {
const topic_last_msg_id = topics.get(last_visited_topic).last_msg_id;
const current_list = topics_widget.get_current_list();
const last_visited_topic_index = current_list.findIndex(
(topic) => topic.last_msg_id === topic_last_msg_id,
);
if (last_visited_topic_index >= 0) {
row_focus = last_visited_topic_index;
}
last_visited_topic = "";
}
set_table_focus(row_focus, col_focus);
return true;
}
const filter_button = current_focus_elem.data("filter");
if (!filter_button) {
set_default_focus();
} else {
current_focus_elem = $("#recent_topics_filter_buttons").find(
`[data-filter='${CSS.escape(filter_button)}']`,
);
current_focus_elem.trigger("focus");
}
return true;
}
export function process_messages(messages) {
// While this is inexpensive and handles all the cases itself,
// the UX can be bad if user wants to scroll down the list as
// the UI will be returned to the beginning of the list on every
// update.
//
// Only rerender if topic_data actually
// changed.
let topic_data_changed = false;
for (const msg of messages) {
if (process_message(msg)) {
topic_data_changed = true;
}
}
if (topic_data_changed) {
complete_rerender();
}
}
function format_topic(topic_data) {
const last_msg = message_store.get(topic_data.last_msg_id);
const stream = last_msg.stream;
const stream_id = last_msg.stream_id;
const stream_info = sub_store.get(stream_id);
if (stream_info === undefined) {
// stream was deleted
return {};
}
const topic = last_msg.topic;
const time = new Date(last_msg.timestamp * 1000);
const last_msg_time = timerender.last_seen_status_from_date(time);
const full_datetime = timerender.get_full_datetime(time);
// We hide the row according to filters or if it's muted.
// We only supply the data to the topic rows and let jquery
// display / hide them according to filters instead of
// doing complete re-render.
const topic_muted = Boolean(muted_topics.is_topic_muted(stream_id, topic));
const stream_muted = stream_data.is_muted(stream_id);
const muted = topic_muted || stream_muted;
const unread_count = unread.num_unread_for_topic(stream_id, topic);
// Display in most recent sender first order
const all_senders = recent_senders.get_topic_recent_senders(stream_id, topic);
const senders = all_senders.slice(-MAX_AVATAR);
const senders_info = people.sender_info_for_recent_topics_row(senders);
// Collect extra senders fullname for tooltip.
const extra_sender_ids = all_senders.slice(0, -MAX_AVATAR);
const displayed_other_senders = extra_sender_ids.slice(-MAX_EXTRA_SENDERS);
const displayed_other_names = people.get_display_full_names(displayed_other_senders.reverse());
if (extra_sender_ids.length > MAX_EXTRA_SENDERS) {
// We display only 10 extra senders in tooltips,
// and just display remaining number of senders.
const remaining_senders = extra_sender_ids.length - MAX_EXTRA_SENDERS;
// Pluralization syntax from:
// https://formatjs.io/docs/core-concepts/icu-syntax/#plural-format
displayed_other_names.push(
$t(
{
defaultMessage:
"and {remaining_senders, plural, one {1 other} other {# others}}.",
},
{remaining_senders},
),
);
}
const other_sender_names = displayed_other_names.join("<br/>");
return {
// stream info
stream_id,
stream,
stream_color: stream_info.color,
invite_only: stream_info.invite_only,
is_web_public: stream_info.is_web_public,
stream_url: hash_util.by_stream_uri(stream_id),
topic,
topic_key: get_topic_key(stream_id, topic),
unread_count,
last_msg_time,
topic_url: hash_util.by_stream_topic_uri(stream_id, topic),
senders: senders_info,
other_senders_count: Math.max(0, all_senders.length - MAX_AVATAR),
other_sender_names,
muted,
topic_muted,
participated: topic_data.participated,
full_last_msg_date_time: full_datetime,
};
}
function get_topic_row(topic_data) {
const msg = message_store.get(topic_data.last_msg_id);
const topic_key = get_topic_key(msg.stream_id, msg.topic);
return $(`#${CSS.escape("recent_topic:" + topic_key)}`);
}
export function process_topic_edit(old_stream_id, old_topic, new_topic, new_stream_id) {
// See `recent_senders.process_topic_edit` for
// logic behind this and important notes on use of this function.
topics.delete(get_topic_key(old_stream_id, old_topic));
const old_topic_msgs = message_util.get_messages_in_topic(old_stream_id, old_topic);
process_messages(old_topic_msgs);
new_stream_id = new_stream_id || old_stream_id;
const new_topic_msgs = message_util.get_messages_in_topic(new_stream_id, new_topic);
process_messages(new_topic_msgs);
}
export function topic_in_search_results(keyword, stream, topic) {
if (keyword === "") {
return true;
}
const text = (stream + " " + topic).toLowerCase();
const search_words = keyword.toLowerCase().split(/\s+/);
return search_words.every((word) => text.includes(word));
}
export function update_topics_of_deleted_message_ids(message_ids) {
const topics_to_rerender = message_util.get_topics_for_message_ids(message_ids);
for (const [stream_id, topic] of topics_to_rerender.values()) {
topics.delete(get_topic_key(stream_id, topic));
const msgs = message_util.get_messages_in_topic(stream_id, topic);
process_messages(msgs);
}
}
export function filters_should_hide_topic(topic_data) {
const msg = message_store.get(topic_data.last_msg_id);
const sub = sub_store.get(msg.stream_id);
if (sub === undefined || !sub.subscribed) {
// Never try to process deactivated & unsubscribed stream msgs.
return true;
}
if (filters.has("unread")) {
const unreadCount = unread.num_unread_for_topic(msg.stream_id, msg.topic);
if (unreadCount === 0) {
return true;
}
}
if (!topic_data.participated && filters.has("participated")) {
return true;
}
if (!filters.has("include_muted")) {
const topic_muted = Boolean(muted_topics.is_topic_muted(msg.stream_id, msg.topic));
const stream_muted = stream_data.is_muted(msg.stream_id);
if (topic_muted || stream_muted) {
return true;
}
}
const search_keyword = $("#recent_topics_search").val();
if (!topic_in_search_results(search_keyword, msg.stream, msg.topic)) {
return true;
}
return false;
}
export function inplace_rerender(topic_key) {
if (!is_visible()) {
return false;
}
if (!topics.has(topic_key)) {
return false;
}
const topic_data = topics.get(topic_key);
topics_widget.render_item(topic_data);
const topic_row = get_topic_row(topic_data);
if (filters_should_hide_topic(topic_data)) {
topic_row.hide();
} else {
topic_row.show();
}
revive_current_focus();
return true;
}
export function update_topic_is_muted(stream_id, topic) {
const key = get_topic_key(stream_id, topic);
if (!topics.has(key)) {
// we receive mute request for a topic we are
// not tracking currently
return false;
}
inplace_rerender(key);
return true;
}
export function update_topic_unread_count(message) {
const topic_key = get_topic_key(message.stream_id, message.topic);
inplace_rerender(topic_key);
}
export function set_filter(filter) {
// This function updates the `filters` variable
// after user clicks on one of the filter buttons
// based on `btn-recent-selected` class and current
// set `filters`.
// Get the button which was clicked.
const filter_elem = $("#recent_topics_filter_buttons").find(
`[data-filter="${CSS.escape(filter)}"]`,
);
// If user clicks `All`, we clear all filters.
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")) {
filters.delete(filter);
// If the button was not selected, we add the filter.
} else {
filters.add(filter);
}
save_filters();
}
function show_selected_filters() {
// Add `btn-selected-filter` to the buttons to show
// which filters are applied.
if (filters.size === 0) {
$("#recent_topics_filter_buttons")
.find('[data-filter="all"]')
.addClass("btn-recent-selected")
.attr("aria-checked", "true");
} else {
for (const filter of filters) {
$("#recent_topics_filter_buttons")
.find(`[data-filter="${CSS.escape(filter)}"]`)
.addClass("btn-recent-selected")
.attr("aria-checked", "true");
}
}
}
export function update_filters_view() {
const rendered_filters = render_recent_topics_filters({
filter_participated: filters.has("participated"),
filter_unread: filters.has("unread"),
filter_muted: filters.has("include_muted"),
});
$("#recent_filters_group").html(rendered_filters);
show_selected_filters();
topics_widget.hard_redraw();
}
function stream_sort(a, b) {
const a_stream = message_store.get(a.last_msg_id).stream;
const b_stream = message_store.get(b.last_msg_id).stream;
if (a_stream > b_stream) {
return 1;
} else if (a_stream === b_stream) {
return 0;
}
return -1;
}
function topic_sort(a, b) {
const a_topic = message_store.get(a.last_msg_id).topic;
const b_topic = message_store.get(b.last_msg_id).topic;
if (a_topic > b_topic) {
return 1;
} else if (a_topic === b_topic) {
return 0;
}
return -1;
}
function topic_offset_to_visible_area(topic_row) {
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_bottom =
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();
// Topic is above the visible scroll region.
if (topic_row_top < scroll_container_top) {
return "above";
// Topic is below the visible scroll region.
} else if (topic_row_bottom > scroll_container_bottom) {
return "below";
}
// Topic is visible
return "visible";
}
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");
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);
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");
row_focus = topic_rows.index(topic_row);
set_table_focus(row_focus, col_focus);
}
}
function is_scroll_position_for_render(scroll_container) {
const table_bottom_margin = 100; // Extra margin at the bottom of table.
const table_row_height = 50;
return (
scroll_container.scrollTop +
scroll_container.clientHeight +
table_bottom_margin +
table_row_height >
scroll_container.scrollHeight
);
}
export function complete_rerender() {
if (!is_visible()) {
return;
}
// Update header
load_filters();
show_selected_filters();
// Show topics list
const mapped_topic_values = Array.from(get().values()).map((value) => value);
if (topics_widget) {
topics_widget.replace_list_data(mapped_topic_values);
return;
}
const rendered_body = render_recent_topics_body({
filter_participated: filters.has("participated"),
filter_unread: filters.has("unread"),
filter_muted: filters.has("include_muted"),
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, {
name: "recent_topics_table",
parent_container: $("#recent_topics_table"),
modifier(item) {
return render_recent_topic_row(format_topic(item));
},
filter: {
// We use update_filters_view & filters_should_hide_topic to do all the
// filtering for us, which is called using click_handlers.
predicate(topic_data) {
return !filters_should_hide_topic(topic_data);
},
},
sort_fields: {
stream_sort,
topic_sort,
},
html_selector: get_topic_row,
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,
get_min_load_count,
});
}
export function show() {
if (is_visible()) {
// If we're already visible, E.g. because the user hit Esc
// while already in the recent topics view, do nothing.
return;
}
// Hide selected elements in the left sidebar.
top_left_corner.narrow_to_recent_topics();
stream_list.handle_narrow_deactivated();
// Hide "middle-column" which has html for rendering
// a messages narrow. We hide it and show recent topics.
$("#message_feed_container").hide();
$("#recent_topics_view").show();
set_visible(true);
$("#message_view_header_underpadding").hide();
$(".header").css("padding-bottom", "0px");
// 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_topics();
narrow_state.reset_current_filter();
narrow.set_narrow_title("Recent topics");
message_view_header.render_title_area();
complete_rerender();
}
function filter_buttons() {
return $("#recent_filters_group").children();
}
export function hide() {
$("#message_feed_container").show();
$("#recent_topics_view").hide();
set_visible(false);
// On firefox (and flaky on other browsers), focus
// remains on search box even after it is hidden. We
// forcefully blur it so that focus returns to the visible
// focused element.
$("#recent_topics_search").trigger("blur");
$("#message_view_header_underpadding").show();
$(".header").css("padding-bottom", "10px");
// 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();
// Fixes misaligned message_view and hidden
// floating_recipient_bar.
navbar_alerts.resize_app();
// 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() {
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";
col_focus = col;
row_focus = topic_row_index;
if (col === COLUMNS.topic) {
last_visited_topic = topic_key;
}
// Set compose_closed_ui reply button text. The rest of the table
// focus logic should be a noop.
set_table_focus(row_focus, col_focus);
}
export function change_focused_element($elt, input_key) {
// Called from hotkeys.js; like all logic in that module,
// returning true will cause the caller to do
// preventDefault/stopPropagation; false will let the browser
// handle the key.
if ($elt.attr("id") === "recent_topics_search") {
// Since the search box a text area, we want the browser to handle
// Left/Right and selection within the widget; but if the user
// arrows off the edges, we should move focus to the adjacent widgets..
const textInput = $("#recent_topics_search").get(0);
const start = textInput.selectionStart;
const end = textInput.selectionEnd;
const text_length = textInput.value.length;
let is_selected = false;
if (end - start > 0) {
is_selected = true;
}
switch (input_key) {
// Allow browser to handle all
// character keypresses.
case "vim_left":
case "vim_right":
case "vim_down":
case "vim_up":
case "open_recent_topics":
return false;
case "shift_tab":
current_focus_elem = filter_buttons().last();
break;
case "left_arrow":
if (start !== 0 || is_selected) {
return false;
}
current_focus_elem = filter_buttons().last();
break;
case "tab":
current_focus_elem = filter_buttons().first();
break;
case "right_arrow":
if (end !== text_length || is_selected) {
return false;
}
current_focus_elem = filter_buttons().first();
break;
case "down_arrow":
set_table_focus(row_focus, col_focus);
return true;
case "click":
// Note: current_focus_elem can be different here, so we just
// set current_focus_elem to the input box, we don't want .trigger("focus") on
// it since it is already focused.
// 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");
compose_closed_ui.set_standard_text_for_reply_button();
return true;
case "escape":
if (is_table_focused()) {
return false;
}
set_table_focus(row_focus, col_focus);
return true;
}
} else if ($elt.hasClass("btn-recent-filters")) {
switch (input_key) {
case "click":
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");
} else {
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");
} else {
current_focus_elem = $elt.next();
}
break;
case "vim_down":
case "down_arrow":
set_table_focus(row_focus, col_focus);
return true;
case "escape":
if (is_table_focused()) {
return false;
}
set_table_focus(row_focus, col_focus);
return true;
}
} else if (is_table_focused()) {
// For arrowing around the table of topics, we implement left/right
// wraparound. Going off the top or the bottom takes one
// to the navigation at the top (see set_table_focus).
switch (input_key) {
case "escape":
return false;
case "open_recent_topics":
set_default_focus();
return true;
case "shift_tab":
case "vim_left":
case "left_arrow":
col_focus -= 1;
if (col_focus < 0) {
col_focus = MAX_SELECTABLE_COLS - 1;
}
break;
case "tab":
case "vim_right":
case "right_arrow":
col_focus += 1;
if (col_focus >= MAX_SELECTABLE_COLS) {
col_focus = 0;
}
break;
case "vim_down":
// We stop user at last table row
// so that user doesn't end up in
// input box where it is impossible to
// get out of using vim_up / vim_down
// keys. This also blocks the user from
// having `jjjj` typed in the input box
// when continuously pressing `j`.
if (is_focus_at_last_table_row()) {
return true;
}
row_focus += 1;
break;
case "down_arrow":
row_focus += 1;
break;
case "vim_up":
// See comment on vim_down.
// Similarly, blocks the user from
// having `kkkk` typed in the input box
// when continuously pressing `k`.
if (row_focus === 0) {
return true;
}
row_focus -= 1;
break;
case "up_arrow":
row_focus -= 1;
}
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")) {
compose_closed_ui.set_standard_text_for_reply_button();
}
return true;
}
return false;
}