chuijs 4.0.2 → 4.0.4

package/framework/components/chui_settings/settings.js

@@ -1,9 +1,9 @@
-const {setStyles} = require("../../modules/chui_functions");
-const {A11Y_FOCUSABLE_SELECTOR} = require("../../modules/chui_a11y/chui_a11y");
-const {store: shared_store} = require("../../modules/chui_store/chui_store");
-const {ThemeToggle} = require("../chui_theme_toggle/theme_toggle");
-const {Toggle} = require("../chui_inputs/chui_toggle/toggle");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles } = require("../../modules/chui_functions");
+const { A11Y_FOCUSABLE_SELECTOR } = require("../../modules/chui_a11y/chui_a11y");
+const { store: sharedStore } = require("../../modules/chui_store/chui_store");
+const { ThemeToggle } = require("../chui_theme_toggle/theme_toggle");
+const { Toggle } = require("../chui_inputs/chui_toggle/toggle");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Заполнено ли текстовое поле: пустая строка равнозначна отсутствию */
 const hasText = (value) => value !== undefined && value !== null && String(value).trim() !== "";
@@ -74,28 +74,30 @@ class Settings {
     #rows = [];
     /** Хранилище и ключ, под которым панель держит свои значения (без ключа — не держит) */
     #store = undefined;
-    #store_key = undefined;
+    #storeKey = undefined;
     /** Подписчики правки строки и её обработчик из опций */
-    #change_listeners = [];
-    #on_change = undefined;
+    #changeListeners = [];
+    #onChange = undefined;
     /** Последние известные значения строк: расхождение со снимком и есть правка пользователя */
     #seen = new Map();
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        description: String(),
-        sections: [],
-        store: undefined,
-        storeKey: String(),
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            description: String(),
+            sections: [],
+            store: undefined,
+            storeKey: String(),
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Settings");
         Settings.#counter += 1;
         this.#id = options.id === undefined ? `chui_settings_${Settings.#counter}` : options.id;
-        this.#store = options.store === undefined ? shared_store : options.store;
-        this.#store_key = hasText(options.storeKey) ? String(options.storeKey) : undefined;
-        this.#on_change = options.onChange;
+        this.#store = options.store === undefined ? sharedStore : options.store;
+        this.#storeKey = hasText(options.storeKey) ? String(options.storeKey) : undefined;
+        this.#onChange = options.onChange;
         this.#root.id = this.#id;
         if (options.title !== undefined) {
             const title = document.createElement("settings_title");
@@ -112,7 +114,7 @@ class Settings {
         // контролы (сегментированный, оценка), у которых своего события в DOM нет
         this.#root.addEventListener("change", this.#onUserEdit);
         this.#root.addEventListener("click", this.#onUserEdit);
-        if (this.#store_key !== undefined) this.restore();
+        if (this.#storeKey !== undefined) this.restore();
         // Снимок значений: от него панель отсчитывает правки пользователя
         this.#remember();
     }
@@ -128,7 +130,13 @@ class Settings {
 
     /** Строки в порядке добавления: `{title, name, node, control, disabled}` */
     getControls() {
-        return this.#rows.map((row) => ({title: row.title, name: row.name, node: row.node, control: row.control, disabled: row.disabled}));
+        return this.#rows.map((row) => ({
+            title: row.title,
+            name: row.name,
+            node: row.node,
+            control: row.control,
+            disabled: row.disabled,
+        }));
     }
 
     /** Контрол строки: адрес — описание из `Settings.Row(...)`, название или имя */
@@ -138,8 +146,8 @@ class Settings {
     }
 
     /** Значение строки: адрес — описание из `Settings.Row(...)`, название или имя */
-    getValue(row_or_title = undefined) {
-        const record = this.#findRow(row_or_title);
+    getValue(rowOrTitle = undefined) {
+        const record = this.#findRow(rowOrTitle);
         return record === undefined ? undefined : this.#readValue(record.control);
     }
 
@@ -153,14 +161,14 @@ class Settings {
     }
 
     /** Значения строк раздела: адрес — описание из `Settings.Section(...)` или заголовок */
-    getSectionValues(section_or_title = undefined) {
-        const section = this.#findSection(section_or_title);
+    getSectionValues(sectionOrTitle = undefined) {
+        const section = this.#findSection(sectionOrTitle);
         return section === undefined ? {} : this.#valuesOf((record) => record.section === section);
     }
 
     /** Выключена ли строка: `false` и для несуществующей */
-    isRowDisabled(row_or_title = undefined) {
-        const record = this.#findRow(row_or_title);
+    isRowDisabled(rowOrTitle = undefined) {
+        const record = this.#findRow(rowOrTitle);
         return record === undefined ? false : record.disabled;
     }
 
@@ -171,27 +179,27 @@ class Settings {
      * может вернуть), а программная запись уведомления не рождает.
      */
     addChangeListener(listener = () => {}) {
-        this.#change_listeners.push(listener);
+        this.#changeListeners.push(listener);
         return this;
     }
 
     // ХРАНЕНИЕ
     /** Ключ панели в хранилище; `undefined` — панель значения не хранит */
     getStoreKey() {
-        return this.#store_key;
+        return this.#storeKey;
     }
 
     /** Записать значения панели в хранилище; без ключа — ничего не делает */
     save() {
-        if (this.#store_key === undefined) return this;
-        this.#store.set(this.#store_key, this.#storageValues());
+        if (this.#storeKey === undefined) return this;
+        this.#store.set(this.#storeKey, this.#storageValues());
         return this;
     }
 
     /** Прочитать значения из хранилища и заполнить строки; без сохранённого панель не меняется */
     restore() {
-        if (this.#store_key === undefined) return this;
-        return this.setValues(this.#store.get(this.#store_key, {}));
+        if (this.#storeKey === undefined) return this;
+        return this.setValues(this.#store.get(this.#storeKey, {}));
     }
 
     // SET
@@ -199,8 +207,8 @@ class Settings {
      * Записать значение строки: адрес — описание из `Settings.Row(...)`, название или имя.
      * Несуществующая строка и строка без писателя (кнопка) — без изменений.
      */
-    setValue(row_or_title = undefined, value = undefined) {
-        const record = this.#findRow(row_or_title);
+    setValue(rowOrTitle = undefined, value = undefined) {
+        const record = this.#findRow(rowOrTitle);
         if (record === undefined) return this;
         this.#writeValue(record.control, value);
         this.#remember();
@@ -217,8 +225,8 @@ class Settings {
     }
 
     /** Заполнить строки раздела: адрес — описание из `Settings.Section(...)` или заголовок */
-    setSectionValues(section_or_title = undefined, values = Object()) {
-        const section = this.#findSection(section_or_title);
+    setSectionValues(sectionOrTitle = undefined, values = Object()) {
+        const section = this.#findSection(sectionOrTitle);
         if (section === undefined) return this;
         return this.#writeValues(values, (record) => record.section === section);
     }
@@ -234,8 +242,8 @@ class Settings {
     }
 
     /** Выключить или включить строку: адресуется описанием из `Settings.Row(...)`, названием или именем */
-    setRowDisabled(row_or_title = undefined, disabled = Boolean()) {
-        const record = this.#findRow(row_or_title);
+    setRowDisabled(rowOrTitle = undefined, disabled = Boolean()) {
+        const record = this.#findRow(rowOrTitle);
         if (record === undefined) return this;
         this.#setRowDisabled(record, disabled);
         return this;
@@ -252,13 +260,14 @@ class Settings {
      * действие, а не значение) ничего не меняет и потому ничего не сообщает.
      */
     #onUserEdit = (event) => {
-        if (event.type === "click" && event.target instanceof Element && event.target.closest("button") !== null) return;
-        if (this.#store_key === undefined && this.#change_listeners.length === 0 && this.#on_change === undefined) return;
+        if (event.type === "click" && event.target instanceof Element && event.target.closest("button") !== null)
+            return;
+        if (this.#storeKey === undefined && this.#changeListeners.length === 0 && this.#onChange === undefined) return;
         const changed = this.#changedRows();
         if (changed.length === 0) return;
-        if (this.#store_key !== undefined) this.save();
+        if (this.#storeKey !== undefined) this.save();
         for (const record of changed) this.#emitChange(record);
-    }
+    };
 
     /**
      * Строки, значение которых разошлось со снимком; снимок тут же обновляется, поэтому одна и та же
@@ -284,10 +293,10 @@ class Settings {
             section: record.section,
             title: record.title,
             name: record.name,
-            value: this.#readValue(record.control)
+            value: this.#readValue(record.control),
         };
-        for (const listener of [...this.#change_listeners]) listener(change, this);
-        if (this.#on_change !== undefined) this.#on_change(change, this);
+        for (const listener of [...this.#changeListeners]) listener(change, this);
+        if (this.#onChange !== undefined) this.#onChange(change, this);
     }
 
     /** Снимок значений строк: от него панель отсчитывает следующие правки */
@@ -337,7 +346,8 @@ class Settings {
             node.appendChild(head);
         }
         const rows = document.createElement("settings_rows");
-        for (const row of section.rows === undefined ? [] : section.rows) rows.appendChild(this.#buildRow(row, section));
+        for (const row of section.rows === undefined ? [] : section.rows)
+            rows.appendChild(this.#buildRow(row, section));
         node.appendChild(rows);
         return node;
     }
@@ -350,12 +360,13 @@ class Settings {
         const named = hasText(row.name);
         node.classList.toggle("settings_row_control_only", solo);
         node.classList.toggle("settings_row_stretch", row.stretch === true);
-        const description_id = solo ? undefined : this.#buildRowText(row, node);
+        const descriptionId = solo ? undefined : this.#buildRowText(row, node);
         const holder = document.createElement("settings_row_control");
-        const control = row.control === undefined ? undefined : (row.control instanceof Element ? row.control : row.control.set());
+        const control =
+            row.control === undefined ? undefined : row.control instanceof Element ? row.control : row.control.set();
         if (control !== undefined) {
             holder.appendChild(control);
-            this.#applyControlA11y(control, titled ? String(row.title) : String(), description_id);
+            this.#applyControlA11y(control, titled ? String(row.title) : String(), descriptionId);
         }
         node.appendChild(holder);
         // Храним исходный контрол (компонент или узел): findControl() возвращает его вместе с методами
@@ -364,16 +375,17 @@ class Settings {
             section: section,
             title: titled ? String(row.title) : String(),
             // Ключ строки: имя постоянно, а название видно пользователю и меняется при переименовании
-            name: named ? String(row.name) : (titled ? String(row.title) : String()),
+            name: named ? String(row.name) : titled ? String(row.title) : String(),
             node: node,
             holder: holder,
             control: row.control,
             disabled: false,
-            natives: []
+            natives: [],
         };
         // Запрет панель ставит и полям готового узла, поэтому их исходное состояние запоминаем заранее —
         // иначе включение вернуло бы строку в другое состояние, чем было до выключения
-        for (const native of holder.querySelectorAll(Settings.#NATIVE_CONTROLS)) record.natives.push({node: native, disabled: native.disabled});
+        for (const native of holder.querySelectorAll(Settings.#NATIVE_CONTROLS))
+            record.natives.push({ node: native, disabled: native.disabled });
         this.#rows.push(record);
         if (row.disabled === true) this.#setRowDisabled(record, true);
         return node;
@@ -382,7 +394,7 @@ class Settings {
     /** Текст строки — название и описание; возвращает id описания (на него ссылается контрол) */
     #buildRowText(row = Object(), node = new HTMLElement()) {
         const text = document.createElement("settings_row_text");
-        let description_id = undefined;
+        let descriptionId = undefined;
         if (hasText(row.title)) {
             const title = document.createElement("settings_row_title");
             title.innerText = String(row.title);
@@ -392,11 +404,11 @@ class Settings {
             const description = document.createElement("settings_row_description");
             description.innerText = String(row.description);
             description.id = `${this.#id}_row_${this.#rows.length}_description`;
-            description_id = description.id;
+            descriptionId = description.id;
             text.appendChild(description);
         }
         node.appendChild(text);
-        return description_id;
+        return descriptionId;
     }
 
     /**
@@ -417,17 +429,23 @@ class Settings {
     }
 
     /** Строка по описанию из `Settings.Row(...)`, названию или имени (у строки-контрола их может и не быть) */
-    #findRow(row_or_title = undefined) {
-        if (row_or_title === undefined || row_or_title === null) return undefined;
-        return this.#rows.find((row) => row.row === row_or_title
-            || (row.title.length > 0 && row.title === row_or_title)
-            || (row.name.length > 0 && row.name === row_or_title));
+    #findRow(rowOrTitle = undefined) {
+        if (rowOrTitle === undefined || rowOrTitle === null) return undefined;
+        return this.#rows.find(
+            (row) =>
+                row.row === rowOrTitle ||
+                (row.title.length > 0 && row.title === rowOrTitle) ||
+                (row.name.length > 0 && row.name === rowOrTitle)
+        );
     }
 
     /** Раздел по описанию из `Settings.Section(...)` или по заголовку (у раздела без заголовка — только описание) */
-    #findSection(section_or_title = undefined) {
-        if (section_or_title === undefined || section_or_title === null) return undefined;
-        return this.#sections.find((section) => section === section_or_title || (hasText(section.title) && String(section.title) === section_or_title));
+    #findSection(sectionOrTitle = undefined) {
+        if (sectionOrTitle === undefined || sectionOrTitle === null) return undefined;
+        return this.#sections.find(
+            (section) =>
+                section === sectionOrTitle || (hasText(section.title) && String(section.title) === sectionOrTitle)
+        );
     }
 
     /** Карта «ключ — значение» по отобранным строкам; строка без имени и названия ключа дать не может */
@@ -459,18 +477,22 @@ class Settings {
      * выбранные значения (свой `value` вернул бы только первый пункт).
      */
     #readValue(control = undefined) {
-        if (control !== undefined && control !== null && typeof control.getValue === "function") return control.getValue();
+        if (control !== undefined && control !== null && typeof control.getValue === "function")
+            return control.getValue();
         const field = Settings.#valueField(control);
         if (field === undefined) return undefined;
         if (field.type === "checkbox" || field.type === "radio") return field.checked;
-        if (field.tagName === "SELECT" && field.multiple === true) return Array.from(field.selectedOptions, (option) => option.value);
+        if (field.tagName === "SELECT" && field.multiple === true)
+            return Array.from(field.selectedOptions, (option) => option.value);
         return field.value;
     }
 
     /** Поле готового узла, с которого панель читает значение */
     static #valueField(control = undefined) {
         if (!(control instanceof Element)) return undefined;
-        const field = control.matches(Settings.#NATIVE_VALUES) ? control : control.querySelector(Settings.#NATIVE_VALUES);
+        const field = control.matches(Settings.#NATIVE_VALUES)
+            ? control
+            : control.querySelector(Settings.#NATIVE_VALUES);
         return field === null ? undefined : field;
     }
 
@@ -515,48 +537,99 @@ class Settings {
      * а связь через `<label>` признаём только когда в нём есть текст: у `Toggle` разметка —
      * пустой `<label>` вокруг `input`, и без `aria-label` флажок остался бы без имени.
      */
-    #applyControlA11y(control = new HTMLElement(), label = String(), description_id = undefined) {
+    #applyControlA11y(control = new HTMLElement(), label = String(), descriptionId = undefined) {
         const role = control.getAttribute("role");
-        const target = role === null || role === "presentation"
-            ? (control.matches(Settings.#FOCUSABLE) ? control : control.querySelector(Settings.#FOCUSABLE))
-            : control;
+        const target =
+            role === null || role === "presentation"
+                ? control.matches(Settings.#FOCUSABLE)
+                    ? control
+                    : control.querySelector(Settings.#FOCUSABLE)
+                : control;
         if (target === null) return;
-        if (description_id !== undefined) target.setAttribute("aria-describedby", description_id);
+        if (descriptionId !== undefined) target.setAttribute("aria-describedby", descriptionId);
         if (label.length === 0) return;
         if (target.getAttribute("aria-label") !== null) return;
         const wrapper = target.closest("label");
-        const labelled = (wrapper !== null && wrapper.innerText.trim().length > 0)
-            || (target.id !== "" && control.querySelector(`label[for="${target.id}"]`) !== null);
+        const labelled =
+            (wrapper !== null && wrapper.innerText.trim().length > 0) ||
+            (target.id !== "" && control.querySelector(`label[for="${target.id}"]`) !== null);
         if (!labelled) target.setAttribute("aria-label", label);
     }
 
-    static Section(options = {title: String(), description: String(), rows: []}) {
-        return {title: options.title, description: options.description, rows: options.rows};
+    static Section(options = { title: String(), description: String(), rows: [] }) {
+        return { title: options.title, description: options.description, rows: options.rows };
     }
 
-    static Row(options = {title: String(), description: String(), name: String(), control: undefined, disabled: Boolean(), stretch: Boolean()}) {
-        return {title: options.title, description: options.description, name: options.name, control: options.control, disabled: options.disabled === true, stretch: options.stretch === true};
+    static Row(
+        options = {
+            title: String(),
+            description: String(),
+            name: String(),
+            control: undefined,
+            disabled: Boolean(),
+            stretch: Boolean(),
+        }
+    ) {
+        return {
+            title: options.title,
+            description: options.description,
+            name: options.name,
+            control: options.control,
+            disabled: options.disabled === true,
+            stretch: options.stretch === true,
+        };
     }
 
     /** Строка с переключателем темы: `control` — сам `ThemeToggle` */
-    static ThemeRow(options = {title: I18n.t("graphics.settingsTheme"), description: String(), name: String(), modes: [], labels: {}, onChange: undefined, disabled: Boolean()}) {
+    static ThemeRow(
+        options = {
+            title: I18n.t("graphics.settingsTheme"),
+            description: String(),
+            name: String(),
+            modes: [],
+            labels: {},
+            onChange: undefined,
+            disabled: Boolean(),
+        }
+    ) {
         const toggle = new ThemeToggle({
             modes: options.modes,
             labels: options.labels,
             label: options.title === undefined ? I18n.t("graphics.settingsAppearance") : options.title,
-            onChange: options.onChange
+            onChange: options.onChange,
+        });
+        return Settings.Row({
+            title: options.title === undefined ? I18n.t("graphics.settingsTheme") : options.title,
+            description: options.description,
+            name: options.name,
+            control: toggle,
+            disabled: options.disabled,
         });
-        return Settings.Row({title: options.title === undefined ? I18n.t("graphics.settingsTheme") : options.title, description: options.description, name: options.name, control: toggle, disabled: options.disabled});
     }
 
     /** Строка с флажком: `control` — сам `Toggle` */
-    static ToggleRow(options = {title: String(), description: String(), name: String(), value: Boolean(), onChange: undefined, disabled: Boolean()}) {
+    static ToggleRow(
+        options = {
+            title: String(),
+            description: String(),
+            name: String(),
+            value: Boolean(),
+            onChange: undefined,
+            disabled: Boolean(),
+        }
+    ) {
         // Подпись строки сразу уходит в сам переключатель: вне Settings он остаётся без имени
-        const toggle = new Toggle({label: options.title});
+        const toggle = new Toggle({ label: options.title });
         if (options.value !== undefined) toggle.setValue(options.value === true);
         if (options.onChange !== undefined) toggle.addChangeListener(options.onChange);
-        return Settings.Row({title: options.title, description: options.description, name: options.name, control: toggle, disabled: options.disabled});
+        return Settings.Row({
+            title: options.title,
+            description: options.description,
+            name: options.name,
+            control: toggle,
+            disabled: options.disabled,
+        });
     }
 }
 
-exports.Settings = Settings
+exports.Settings = Settings;

package/framework/components/chui_settings/styles.css

@@ -3,7 +3,7 @@ chui_settings {
     display: block;
     width: -webkit-fill-available;
     box-sizing: border-box;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
 }
@@ -28,14 +28,14 @@ settings_section {
     display: block;
     margin-bottom: 12px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     overflow: hidden;
 }
 
 settings_section_head {
     display: block;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border-bottom: 1px solid var(--border_color);
 }
 
@@ -60,7 +60,7 @@ settings_row {
     align-items: center;
     justify-content: space-between;
     gap: 16px;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
 }
 
 /* Разделитель только между строками: у первой он уже есть в шапке раздела */