chuijs 4.0.2 → 4.0.4

package/framework/components/chui_notification/notification_download_progress.js

@@ -1,117 +1,85 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {setStyles, getTime, optionOr} = require('../../modules/chui_functions');
-const {LAYOUT_ROLE, requireLayoutNode} = require('../../modules/chui_layout/chui_layout');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
-const {Icons} = require("../chui_icons/icons");
-// Плашка значка — общая на всё семейство карточек уведомлений
-const {createStatusPlate, setStatusPlate} = require("./status_plate");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { Icons } = require("../chui_icons/icons");
+// Каркас карточки загрузки — общий с `DownloadNotification` (см. модуль)
+const { createDownloadCard, showDownloadCard, finishDownloadCard } = require("./notification_download_card");
 
-class DownloadProgressNotification {
-    #id = require("randomstring").generate();
-    #download_notification = document.createElement(`notification_download_progress`);
-    #download_notification_icon = undefined;
-    #download_notification_content = document.createElement("download_notification_content");
-    #download_notification_header = document.createElement("download_notification_header");
-    #id_download_notification_title = require("randomstring").generate();
-    #download_notification_title = document.createElement("download_notification_title");
-    #download_notification_date = document.createElement("download_notification_date");
-    #download_notification_body = document.createElement("download_notification_body");
-    //
-    #id_progress = require("randomstring").generate();
-    #ProgressBar = document.createElement(`progress`);
-    #main = document.createElement("download_progress_block");
-    #progress_text_block = document.createElement('download_progress_text_block');
-    #id_progress_count = require("randomstring").generate();
-    #progress_count = document.createElement('download_progress_count');
-    #id_progress_text = require("randomstring").generate();
-    #progress_text = document.createElement('download_progress_text');
-    constructor(options = { title: String(), text: String(), type: String() }) {
-        setStyles(__dirname + "/notification_download_progress.css", 'chUiJS_downloadProgressNotification');
-        this.#download_notification.id = this.#id;
-        this.#download_notification_title.id = this.#id_download_notification_title
-        // Пустая заготовка опции равносильна отсутствующей
-        if (optionOr(options.title, undefined) !== undefined) {
-            this.#download_notification_title.innerText = options.title;
-        } else {
-            throw new Error("Должна быть установлена опция title");
-        }
-        this.#download_notification_body.style.width = "-webkit-fill-available"
-        this.#download_notification_date.innerHTML = getTime();
-        this.#download_notification_header.appendChild(this.#download_notification_title)
-        this.#download_notification_header.appendChild(this.#download_notification_date)
-        this.#download_notification_content.appendChild(this.#download_notification_header)
-        this.#download_notification_content.appendChild(this.#download_notification_body)
-        // Значок состояния — в плашке слева, как у Notification
-        this.#download_notification_icon = createStatusPlate(undefined, Icons.FILE.DOWNLOADING);
-        this.#download_notification.appendChild(this.#download_notification_icon)
-        this.#download_notification.appendChild(this.#download_notification_content)
-
-        //
-        if (options.max !== undefined) this.#ProgressBar.max = options.max;
-        this.#ProgressBar.id = this.#id_progress;
-        this.#ProgressBar.className = "download_progress_bar"
-        this.#progress_count.id = this.#id_progress_count
-        this.#progress_count.setAttribute('for', this.#id_progress);
-        this.#progress_text.id = this.#id_progress_text
-        this.#progress_text.setAttribute('for', this.#id_progress);
-        this.#progress_text_block.appendChild(this.#progress_text)
-        this.#progress_text_block.appendChild(this.#progress_count)
+/**
+ * Число для дорожки прогресса. `<progress>` не принимает `NaN` (бросает `TypeError`), а в счётчике
+ * он печатался бы как «NaN из NaN». Поэтому нечисловое значение читается как «не передали»:
+ * шкала и счётчик остаются на прежнем месте.
+ */
+function countValue(raw = undefined) {
+    const value = Number(raw);
+    return Number.isFinite(value) ? value : undefined;
+}
 
-        this.#main.appendChild(this.#progress_text_block)
-        this.#main.appendChild(this.#ProgressBar)
-        //
-        this.#main.style.width = "-webkit-fill-available";
-        this.#progress_text.innerText = "...";
-        this.#progress_count.innerText = I18n.t("feedback.progressCount", {value: 0, max: 0})
-        this.#ProgressBar.value = 0;
-        this.#download_notification_body.appendChild(this.#main)
+/**
+ * Уведомление о загрузке с дорожкой прогресса: название, текст, счётчик «N из M» и итог.
+ *
+ * Тело — дорожка со счётчиком, поэтому оно не входит в общий каркас: у карточек общими
+ * остаются шапка с датой, статус и уход в историю (см. `notification_download_card.js`).
+ */
+class DownloadProgressNotification {
+    #card;
+    #progress = document.createElement("progress");
+    #text = document.createElement("download_progress_text");
+    #count = document.createElement("download_progress_count");
+    constructor(options = { title: String(), text: String(), type: String(), max: Number() }) {
+        this.#card = createDownloadCard({
+            tag: "notification_download_progress",
+            styles: { file: "notification_download_progress.css", id: "chUiJS_downloadProgressNotification" },
+            glyph: Icons.FILE.DOWNLOADING,
+            title: options.title,
+        });
+        // Шкала объявляет себя скринридеру сама; подписи связаны с ней по `for`
+        this.#progress.id = require("randomstring").generate();
+        this.#progress.className = "download_progress_bar";
+        const max = countValue(options.max);
+        if (max !== undefined && max > 0) this.#progress.max = max;
+        this.#text.id = require("randomstring").generate();
+        this.#text.setAttribute("for", this.#progress.id);
+        this.#count.id = require("randomstring").generate();
+        this.#count.setAttribute("for", this.#progress.id);
+        this.#text.innerText = "...";
+        this.#count.innerText = I18n.t("feedback.progressCount", { value: 0, max: 0 });
+        this.#progress.value = 0;
+        const textBlock = document.createElement("download_progress_text_block");
+        textBlock.appendChild(this.#text);
+        textBlock.appendChild(this.#count);
+        const block = document.createElement("download_progress_block");
+        block.appendChild(textBlock);
+        block.appendChild(this.#progress);
+        block.style.width = "-webkit-fill-available";
+        this.#card.body.appendChild(block);
     }
-    update(title = String(), text = String(), value = Number(), max = Number()) {
-        this.#download_notification_title.innerText = title;
-        this.#progress_text.innerText = text;
-        this.#progress_count.innerText = I18n.t("feedback.progressCount", {value: value, max: max})
-        this.#ProgressBar.value = value;
-        this.#ProgressBar.max = max;
+    /**
+     * Обновление хода загрузки.
+     *
+     * Числа могут не прийти (загрузка без известного размера) или быть нечисловыми — тогда
+     * шкала и счётчик остаются на прежнем месте. Прежде умолчаниями стояли `Number()`: вызов
+     * `update(title, text)` обнулял шкалу и менял `max` (ноль браузер молча заменяет единицей),
+     * а нечисловое значение бросало `TypeError` прямо в обработчике хода загрузки.
+     */
+    update(title = String(), text = String(), value = undefined, max = undefined) {
+        this.#card.title.innerText = title;
+        this.#text.innerText = text;
+        const total = countValue(max);
+        const done = countValue(value);
+        if (total !== undefined && total > 0) this.#progress.max = total;
+        if (done !== undefined) this.#progress.value = Math.max(0, done);
+        if (done !== undefined && total !== undefined) {
+            this.#count.innerText = I18n.t("feedback.progressCount", { value: done, max: total });
+        }
     }
     show() {
-        const panel = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#download_notification);
-        panel.appendChild(this.#download_notification);
-        new Animation(this.#download_notification).slideRightIn();
-        this.#download_notification.addEventListener("click", () => this.#hideNotification(this.#download_notification));
+        showDownloadCard(this.#card);
     }
     done() {
-        this.#renderTest("download_notification_success", "success");
+        finishDownloadCard(this.#card, "success");
     }
     error() {
-        this.#renderTest("download_notification_error", "error");
-    }
-    /** Итог загрузки: цвет статуса несут класс карточки и плашка значка */
-    #renderTest(className, status) {
-        const notification = this.#download_notification;
-        notification.className = className;
-        setStatusPlate(this.#download_notification_icon, status);
-        setTimeout(() => this.#hideNotification(notification), 2000);
-    }
-    #hideNotification(notification) {
-        new Animation(notification).slideRightOutAndRemove();
-        notification.addEventListener("animationend", () => {
-            // Точечный сброс следов анимации вместо стирания всего атрибута `style`
-            notification.style.removeProperty("animation-name");
-            notification.style.removeProperty("transition");
-            notification.style.display = 'flex';
-            notification.style.width = '-webkit-fill-available';
-            notification.style.opacity = "0"
-            notification.style.transform = "translateX(100%)"
-            let box = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, notification);
-            // В истории запись плоская и без курсора: класс снимает стекло, тень и отклик на наведение
-            notification.classList.add("notification_in_box");
-            box.appendChild(notification)
-            setTimeout(() => {
-                notification.style.opacity = "1"
-                notification.style.transform = "translateX(0)"
-            }, 500)
-        })
+        finishDownloadCard(this.#card, "error");
     }
 }
 
-exports.DownloadProgressNotification = DownloadProgressNotification
+exports.DownloadProgressNotification = DownloadProgressNotification;

package/framework/components/chui_notification/notification_update.js

@@ -1,79 +1,86 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {Spinner} = require("../chui_spinner/spinner");
-const {setStyles, getTime, optionOr} = require('../../modules/chui_functions');
-const {LAYOUT_ROLE, requireLayoutNode} = require('../../modules/chui_layout/chui_layout');
-const {Icons} = require("../chui_icons/icons");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { Spinner } = require("../chui_spinner/spinner");
+const { setStyles, getTime, optionOr } = require("../../modules/chui_functions");
+const { LAYOUT_ROLE, requireLayoutNode } = require("../../modules/chui_layout/chui_layout");
+const { Icons } = require("../chui_icons/icons");
 // Плашка значка — общая на всё семейство карточек уведомлений
-const {createStatusPlate} = require("./status_plate");
+const { createStatusPlate } = require("./status_plate");
 
 class UpdateNotification {
     #id = require("randomstring").generate();
-    #update_notification = document.createElement(`update_notification`);
-    #update_notification_icon = undefined;
-    #update_notification_content = document.createElement("update_notification_content");
-    #update_notification_header = document.createElement("update_notification_header");
-    #update_notification_title = document.createElement("update_notification_title");
-    #update_notification_date = document.createElement("update_notification_date");
-    #update_notification_body = document.createElement("update_notification_body");
-    #update_notification_text = document.createElement("update_notification_text");
+    #updateNotification = document.createElement(`update_notification`);
+    #updateNotificationIcon = undefined;
+    #updateNotificationContent = document.createElement("update_notification_content");
+    #updateNotificationHeader = document.createElement("update_notification_header");
+    #updateNotificationTitle = document.createElement("update_notification_title");
+    #updateNotificationDate = document.createElement("update_notification_date");
+    #updateNotificationBody = document.createElement("update_notification_body");
+    #updateNotificationText = document.createElement("update_notification_text");
     constructor(options = { title: String(), text: String(), spinner: Boolean() }) {
-        setStyles(__dirname + "/styles_update.css", 'chUiJS_UpdateNotification');
-        this.#update_notification.id = this.#id;
+        setStyles(__dirname + "/styles_update.css", "chUiJS_UpdateNotification");
+        this.#updateNotification.id = this.#id;
+        // Карточка обновления живёт в ящике и меняется на месте — объявляем вежливо
+        this.#updateNotification.setAttribute("role", "status");
         // Пустая заготовка опции равносильна отсутствующей: пустое уведомление не собирается
         const title = optionOr(options.title, undefined);
         const text = optionOr(options.text, undefined);
         // Стили заголовка уведомления
         if (title !== undefined) {
-            this.#update_notification_title.innerText = title;
+            this.#updateNotificationTitle.innerText = title;
         } else {
             throw new Error("Должна быть установлена опция title");
         }
         // Стили текста уведомления
         if (text !== undefined) {
-            this.#update_notification_text.innerText = text;
+            this.#updateNotificationText.innerText = text;
         } else {
             throw new Error("Должна быть установлена опция text");
         }
-        this.#update_notification_date.innerHTML = getTime();
+        this.#updateNotificationDate.innerHTML = getTime();
         //
-        this.#update_notification_header.appendChild(this.#update_notification_title)
-        this.#update_notification_header.appendChild(this.#update_notification_date)
+        this.#updateNotificationHeader.appendChild(this.#updateNotificationTitle);
+        this.#updateNotificationHeader.appendChild(this.#updateNotificationDate);
         //
-        this.#update_notification_content.appendChild(this.#update_notification_header)
+        this.#updateNotificationContent.appendChild(this.#updateNotificationHeader);
         // Значок и спиннер делят одно место — плашку слева: карточка остаётся ровной,
         // а текст не отъезжает вбок под вращающимся кольцом
-        this.#update_notification_icon = createStatusPlate(undefined, Icons.NOTIFICATION.SYSTEM_UPDATE);
+        this.#updateNotificationIcon = createStatusPlate(undefined, Icons.NOTIFICATION.SYSTEM_UPDATE);
         if (options.spinner) {
             // Под кольцом заливки нет: плашка держит только место значка, иначе серая подложка
             // читалась вторым фоном вокруг тонкого индикатора
-            this.#update_notification_icon.classList.add("notification_icon_plain");
-            this.#update_notification_icon.innerHTML = "";
-            this.#update_notification_icon.appendChild(new Spinner(Spinner.SIZE.V_SMALL, "0").set());
+            this.#updateNotificationIcon.classList.add("notification_icon_plain");
+            this.#updateNotificationIcon.innerHTML = "";
+            this.#updateNotificationIcon.appendChild(new Spinner(Spinner.SIZE.V_SMALL, "0").set());
         }
-        this.#update_notification_body.appendChild(this.#update_notification_text)
-        this.#update_notification_content.appendChild(this.#update_notification_body)
-        this.#update_notification.appendChild(this.#update_notification_icon)
-        this.#update_notification.appendChild(this.#update_notification_content)
+        this.#updateNotificationBody.appendChild(this.#updateNotificationText);
+        this.#updateNotificationContent.appendChild(this.#updateNotificationBody);
+        this.#updateNotification.appendChild(this.#updateNotificationIcon);
+        this.#updateNotification.appendChild(this.#updateNotificationContent);
     }
     show(showOnSystem = Boolean()) {
-        const panel = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#update_notification);
-        panel.appendChild(this.#update_notification);
-        new Animation(this.#update_notification).slideRightIn();
+        const panel = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#updateNotification);
+        panel.appendChild(this.#updateNotification);
+        new Animation(this.#updateNotification).slideRightIn();
         //notification.addEventListener("click", () => this.hide(notification));
-        if (showOnSystem) require("electron").ipcRenderer.send("show_system_notification", this.#update_notification_title.innerText, this.#update_notification_text.innerText);
+        if (showOnSystem)
+            require("electron").ipcRenderer.send(
+                "show_system_notification",
+                this.#updateNotificationTitle.innerText,
+                this.#updateNotificationText.innerText
+            );
     }
     hide() {
-        const notification = this.#update_notification;
+        const notification = this.#updateNotification;
         // Карточка обновления не уезжает в ящик истории: после анимации её убираем совсем.
         // Без этого невидимый узел копился в панели уведомлений на каждое объявление
         notification.addEventListener("animationend", (event) => {
             if (event.target !== notification) return;
             notification.remove();
         });
-        new Animation(this.#update_notification).slideRightOutAndRemove();
+        new Animation(this.#updateNotification).slideRightOutAndRemove();
         // Карточку ещё не показывали — анимации не будет, но узел в панели остался бы висеть
         if (notification.style.animationName === "" && document.body.contains(notification)) notification.remove();
     }
 }
 
-exports.UpdateNotification = UpdateNotification
+exports.UpdateNotification = UpdateNotification;

package/framework/components/chui_notification/status_plate.css

@@ -22,17 +22,17 @@ notification_icon chui_icon {
 }
 
 notification_icon.notification_icon_success {
-    background: var(--badge_success_back);
+    background: var(--badge_success_background);
     color: var(--badge_success_text);
 }
 
 notification_icon.notification_icon_warning {
-    background: var(--badge_warning_back);
+    background: var(--badge_warning_background);
     color: var(--badge_warning_text);
 }
 
 notification_icon.notification_icon_error {
-    background: var(--badge_error_back);
+    background: var(--badge_error_background);
     color: var(--badge_error_text);
 }
 

package/framework/components/chui_notification/status_plate.js

@@ -1,5 +1,5 @@
-const {setStyles} = require('../../modules/chui_functions');
-const {Icon, Icons} = require("../chui_icons/icons");
+const { setStyles } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
 
 /**
  * Плашка значка состояния: одно решение на всё семейство карточек уведомлений —

package/framework/components/chui_notification/styles.css

@@ -9,7 +9,7 @@ notification {
        Статус несёт не акцентная полоса слева (устаревший приём «предупредительной
        рамки»), а плашка значка и цветной волосяной край `border-color` ниже. */
     border-radius: var(--radius_md);
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     padding: 12px 14px;
     background: var(--header_background);
@@ -128,7 +128,12 @@ notification_progress {
 
 /* Плоская поверхность списка: записи истории не «всплывают» над панелью и не размывают её */
 .notification_in_box {
+    /* Вид записи истории и показывает карточку: вне ящика `notification` скрыт (`display: none`),
+       поэтому запись показывает себя сама — инлайновый `display` из JS ушёл вместе с ручной
+       уборкой следов кадра */
+    display: flex;
     /* в списке истории карточка тянется по ширине ящика, а не держит ширину тоста */
+    width: -webkit-fill-available;
     min-width: 0;
     max-width: -webkit-fill-available;
     margin: 4px 2px;

package/framework/components/chui_notification/styles_download.css

@@ -7,7 +7,7 @@ download_notification {
     box-sizing: border-box;
     /* Тот же материал и ритм, что у карточки Notification */
     border-radius: var(--radius_md);
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     padding: 12px 14px;
     background: var(--header_background);
@@ -96,4 +96,4 @@ download_notification_text {
 
 download_notification_text p {
     margin: 0;
-}
+}

package/framework/components/chui_notification/styles_update.css

@@ -8,7 +8,7 @@ update_notification {
     /* Тот же материал и тот же ритм, что у карточки Notification: стеклянная
        поверхность, радиус, волосяной край и отступы 12/14 */
     border-radius: var(--radius_md);
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     padding: 12px 14px;
     background: var(--header_background);
@@ -27,7 +27,7 @@ update_notification_body {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--margin);
+    gap: var(--block_margin);
 }
 
 update_notification_content {
@@ -82,4 +82,4 @@ update_notification_text {
 
 update_notification_text p {
     margin: 0;
-}
+}