chuijs 4.0.3 → 4.0.4

package/framework/components/chui_user_bar/styles.css

@@ -0,0 +1,145 @@
+/* ── UserBar — полоса пользователя ─────────────────────────────
+   Шапка разговора: кто перед вами, чем занят и что с ним можно сделать.
+   Полоса не полагает, где она стоит: в карточке переписки она читается кромкой
+   той же карточки, а отдельной строкой списка — самостоятельной поверхностью. */
+
+chui_user_bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--control_padding);
+    box-sizing: border-box;
+    width: -webkit-fill-available;
+    padding: var(--control_padding) var(--block_padding);
+    background: var(--element_background_2);
+    border-bottom: 1px solid var(--border_color);
+    font-size: var(--font_default_size);
+    color: var(--text_color);
+}
+
+/* Кликабельная полоса — кнопка: отклик на курсор показывает, что по человеку можно нажать */
+chui_user_bar[role="button"] {
+    cursor: pointer;
+}
+
+chui_user_bar[role="button"]:hover {
+    background: var(--element_background_hover);
+}
+
+user_bar_texts {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+user_bar_name {
+    display: block;
+    overflow: hidden;
+    font-weight: 600;
+    color: var(--text_color);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+/* Подпись под именем: своя строка или состояние человека */
+user_bar_subtitle {
+    display: block;
+    overflow: hidden;
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+user_bar_subtitle[hidden] {
+    display: none;
+}
+
+user_bar_actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+    flex: none;
+}
+
+/* Меню действий: панель внутри поповера своей поверхности и кромки не носит —
+   меню и панель одна плоскость, а второй слой заливки читался бы как вложенная карточка */
+user_bar_menu chui_actions_bar {
+    padding: 0;
+    background: transparent;
+    border: none;
+}
+
+/* Кнопка полосы: круг со значком, подпись живёт в `aria-label` и подсказке.
+   Та же мера, что у кнопок панели ввода: рядом стоят аватар и кнопки действий,
+   и разная высота читалась бы небрежностью */
+.user_bar_button {
+    position: relative;
+    flex: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--control_height);
+    height: var(--control_height);
+    padding: 0;
+    border: none;
+    border-radius: var(--radius_circle);
+    background: transparent;
+    color: var(--text_color);
+}
+
+.user_bar_button:hover {
+    background: var(--element_background_hover);
+}
+
+/* Нажатие — акцент, как у Button: контрол отвечает на клик ещё до действия */
+.user_bar_button:active:not(:disabled) {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.user_bar_button:disabled {
+    cursor: not-allowed;
+    background: transparent;
+    color: var(--text_color_disabled);
+}
+
+.user_bar_button[data-accent="true"] {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.user_bar_button[data-accent="true"]:hover {
+    background: var(--blue_prime_background_tint_strong);
+}
+
+.user_bar_button chui_icon {
+    color: inherit;
+}
+
+/* Счётчик кнопки: число важнее подписи, поэтому плашка в углу круга */
+user_bar_badge {
+    position: absolute;
+    top: -2px;
+    inset-inline-end: -2px;
+    box-sizing: border-box;
+    min-width: 16px;
+    height: 16px;
+    padding-inline: 4px;
+    border-radius: var(--radius_pill);
+    background: var(--red_prime_background);
+    color: var(--text_color_hover);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 16px;
+    text-align: center;
+}
+
+user_bar_badge[hidden] {
+    display: none;
+}

package/framework/components/chui_user_bar/user_bar.js

@@ -0,0 +1,402 @@
+const { Icon, Icons } = require("../chui_icons/icons");
+const { Avatar } = require("../chui_avatar/avatar");
+const { Popover } = require("../chui_popover/popover");
+const { ActionsBar } = require("../chui_actions_bar/actions_bar");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { optionOr, setStyles } = require("../../modules/chui_functions");
+
+/**
+ * Кнопка полосы пользователя: значок с подписью для скринридера и счётчиком.
+ *
+ * Настоящий `<button>`, а не кастомный тег: клавиатура, фокус и роль у него уже есть.
+ * Подпись обязательна — лигатура значка («call», «more_vert») ничего не говорит скринридеру,
+ * а сам значок скрыт от дерева доступности.
+ */
+class UserBarButton {
+    #root = document.createElement("button");
+    #label = String();
+    #onClick = undefined;
+    #disabled = false;
+    #badge = document.createElement("user_bar_badge");
+
+    constructor(options = {}) {
+        const icon = optionOr(options.icon, String());
+        const label = optionOr(options.label, String());
+        this.#label = label === "" ? I18n.t("feedback.userBarAction") : label;
+        this.#root.type = "button";
+        this.#root.className = "user_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.userBarBadge", { 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;
+    }
+}
+
+/**
+ * Полоса пользователя — шапка разговора: кто перед вами, чем занят и что с ним можно сделать.
+ *
+ * Третья полоса к `MessageBar` и `WriteBar`: полоса пользователя сверху, лента сообщений
+ * в середине, панель ввода снизу — из этих трёх частей собирается экран переписки. Полоса
+ * самостоятельная: её ставят и шапкой разговора, и строкой человека в списке (тогда её делают
+ * кликабельной через `onClick`).
+ *
+ * Состояние человека показывается дважды: точкой на аватаре и подписью под именем. Если своей
+ * подписи нет, она берётся из состояния («в сети», «отошёл», «занят», «не в сети»), поэтому
+ * приложению не нужно держать эти слова у себя. `setSubtitle("Иван печатает…")` показывает
+ * вместо неё что угодно — например, набор текста; `setSubtitle()` без аргумента возвращает
+ * подпись состояния.
+ *
+ * Доступность: у полосы есть имя (имя человека и его состояние), аватар декоративен — имя уже
+ * написано рядом. Кнопки «назад» и действий — настоящие `<button>` с подписью для скринридера;
+ * кликабельная полоса получает роль кнопки, обход клавиатурой и активацию Enter/Space, а её имя
+ * говорит, что откроется профиль.
+ *
+ * ```javascript
+ * const bar = new UserBar({
+ *     name: 'Иван Петров',
+ *     status: UserBar.STATUS.ONLINE,
+ *     photo: 'avatar.png',
+ *     back: true,
+ *     onBack: () => Route.back(),
+ *     actions: [{ icon: Icons.COMMUNICATION.CALL, label: 'Позвонить' }],
+ * });
+ * mount(bar);   // или body.appendChild(bar.set())
+ * ```
+ *
+ * Опции: `id`, `name`, `subtitle`, `photo`, `status`, `back`, `backLabel`, `actions`, `onBack`,
+ * `onClick`.
+ * Кнопки полосы собираются фабрикой `UserBar.Button({ icon, label, onClick, badge, accent,
+ * disabled })`.
+ * API: `getName()`, `setName(text)`, `getSubtitle()`, `setSubtitle(text)`, `getStatus()`,
+ * `setStatus(status)`, `setPhoto(path)`, `getAvatar()`, `addAction(options)`, `getActions()`,
+ * `set()`, `destroy()`.
+ */
+class UserBar {
+    static STATUS = Avatar.STATUS;
+    /** Фабрика кнопок полосы: `UserBar.Button({ icon, label, onClick, badge, accent })` */
+    static Button = (options = {}) => new UserBarButton(options);
+
+    #root = document.createElement("chui_user_bar");
+    #back = document.createElement("button");
+    #avatar = undefined;
+    #texts = document.createElement("user_bar_texts");
+    #nameNode = document.createElement("user_bar_name");
+    #subtitle = document.createElement("user_bar_subtitle");
+    #actions = document.createElement("user_bar_actions");
+    #name = undefined;
+    #subtitleText = undefined;
+    #status = undefined;
+    #photo = undefined;
+    #icons = [];
+    #menu = undefined;
+    #menuLabel = undefined;
+    #menuButton = undefined;
+    #popover = undefined;
+    #onBack = undefined;
+    #onClick = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            subtitle: String(),
+            photo: String(),
+            status: String(),
+            back: Boolean(),
+            backLabel: String(),
+            actions: [],
+            menu: undefined,
+            menuLabel: String(),
+            onBack: undefined,
+            onClick: undefined,
+        }
+    ) {
+        setStyles(__dirname + "/styles.css", "chUiJS_UserBar");
+        if (options.id !== undefined) this.#root.id = options.id;
+        this.#name = options.name;
+        this.#photo = options.photo;
+        this.#status = options.status;
+        this.#subtitleText = options.subtitle;
+        this.#menuLabel = options.menuLabel;
+        this.#onBack = typeof options.onBack === "function" ? options.onBack : undefined;
+        this.#onClick = typeof options.onClick === "function" ? options.onClick : undefined;
+
+        // Аватар декоративен: имя человека стоит рядом, и второй раз оно не нужно
+        this.#avatar = new Avatar({
+            name: this.#name,
+            image: this.#photo === undefined ? undefined : { path: this.#photo },
+            status: this.#status,
+            size: Avatar.SIZE.DEFAULT,
+            decorative: true,
+        });
+        this.#nameNode.innerText = this.#name === undefined ? "" : String(this.#name);
+        this.#subtitle.hidden = true;
+        this.#texts.append(this.#nameNode, this.#subtitle);
+
+        if (options.back === true) {
+            this.#back.type = "button";
+            this.#back.className = "user_bar_button";
+            this.#back.dataset.side = "back";
+            const label =
+                optionOr(options.backLabel, undefined) === undefined
+                    ? I18n.t("feedback.userBarBack")
+                    : String(options.backLabel);
+            this.#back.setAttribute("aria-label", label);
+            this.#back.title = label;
+            this.#back.innerHTML = new Icon(Icons.NAVIGATION.ARROW_BACK, "20px").getHTML();
+            this.#back.addEventListener("click", () => {
+                if (this.#onBack !== undefined) this.#onBack(this);
+            });
+            this.#root.appendChild(this.#back);
+        }
+        this.#root.append(this.#avatar.set(), this.#texts, this.#actions);
+
+        if (Array.isArray(options.actions)) for (const action of options.actions) this.addAction(action);
+        // Меню идёт последним: кнопка «⋯» встаёт за кнопками действий
+        if (options.menu !== undefined) this.setMenu(options.menu);
+        if (this.#onClick !== undefined) this.#makeClickable();
+        else this.#root.setAttribute("role", "group");
+        this.#syncSubtitle();
+        this.#syncName();
+    }
+
+    // GET
+    getName() {
+        return this.#nameNode.innerText;
+    }
+    /** Видимая подпись под именем: своя или из состояния человека */
+    getSubtitle() {
+        return this.#subtitle.hidden === true ? "" : this.#subtitle.innerText;
+    }
+    getStatus() {
+        return this.#status;
+    }
+    /** Аватар — для того, кто хочет повесить на него своё: полоса только показывает человека */
+    getAvatar() {
+        return this.#avatar;
+    }
+    getActions() {
+        return this.#icons.slice();
+    }
+
+    // SET
+    setName(text = String()) {
+        this.#name = String(text);
+        this.#nameNode.innerText = this.#name;
+        this.#avatar.setName(this.#name);
+        this.#syncName();
+        return this;
+    }
+    /**
+     * Подпись под именем: своя строка (например, «печатает…») или состояние человека,
+     * если аргумента нет. Своя подпись состояние не теряет — `getStatus()` его помнит
+     */
+    setSubtitle(text = undefined) {
+        this.#subtitleText = text;
+        this.#syncSubtitle();
+        return this;
+    }
+    setStatus(status = undefined) {
+        this.#status = status;
+        this.#avatar.setStatus(status);
+        this.#syncSubtitle();
+        this.#syncName();
+        return this;
+    }
+    setPhoto(path = undefined) {
+        this.#photo = path;
+        this.#avatar.setImage(path === undefined ? undefined : { path: path });
+        return this;
+    }
+
+    /** Кнопка действий справа: звонок, поиск, меню — что угодно со значком и подписью */
+    addAction(options = {}) {
+        const button = options instanceof UserBarButton ? options : new UserBarButton(options);
+        this.#icons.push(button);
+        this.#actions.appendChild(button.set());
+        return button;
+    }
+
+    // МЕНЮ ДЕЙСТВИЙ
+    /**
+     * Меню действий за кнопкой «⋯»: сюда переезжает панель `ActionsBar`, чтобы в шапке
+     * разговора не заводить вторую полосу. Действия идут столбцом, как пункты меню.
+     *
+     * Принимается и список действий (`{ icon, label, toggle, danger, onClick }`), и готовая
+     * панель `ActionsBar` — у неё ориентация переводится в столбец сама. Выбор обычного действия
+     * закрывает меню, переключатели остаются открытыми: состояние видно на месте.
+     */
+    setMenu(menu = undefined) {
+        this.#popoverDestroy();
+        if (this.#menuButton !== undefined) {
+            this.#menuButton.set().remove();
+            this.#icons = this.#icons.filter((button) => button !== this.#menuButton);
+            this.#menuButton = undefined;
+        }
+        this.#menu = undefined;
+        if (menu === undefined || menu === null) return this;
+        this.#menu =
+            menu instanceof ActionsBar
+                ? menu.setOrientation(ActionsBar.ORIENTATION.VERTICAL)
+                : new ActionsBar({
+                      orientation: ActionsBar.ORIENTATION.VERTICAL,
+                      actions: this.#closeOnPick(Array.isArray(menu) ? menu : []),
+                  });
+        this.#menuButton = this.addAction({ icon: Icons.NAVIGATION.MORE_VERT, label: this.#menuLabelText() });
+        const host = document.createElement("user_bar_menu");
+        host.appendChild(this.#menu.set());
+        // Подсказку и состояние кнопке даёт `Popover`: `aria-haspopup="dialog"` и `aria-expanded`
+        this.#popover = new Popover({
+            trigger: this.#menuButton.set(),
+            content: host,
+            placement: Popover.PLACEMENT.BOTTOM,
+            label: I18n.t("feedback.actionsBar"),
+        });
+        return this;
+    }
+    /** Имя кнопки меню: по умолчанию — «Ещё» из словаря */
+    setMenuLabel(text = String()) {
+        this.#menuLabel = text;
+        if (this.#menuButton !== undefined) this.#menuButton.setLabel(text);
+        return this;
+    }
+    /** Панель действий внутри меню — её правят тем же API, что и любую `ActionsBar` */
+    getMenu() {
+        return this.#menu;
+    }
+    openMenu() {
+        if (this.#popover !== undefined) this.#popover.open();
+        return this;
+    }
+    closeMenu() {
+        this.#closeMenu();
+        return this;
+    }
+    toggleMenu() {
+        if (this.#popover !== undefined) this.#popover.toggle();
+        return this;
+    }
+    isMenuOpen() {
+        return this.#popover === undefined ? false : this.#popover.isOpen === true;
+    }
+
+    set() {
+        return this.#root;
+    }
+    destroy() {
+        this.#popoverDestroy();
+        this.#icons = [];
+        this.#onBack = undefined;
+        this.#onClick = undefined;
+        this.#root.remove();
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    /** Имя кнопки меню: по умолчанию — «Ещё» из словаря */
+    #menuLabelText() {
+        return optionOr(this.#menuLabel, undefined) === undefined
+            ? I18n.t("feedback.userBarMore")
+            : String(this.#menuLabel);
+    }
+    /** Выбор обычного действия закрывает меню: переключатели остаются — состояние видно на месте */
+    #closeOnPick(actions = []) {
+        return actions.map((action) => {
+            if (action === undefined || action === null || action.toggle === true) return action;
+            return Object.assign({}, action, {
+                onClick: (button, active) => {
+                    if (typeof action.onClick === "function") action.onClick(button, active);
+                    this.#closeMenu();
+                },
+            });
+        });
+    }
+    #closeMenu() {
+        if (this.#popover !== undefined) this.#popover.close();
+        return this;
+    }
+    /** Слой меню снимается вместе с полосой: без этого его слушатели остались бы на окне */
+    #popoverDestroy() {
+        if (this.#popover !== undefined) this.#popover.destroy();
+        this.#popover = undefined;
+    }
+    /** Подпись под именем: своя или из состояния человека — второе приложение держать не должно */
+    #syncSubtitle() {
+        const own = optionOr(this.#subtitleText, undefined);
+        const text = own === undefined ? this.#statusLabel() : String(own);
+        this.#subtitle.innerText = text;
+        this.#subtitle.hidden = text === "";
+    }
+    #statusLabel() {
+        if (this.#status === undefined) return "";
+        const label = Avatar.STATUS_LABEL[this.#status];
+        return label === undefined ? "" : label;
+    }
+    /**
+     * Имя полосы для скринридера: человек и его состояние («Иван Петров, в сети»). У кликабельной
+     * полосы имя говорит, что откроется профиль, — иначе роль кнопки читалась бы просто «кнопка».
+     */
+    #syncName() {
+        const name = this.#nameNode.innerText.trim();
+        const person = name === "" ? I18n.t("feedback.userBar") : name;
+        const status = this.#statusLabel();
+        if (this.#onClick === undefined) {
+            this.#root.setAttribute("aria-label", status === "" ? person : `${person}, ${status}`);
+            return;
+        }
+        this.#root.setAttribute(
+            "aria-label",
+            I18n.t("feedback.userBarOpen", { name: status === "" ? person : `${person}, ${status}` })
+        );
+    }
+    /** Клик по всей полосе: роль кнопки, обход клавиатурой и активация Enter/Space */
+    #makeClickable() {
+        makeKeyboardButton(this.#root);
+        this.#root.addEventListener("click", (event) => {
+            // Кнопки полосы (назад, действия) — свои действия: их щелчок профиль не открывает
+            if (event.target instanceof Element && event.target.closest("button") !== null) return;
+            if (this.#onClick !== undefined) this.#onClick(this);
+        });
+    }
+}
+
+exports.UserBar = UserBar;
+exports.UserBarButton = UserBarButton;