chuijs 4.0.3 → 4.0.4

package/framework/components/chui_card_scroll/card_scroll.js

@@ -0,0 +1,169 @@
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { reducedMotion } = require("../../modules/chui_animations/motion");
+
+/** Зазор между карточками по умолчанию: тот же шаг, что у отступов компонентов */
+const DEFAULT_GAP = 12;
+
+/**
+ * Лента карточек — горизонтальный список, который прокручивается колесом, стрелками на краях
+ * и клавиатурой.
+ *
+ * От `SlideShow` отличается тем, что не показывает слайды по одному: карточки идут подряд,
+ * лента листается свободно, а прилипание к началу карточки лишь помогает остановиться ровно.
+ * От `List` — направлением: строки идут вбок и не переносятся.
+ *
+ * Опции: `id`, `gap`, `snap` (прилипание к карточке, по умолчанию включено), `arrows`
+ * (стрелки на краях, по умолчанию включены), `label` (имя списка для скринридера),
+ * `items` (карточки).
+ *
+ * Методы: `addCard(component)`, `getCards()`, `scrollToCard(index)`, `scrollToEnd()`,
+ * `destroy()`, `set()`. В ленту принимаются компоненты фреймворка (у них есть `set()`)
+ * и готовые узлы.
+ */
+class CardScroll {
+    #root = document.createElement("chui_card_scroll");
+    #track = document.createElement("card_scroll_track");
+    #start = undefined;
+    #end = undefined;
+    #gap = DEFAULT_GAP;
+    #observer = undefined;
+
+    constructor(options = {}) {
+        setStyles(__dirname + "/styles.css", "chUiJS_CardScroll");
+        if (options.id !== undefined) this.#root.id = options.id;
+        const gap = Number(options.gap);
+        this.#gap = Number.isFinite(gap) && gap >= 0 ? gap : DEFAULT_GAP;
+        this.#track.style.gap = `${this.#gap}px`;
+        // Список, а не просто лента: скринридер объявляет число карточек, а каждая —
+        // свой `listitem` (роль ставит `addCard`)
+        this.#track.setAttribute("role", "list");
+        this.#track.setAttribute("aria-label", optionOr(options.label, I18n.t("feedback.cardScroll")));
+        // Лента сама принимает фокус: стрелки клавиатуры прокручивают её, не уводя фокус в карточки
+        this.#track.setAttribute("tabindex", "0");
+        this.#track.addEventListener("keydown", (event) => this.#onKeydown(event));
+        // Вертикальное колесо прокручивает ленту вбок — так её листают мышью с колесом
+        this.#track.addEventListener("wheel", (event) => this.#onWheel(event), { passive: false });
+        this.#track.addEventListener("scroll", () => this.#syncArrows());
+        if (options.snap === false) this.#root.dataset.snap = "false";
+        if (options.arrows !== false) {
+            this.#start = this.#makeArrow(Icons.NAVIGATION.CHEVRON_LEFT, I18n.t("feedback.cardScrollPrev"), -1);
+            this.#end = this.#makeArrow(Icons.NAVIGATION.CHEVRON_RIGHT, I18n.t("feedback.cardScrollNext"), 1);
+            this.#root.append(this.#start, this.#track, this.#end);
+        } else {
+            this.#root.appendChild(this.#track);
+        }
+        if (Array.isArray(options.items)) for (const item of options.items) this.addCard(item);
+        // Стрелки появляются только там, где лента действительно уходит за край: следим
+        // за размером (карточку могли добавить после сборки) и за прокруткой
+        if (typeof ResizeObserver === "function") {
+            this.#observer = new ResizeObserver(() => this.#syncArrows());
+            this.#observer.observe(this.#track);
+        }
+        this.#syncArrows();
+    }
+
+    /** Карточка ленты: компонент фреймворка (у него есть `set()`) или готовый узел */
+    addCard(component = undefined) {
+        if (component === undefined || component === null) return this;
+        const item = document.createElement("card_scroll_item");
+        item.setAttribute("role", "listitem");
+        item.appendChild(typeof component.set === "function" ? component.set() : component);
+        this.#track.appendChild(item);
+        this.#syncArrows();
+        return this;
+    }
+
+    getCards() {
+        return [...this.#track.children];
+    }
+
+    /** Переход к карточке по номеру: место берут у самой карточки, а не считают по ширине */
+    scrollToCard(index = Number()) {
+        const cards = this.getCards();
+        const card = cards[Number(index)];
+        if (card === undefined) return this;
+        this.#scrollTo(card.offsetLeft - this.#track.offsetLeft);
+        return this;
+    }
+
+    scrollToEnd() {
+        this.#scrollTo(this.#track.scrollWidth);
+        return this;
+    }
+
+    set() {
+        return this.#root;
+    }
+    destroy() {
+        if (this.#observer !== undefined) this.#observer.disconnect();
+        this.#observer = undefined;
+        this.#root.remove();
+    }
+
+    // === ВНУТРЕННЕЕ ===
+    #makeArrow(icon = String(), label = String(), direction = 1) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "card_scroll_arrow";
+        // Сторона видна и стилям, и замерам: край ленты — то, что здесь важно
+        button.dataset.side = direction < 0 ? "start" : "end";
+        button.innerHTML = new Icon(icon, "20px").getHTML();
+        button.setAttribute("aria-label", label);
+        button.title = label;
+        button.addEventListener("click", () => this.#step(direction));
+        return button;
+    }
+    #scrollTo(left = Number()) {
+        // При уменьшенном движении лента перескакивает без плавности
+        this.#track.scrollTo({ left: left, behavior: reducedMotion() ? "auto" : "smooth" });
+    }
+    /** Шаг — одна карточка с зазором: он берётся у самой карточки, а не из настроек */
+    #step(direction = 1) {
+        const card = this.#track.querySelector("card_scroll_item");
+        const step = card === null ? this.#track.clientWidth : card.getBoundingClientRect().width + this.#gap;
+        this.#scrollTo(this.#track.scrollLeft + step * direction);
+    }
+    #onKeydown(event = {}) {
+        if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            this.#step(event.key === "ArrowRight" ? 1 : -1);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            this.#scrollTo(0);
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            this.scrollToEnd();
+        }
+    }
+    /**
+     * Вертикальное колесо двигает ленту вбок. Когда лента упирается, событие отдаётся странице:
+     * иначе список «съел» бы прокрутку, и до содержимого ниже было бы не добраться.
+     */
+    #onWheel(event = {}) {
+        const track = this.#track;
+        if (event.deltaY === 0) return;
+        const max = track.scrollWidth - track.clientWidth;
+        if (max <= 0) return;
+        if ((track.scrollLeft <= 0 && event.deltaY < 0) || (track.scrollLeft >= max && event.deltaY > 0)) return;
+        event.preventDefault();
+        track.scrollLeft += event.deltaY;
+    }
+    /** Стрелка видна только там, где за краем есть карточки */
+    #syncArrows() {
+        if (this.#start === undefined || this.#end === undefined) return;
+        const track = this.#track;
+        const max = track.scrollWidth - track.clientWidth;
+        // Отступ ленты (он держит тень карточек) сдвигает нулевую позицию: без него
+        // лента с прилипанием стоит на нём, и стрелка «назад» светилась бы на старте
+        const offset = parseFloat(getComputedStyle(track).paddingLeft) || 0;
+        this.#start.hidden = track.scrollLeft <= offset + 1;
+        this.#end.hidden = track.scrollLeft >= max - 1;
+    }
+}
+
+exports.CardScroll = CardScroll;

package/framework/components/chui_card_scroll/styles.css

@@ -0,0 +1,86 @@
+/* Лента карточек: горизонтальный список со стрелками на краях.
+   Своей палитры у компонента нет: карточки приносят её сами, полоса прокрутки — общая
+   (`chui_scrollbar`). */
+
+chui_card_scroll {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    /* Компонент сам задаёт ширину: в flex-колонке с `align-items: flex-start` лента
+       без ширины получила бы `max-content` и вылезла за содержимое */
+    width: -webkit-fill-available;
+    box-sizing: border-box;
+}
+
+card_scroll_track {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+    min-width: 0;
+    box-sizing: border-box;
+    /* Лента идёт вбок: по вертикали содержимое не переносится и не обрезается тенью карточек */
+    overflow-x: auto;
+    overflow-y: hidden;
+    /* Прилипание к началу карточки помогает остановиться ровно, но не заставляет ленту
+       прыгать через карточку: `proximity`, а не `mandatory` */
+    scroll-snap-type: x proximity;
+    /* Отступ под тень карточек: у обрезанного слоя тень срезалась бы по краю */
+    padding: 4px;
+    margin: -4px;
+}
+
+chui_card_scroll[data-snap="false"] card_scroll_track {
+    scroll-snap-type: none;
+}
+
+/* Лента сама принимает фокус: стрелки клавиатуры прокручивают её, а не уводят фокус в карточку */
+card_scroll_track:focus-visible {
+    outline: var(--focus_outline);
+    outline-offset: var(--focus_outline_offset);
+    border-radius: var(--radius_sm);
+}
+
+card_scroll_item {
+    flex: none;
+    display: flex;
+    scroll-snap-align: start;
+}
+
+/* Стрелка на краю ленты — круглая кнопка со значком: имя ей даёт словарь, значка скринридер
+   не читает (`Icon` помечает его `aria-hidden`) */
+.card_scroll_arrow {
+    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: 1px solid var(--border_color);
+    border-radius: var(--radius_circle);
+    background: var(--element_background_2);
+    color: var(--text_color);
+    box-shadow: var(--box_shadow_main);
+}
+
+.card_scroll_arrow:hover {
+    background: var(--element_background_hover);
+}
+
+/* Нажатие — акцент, как у прочих кнопок тонкой настройки */
+.card_scroll_arrow:active {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.card_scroll_arrow chui_icon {
+    color: inherit;
+}
+
+/* За краем карточек нет — стрелки нет: `hidden` убирает её и из обхода клавиатурой */
+.card_scroll_arrow[hidden] {
+    display: none;
+}

package/framework/components/chui_chat/chat.js

@@ -76,23 +76,23 @@ class Chat {
     #typing = document.createElement("chat_typing");
     #composer = document.createElement("chat_composer");
     #input = document.createElement("textarea");
-    #send_button = document.createElement("button");
+    #sendButton = document.createElement("button");
     #messages = [];
     #own = undefined;
     #placeholder = undefined;
-    #send_text = undefined;
-    #send_label = undefined;
-    #date_separators = true;
-    #composer_visible = true;
+    #sendText = undefined;
+    #sendLabel = undefined;
+    #dateSeparators = true;
+    #composerVisible = true;
     #disabled = false;
-    #typing_name = undefined;
-    #send_listeners = [];
-    #on_send = undefined;
-    #on_message_click = undefined;
+    #typingName = undefined;
+    #sendListeners = [];
+    #onSend = undefined;
+    #onMessageClick = undefined;
     // Текущий день и текущая группа — по ним решается, дописывать пузырь или начать новую;
     // группа — это {node, bubbles, avatar, author, day}
-    #last_date = undefined;
-    #last_group = undefined;
+    #lastDate = undefined;
+    #lastGroup = undefined;
 
     constructor(
         options = {
@@ -118,12 +118,12 @@ class Chat {
         this.#root.id = this.#id;
         this.#own = options.own;
         this.#placeholder = options.placeholder;
-        this.#send_text = options.sendText;
-        this.#send_label = options.sendLabel;
-        this.#on_send = options.onSend;
-        this.#on_message_click = options.onMessageClick;
-        this.#date_separators = options.dateSeparators !== false;
-        this.#composer_visible = options.composer !== false;
+        this.#sendText = options.sendText;
+        this.#sendLabel = options.sendLabel;
+        this.#onSend = options.onSend;
+        this.#onMessageClick = options.onMessageClick;
+        this.#dateSeparators = options.dateSeparators !== false;
+        this.#composerVisible = options.composer !== false;
         if (options.width !== undefined) this.#root.style.width = options.width;
         // Высота журнала: своя переменная, чтобы поле ввода и шапка оставались на месте
         this.#log.style.setProperty("--chat_height", options.height === undefined ? "320px" : options.height);
@@ -145,17 +145,17 @@ class Chat {
         this.#input.placeholder =
             this.#placeholder === undefined ? I18n.t("feedback.chatPlaceholder") : this.#placeholder;
         this.#input.setAttribute("aria-label", I18n.t("feedback.chatComposer"));
-        this.#send_button.type = "button";
-        this.#send_button.className = "chat_send";
-        this.#send_button.disabled = true;
-        this.#send_button.setAttribute("aria-label", this.#sendLabelText());
-        this.#send_button.setAttribute("title", this.#sendTextText());
-        this.#send_button.innerHTML = new Icon(Icons.CONTENT.SEND, "16px").getHTML();
+        this.#sendButton.type = "button";
+        this.#sendButton.className = "chat_send";
+        this.#sendButton.disabled = true;
+        this.#sendButton.setAttribute("aria-label", this.#sendLabelText());
+        this.#sendButton.setAttribute("title", this.#sendTextText());
+        this.#sendButton.innerHTML = new Icon(Icons.CONTENT.SEND, "16px").getHTML();
 
         this.#header.appendChild(this.#title);
         this.#header.appendChild(this.#subtitle);
         this.#composer.appendChild(this.#input);
-        this.#composer.appendChild(this.#send_button);
+        this.#composer.appendChild(this.#sendButton);
         this.#root.appendChild(this.#header);
         this.#root.appendChild(this.#log);
         this.#root.appendChild(this.#typing);
@@ -164,12 +164,12 @@ class Chat {
         this.#subtitle.hidden = true;
         if (optionOr(options.title, undefined) !== undefined) this.setTitle(options.title);
         if (optionOr(options.subtitle, undefined) !== undefined) this.setSubtitle(options.subtitle);
-        if (!this.#composer_visible) this.#composer.hidden = true;
+        if (!this.#composerVisible) this.#composer.hidden = true;
         if (this.#disabled) this.setDisabled(true);
 
         this.#input.addEventListener("input", () => this.#syncSendState());
         this.#input.addEventListener("keydown", this.#onInputKeyDown);
-        this.#send_button.addEventListener("click", () => this.send());
+        this.#sendButton.addEventListener("click", () => this.send());
         this.#log.addEventListener("click", this.#onLogClick);
         this.setMessages(options.messages === undefined ? [] : options.messages);
     }
@@ -193,7 +193,7 @@ class Chat {
         return this.#messages.map((message) => Object.assign({}, message));
     }
     isTyping() {
-        return this.#typing_name !== undefined;
+        return this.#typingName !== undefined;
     }
     isDisabled() {
         return this.#disabled;
@@ -238,7 +238,7 @@ class Chat {
         return this;
     }
     addSendListener(listener = () => {}) {
-        this.#send_listeners.push(listener);
+        this.#sendListeners.push(listener);
         return this;
     }
     set() {
@@ -249,8 +249,8 @@ class Chat {
     /** Полная замена списка: журнал собирается заново, группы схлопываются по автору и дню */
     setMessages(messages = []) {
         this.#messages = [];
-        this.#last_date = undefined;
-        this.#last_group = undefined;
+        this.#lastDate = undefined;
+        this.#lastGroup = undefined;
         this.#log.innerHTML = "";
         for (const message of messages) this.#appendMessage(Object.assign({}, message), false);
         this.scrollToBottom(false);
@@ -275,18 +275,40 @@ class Chat {
     }
     clear() {
         this.#messages = [];
-        this.#last_date = undefined;
-        this.#last_group = undefined;
+        this.#lastDate = undefined;
+        this.#lastGroup = undefined;
         this.#log.innerHTML = "";
         return this;
     }
     /** «Иван печатает…»: имя автора; `undefined` убирает строку */
     setTyping(name = undefined) {
-        this.#typing_name = name;
-        this.#typing.hidden = name === undefined;
+        this.#typingName = name;
         this.#typing.innerText = name === undefined ? "" : I18n.t("feedback.chatTyping", { name: name });
+        this.#showTyping(name !== undefined);
         return this;
     }
+
+    /**
+     * Строка «печатает» появляется и уходит движением: `hidden` возвращается по концу кадра,
+     * поэтому строка не пропадает рывком. Открытие за время ухода отменяет снятие.
+     */
+    #showTyping(visible) {
+        if (visible === true) {
+            this.#typing.classList.remove("chat_typing_leaving");
+            this.#typing.hidden = false;
+            return;
+        }
+        if (this.#typing.hidden === true) return;
+        this.#typing.classList.add("chat_typing_leaving");
+        const done = (event) => {
+            if (event.target !== this.#typing) return;
+            this.#typing.removeEventListener("animationend", done);
+            if (this.#typing.classList.contains("chat_typing_leaving") === false) return;
+            this.#typing.classList.remove("chat_typing_leaving");
+            this.#typing.hidden = true;
+        };
+        this.#typing.addEventListener("animationend", done);
+    }
     scrollToBottom(smooth = true) {
         // Плавная прокрутка — движение; при `prefers-reduced-motion` она идёт сразу
         const behavior = smooth && this.#reducedMotion() === false ? "smooth" : "auto";
@@ -313,18 +335,18 @@ class Chat {
         this.#input.value = "";
         this.#syncSendState();
         const added = this.#appendMessage(message, true);
-        if (this.#on_send !== undefined) this.#on_send(text, added);
-        for (const listener of [...this.#send_listeners]) listener(text, added);
+        if (this.#onSend !== undefined) this.#onSend(text, added);
+        for (const listener of [...this.#sendListeners]) listener(text, added);
         return this;
     }
 
     // === ВНУТРЕННЕЕ ===
     #sendTextText() {
-        return this.#send_text === undefined ? I18n.t("feedback.chatSend") : this.#send_text;
+        return this.#sendText === undefined ? I18n.t("feedback.chatSend") : this.#sendText;
     }
     /** Имя кнопки отправки: своё (`sendLabel`), иначе `sendText`, иначе словарь */
     #sendLabelText() {
-        if (this.#send_label !== undefined) return this.#send_label;
+        if (this.#sendLabel !== undefined) return this.#sendLabel;
         return this.#sendTextText();
     }
     #reducedMotion() {
@@ -333,7 +355,7 @@ class Chat {
         return query.matches === true;
     }
     #syncSendState() {
-        this.#send_button.disabled = this.#disabled || this.#input.value.trim() === "";
+        this.#sendButton.disabled = this.#disabled || this.#input.value.trim() === "";
     }
     /**
      * Добавить сообщение в журнал. Если автор и день совпадают с прошлой группой, пузырь
@@ -361,27 +383,27 @@ class Chat {
     }
     /** Разделитель дня: между сообщениями разных дней и в начале журнала */
     #insertDateSeparator(date) {
-        if (date === undefined || this.#date_separators === false) return;
+        if (date === undefined || this.#dateSeparators === false) return;
         const key = this.#dayKey(date);
-        if (key === this.#last_date) return;
-        this.#last_date = key;
+        if (key === this.#lastDate) return;
+        this.#lastDate = key;
         const separator = document.createElement("chat_date");
         separator.dataset.day = key;
         const label = document.createElement("chat_date_label");
         label.innerText = this.#dayLabel(date);
         separator.appendChild(label);
         this.#log.appendChild(separator);
-        this.#last_group = undefined;
+        this.#lastGroup = undefined;
     }
     /** Группа для сообщения: та же, если автор и день совпадают, иначе новая */
     #groupFor(message) {
         const author = this.#authorOf(message);
         if (
-            this.#last_group !== undefined &&
-            this.#last_group.author === author &&
-            this.#last_group.day === this.#last_date
+            this.#lastGroup !== undefined &&
+            this.#lastGroup.author === author &&
+            this.#lastGroup.day === this.#lastDate
         ) {
-            return this.#last_group;
+            return this.#lastGroup;
         }
         const node = document.createElement("chat_group");
         node.dataset.own = message.own === true ? "true" : "false";
@@ -399,8 +421,8 @@ class Chat {
             node.prepend(avatar.set());
         }
         this.#log.appendChild(node);
-        this.#last_group = { node: node, bubbles: bubbles, avatar: avatar, author: author, day: this.#last_date };
-        return this.#last_group;
+        this.#lastGroup = { node: node, bubbles: bubbles, avatar: avatar, author: author, day: this.#lastDate };
+        return this.#lastGroup;
     }
     #bubble(message, first) {
         const bubble = document.createElement("chat_bubble");
@@ -495,11 +517,11 @@ class Chat {
         this.send();
     };
     #onLogClick = (event) => {
-        if (this.#on_message_click === undefined) return;
+        if (this.#onMessageClick === undefined) return;
         const bubble = event.target instanceof Element ? event.target.closest("chat_bubble") : null;
         if (bubble === null) return;
         const message = this.#messages.find((entry) => entry.id === bubble.dataset.id);
-        if (message !== undefined) this.#on_message_click(message);
+        if (message !== undefined) this.#onMessageClick(message);
     };
 }
 

package/framework/components/chui_chat/styles.css

@@ -4,9 +4,9 @@ chui_chat {
     flex-direction: column;
     height: max-content;
     width: 360px;
-    margin: var(--margin);
+    margin: var(--block_margin);
     overflow: hidden;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     border: 1px solid var(--border_color);
     font-size: var(--font_default_size);
@@ -17,7 +17,7 @@ chat_header {
     display: flex;
     flex-direction: column;
     gap: 2px;
-    padding: var(--control_padding) var(--main_padding);
+    padding: var(--control_padding) var(--block_padding);
     border-bottom: 1px solid var(--border_color);
 }
 
@@ -100,10 +100,21 @@ chat_bubble {
     flex-direction: column;
     gap: 2px;
     padding: 8px 10px;
-    border-radius: var(--border_radius);
+    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);
+}
+
+/* Строка «печатает…»: появляется и уходит движением, `hidden` возвращается по концу кадра */
+chat_typing {
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+.chat_typing_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
 }
 
 /* Свои сообщения — акцентом и справа */
@@ -149,7 +160,7 @@ chat_meta {
 }
 
 chat_bubble[data-own="true"] chat_meta {
-    color: var(--text_color_hover_disable);
+    color: var(--text_color_hover_disabled);
 }
 
 chat_status {
@@ -169,7 +180,7 @@ chat_status[data-status="failed"] {
 
 /* Строка «печатает…» */
 chat_typing {
-    padding: 0 var(--main_padding) var(--control_padding);
+    padding: 0 var(--block_padding) var(--control_padding);
     color: var(--text_color_disabled);
     font-size: var(--font_labels_size);
 }
@@ -220,7 +231,7 @@ chat_composer {
 }
 
 .chat_send:hover {
-    background: var(--blue_prime_background_trans);
+    background: var(--blue_prime_background_tint_strong);
 }
 
 .chat_send:disabled {