chuijs 4.0.2 → 4.0.4

package/framework/components/chui_screen_spinner/screen_spinner.js

@@ -0,0 +1,167 @@
+const { Spinner } = require("../chui_spinner/spinner");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { OverlayA11y } = require("../../modules/chui_a11y/chui_a11y");
+const { tokenTime } = require("../../modules/chui_animations/motion");
+
+/**
+ * Экран занят: слой поверх всего окна с индикатором загрузки. Пока он открыт, до содержимого
+ * под ним не добраться — ни мышью, ни клавиатурой, ни скринридером.
+ *
+ * От `Spinner` отличается тем, что тот просто рисует индикатор в потоке, а этот занимает экран:
+ * слой встаёт в `body` (в карточке с `backdrop-filter` Chromium собирает такой узел отдельной
+ * поверхностью и рисует её под слоями из `body` — так уже теряли диалог), фокус удерживается
+ * внутри, а фон становится инертным. Роль слоя — `dialog` с именем загрузки, внутри объявляется
+ * `progressbar`; Escape слой не закрывает: это не сообщение, а признак занятости.
+ *
+ * Опции: `id`, `label` (подпись и имя для скринридера, по умолчанию «{loading}» из словаря),
+ * `delay` (мс до появления — против мигания на коротких операциях).
+ *
+ * Методы: `show()`, `hide()`, `isShown()`, `setLabel(text)`, `destroy()`, `set()`.
+ * Статические: `ScreenSpinner.show(options)` (создать и показать), `ScreenSpinner.hide()`,
+ * `ScreenSpinner.current`.
+ *
+ * ```javascript
+ * const busy = new ScreenSpinner({ delay: 200 });
+ * busy.show();
+ * await load();
+ * busy.hide();
+ * ```
+ */
+class ScreenSpinner {
+    // На экране один такой слой: два спиннера наложились бы друг на друга
+    static #current = undefined;
+
+    #root = document.createElement("chui_screen_spinner");
+    #card = document.createElement("screen_spinner_card");
+    #labelNode = document.createElement("screen_spinner_label");
+    #spinner = undefined;
+    #a11y = undefined;
+    #delay = 0;
+    #timer = undefined;
+    #shown = false;
+    #removed = false;
+
+    constructor(options = {}) {
+        setStyles(__dirname + "/styles.css", "chUiJS_ScreenSpinner");
+        if (options.id !== undefined) this.#root.id = options.id;
+        const delay = Number(options.delay);
+        this.#delay = Number.isFinite(delay) && delay > 0 ? delay : 0;
+        this.#spinner = new Spinner();
+        this.#card.append(this.#spinner.set(), this.#labelNode);
+        this.#root.appendChild(this.#card);
+        this.#root.setAttribute("aria-busy", "true");
+        this.setLabel(optionOr(options.label, I18n.t("feedback.loading")));
+        this.#a11y = new OverlayA11y(this.#root, {
+            role: "dialog",
+            label: this.#labelNode.innerText,
+            // Escape здесь ничего не закрывает: занятость — не сообщение, которое можно отклонить
+            onEscape: () => {},
+        });
+    }
+
+    isShown() {
+        return this.#shown;
+    }
+    getLabel() {
+        return this.#labelNode.innerText;
+    }
+
+    setLabel(text = String()) {
+        const value = String(text);
+        this.#labelNode.innerText = value;
+        // Подпись пуста — под ней и места не надо: индикатор говорит сам
+        this.#labelNode.hidden = value.trim() === "";
+        if (this.#a11y !== undefined) this.#a11y.setLabel(value.trim() === "" ? I18n.t("feedback.loading") : value);
+        return this;
+    }
+
+    /**
+     * Показ: слой встаёт в `body` и объявляет себя слоем. Задержка нужна против мигания —
+     * короткая операция успевает закончиться раньше, чем слой появится, и экран не дрожит.
+     */
+    show() {
+        if (this.#shown === true) return this;
+        this.#shown = true;
+        // Слой показывают заново: след уборки прошлого показа снимаем, иначе новый слой
+        // не уберётся по концу кадра (`finish` посчитал бы работу сделанной)
+        this.#removed = false;
+        if (ScreenSpinner.#current !== undefined && ScreenSpinner.#current !== this) ScreenSpinner.#current.hide();
+        ScreenSpinner.#current = this;
+        const reveal = () => {
+            this.#timer = undefined;
+            if (this.#shown === false) return;
+            if (document.body.contains(this.#root) === false) document.body.appendChild(this.#root);
+            new Animation(this.#root).fadeIn();
+            new Animation(this.#card).panelIn();
+            this.#a11y.open();
+            this.#focusIn();
+        };
+        if (this.#delay > 0) this.#timer = setTimeout(reveal, this.#delay);
+        else reveal();
+        return this;
+    }
+
+    /**
+     * Уход: слой гаснет, узел убирается по концу кадра. Слушатель одноразовый (проверка цели) —
+     * иначе он поймал бы любой конец кадра на слое, а срок из токена страхует случай, когда
+     * кадр не проиграется вовсе (слой скрыт вместе с родителем).
+     */
+    hide() {
+        if (this.#shown === false) return this;
+        this.#shown = false;
+        if (this.#timer !== undefined) {
+            clearTimeout(this.#timer);
+            this.#timer = undefined;
+        }
+        if (ScreenSpinner.#current === this) ScreenSpinner.#current = undefined;
+        // Слой ещё не успел появиться (сработала задержка) — убирать нечего
+        if (this.#root.parentElement === null) return this;
+        this.#a11y.close();
+        new Animation(this.#root).fadeOut();
+        new Animation(this.#card).fadeOut();
+        const finish = () => {
+            if (this.#removed === true) return;
+            this.#removed = true;
+            this.#root.removeEventListener("animationend", finish);
+            this.#root.remove();
+        };
+        this.#root.addEventListener("animationend", finish);
+        setTimeout(finish, tokenTime("--motion_fast"));
+        return this;
+    }
+
+    set() {
+        return this.#root;
+    }
+    /** Полное удаление: снять слой (вместе с инертным фоном и слушателями) и убрать узел */
+    destroy() {
+        this.hide();
+        this.#removed = true;
+        this.#root.remove();
+    }
+
+    // === СТАТИЧЕСКОЕ ===
+    /** Показать спиннер, не заводя переменную: `ScreenSpinner.show({ label: "Сохраняем" })` */
+    static show(options = {}) {
+        const spinner = new ScreenSpinner(options);
+        spinner.show();
+        return spinner;
+    }
+    static hide() {
+        if (ScreenSpinner.#current !== undefined) ScreenSpinner.#current.hide();
+    }
+    static get current() {
+        return ScreenSpinner.#current;
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    /** Фокус — в слой: иначе он остался бы на кнопке под ним, и Tab уходил бы в фон */
+    #focusIn() {
+        this.#root.setAttribute("tabindex", "-1");
+        this.#root.focus({ preventScroll: true });
+    }
+}
+
+exports.ScreenSpinner = ScreenSpinner;

package/framework/components/chui_screen_spinner/styles.css

@@ -0,0 +1,49 @@
+/* Экран занят: слой поверх окна с индикатором загрузки.
+   Занавес держит сам слой (он и есть затемнение), а материал карточки — размытие: у слоя
+   `backdrop-filter` нет, иначе карточка внутри не увидела бы страницу (элемент с фильтром
+   становится собственным «backdrop root»). */
+
+chui_screen_spinner {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    /* Выше модальных слоёв (у диалога 1000, у занавеса 999): занятость перекрывает всё */
+    z-index: 1100;
+    background: var(--modal_scrim);
+    /* Слой принимает на себя мышь и клавиатуру: под ним ничего не нажать */
+    cursor: progress;
+}
+
+chui_screen_spinner:focus-visible {
+    outline: none;
+}
+
+screen_spinner_card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    box-sizing: border-box;
+    padding: 18px 22px;
+    border: 1px solid var(--border_color);
+    border-radius: var(--radius_md);
+    background: var(--modal_background);
+    backdrop-filter: var(--global_blur);
+    -webkit-backdrop-filter: var(--global_blur);
+    box-shadow: var(--box_shadow_modal);
+    color: var(--text_color);
+}
+
+screen_spinner_label {
+    font-size: var(--font_labels_size);
+    color: var(--text_color_disabled);
+    text-align: center;
+}
+
+/* Подписи нет — под неё не остаётся и зазора */
+screen_spinner_label[hidden] {
+    display: none;
+}

package/framework/components/chui_segmented_control/segmented_control.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require("../../modules/chui_functions");
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 
 /**
  * Сегментированный переключатель: один выбор из небольшого набора равнозначных вариантов
@@ -35,7 +35,7 @@ const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
 class SegmentedControl {
     static SIZE = {
         SMALL: "small",
-        DEFAULT: "default"
+        DEFAULT: "default",
     };
     static #counter = 0;
 
@@ -48,24 +48,29 @@ class SegmentedControl {
     // Вариант с tabindex="0": с ним же работает обход Tab; за фокусом и выбором следит отдельно
     #active = undefined;
     #disabled = new Set();
-    #on_change = undefined;
-    #activate_on_focus = false;
+    #onChange = undefined;
+    #activateOnFocus = false;
+    // Подложка выбора измеряется по вёрстке: наблюдатель и отложенный кадр держат её на месте
+    #observer = undefined;
+    #frame = undefined;
 
-    constructor(options = {
-        id: String(),
-        options: [],
-        value: String(),
-        label: String(),
-        size: String(),
-        stretch: Boolean(),
-        activateOnFocus: Boolean(),
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            options: [],
+            value: String(),
+            label: String(),
+            size: String(),
+            stretch: Boolean(),
+            activateOnFocus: Boolean(),
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_SegmentedControl");
         SegmentedControl.#counter += 1;
         this.#id = options.id === undefined ? `chui_segmented_control_${SegmentedControl.#counter}` : options.id;
-        this.#on_change = options.onChange;
-        this.#activate_on_focus = options.activateOnFocus === true;
+        this.#onChange = options.onChange;
+        this.#activateOnFocus = options.activateOnFocus === true;
         this.#root.id = this.#id;
         this.#root.setAttribute("role", "radiogroup");
         this.setSize(options.size === undefined ? SegmentedControl.SIZE.DEFAULT : options.size);
@@ -78,6 +83,28 @@ class SegmentedControl {
         // Пустая заготовка опции — это «выбор не сделан», а не значение «»
         const value = optionOr(options.value, undefined);
         if (value !== undefined) this.setValue(value, true);
+        // Ширина меняется от раскладки (растянутый контрол, поворот окна): без пересчёта
+        // подложка осталась бы на прежнем варианте
+        if (typeof ResizeObserver === "function") {
+            this.#observer = new ResizeObserver(() => this.#syncIndicator());
+            this.#observer.observe(this.#root);
+        }
+    }
+
+    /** Полное удаление: снять наблюдатель, отложенный кадр и слушатели */
+    destroy() {
+        if (this.#observer !== undefined) {
+            this.#observer.disconnect();
+            this.#observer = undefined;
+        }
+        if (this.#frame !== undefined) {
+            cancelAnimationFrame(this.#frame);
+            this.#frame = undefined;
+        }
+        this.#root.removeEventListener("keydown", this.#onKeyDown);
+        this.#root.removeEventListener("click", this.#onClick);
+        this.#root.remove();
+        return this;
     }
 
     // GET
@@ -94,7 +121,7 @@ class SegmentedControl {
     getOptions() {
         return this.#order.map((value) => {
             const record = this.#options.get(value);
-            return {value: record.value, title: record.title};
+            return { value: record.value, title: record.title };
         });
     }
 
@@ -125,7 +152,8 @@ class SegmentedControl {
 
     /** Размер вариантов: `SegmentedControl.SIZE.{SMALL, DEFAULT}` */
     setSize(size = String()) {
-        this.#root.dataset.size = size === SegmentedControl.SIZE.SMALL ? SegmentedControl.SIZE.SMALL : SegmentedControl.SIZE.DEFAULT;
+        this.#root.dataset.size =
+            size === SegmentedControl.SIZE.SMALL ? SegmentedControl.SIZE.SMALL : SegmentedControl.SIZE.DEFAULT;
         return this;
     }
 
@@ -149,12 +177,12 @@ class SegmentedControl {
         this.#value = next;
         this.#active = next;
         this.#sync();
-        if (!silent && changed && this.#on_change !== undefined) this.#on_change(next);
+        if (!silent && changed && this.#onChange !== undefined) this.#onChange(next);
         return this;
     }
 
     /** Добавить вариант: `{value, title, icon, disabled}` */
-    addOption(option = {value: String(), title: String(), icon: undefined, disabled: Boolean()}) {
+    addOption(option = { value: String(), title: String(), icon: undefined, disabled: Boolean() }) {
         this.#root.appendChild(this.#createOption(option));
         this.#sync();
         return this;
@@ -174,7 +202,8 @@ class SegmentedControl {
         this.#value = undefined;
         this.#active = undefined;
         for (const option of list) this.#root.appendChild(this.#createOption(option));
-        if (previous !== undefined && this.#options.has(previous) && !this.#disabled.has(previous)) this.#value = previous;
+        if (previous !== undefined && this.#options.has(previous) && !this.#disabled.has(previous))
+            this.#value = previous;
         this.#sync();
         return this;
     }
@@ -229,11 +258,12 @@ class SegmentedControl {
         makeKeyboardButton(node, "radio");
         node.setAttribute("aria-checked", "false");
         node.dataset.value = value;
-        if (option.icon !== undefined && option.icon !== null) node.insertAdjacentHTML("afterbegin", option.icon.getHTML());
+        if (option.icon !== undefined && option.icon !== null)
+            node.insertAdjacentHTML("afterbegin", option.icon.getHTML());
         const title = document.createElement("segmented_title");
         title.innerText = option.title === undefined ? value : String(option.title);
         node.appendChild(title);
-        this.#options.set(value, {value: value, title: title.innerText, node: node});
+        this.#options.set(value, { value: value, title: title.innerText, node: node });
         this.#order.push(value);
         // Запрет мог быть выставлен программно (setDisabled) и остаться после пересборки набора
         if (option.disabled === true || this.#disabled.has(value)) this.setDisabled(value, true);
@@ -261,13 +291,45 @@ class SegmentedControl {
             record.node.setAttribute("aria-checked", value === this.#value ? "true" : "false");
             record.node.setAttribute("tabindex", value === this.#active ? "0" : "-1");
         }
+        this.#scheduleIndicator();
+    }
+
+    /** Подложку двигают после раскладки: место варианта читается только из вёрстки */
+    #scheduleIndicator() {
+        if (typeof requestAnimationFrame !== "function") {
+            this.#syncIndicator();
+            return;
+        }
+        if (this.#frame !== undefined) return;
+        this.#frame = requestAnimationFrame(() => {
+            this.#frame = undefined;
+            this.#syncIndicator();
+        });
+    }
+
+    /**
+     * Место и ширина подложки выбора. Ноль — выбора нет или вёрстки ещё нет: подложки
+     * нулевой ширины не видно, поэтому до первой раскладки контрол выглядит как прежде.
+     */
+    #syncIndicator() {
+        const record = this.#value === undefined ? undefined : this.#options.get(this.#value);
+        if (record === undefined || record.node.offsetWidth === 0) {
+            this.#root.style.setProperty("--segmented_width", "0px");
+            return;
+        }
+        // В RTL началом ряда служит правый край: подложка стоит у него и едет влево
+        const rtl = window.getComputedStyle(this.#root).direction === "rtl";
+        const node = record.node;
+        const x = rtl ? this.#root.clientWidth - (node.offsetLeft + node.offsetWidth) : node.offsetLeft;
+        this.#root.style.setProperty("--segmented_offset", `${rtl ? -x : x}px`);
+        this.#root.style.setProperty("--segmented_width", `${node.offsetWidth}px`);
     }
 
     #focus(value = String()) {
         this.#active = value;
         this.#sync();
         this.#options.get(value).node.focus();
-        if (this.#activate_on_focus) this.setValue(value);
+        if (this.#activateOnFocus) this.setValue(value);
     }
 
     // Варианты — кастомные теги, поэтому клик приходит и от мыши, и от Enter/Space
@@ -294,10 +356,11 @@ class SegmentedControl {
         let next;
         if (event.key === "Home") next = 0;
         else if (event.key === "End") next = available.length - 1;
-        else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = (current - 1 + available.length) % available.length;
+        else if (event.key === "ArrowLeft" || event.key === "ArrowUp")
+            next = (current - 1 + available.length) % available.length;
         else next = (current + 1) % available.length;
         this.#focus(available[next]);
     };
 }
 
-exports.SegmentedControl = SegmentedControl
+exports.SegmentedControl = SegmentedControl;

package/framework/components/chui_segmented_control/styles.css

@@ -1,5 +1,5 @@
 /* Сегментированный переключатель: рамка — общая заливка контрола,
-   выбранный вариант — акцент (--blue_prime_background) */
+   выбранный вариант — подвижная подложка акцента */
 chui_segmented_control {
     display: inline-flex;
     align-items: center;
@@ -7,8 +7,30 @@ chui_segmented_control {
     padding: 2px;
     width: max-content;
     box-sizing: border-box;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
+    /* Место и ширина подложки: считает JS по вёрстке, нули — выбор не сделан */
+    --segmented_offset: 0px;
+    --segmented_width: 0px;
+}
+
+/* Подвижная подложка выбранного варианта: одна и та же деталь переезжает между
+   вариантами, вместо мгновенной смены заливки — как у системного переключателя.
+   Внутренний отступ равен отступу контейнера, поэтому подложка встаёт в ряд вариантов */
+chui_segmented_control::before {
+    content: "";
+    position: absolute;
+    z-index: 0;
+    inset-block: 2px;
+    inset-inline-start: 0;
+    width: var(--segmented_width);
+    border-radius: var(--radius_sm);
+    background: var(--blue_prime_background);
+    transform: translateX(var(--segmented_offset));
+    transition:
+        transform var(--motion_base) var(--motion_ease),
+        width var(--motion_base) var(--motion_ease);
+    pointer-events: none;
 }
 
 segmented_option {
@@ -17,7 +39,7 @@ segmented_option {
     gap: 6px;
     padding: 4px 10px;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: transparent;
     color: var(--text_color);
     font-family: inherit;
@@ -26,14 +48,18 @@ segmented_option {
     cursor: pointer;
     outline: none;
     user-select: none;
+    /* Вариант выше подложки: иначе акцент остался бы за текстом */
+    z-index: 1;
 }
 
-segmented_option:hover {
+/* Наведение — только у невыбранных: у выбранного заливку несёт подложка, и вторая
+   заливка читалась бы как другой цвет */
+segmented_option:not([aria-checked="true"]):hover {
     background: var(--element_background_hover);
 }
 
 segmented_option[aria-checked="true"] {
-    background: var(--blue_prime_background);
+    background: transparent;
     color: var(--text_color_hover);
 }
 
@@ -56,7 +82,7 @@ segmented_option[aria-disabled="true"]:hover {
 
 segmented_option[aria-disabled="true"][aria-checked="true"] {
     background: var(--blue_prime_background);
-    color: var(--text_color_hover_disable);
+    color: var(--text_color_hover_disabled);
 }
 
 /* chui_icon задаёт собственный цвет, поэтому без этого правила глиф остаётся белым */