chuijs 4.0.3 → 4.0.4

package/framework/components/chui_action_sheet/action_sheet.js

@@ -55,18 +55,18 @@ class ActionSheet {
     #head = document.createElement("action_sheet_head");
     #title = document.createElement("action_sheet_title");
     #message = document.createElement("action_sheet_message");
-    #actions_node = document.createElement("action_sheet_actions");
+    #actionsNode = document.createElement("action_sheet_actions");
     #cancel = document.createElement("button");
     #actions = [];
     #rows = [];
-    #cancel_text = undefined;
+    #cancelText = undefined;
     #closable = true;
-    #close_outside = true;
-    #labelled_by_title = false;
+    #closeOutside = true;
+    #labelledByTitle = false;
     #chosen = undefined;
     #a11y = undefined;
-    #on_select = undefined;
-    #on_close = undefined;
+    #onSelect = undefined;
+    #onClose = undefined;
     isOpen = false;
 
     constructor(
@@ -88,10 +88,10 @@ class ActionSheet {
         this.#id = options.id === undefined ? `chui_action_sheet_${ActionSheet.#counter}` : options.id;
         this.#sheet.id = this.#id;
         this.#closable = options.closable !== false;
-        if (options.closeOnOutsideClick !== undefined) this.#close_outside = options.closeOnOutsideClick !== false;
-        this.#cancel_text = options.cancelText;
-        this.#on_select = options.onSelect;
-        this.#on_close = options.onClose;
+        if (options.closeOnOutsideClick !== undefined) this.#closeOutside = options.closeOnOutsideClick !== false;
+        this.#cancelText = options.cancelText;
+        this.#onSelect = options.onSelect;
+        this.#onClose = options.onClose;
 
         this.#title.id = `${this.#id}_title`;
         this.#message.id = `${this.#id}_message`;
@@ -100,20 +100,20 @@ class ActionSheet {
         this.#cancel.addEventListener("click", this.#onCancelClick);
 
         this.#group.appendChild(this.#head);
-        this.#group.appendChild(this.#actions_node);
+        this.#group.appendChild(this.#actionsNode);
         this.#panel.appendChild(this.#group);
         this.#panel.appendChild(this.#cancel);
         this.#sheet.appendChild(this.#panel);
         document.body.appendChild(this.#sheet);
         // Заголовок в разметке — имя слоя; иначе имя берётся из label или словаря
         const title = optionOr(options.title, undefined);
-        this.#labelled_by_title = title !== undefined;
+        this.#labelledByTitle = title !== undefined;
         if (title !== undefined) this.setTitle(title);
         if (optionOr(options.message, undefined) !== undefined) this.setMessage(options.message);
         this.#a11y = new OverlayA11y(this.#sheet, {
             role: "dialog",
-            labelNode: this.#labelled_by_title ? this.#title : undefined,
-            label: this.#labelled_by_title ? undefined : optionOr(options.label, I18n.t("feedback.actionSheet")),
+            labelNode: this.#labelledByTitle ? this.#title : undefined,
+            label: this.#labelledByTitle ? undefined : optionOr(options.label, I18n.t("feedback.actionSheet")),
             onEscape: () => this.close(),
         });
         this.#syncCancelText();
@@ -146,7 +146,7 @@ class ActionSheet {
     setTitle(text = String()) {
         this.#title.innerText = text;
         this.#syncHead();
-        if (!this.#labelled_by_title) this.#a11y.setLabel(text);
+        if (!this.#labelledByTitle) this.#a11y.setLabel(text);
         return this;
     }
     setMessage(text = String()) {
@@ -155,7 +155,7 @@ class ActionSheet {
         return this;
     }
     setCancelText(text = String()) {
-        this.#cancel_text = text;
+        this.#cancelText = text;
         this.#syncCancelText();
         return this;
     }
@@ -163,7 +163,7 @@ class ActionSheet {
     setActions(actions = []) {
         this.#actions = [];
         this.#rows = [];
-        this.#actions_node.innerHTML = "";
+        this.#actionsNode.innerHTML = "";
         for (const action of actions) this.#appendAction(action);
         return this;
     }
@@ -177,6 +177,7 @@ class ActionSheet {
         this.isOpen = true;
         this.#chosen = undefined;
         this.#panel.style.animationName = "action_sheet_in";
+        this.#panel.dataset.motion = "enter";
         new Animation(this.#sheet).fadeIn();
         this.#a11y.open();
         return this;
@@ -190,8 +191,9 @@ class ActionSheet {
         this.isOpen = false;
         this.#a11y.close();
         this.#panel.style.animationName = "action_sheet_out";
+        this.#panel.dataset.motion = "exit";
         new Animation(this.#sheet).fadeOut();
-        if (this.#chosen === undefined && this.#on_close !== undefined) this.#on_close();
+        if (this.#chosen === undefined && this.#onClose !== undefined) this.#onClose();
         return this;
     }
     /** Полное удаление: закрыть слой, снять слушатели и убрать занавес из документа */
@@ -211,12 +213,13 @@ class ActionSheet {
      *  Временный слой после ответа убирается: иначе каждый вызов оставлял бы узел в документе */
     static show(options = {}) {
         return new Promise((resolve) => {
-            let sheet;
             const answer = (value) => {
                 resolve(value);
                 sheet.destroy();
             };
-            sheet = new ActionSheet(
+            // Слой собирается один раз, и `answer` зовут только после сборки:
+            // к моменту вызова имя уже определено, поэтому здесь можно `const`
+            const sheet = new ActionSheet(
                 Object.assign({}, options, {
                     onSelect: (action, index) => {
                         if (options.onSelect !== undefined) options.onSelect(action, index);
@@ -256,19 +259,19 @@ class ActionSheet {
         row.addEventListener("click", () => this.#choose(action, this.#actions.indexOf(action)));
         this.#actions.push(action);
         this.#rows.push(row);
-        this.#actions_node.appendChild(row);
+        this.#actionsNode.appendChild(row);
         return row;
     }
     #choose(action = {}, index = -1) {
         if (action.disabled === true) return;
         this.#chosen = action;
         if (action.onClick !== undefined) action.onClick(action, index);
-        if (this.#on_select !== undefined) this.#on_select(action, index);
+        if (this.#onSelect !== undefined) this.#onSelect(action, index);
         this.close();
     }
     #onCancelClick = () => this.close();
     #onSheetClick = (event) => {
-        if (!this.#close_outside || event.target !== this.#sheet) return;
+        if (!this.#closeOutside || event.target !== this.#sheet) return;
         this.close();
     };
     // После анимации имя снимается: иначе следующий показ не проиграется заново
@@ -278,18 +281,18 @@ class ActionSheet {
     };
     /** Заголовок и пояснение показываются, только когда заданы; пояснение — описание слоя */
     #syncHead() {
-        const has_title = this.#title.innerText.trim() !== "";
-        const has_message = this.#message.innerText.trim() !== "";
-        if (has_title && this.#title.parentElement === null) this.#head.appendChild(this.#title);
-        if (!has_title && this.#title.parentElement !== null) this.#title.remove();
-        if (has_message && this.#message.parentElement === null) this.#head.appendChild(this.#message);
-        if (!has_message && this.#message.parentElement !== null) this.#message.remove();
-        this.#head.style.display = has_title || has_message ? "" : "none";
-        if (has_message) this.#sheet.setAttribute("aria-describedby", this.#message.id);
+        const hasTitle = this.#title.innerText.trim() !== "";
+        const hasMessage = this.#message.innerText.trim() !== "";
+        if (hasTitle && this.#title.parentElement === null) this.#head.appendChild(this.#title);
+        if (!hasTitle && this.#title.parentElement !== null) this.#title.remove();
+        if (hasMessage && this.#message.parentElement === null) this.#head.appendChild(this.#message);
+        if (!hasMessage && this.#message.parentElement !== null) this.#message.remove();
+        this.#head.style.display = hasTitle || hasMessage ? "" : "none";
+        if (hasMessage) this.#sheet.setAttribute("aria-describedby", this.#message.id);
         else this.#sheet.removeAttribute("aria-describedby");
     }
     #syncCancelText() {
-        this.#cancel.innerText = this.#cancel_text === undefined ? I18n.t("common.cancel") : this.#cancel_text;
+        this.#cancel.innerText = this.#cancelText === undefined ? I18n.t("common.cancel") : this.#cancelText;
         this.#cancel.style.display = this.#closable ? "" : "none";
     }
 }

package/framework/components/chui_action_sheet/styles.css

@@ -26,7 +26,13 @@ action_sheet_panel {
     width: min(480px, 100%);
     max-height: 80vh;
     overflow-y: auto;
-    animation: action_sheet_in var(--transition_time) ease;
+    animation: action_sheet_in var(--motion_base) var(--motion_ease);
+}
+
+/* Вид движения ставит action_sheet.js: выезд идёт базовым временем из правила выше, а уход
+   берёт короткое — закрытие не задерживает следующий экран */
+action_sheet_panel[data-motion="exit"] {
+    animation-duration: var(--motion_fast);
 }
 
 @keyframes action_sheet_in {
@@ -68,7 +74,7 @@ action_sheet_head {
     display: flex;
     flex-direction: column;
     gap: 2px;
-    padding: var(--control_padding) var(--main_padding);
+    padding: var(--control_padding) var(--block_padding);
     text-align: center;
     border-bottom: 1px solid var(--border_color);
 }
@@ -102,7 +108,7 @@ action_sheet_actions {
     width: 100%;
     box-sizing: border-box;
     min-height: 44px;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     background: transparent;
     border: none;
     border-top: 1px solid var(--border_color);
@@ -172,7 +178,7 @@ action_sheet_action_description {
     width: 100%;
     box-sizing: border-box;
     min-height: 44px;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border-radius: var(--radius_md);
     background: var(--modal_background);
     border: 1px solid var(--border_color);

package/framework/components/chui_actions_bar/actions_bar.js

@@ -0,0 +1,338 @@
+const { Icon } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { Toolbar } = require("../chui_toolbar/toolbar");
+const { optionOr, setStyles } = require("../../modules/chui_functions");
+
+/**
+ * Действие панели: значок с подписью, состоянием переключателя и счётчиком.
+ *
+ * Это настоящий `<button>`: клавиатура, фокус и роль у него уже есть. Переключатель
+ * (`toggle`) объявляет себя `aria-pressed` — «закреплено», «без звука» это состояние,
+ * а не действие, и скринридер обязан его читать. Опасное действие (удалить, очистить)
+ * помечается `danger` — подписью красного цвета, без отдельной иконки-предупреждения.
+ */
+class ActionsBarButton {
+    static #counter = 0;
+
+    #root = document.createElement("button");
+    #iconNode = document.createElement("actions_bar_button_icon");
+    #text = document.createElement("actions_bar_button_text");
+    #badge = document.createElement("actions_bar_badge");
+    #id = undefined;
+    #label = undefined;
+    #active = false;
+    #toggle = false;
+    #disabled = false;
+    #danger = false;
+    #onClick = undefined;
+    #onToggle = undefined;
+
+    constructor(options = {}) {
+        const id = optionOr(options.id, undefined);
+        this.#id = id === undefined ? String((ActionsBarButton.#counter += 1)) : String(id);
+        this.#label = options.label === undefined ? "" : String(options.label);
+        this.#toggle = options.toggle === true;
+        this.#danger = options.danger === true;
+        this.#onClick = typeof options.onClick === "function" ? options.onClick : undefined;
+        // Свой слушатель состояния — им о переключении узнаёт панель (публичного `onToggle` нет)
+        this.#onToggle = typeof options.onToggle === "function" ? options.onToggle : undefined;
+        this.#root.type = "button";
+        this.#root.className = "actions_bar_button";
+        this.#root.dataset.id = this.#id;
+        if (optionOr(options.icon, undefined) !== undefined)
+            this.#iconNode.innerHTML = new Icon(options.icon, "18px").getHTML();
+        this.#iconNode.setAttribute("aria-hidden", "true");
+        this.#text.innerText = this.#label;
+        this.#root.append(this.#iconNode, this.#text);
+        // Значка нет — кнопка подписью не обходится: имя ей даёт подсказка или словарь
+        if (this.#label === "") this.setLabel(optionOr(options.hint, I18n.t("feedback.actionsBarButton")));
+        else this.#syncName();
+        if (this.#danger === true) this.#root.dataset.danger = "true";
+        if (this.#toggle === true) this.setActive(options.active === true);
+        if (options.badge !== undefined) this.setBadge(options.badge);
+        if (options.disabled === true) this.setDisabled(true);
+        this.#root.addEventListener("click", () => {
+            if (this.#disabled === true) return;
+            if (this.#toggle === true) {
+                this.setActive(this.#active === false);
+                if (this.#onToggle !== undefined) this.#onToggle(this);
+            }
+            if (this.#onClick !== undefined) this.#onClick(this, this.#active);
+        });
+    }
+
+    getId() {
+        return this.#id;
+    }
+    getLabel() {
+        return this.#text.innerText;
+    }
+    /** Переключатель включён: «закреплено», «без звука» */
+    isActive() {
+        return this.#active;
+    }
+    isDisabled() {
+        return this.#disabled;
+    }
+
+    /**
+     * Состояние переключателя: видно подложкой, скринридеру — через `aria-pressed`.
+     * У обычного действия состояния нет: `setActive` на нём ничего не делает — подсветка
+     * без программного состояния читалась бы как выбранное действие
+     */
+    setActive(boolean = Boolean()) {
+        if (this.#toggle !== true) return this;
+        this.#active = boolean === true;
+        this.#root.dataset.active = this.#active ? "true" : "false";
+        this.#root.setAttribute("aria-pressed", this.#active ? "true" : "false");
+        return this;
+    }
+    setDisabled(boolean = Boolean()) {
+        this.#disabled = boolean === true;
+        this.#root.disabled = this.#disabled;
+        return this;
+    }
+    /** Счётчик действия: число показывает плашка, скринридеру оно попадает в имя */
+    setBadge(count = Number()) {
+        const value = Number(count);
+        const shown = Number.isFinite(value) && value > 0 ? String(value) : "";
+        this.#badge.innerText = shown;
+        this.#badge.hidden = shown === "";
+        if (shown !== "" && this.#badge.parentNode === null) this.#root.appendChild(this.#badge);
+        this.#syncName(shown);
+        return this;
+    }
+    setLabel(text = String()) {
+        const label = String(text);
+        if (this.#label === "") {
+            // Кнопка без подписи: имя живёт только в атрибутах и подсказке
+            this.#root.setAttribute("aria-label", label);
+            this.#root.title = label;
+            return this;
+        }
+        this.#root.setAttribute("aria-label", label);
+        this.#text.innerText = label;
+        return this;
+    }
+    /** Имя кнопки: своя подпись или значок с подсказкой, плюс счётчик, если он есть */
+    #syncName(count = undefined) {
+        if (this.#label === "") return;
+        const shown = count === undefined ? (this.#badge.hidden ? "" : this.#badge.innerText) : count;
+        this.#root.setAttribute(
+            "aria-label",
+            shown === "" ? this.#label : `${this.#label}, ${I18n.t("feedback.actionsBarBadge", { value: shown })}`
+        );
+    }
+
+    set() {
+        return this.#root;
+    }
+}
+
+/**
+ * Панель действий — что можно сделать с тем, о чём сейчас речь.
+ *
+ * Пятая часть мессенджера: список разговоров слева, шапка разговора, **панель действий**,
+ * лента сообщений и панель ввода — так собирается экран переписки. Панель ставят и под
+ * шапкой разговора, и в карточке файла или профиля: она не полагает, о чём именно действия.
+ *
+ * Действия — подписанные кнопки со значком: «Закрепить», «Без звука», «Найти в переписке»,
+ * «Очистить историю». Часть из них — переключатели (`toggle: true`): у них есть состояние,
+ * и оно объявляется `aria-pressed`, а видно по подложке. Опасное действие помечается
+ * `danger: true` — подписью красного цвета.
+ *
+ * Панель держит `Toolbar` внутри: стрелки ←/→ ходят по действиям, Home и End ведут к краям,
+ * а Tab проходит по кнопкам по очереди — каждая из них настоящий `<button>`, как у полосы
+ * пользователя и панели ввода. Строка клавиатуры внутри панели своей кромки не рисует:
+ * панель и полоса — одна поверхность, и вложенная ступень здесь была бы лишней.
+ *
+ * ```javascript
+ * const actions = new ActionsBar({
+ *     title: 'Разговор',
+ *     actions: [
+ *         { id: 'pin', icon: Icons.CONTENT.PUSH_PIN, label: 'Закрепить', toggle: true },
+ *         { id: 'mute', icon: Icons.SOCIAL.NOTIFICATIONS_OFF, label: 'Без звука', toggle: true, active: true },
+ *         { id: 'find', icon: Icons.ACTIONS.SEARCH, label: 'Найти в переписке', onClick: () => find() },
+ *         { id: 'clear', icon: Icons.ACTIONS.DELETE, label: 'Очистить историю', danger: true, onClick: () => clear() },
+ *     ],
+ *     onChange: (button) => Log.info(button.getId(), button.isActive()),
+ * });
+ * ```
+ *
+ * Опции: `id`, `title`, `label`, `orientation`, `actions`, `onChange`.
+ * Действие: `{ id, icon, label, hint, badge, toggle, active, danger, disabled, onClick }`;
+ * фабрика — `ActionsBar.Button(...)`.
+ * API: `setTitle(text)`, `getTitle()`, `setLabel(text)`, `setOrientation(o)`, `getOrientation()`,
+ * `addAction(options)`, `removeAction(id)`, `setActions(list)`, `clear()`, `getActions()`,
+ * `getAction(id)`, `setActive(id, bool)`, `toggle(id)`, `getActive()`, `setDisabled(id, bool)`,
+ * `setBadge(id, count)`, `getToolbar()`, `set()`, `destroy()`.
+ * Константа: `ActionsBar.ORIENTATION.{HORIZONTAL, VERTICAL}`.
+ *
+ * **Строка или столбец.** По умолчанию действия идут строкой с переносом — так панель стоит
+ * под шапкой разговора. `ORIENTATION.VERTICAL` ставит их столбцом во всю ширину, как пункты
+ * меню: в таком виде панель кладут в выпадающее меню — например, в кнопку «⋯» полосы
+ * пользователя (`UserBar({ menu: [...] })`), и отдельная полоса в шапке не нужна.
+ */
+class ActionsBar {
+    /** Фабрика действия: `ActionsBar.Button({ icon, label, toggle, danger, onClick })` */
+    static Button = (options = {}) => new ActionsBarButton(options);
+    static ORIENTATION = Toolbar.ORIENTATION;
+    static #counter = 0;
+
+    #id = undefined;
+    #root = document.createElement("chui_actions_bar");
+    #title = document.createElement("actions_bar_title");
+    #toolbar = undefined;
+    #actions = [];
+    #label = undefined;
+    #orientation = undefined;
+    #onChange = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            label: String(),
+            orientation: String(),
+            actions: [],
+            onChange: undefined,
+        }
+    ) {
+        setStyles(__dirname + "/styles.css", "chUiJS_ActionsBar");
+        ActionsBar.#counter += 1;
+        this.#id = options.id === undefined ? `chui_actions_bar_${ActionsBar.#counter}` : options.id;
+        this.#root.id = this.#id;
+        this.#label = options.label;
+        this.#onChange = typeof options.onChange === "function" ? options.onChange : undefined;
+        this.#toolbar = new Toolbar({ label: this.#labelText() });
+        this.setOrientation(
+            options.orientation === undefined ? ActionsBar.ORIENTATION.HORIZONTAL : options.orientation
+        );
+        this.#title.hidden = true;
+        this.#root.append(this.#title, this.#toolbar.set());
+        if (options.title !== undefined) this.setTitle(options.title);
+        if (Array.isArray(options.actions)) for (const action of options.actions) this.addAction(action);
+    }
+
+    // GET
+    getId() {
+        return this.#id;
+    }
+    getTitle() {
+        return this.#title.hidden ? "" : this.#title.innerText;
+    }
+    getOrientation() {
+        return this.#orientation;
+    }
+    getActions() {
+        return this.#actions.slice();
+    }
+    getAction(id = String()) {
+        return this.#actions.find((button) => button.getId() === String(id));
+    }
+    /** Идентификаторы включённых переключателей — состояние панели одним списком */
+    getActive() {
+        return this.#actions.filter((button) => button.isActive() === true).map((button) => button.getId());
+    }
+    /** Полоса действий: нужна тому, кто ставит в панель своё рядом с кнопками */
+    getToolbar() {
+        return this.#toolbar;
+    }
+
+    // SET
+    /** Подпись панели: над действиями, объясняет, к чему они относятся */
+    setTitle(text = String()) {
+        this.#title.innerText = String(text);
+        this.#title.hidden = this.#title.innerText.trim() === "";
+        return this;
+    }
+    /** Имя панели для скринридера: по умолчанию — общая подпись из словаря */
+    setLabel(text = String()) {
+        this.#label = text;
+        this.#toolbar.setLabel(this.#labelText());
+        return this;
+    }
+    /**
+     * Строка или столбец: столбец — вид меню, в нём действия идут во всю ширину.
+     * Ориентацию несёт и полоса внутри (`Toolbar`), и сама панель — по ней считаются отступы
+     */
+    setOrientation(orientation = String()) {
+        this.#orientation =
+            orientation === ActionsBar.ORIENTATION.VERTICAL
+                ? ActionsBar.ORIENTATION.VERTICAL
+                : ActionsBar.ORIENTATION.HORIZONTAL;
+        this.#root.dataset.orientation = this.#orientation;
+        this.#toolbar.setOrientation(this.#orientation);
+        return this;
+    }
+    setActions(actions = []) {
+        this.clear();
+        for (const action of actions) this.addAction(action);
+        return this;
+    }
+    addAction(options = {}) {
+        const button =
+            options instanceof ActionsBarButton
+                ? options
+                : new ActionsBarButton(Object.assign({}, options, { onToggle: (instance) => this.#notify(instance) }));
+        this.#actions.push(button);
+        this.#toolbar.add(button);
+        return button;
+    }
+    removeAction(id = String()) {
+        const index = this.#actions.findIndex((button) => button.getId() === String(id));
+        if (index === -1) return this;
+        const [button] = this.#actions.splice(index, 1);
+        button.set().remove();
+        return this;
+    }
+    clear() {
+        for (const button of this.#actions) button.set().remove();
+        this.#actions = [];
+        return this;
+    }
+    /** Включить или выключить переключатель из кода: состояние то же, что после щелчка */
+    setActive(id = String(), boolean = Boolean()) {
+        const button = this.getAction(id);
+        if (button === undefined || button.isActive() === boolean) return this;
+        button.setActive(boolean);
+        this.#notify(button);
+        return this;
+    }
+    toggle(id = String()) {
+        const button = this.getAction(id);
+        if (button === undefined) return this;
+        return this.setActive(id, button.isActive() === false);
+    }
+    setDisabled(id = String(), boolean = Boolean()) {
+        const button = this.getAction(id);
+        if (button !== undefined) button.setDisabled(boolean);
+        return this;
+    }
+    setBadge(id = String(), count = Number()) {
+        const button = this.getAction(id);
+        if (button !== undefined) button.setBadge(count);
+        return this;
+    }
+
+    set() {
+        return this.#root;
+    }
+    destroy() {
+        this.#actions = [];
+        this.#onChange = undefined;
+        this.#root.remove();
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    /** О смене состояния сообщается один раз: и после щелчка, и после правки из кода */
+    #notify(button) {
+        if (this.#onChange !== undefined) this.#onChange(button, this);
+    }
+    #labelText() {
+        return optionOr(this.#label, undefined) === undefined ? I18n.t("feedback.actionsBar") : String(this.#label);
+    }
+}
+
+exports.ActionsBar = ActionsBar;
+exports.ActionsBarButton = ActionsBarButton;