chuijs 4.0.3 → 4.0.4

package/framework/modules/chui_a11y/chui_a11y.js

@@ -26,16 +26,16 @@ const FOCUSABLE_SELECTOR = [
 class OverlayA11y {
     // Стек открытых слоёв: нужен, чтобы вложенный слой не снимал фон-инерт у родителя
     static #stack = [];
-    static #labelled_counter = 0;
+    static #labelledCounter = 0;
 
     #element = undefined;
     #role = "dialog";
     #label = undefined;
-    #label_node = undefined;
-    #described_by = undefined;
-    #on_escape = undefined;
-    #previous_focus = undefined;
-    #is_open = false;
+    #labelNode = undefined;
+    #describedBy = undefined;
+    #onEscape = undefined;
+    #previousFocus = undefined;
+    #isOpen = false;
 
     constructor(
         element,
@@ -50,14 +50,14 @@ class OverlayA11y {
         this.#element = element;
         if (options.role !== undefined) this.#role = options.role;
         this.#label = options.label;
-        this.#label_node = options.labelNode;
-        this.#described_by = options.describedBy;
-        this.#on_escape = options.onEscape;
+        this.#labelNode = options.labelNode;
+        this.#describedBy = options.describedBy;
+        this.#onEscape = options.onEscape;
         this.#applyAria();
     }
 
     get isOpen() {
-        return this.#is_open;
+        return this.#isOpen;
     }
 
     setLabel(text = String()) {
@@ -66,18 +66,18 @@ class OverlayA11y {
     }
 
     open() {
-        if (this.#is_open) return;
-        this.#is_open = true;
+        if (this.#isOpen) return;
+        this.#isOpen = true;
         OverlayA11y.#stack.push(this);
-        this.#previous_focus = document.activeElement;
+        this.#previousFocus = document.activeElement;
         OverlayA11y.#applyInert();
         document.addEventListener("keydown", this.#keydownEvent, true);
         this.#focusFirst();
     }
 
     close() {
-        if (!this.#is_open) return;
-        this.#is_open = false;
+        if (!this.#isOpen) return;
+        this.#isOpen = false;
         const index = OverlayA11y.#stack.indexOf(this);
         if (index !== -1) OverlayA11y.#stack.splice(index, 1);
         document.removeEventListener("keydown", this.#keydownEvent, true);
@@ -89,21 +89,21 @@ class OverlayA11y {
         const element = this.#element;
         element.setAttribute("role", this.#role);
         element.setAttribute("aria-modal", "true");
-        if (this.#label_node !== undefined) {
-            element.setAttribute("aria-labelledby", OverlayA11y.#ensureId(this.#label_node));
+        if (this.#labelNode !== undefined) {
+            element.setAttribute("aria-labelledby", OverlayA11y.#ensureId(this.#labelNode));
             element.removeAttribute("aria-label");
         } else if (this.#label !== undefined) {
             element.setAttribute("aria-label", this.#label);
         }
-        if (this.#described_by !== undefined) {
-            element.setAttribute("aria-describedby", OverlayA11y.#ensureId(this.#described_by));
+        if (this.#describedBy !== undefined) {
+            element.setAttribute("aria-describedby", OverlayA11y.#ensureId(this.#describedBy));
         }
     }
 
     static #ensureId(element) {
         if (element.id === undefined || element.id === "") {
-            OverlayA11y.#labelled_counter += 1;
-            element.id = "chui_a11y_node_" + OverlayA11y.#labelled_counter;
+            OverlayA11y.#labelledCounter += 1;
+            element.id = "chui_a11y_node_" + OverlayA11y.#labelledCounter;
         }
         return element.id;
     }
@@ -146,8 +146,8 @@ class OverlayA11y {
     }
 
     #restoreFocus() {
-        const previous = this.#previous_focus;
-        this.#previous_focus = undefined;
+        const previous = this.#previousFocus;
+        this.#previousFocus = undefined;
         if (previous !== undefined && previous !== null && document.body.contains(previous)) previous.focus();
     }
 
@@ -177,7 +177,7 @@ class OverlayA11y {
         if (event.key === "Escape") {
             event.preventDefault();
             event.stopPropagation();
-            if (this.#on_escape !== undefined) this.#on_escape();
+            if (this.#onEscape !== undefined) this.#onEscape();
             else this.close();
             return;
         }
@@ -226,17 +226,17 @@ const isDisabled = (element) =>
  */
 class MenuKeyboard {
     #container = undefined;
-    #item_selector = undefined;
+    #itemSelector = undefined;
     #role = "menu";
-    #item_role = "menuitem";
-    #submenu_selector = undefined;
-    #on_submenu_open = undefined;
-    #is_submenu = false;
-    #type_buffer = "";
-    #type_at = 0;
-    #on_escape = undefined;
+    #itemRole = "menuitem";
+    #submenuSelector = undefined;
+    #onSubmenuOpen = undefined;
+    #isSubmenu = false;
+    #typeBuffer = "";
+    #typeAt = 0;
+    #onEscape = undefined;
     #trigger = undefined;
-    #trigger_bound = false;
+    #triggerBound = false;
 
     constructor(
         container,
@@ -251,12 +251,12 @@ class MenuKeyboard {
     ) {
         this.#container = container;
         if (options.role !== undefined) this.#role = options.role;
-        if (options.itemRole !== undefined) this.#item_role = options.itemRole;
-        this.#item_selector = options.itemSelector;
-        this.#submenu_selector = options.submenuSelector;
-        this.#on_escape = options.onEscape;
-        this.#on_submenu_open = options.onSubmenuOpen;
-        this.#is_submenu = options.submenu === true;
+        if (options.itemRole !== undefined) this.#itemRole = options.itemRole;
+        this.#itemSelector = options.itemSelector;
+        this.#submenuSelector = options.submenuSelector;
+        this.#onEscape = options.onEscape;
+        this.#onSubmenuOpen = options.onSubmenuOpen;
+        this.#isSubmenu = options.submenu === true;
         this.#trigger = options.trigger;
         container.setAttribute("role", this.#role);
         this.refresh();
@@ -265,17 +265,17 @@ class MenuKeyboard {
         // содержит контейнер (строка подменю — предок своей панели), то это тот же путь события:
         // второй обработчик на предке обработал бы одну клавишу дважды — пункт подменю срабатывал бы
         // от одного Enter дважды, а одна стрелка перескакивала бы через пункт.
-        this.#trigger_bound = options.trigger !== undefined && options.trigger.contains(container) === false;
-        if (this.#trigger_bound) options.trigger.addEventListener("keydown", this.#keydownEvent);
+        this.#triggerBound = options.trigger !== undefined && options.trigger.contains(container) === false;
+        if (this.#triggerBound) options.trigger.addEventListener("keydown", this.#keydownEvent);
     }
 
     /** Перечитать пункты: роли, tabindex, состояние триггера (в том числе в закрытом меню) */
     refresh() {
         for (const item of this.#allItems()) {
-            if (item.getAttribute("role") === null) item.setAttribute("role", this.#item_role);
+            if (item.getAttribute("role") === null) item.setAttribute("role", this.#itemRole);
             if (item.getAttribute("tabindex") === null) item.setAttribute("tabindex", "-1");
             if (isDisabled(item)) item.setAttribute("aria-disabled", "true");
-            if (this.#submenu_selector !== undefined && item.querySelector(this.#submenu_selector) !== null) {
+            if (this.#submenuSelector !== undefined && item.querySelector(this.#submenuSelector) !== null) {
                 item.setAttribute("aria-haspopup", "true");
             }
         }
@@ -296,7 +296,7 @@ class MenuKeyboard {
 
     // Все пункты своего уровня (и скрытые — им тоже нужны роли и tabindex)
     #allItems() {
-        return [...this.#container.querySelectorAll(this.#item_selector)].filter(
+        return [...this.#container.querySelectorAll(this.#itemSelector)].filter(
             (item) => item.closest('[role="menu"]') === this.#container
         );
     }
@@ -330,7 +330,7 @@ class MenuKeyboard {
     }
 
     #openOrClick(item) {
-        if (this.#submenu_selector !== undefined && item.querySelector(this.#submenu_selector) !== null) {
+        if (this.#submenuSelector !== undefined && item.querySelector(this.#submenuSelector) !== null) {
             this.#openSubmenu(item);
             return;
         }
@@ -338,11 +338,11 @@ class MenuKeyboard {
     }
 
     #openSubmenu(row) {
-        if (this.#submenu_selector === undefined) return;
-        const submenu = row.querySelector(this.#submenu_selector);
+        if (this.#submenuSelector === undefined) return;
+        const submenu = row.querySelector(this.#submenuSelector);
         if (submenu === null) return;
-        if (this.#on_submenu_open !== undefined) this.#on_submenu_open(row);
-        const first = [...submenu.querySelectorAll(this.#item_selector)].filter(isVisible)[0];
+        if (this.#onSubmenuOpen !== undefined) this.#onSubmenuOpen(row);
+        const first = [...submenu.querySelectorAll(this.#itemSelector)].filter(isVisible)[0];
         if (first !== undefined) first.focus();
     }
 
@@ -381,20 +381,20 @@ class MenuKeyboard {
                 break;
             }
             case "ArrowLeft": {
-                if (!this.#is_submenu) break;
+                if (!this.#isSubmenu) break;
                 event.preventDefault();
-                if (this.#on_escape !== undefined) this.#on_escape();
+                if (this.#onEscape !== undefined) this.#onEscape();
                 if (this.#trigger !== undefined && document.body.contains(this.#trigger)) this.#trigger.focus();
                 break;
             }
             case "Escape":
                 event.preventDefault();
                 event.stopPropagation();
-                if (this.#on_escape !== undefined) this.#on_escape();
+                if (this.#onEscape !== undefined) this.#onEscape();
                 if (this.#trigger !== undefined && document.body.contains(this.#trigger)) this.#trigger.focus();
                 break;
             case "Tab":
-                if (this.#on_escape !== undefined) this.#on_escape();
+                if (this.#onEscape !== undefined) this.#onEscape();
                 break;
             default:
                 // Type-ahead: набор букв переводит фокус на пункт с таким началом
@@ -408,14 +408,14 @@ class MenuKeyboard {
     #typeahead(char) {
         const now = Date.now();
         // Буфер сбрасывается, если с прошлой буквы прошло больше 700 мс
-        this.#type_buffer = (now - this.#type_at > 700 ? "" : this.#type_buffer) + char.toLowerCase();
-        this.#type_at = now;
+        this.#typeBuffer = (now - this.#typeAt > 700 ? "" : this.#typeBuffer) + char.toLowerCase();
+        this.#typeAt = now;
         const items = this.#items();
         if (items.length === 0) return;
         const current = this.#activeIndex(items);
         // Ищем по кругу, начиная со следующего пункта
         const ordered = current === -1 ? items : [...items.slice(current + 1), ...items.slice(0, current + 1)];
-        const match = ordered.find((item) => this.#label(item).startsWith(this.#type_buffer));
+        const match = ordered.find((item) => this.#label(item).startsWith(this.#typeBuffer));
         if (match !== undefined) this.#focusItem(items.indexOf(match));
     }
 
@@ -433,7 +433,7 @@ class MenuKeyboard {
 
     destroy() {
         this.#container.removeEventListener("keydown", this.#keydownEvent);
-        if (this.#trigger !== undefined && this.#trigger_bound)
+        if (this.#trigger !== undefined && this.#triggerBound)
             this.#trigger.removeEventListener("keydown", this.#keydownEvent);
     }
 }
@@ -446,11 +446,11 @@ class MenuKeyboard {
 class ComboboxKeyboard {
     #input = undefined;
     #dropdown = undefined;
-    #option_selector = undefined;
-    #on_escape = undefined;
-    #on_open = undefined;
+    #optionSelector = undefined;
+    #onEscape = undefined;
+    #onOpen = undefined;
     #active = undefined;
-    #selection_state = undefined;
+    #selectionState = undefined;
 
     constructor(
         input,
@@ -464,10 +464,10 @@ class ComboboxKeyboard {
     ) {
         this.#input = input;
         this.#dropdown = options.dropdown;
-        this.#option_selector = options.optionSelector;
-        this.#on_escape = options.onEscape;
-        this.#on_open = options.onOpen;
-        this.#selection_state = options.selectionState;
+        this.#optionSelector = options.optionSelector;
+        this.#onEscape = options.onEscape;
+        this.#onOpen = options.onOpen;
+        this.#selectionState = options.selectionState;
         input.setAttribute("role", "combobox");
         input.setAttribute("aria-haspopup", "listbox");
         input.setAttribute("aria-expanded", "false");
@@ -503,7 +503,7 @@ class ComboboxKeyboard {
 
     #allOptions() {
         if (this.#dropdown === undefined) return [];
-        return [...this.#dropdown.querySelectorAll(this.#option_selector)];
+        return [...this.#dropdown.querySelectorAll(this.#optionSelector)];
     }
 
     #options() {
@@ -513,11 +513,11 @@ class ComboboxKeyboard {
     #applyActive() {
         // Множественный выбор: `aria-selected` показывает выбор, а не наведение (его несёт
         // `aria-activedescendant`) — иначе пометка «под курсором» выглядела бы как отметка.
-        const has_selection = typeof this.#selection_state === "function";
+        const hasSelection = typeof this.#selectionState === "function";
         for (const option of this.#allOptions()) {
             const active = option === this.#active;
             option.classList.toggle(ACTIVE_CLASS, active);
-            const selected = has_selection ? this.#selection_state(option) === true : active;
+            const selected = hasSelection ? this.#selectionState(option) === true : active;
             option.setAttribute("aria-selected", selected ? "true" : "false");
         }
         if (this.#active === undefined) this.#input.removeAttribute("aria-activedescendant");
@@ -541,8 +541,7 @@ class ComboboxKeyboard {
             case "ArrowDown":
             case "ArrowUp": {
                 event.preventDefault();
-                if (this.#input.getAttribute("aria-expanded") !== "true" && this.#on_open !== undefined)
-                    this.#on_open();
+                if (this.#input.getAttribute("aria-expanded") !== "true" && this.#onOpen !== undefined) this.#onOpen();
                 this.#move(event.key === "ArrowDown" ? 1 : -1);
                 break;
             }
@@ -572,7 +571,7 @@ class ComboboxKeyboard {
                     this.#applyActive();
                     break;
                 }
-                if (this.#on_escape !== undefined) this.#on_escape();
+                if (this.#onEscape !== undefined) this.#onEscape();
                 break;
             }
             default:
@@ -594,20 +593,20 @@ class ComboboxKeyboard {
  */
 class RovingKeyboard {
     #container = undefined;
-    #item_selector = undefined;
-    #on_click = undefined;
+    #itemSelector = undefined;
+    #onClick = undefined;
 
     constructor(container, options = { itemSelector: String() }) {
         this.#container = container;
-        this.#item_selector = options.itemSelector;
+        this.#itemSelector = options.itemSelector;
         this.refresh();
-        this.#on_click = (event) => {
-            const item = event.target instanceof Element ? event.target.closest(this.#item_selector) : null;
+        this.#onClick = (event) => {
+            const item = event.target instanceof Element ? event.target.closest(this.#itemSelector) : null;
             if (item === null || !this.#container.contains(item)) return;
             this.#applyStop(item);
         };
         container.addEventListener("keydown", this.#keydownEvent);
-        container.addEventListener("click", this.#on_click);
+        container.addEventListener("click", this.#onClick);
     }
 
     /** Перечитать пункты: остановка остаётся на прежнем, если он ещё доступен */
@@ -624,7 +623,7 @@ class RovingKeyboard {
 
     // Все пункты группы, включая скрытые: tabindex проставляется и до появления панели на экране
     #allItems() {
-        return [...this.#container.querySelectorAll(this.#item_selector)];
+        return [...this.#container.querySelectorAll(this.#itemSelector)];
     }
 
     // Пункты, по которым ходит клавиатура: видимые и не запрещённые
@@ -686,7 +685,7 @@ class RovingKeyboard {
 
     destroy() {
         this.#container.removeEventListener("keydown", this.#keydownEvent);
-        this.#container.removeEventListener("click", this.#on_click);
+        this.#container.removeEventListener("click", this.#onClick);
     }
 }
 

package/framework/modules/chui_animations/animations.js

@@ -1,4 +1,12 @@
-// transition: all var(--transition_time);
+/** Виды движения: имя кадра даёт JS, а длительность и кривую — класс движения в styles.css */
+const MOTION = {
+    ENTER: "enter",
+    EXIT: "exit",
+    POP: "pop",
+};
+
+/** Кадр появления всплывающей панели у триггера — общий кадр оболочки */
+const PANEL_FRAME = "chui_panel_in";
 
 class Animation {
     #element = undefined;
@@ -8,6 +16,16 @@ class Animation {
         if (element !== undefined) this.#element = element;
     }
 
+    /**
+     * Запустить кадры `name` как движение вида `kind`. Длительность и кривая — в `styles.css`
+     * по классу `data-motion`: вход базовый, выход короче, отклик с лёгким перелётом. Прежде
+     * время приходило из общего `animation-duration` на `*`, и все движения шли одним временем.
+     */
+    #play(name = String(), kind = String()) {
+        this.#element.dataset.motion = kind;
+        this.#element.style.animationName = name;
+    }
+
     /**
      * Отменить незавершённое скрытие: его `animationend` (removeEvents) снимает у слоя
      * `animation-name` и `display`. Если слой открыли заново раньше, чем анимация закрытия
@@ -18,35 +36,78 @@ class Animation {
         this.#element.style.removeProperty("animation-name");
     }
 
+    /**
+     * Кадр появления доигран — вид движения снимается, а имя кадра остаётся. По имени видно,
+     * что слой уже открыт (повторный показ не перезапускает кадр), а само оно без вида ничего
+     * не держит. Вид держит конечное состояние (`animation-fill-mode: both` в styles.css),
+     * и на слое оставался бы вычисленный `transform` — пусть и единичный: элемент с `transform`
+     * становится собственным «backdrop root», и размытие подложки перестаёт видеть содержимое
+     * под слоем (замер: меню контекста с блюром и без — картинка не менялась, пока вид стоял).
+     *
+     * Стрелочное поле, а не метод: у метода в слушателе нет `this`, и он падал бы на первом
+     * же конце кадра.
+     */
+    #entranceEnd = (event) => {
+        if (event.target !== this.#element) return;
+        this.#element.removeEventListener("animationend", this.#entranceEnd);
+        this.#element.removeAttribute("data-motion");
+    };
+
+    /** Показать слой кадром появления и снять вид по концу кадра */
+    #enter(name = String(), kind = String()) {
+        this.#play(name, kind);
+        this.#element.addEventListener("animationend", this.#entranceEnd);
+    }
+
     fadeIn() {
         this.#cancelHide();
         if (window.getComputedStyle(this.#element, null).display === "none") {
             if (this.#element.tagName !== "TABLE") this.#element.style.display = "flex";
         }
-        this.#element.style.transition = "transform .0s";
-        this.#element.style.animationName = "fade-in";
+        this.#enter("fade-in", MOTION.ENTER);
     }
 
     fadeOut() {
-        this.#element.style.transition = "transform .0s";
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = "fade-out";
+            this.#play("fade-out", MOTION.EXIT);
             this.#element.addEventListener("animationend", removeEvents);
         }
     }
 
+    /**
+     * Появление всплывающей панели у триггера (список, меню, поповер): панель приходит
+     * сверху вниз и чуть вырастает. Вид `pop` — кривая с лёгким перелётом, поэтому
+     * открытие читается откликом, а не вспышкой: прежний `fadeIn` менял только прозрачность.
+     *
+     * Повторный показ уже открытой панели кадр не запускает: поле открывают и `focus`,
+     * и `click` — одно действие приходило сюда дважды, а `#cancelHide` перед кадром снимает
+     * имя кадра, поэтому второй вызов начинал его заново и панель мигала на открытии.
+     */
+    panelIn() {
+        const open =
+            this.#element.style.animationName === PANEL_FRAME &&
+            window.getComputedStyle(this.#element, null).display !== "none";
+        if (open) return;
+        this.#cancelHide();
+        if (window.getComputedStyle(this.#element, null).display === "none") {
+            if (this.#element.tagName !== "TABLE") this.#element.style.display = "flex";
+        }
+        this.#play(PANEL_FRAME, MOTION.POP);
+        this.#element.addEventListener("animationend", this.#entranceEnd);
+    }
+
     // SCALE
     scaleIn() {
         this.#cancelHide();
         if (window.getComputedStyle(this.#element, null).display === "none") {
             if (this.#element.tagName !== "TABLE") this.#element.style.display = "flex";
         }
-        this.#element.style.animationName = "scale-in";
+        this.#enter("scale-in", MOTION.POP);
     }
 
     scaleOut() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = "scale-out";
+            this.#play("scale-out", MOTION.EXIT);
             this.#element.addEventListener("animationend", removeEvents);
         }
     }
@@ -57,12 +118,12 @@ class Animation {
         if (window.getComputedStyle(this.#element, null).display === "none") {
             if (this.#element.tagName !== "TABLE") this.#element.style.display = "flex";
         }
-        this.#element.style.animationName = "slide-right-in";
+        this.#enter("slide-right-in", MOTION.ENTER);
     }
 
     slideRightOut() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = "slide-right-out";
+            this.#play("slide-right-out", MOTION.EXIT);
             this.#element.addEventListener("animationend", removeEvents);
         }
     }
@@ -73,12 +134,12 @@ class Animation {
         if (window.getComputedStyle(this.#element, null).display === "none") {
             if (this.#element.tagName !== "TABLE") this.#element.style.display = "flex";
         }
-        this.#element.style.animationName = "slide-bottom-in";
+        this.#enter("slide-bottom-in", MOTION.ENTER);
     }
 
     slideBottomOut() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = "slide-bottom-out";
+            this.#play("slide-bottom-out", MOTION.EXIT);
             this.#element.addEventListener("animationend", removeEvents);
         }
     }
@@ -86,28 +147,28 @@ class Animation {
     // REMOVE
     slideBottomOutAndRemove() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = "slide-bottom-out";
+            this.#play("slide-bottom-out", MOTION.EXIT);
             this.#element.addEventListener("animationend", removeEvents);
         }
     }
 
     slideRightOutAndRemove() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = "slide-right-out";
+            this.#play("slide-right-out", MOTION.EXIT);
             this.#element.addEventListener("animationend", removeEvents);
         }
     }
 
     scaleOutAndRemove() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = "scale-out";
+            this.#play("scale-out", MOTION.EXIT);
             this.#element.addEventListener("animationend", removeEvents2);
         }
     }
 
     fadeOutAndRemove() {
         if (this.#element.style.animationName) {
-            this.#element.style.animationName = "fade-out";
+            this.#play("fade-out", MOTION.EXIT);
             this.#element.addEventListener("animationend", removeEvents2);
         }
     }
@@ -118,6 +179,7 @@ class Animation {
     }
 
     removeStyles() {
+        this.#element.removeAttribute("data-motion");
         this.#element.removeAttribute("style");
     }
 }