chuijs 4.0.3 → 4.0.4

package/framework/modules/chui_services/desktop.js

@@ -1,4 +1,5 @@
 const { SERVICES_CHANNELS, SERVICES_CALLS, SERVICES_SYNC_CALLS, APP_PATH_NAMES } = require("./chui_channels");
+const { crossFade } = require("../chui_animations/motion");
 
 /**
  * Десктоп-сервисы со стороны страницы: буфер обмена, последние документы, прогресс на иконке
@@ -86,12 +87,16 @@ class Desktop {
         off: (accelerator = String(), handler = () => {}) => Desktop.#unsubscribe(accelerator, handler),
         offAll: () => Desktop.#unsubscribeAll(),
         /** Комбинации, на которые подписано это окно */
-        get: () => [...Desktop.#shortcut_handlers.keys()],
+        get: () => [...Desktop.#shortcutHandlers.keys()],
     };
 
     /**
      * Тема приложения. Палитры в стилях разложены по `prefers-color-scheme`, поэтому смена
-     * источника меняет цвета без правок в DOM.
+     * источника меняет цвета без правок в DOM: Chromium сам сообщает странице новое значение
+     * запроса. Смена идёт кроссфейдом (`crossFade` в `chui_animations/motion`) — обычный
+     * CSS-переход на изменение из запроса браузер не запускает, и без него тема переключалась бы
+     * кадром. Смену системной схемы при источнике «system» так показать нельзя: её присылает
+     * сама система, и снимка «до» в этот момент уже нет.
      *
      * ```javascript
      * await Desktop.theme.set(Desktop.theme.SOURCE.DARK);   // 'dark' | 'light' | 'system'
@@ -102,9 +107,10 @@ class Desktop {
         SOURCE: { SYSTEM: "system", LIGHT: "light", DARK: "dark" },
         /** @returns {Promise<{theme: string, source: string}>} фактическая тема и выбранный источник */
         get: () => Desktop.#call("themeGet"),
-        set: (source = String()) => Desktop.#call("themeSet", String(source)),
+        set: (source = String()) =>
+            crossFade(() => Desktop.#call("themeSet", String(source)), { waitFor: "(prefers-color-scheme: dark)" }),
         /** Переключить светлую и тёмную */
-        toggle: () => Desktop.#call("themeToggle"),
+        toggle: () => crossFade(() => Desktop.#call("themeToggle"), { waitFor: "(prefers-color-scheme: dark)" }),
         /** Подписка на смену темы; возвращает функцию отписки */
         onChange: (listener = () => {}) => Desktop.#subscribeTheme(listener),
     };
@@ -227,21 +233,21 @@ class Desktop {
     };
 
     // accelerator → набор обработчиков этого окна
-    static #shortcut_handlers = new Map();
-    static #shortcut_event_bound = false;
-    static #shortcut_bridge_unsubscribe = undefined;
-    static #theme_handlers = new Set();
-    static #theme_event_bound = false;
-    static #theme_bridge_unsubscribe = undefined;
-    static #locale_handlers = new Set();
-    static #locale_event_bound = false;
-    static #locale_bridge_unsubscribe = undefined;
-    static #history_handlers = new Set();
-    static #history_event_bound = false;
-    static #history_bridge_unsubscribe = undefined;
+    static #shortcutHandlers = new Map();
+    static #shortcutEventBound = false;
+    static #shortcutBridgeUnsubscribe = undefined;
+    static #themeHandlers = new Set();
+    static #themeEventBound = false;
+    static #themeBridgeUnsubscribe = undefined;
+    static #localeHandlers = new Set();
+    static #localeEventBound = false;
+    static #localeBridgeUnsubscribe = undefined;
+    static #historyHandlers = new Set();
+    static #historyEventBound = false;
+    static #historyBridgeUnsubscribe = undefined;
     // Пути приложения, уже полученные значением: `sendSync` останавливает страницу на время
     // ответа, поэтому за одним и тем же именем в main ходят один раз
-    static #app_paths = new Map();
+    static #appPaths = new Map();
 
     static #bridge() {
         if (typeof window === "undefined" || window.chui === undefined) return undefined;
@@ -281,9 +287,9 @@ class Desktop {
      * страницы одним и тем же вызовом.
      */
     static #appPath(name = String()) {
-        if (Desktop.#app_paths.has(name)) return Desktop.#app_paths.get(name);
+        if (Desktop.#appPaths.has(name)) return Desktop.#appPaths.get(name);
         const value = Desktop.#inMainProcess() ? Desktop.#appPathInMain(name) : Desktop.#callSync("appPathSync", name);
-        Desktop.#app_paths.set(name, value);
+        Desktop.#appPaths.set(name, value);
         return value;
     }
 
@@ -317,31 +323,31 @@ class Desktop {
     }
 
     static #subscribe(accelerator = String(), handler = () => {}) {
-        const handlers = Desktop.#shortcut_handlers.get(accelerator) ?? new Set();
+        const handlers = Desktop.#shortcutHandlers.get(accelerator) ?? new Set();
         const first = handlers.size === 0;
         handlers.add(handler);
-        Desktop.#shortcut_handlers.set(accelerator, handlers);
-        if (!Desktop.#shortcut_event_bound) Desktop.#bindShortcutEvent();
+        Desktop.#shortcutHandlers.set(accelerator, handlers);
+        if (!Desktop.#shortcutEventBound) Desktop.#bindShortcutEvent();
         // В main клавиша регистрируется один раз на все окна, поэтому подписка — на первую
         if (first) Desktop.#call("shortcutSubscribe", accelerator);
         return () => Desktop.#unsubscribe(accelerator, handler);
     }
 
     static #unsubscribe(accelerator = String(), handler = () => {}) {
-        const handlers = Desktop.#shortcut_handlers.get(accelerator);
+        const handlers = Desktop.#shortcutHandlers.get(accelerator);
         if (handlers === undefined) return Desktop;
         handlers.delete(handler);
         if (handlers.size === 0) {
-            Desktop.#shortcut_handlers.delete(accelerator);
+            Desktop.#shortcutHandlers.delete(accelerator);
             Desktop.#call("shortcutUnsubscribe", accelerator);
         }
-        if (Desktop.#shortcut_handlers.size === 0) Desktop.#unbindShortcutEvent();
+        if (Desktop.#shortcutHandlers.size === 0) Desktop.#unbindShortcutEvent();
         return Desktop;
     }
 
     static #unsubscribeAll() {
-        for (const accelerator of [...Desktop.#shortcut_handlers.keys()]) {
-            Desktop.#shortcut_handlers.delete(accelerator);
+        for (const accelerator of [...Desktop.#shortcutHandlers.keys()]) {
+            Desktop.#shortcutHandlers.delete(accelerator);
             Desktop.#call("shortcutUnsubscribe", accelerator);
         }
         Desktop.#unbindShortcutEvent();
@@ -350,16 +356,16 @@ class Desktop {
 
     /** Событие приходит из main: сработала глобальная клавиша */
     static #onShortcutEvent = (accelerator = String()) => {
-        const handlers = Desktop.#shortcut_handlers.get(accelerator);
+        const handlers = Desktop.#shortcutHandlers.get(accelerator);
         if (handlers === undefined) return;
         for (const handler of [...handlers]) handler(accelerator);
     };
 
     static #bindShortcutEvent() {
-        Desktop.#shortcut_event_bound = true;
+        Desktop.#shortcutEventBound = true;
         const services = Desktop.#bridge();
         if (services !== undefined && typeof services.onShortcut === "function") {
-            Desktop.#shortcut_bridge_unsubscribe = services.onShortcut(Desktop.#onShortcutEvent);
+            Desktop.#shortcutBridgeUnsubscribe = services.onShortcut(Desktop.#onShortcutEvent);
             return;
         }
         const { ipcRenderer } = require("electron");
@@ -367,11 +373,11 @@ class Desktop {
     }
 
     static #unbindShortcutEvent() {
-        if (!Desktop.#shortcut_event_bound) return;
-        Desktop.#shortcut_event_bound = false;
-        if (Desktop.#shortcut_bridge_unsubscribe !== undefined) {
-            Desktop.#shortcut_bridge_unsubscribe();
-            Desktop.#shortcut_bridge_unsubscribe = undefined;
+        if (!Desktop.#shortcutEventBound) return;
+        Desktop.#shortcutEventBound = false;
+        if (Desktop.#shortcutBridgeUnsubscribe !== undefined) {
+            Desktop.#shortcutBridgeUnsubscribe();
+            Desktop.#shortcutBridgeUnsubscribe = undefined;
             return;
         }
         const { ipcRenderer } = require("electron");
@@ -383,28 +389,28 @@ class Desktop {
     };
 
     static #subscribeTheme(listener = () => {}) {
-        Desktop.#theme_handlers.add(listener);
-        if (!Desktop.#theme_event_bound) Desktop.#bindThemeEvent();
+        Desktop.#themeHandlers.add(listener);
+        if (!Desktop.#themeEventBound) Desktop.#bindThemeEvent();
         return () => Desktop.#unsubscribeTheme(listener);
     }
 
     static #unsubscribeTheme(listener = () => {}) {
-        Desktop.#theme_handlers.delete(listener);
-        if (Desktop.#theme_handlers.size === 0) Desktop.#unbindThemeEvent();
+        Desktop.#themeHandlers.delete(listener);
+        if (Desktop.#themeHandlers.size === 0) Desktop.#unbindThemeEvent();
         return Desktop;
     }
 
     /** Событие приходит из main: тема изменилась (системой или по выбору пользователя) */
     static #onThemeEvent = (theme = String()) => {
-        for (const listener of [...Desktop.#theme_handlers]) listener(theme);
+        for (const listener of [...Desktop.#themeHandlers]) listener(theme);
     };
 
     static #bindThemeEvent() {
-        Desktop.#theme_event_bound = true;
+        Desktop.#themeEventBound = true;
         const bridge = typeof window === "undefined" ? undefined : window.chui;
         const theme = bridge === undefined ? undefined : bridge.theme;
         if (theme !== undefined && typeof theme.onChange === "function") {
-            Desktop.#theme_bridge_unsubscribe = theme.onChange(Desktop.#onThemeEvent);
+            Desktop.#themeBridgeUnsubscribe = theme.onChange(Desktop.#onThemeEvent);
             return;
         }
         const { ipcRenderer } = require("electron");
@@ -412,11 +418,11 @@ class Desktop {
     }
 
     static #unbindThemeEvent() {
-        if (!Desktop.#theme_event_bound) return;
-        Desktop.#theme_event_bound = false;
-        if (Desktop.#theme_bridge_unsubscribe !== undefined) {
-            Desktop.#theme_bridge_unsubscribe();
-            Desktop.#theme_bridge_unsubscribe = undefined;
+        if (!Desktop.#themeEventBound) return;
+        Desktop.#themeEventBound = false;
+        if (Desktop.#themeBridgeUnsubscribe !== undefined) {
+            Desktop.#themeBridgeUnsubscribe();
+            Desktop.#themeBridgeUnsubscribe = undefined;
             return;
         }
         const { ipcRenderer } = require("electron");
@@ -428,28 +434,28 @@ class Desktop {
     };
 
     static #subscribeLocale(listener = () => {}) {
-        Desktop.#locale_handlers.add(listener);
-        if (!Desktop.#locale_event_bound) Desktop.#bindLocaleEvent();
+        Desktop.#localeHandlers.add(listener);
+        if (!Desktop.#localeEventBound) Desktop.#bindLocaleEvent();
         return () => Desktop.#unsubscribeLocale(listener);
     }
 
     static #unsubscribeLocale(listener = () => {}) {
-        Desktop.#locale_handlers.delete(listener);
-        if (Desktop.#locale_handlers.size === 0) Desktop.#unbindLocaleEvent();
+        Desktop.#localeHandlers.delete(listener);
+        if (Desktop.#localeHandlers.size === 0) Desktop.#unbindLocaleEvent();
         return Desktop;
     }
 
     /** Событие приходит из main: приложение сменило язык */
     static #onLocaleEvent = (locale = String()) => {
-        for (const listener of [...Desktop.#locale_handlers]) listener(locale);
+        for (const listener of [...Desktop.#localeHandlers]) listener(locale);
     };
 
     static #bindLocaleEvent() {
-        Desktop.#locale_event_bound = true;
+        Desktop.#localeEventBound = true;
         const bridge = typeof window === "undefined" ? undefined : window.chui;
         const locale = bridge === undefined ? undefined : bridge.locale;
         if (locale !== undefined && typeof locale.onChange === "function") {
-            Desktop.#locale_bridge_unsubscribe = locale.onChange(Desktop.#onLocaleEvent);
+            Desktop.#localeBridgeUnsubscribe = locale.onChange(Desktop.#onLocaleEvent);
             return;
         }
         const { ipcRenderer } = require("electron");
@@ -457,11 +463,11 @@ class Desktop {
     }
 
     static #unbindLocaleEvent() {
-        if (!Desktop.#locale_event_bound) return;
-        Desktop.#locale_event_bound = false;
-        if (Desktop.#locale_bridge_unsubscribe !== undefined) {
-            Desktop.#locale_bridge_unsubscribe();
-            Desktop.#locale_bridge_unsubscribe = undefined;
+        if (!Desktop.#localeEventBound) return;
+        Desktop.#localeEventBound = false;
+        if (Desktop.#localeBridgeUnsubscribe !== undefined) {
+            Desktop.#localeBridgeUnsubscribe();
+            Desktop.#localeBridgeUnsubscribe = undefined;
             return;
         }
         const { ipcRenderer } = require("electron");
@@ -473,26 +479,26 @@ class Desktop {
     };
 
     static #subscribeHistory(listener = () => {}) {
-        Desktop.#history_handlers.add(listener);
-        if (!Desktop.#history_event_bound) Desktop.#bindHistoryEvent();
+        Desktop.#historyHandlers.add(listener);
+        if (!Desktop.#historyEventBound) Desktop.#bindHistoryEvent();
         return () => Desktop.#unsubscribeHistory(listener);
     }
 
     static #unsubscribeHistory(listener = () => {}) {
-        Desktop.#history_handlers.delete(listener);
-        if (Desktop.#history_handlers.size === 0) Desktop.#unbindHistoryEvent();
+        Desktop.#historyHandlers.delete(listener);
+        if (Desktop.#historyHandlers.size === 0) Desktop.#unbindHistoryEvent();
         return Desktop;
     }
 
     static #onHistoryEvent = (items = []) => {
-        for (const listener of [...Desktop.#history_handlers]) listener(items);
+        for (const listener of [...Desktop.#historyHandlers]) listener(items);
     };
 
     static #bindHistoryEvent() {
-        Desktop.#history_event_bound = true;
+        Desktop.#historyEventBound = true;
         const services = Desktop.#bridge();
         if (services !== undefined && typeof services.onClipboardHistory === "function") {
-            Desktop.#history_bridge_unsubscribe = services.onClipboardHistory(Desktop.#onHistoryEvent);
+            Desktop.#historyBridgeUnsubscribe = services.onClipboardHistory(Desktop.#onHistoryEvent);
             return;
         }
         const { ipcRenderer } = require("electron");
@@ -500,11 +506,11 @@ class Desktop {
     }
 
     static #unbindHistoryEvent() {
-        if (!Desktop.#history_event_bound) return;
-        Desktop.#history_event_bound = false;
-        if (Desktop.#history_bridge_unsubscribe !== undefined) {
-            Desktop.#history_bridge_unsubscribe();
-            Desktop.#history_bridge_unsubscribe = undefined;
+        if (!Desktop.#historyEventBound) return;
+        Desktop.#historyEventBound = false;
+        if (Desktop.#historyBridgeUnsubscribe !== undefined) {
+            Desktop.#historyBridgeUnsubscribe();
+            Desktop.#historyBridgeUnsubscribe = undefined;
             return;
         }
         const { ipcRenderer } = require("electron");

package/framework/modules/chui_sortable/chui_sortable.js

@@ -31,14 +31,14 @@ class Sortable {
     };
 
     #container = undefined;
-    #item_selector = undefined;
-    #handle_selector = undefined;
+    #itemSelector = undefined;
+    #handleSelector = undefined;
     #axis = Sortable.AXIS.Y;
-    #on_reorder = undefined;
+    #onReorder = undefined;
     #enabled = true;
     #source = undefined;
     #before = undefined;
-    #order_before = [];
+    #orderBefore = [];
     // Точка отсчёта отмены: сюда возвращает cancel(), и только здесь, а не в каждой перестановке
     #baseline = [];
     #bound = false;
@@ -55,10 +55,10 @@ class Sortable {
     ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Sortable");
         this.#container = container;
-        this.#item_selector = options.itemSelector === undefined ? "*" : options.itemSelector;
-        this.#handle_selector = options.handleSelector;
+        this.#itemSelector = options.itemSelector === undefined ? "*" : options.itemSelector;
+        this.#handleSelector = options.handleSelector;
         this.#axis = options.axis === undefined ? Sortable.AXIS.Y : options.axis;
-        this.#on_reorder = options.onReorder;
+        this.#onReorder = options.onReorder;
         this.#enabled = options.enabled !== false;
         this.#container.addEventListener("dragstart", this.#onDragStart);
         this.#container.addEventListener("dragover", this.#onDragOver);
@@ -89,7 +89,7 @@ class Sortable {
 
     /** Порядок изменился после последней перестановки (или с момента refresh) */
     isChanged() {
-        return !Sortable.#sameOrder(this.#order_before, this.#items());
+        return !Sortable.#sameOrder(this.#orderBefore, this.#items());
     }
 
     // SET
@@ -108,8 +108,8 @@ class Sortable {
             if (item.getAttribute("tabindex") === null) item.setAttribute("tabindex", "0");
             item.classList.add("sortable_item");
         }
-        this.#order_before = this.#items();
-        this.#baseline = [...this.#order_before];
+        this.#orderBefore = this.#items();
+        this.#baseline = [...this.#orderBefore];
         return this;
     }
 
@@ -118,7 +118,7 @@ class Sortable {
         // Возврат идёт к точке отсчёта refresh(), а не к порядку последней перестановки: иначе
         // отмена после перетаскивания ничего бы не делала (порядок сверялся бы сам с собой)
         for (const item of this.#baseline) this.#container.appendChild(item);
-        this.#order_before = this.#items();
+        this.#orderBefore = this.#items();
         return this;
     }
 
@@ -140,15 +140,15 @@ class Sortable {
     // === ВНУТРЕННЕЕ ===
     // Только прямые дети контейнера: вложенные списки сортируются своим Sortable
     #items() {
-        return [...this.#container.children].filter((child) => child.matches(this.#item_selector));
+        return [...this.#container.children].filter((child) => child.matches(this.#itemSelector));
     }
 
     #itemFromEvent(event) {
         const target = event.target instanceof Element ? event.target : null;
         if (target === null) return null;
-        const item = target.closest(this.#item_selector);
+        const item = target.closest(this.#itemSelector);
         if (item === null || item.parentElement !== this.#container) return null;
-        if (this.#handle_selector !== undefined && target.closest(this.#handle_selector) === null) return null;
+        if (this.#handleSelector !== undefined && target.closest(this.#handleSelector) === null) return null;
         return item;
     }
 
@@ -173,9 +173,9 @@ class Sortable {
         const before = this.#before;
         this.#source = undefined;
         this.#before = undefined;
-        if (Sortable.#sameOrder(this.#order_before, this.#items())) return;
-        this.#order_before = this.#items();
-        if (this.#on_reorder !== undefined) this.#on_reorder(this.getOrder(), { source: source, before: before });
+        if (Sortable.#sameOrder(this.#orderBefore, this.#items())) return;
+        this.#orderBefore = this.#items();
+        if (this.#onReorder !== undefined) this.#onReorder(this.getOrder(), { source: source, before: before });
     }
 
     static #sameOrder(left = [], right = []) {

package/framework/modules/chui_validate/chui_validate.js

@@ -76,9 +76,9 @@ function check(value, rules = {}) {
     if (rules.max !== undefined && (Number.isNaN(number) || number > rules.max)) return fail("max", rules);
     if (rules.minLength !== undefined && text.length < rules.minLength) return fail("minLength", rules);
     if (rules.maxLength !== undefined && text.length > rules.maxLength) return fail("maxLength", rules);
-    const is_email = rules.type === "email";
-    const pattern = is_email ? EMAIL_PATTERN : rules.pattern;
-    if (pattern !== undefined && !new RegExp(pattern).test(text)) return fail(is_email ? "email" : "pattern", rules);
+    const isEmail = rules.type === "email";
+    const pattern = isEmail ? EMAIL_PATTERN : rules.pattern;
+    if (pattern !== undefined && !new RegExp(pattern).test(text)) return fail(isEmail ? "email" : "pattern", rules);
     if (typeof rules.validate === "function") {
         const custom = rules.validate(value);
         if (custom !== undefined && custom !== null && custom !== true) {

package/framework/tray_bar/chui_menu_items.js

@@ -5,8 +5,8 @@ class MenuItem {
     separator() {
         return { type: "separator" };
     }
-    submenu(title = String(), submenu_list = Array()) {
-        return { label: title, submenu: submenu_list };
+    submenu(title = String(), submenuList = Array()) {
+        return { label: title, submenu: submenuList };
     }
     radio(title = String(), checked = Boolean(), action = () => {}) {
         return { label: title, type: "radio", checked: checked, click: action };