chuijs 4.0.3 → 4.0.4

package/framework/components/chui_menu_bar/menu_bar.js

@@ -10,13 +10,13 @@ class MenuBar {
     // Панели выпадающих списков лежат в body, а не в полосе (см. MenuBarDropDown), поэтому
     // снятие полосы обязано убирать и их: экземпляр находится по узлу полосы
     static #instances = new WeakMap();
-    #chui_menu_bar_main = document.createElement("chui_menu_bar_main");
+    #chuiMenuBarMain = document.createElement("chui_menu_bar_main");
     #dropdowns = [];
     constructor(options = { test: Boolean() }) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_MenuBar");
-        MenuBar.#instances.set(this.#chui_menu_bar_main, this);
-        if (options.test !== undefined) this.#chui_menu_bar_main.setAttribute("test", options.test);
-        this.#chui_menu_bar_main.addEventListener("wheel", this.#wheel_event, { passive: true });
+        MenuBar.#instances.set(this.#chuiMenuBarMain, this);
+        if (options.test !== undefined) this.#chuiMenuBarMain.setAttribute("test", options.test);
+        this.#chuiMenuBarMain.addEventListener("wheel", this.#wheelEvent, { passive: true });
     }
     /*
      * Колесо мыши прокручивает полосу вбок.
@@ -26,16 +26,16 @@ class MenuBar {
      * (для этого нужен сдвиг или тачпад), поэтому переводим дельту сами — иначе до правых
      * пунктов полосы мышью было бы не добраться.
      */
-    #wheel_event = (event) => {
-        const bar = this.#chui_menu_bar_main;
+    #wheelEvent = (event) => {
+        const bar = this.#chuiMenuBarMain;
         if (bar.scrollWidth <= bar.clientWidth) return;
         bar.scrollLeft += event.deltaY;
     };
     addMenuItems(...components) {
-        for (let component of components) {
-            let element = component.set();
+        for (const component of components) {
+            const element = component.set();
             new Animation(element).fadeIn();
-            this.#chui_menu_bar_main.appendChild(element);
+            this.#chuiMenuBarMain.appendChild(element);
             if (component instanceof MenuBarDropDown) this.#dropdowns.push(component);
         }
     }
@@ -43,8 +43,8 @@ class MenuBar {
     destroy() {
         for (const dropdown of this.#dropdowns) dropdown.unmount();
         this.#dropdowns = [];
-        this.#chui_menu_bar_main.removeEventListener("wheel", this.#wheel_event);
-        MenuBar.#instances.delete(this.#chui_menu_bar_main);
+        this.#chuiMenuBarMain.removeEventListener("wheel", this.#wheelEvent);
+        MenuBar.#instances.delete(this.#chuiMenuBarMain);
         return this;
     }
     /**
@@ -57,7 +57,7 @@ class MenuBar {
         return node;
     }
     set() {
-        return this.#chui_menu_bar_main;
+        return this.#chuiMenuBarMain;
     }
     static DROPDOWN(options = { title: String(), items: [] }) {
         return new MenuBarDropDown(options);
@@ -65,38 +65,38 @@ class MenuBar {
 }
 
 class MenuBarDropDown {
-    #mb_dd_main = document.createElement("menu_bar_drop_down_main");
-    #mb_dd_button = document.createElement("menu_bar_drop_down_button");
-    #mb_dd_dropdown = document.createElement("menu_bar_dropdown");
-    #is_open = false;
+    #mbDdMain = document.createElement("menu_bar_drop_down_main");
+    #mbDdButton = document.createElement("menu_bar_drop_down_button");
+    #mbDdDropdown = document.createElement("menu_bar_dropdown");
+    #isOpen = false;
     #keyboard = undefined;
     constructor(options = { title: String(), items: [] }) {
         // Панель собирают и отдельно от полосы (`MenuBar.DROPDOWN`) — свои стили нужны здесь же
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_MenuBar");
         // Пустой заголовок остаётся пустым: подстановка заготовки опции рисовала слово «undefined»
-        this.#mb_dd_button.innerText = options.title === undefined || options.title === null ? "" : options.title;
-        this.#mb_dd_dropdown.id = require("randomstring").generate();
-        this.#mb_dd_main.appendChild(this.#mb_dd_button);
-        for (let item of Array.isArray(options.items) ? options.items : [])
-            this.#mb_dd_dropdown.appendChild(item.set());
+        this.#mbDdButton.innerText = options.title === undefined || options.title === null ? "" : options.title;
+        this.#mbDdDropdown.id = require("randomstring").generate();
+        this.#mbDdMain.appendChild(this.#mbDdButton);
+        for (const item of Array.isArray(options.items) ? options.items : [])
+            this.#mbDdDropdown.appendChild(item.set());
         // Панель лежит в document.body, а не рядом с кнопкой: шапка — сама с backdrop-filter,
         // а элемент с backdrop-filter становится «backdrop root» — вложенная панель тогда не
         // блюрит содержимое под собой (замер: детальность 33.4 и с блюром, и без него; вне шапки
         // 20.1 против 31.5). Там же, в body, панель свободна и от контекста наложения шапки:
         // с z-index 1 внутри шапки её перекрывали выдвижные слои (app_menu, ящик уведомлений).
-        document.body.appendChild(this.#mb_dd_dropdown);
+        document.body.appendChild(this.#mbDdDropdown);
 
         // Клавиатура и aria: кнопка открывает меню, стрелки ходят по пунктам, Escape закрывает
-        this.#keyboard = new MenuKeyboard(this.#mb_dd_dropdown, {
+        this.#keyboard = new MenuKeyboard(this.#mbDdDropdown, {
             itemSelector: "button",
             onEscape: () => this.#close(),
-            trigger: this.#mb_dd_button,
+            trigger: this.#mbDdButton,
         });
-        makeKeyboardButton(this.#mb_dd_button);
+        makeKeyboardButton(this.#mbDdButton);
         // Закрытый список тоже должен быть объявлен как закрытый: без этого у кнопки,
         // которую ни разу не открывали, не было бы aria-expanded
         this.#keyboard.setExpanded(false);
-        this.#mb_dd_button.addEventListener("keydown", (event) => {
+        this.#mbDdButton.addEventListener("keydown", (event) => {
             if (event.key === "ArrowDown" || event.key === "ArrowUp") {
                 event.preventDefault();
                 this.#open();
@@ -105,57 +105,57 @@ class MenuBarDropDown {
         });
 
         // Слушатели
-        this.#mb_dd_button.addEventListener("click", this.#mb_dd_button_click_event);
-        this.#mb_dd_dropdown.addEventListener("click", this.#mb_dd_dropdown_click_event);
+        this.#mbDdButton.addEventListener("click", this.#mbDdButtonClickEvent);
+        this.#mbDdDropdown.addEventListener("click", this.#mbDdDropdownClickEvent);
     }
     #open() {
-        this.#is_open = true;
+        this.#isOpen = true;
         // Панель живёт в body: если её снимали вместе с полосой (`unmount`), возвращаем на место
-        if (document.body.contains(this.#mb_dd_dropdown) === false) document.body.appendChild(this.#mb_dd_dropdown);
-        this.#mb_dd_button.classList.add(MENU_BAR_DROP_DOWN_ACTIVE_CLASS);
-        // fadeIn показывает панель (display: flex), и только после этого её можно измерить
-        new Animation(this.#mb_dd_dropdown).fadeIn();
+        if (document.body.contains(this.#mbDdDropdown) === false) document.body.appendChild(this.#mbDdDropdown);
+        this.#mbDdButton.classList.add(MENU_BAR_DROP_DOWN_ACTIVE_CLASS);
+        // panelIn показывает панель (display: flex), и только после этого её можно измерить
+        new Animation(this.#mbDdDropdown).panelIn();
         this.#positionDropdown();
-        window.addEventListener("click", this.#window_click_event);
-        window.addEventListener("resize", this.#position_dropdown_event);
+        window.addEventListener("click", this.#windowClickEvent);
+        window.addEventListener("resize", this.#positionDropdownEvent);
         this.#keyboard.setExpanded(true);
     }
     #close() {
-        if (!this.#is_open) return;
-        this.#is_open = false;
-        this.#mb_dd_button.classList.remove(MENU_BAR_DROP_DOWN_ACTIVE_CLASS);
-        new Animation(this.#mb_dd_dropdown).fadeOut();
-        window.removeEventListener("click", this.#window_click_event);
-        window.removeEventListener("resize", this.#position_dropdown_event);
+        if (!this.#isOpen) return;
+        this.#isOpen = false;
+        this.#mbDdButton.classList.remove(MENU_BAR_DROP_DOWN_ACTIVE_CLASS);
+        new Animation(this.#mbDdDropdown).fadeOut();
+        window.removeEventListener("click", this.#windowClickEvent);
+        window.removeEventListener("resize", this.#positionDropdownEvent);
         this.#keyboard.setExpanded(false);
     }
     // position: fixed — координаты считаются от окна, поэтому панель пересчитывается и на resize
     #positionDropdown() {
-        const button = this.#mb_dd_button.getBoundingClientRect();
-        const dropdown = this.#mb_dd_dropdown.getBoundingClientRect();
+        const button = this.#mbDdButton.getBoundingClientRect();
+        const dropdown = this.#mbDdDropdown.getBoundingClientRect();
         let left = button.left;
         // Панель у последнего пункта меню-бара уезжала бы за правый край окна
         if (left + dropdown.width > window.innerWidth - MENU_BAR_DROPDOWN_EDGE) {
             left = window.innerWidth - MENU_BAR_DROPDOWN_EDGE - dropdown.width;
         }
         if (left < MENU_BAR_DROPDOWN_EDGE) left = MENU_BAR_DROPDOWN_EDGE;
-        this.#mb_dd_dropdown.style.left = `${Math.round(left)}px`;
-        this.#mb_dd_dropdown.style.top = `${Math.round(button.bottom + MENU_BAR_DROPDOWN_GAP)}px`;
+        this.#mbDdDropdown.style.left = `${Math.round(left)}px`;
+        this.#mbDdDropdown.style.top = `${Math.round(button.bottom + MENU_BAR_DROPDOWN_GAP)}px`;
     }
-    #mb_dd_button_click_event = () => {
-        if (this.#is_open) this.#close();
+    #mbDdButtonClickEvent = () => {
+        if (this.#isOpen) this.#close();
         else this.#open();
     };
-    #mb_dd_dropdown_click_event = () => {
+    #mbDdDropdownClickEvent = () => {
         this.#close();
     };
     // «Снаружи» — это и кнопка с обёрткой, и сама панель: она теперь не их потомок
-    #window_click_event = (event) => {
-        if (!this.#is_open) return;
-        if (this.#mb_dd_main.contains(event.target) || this.#mb_dd_dropdown.contains(event.target)) return;
+    #windowClickEvent = (event) => {
+        if (!this.#isOpen) return;
+        if (this.#mbDdMain.contains(event.target) || this.#mbDdDropdown.contains(event.target)) return;
         this.#close();
     };
-    #position_dropdown_event = () => this.#positionDropdown();
+    #positionDropdownEvent = () => this.#positionDropdown();
     /**
      * Убрать панель из body, не трогая клавиатурный слой: панель живёт в body, а не в полосе,
      * и её снимает тот, кто уводит полосу из шапки. Вернувшаяся полоса вернёт панель в body
@@ -163,7 +163,7 @@ class MenuBarDropDown {
      */
     unmount() {
         this.#close();
-        this.#mb_dd_dropdown.remove();
+        this.#mbDdDropdown.remove();
         return this;
     }
     /** Полное удаление: панель больше не нужна — снять клавиатуру и убрать панель из body */
@@ -173,7 +173,7 @@ class MenuBarDropDown {
         return this;
     }
     set() {
-        return this.#mb_dd_main;
+        return this.#mbDdMain;
     }
 }
 

package/framework/components/chui_menu_bar/styles.css

@@ -1,11 +1,11 @@
 chui_menu_bar_main {
     /* Компактный режим. В шапке меню-бар — служебная полоса, а не контрол страницы, поэтому
-       общесистемные отступы (--main_padding 8px 13px, --control_padding 8px, --margin 6px)
+       общесистемные отступы (--block_padding 8px 13px, --control_padding 8px, --block_margin 6px)
        уменьшены здесь локально. Токены переопределяются на корне полосы: Button пишет
        padding: var(--control_padding) инлайном, стилями его иначе не перебить.
        При полосе шапки 46px кнопки меню выходят ≈27px — они ниже кнопок шапки (30px),
        но не теряются в строке. */
-    --main_padding: 5px 10px;
+    --block_padding: 5px 10px;
     --control_padding: 5px;
     display: flex;
     align-items: center;
@@ -15,7 +15,7 @@ chui_menu_bar_main {
     gap: 2px;
     /* Полоса идёт за кнопкой меню маршрутов; без этой кнопки (`disableAppMenu`)
        она упиралась бы в край окна */
-    margin-inline-start: var(--margin);
+    margin-inline-start: var(--block_margin);
     /* Тесная шапка: полоса с вкладками, кнопкой меню и названием занимает больше, чем окно
        минимальной ширины (960px), и раньше лишние пункты просто исчезали — левый бокс шапки
        их обрезал. Теперь полоса прокручивается вбок (ось X), поэтому пункты остаются
@@ -33,7 +33,7 @@ chui_menu_bar_main {
     -webkit-app-region: no-drag;
 }
 
-/* Button и MenuBar.DROPDOWN несут свои внешние отступы (--margin и auto 6px) —
+/* Button и MenuBar.DROPDOWN несут свои внешние отступы (--block_margin и auto 6px) —
    внутри полосы их заменяет gap, иначе полоса распухает по вертикали. */
 chui_menu_bar_main > chui_button,
 menu_bar_drop_down_main {
@@ -48,7 +48,7 @@ chui_menu_bar_main .chui_button {
     background: transparent;
     border: none;
     border-radius: var(--radius_sm);
-    padding: var(--main_padding);
+    padding: var(--block_padding);
 }
 
 chui_menu_bar_main .chui_button:hover {
@@ -115,8 +115,8 @@ menu_bar_drop_down_button {
     cursor: pointer;
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
+    border-radius: var(--radius_sm);
+    padding: var(--block_padding);
     font-size: var(--font_default_size);
     font-weight: 400;
     border: none;
@@ -140,7 +140,7 @@ menu_bar_dropdown {
     display: none;
     flex-direction: column;
     min-width: max-content;
-    padding: var(--margin);
+    padding: var(--block_margin);
     background: var(--header_background);
     color: var(--text_color);
     border: 1px solid var(--border_color);
@@ -153,7 +153,7 @@ menu_bar_dropdown {
 /* Пункты панели — плоские строки в стиле context_menu_item / user_item: синяя заливка ховера
    одна на всю семью меню (у `chui_button` ховер красит и текст, и глиф). Панель лежит в body,
    поэтому обёртка пункта больше не потомок полосы — её внешние отступы снимаются здесь
-   (иначе между строками появлялись бы поля --margin). */
+   (иначе между строками появлялись бы поля --block_margin). */
 menu_bar_dropdown chui_button {
     margin: 0;
     width: -webkit-fill-available;
@@ -162,7 +162,7 @@ menu_bar_dropdown chui_button {
 menu_bar_dropdown .chui_button {
     width: -webkit-fill-available;
     justify-content: flex-start;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     background: transparent;
     border: none;
     border-radius: var(--radius_sm);