chuijs 4.0.2 → 4.0.4

package/framework/components/chui_write_bar/write_bar.js

@@ -0,0 +1,320 @@
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { optionOr, setStyles } = require("../../modules/chui_functions");
+
+/** Предел роста поля: дальше текст уходит в прокрутку самого поля, а не растёт панель */
+const DEFAULT_MAX_HEIGHT = 120;
+
+/**
+ * Кнопка панели ввода: значок с подписью для скринридера и счётчиком.
+ *
+ * Это настоящий `<button>`, а не кастомный тег: клавиатура, фокус и роль у него уже есть,
+ * и скринридер читает его как кнопку без дополнительных договоров.
+ *
+ * Подпись обязательна — лигатура значка («attach_file») ничего не говорит скринридеру,
+ * а сам значок скрыт от дерева доступности (`Icon` ставит `aria-hidden`). Счётчик нужен
+ * кнопкам, за которыми стоит число: выбранные вложения, эмодзи, черновик.
+ */
+class WriteBarIcon {
+    #root = document.createElement("button");
+    #label = String();
+    #onClick = undefined;
+    #disabled = false;
+    #badge = document.createElement("write_bar_badge");
+
+    constructor(options = {}) {
+        const icon = optionOr(options.icon, String());
+        const label = optionOr(options.label, String());
+        this.#label = label === "" ? I18n.t("feedback.writeBarButton") : label;
+        this.#root.type = "button";
+        this.#root.className = "write_bar_button";
+        if (icon !== "") this.#root.innerHTML = new Icon(icon, "20px").getHTML();
+        if (options.accent === true) this.#root.dataset.accent = "true";
+        this.#root.setAttribute("aria-label", this.#label);
+        // Подсказка мышью повторяет имя кнопки: подписи в панели нет, а догадываться — не дело
+        this.#root.title = this.#label;
+        this.#onClick = typeof options.onClick === "function" ? options.onClick : undefined;
+        this.#root.addEventListener("click", () => {
+            if (this.#disabled === true) return;
+            if (this.#onClick !== undefined) this.#onClick(this);
+        });
+        if (options.badge !== undefined) this.setBadge(options.badge);
+        if (options.disabled === true) this.setDisabled(true);
+    }
+
+    /** Счётчик на кнопке: число показывает плашка, скринридеру оно попадает в подпись */
+    setBadge(count = Number()) {
+        const value = Number(count);
+        const shown = Number.isFinite(value) && value > 0 ? String(value) : "";
+        this.#badge.innerText = shown;
+        this.#badge.hidden = shown === "";
+        this.#root.setAttribute(
+            "aria-label",
+            shown === "" ? this.#label : `${this.#label}, ${I18n.t("feedback.writeBarBadge", { value: shown })}`
+        );
+        if (shown !== "" && this.#badge.parentNode === null) this.#root.appendChild(this.#badge);
+        return this;
+    }
+
+    setDisabled(boolean = Boolean()) {
+        this.#disabled = boolean === true;
+        this.#root.disabled = this.#disabled;
+        return this;
+    }
+
+    setLabel(text = String()) {
+        this.#label = String(text);
+        this.#root.setAttribute("aria-label", this.#label);
+        this.#root.title = this.#label;
+        return this;
+    }
+
+    set() {
+        return this.#root;
+    }
+}
+
+/**
+ * Панель ввода — нижняя строка приложения: слева вложения и эмодзи, по центру поле текста,
+ * справа отправка.
+ *
+ * Поле растёт под содержимое до `maxHeight` (по умолчанию 120 px), дальше текст уходит
+ * в прокрутку поля — панель места не отнимает. Enter отправляет, Shift+Enter переносит
+ * строку (`setEnterSends(false)` возвращает обычное поле с переносом), во время набора
+ * иероглифов Enter выбирает вариант и не отправляет.
+ *
+ * Опции: `id`, `placeholder`, `value`, `maxHeight`, `disabled`, `shadow` (тень вместо
+ * верхней волосяной линии — для панели поверх содержимого), `enterSends`, `sendText`
+ * (подпись кнопки отправки), `buttons` (кнопки панели), `onSend`.
+ *
+ * Методы: `getValue()`, `setValue(text)`, `clear()`, `send()`, `addButton(options)`,
+ * `addSendListener(fn)`, `removeSendListener(fn)`, `setPlaceholder(text)`, `setDisabled(bool)`,
+ * `isDisabled()`, `setEnterSends(bool)`, `setSendLabel(text)`, `focus()`, `blur()`, `getField()`,
+ * `getSendButton()`, `set()`, `destroy()`.
+ *
+ * Кнопки панели собираются фабрикой `WriteBar.Icon({ icon, label, onClick, badge, accent })`:
+ * своей кнопке нужен значок из `Icons` и подпись для скринридера.
+ *
+ * Прилипание к низу окна компонент не делает сам — для этого в фреймворке есть `StickyBar`;
+ * панель не полагает, где она стоит, и потому одинаково работает и в карточке, и в окне.
+ */
+class WriteBar {
+    /** Фабрика кнопок панели: `WriteBar.Icon({ icon, label, onClick, badge, accent })` */
+    static Icon = (options = {}) => new WriteBarIcon(options);
+
+    #root = document.createElement("chui_write_bar");
+    #row = document.createElement("write_bar_row");
+    #field = document.createElement("textarea");
+    #before = document.createElement("write_bar_slot");
+    #after = document.createElement("write_bar_slot");
+    #send = undefined;
+    #icons = [];
+    #maxHeight = DEFAULT_MAX_HEIGHT;
+    #disabled = false;
+    #enterSends = true;
+    #onSend = undefined;
+    #sendListeners = [];
+
+    constructor(options = {}) {
+        setStyles(__dirname + "/styles.css", "chUiJS_WriteBar");
+        if (options.id !== undefined) this.#root.id = options.id;
+        const maxHeight = Number(options.maxHeight);
+        this.#maxHeight = Number.isFinite(maxHeight) && maxHeight > 0 ? maxHeight : DEFAULT_MAX_HEIGHT;
+        this.#onSend = typeof options.onSend === "function" ? options.onSend : undefined;
+        this.#enterSends = options.enterSends !== false;
+
+        this.#field.className = "write_bar_field";
+        // Одна строка: `rows` держит высоту в покое, растущую высоту ведёт `#autosize`
+        this.#field.rows = 1;
+        this.#field.setAttribute("aria-multiline", "true");
+        this.#field.setAttribute("aria-keyshortcuts", "Enter");
+        this.#field.setAttribute("aria-label", I18n.t("feedback.writeBarField"));
+        this.#syncHint();
+        this.#root.setAttribute("role", "group");
+        this.#root.setAttribute("aria-label", I18n.t("feedback.writeBar"));
+
+        this.#send = new WriteBarIcon({
+            icon: Icons.CONTENT.SEND,
+            label: I18n.t("feedback.writeBarSend"),
+            accent: true,
+            onClick: () => this.send(),
+        });
+        this.#after.appendChild(this.#send.set());
+        // Слоты: слева — вложения и эмодзи, справа — свои действия перед отправкой
+        this.#row.append(this.#before, this.#field, this.#after);
+        this.#root.appendChild(this.#row);
+
+        this.#field.addEventListener("input", () => {
+            this.#autosize();
+            this.#syncSendState();
+        });
+        this.#field.addEventListener("keydown", (event) => this.#onKeydown(event));
+
+        this.setPlaceholder(
+            options.placeholder === undefined ? I18n.t("feedback.writeBarPlaceholder") : options.placeholder
+        );
+        if (options.sendText !== undefined) this.setSendLabel(options.sendText);
+        if (options.value !== undefined) this.setValue(options.value);
+        if (Array.isArray(options.buttons)) for (const button of options.buttons) this.#addBefore(button);
+        if (options.shadow === true) this.#root.dataset.shadow = "true";
+        if (options.disabled === true) this.setDisabled(true);
+        this.#autosize();
+        this.#syncSendState();
+    }
+
+    // GET
+    getValue() {
+        return this.#field.value;
+    }
+    isDisabled() {
+        return this.#disabled;
+    }
+    getField() {
+        return this.#field;
+    }
+    getSendButton() {
+        return this.#send;
+    }
+    /** Кнопки, добавленные слотом (отправка сюда не входит — у неё своё место) */
+    getIcons() {
+        return this.#icons.slice();
+    }
+
+    // SET
+    setValue(text = String()) {
+        this.#field.value = String(text);
+        this.#autosize();
+        this.#syncSendState();
+        return this;
+    }
+    clear() {
+        return this.setValue("");
+    }
+    setPlaceholder(text = String()) {
+        this.#field.placeholder = String(text);
+        return this;
+    }
+    setSendLabel(text = String()) {
+        this.#send.setLabel(String(text));
+        return this;
+    }
+    setDisabled(boolean = Boolean()) {
+        this.#disabled = boolean === true;
+        this.#root.dataset.disabled = this.#disabled ? "true" : "false";
+        this.#field.disabled = this.#disabled;
+        this.#syncSendState();
+        return this;
+    }
+    /**
+     * Enter отправляет (по умолчанию) или переносит строку. Выключают там, где панель —
+     * обычное поле в форме: случайная отправка посреди набора там дороже лишнего щелчка.
+     */
+    setEnterSends(boolean = Boolean()) {
+        this.#enterSends = boolean === true;
+        this.#syncHint();
+        return this;
+    }
+    focus() {
+        this.#field.focus();
+        return this;
+    }
+    blur() {
+        this.#field.blur();
+        return this;
+    }
+
+    /** Кнопка в левом слоте — вложения, эмодзи, что угодно со значком и подписью */
+    addButton(options = {}) {
+        const button = options instanceof WriteBarIcon ? options : new WriteBarIcon(options);
+        this.#icons.push(button);
+        return button;
+    }
+    #addBefore(options = {}) {
+        const button = this.addButton(options);
+        this.#before.appendChild(button.set());
+    }
+
+    /** Отправка: пустое поле и выключенная панель ничего не делают — как нажатие кнопки */
+    send() {
+        if (this.#disabled === true) return this;
+        const text = this.#field.value.trim();
+        if (text === "") return this;
+        this.#field.value = "";
+        this.#autosize();
+        this.#syncSendState();
+        if (this.#onSend !== undefined) this.#onSend(text, this);
+        for (const listener of this.#sendListeners) listener(text, this);
+        this.focus();
+        return this;
+    }
+    addSendListener(listener = () => {}) {
+        if (typeof listener === "function") this.#sendListeners.push(listener);
+        return this;
+    }
+    /** Снять слушателя отправки: нужен тому, кто связывает панель с лентой и разрывает связь */
+    removeSendListener(listener = () => {}) {
+        const index = this.#sendListeners.indexOf(listener);
+        if (index !== -1) this.#sendListeners.splice(index, 1);
+        return this;
+    }
+
+    set() {
+        return this.#root;
+    }
+    destroy() {
+        this.#sendListeners = [];
+        this.#icons = [];
+        this.#onSend = undefined;
+        this.#root.remove();
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    /**
+     * Подсказка про Enter висит на поле только тогда, когда Enter действительно отправляет:
+     * иначе она обещала бы то, чего панель не делает.
+     */
+    #syncHint() {
+        if (this.#enterSends === true) this.#field.title = I18n.t("feedback.writeBarHint");
+        else this.#field.removeAttribute("title");
+    }
+    /** Enter отправляет, Shift+Enter переносит; во время набора иероглифов Enter не наш */
+    #onKeydown(event = {}) {
+        if (this.#enterSends === false) return;
+        if (event.key !== "Enter" || event.shiftKey === true) return;
+        if (event.isComposing === true) return;
+        event.preventDefault();
+        this.send();
+    }
+    /**
+     * Высота поля по содержимому, до предела. Сначала высоту снимаем (`auto`): иначе поле
+     * никогда не уменьшается — `scrollHeight` не бывает меньше текущей высоты. На пределе
+     * содержимое уходит в прокрутку поля, а панель перестаёт расти.
+     *
+     * Пустое поле высоты не получает вовсе: её держит `rows="1"` и нижний предел стилей
+     * (`min-height: --control_height` — по нему же выровнены кнопки панели), поэтому
+     * панель не прыгает на первом же символе: в одну линию поле всегда высотой с кнопку.
+     */
+    #autosize() {
+        const field = this.#field;
+        const limit = this.#maxHeight;
+        if (field.value === "") {
+            field.style.height = "";
+            field.dataset.scrollable = "false";
+            return;
+        }
+        field.style.height = "auto";
+        // `scrollHeight` — содержимое с отступами, но без рамки: в `border-box` её надо добавить,
+        // иначе поле «съёживается» на толщину рамки при первом же символе
+        const border = field.offsetHeight - field.clientHeight;
+        const height = field.scrollHeight + border;
+        field.style.height = Math.min(height, limit) + "px";
+        field.dataset.scrollable = height > limit ? "true" : "false";
+    }
+    /** Отправка гаснет на пустом поле: так панель говорит, что отправлять нечего */
+    #syncSendState() {
+        this.#send.setDisabled(this.#disabled === true || this.#field.value.trim() === "");
+    }
+}
+
+exports.WriteBar = WriteBar;
+exports.WriteBarIcon = WriteBarIcon;