mayatnikovandClaude Opus 5
547637067d
Обе ветки правили строку ввода чата ради одной и той же полосы помощника форм над клавиатурой iOS. ADR-064 из main считал триггером элемент form и вынес поле наружу; на устройстве не помогло — полоса бывает у input и textarea всегда. ADR-069 отсюда заменяет поле редактируемым блоком, это и есть «следующий шаг» из следствий ADR-064. Что взято: - строка ввода — редактируемый блок (ADR-069/071), контейнер div с role="form" и кнопка type="button" (ADR-064); - лента — поток со сторонами, feed-list (ADR-065), не сетка; - brief.md: safe-area из ADR-075 и стороны из ADR-065 вместе; - app.css: правило 44 px для блока ввода; .author:empty из медиазапроса убран — main вынес его на верхний уровень, сетки больше нет. Убран слушатель submit: контейнер стал div, событие не случается. ADR-064 и ADR-069 связаны ссылками в обе стороны. sw.js VERSION → v6: клиент отличается от обеих версий, где стоял v5. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QR8uS3zGkybzWRW4GEY1oz
991 lines
43 KiB
JavaScript
991 lines
43 KiB
JavaScript
// Экран чата — docs/ui.md, «Чат»; вид — docs/identity/screens.html.
|
||
//
|
||
// Данные и действия идут только через sync.js: экран не пишет в базу
|
||
// и не ходит в сеть сам.
|
||
|
||
import * as sync from "../sync.js";
|
||
import { DESKTOP, clear, el, wide } from "./dom.js";
|
||
|
||
// Предел текста и порог счётчика — docs/ui.md, «Чат».
|
||
const LIMIT = 4000;
|
||
const COUNTER_AT = 3500;
|
||
|
||
// Разделители дат: на десктопе — полная дата, на мобильном — короткая,
|
||
// как в эталоне. Время — ЧЧ:ММ в локальной зоне.
|
||
const DAY_LONG = new Intl.DateTimeFormat("ru-RU", { weekday: "long", day: "numeric", month: "long" });
|
||
const DAY_SHORT = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "short" });
|
||
const TIME = new Intl.DateTimeFormat("ru-RU", { hour: "2-digit", minute: "2-digit" });
|
||
|
||
// Тексты нерасшифрованного — docs/ui.md, «Чат». Строк там две, а причин
|
||
// в записи три (docs/storage.md): «нет ключа комнаты» — это unknown_key
|
||
// в комнате, всё остальное сводится к «ключ изменился».
|
||
const NO_ROOM_KEY = "не удалось расшифровать: нет ключа комнаты";
|
||
const KEY_CHANGED = "не удалось расшифровать: ключ изменился";
|
||
|
||
// Сколько символов имени комнаты попадает в подсказку ввода. Строка ввода
|
||
// растёт под placeholder так же, как под текст, и имя в 64 символа (ADR-018)
|
||
// занимало бы три строки. Имя укорачивается многоточием, как в шапке, только
|
||
// разметкой: text-overflow к placeholder не применяется. Двенадцать —
|
||
// столько, чтобы «сообщение в #имя…» умещалось в одну строку на самом
|
||
// узком из целевых экранов (360 px).
|
||
const NAME_IN_HINT = 12;
|
||
|
||
// Насколько далеко от низа ленты человек ещё считается «внизу»: пришедшее
|
||
// сообщение подматывает ленту только тогда, когда он и так смотрит конец.
|
||
const NEAR_BOTTOM = 80;
|
||
|
||
// Насколько близко к верхнему краю берётся следующая страница. Запас
|
||
// в экран: страница успевает приехать до того, как человек упрётся
|
||
// в край (ADR-053).
|
||
const NEAR_TOP = 200;
|
||
|
||
// renderChat рисует чат в root и отдаёт отписку.
|
||
export function renderChat(root, ctx, chatId) {
|
||
const view = {
|
||
ctx,
|
||
chatId,
|
||
me: ctx.me.nick,
|
||
peer: sync.peerOf(chatId),
|
||
roomId: sync.roomIdOf(chatId),
|
||
limit: ctx.config?.maxMessageChars ?? LIMIT,
|
||
alive: true,
|
||
// Каким значением открыт редактируемый блок строки ввода:
|
||
// "plaintext-only" или "true" (ADR-069). От него зависит, разбирает ли
|
||
// браузер вставку и перенос строки сам или это делаем мы.
|
||
edit: "true",
|
||
// Имя комнаты; до чтения записи чата вместо него идентификатор,
|
||
// как в db.blankChat.
|
||
name: sync.roomIdOf(chatId),
|
||
// Ключ собеседника изменился и ждёт подтверждения: ввод заблокирован
|
||
// (ADR-016).
|
||
blocked: false,
|
||
// Комнаты у нас больше нет: вышли сами, убрал владелец, комната
|
||
// удалена. Ввод заблокирован, лента остаётся (ADR-044).
|
||
gone: false,
|
||
// Лента: записи по возрастанию id и их разметка — строка и её
|
||
// разделители, id → {node, marks}.
|
||
items: [],
|
||
nodes: new Map(),
|
||
// Выше загруженного есть ещё сообщения: последняя страница пришла
|
||
// целой (ADR-053).
|
||
more: false,
|
||
// Страница уже едет: событий scroll приходит много подряд.
|
||
loading: false,
|
||
// Граница «новых» на момент открытия: было ли непрочитанное и докуда
|
||
// читали. Сама граница считается по всему загруженному — подгрузка
|
||
// вверх двигает её выше (ADR-053).
|
||
mark: { unread: false, bound: null },
|
||
// Граница «новых»: первый непрочитанный на момент открытия.
|
||
newId: null,
|
||
chain: Promise.resolve(),
|
||
};
|
||
|
||
root.append(head(view));
|
||
|
||
view.feed = el("div", "feed");
|
||
view.body = el("div", "feed-list");
|
||
view.body.setAttribute("aria-live", "polite");
|
||
view.feed.append(view.body);
|
||
// Прокрутка к верхнему краю берёт следующую страницу (ADR-053).
|
||
view.feed.addEventListener("scroll", () => {
|
||
if (view.feed.scrollTop <= NEAR_TOP) {
|
||
pull(view);
|
||
}
|
||
});
|
||
root.append(view.feed);
|
||
|
||
root.append(composer(view));
|
||
|
||
const offMessages = sync.on("messages", (detail) => {
|
||
if (detail.chatId === view.chatId) {
|
||
run(view, () => apply(view, detail));
|
||
}
|
||
});
|
||
const offNet = sync.on("net", () => paintBar(view));
|
||
// Доверие к ключу собеседника меняет полосу и ввод; имя комнаты приходит
|
||
// из GET /api/rooms и события room, иногда позже первой отрисовки.
|
||
const offPeers = sync.on("peers", (detail) => {
|
||
if (view.peer !== null && detail.nick === view.peer) {
|
||
run(view, () => checkPeer(view));
|
||
}
|
||
});
|
||
const offRooms = sync.on("rooms", (detail) => {
|
||
if (view.roomId !== null && detail.id === view.roomId) {
|
||
run(view, () => refreshRoom(view));
|
||
}
|
||
});
|
||
const media = matchMedia(DESKTOP);
|
||
const onMedia = () => paint(view, true);
|
||
media.addEventListener("change", onMedia);
|
||
|
||
run(view, () => load(view));
|
||
|
||
return () => {
|
||
view.alive = false;
|
||
offMessages();
|
||
offNet();
|
||
offPeers();
|
||
offRooms();
|
||
media.removeEventListener("change", onMedia);
|
||
};
|
||
}
|
||
|
||
// run выстраивает работу экрана в очередь: загрузка и приходящие события
|
||
// не должны перемешиваться.
|
||
function run(view, task) {
|
||
view.chain = view.chain.then(task).catch(() => {});
|
||
return view.chain;
|
||
}
|
||
|
||
// --- разметка -----------------------------------------------------------
|
||
|
||
// head — шапка: имя чата, по нажатию — участники комнаты или карточка
|
||
// контакта (docs/ui.md, «Чат»). «назад» слева нужен там, где виден один
|
||
// экран за раз; на десктопе его прячет CSS.
|
||
function head(view) {
|
||
const bar = el("div", "head");
|
||
const back = el("button", "back back--chat", "назад");
|
||
back.type = "button";
|
||
back.addEventListener("click", () => view.ctx.go("#/"));
|
||
view.title = el("button", "chat-title", titleText(view));
|
||
view.title.type = "button";
|
||
view.title.addEventListener("click", () => view.ctx.go(view.roomId !== null
|
||
? `#/room/${view.roomId}/members`
|
||
: `#/contact/${view.peer}`));
|
||
bar.append(back, view.title);
|
||
return bar;
|
||
}
|
||
|
||
function titleText(view) {
|
||
return view.roomId !== null ? `#${view.name}` : `@${view.peer}`;
|
||
}
|
||
|
||
// shortName — имя комнаты для подсказки ввода: длинное обрезается
|
||
// многоточием. Считается символами, а не единицами utf-16: имя ограничено
|
||
// символами (docs/protocol.md), и разрезать пару посередине незачем.
|
||
function shortName(name) {
|
||
const chars = Array.from(name);
|
||
return chars.length > NAME_IN_HINT ? `${chars.slice(0, NAME_IN_HINT).join("")}…` : name;
|
||
}
|
||
|
||
// refreshRoom обновляет имя комнаты в шапке и placeholder ввода — имя
|
||
// приходит от сервера и бывает известно позже первой отрисовки — и состояние
|
||
// членства: комната, из состава которой нас больше нет, гасит ввод
|
||
// и показывает полосу (ADR-044).
|
||
async function refreshRoom(view, known) {
|
||
if (view.roomId === null) {
|
||
return;
|
||
}
|
||
let record = known;
|
||
if (record === undefined) {
|
||
try {
|
||
record = await sync.chat(view.chatId);
|
||
} catch {
|
||
return;
|
||
}
|
||
}
|
||
if (!view.alive) {
|
||
return;
|
||
}
|
||
view.name = record?.title || view.roomId;
|
||
view.title.textContent = titleText(view);
|
||
hint(view, `сообщение в #${shortName(view.name)}`);
|
||
// Скрытая запись комнаты — это room_left или собственный выход:
|
||
// отправлять больше некуда, и сервер ответил бы not_member.
|
||
view.gone = record?.hidden === true;
|
||
allow(view, !view.gone);
|
||
paintBar(view);
|
||
}
|
||
|
||
// composer — полоса состояния и строка ввода: рамка 1 px ink, слева «>»
|
||
// цветом mark. Enter отправляет только на десктопе; на мобильном он делает
|
||
// перенос, а отправляет кнопка «>» справа (docs/ui.md, «Чат»).
|
||
//
|
||
// Строка сообщения — редактируемый блок, а не поле формы (ADR-069): над
|
||
// клавиатурой iOS рисует полосу помощника форм, и бывает она только
|
||
// у input и textarea. Со страницы её не убрать, а в чате она занимает место
|
||
// и ничего не делает: поле на экране одно, переходить стрелками некуда.
|
||
function composer(view) {
|
||
const form = el("div", "compose");
|
||
form.setAttribute("role", "form");
|
||
|
||
view.bar = el("p", "bar");
|
||
view.bar.hidden = true;
|
||
view.bar.setAttribute("aria-live", "polite");
|
||
|
||
const row = el("div", "input");
|
||
const prompt = el("span", "p", ">");
|
||
prompt.setAttribute("aria-hidden", "true");
|
||
|
||
view.field = el("div", "input__field input__field--text");
|
||
view.edit = editing(view.field);
|
||
// Поле ввода без input: экранному диктору о нём говорят роль и подпись,
|
||
// подпись же стоит подсказкой в пустом блоке (docs/ui.md, «Доступность»).
|
||
view.field.setAttribute("role", "textbox");
|
||
view.field.setAttribute("aria-multiline", "true");
|
||
hint(view, "сообщение");
|
||
// Клавиша Enter на мобильном переносит строку, а не отправляет: отправка
|
||
// там на кнопке «>» (docs/ui.md, «Чат»). Поэтому «enter», а не «send»:
|
||
// подпись клавиши обещает то, что клавиша делает.
|
||
view.field.enterKeyHint = "enter";
|
||
// Сообщение — обычная речь, а не ник и не пароль: заглавная в начале
|
||
// предложения и исправление опечаток тут к месту (в формах входа
|
||
// и «нового чата» они, наоборот, выключены).
|
||
view.field.autocapitalize = "sentences";
|
||
view.field.setAttribute("autocorrect", "on");
|
||
|
||
view.counter = el("span", "counter");
|
||
view.counter.hidden = true;
|
||
|
||
view.send = el("button", "input__send", ">");
|
||
view.send.type = "button";
|
||
view.send.addEventListener("click", () => submit(view));
|
||
|
||
row.append(prompt, view.field, view.counter, el("span", "enter", "enter — отправить"), view.send);
|
||
form.append(view.bar, row);
|
||
|
||
// Предел держится до вставки, а не после: обрезается приходящее,
|
||
// а набранное остаётся на месте (ADR-071).
|
||
view.field.addEventListener("beforeinput", (event) => cap(view, event));
|
||
view.field.addEventListener("input", (event) => {
|
||
if (event.isComposing) {
|
||
// Пока идёт композиция IME, содержимое не трогаем: правка оборвала
|
||
// бы её на полуслове, а подтверждённое не попало бы в блок вовсе.
|
||
// Подтверждённое разберёт compositionend (ADR-071).
|
||
return;
|
||
}
|
||
fit(view);
|
||
tail(view);
|
||
count(view);
|
||
});
|
||
view.field.addEventListener("compositionend", () => {
|
||
fit(view);
|
||
tail(view);
|
||
count(view);
|
||
});
|
||
view.field.addEventListener("keydown", (event) => {
|
||
if (event.key !== "Enter" || event.isComposing) {
|
||
return;
|
||
}
|
||
if (wide() && !event.shiftKey) {
|
||
event.preventDefault();
|
||
submit(view);
|
||
return;
|
||
}
|
||
if (view.edit !== "plaintext-only") {
|
||
// Блок без plaintext-only ставит на Enter <div> или <br>, а значение
|
||
// читается textContent: перенос вписываем сами (ADR-069).
|
||
event.preventDefault();
|
||
insert(view, "\n");
|
||
}
|
||
});
|
||
if (view.edit !== "plaintext-only") {
|
||
// plaintext-only приносит из буфера и мыши только текст сам. Без него
|
||
// в блок приезжает чужая разметка, поэтому вставка и перенос — наши.
|
||
view.field.addEventListener("paste", (event) => {
|
||
event.preventDefault();
|
||
insert(view, event.clipboardData?.getData("text/plain") ?? "");
|
||
});
|
||
view.field.addEventListener("drop", (event) => {
|
||
event.preventDefault();
|
||
insert(view, event.dataTransfer?.getData("text/plain") ?? "");
|
||
});
|
||
// Перетаскивание изнутри блока браузер сделал бы переносом: вписал бы
|
||
// текст на новом месте и убрал со старого. Вставку мы делаем сами,
|
||
// отменяя действие по умолчанию, — уносить исходное браузеру нечем,
|
||
// и перенос молча оборачивался бы удвоением. Объявляем копирование:
|
||
// тогда это честная копия (ADR-071).
|
||
view.field.addEventListener("dragstart", (event) => {
|
||
if (event.dataTransfer !== null) {
|
||
event.dataTransfer.effectAllowed = "copy";
|
||
}
|
||
});
|
||
}
|
||
return form;
|
||
}
|
||
|
||
// editing включает редактирование блока и отдаёт значение, которое
|
||
// применилось. Нужен plaintext-only: в нём браузер кладёт в блок только
|
||
// текст, чем бы ни был буфер обмена, и разметке взяться неоткуда.
|
||
//
|
||
// Знают его не все браузеры, и незнакомое значение атрибута делает блок
|
||
// нередактируемым вовсе — то есть строка ввода перестала бы работать молча.
|
||
// Поэтому оно не назначается, а проверяется чтением: не применилось —
|
||
// остаётся "true", а вставку, перетаскивание и перенос строки разбирает
|
||
// composer (ADR-069).
|
||
function editing(field) {
|
||
try {
|
||
field.contentEditable = "plaintext-only";
|
||
} catch {
|
||
// Браузер, которому это значение незнакомо, бросает SyntaxError.
|
||
}
|
||
if (field.contentEditable === "plaintext-only") {
|
||
return "plaintext-only";
|
||
}
|
||
field.contentEditable = "true";
|
||
return "true";
|
||
}
|
||
|
||
// hint — подсказка в пустой строке ввода (docs/ui.md, «Чат»). placeholder
|
||
// у редактируемого блока не бывает: текст кладётся атрибутом, а рисует его
|
||
// правило CSS через :empty::before. Тот же текст — подпись для экранного
|
||
// диктора: другой у строки ввода нет.
|
||
function hint(view, text) {
|
||
view.field.dataset.hint = text;
|
||
view.field.setAttribute("aria-label", text);
|
||
}
|
||
|
||
// allow открывает и закрывает ввод: предупреждение о ключе и уход
|
||
// из комнаты гасят и блок, и кнопку «>» (ADR-016, ADR-044). У блока нет
|
||
// disabled — закрытый перестаёт быть редактируемым и говорит об этом
|
||
// экранному диктору.
|
||
function allow(view, on) {
|
||
view.field.contentEditable = on ? view.edit : "false";
|
||
if (on) {
|
||
view.field.removeAttribute("aria-disabled");
|
||
} else {
|
||
view.field.setAttribute("aria-disabled", "true");
|
||
}
|
||
view.send.disabled = !on;
|
||
}
|
||
|
||
// cap держит предел до вставки: обрезается то, что приходит в блок,
|
||
// а набранное остаётся на месте — так же, как считал maxLength у textarea
|
||
// (ADR-071). Влезающее браузер вставляет сам: тогда и отмена (cmd+z)
|
||
// остаётся его, а не нашей.
|
||
//
|
||
// Композицию IME не трогаем вовсе: отменённая на полуслове, она уносит
|
||
// с собой и подтверждённый ввод. Лишнее в ней снимет fit на compositionend.
|
||
function cap(view, event) {
|
||
if (event.isComposing || event.inputType === "insertCompositionText") {
|
||
return;
|
||
}
|
||
if (!event.inputType.startsWith("insert")) {
|
||
return;
|
||
}
|
||
// Перенос строки и прочее без текста считаем одним символом: тогда cap
|
||
// вмешивается только тогда, когда места не осталось совсем.
|
||
const text = event.data ?? event.dataTransfer?.getData("text/plain") ?? "";
|
||
const range = target(view, event);
|
||
if ((text === "" ? 1 : text.length) <= free(view, range)) {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
insert(view, text, range);
|
||
}
|
||
|
||
// target — куда пойдёт вставка: диапазон, который браузер собирается
|
||
// заменить (beforeinput знает его точно — это не всегда выделение:
|
||
// вставка мышью идёт туда, куда отпустили), иначе выделение в блоке.
|
||
function target(view, event = null) {
|
||
const ranges = event?.getTargetRanges?.() ?? [];
|
||
if (ranges.length > 0) {
|
||
const range = document.createRange();
|
||
range.setStart(ranges[0].startContainer, ranges[0].startOffset);
|
||
range.setEnd(ranges[0].endContainer, ranges[0].endOffset);
|
||
return view.field.contains(range.commonAncestorContainer) ? range : null;
|
||
}
|
||
const selection = getSelection();
|
||
const now = selection !== null && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
|
||
return now !== null && view.field.contains(now.commonAncestorContainer) ? now : null;
|
||
}
|
||
|
||
// free — сколько символов ещё влезет туда, куда идёт вставка: предел минус
|
||
// то, что останется от набранного, когда заменяемое уйдёт.
|
||
function free(view, range) {
|
||
return view.limit - (value(view).length - (range === null ? 0 : range.toString().length));
|
||
}
|
||
|
||
// value — набранное так, как оно уедет собеседнику. В plaintext-only
|
||
// браузер держит последнюю строку вторым «\n» в самом конце: в textContent
|
||
// он виден, а в сообщении его нет — его снимает trim в sync.send. Считаем
|
||
// и режем по тому же, что отправляем (ADR-071). В запасном пути последнюю
|
||
// строку держит <br>, которого в textContent нет вовсе, и перенос в конце
|
||
// там настоящий.
|
||
function value(view) {
|
||
const text = view.field.textContent;
|
||
return view.edit === "plaintext-only" && text.endsWith("\n") ? text.slice(0, -1) : text;
|
||
}
|
||
|
||
// cut режет текст по пределу, не разрывая суррогатную пару: половина пары
|
||
// уехала бы собеседнику битым символом.
|
||
function cut(text, limit) {
|
||
if (limit <= 0) {
|
||
return "";
|
||
}
|
||
if (text.length <= limit) {
|
||
return text;
|
||
}
|
||
const last = text.charCodeAt(limit - 1);
|
||
return text.slice(0, last >= 0xd800 && last <= 0xdbff ? limit - 1 : limit);
|
||
}
|
||
|
||
// fit — последняя страховка предела (docs/ui.md, «Чат»): лишнее в блок
|
||
// попадает мимо cap — композицией IME или вставкой, о которой браузер
|
||
// не рассказал. Снимается ровно хвост сверх предела, а не переписывается
|
||
// блок целиком: правка узлов оставляет курсор на месте и не сносит стек
|
||
// отмены. Опустевший блок остаётся без узлов: подсказка стоит правилом
|
||
// :empty, а браузер оставляет в опустевшем блоке <br>, и с ним подсказки
|
||
// не видно.
|
||
function fit(view) {
|
||
const raw = view.field.textContent;
|
||
const text = value(view);
|
||
const keep = cut(text, view.limit);
|
||
if (keep.length < text.length) {
|
||
// Вместе с лишним уходит и заполнитель последней строки, если он есть:
|
||
// он в самом конце, а браузер ставит его снова, когда понадобится.
|
||
trim(view.field, raw.length - keep.length);
|
||
return;
|
||
}
|
||
if (raw === "" && view.field.firstChild !== null) {
|
||
clear(view.field);
|
||
}
|
||
}
|
||
|
||
// trim снимает с хвоста блока лишние единицы текста, не трогая остального:
|
||
// textContent = … переписал бы блок целиком и унёс бы и курсор, и отмену.
|
||
function trim(field, extra) {
|
||
const walker = document.createTreeWalker(field, NodeFilter.SHOW_TEXT);
|
||
const nodes = [];
|
||
while (walker.nextNode() !== null) {
|
||
nodes.push(walker.currentNode);
|
||
}
|
||
let left = extra;
|
||
for (let i = nodes.length - 1; i >= 0 && left > 0; i -= 1) {
|
||
const node = nodes[i];
|
||
const take = Math.min(left, node.length);
|
||
node.deleteData(node.length - take, take);
|
||
left -= take;
|
||
}
|
||
}
|
||
|
||
// insert вписывает текст туда, куда идёт вставка, обрезая его по свободному
|
||
// месту. Своими руками, а не execCommand: тот в Chrome разбирает перенос
|
||
// строки в <div>, а в блоке живёт только текст.
|
||
function insert(view, text, where) {
|
||
// where — диапазон, который назвал beforeinput. Его не передали — берём
|
||
// выделение; выделения в блоке нет — вписываем в конец.
|
||
const range = where === undefined ? target(view) : where;
|
||
const fitted = cut(text, free(view, range));
|
||
if (fitted === "") {
|
||
return;
|
||
}
|
||
const node = document.createTextNode(fitted);
|
||
const selection = getSelection();
|
||
if (range === null) {
|
||
view.field.append(node);
|
||
} else {
|
||
range.deleteContents();
|
||
range.insertNode(node);
|
||
}
|
||
if (selection !== null) {
|
||
const at = document.createRange();
|
||
at.setStartAfter(node);
|
||
at.collapse(true);
|
||
selection.removeAllRanges();
|
||
selection.addRange(at);
|
||
}
|
||
// Вставка делит текст на два-три соседних узла; курсор normalize
|
||
// переставляет сам.
|
||
view.field.normalize();
|
||
// Своё изменение блока события input не порождает: счётчик, предел
|
||
// и последнюю строку трогаем руками.
|
||
fit(view);
|
||
tail(view);
|
||
count(view);
|
||
}
|
||
|
||
// tail держит последнюю пустую строку видимой. Перенос в самом конце
|
||
// браузер не рисует — строки после него нет, — и курсор оставался бы
|
||
// на прежней строке, а набранное дальше уезжало бы перед переносом.
|
||
// Пустую строку держит <br>: тот самый заполнитель, который браузер сам
|
||
// ставит в опустевший блок. В textContent его нет, и на отправляемый текст
|
||
// он не влияет.
|
||
//
|
||
// В plaintext-only это не нужно: там последнюю строку браузер ведёт сам,
|
||
// своим переносом, и лишний заполнитель дал бы вторую пустую строку.
|
||
function tail(view) {
|
||
if (view.edit === "plaintext-only") {
|
||
return;
|
||
}
|
||
const last = view.field.lastChild;
|
||
const wants = view.field.textContent.endsWith("\n");
|
||
if (wants && (last === null || last.nodeName !== "BR")) {
|
||
view.field.append(document.createElement("br"));
|
||
return;
|
||
}
|
||
if (!wants && last !== null && last.nodeName === "BR") {
|
||
last.remove();
|
||
}
|
||
}
|
||
|
||
// count — счётчик остатка: появляется после порога (docs/ui.md, «Чат»).
|
||
// Считается то, что уедет: заполнитель последней строки в счёт не идёт
|
||
// (ADR-071).
|
||
function count(view) {
|
||
const length = value(view).length;
|
||
view.counter.textContent = String(view.limit - length);
|
||
view.counter.hidden = length <= COUNTER_AT;
|
||
}
|
||
|
||
function submit(view) {
|
||
const text = view.field.textContent;
|
||
if (view.blocked || view.gone || text.trim() === "") {
|
||
return;
|
||
}
|
||
view.field.textContent = "";
|
||
count(view);
|
||
run(view, () => sync.send(view.chatId, text));
|
||
}
|
||
|
||
// --- лента --------------------------------------------------------------
|
||
|
||
async function load(view) {
|
||
let record = null;
|
||
let list = [];
|
||
try {
|
||
record = await sync.chat(view.chatId);
|
||
list = await sync.messagesBefore(view.chatId);
|
||
} catch {
|
||
// Базы нет — рисуем пустую ленту: отправка от этого не ломается.
|
||
}
|
||
if (!view.alive) {
|
||
return;
|
||
}
|
||
await refreshRoom(view, record ?? null);
|
||
await checkPeer(view);
|
||
if (!view.alive) {
|
||
return;
|
||
}
|
||
view.items = list;
|
||
// Страница пришла целой — выше есть ещё (ADR-053).
|
||
view.more = list.length >= sync.PAGE;
|
||
view.mark = { unread: (record?.unread ?? 0) > 0, bound: record?.lastReadId ?? null };
|
||
view.newId = firstUnread(view.mark, list, view.me);
|
||
paint(view, true);
|
||
// Фокус в строку ввода при открытии чата на десктопе (docs/ui.md,
|
||
// «Доступность»); на мобильном это подняло бы клавиатуру на весь экран.
|
||
if (wide()) {
|
||
view.field.focus();
|
||
}
|
||
reach(view);
|
||
await read(view);
|
||
}
|
||
|
||
// firstUnread — граница «новых»: первый чужой непрочитанный. Своё
|
||
// непрочитанным не бывает, поэтому и границей не становится.
|
||
//
|
||
// Считается по всему загруженному: чат с сотней непрочитанных открывается
|
||
// последней страницей, и первый из них лежит выше — граница находится,
|
||
// когда до него домотают (ADR-053).
|
||
function firstUnread(mark, list, me) {
|
||
if (!mark.unread) {
|
||
return null;
|
||
}
|
||
const found = list.find((m) => m.from !== me && (!mark.bound || m.id > mark.bound));
|
||
return found ? found.id : null;
|
||
}
|
||
|
||
// --- страницы -----------------------------------------------------------
|
||
|
||
// pull просит следующую страницу. Событий scroll приходит много подряд,
|
||
// поэтому вход закрывается до постановки в очередь.
|
||
function pull(view) {
|
||
if (!view.more || view.loading || !view.alive) {
|
||
return;
|
||
}
|
||
view.loading = true;
|
||
run(view, () => older(view));
|
||
}
|
||
|
||
// older дописывает страницу сверху: курсор по индексу «chat» назад
|
||
// от самого старого загруженного, по 50 (docs/storage.md, ADR-053).
|
||
// Страница короче полной означает, что выше ничего нет.
|
||
async function older(view) {
|
||
const first = view.items[0] ?? null;
|
||
try {
|
||
const list = await sync.messagesBefore(view.chatId, first ? first.id : null);
|
||
if (!view.alive) {
|
||
return;
|
||
}
|
||
if (list.length < sync.PAGE) {
|
||
view.more = false;
|
||
}
|
||
if (list.length === 0) {
|
||
return;
|
||
}
|
||
view.items = [...list, ...view.items];
|
||
keep(view, () => grow(view, list, first));
|
||
} catch {
|
||
// Базы нет — оставляем то, что уже загружено.
|
||
} finally {
|
||
view.loading = false;
|
||
reach(view);
|
||
}
|
||
}
|
||
|
||
// grow дописывает страницу сверху, не пересобирая ленту: нарисованное
|
||
// переживает подгрузку — выделение текста не пропадает, а живая область
|
||
// не зачитывается экранным диктором заново (ADR-053). Заново считаются две
|
||
// строки: та, что держала линию «новые», если граница уехала выше, и бывшая
|
||
// первая — у неё появился сосед сверху, а от соседа зависят разделитель
|
||
// даты и повтор автора.
|
||
function grow(view, list, head) {
|
||
const was = view.newId;
|
||
view.newId = firstUnread(view.mark, view.items, view.me);
|
||
const page = document.createDocumentFragment();
|
||
let previous = null;
|
||
for (const record of list) {
|
||
line(view, record, previous, page);
|
||
previous = record;
|
||
}
|
||
view.body.insertBefore(page, view.body.firstChild);
|
||
if (was !== null && was !== view.newId && (head === null || was !== head.id)) {
|
||
const at = view.items.findIndex((m) => m.id === was);
|
||
if (at > 0) {
|
||
reline(view, view.items[at], view.items[at - 1]);
|
||
}
|
||
}
|
||
if (head !== null) {
|
||
reline(view, head, previous);
|
||
}
|
||
}
|
||
|
||
// reline перерисовывает одну строку вместе с её разделителями: у неё
|
||
// сменился сосед сверху или уехала линия «новые».
|
||
function reline(view, record, previous) {
|
||
const old = view.nodes.get(record.id);
|
||
if (!old) {
|
||
return;
|
||
}
|
||
const next = old.node.nextSibling;
|
||
for (const node of old.marks) {
|
||
node.remove();
|
||
}
|
||
old.node.remove();
|
||
const box = document.createDocumentFragment();
|
||
line(view, record, previous, box);
|
||
view.body.insertBefore(box, next);
|
||
}
|
||
|
||
// keep сохраняет расстояние до низа ленты: подгрузка вверх не должна
|
||
// двигать то, что человек читает.
|
||
function keep(view, draw) {
|
||
const feed = view.feed;
|
||
const bottom = feed.scrollHeight - feed.scrollTop;
|
||
draw();
|
||
feed.scrollTop = feed.scrollHeight - bottom;
|
||
}
|
||
|
||
// reach берёт следующую страницу, когда прокручивать нечего: лента короче
|
||
// окна, события scroll не будет, а сообщения выше есть.
|
||
function reach(view) {
|
||
if (view.feed.scrollHeight <= view.feed.clientHeight) {
|
||
pull(view);
|
||
}
|
||
}
|
||
|
||
// read помечает чат прочитанным — после отрисовки: до этого lastReadId
|
||
// и есть граница «новых» (docs/storage.md).
|
||
async function read(view) {
|
||
try {
|
||
await sync.markRead(view.chatId);
|
||
} catch {
|
||
// Счётчик непрочитанных подождёт до следующего раза.
|
||
}
|
||
}
|
||
|
||
// apply разбирает изменения ленты. Дописать в конец дешевле, чем
|
||
// перерисовать: лента — живая область, и перерисовка заставила бы
|
||
// экранного диктора зачитать её целиком.
|
||
async function apply(view, detail) {
|
||
// Импорт архива приносит недостающую историю пачкой и в середину ленты:
|
||
// перечитать её целиком дешевле, чем вставлять сообщение за сообщением
|
||
// (ADR-050).
|
||
if (detail.whole === true) {
|
||
await load(view);
|
||
return;
|
||
}
|
||
const incoming = [];
|
||
for (const id of detail.ids ?? []) {
|
||
let record = null;
|
||
try {
|
||
record = await sync.message(id);
|
||
} catch {
|
||
return;
|
||
}
|
||
if (record && record.chatId === view.chatId) {
|
||
incoming.push(record);
|
||
}
|
||
}
|
||
if (!view.alive) {
|
||
return;
|
||
}
|
||
const bottom = atBottom(view);
|
||
let whole = false;
|
||
let added = 0;
|
||
|
||
for (const id of detail.removed ?? []) {
|
||
const at = view.items.findIndex((m) => m.id === id);
|
||
if (at >= 0) {
|
||
view.items.splice(at, 1);
|
||
whole = true;
|
||
}
|
||
}
|
||
incoming.sort((a, b) => (a.id < b.id ? -1 : 1));
|
||
for (const record of incoming) {
|
||
const at = view.items.findIndex((m) => m.id === record.id);
|
||
if (at >= 0) {
|
||
// Та же запись в новом состоянии: pending стал sent или failed.
|
||
view.items[at] = record;
|
||
if (!whole) {
|
||
redraw(view, record);
|
||
}
|
||
continue;
|
||
}
|
||
const last = view.items[view.items.length - 1];
|
||
if (last && last.id > record.id) {
|
||
// Из очереди сервера пришло то, что старше уже нарисованного.
|
||
view.items.splice(view.items.findIndex((m) => m.id > record.id), 0, record);
|
||
whole = true;
|
||
continue;
|
||
}
|
||
view.items.push(record);
|
||
if (!whole) {
|
||
line(view, record, view.items[view.items.length - 2] ?? null);
|
||
}
|
||
added += 1;
|
||
}
|
||
|
||
if (whole) {
|
||
paint(view, bottom);
|
||
} else {
|
||
if (bottom && added > 0) {
|
||
down(view);
|
||
}
|
||
paintBar(view);
|
||
}
|
||
if (whole || added > 0) {
|
||
await read(view);
|
||
}
|
||
}
|
||
|
||
// paint рисует ленту заново.
|
||
function paint(view, bottom) {
|
||
clear(view.body);
|
||
view.nodes.clear();
|
||
let previous = null;
|
||
for (const record of view.items) {
|
||
line(view, record, previous);
|
||
previous = record;
|
||
}
|
||
paintBar(view);
|
||
if (bottom) {
|
||
down(view);
|
||
}
|
||
}
|
||
|
||
// line дописывает сообщение в конец parent вместе с разделителями, которые
|
||
// перед ним нужны. Разделители принадлежат строке: подгрузка страницы
|
||
// сверху перерисовывает строку вместе с ними, а не всю ленту.
|
||
function line(view, record, previous, parent = view.body) {
|
||
const marks = [];
|
||
if (!previous || dayOf(previous.ts) !== dayOf(record.ts)) {
|
||
marks.push(divider(label(record.ts), false));
|
||
}
|
||
if (record.id === view.newId) {
|
||
marks.push(divider("новые", true));
|
||
}
|
||
// Подряд идущие сообщения одного автора — без повтора автора.
|
||
const first = marks.length > 0 || !previous || previous.from !== record.from;
|
||
const node = el("div", lineClass(record, view.me, first));
|
||
node.append(author(view, record, first), text(view, record));
|
||
parent.append(...marks, node);
|
||
view.nodes.set(record.id, { node, marks });
|
||
}
|
||
|
||
// lineClass — своя сторона ленты: свои сообщения вправо, чужие влево
|
||
// (ADR-065), классом на самой строке — выравнивает feed-list.
|
||
function lineClass(record, me, first) {
|
||
const classes = ["line"];
|
||
if (record.from === me) {
|
||
classes.push("line--me");
|
||
}
|
||
if (first) {
|
||
classes.push("is-head");
|
||
}
|
||
return classes.join(" ");
|
||
}
|
||
|
||
// redraw обновляет одну строку на месте: автор и группировка от состояния
|
||
// сообщения не зависят.
|
||
function redraw(view, record) {
|
||
const known = view.nodes.get(record.id);
|
||
if (!known) {
|
||
return;
|
||
}
|
||
const first = known.node.classList.contains("is-head");
|
||
clear(known.node);
|
||
known.node.append(author(view, record, first), text(view, record));
|
||
}
|
||
|
||
function divider(caption, fresh) {
|
||
const node = el("div", fresh ? "divider divider--new" : "divider");
|
||
node.append(el("span", null, caption));
|
||
return node;
|
||
}
|
||
|
||
// author — колонка автора: ник и время. Свой ник — цветом mark.
|
||
function author(view, record, first) {
|
||
const node = el("div", record.from === view.me ? "author author--me" : "author");
|
||
if (!first) {
|
||
return node;
|
||
}
|
||
node.append(el("span", null, record.from), el("span", "t", TIME.format(record.ts)));
|
||
return node;
|
||
}
|
||
|
||
// text — само сообщение. Нерасшифрованное — курсивом с причиной, pending —
|
||
// цветом stone, failed — с пометкой «не отправлено · повторить».
|
||
function text(view, record) {
|
||
const node = el("div", "text");
|
||
if (record.text === null) {
|
||
node.classList.add("text--none");
|
||
node.textContent = view.roomId !== null && record.undecryptable === "unknown_key"
|
||
? NO_ROOM_KEY
|
||
: KEY_CHANGED;
|
||
return node;
|
||
}
|
||
if (record.status === "pending") {
|
||
node.classList.add("text--pending");
|
||
}
|
||
node.append(el("p", "text__body", record.text));
|
||
if (record.status === "failed") {
|
||
const note = el("p", "fail");
|
||
const again = el("button", "link", "повторить");
|
||
again.type = "button";
|
||
again.addEventListener("click", () => run(view, () => sync.retry(record.id)));
|
||
note.append(el("span", null, "не отправлено ·"), again);
|
||
node.append(note);
|
||
}
|
||
return node;
|
||
}
|
||
|
||
// checkPeer — состояние доверия к ключу собеседника. Ключ изменился
|
||
// и ждёт подтверждения — ввод заблокирован до «доверять новому ключу»
|
||
// (docs/ui.md, «Чат»). В комнате блокировать нечего: ключ там симметричный,
|
||
// а чьи ключи мешают rekey, показывает экран участников.
|
||
async function checkPeer(view) {
|
||
if (view.peer === null) {
|
||
return;
|
||
}
|
||
let record = null;
|
||
try {
|
||
record = await sync.peer(view.peer);
|
||
} catch {
|
||
// Базы нет — считаем ключ прежним: отправка не блокируется.
|
||
}
|
||
if (!view.alive) {
|
||
return;
|
||
}
|
||
view.blocked = !!record?.pending;
|
||
// Ввод заблокирован целиком: и блок, и кнопка «>» на мобильном.
|
||
allow(view, !view.blocked);
|
||
paintBar(view);
|
||
}
|
||
|
||
// paintBar — полоса над вводом. Причина одна за раз (ADR-033). Порядок:
|
||
// комнаты у нас больше нет — перебивает всё, отправлять некуда (ADR-044);
|
||
// предупреждение о ключе — только оно блокирует ввод в личном чате,
|
||
// и пока оно висит, повторять отправку нечем (ADR-038); отказ отправки
|
||
// перебивает «нет соединения», потому что он про конкретное сообщение
|
||
// и уходит при следующей попытке.
|
||
function paintBar(view) {
|
||
if (view.gone) {
|
||
band(view, "bar bar--mark", "вы больше не участник комнаты", false);
|
||
return;
|
||
}
|
||
if (view.blocked) {
|
||
band(view, "bar bar--mark", `ключ @${view.peer} изменился. сверьте отпечаток лично.`, true);
|
||
return;
|
||
}
|
||
const failed = lastFailed(view);
|
||
if (failed) {
|
||
band(view, "bar bar--mark", failed.error, false);
|
||
return;
|
||
}
|
||
if (!sync.online()) {
|
||
band(view, "bar", "нет соединения", false);
|
||
return;
|
||
}
|
||
clear(view.bar);
|
||
view.bar.hidden = true;
|
||
}
|
||
|
||
// band — сама полоса. Кнопка «доверять новому ключу» стоит в ней же:
|
||
// подтверждение — единственный выход из состояния (ADR-016).
|
||
function band(view, className, caption, trust) {
|
||
clear(view.bar);
|
||
view.bar.className = className;
|
||
view.bar.append(el("span", null, caption));
|
||
if (trust) {
|
||
const yes = el("button", "link", "доверять новому ключу");
|
||
yes.type = "button";
|
||
yes.addEventListener("click", () => {
|
||
yes.disabled = true;
|
||
run(view, async () => {
|
||
try {
|
||
await sync.trustKey(view.peer);
|
||
} finally {
|
||
// Удалось — полосу перерисует событие «peers»; нет — кнопка
|
||
// снова готова к нажатию.
|
||
yes.disabled = false;
|
||
}
|
||
});
|
||
});
|
||
view.bar.append(yes);
|
||
}
|
||
view.bar.hidden = false;
|
||
}
|
||
|
||
// lastFailed — последнее своё неотправленное сообщение с текстом отказа
|
||
// (docs/ui.md, «Чат»). Смотреть на состояние последнего своего нельзя:
|
||
// лента отсортирована по ULID, а время в нём — часы отправителя. Отставшие
|
||
// часы ставят новое сообщение перед его же старыми, и последним своим
|
||
// остаётся давно отправленное — ровно в том случае, ради которого текст
|
||
// про часы и заведён (ADR-033).
|
||
function lastFailed(view) {
|
||
for (let i = view.items.length - 1; i >= 0; i -= 1) {
|
||
const record = view.items[i];
|
||
if (record.from === view.me && record.status === "failed" && record.error) {
|
||
return record;
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
|
||
// --- прокрутка и даты ---------------------------------------------------
|
||
|
||
function atBottom(view) {
|
||
const feed = view.feed;
|
||
return feed.scrollHeight - feed.scrollTop - feed.clientHeight < NEAR_BOTTOM;
|
||
}
|
||
|
||
function down(view) {
|
||
view.feed.scrollTop = view.feed.scrollHeight;
|
||
}
|
||
|
||
function dayOf(ts) {
|
||
const date = new Date(ts);
|
||
return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
|
||
}
|
||
|
||
// label — дата разделителя. Короткая форма на мобильном без точки
|
||
// сокращения: так в эталоне.
|
||
function label(ts) {
|
||
if (wide()) {
|
||
return DAY_LONG.format(ts);
|
||
}
|
||
return DAY_SHORT.format(ts).replace(/\.$/, "");
|
||
}
|