chuijs 4.0.2 → 4.0.4

package/framework/components/chui_message_bar/message_bar.js

@@ -0,0 +1,551 @@
+const { setStyles, markdownToHtml, optionOr } = require("../../modules/chui_functions");
+const { Avatar } = require("../chui_avatar/avatar");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+
+/** Значки состояния отправленного сообщения: в пути, доставлено, прочитано, ошибка */
+const STATUS_ICONS = {
+    sending: Icons.ACTIONS.SCHEDULE,
+    sent: Icons.NAVIGATION.CHECK,
+    read: Icons.ACTIONS.DONE_ALL,
+    failed: Icons.ALERT.ERROR_OUTLINE,
+};
+/** Прокрутка считается «у нижнего края», если до него осталось меньше этого, px */
+const NEAR_BOTTOM = 80;
+/** Высота ленты по умолчанию: лента прокручивается сама, а страница под ней не растёт */
+const DEFAULT_HEIGHT = "320px";
+
+/**
+ * Лента сообщений — то, что показывается над панелью ввода.
+ *
+ * Пара к `WriteBar`: панель набирает и отправляет, лента показывает написанное. Связка
+ * делается одним вызовом — `linkWriteBar(bar)` подписывается на отправку панели и кладёт
+ * её текст в ленту своим сообщением со состоянием `sending`; дальше приложение ставит
+ * `sent`/`read` через `updateMessage()`. Ленту можно использовать и без панели: она
+ * принимает сообщения из `addMessage()` — например, из сокета.
+ *
+ * Отличие от `Chat`: у ленты нет ни шапки, ни поля ввода — только сообщения. Зато она следит
+ * за нижним краем: если человек читает историю выше, новое сообщение не сдёргивает прокрутку
+ * вниз, а над нижним краем появляется кнопка «Новые сообщения» со счётчиком. Лента, стоящая
+ * у нижнего края, ведёт себя как в мессенджере — новое сообщение сразу видно. Нижний край она
+ * держит и тогда, когда вёрстка меняется уже после показа (стили приходят отдельной таблицей,
+ * окно меняет ширину, догружается картинка): за размером содержимого следит наблюдатель.
+ *
+ * Сообщения группируются как в мессенджерах: подряд идущие сообщения одного автора одного дня
+ * лежат в одной группе `message_bar_group` — у чужой группы один аватар и одна подпись автора,
+ * а пузыри `message_bar_bubble` идут друг под другом. Свои сообщения (`own: true`) стоят справа
+ * и окрашены акцентом, чужие — слева. Между днями ставится разделитель с датой («Сегодня»,
+ * «Вчера», иначе дата по языку через `Intl.DateTimeFormat`).
+ *
+ * Доступность: лента — `role="log"` с `aria-live="polite"`, поэтому новое сообщение читает
+ * скринридер (своё объявление для этого не нужно); «печатает…» объявляет отдельный
+ * `role="status"`; кнопка «Новые сообщения» называет и число новых, и у времени стоит
+ * `datetime`; аватары декоративны — имя автора уже есть в тексте. Лента прокручивается
+ * с клавиатуры (`tabindex="0"`).
+ *
+ * ```javascript
+ * const feed = new MessageBar({ own: 'Вы', height: '260px', messages: [] });
+ * const bar = new WriteBar({ placeholder: 'Напишите сообщение' });
+ * feed.linkWriteBar(bar);                       // отправленное из панели встаёт в ленту
+ * feed.setTyping('Иван');                       // «Иван печатает…»
+ * feed.addMessage({ text: 'Смотри отчёт', author: 'Иван' });
+ * ```
+ *
+ * Опции: `id`, `messages`, `own`, `height`, `label`, `dateSeparators`, `avatars`, `typing`,
+ * `onMessageClick`.
+ * Сообщение: `{id, text, markdownText, author, avatar, time, own, status, attachments}`;
+ * фабрика — `MessageBar.Message(...)`, константа — `MessageBar.STATUS.{SENDING, SENT, READ, FAILED}`.
+ * API: `addMessage()`, `updateMessage(id, patch)`, `removeMessage(id)`, `setMessages()`,
+ * `getMessages()`, `clear()`, `setTyping(name)`, `isTyping()`, `scrollToBottom()`,
+ * `isNearBottom()`, `getUnread()`, `setHeight(value)`, `getHeight()`, `setLabel(text)`,
+ * `linkWriteBar(bar)`, `unlinkWriteBar()`, `getFeed()`, `set()`, `destroy()`.
+ */
+class MessageBar {
+    static STATUS = {
+        SENDING: "sending",
+        SENT: "sent",
+        READ: "read",
+        FAILED: "failed",
+    };
+    static #counter = 0;
+
+    #id = undefined;
+    #root = document.createElement("chui_message_bar");
+    #view = document.createElement("message_bar_view");
+    #feed = document.createElement("message_bar_feed");
+    #content = document.createElement("message_bar_content");
+    #typing = document.createElement("message_bar_typing");
+    #empty = document.createElement("message_bar_empty");
+    #jump = document.createElement("button");
+    #jumpIcon = document.createElement("message_bar_jump_icon");
+    #jumpText = document.createElement("message_bar_jump_text");
+    #messages = [];
+    #height = DEFAULT_HEIGHT;
+    #own = undefined;
+    #label = undefined;
+    #dateSeparators = true;
+    #avatars = true;
+    #typingName = undefined;
+    #unread = 0;
+    #stuck = true;
+    #observer = undefined;
+    #onMessageClick = undefined;
+    #writeBar = undefined;
+    #sendListener = undefined;
+    // Текущий день и текущая группа — по ним решается, дописывать пузырь или начать новую;
+    // группа — это {node, bubbles, avatar, author, day}
+    #lastDate = undefined;
+    #lastGroup = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            messages: [],
+            own: String(),
+            height: String(),
+            label: String(),
+            dateSeparators: Boolean(),
+            avatars: Boolean(),
+            typing: String(),
+            onMessageClick: undefined,
+        }
+    ) {
+        setStyles(__dirname + "/styles.css", "chUiJS_MessageBar");
+        MessageBar.#counter += 1;
+        this.#id = options.id === undefined ? `chui_message_bar_${MessageBar.#counter}` : options.id;
+        this.#root.id = this.#id;
+        this.#own = options.own;
+        this.#label = options.label;
+        this.#onMessageClick = options.onMessageClick;
+        this.#dateSeparators = options.dateSeparators !== false;
+        this.#avatars = options.avatars !== false;
+        this.setHeight(options.height);
+
+        this.#feed.id = `${this.#id}_feed`;
+        this.#feed.setAttribute("role", "log");
+        this.#feed.setAttribute("aria-live", "polite");
+        this.#feed.setAttribute("aria-relevant", "additions");
+        this.#feed.setAttribute("aria-label", this.#labelText());
+        this.#feed.setAttribute("tabindex", "0");
+        this.#typing.setAttribute("role", "status");
+        this.#typing.hidden = true;
+        this.#empty.innerText = I18n.t("feedback.messageBarEmpty");
+
+        this.#jump.type = "button";
+        this.#jump.className = "message_bar_jump";
+        this.#jump.dataset.visible = "false";
+        this.#jumpIcon.innerHTML = new Icon(Icons.NAVIGATION.ARROW_DOWNWARD, "16px").getHTML();
+        this.#jumpText.innerText = I18n.t("feedback.messageBarNew");
+        this.#jump.setAttribute("aria-label", I18n.t("feedback.messageBarNew"));
+        this.#jump.append(this.#jumpIcon, this.#jumpText);
+        this.#jump.addEventListener("click", () => this.scrollToBottom());
+
+        this.#feed.appendChild(this.#content);
+        this.#view.append(this.#feed, this.#jump);
+        this.#root.append(this.#view, this.#typing);
+        this.#feed.addEventListener("scroll", this.#onScroll);
+        this.#feed.addEventListener("click", this.#onFeedClick);
+        // Лента держит нижний край и тогда, когда вёрстка меняется уже после показа: стили
+        // приходят отдельной таблицей, окно меняет ширину, картинки догружаются. Наблюдаем
+        // за содержимым, а не за самой лентой: её размер от наполнения не меняется, и рост
+        // сообщений был бы не виден — из-за этого лента открывалась не у нижнего края
+        this.#observer = new ResizeObserver(this.#onResize);
+        this.#observer.observe(this.#content);
+        if (options.typing !== undefined) this.setTyping(options.typing);
+        this.setMessages(options.messages === undefined ? [] : options.messages);
+    }
+
+    // GET
+    getId() {
+        return this.#id;
+    }
+    /** Копии сообщений: правка копии не меняет ленту */
+    getMessages() {
+        return this.#messages.map((message) => Object.assign({}, message));
+    }
+    getFeed() {
+        return this.#feed;
+    }
+    getHeight() {
+        return this.#height;
+    }
+    /** Сколько сообщений пришло, пока лента стояла выше нижнего края */
+    getUnread() {
+        return this.#unread;
+    }
+    isTyping() {
+        return this.#typingName !== undefined;
+    }
+    /** Лента стоит у нижнего края: новое сообщение там видно сразу */
+    isNearBottom() {
+        return this.#isNearBottom();
+    }
+
+    // SET
+    /** Высота ленты: своя переменная, поэтому строка «печатает» под лентой не уезжает */
+    setHeight(value = String()) {
+        this.#height = optionOr(value, undefined) === undefined ? DEFAULT_HEIGHT : String(value);
+        this.#root.style.setProperty("--message_bar_height", this.#height);
+        return this;
+    }
+    /** Имя ленты для скринридера: по умолчанию — общая подпись из словаря */
+    setLabel(text = String()) {
+        this.#label = text;
+        this.#feed.setAttribute("aria-label", this.#labelText());
+        return this;
+    }
+    set() {
+        return this.#root;
+    }
+
+    // СООБЩЕНИЯ
+    /** Полная замена списка: лента собирается заново, группы схлопываются по автору и дню */
+    setMessages(messages = []) {
+        this.#messages = [];
+        this.#lastDate = undefined;
+        this.#lastGroup = undefined;
+        this.#content.innerHTML = "";
+        this.#content.appendChild(this.#empty);
+        for (const message of messages) this.#appendMessage(Object.assign({}, message), false);
+        this.#empty.hidden = this.#messages.length > 0;
+        this.#unread = 0;
+        this.scrollToBottom(false);
+        this.#syncJump();
+        return this;
+    }
+    /**
+     * Новое сообщение. Лента ведёт себя как мессенджер: если она у нижнего края — сообщение
+     * сразу видно, а если человек читает историю выше — прокрутка не сдёргивается, зато
+     * растёт счётчик на кнопке «Новые сообщения».
+     */
+    addMessage(message = {}) {
+        const near = this.#isNearBottom();
+        const added = this.#appendMessage(Object.assign({}, message), near);
+        if (near === false) this.#unread += 1;
+        this.#syncJump();
+        return added;
+    }
+    /**
+     * Правка сообщения по `id`: текст, время, состояние (например, `sending` → `read`).
+     * Лента пересобирается, но прокрутка остаётся на месте — состояние доставки приходит
+     * и тогда, когда человек читает историю выше.
+     */
+    updateMessage(id = String(), patch = {}) {
+        const message = this.#messages.find((entry) => entry.id === id);
+        if (message === undefined) return this;
+        Object.assign(message, patch);
+        return this.#rebuild(true);
+    }
+    removeMessage(id = String()) {
+        const index = this.#messages.findIndex((entry) => entry.id === id);
+        if (index === -1) return this;
+        this.#messages.splice(index, 1);
+        return this.#rebuild(true);
+    }
+    clear() {
+        return this.setMessages([]);
+    }
+    /** «Иван печатает…»: имя автора; `undefined` убирает строку */
+    setTyping(name = undefined) {
+        this.#typingName = name;
+        this.#typing.innerText = name === undefined ? "" : I18n.t("feedback.chatTyping", { name: name });
+        this.#showTyping(name !== undefined);
+        return this;
+    }
+    /**
+     * Связь с панелью ввода: отправленное из панели встаёт в ленту своим сообщением
+     * со состоянием `sending` — приложение подтверждает доставку через `updateMessage()`.
+     * Повторный вызов меняет панель, прежняя связь снимается.
+     */
+    linkWriteBar(bar = undefined) {
+        this.unlinkWriteBar();
+        if (bar === undefined) return this;
+        this.#writeBar = bar;
+        this.#sendListener = (text) => {
+            this.addMessage({
+                text: text,
+                own: true,
+                time: Date.now(),
+                status: MessageBar.STATUS.SENDING,
+            });
+        };
+        if (typeof bar.addSendListener === "function") bar.addSendListener(this.#sendListener);
+        return this;
+    }
+    unlinkWriteBar() {
+        if (
+            this.#writeBar !== undefined &&
+            this.#sendListener !== undefined &&
+            typeof this.#writeBar.removeSendListener === "function"
+        )
+            this.#writeBar.removeSendListener(this.#sendListener);
+        this.#writeBar = undefined;
+        this.#sendListener = undefined;
+        return this;
+    }
+    /** Прокрутка к низу ленты: движение не запускается при «уменьшить движение» */
+    scrollToBottom(smooth = true) {
+        const behavior = smooth && this.#reducedMotion() === false ? "smooth" : "auto";
+        if (typeof this.#feed.scrollTo === "function")
+            this.#feed.scrollTo({ top: this.#feed.scrollHeight, behavior: behavior });
+        else this.#feed.scrollTop = this.#feed.scrollHeight;
+        this.#unread = 0;
+        this.#syncJump();
+        return this;
+    }
+
+    destroy() {
+        this.unlinkWriteBar();
+        this.#observer.disconnect();
+        this.#feed.removeEventListener("scroll", this.#onScroll);
+        this.#feed.removeEventListener("click", this.#onFeedClick);
+        this.#messages = [];
+        this.#root.remove();
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    #labelText() {
+        return optionOr(this.#label, undefined) === undefined ? I18n.t("feedback.messageBar") : String(this.#label);
+    }
+    #reducedMotion() {
+        if (typeof window.matchMedia !== "function") return false;
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches === true;
+    }
+    #isNearBottom() {
+        return this.#feed.scrollHeight - this.#feed.scrollTop - this.#feed.clientHeight < NEAR_BOTTOM;
+    }
+    /** Пересборка на месте: прокрутку возвращаем на место — читающего историю не сдёргиваем */
+    #rebuild(keepScroll = false) {
+        const offset = this.#feed.scrollTop;
+        const messages = this.#messages.slice();
+        this.setMessages(messages);
+        if (keepScroll === true) this.#feed.scrollTop = offset;
+        this.#syncJump();
+        return this;
+    }
+    /**
+     * Кнопка над нижним краем: зовёт вниз, когда человек читает историю выше, и называет
+     * число новых сообщений. Вид задаётся атрибутом, а не `hidden`: показ и уборка идут
+     * переходом (прозрачность и сдвиг), поэтому кнопка не мигает.
+     */
+    #syncJump() {
+        const near = this.#isNearBottom();
+        this.#stuck = near;
+        if (near === true) this.#unread = 0;
+        const count = this.#unread;
+        const visible = count > 0 || near === false;
+        if (count > 1) {
+            this.#jumpText.innerText = `${I18n.t("feedback.messageBarNew")} · ${count}`;
+            this.#jump.setAttribute("aria-label", I18n.t("feedback.messageBarNewCount", { value: String(count) }));
+        } else if (count === 1) {
+            this.#jumpText.innerText = I18n.t("feedback.messageBarNew");
+            this.#jump.setAttribute("aria-label", I18n.t("feedback.messageBarNew"));
+        } else {
+            this.#jumpText.innerText = I18n.t("feedback.messageBarDown");
+            this.#jump.setAttribute("aria-label", I18n.t("feedback.messageBarDown"));
+        }
+        this.#jump.dataset.visible = visible === true ? "true" : "false";
+    }
+    /**
+     * Строка «печатает» появляется и уходит движением: `hidden` возвращается по концу кадра,
+     * поэтому строка не пропадает рывком. Открытие за время ухода отменяет снятие.
+     */
+    #showTyping(visible) {
+        if (visible === true) {
+            this.#typing.classList.remove("message_bar_typing_leaving");
+            this.#typing.hidden = false;
+            if (this.#isNearBottom()) this.scrollToBottom();
+            return;
+        }
+        if (this.#typing.hidden === true) return;
+        this.#typing.classList.add("message_bar_typing_leaving");
+        const done = (event) => {
+            if (event.target !== this.#typing) return;
+            this.#typing.removeEventListener("animationend", done);
+            if (this.#typing.classList.contains("message_bar_typing_leaving") === false) return;
+            this.#typing.classList.remove("message_bar_typing_leaving");
+            this.#typing.hidden = true;
+        };
+        this.#typing.addEventListener("animationend", done);
+    }
+    /**
+     * Добавить сообщение в ленту. Если автор и день совпадают с прошлой группой, пузырь
+     * дописывается в неё (один аватар и одна подпись автора), иначе создаётся новая.
+     */
+    #appendMessage(message = {}, live = true) {
+        const date = this.#toDate(message.time);
+        message.id = message.id === undefined ? require("randomstring").generate() : message.id;
+        message.time = date === undefined ? Date.now() : date.getTime();
+        this.#messages.push(message);
+        this.#empty.hidden = true;
+        this.#insertDateSeparator(date);
+        const group = this.#groupFor(message);
+        const first = group.bubbles.childElementCount === 0;
+        const bubble = this.#bubble(message, first);
+        // Хвостик группы: у последнего пузыря угол со стороны автора скруглён меньше —
+        // по нему видно, где кончается стопка
+        const previous = group.bubbles.lastElementChild;
+        if (previous !== null) previous.dataset.last = "false";
+        bubble.dataset.last = "true";
+        group.bubbles.appendChild(bubble);
+        if (live) this.scrollToBottom(true);
+        return message;
+    }
+    #toDate(time) {
+        if (time === undefined || time === null) return undefined;
+        const date = time instanceof Date ? time : new Date(time);
+        return isNaN(date.getTime()) ? undefined : date;
+    }
+    /** Разделитель дня: между сообщениями разных дней и в начале ленты */
+    #insertDateSeparator(date) {
+        if (date === undefined || this.#dateSeparators === false) return;
+        const key = this.#dayKey(date);
+        if (key === this.#lastDate) return;
+        this.#lastDate = key;
+        const separator = document.createElement("message_bar_day");
+        separator.dataset.day = key;
+        const label = document.createElement("message_bar_day_label");
+        label.innerText = this.#dayLabel(date);
+        separator.appendChild(label);
+        this.#content.appendChild(separator);
+        this.#lastGroup = undefined;
+    }
+    /** Группа для сообщения: та же, если автор и день совпадают, иначе новая */
+    #groupFor(message) {
+        const author = this.#authorOf(message);
+        if (
+            this.#lastGroup !== undefined &&
+            this.#lastGroup.author === author &&
+            this.#lastGroup.day === this.#lastDate
+        ) {
+            return this.#lastGroup;
+        }
+        const node = document.createElement("message_bar_group");
+        node.dataset.own = message.own === true ? "true" : "false";
+        const bubbles = document.createElement("message_bar_bubbles");
+        node.appendChild(bubbles);
+        // Аватар — только у чужих сообщений: свои и так справа
+        let avatar = undefined;
+        if (message.own !== true && this.#avatars === true) {
+            avatar = new Avatar({
+                name: author,
+                image: message.avatar === undefined ? undefined : { path: message.avatar },
+                size: Avatar.SIZE.SMALL,
+                decorative: true,
+            });
+            node.prepend(avatar.set());
+        }
+        this.#content.appendChild(node);
+        this.#lastGroup = { node: node, bubbles: bubbles, avatar: avatar, author: author, day: this.#lastDate };
+        return this.#lastGroup;
+    }
+    #bubble(message, first) {
+        const bubble = document.createElement("message_bar_bubble");
+        bubble.dataset.own = message.own === true ? "true" : "false";
+        bubble.dataset.id = message.id;
+        // Подпись автора — только у первого пузыря группы, дальше она уже прочитана
+        if (message.own !== true && first) {
+            const author = document.createElement("message_bar_author");
+            author.innerText = this.#authorOf(message);
+            bubble.appendChild(author);
+        }
+        if (message.markdownText !== undefined) {
+            const text = document.createElement("message_bar_text");
+            text.innerHTML = markdownToHtml(message.markdownText);
+            bubble.appendChild(text);
+        } else if (message.text !== undefined) {
+            const text = document.createElement("message_bar_text");
+            text.innerText = String(message.text);
+            bubble.appendChild(text);
+        }
+        for (const attachment of message.attachments === undefined ? [] : message.attachments) {
+            bubble.appendChild(this.#attachment(attachment));
+        }
+        bubble.appendChild(this.#meta(message));
+        return bubble;
+    }
+    #attachment(attachment = {}) {
+        const node = document.createElement("message_bar_attachment");
+        if (attachment.url === undefined) {
+            node.innerText = attachment.title === undefined ? "" : String(attachment.title);
+            return node;
+        }
+        const link = document.createElement("a");
+        link.href = attachment.url;
+        link.innerText = attachment.title === undefined ? attachment.url : String(attachment.title);
+        node.appendChild(link);
+        return node;
+    }
+    /** Время и состояние: у своих сообщений виден путь доставки */
+    #meta(message) {
+        const meta = document.createElement("message_bar_meta");
+        const date = this.#toDate(message.time);
+        if (date !== undefined) {
+            const time = document.createElement("message_bar_time");
+            time.innerText = this.#timeLabel(date);
+            time.setAttribute("datetime", date.toISOString());
+            meta.appendChild(time);
+        }
+        if (message.own === true && message.status !== undefined) {
+            const status = document.createElement("message_bar_status");
+            status.dataset.status = message.status;
+            status.setAttribute("aria-label", this.#statusLabel(message.status));
+            status.setAttribute("role", "img");
+            status.innerHTML = new Icon(
+                STATUS_ICONS[message.status] === undefined ? STATUS_ICONS.sent : STATUS_ICONS[message.status],
+                "13px"
+            ).getHTML();
+            meta.appendChild(status);
+        }
+        return meta;
+    }
+    #statusLabel(status) {
+        if (status === MessageBar.STATUS.READ) return I18n.t("feedback.chatRead");
+        if (status === MessageBar.STATUS.FAILED) return I18n.t("feedback.chatFailed");
+        if (status === MessageBar.STATUS.SENDING) return I18n.t("feedback.chatSending");
+        return I18n.t("feedback.chatSent");
+    }
+    #authorOf(message) {
+        if (message.author !== undefined) return String(message.author);
+        if (message.own !== true) return "";
+        // Своё имя — опция `own`: по нему же свои сообщения попадают в одну группу
+        return optionOr(this.#own, undefined) === undefined ? I18n.t("feedback.chatMe") : String(this.#own);
+    }
+    #dayKey(date) {
+        return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+    }
+    /** Дата дня: «Сегодня»/«Вчера» из словаря, иначе дата по текущему языку */
+    #dayLabel(date) {
+        const now = new Date();
+        if (this.#dayKey(date) === this.#dayKey(now)) return I18n.t("common.today");
+        const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
+        if (this.#dayKey(date) === this.#dayKey(yesterday)) return I18n.t("common.yesterday");
+        return new Intl.DateTimeFormat(I18n.getLocale(), { day: "numeric", month: "long" }).format(date);
+    }
+    #timeLabel(date) {
+        return new Intl.DateTimeFormat(I18n.getLocale(), { hour: "2-digit", minute: "2-digit" }).format(date);
+    }
+
+    // === ОБРАБОТЧИКИ ===
+    #onScroll = () => {
+        this.#stuck = this.#isNearBottom();
+        this.#syncJump();
+    };
+    /** Содержимое выросло — если лента стояла у нижнего края, она там и остаётся */
+    #onResize = () => {
+        if (this.#stuck === false) return;
+        this.#feed.scrollTop = this.#feed.scrollHeight;
+    };
+    #onFeedClick = (event) => {
+        if (this.#onMessageClick === undefined) return;
+        const bubble = event.target instanceof Element ? event.target.closest("message_bar_bubble") : null;
+        if (bubble === null) return;
+        const message = this.#messages.find((entry) => entry.id === bubble.dataset.id);
+        if (message !== undefined) this.#onMessageClick(message);
+    };
+}
+
+exports.MessageBar = MessageBar;
+
+// Описание сообщения собирает фабрика — как у Chat и ContextMenu
+MessageBar.Message = (options = {}) => Object.assign({}, options);