chuijs 4.0.2 → 4.0.4

package/framework/components/chui_popups/popups.js

@@ -1,291 +1,320 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {OverlayA11y, makeKeyboardButton} = require('../../modules/chui_a11y/chui_a11y');
-const {PasswordInput} = require("../chui_inputs/chui_password/password");
-const {TextInput} = require("../chui_inputs/chui_text/text");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
-const {optionOr} = require("../../modules/chui_functions");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { OverlayA11y, makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { PasswordInput } = require("../chui_inputs/chui_password/password");
+const { TextInput } = require("../chui_inputs/chui_text/text");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { optionOr } = require("../../modules/chui_functions");
 
 class Popup {
     constructor() {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Popups');
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Popups");
     }
-    alert(options = {title: String(), message: String()}) {
+    alert(options = { title: String(), message: String() }) {
         new PopupAlert(options);
     }
-    async confirm(options = {
-        title: String(), message: String(), okText: String(), cancelText: String(),
-    }) {
-        try {
-            return await new PopupConfirm(options);
-        } catch (err) {
-            return err;
+    async confirm(
+        options = {
+            title: String(),
+            message: String(),
+            okText: String(),
+            cancelText: String(),
         }
+    ) {
+        // `PopupConfirm` не отклоняется: он закрывается только выбором — `resolve(true/false)`
+        // в его конструкторе. Прежний `catch (err) { return err; }` ловил недостижимое и
+        // возвращал `Error` как успешный ответ: `if (await popup.confirm())` принял бы отказ
+        // за согласие
+        return new PopupConfirm(options);
     }
-    async prompt(options = {
-        title: String(), message: String(),
-        inputs: {
-            text: {
-                placeholder: String(), errorMessage: String()
-            },
-            password: {
-                placeholder: String(), errorMessage: String()
+    async prompt(
+        options = {
+            title: String(),
+            message: String(),
+            inputs: {
+                text: {
+                    placeholder: String(),
+                    errorMessage: String(),
+                },
+                password: {
+                    placeholder: String(),
+                    errorMessage: String(),
+                },
             },
-        },
-        okText: String(), cancelText: String()
-    }) {
+            okText: String(),
+            cancelText: String(),
+        }
+    ) {
         try {
             return await new PopupPrompt(options);
         } catch (err) {
             // Причину не теряем: она нужна вызывающему коду для диагностики
-            throw new Error(err instanceof Error ? err.message : String(err), {cause: err})
+            throw new Error(err instanceof Error ? err.message : String(err), { cause: err });
         }
     }
 }
 
-exports.Popup = Popup
+exports.Popup = Popup;
 
 class PopupAlert {
     #id = require("randomstring").generate();
-    #chui_popup = document.createElement(`chui_popup`);
-    #popup_content = document.createElement('popup_content');
-    #popup_body = document.createElement("popup_body")
-    #popup_buttons = document.createElement('popup_buttons');
-    #button_OK = document.createElement("popup_button_ok");
-
-    #popup_title = document.createElement("popup_title")
-    #popup_message = document.createElement("popup_message")
+    #chuiPopup = document.createElement(`chui_popup`);
+    #popupContent = document.createElement("popup_content");
+    #popupBody = document.createElement("popup_body");
+    #popupButtons = document.createElement("popup_buttons");
+    #buttonOK = document.createElement("popup_button_ok");
+
+    #popupTitle = document.createElement("popup_title");
+    #popupMessage = document.createElement("popup_message");
     #a11y = undefined;
-    constructor(options = {title: String(), message: String()}) {
-        this.#chui_popup.id = this.#id
+    constructor(options = { title: String(), message: String() }) {
+        this.#chuiPopup.id = this.#id;
         //ADDS
-        this.#popup_content.appendChild(this.#popup_body)
-        this.#popup_content.appendChild(this.#popup_buttons)
-        this.#chui_popup.appendChild(this.#popup_content)
+        this.#popupContent.appendChild(this.#popupBody);
+        this.#popupContent.appendChild(this.#popupButtons);
+        this.#chuiPopup.appendChild(this.#popupContent);
 
-        this.#popup_title.innerText = options.title;
-        this.#popup_message.innerText = options.message;
+        this.#popupTitle.innerText = options.title;
+        this.#popupMessage.innerText = options.message;
 
-        this.#popup_body.appendChild(this.#popup_title);
-        this.#popup_body.appendChild(this.#popup_message);
+        this.#popupBody.appendChild(this.#popupTitle);
+        this.#popupBody.appendChild(this.#popupMessage);
 
         // СОБЫТИЯ
-        this.#button_OK.innerText = I18n.t("common.ok");
-        makeKeyboardButton(this.#button_OK)
-        this.#button_OK.addEventListener("click", () => this.#dismiss())
-        this.#popup_buttons.appendChild(this.#button_OK);
+        this.#buttonOK.innerText = I18n.t("common.ok");
+        makeKeyboardButton(this.#buttonOK);
+        this.#buttonOK.addEventListener("click", () => this.#dismiss());
+        this.#popupButtons.appendChild(this.#buttonOK);
 
         //
-        document.body.appendChild(this.#chui_popup)
+        document.body.appendChild(this.#chuiPopup);
         // Доступность: alertdialog, имя из заголовка, описание из сообщения, Esc закрывает
-        this.#a11y = new OverlayA11y(this.#chui_popup, {
-            role: "alertdialog", labelNode: this.#popup_title, describedBy: this.#popup_message,
-            onEscape: () => this.#dismiss()
+        this.#a11y = new OverlayA11y(this.#chuiPopup, {
+            role: "alertdialog",
+            labelNode: this.#popupTitle,
+            describedBy: this.#popupMessage,
+            onEscape: () => this.#dismiss(),
         });
-        new Animation(this.#chui_popup).fadeIn();
-        new Animation(this.#chui_popup.firstChild).scaleIn();
-        this.#a11y.open()
+        new Animation(this.#chuiPopup).fadeIn();
+        new Animation(this.#chuiPopup.firstChild).scaleIn();
+        this.#a11y.open();
     }
     #dismiss() {
         // Попап мог быть уже убран (повторный Esc или клик) — тогда закрывать нечего
-        if (!document.contains(this.#chui_popup)) return;
-        this.#a11y.close()
-        new Animation(this.#chui_popup.firstChild).scaleOut();
-        new Animation(this.#chui_popup).fadeOutAndRemove();
+        if (!document.contains(this.#chuiPopup)) return;
+        this.#a11y.close();
+        new Animation(this.#chuiPopup.firstChild).scaleOut();
+        new Animation(this.#chuiPopup).fadeOutAndRemove();
     }
 }
 
 class PopupConfirm {
     #id = require("randomstring").generate();
-    #chui_popup = document.createElement(`chui_popup`);
-    #popup_content = document.createElement('popup_content');
-    #popup_body = document.createElement("popup_body")
-    #popup_buttons = document.createElement('popup_buttons');
-    #button_accept = document.createElement("popup_button_accept")
-    #button_cancel = document.createElement("popup_button_cancel")
-
-    #popup_title = document.createElement("popup_title")
-    #popup_message = document.createElement("popup_message")
+    #chuiPopup = document.createElement(`chui_popup`);
+    #popupContent = document.createElement("popup_content");
+    #popupBody = document.createElement("popup_body");
+    #popupButtons = document.createElement("popup_buttons");
+    #buttonAccept = document.createElement("popup_button_accept");
+    #buttonCancel = document.createElement("popup_button_cancel");
+
+    #popupTitle = document.createElement("popup_title");
+    #popupMessage = document.createElement("popup_message");
     #a11y = undefined;
-    constructor(options = {
-        title: String(), message: String(),
-        okText: String(), cancelText: String(),
-    }) {
-        this.#chui_popup.id = this.#id
+    constructor(
+        options = {
+            title: String(),
+            message: String(),
+            okText: String(),
+            cancelText: String(),
+        }
+    ) {
+        this.#chuiPopup.id = this.#id;
         //ADDS
-        this.#popup_content.appendChild(this.#popup_body)
-        this.#popup_content.appendChild(this.#popup_buttons)
-        this.#chui_popup.appendChild(this.#popup_content)
+        this.#popupContent.appendChild(this.#popupBody);
+        this.#popupContent.appendChild(this.#popupButtons);
+        this.#chuiPopup.appendChild(this.#popupContent);
 
-        this.#popup_title.innerText = options.title;
-        this.#popup_message.innerText = options.message;
+        this.#popupTitle.innerText = options.title;
+        this.#popupMessage.innerText = options.message;
 
-        this.#popup_body.appendChild(this.#popup_title);
-        this.#popup_body.appendChild(this.#popup_message);
+        this.#popupBody.appendChild(this.#popupTitle);
+        this.#popupBody.appendChild(this.#popupMessage);
 
         // Пустая опция равносильна отсутствующей: без подписи кнопка печатала «undefined»
-        this.#button_cancel.innerText = optionOr(options.cancelText, I18n.t("common.cancel"));
-        this.#button_accept.innerText = optionOr(options.okText, I18n.t("common.ok"));
+        this.#buttonCancel.innerText = optionOr(options.cancelText, I18n.t("common.cancel"));
+        this.#buttonAccept.innerText = optionOr(options.okText, I18n.t("common.ok"));
 
-        makeKeyboardButton(this.#button_cancel)
-        makeKeyboardButton(this.#button_accept)
-        this.#popup_buttons.appendChild(this.#button_cancel);
-        this.#popup_buttons.appendChild(this.#button_accept);
+        makeKeyboardButton(this.#buttonCancel);
+        makeKeyboardButton(this.#buttonAccept);
+        this.#popupButtons.appendChild(this.#buttonCancel);
+        this.#popupButtons.appendChild(this.#buttonAccept);
 
         return new Promise((resolve) => {
-            this.#button_cancel.addEventListener("click", () => {
-                this.#dismiss()
+            this.#buttonCancel.addEventListener("click", () => {
+                this.#dismiss();
                 resolve(false);
-            })
+            });
 
-            this.#button_accept.addEventListener("click", () => {
-                this.#dismiss()
+            this.#buttonAccept.addEventListener("click", () => {
+                this.#dismiss();
                 resolve(true);
             });
 
-            document.body.appendChild(this.#chui_popup)
+            document.body.appendChild(this.#chuiPopup);
             // Доступность: имя из заголовка, описание из сообщения, Esc = отмена, фокус остаётся в диалоге
-            this.#a11y = new OverlayA11y(this.#chui_popup, {
-                role: "alertdialog", labelNode: this.#popup_title, describedBy: this.#popup_message,
-                onEscape: () => this.#button_cancel.click()
+            this.#a11y = new OverlayA11y(this.#chuiPopup, {
+                role: "alertdialog",
+                labelNode: this.#popupTitle,
+                describedBy: this.#popupMessage,
+                onEscape: () => this.#buttonCancel.click(),
             });
-            new Animation(this.#chui_popup).fadeIn();
-            new Animation(this.#chui_popup.firstChild).scaleIn();
-            this.#a11y.open()
-        })
+            new Animation(this.#chuiPopup).fadeIn();
+            new Animation(this.#chuiPopup.firstChild).scaleIn();
+            this.#a11y.open();
+        });
     }
     #dismiss() {
         // Попап мог быть уже убран (повторный Esc или клик) — тогда закрывать нечего
-        if (!document.contains(this.#chui_popup)) return;
-        this.#a11y.close()
-        new Animation(this.#chui_popup.firstChild).scaleOut();
-        new Animation(this.#chui_popup).fadeOutAndRemove();
+        if (!document.contains(this.#chuiPopup)) return;
+        this.#a11y.close();
+        new Animation(this.#chuiPopup.firstChild).scaleOut();
+        new Animation(this.#chuiPopup).fadeOutAndRemove();
     }
 }
 
 class PopupPrompt {
     #id = require("randomstring").generate();
-    #chui_popup = document.createElement(`chui_popup`);
-    #popup_content = document.createElement('popup_content');
-    #popup_body = document.createElement("popup_body")
-    #popup_buttons = document.createElement('popup_buttons');
-    #button_accept = document.createElement("popup_button_accept")
-    #button_cancel = document.createElement("popup_button_cancel")
-
-    #popup_title = document.createElement("popup_title")
-    #popup_message = document.createElement("popup_message")
-
-    #input_text = undefined;
-    #input_pass = undefined;
+    #chuiPopup = document.createElement(`chui_popup`);
+    #popupContent = document.createElement("popup_content");
+    #popupBody = document.createElement("popup_body");
+    #popupButtons = document.createElement("popup_buttons");
+    #buttonAccept = document.createElement("popup_button_accept");
+    #buttonCancel = document.createElement("popup_button_cancel");
+
+    #popupTitle = document.createElement("popup_title");
+    #popupMessage = document.createElement("popup_message");
+
+    #inputText = undefined;
+    #inputPass = undefined;
     #a11y = undefined;
 
-    constructor(options = {
-        title: String(), message: String(),
-        inputs: {
-            text: {
-                placeholder: String(),
-                errorMessage: String()
+    constructor(
+        options = {
+            title: String(),
+            message: String(),
+            inputs: {
+                text: {
+                    placeholder: String(),
+                    errorMessage: String(),
+                },
+                password: {
+                    placeholder: String(),
+                    errorMessage: String(),
+                },
             },
-            password: {
-                placeholder: String(),
-                errorMessage: String()
-            },
-        },
-        okText: String(), cancelText: String()
-    }) {
-        this.#chui_popup.id = this.#id
+            okText: String(),
+            cancelText: String(),
+        }
+    ) {
+        this.#chuiPopup.id = this.#id;
         //ADDS
-        this.#popup_content.appendChild(this.#popup_body)
-        this.#popup_content.appendChild(this.#popup_buttons)
-        this.#chui_popup.appendChild(this.#popup_content)
+        this.#popupContent.appendChild(this.#popupBody);
+        this.#popupContent.appendChild(this.#popupButtons);
+        this.#chuiPopup.appendChild(this.#popupContent);
 
-        this.#popup_title.innerText = options.title;
-        this.#popup_message.innerText = options.message;
+        this.#popupTitle.innerText = options.title;
+        this.#popupMessage.innerText = options.message;
 
-        this.#popup_body.appendChild(this.#popup_title);
-        this.#popup_body.appendChild(this.#popup_message);
+        this.#popupBody.appendChild(this.#popupTitle);
+        this.#popupBody.appendChild(this.#popupMessage);
 
         if (options.inputs.text === undefined && options.inputs.password === undefined) {
             throw new Error("render: Установите одно из полей ввода text или password");
         }
 
         if (options.inputs.text !== undefined) {
-            this.#input_text = new TextInput({ placeholder: options.inputs.text.placeholder, width: "-webkit-fill-available" })
-            this.#popup_body.appendChild(this.#input_text.set());
+            this.#inputText = new TextInput({
+                placeholder: options.inputs.text.placeholder,
+                width: "-webkit-fill-available",
+            });
+            this.#popupBody.appendChild(this.#inputText.set());
         }
 
         if (options.inputs.password !== undefined) {
-            this.#input_pass = new PasswordInput({ placeholder: options.inputs.password.placeholder, width: "-webkit-fill-available" })
-            this.#popup_body.appendChild(this.#input_pass.set());
+            this.#inputPass = new PasswordInput({
+                placeholder: options.inputs.password.placeholder,
+                width: "-webkit-fill-available",
+            });
+            this.#popupBody.appendChild(this.#inputPass.set());
         }
 
         // Пустая опция равносильна отсутствующей: без подписи кнопка печатала «undefined»
-        this.#button_cancel.innerText = optionOr(options.cancelText, I18n.t("common.cancel"));
-        this.#button_accept.innerText = optionOr(options.okText, I18n.t("common.ok"));
+        this.#buttonCancel.innerText = optionOr(options.cancelText, I18n.t("common.cancel"));
+        this.#buttonAccept.innerText = optionOr(options.okText, I18n.t("common.ok"));
 
-        makeKeyboardButton(this.#button_cancel)
-        makeKeyboardButton(this.#button_accept)
-        this.#popup_buttons.appendChild(this.#button_cancel);
-        this.#popup_buttons.appendChild(this.#button_accept);
+        makeKeyboardButton(this.#buttonCancel);
+        makeKeyboardButton(this.#buttonAccept);
+        this.#popupButtons.appendChild(this.#buttonCancel);
+        this.#popupButtons.appendChild(this.#buttonAccept);
 
         return new Promise((resolve) => {
-
-
-            this.#button_cancel.addEventListener("click", () => {
-                this.#dismiss()
+            this.#buttonCancel.addEventListener("click", () => {
+                this.#dismiss();
                 // Отмена тоже закрывает промис — иначе `await new Popup().prompt(...)` висел навсегда
                 resolve(undefined);
-            })
+            });
 
-            this.#button_accept.addEventListener("click", () => {
+            this.#buttonAccept.addEventListener("click", () => {
                 let close = false;
-                if (this.#input_text && this.#input_pass === undefined) {
-                    if (this.#input_text.getValue() !== "") {
+                if (this.#inputText && this.#inputPass === undefined) {
+                    if (this.#inputText.getValue() !== "") {
                         close = true;
-                        resolve({ text: this.#input_text.getValue() });
+                        resolve({ text: this.#inputText.getValue() });
                     } else {
-                        this.#input_text.setErrorMessage(options.inputs.text.errorMessage);
+                        this.#inputText.setErrorMessage(options.inputs.text.errorMessage);
                     }
                 }
-                if (this.#input_text === undefined && this.#input_pass) {
-                    if (this.#input_pass.getValue() !== "") {
+                if (this.#inputText === undefined && this.#inputPass) {
+                    if (this.#inputPass.getValue() !== "") {
                         close = true;
-                        resolve({ password: this.#input_pass.getValue() });
+                        resolve({ password: this.#inputPass.getValue() });
                     } else {
-                        this.#input_pass.setErrorMessage(options.inputs.password.errorMessage);
+                        this.#inputPass.setErrorMessage(options.inputs.password.errorMessage);
                     }
                 }
-                if (this.#input_text && this.#input_pass) {
-                    let text = this.#input_text.getValue();
-                    let password = this.#input_pass.getValue();
+                if (this.#inputText && this.#inputPass) {
+                    const text = this.#inputText.getValue();
+                    const password = this.#inputPass.getValue();
                     if (text !== "" && password !== "") {
                         close = true;
                         resolve({ text, password });
                     }
-                    if (text === "") this.#input_text.setErrorMessage(options.inputs.text.errorMessage);
-                    if (password === "") this.#input_pass.setErrorMessage(options.inputs.password.errorMessage);
+                    if (text === "") this.#inputText.setErrorMessage(options.inputs.text.errorMessage);
+                    if (password === "") this.#inputPass.setErrorMessage(options.inputs.password.errorMessage);
                 }
                 if (close) {
-                    this.#dismiss()
+                    this.#dismiss();
                 }
-            })
+            });
 
-            document.body.appendChild(this.#chui_popup);
+            document.body.appendChild(this.#chuiPopup);
 
             // Доступность: имя из заголовка, описание из сообщения, Esc = отмена, фокус уходит в первое поле
-            this.#a11y = new OverlayA11y(this.#chui_popup, {
-                role: "alertdialog", labelNode: this.#popup_title, describedBy: this.#popup_message,
-                onEscape: () => this.#button_cancel.click()
+            this.#a11y = new OverlayA11y(this.#chuiPopup, {
+                role: "alertdialog",
+                labelNode: this.#popupTitle,
+                describedBy: this.#popupMessage,
+                onEscape: () => this.#buttonCancel.click(),
             });
-            new Animation(this.#chui_popup).fadeIn();
-            new Animation(this.#chui_popup.firstChild).scaleIn();
-            this.#a11y.open()
-        })
+            new Animation(this.#chuiPopup).fadeIn();
+            new Animation(this.#chuiPopup.firstChild).scaleIn();
+            this.#a11y.open();
+        });
     }
     #dismiss() {
         // Попап мог быть уже убран (повторный Esc или клик) — тогда закрывать нечего
-        if (!document.contains(this.#chui_popup)) return;
-        this.#a11y.close()
-        new Animation(this.#chui_popup.firstChild).scaleOut();
-        new Animation(this.#chui_popup).fadeOutAndRemove();
+        if (!document.contains(this.#chuiPopup)) return;
+        this.#a11y.close();
+        new Animation(this.#chuiPopup.firstChild).scaleOut();
+        new Animation(this.#chuiPopup).fadeOutAndRemove();
     }
-}
+}

package/framework/components/chui_popups/styles.css

@@ -16,7 +16,7 @@ chui_popup {
 popup_content {
     margin: 60px auto;
     width: 325px;
-    max-width: calc(100% - (var(--margin) * 2));
+    max-width: calc(100% - (var(--block_margin) * 2));
     height: max-content;
     display: flex;
     flex-direction: column;
@@ -79,8 +79,8 @@ popup_button_cancel {
     flex: 1;
     min-width: 0;
     /* Компактный шаг — те же 29px высоты, что у .chui_button и полей */
-    padding: var(--main_padding_sm);
-    border-radius: var(--border_radius);
+    padding: var(--block_padding_sm);
+    border-radius: var(--radius_sm);
     background: var(--button_background);
     border: 1px solid var(--button_border_color);
     color: var(--text_color);
@@ -107,8 +107,8 @@ popup_button_accept {
 
 popup_button_ok:hover,
 popup_button_accept:hover {
-    background: var(--blue_prime_background_trans);
-    border-color: var(--blue_prime_background_trans);
+    background: var(--blue_prime_background_tint_strong);
+    border-color: var(--blue_prime_background_tint_strong);
     color: var(--text_color_hover);
 }
 
@@ -119,5 +119,5 @@ popup_button_cancel:active {
     border: 1px solid var(--button_border_color_hover);
     color: var(--text_color_hover);
     /* Лёгкая усадка: нажатие читается даже там, где заливка уже акцентная */
-    transform: scale(.97);
-}
+    transform: scale(0.97);
+}