paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 15:03:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose: Initialize scrolling buttons only when needed.

Browse Source
This commit is contained in:
Karl Stolley
2024-12-20 13:20:25 -06:00
committed by Tim Abbott
parent a5e234f8ff
commit 8feaa5e6e8
7 changed files with 76 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web/src/compose_ui.ts
View File

@@ -4,6 +4,7 @@
import autosize from "autosize";
import $ from "jquery";
import _ from "lodash";
import assert from "minimalistic-assert";
import {
insertTextIntoField,
replaceFieldText,
@@ -148,6 +149,56 @@ export function rewire_insert_and_scroll_into_view(
insert_and_scroll_into_view = value;
}
export function maybe_show_scrolling_formatting_buttons(container_selector: string): void {
const button_container = document.querySelector(container_selector);
const button_bar = document.querySelector(
`${container_selector} .compose-control-buttons-container`,
);
if (!button_container || !button_bar) {
return;
}
const button_container_width = button_container?.clientWidth;
const button_bar_width = button_bar?.scrollWidth;
const button_bar_scroll_left = button_bar?.scrollLeft;
const button_bar_max_left_scroll = button_bar_width - button_container_width;
assert(
typeof button_container_width === "number" &&
typeof button_bar_width === "number" &&
typeof button_bar_scroll_left === "number",
);
// Set these values as data attributes for ready access by
// other scrolling logic
//
// TODO: Modify eslint config, if we wish to avoid dataset
//
/* eslint unicorn/prefer-dom-node-dataset: "off" */
button_container.setAttribute("data-button-container-width", button_container_width.toString());
button_container.setAttribute("data-button-bar-width", button_bar_width.toString());
button_container.setAttribute(
"data-button-bar-max-left-scroll",
button_bar_max_left_scroll.toString(),
);
button_container.classList.remove("can-scroll-forward", "can-scroll-backward");
if (button_container_width < button_bar_width) {
// It's possible that the buttons may be scrolled prior
// to the viewport being resized
if (button_bar_scroll_left < button_bar_max_left_scroll) {
button_container?.classList.add("can-scroll-forward");
}
if (button_bar_scroll_left > 0) {
button_container?.classList.add("can-scroll-backward");
}
}
}
function get_focus_area(opts: ComposeTriggeredOptions): string {
// Set focus to "Topic" when narrowed to a stream+topic
// and "Start new conversation" button clicked.