chuijs 4.0.2 → 4.0.4

package/framework/components/chui_message_bar/styles.css

@@ -0,0 +1,248 @@
+/* ── MessageBar — лента сообщений ───────────────────────────── */
+chui_message_bar {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: -webkit-fill-available;
+    height: max-content;
+    margin: var(--block_margin);
+    overflow: hidden;
+    border-radius: var(--radius_sm);
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+    font-size: var(--font_default_size);
+    color: var(--text_color);
+}
+
+/* Лента и кнопка «Новые сообщения» живут в одной коробке: кнопка лежит поверх нижнего края,
+   а не под лентой, — поэтому она и попадает в поле зрения, и не отнимает высоту у сообщений */
+message_bar_view {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: var(--message_bar_height, 320px);
+    min-height: 0;
+}
+
+/* Лента прокручивается сама: страница под ней не растёт. Сообщения лежат отдельным слоем —
+   за его размером следит `ResizeObserver`, чтобы лента осталась у нижнего края, когда стили
+   доехали, окно изменило ширину или догрузилась картинка */
+message_bar_feed {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    box-sizing: border-box;
+    padding: var(--control_padding);
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: var(--element_background_2);
+    /* Кольцо фокуса рисует общее правило темы, а смещает его внутрь общий список
+       обрезанных коробок (`message_bar_feed` рядом с `chat_log` в global_style.css):
+       лента лежит в коробке с `overflow: hidden`, внешний контур срезался бы */
+}
+
+message_bar_content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    gap: 6px;
+    min-height: 0;
+}
+
+message_bar_empty {
+    margin: auto;
+    padding: var(--control_padding);
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+    text-align: center;
+}
+
+message_bar_empty[hidden] {
+    display: none;
+}
+
+/* Кнопка «Новые сообщения»/«К низу»: показ и уборка идут переходом, поэтому кнопка
+   не мигает и в скрытом состоянии не перехватывает щелчки (видимость снимается целиком) */
+.message_bar_jump {
+    position: absolute;
+    inset-block-end: var(--control_padding);
+    inset-inline-start: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    box-sizing: border-box;
+    padding: 4px var(--control_padding);
+    border: none;
+    border-radius: var(--radius_pill);
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+    font-family: inherit;
+    font-size: var(--font_labels_size);
+    font-weight: 500;
+    cursor: pointer;
+    box-shadow: var(--box_shadow_main);
+    visibility: hidden;
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+    transition:
+        opacity var(--motion_fast) var(--motion_ease),
+        transform var(--motion_fast) var(--motion_ease),
+        visibility var(--motion_fast);
+}
+
+.message_bar_jump[data-visible="true"] {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(-50%);
+}
+
+.message_bar_jump:hover {
+    background: var(--blue_prime_background_tint_strong);
+}
+
+.message_bar_jump_icon {
+    display: flex;
+    align-items: center;
+}
+
+.message_bar_jump chui_icon {
+    color: inherit;
+}
+
+/* Разделитель дня: подпись-пилюля по центру ленты */
+message_bar_day {
+    display: flex;
+    justify-content: center;
+    padding: 2px 0;
+}
+
+message_bar_day_label {
+    padding: 2px var(--control_padding);
+    border-radius: var(--radius_sm);
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+}
+
+/* Группа сообщений одного автора одного дня: аватар и стопка пузырей */
+message_bar_group {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 8px;
+}
+
+message_bar_group[data-own="true"] {
+    flex-direction: row-reverse;
+}
+
+message_bar_bubbles {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-width: 78%;
+    min-width: 0;
+}
+
+message_bar_bubble {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 8px 10px;
+    border-radius: var(--radius_sm);
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+    color: var(--text_color);
+    /* Новое сообщение встаёт на место: кадр общий — см. `chui_appear_up` в global_style.css */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+/* Хвостик стопки: у последнего пузыря угол со стороны автора скруглён меньше — по нему
+   видно, где стопка кончается */
+message_bar_bubble[data-last="true"][data-own="false"] {
+    border-end-start-radius: calc(var(--radius_sm) / 2);
+}
+
+message_bar_bubble[data-last="true"][data-own="true"] {
+    border-end-end-radius: calc(var(--radius_sm) / 2);
+}
+
+/* Свои сообщения — акцентом и справа */
+message_bar_bubble[data-own="true"] {
+    background: var(--blue_prime_background);
+    border-color: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+message_bar_author {
+    display: block;
+    font-size: var(--font_labels_size);
+    font-weight: 600;
+    color: var(--blue_prime_background);
+}
+
+message_bar_text {
+    display: block;
+    white-space: pre-wrap;
+    word-break: break-word;
+    line-height: 1.35;
+}
+
+message_bar_attachment {
+    display: block;
+    margin-block-start: 2px;
+    font-size: var(--font_labels_size);
+    text-decoration: underline;
+}
+
+message_bar_attachment a {
+    color: inherit;
+}
+
+message_bar_meta {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    align-self: flex-end;
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+}
+
+message_bar_bubble[data-own="true"] message_bar_meta {
+    color: var(--text_color_hover_disabled);
+}
+
+message_bar_status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+message_bar_status chui_icon {
+    color: inherit;
+    font-size: var(--font_labels_size);
+}
+
+message_bar_status[data-status="failed"] {
+    color: var(--red_prime_background);
+}
+
+/* Строка «печатает…»: на контейнерной ступени под лентой, как у чата */
+message_bar_typing {
+    padding: var(--control_padding) var(--block_padding);
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+.message_bar_typing_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
+}
+
+message_bar_typing[hidden] {
+    display: none;
+}

package/framework/components/chui_modal/modal.js

@@ -1,7 +1,7 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {OverlayA11y} = require('../../modules/chui_a11y/chui_a11y');
-const {optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../modules/chui_animations/animations");
+const { OverlayA11y } = require("../../modules/chui_a11y/chui_a11y");
+const { optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 class Dialog {
     #id = require("randomstring").generate();
@@ -9,23 +9,26 @@ class Dialog {
     // Занавес под диалогом: размывает и затемняет окно. Живёт отдельным узлом в body
     // (внутри диалога его бы срезал собственный overflow), клики пропускает насквозь.
     #scrim = document.createElement(`dialog_scrim`);
-    #header = document.createElement('dialog_header');
-    #body = document.createElement('dialog_body');
-    #footer = document.createElement('dialog_footer');
+    #header = document.createElement("dialog_header");
+    #body = document.createElement("dialog_body");
+    #footer = document.createElement("dialog_footer");
     //
     #a11y = undefined;
-    #outside_click_bound = false;
+    #outsideClickBound = false;
+    // Место, откуда слой открыли: туда он вернётся после ухода
+    #origin = undefined;
     isOpen = false;
 
-    constructor(options = {
-        width: String(),
-        height: String(),
-        title: String(),
-        closeOutSideClick: false
-    }) {
-
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Dialogs');
-        this.#dialog.id = this.#id
+    constructor(
+        options = {
+            width: String(),
+            height: String(),
+            title: String(),
+            closeOutSideClick: false,
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Dialogs");
+        this.#dialog.id = this.#id;
         this.#scrim.setAttribute("aria-hidden", "true");
         // Занавес встаёт в body при открытии: у неоткрытого диалога в документе не остаётся
         // лишнего узла (TextEditor и витрина создают диалоги заранее — каждый оставлял занавес)
@@ -35,7 +38,7 @@ class Dialog {
         this.#a11y = new OverlayA11y(this.#dialog, {
             role: "dialog",
             label: optionOr(options.title, I18n.t("feedback.dialog")),
-            onEscape: () => this.close()
+            onEscape: () => this.close(),
         });
 
         this.#dialog.style.width = options.width === undefined ? "max-content" : options.width;
@@ -43,59 +46,76 @@ class Dialog {
 
         if (options.closeOutSideClick) {
             this.#dialog.addEventListener("animationend", (evt) => {
-                if (evt.animationName === "fade-in" && !this.#outside_click_bound) {
-                    this.#outside_click_bound = true;
-                    window.addEventListener('click', this.#closeOutsideEvent)
+                if (evt.animationName === "fade-in" && !this.#outsideClickBound) {
+                    this.#outsideClickBound = true;
+                    window.addEventListener("click", this.#closeOutsideEvent);
                 }
-            })
+            });
         }
+        // Слой возвращается на место после ухода и снимает занавес из документа
+        this.#dialog.addEventListener("animationend", this.#returnHome);
         //ADDS
-        this.#dialog.appendChild(this.#body)
+        this.#dialog.appendChild(this.#body);
     }
 
     #closeOutsideEvent = (event) => {
         if (!this.#dialog.contains(event.target)) {
-            if (this.#outside_click_bound) {
-                this.#outside_click_bound = false;
-                window.removeEventListener("click", this.#closeOutsideEvent)
+            if (this.#outsideClickBound) {
+                this.#outsideClickBound = false;
+                window.removeEventListener("click", this.#closeOutsideEvent);
             }
-            this.close()
+            this.close();
         }
-    }
+    };
+
+    /**
+     * Уход доигран: диалог возвращается туда, откуда открывался, а занавес убирается из
+     * документа — закрытому слою в body делать нечего (карточку, из которой его открыли,
+     * могли уже снести), при следующем открытии занавес встанет заново.
+     * Слушатель висит постоянно: вход (`fade-in`) и чужие кадры внутри диалога пропускаем.
+     */
+    #returnHome = (event) => {
+        if (event.target !== this.#dialog || event.animationName !== "fade-out" || this.isOpen) return;
+        this.#scrim.remove();
+        const origin = this.#origin;
+        if (origin === undefined || origin === null || origin === document.body) return;
+        if (origin.isConnected === false) return;
+        origin.appendChild(this.#dialog);
+    };
 
     #resizeEvent = () => {
         if (!document.contains(this.#dialog)) return;
-        this.#setCenter(this.#dialog, window)
-    }
+        this.#setCenter(this.#dialog, window);
+    };
 
     addToHeader(...components) {
-        this.#dialog.insertBefore(this.#header, this.#body)
-        for (let component of components) this.#header.appendChild(component.set());
+        this.#dialog.insertBefore(this.#header, this.#body);
+        for (const component of components) this.#header.appendChild(component.set());
     }
 
     addToBody(...components) {
-        for (let component of components) this.#body.appendChild(component.set());
+        for (const component of components) this.#body.appendChild(component.set());
     }
 
     addToFooter(...components) {
-        this.#dialog.appendChild(this.#footer)
-        for (let component of components) this.#footer.appendChild(component.set());
+        this.#dialog.appendChild(this.#footer);
+        for (const component of components) this.#footer.appendChild(component.set());
     }
 
     removeFromHeader(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+        for (const component of components) new Animation(component.set()).fadeOutAndRemove();
     }
 
     removeFromBody(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+        for (const component of components) new Animation(component.set()).fadeOutAndRemove();
     }
 
     removeFromFooter(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+        for (const component of components) new Animation(component.set()).fadeOutAndRemove();
     }
 
     open() {
-        this.isOpen = true
+        this.isOpen = true;
         // if (this.#width === "-webkit-fill-available" && this.#height === "-webkit-fill-available") {
         //     dialog.style.top = "0"
         //     dialog.style.left = "0"
@@ -106,38 +126,43 @@ class Dialog {
         //     this.#setCenter(dialog, window)
         // }
 
-        window.addEventListener("resize", this.#resizeEvent)
+        window.addEventListener("resize", this.#resizeEvent);
+        // Слой встаёт в body — рядом с занавесом и шапкой окна: у обоих `backdrop-filter` и
+        // `z-index`, а внутри карточки Chromium собирает такой слой отдельной поверхностью и
+        // рисует её под слоями из body — занавес закрывал диалог целиком
+        this.#origin = this.#dialog.parentElement;
+        if (this.#dialog.parentElement !== document.body) document.body.appendChild(this.#dialog);
         // Занавес нужен только открытому слою
         if (document.body.contains(this.#scrim) === false) document.body.appendChild(this.#scrim);
         new Animation(this.#dialog).fadeIn();
         new Animation(this.#scrim).fadeIn();
-        this.#setCenter(this.#dialog, window)
-        this.#a11y.open()
+        this.#setCenter(this.#dialog, window);
+        this.#a11y.open();
     }
 
     /** Доступное имя диалога (aria-label), если заголовок в разметке не годится.
      *  Пустое значение имя не затирает — иначе слой остался бы безымянным */
     setAriaLabel(text = String()) {
         if (typeof text !== "string" || text.trim() === "") return;
-        this.#a11y.setLabel(text)
+        this.#a11y.setLabel(text);
     }
 
     openAndClose() {
         if (!this.isOpen) {
-            this.open()
+            this.open();
         } else {
-            this.close()
+            this.close();
         }
     }
 
     close() {
-        if (this.#outside_click_bound) {
-            this.#outside_click_bound = false;
-            window.removeEventListener("click", this.#closeOutsideEvent)
+        if (this.#outsideClickBound) {
+            this.#outsideClickBound = false;
+            window.removeEventListener("click", this.#closeOutsideEvent);
         }
-        window.removeEventListener("resize", this.#resizeEvent)
-        this.isOpen = false
-        this.#a11y.close()
+        window.removeEventListener("resize", this.#resizeEvent);
+        this.isOpen = false;
+        this.#a11y.close();
         new Animation(this.#dialog).fadeOut();
         new Animation(this.#scrim).fadeOut();
     }
@@ -155,20 +180,20 @@ class Dialog {
 
     #setCenter(element, window) {
         // Ширина
-        const width = parseInt(window.getComputedStyle(element).width) + "px"
+        const width = parseInt(window.getComputedStyle(element).width) + "px";
         if (element.style.width === "-webkit-fill-available") {
-            element.style.left = "0"
+            element.style.left = "0";
         } else {
             element.style.left = `calc(100% / 2 - ${width} / 2)`;
         }
         // Высота
-        const height = parseInt(window.getComputedStyle(element).height) + "px"
+        const height = parseInt(window.getComputedStyle(element).height) + "px";
         if (element.style.height === "-webkit-fill-available") {
-            element.style.top = "0"
+            element.style.top = "0";
         } else {
             element.style.top = `calc(100% / 2 - ${height} / 2)`;
         }
     }
 }
 
-exports.Dialog = Dialog
+exports.Dialog = Dialog;

package/framework/components/chui_modal/styles.css

@@ -59,7 +59,8 @@ dialog_header .chui_button:not(:disabled):hover {
 }
 
 dialog_header .chui_button:not(:disabled):active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
     border: none;
 }
 
@@ -91,4 +92,4 @@ dialog_footer {
     margin-top: 12px;
     padding-top: 12px;
     border-top: 1px solid var(--border_color);
-}
+}