chuijs 4.0.2 → 4.0.4

package/framework/components/chui_watermark/watermark.js

@@ -1,4 +1,4 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
 
 /** Схемы источника картинки: остальное считается локальным путём и читается как data URL */
 const URL_SCHEMES = ["data:", "http:", "https:", "file:", "blob:"];
@@ -32,7 +32,7 @@ const URL_SCHEMES = ["data:", "http:", "https:", "file:", "blob:"];
  */
 class Watermark {
     static #counter = 0;
-    static #DEFAULT_GAP = {x: 100, y: 100};
+    static #DEFAULT_GAP = { x: 100, y: 100 };
     static #DEFAULT_ROTATE = -22;
     static #DEFAULT_OPACITY = 0.15;
     static #DEFAULT_FONT_SIZE = 16;
@@ -44,20 +44,28 @@ class Watermark {
     #id = undefined;
     #text = undefined;
     #image = undefined;
-    #image_node = undefined;
-    #font = {size: Watermark.#DEFAULT_FONT_SIZE, weight: 400, family: undefined, color: undefined};
+    #imageNode = undefined;
+    #font = { size: Watermark.#DEFAULT_FONT_SIZE, weight: 400, family: undefined, color: undefined };
     #rotate = Watermark.#DEFAULT_ROTATE;
-    #gap = {...Watermark.#DEFAULT_GAP};
+    #gap = { ...Watermark.#DEFAULT_GAP };
     #opacity = Watermark.#DEFAULT_OPACITY;
-    #z_index = Watermark.#DEFAULT_Z_INDEX;
+    #zIndex = Watermark.#DEFAULT_Z_INDEX;
     #scheme = undefined;
     #destroyed = false;
 
-    constructor(options = {
-        id: String(), text: String(), image: String(),
-        font: Object(), rotate: Number(), gap: Object(), opacity: Number(),
-        zIndex: Number(), components: []
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            text: String(),
+            image: String(),
+            font: Object(),
+            rotate: Number(),
+            gap: Object(),
+            opacity: Number(),
+            zIndex: Number(),
+            components: [],
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Watermark");
         Watermark.#counter += 1;
         this.#id = optionOr(options.id, `chui_watermark_${Watermark.#counter}`);
@@ -98,7 +106,7 @@ class Watermark {
 
     /** Настройки метки: `{size, weight, family, color}` */
     getFont() {
-        return {...this.#font};
+        return { ...this.#font };
     }
 
     getRotate() {
@@ -107,7 +115,7 @@ class Watermark {
 
     /** Шаг между метками */
     getGap() {
-        return {...this.#gap};
+        return { ...this.#gap };
     }
 
     getOpacity() {
@@ -115,7 +123,7 @@ class Watermark {
     }
 
     getZIndex() {
-        return this.#z_index;
+        return this.#zIndex;
     }
 
     /** Слой с метками (для своих стилей) */
@@ -148,12 +156,12 @@ class Watermark {
      */
     setImage(image = undefined) {
         this.#image = image;
-        this.#image_node = undefined;
+        this.#imageNode = undefined;
         if (image !== undefined && image !== null && image !== "") {
             const node = new Image();
             node.onload = () => this.#draw();
             node.src = Watermark.#resolveSource(image);
-            this.#image_node = node;
+            this.#imageNode = node;
         }
         this.#draw();
         return this;
@@ -194,8 +202,8 @@ class Watermark {
 
     setZIndex(zIndex = Number()) {
         const number = Number(zIndex);
-        this.#z_index = Number.isFinite(number) ? number : Watermark.#DEFAULT_Z_INDEX;
-        this.#root.style.setProperty("--watermark_z_index", String(this.#z_index));
+        this.#zIndex = Number.isFinite(number) ? number : Watermark.#DEFAULT_Z_INDEX;
+        this.#root.style.setProperty("--watermark_z_index", String(this.#zIndex));
         return this;
     }
 
@@ -245,12 +253,12 @@ class Watermark {
     }
 
     static #normalizeGap(gap = Object()) {
-        const source = Array.isArray(gap) ? {x: gap[0], y: gap[1]} : gap;
+        const source = Array.isArray(gap) ? { x: gap[0], y: gap[1] } : gap;
         const x = Number(source === undefined ? undefined : source.x);
         const y = Number(source === undefined ? undefined : source.y);
         return {
             x: Number.isFinite(x) && x > 0 ? x : Watermark.#DEFAULT_GAP.x,
-            y: Number.isFinite(y) && y > 0 ? y : Watermark.#DEFAULT_GAP.y
+            y: Number.isFinite(y) && y > 0 ? y : Watermark.#DEFAULT_GAP.y,
         };
     }
 
@@ -265,33 +273,33 @@ class Watermark {
             weight: this.#font.weight,
             // Шрифт и цвет палитры берём из вычисленного стиля: канва наследование не умеет
             family: optionOr(this.#font.family, style.fontFamily),
-            color: optionOr(this.#font.color, style.color)
+            color: optionOr(this.#font.color, style.color),
         };
     }
 
     #draw() {
         if (this.#destroyed) return this;
         const text = this.#text === undefined ? "" : String(this.#text);
-        const image = this.#image_node;
-        const has_image = image !== undefined && image.complete === true && image.naturalWidth > 0;
-        const has_text = text !== "";
+        const image = this.#imageNode;
+        const hasImage = image !== undefined && image.complete === true && image.naturalWidth > 0;
+        const hasText = text !== "";
         // Метки нечем рисовать — слой не показываем, чтобы не занимать место
-        this.#layer.hidden = has_text === false && has_image === false;
+        this.#layer.hidden = hasText === false && hasImage === false;
         if (this.#layer.hidden) {
             // Снимаем значение, а не ставим `none`: базовое состояние даёт CSS
             this.#layer.style.removeProperty("background-image");
             return this;
         }
-        const pixel_ratio = typeof window !== "undefined" && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
-        const tile = {x: this.#gap.x, y: this.#gap.y};
+        const pixelRatio = typeof window !== "undefined" && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
+        const tile = { x: this.#gap.x, y: this.#gap.y };
         // Плитка = две метки по каждой оси: на стыках соседних плиток рисунок сходится
         const canvas = document.createElement("canvas");
-        canvas.width = Math.round(tile.x * 2 * pixel_ratio);
-        canvas.height = Math.round(tile.y * 2 * pixel_ratio);
+        canvas.width = Math.round(tile.x * 2 * pixelRatio);
+        canvas.height = Math.round(tile.y * 2 * pixelRatio);
         const context = canvas.getContext("2d");
-        context.scale(pixel_ratio, pixel_ratio);
+        context.scale(pixelRatio, pixelRatio);
         context.globalAlpha = this.#opacity;
-        if (has_text) {
+        if (hasText) {
             const font = this.#resolveFont();
             context.font = `${font.weight} ${font.size}px ${font.family}`;
             context.fillStyle = font.color;
@@ -307,7 +315,7 @@ class Watermark {
                 }
             }
         }
-        if (has_image) {
+        if (hasImage) {
             const max = Math.min(tile.x, tile.y) * 0.6;
             const ratio = Math.min(max / image.naturalWidth, max / image.naturalHeight, 1);
             const width = image.naturalWidth * ratio;
@@ -330,4 +338,4 @@ class Watermark {
     }
 }
 
-exports.Watermark = Watermark
+exports.Watermark = Watermark;

package/framework/components/chui_webview/styles.css

@@ -1,7 +1,7 @@
 chui_webview {
     position: relative;
     width: -webkit-fill-available;
-    height: 100%
+    height: 100%;
 }
 
 chui_load {
@@ -25,4 +25,4 @@ webview {
 
 webview.hide {
     visibility: hidden;
-}
+}

package/framework/components/chui_webview/webview.js

@@ -1,6 +1,6 @@
-const { Animation } = require('../../modules/chui_animations/animations')
-const { Spinner } = require('../chui_spinner/spinner')
-const {Log} = require("../../../framework/modules/chui_logger/chui_logger");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { Spinner } = require("../chui_spinner/spinner");
+const { Log } = require("../../../framework/modules/chui_logger/chui_logger");
 
 /**
  * Встроенный браузер на `<webview>`.
@@ -25,7 +25,7 @@ class WebView {
         userAgent: undefined,
         webPreferences: "allowRunningInsecureContent, javascript=yes",
         partition: undefined,
-        preload: undefined
+        preload: undefined,
     };
     /** Безопасный набор для недоверенного контента: без Node, с webSecurity и без попапов */
     static SECURE = {
@@ -33,43 +33,52 @@ class WebView {
         webSecurity: true,
         allowPopups: false,
         plugins: false,
-        webPreferences: "javascript=yes"
+        webPreferences: "javascript=yes",
     };
-    #id = require("randomstring").generate()
-    #main_block = document.createElement('chui_webview')
-    #WebView = document.createElement('webview')
-    #chui_load = document.createElement('chui_load')
+    #id = require("randomstring").generate();
+    #mainBlock = document.createElement("chui_webview");
+    #WebView = document.createElement("webview");
+    #chuiLoad = document.createElement("chui_load");
     constructor(url = String(), dev = false, options = {}) {
-        require('../../modules/chui_functions').setStyles(__dirname + '/styles.css', 'chUiJS_WebView');
-        const settings = {...WebView.DEFAULTS};
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_WebView");
+        const settings = { ...WebView.DEFAULTS };
         // undefined в объекте опций означает «как по умолчанию», а не «перезаписать пустым»
         for (const [key, value] of Object.entries(options)) {
             if (value !== undefined) settings[key] = value;
         }
-        this.#WebView.setAttribute('id', this.#id)
-        this.#WebView.setAttribute('src', url)
-        if (settings.nodeIntegration === true) this.#WebView.setAttribute('nodeintegration', 'true');
-        if (settings.plugins === true) this.#WebView.setAttribute('plugins', 'true')
-        this.#WebView.setAttribute('useragent', settings.userAgent === undefined ? getFirefoxUserAgent() : String(settings.userAgent))
+        this.#WebView.setAttribute("id", this.#id);
+        this.#WebView.setAttribute("src", url);
+        if (settings.nodeIntegration === true) this.#WebView.setAttribute("nodeintegration", "true");
+        if (settings.plugins === true) this.#WebView.setAttribute("plugins", "true");
+        this.#WebView.setAttribute(
+            "useragent",
+            settings.userAgent === undefined ? getFirefoxUserAgent() : String(settings.userAgent)
+        );
         // Атрибут отрицательный: ставим его только когда webSecurity выключен явно
-        if (settings.webSecurity === false) this.#WebView.setAttribute('disablewebsecurity', 'true')
-        if (settings.allowPopups === true) this.#WebView.setAttribute('allowpopups', 'true')
-        if (settings.webPreferences !== undefined) this.#WebView.setAttribute("webpreferences", settings.nodeIntegration === true ? withNodeIntegration(String(settings.webPreferences)) : String(settings.webPreferences));
+        if (settings.webSecurity === false) this.#WebView.setAttribute("disablewebsecurity", "true");
+        if (settings.allowPopups === true) this.#WebView.setAttribute("allowpopups", "true");
+        if (settings.webPreferences !== undefined)
+            this.#WebView.setAttribute(
+                "webpreferences",
+                settings.nodeIntegration === true
+                    ? withNodeIntegration(String(settings.webPreferences))
+                    : String(settings.webPreferences)
+            );
         if (settings.partition !== undefined) this.#WebView.setAttribute("partition", String(settings.partition));
         if (settings.preload !== undefined) this.#WebView.setAttribute("preload", String(settings.preload));
-        let spinner = new Spinner(Spinner.SIZE.BIG);
-        this.#chui_load.appendChild(spinner.set());
-        this.#main_block.appendChild(this.#WebView)
+        const spinner = new Spinner(Spinner.SIZE.BIG);
+        this.#chuiLoad.appendChild(spinner.set());
+        this.#mainBlock.appendChild(this.#WebView);
         const loadStart = () => {
-            this.#main_block.appendChild(this.#chui_load)
-        }
+            this.#mainBlock.appendChild(this.#chuiLoad);
+        };
         const loadStop = () => {
             new Animation(this.#WebView).fadeIn();
-            this.#main_block.removeChild(this.#chui_load)
+            this.#mainBlock.removeChild(this.#chuiLoad);
             if (dev) this.#WebView.openDevTools();
-        }
-        this.#WebView.addEventListener('did-start-loading', loadStart)
-        this.#WebView.addEventListener('did-stop-loading', loadStop)
+        };
+        this.#WebView.addEventListener("did-start-loading", loadStart);
+        this.#WebView.addEventListener("did-stop-loading", loadStop);
     }
     setPartition(partition = String()) {
         this.#WebView.partition = partition;
@@ -78,51 +87,51 @@ class WebView {
         this.#WebView.preload = "file://" + path;
     }
     addStartLoadEvent(listener = () => {}) {
-        this.#WebView.addEventListener('did-start-loading', listener)
+        this.#WebView.addEventListener("did-start-loading", listener);
     }
     addStopLoadEvent(listener = () => {}) {
-        this.#WebView.addEventListener('did-stop-loading', listener)
+        this.#WebView.addEventListener("did-stop-loading", listener);
     }
     addFinishLoadEvent(listener = () => {}) {
-        this.#WebView.addEventListener('did-finish-load', listener)
+        this.#WebView.addEventListener("did-finish-load", listener);
     }
     async executeJavaScript(code = String()) {
         try {
             await this.#WebView.executeJavaScript(code);
         } catch (err) {
-            Log.error(err)
+            Log.error(err);
         }
     }
     insertCustomRes(options = { cssPath: String(), jsPath: String() }) {
-        this.#WebView.addEventListener('did-frame-finish-load', async () => {
-            const fs = require('fs');
+        this.#WebView.addEventListener("did-frame-finish-load", async () => {
+            const fs = require("fs");
             if (options.cssPath !== undefined) {
-                let data = fs.readFileSync(options.cssPath, 'utf8');
-                this.#WebView.insertCSS(String(data)).catch(r => Log.error(r));
+                const data = fs.readFileSync(options.cssPath, "utf8");
+                this.#WebView.insertCSS(String(data)).catch((r) => Log.error(r));
             }
             if (options.jsPath !== undefined) {
                 try {
-                    const data = fs.readFileSync(options.jsPath, 'utf8');
+                    const data = fs.readFileSync(options.jsPath, "utf8");
                     await this.#WebView.executeJavaScript(data);
                 } catch (err) {
                     Log.error(err);
                 }
             }
-        })
+        });
     }
     async send(channel = String(), ...args) {
         // Аргументы передаются как есть: `webview.send(channel, ...args)`. Раньше они
         // уезжали одним массивом, и слушатель в гостевой странице видел один аргумент
-        await this.#WebView.send(channel, ...args)
+        await this.#WebView.send(channel, ...args);
     }
     setUrl(url = String()) {
-        this.#WebView.setAttribute('src', url)
+        this.#WebView.setAttribute("src", url);
     }
     getWebContentsId() {
-        return this.#WebView.getWebContentsId()
+        return this.#WebView.getWebContentsId();
     }
     set() {
-        return this.#main_block
+        return this.#mainBlock;
     }
 }
 
@@ -141,19 +150,22 @@ const withNodeIntegration = (preferences = String()) => {
 
 const getFirefoxUserAgent = () => {
     const rootUAs = {
-      mac: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0',
-      windows: 'Mozilla/5.0 (Windows NT 10.0; WOW64; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0',
-      linux: 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0',
+        mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0",
+        windows: "Mozilla/5.0 (Windows NT 10.0; WOW64; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0",
+        linux: "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:FXVERSION.0) Gecko/20100101 Firefox/FXVERSION.0",
     };
     let rootUA;
-    if (process.platform === 'win32') {
-      rootUA = rootUAs.windows;
-    } else if (process.platform === 'darwin') {
-      rootUA = rootUAs.mac;
+    if (process.platform === "win32") {
+        rootUA = rootUAs.windows;
+    } else if (process.platform === "darwin") {
+        rootUA = rootUAs.mac;
     } else {
-      rootUA = rootUAs.linux;
+        rootUA = rootUAs.linux;
     }
-    return rootUA.replace(/FXVERSION/g, 91 + Math.floor((Date.now() - 1628553600000) / (4.1 * 7 * 24 * 60 * 60 * 1000)));
+    return rootUA.replace(
+        /FXVERSION/g,
+        91 + Math.floor((Date.now() - 1628553600000) / (4.1 * 7 * 24 * 60 * 60 * 1000))
+    );
 };
 
-exports.WebView = WebView
+exports.WebView = WebView;

package/framework/components/chui_write_bar/styles.css

@@ -0,0 +1,172 @@
+/* Панель ввода: строка «вложения — текст — отправка».
+   Панель не полагает, где она стоит: в карточке она читается кромкой той же карточки,
+   а поверх содержимого её поднимают тенью (`data-shadow="true"`), которую включает
+   приложение — заодно с `StickyBar`, если панель должна прилипать к низу окна. */
+
+chui_write_bar {
+    display: block;
+    box-sizing: border-box;
+    width: -webkit-fill-available;
+}
+
+write_bar_row {
+    display: flex;
+    flex-direction: row;
+    /* Кнопки встают по низу: пока поле в одну линию, разницы нет, а на выросшем поле
+       строка кнопок остаётся там же, где была, — она не едет за текстом */
+    align-items: flex-end;
+    gap: 6px;
+    box-sizing: border-box;
+    width: -webkit-fill-available;
+    padding: var(--control_padding);
+    background: var(--element_background_2);
+    border-top: 1px solid var(--border_color);
+}
+
+/* Тень вместо верхней линии: панель поверх содержимого отделяется материалом, а не чертой */
+chui_write_bar[data-shadow="true"] write_bar_row {
+    border-top-color: transparent;
+    box-shadow: var(--box_shadow_main);
+}
+
+/* Пустой слот места не занимает: у панели без вложений слева нет зазора */
+write_bar_slot {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+    flex: none;
+}
+
+write_bar_slot:empty {
+    display: none;
+}
+
+.write_bar_field {
+    flex: 1 1 auto;
+    min-width: 0;
+    box-sizing: border-box;
+    resize: none;
+    /* Коробка поля — как у остальных полей фреймворка: заливка контрола, волосяная линия
+       и радиус. Отступы и строка подобраны под `--control_height`, поэтому в одну линию
+       поле ровно той же высоты, что кнопки панели, и строка читается одной линией:
+       с прежними отступами 8px поле было на 8px выше кнопок и панель выглядела кривой. */
+    min-height: var(--control_height);
+    padding: calc(var(--control_padding_sm) - 1px) 10px;
+    line-height: 1.25;
+    /* Прокрутка появляется только на выросшем поле: в одну линию у поля нет полосы,
+       которая отнимала бы ширину у текста (предел роста задаёт JS — maxHeight) */
+    overflow-y: hidden;
+    border-radius: var(--radius_sm);
+    border: 1px solid var(--border_color);
+    background: var(--element_background);
+    color: var(--text_color);
+    font-family: inherit;
+    font-size: var(--font_default_size);
+}
+
+.write_bar_field[data-scrollable="true"] {
+    overflow-y: auto;
+}
+
+.write_bar_field::placeholder {
+    color: var(--text_color_disabled);
+}
+
+.write_bar_field:hover:not(:disabled) {
+    border-color: var(--border_color_hover);
+}
+
+/* Активное поле выдаёт кромка, а не кольцо: в панели ввода каретка и так показывает,
+   где набирают, а контур вокруг строки рябит на каждом щелчке по полю */
+.write_bar_field:focus {
+    outline: none;
+    border-color: var(--blue_prime_background);
+}
+
+.write_bar_field:disabled {
+    cursor: not-allowed;
+    background: var(--element_background_disabled);
+    color: var(--text_color_disabled);
+}
+
+/* Кнопка панели: круг со значком, подпись живёт в `aria-label` и подсказке */
+.write_bar_button {
+    position: relative;
+    flex: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--control_height);
+    height: var(--control_height);
+    padding: 0;
+    border: none;
+    border-radius: var(--radius_circle);
+    background: transparent;
+    color: var(--text_color);
+}
+
+.write_bar_button:hover {
+    background: var(--element_background_hover);
+}
+
+/* Нажатие — акцент, как у Button: контрол отвечает на клик ещё до действия */
+.write_bar_button:active:not(:disabled) {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.write_bar_button:disabled {
+    cursor: not-allowed;
+    background: transparent;
+    color: var(--text_color_disabled);
+}
+
+/* Отправка — акцентная кнопка панели: она одна здесь означает «сделать» */
+.write_bar_button[data-accent="true"] {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.write_bar_button[data-accent="true"]:hover {
+    background: var(--blue_prime_background_tint_strong);
+}
+
+.write_bar_button[data-accent="true"]:disabled {
+    cursor: not-allowed;
+    background: var(--button_background_disabled);
+    color: var(--text_color_disabled);
+}
+
+.write_bar_button chui_icon {
+    color: inherit;
+}
+
+/* Счётчик кнопки: число выбранного важнее подписи, поэтому плашка в углу круга */
+write_bar_badge {
+    position: absolute;
+    top: -2px;
+    inset-inline-end: -2px;
+    box-sizing: border-box;
+    min-width: 16px;
+    height: 16px;
+    padding-inline: 4px;
+    border-radius: var(--radius_pill);
+    background: var(--red_prime_background);
+    color: var(--text_color_hover);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 16px;
+    text-align: center;
+}
+
+write_bar_badge[hidden] {
+    display: none;
+}
+
+/* DISABLED STYLES */
+chui_write_bar[data-disabled="true"] write_bar_row {
+    background: var(--element_background_disabled);
+}