SHA256
UI: улучшить создание канала и окно загрузки
This commit is contained in:
AidarKC
@@ -314,6 +314,9 @@ export function openArweaveAttachmentManager({
|
||||
let balanceInfo = null;
|
||||
let autoOpenedFileDialog = false;
|
||||
const isAvatarMode = String(mode || '') === 'avatar';
|
||||
if (isAvatarMode && !String(uploadTransport || '').trim()) {
|
||||
selectedUploadTransport = 'turbo';
|
||||
}
|
||||
const historyPurposeMode = String(historyPurpose || '').trim();
|
||||
const purposeFilter = isAvatarMode || historyPurposeMode === 'avatar' ? 'avatar' : 'attachment';
|
||||
const selectedTxIdSet = new Set((Array.isArray(selectedTxIds) ? selectedTxIds : []).map((item) => String(item || '').trim()).filter(Boolean));
|
||||
@@ -592,8 +595,8 @@ export function openArweaveAttachmentManager({
|
||||
<div class="form-actions-grid">
|
||||
<button class="${turboMode ? 'secondary-btn' : 'primary-btn'}" type="button" data-action="switch-arweave">Загрузка используя свой Arweave кошелёк</button>
|
||||
<button class="${turboMode ? 'primary-btn' : 'secondary-btn'}" type="button" data-action="switch-turbo">Загрузить через Turbo</button>
|
||||
${isAvatarMode ? '' : '<button class="secondary-btn" type="button" data-action="history-top">Использовать журнал загрузок</button>'}
|
||||
${isAvatarMode ? '' : '<button class="secondary-btn" type="button" data-action="existing-top">Использовать существующий в Arweave файл</button>'}
|
||||
<button class="secondary-btn" type="button" data-action="history-top">${isAvatarMode ? 'Выбрать из журнала' : 'Использовать журнал загрузок'}</button>
|
||||
<button class="secondary-btn" type="button" data-action="existing-top">${isAvatarMode ? 'Ввести tx id' : 'Использовать существующий в Arweave файл'}</button>
|
||||
</div>
|
||||
${turboMode
|
||||
? `
|
||||
@@ -860,12 +863,14 @@ export function openArweaveAttachmentManager({
|
||||
root.innerHTML = `
|
||||
<div class="modal" data-ar-attach-modal="true">
|
||||
<div class="modal-card stack ar-attachment-manager-card">
|
||||
<h3 class="modal-title">Существующий файл Arweave</h3>
|
||||
<h3 class="modal-title">${isAvatarMode ? 'Существующий аватар Arweave' : 'Существующий файл Arweave'}</h3>
|
||||
<label class="meta-muted" for="ar-existing-txid">Transaction ID</label>
|
||||
<input class="input" id="ar-existing-txid" type="text" maxlength="64" placeholder="43 символа txId" />
|
||||
${isAvatarMode ? '' : `
|
||||
<label class="meta-muted" for="ar-existing-name">Имя файла в сообщении</label>
|
||||
<input class="input" id="ar-existing-name" type="text" maxlength="180" placeholder="например report.pdf" />
|
||||
<label class="meta-muted" data-existing-preview-wrap="true" hidden>
|
||||
`}
|
||||
<label class="meta-muted" data-existing-preview-wrap="true" ${isAvatarMode ? 'hidden' : 'hidden'}>
|
||||
<input type="checkbox" data-existing-preview-toggle="true" />
|
||||
Добавить превью
|
||||
</label>
|
||||
@@ -909,8 +914,8 @@ export function openArweaveAttachmentManager({
|
||||
});
|
||||
checkBtn?.addEventListener('click', async () => {
|
||||
const txId = String(txEl?.value || '').trim();
|
||||
const name = String(nameEl?.value || '').trim() || 'arweave-file';
|
||||
const wantsPreview = previewToggleEl instanceof HTMLInputElement && previewToggleEl.checked;
|
||||
const name = isAvatarMode ? 'Аватар' : (String(nameEl?.value || '').trim() || 'arweave-file');
|
||||
const wantsPreview = !isAvatarMode && previewToggleEl instanceof HTMLInputElement && previewToggleEl.checked;
|
||||
const previewTxId = String(previewTxEl?.value || '').trim();
|
||||
if (!validateArweaveTxId(txId)) {
|
||||
setText(errorEl, 'Некорректный Transaction ID Arweave.');
|
||||
@@ -940,6 +945,7 @@ export function openArweaveAttachmentManager({
|
||||
ar: txId,
|
||||
preview,
|
||||
uploadedAtMs: Date.now(),
|
||||
purpose: isAvatarMode ? 'avatar' : 'attachment',
|
||||
});
|
||||
metaEl.innerHTML = `
|
||||
<div>Размер: ${escapeHtml(formatBytes(item.size))}</div>
|
||||
@@ -950,7 +956,7 @@ export function openArweaveAttachmentManager({
|
||||
const addBtn = document.createElement('button');
|
||||
addBtn.className = 'primary-btn';
|
||||
addBtn.type = 'button';
|
||||
addBtn.textContent = historyOnly ? 'Добавить в журнал' : 'Добавить в сообщение';
|
||||
addBtn.textContent = isAvatarMode ? 'Выбрать аватар' : (historyOnly ? 'Добавить в журнал' : 'Добавить в сообщение');
|
||||
addBtn.addEventListener('click', () => finish(resolve, item, { pendingPlacement: historyOnly && !isAvatarMode }));
|
||||
metaEl.append(addBtn);
|
||||
} catch (error) {
|
||||
|
||||
@@ -2,7 +2,6 @@ import { renderHeader } from '../components/header.js';
|
||||
import { authService, state } from '../state.js';
|
||||
import { toUserMessage } from '../services/ui-error-texts.js';
|
||||
import {
|
||||
channelNameErrorText,
|
||||
normalizeChannelDisplayName,
|
||||
validateChannelDisplayName,
|
||||
} from '../services/channel-name-rules.js';
|
||||
@@ -19,6 +18,7 @@ export const pageMeta = { id: 'add-channel-view', title: 'Создание ка
|
||||
const CREATE_CHANNEL_FLASH_KEY = 'shine-channels-create-success';
|
||||
const CHANNEL_TYPE_PUBLIC = 1;
|
||||
const CHANNEL_LOGIN_HINT = 'Разрешены латинские буквы, цифры, _ и -. Длина: от 3 до 32 символов. Название не должно состоять только из цифр.';
|
||||
const CHANNEL_LOGIN_DIGITS_ONLY_HINT = 'Имя канала не должно состоять только из цифр.';
|
||||
|
||||
function persistCreateSuccessFlash(message) {
|
||||
try {
|
||||
@@ -106,11 +106,11 @@ export function render({ navigate }) {
|
||||
|
||||
<label for="channel-name">Технический логин канала</label>
|
||||
<input id="channel-name" class="input" maxlength="32" placeholder="Например: My-Channel_1" required />
|
||||
<div class="meta-muted">${CHANNEL_LOGIN_HINT}</div>
|
||||
<div class="meta-muted" id="channel-link-preview"></div>
|
||||
<div class="meta-muted channel-create-login-hint">${CHANNEL_LOGIN_HINT}</div>
|
||||
<div class="meta-muted channel-link-preview" id="channel-link-preview"> </div>
|
||||
<div id="channel-name-error" class="meta-muted inline-error"></div>
|
||||
|
||||
<label for="channel-title">Красивое имя (то, как канал будет виден пользователям)</label>
|
||||
<label for="channel-title">Как канал будет виден пользователям</label>
|
||||
<input id="channel-title" class="input" maxlength="50" placeholder="Например: Мой красивый канал" />
|
||||
<div class="meta-muted" id="channel-title-counter">0 / 50 символов</div>
|
||||
<div id="channel-title-error" class="meta-muted inline-error"></div>
|
||||
@@ -149,25 +149,27 @@ export function render({ navigate }) {
|
||||
let ownerBlockchainName = '';
|
||||
let avatarAvailabilityLabel = '';
|
||||
let avatarAvailabilityTxId = '';
|
||||
let invalidChannelLoginTyped = false;
|
||||
|
||||
const renderAvatarStatus = (nameValue, titleValue) => {
|
||||
renderAvatarPreview(avatarPreviewEl, selectedAvatar, titleValue || nameValue);
|
||||
avatarRemoveBtn.hidden = !selectedAvatar?.ar;
|
||||
if (!selectedAvatar?.ar) {
|
||||
avatarStatusEl.innerHTML = '<p class="meta-muted">Аватар не установлен.</p>';
|
||||
avatarStatusEl.innerHTML = '<p class="channel-avatar-status-text">Аватар канала не установлен.</p>';
|
||||
return;
|
||||
}
|
||||
const txId = String(selectedAvatar.ar || '').trim();
|
||||
const shortTxId = shortAvatarBlockchainAddress(txId);
|
||||
const isPending = avatarAvailabilityLabel === 'pending' || avatarAvailabilityTxId !== txId;
|
||||
avatarStatusEl.innerHTML = `<p class="channel-avatar-status-text">Адрес аватара в блокчейне Arweave ${shortTxId}${isPending ? ', ещё не обновился в блокчейне.' : '.'}</p>`;
|
||||
avatarStatusEl.innerHTML = `
|
||||
<p class="channel-avatar-status-text">Аватар канала</p>
|
||||
<p class="channel-avatar-status-line">Адрес аватара в блокчейне Arweave <span class="channel-avatar-txid">${shortTxId}</span><span class="channel-avatar-status-pending">${isPending ? ', ещё не обновился в блокчейне.' : ''}</span></p>
|
||||
`;
|
||||
};
|
||||
|
||||
const renderChannelLinkPreview = (nameValue) => {
|
||||
const normalizedChannelName = normalizeChannelDisplayName(nameValue);
|
||||
if (!ownerBlockchainName || !normalizedChannelName) {
|
||||
linkPreviewEl.textContent = 'Прямая ссылка появится после ввода технического имени канала.';
|
||||
linkPreviewEl.innerHTML = ' ';
|
||||
return;
|
||||
}
|
||||
const directUrl = buildAbsoluteChannelUrl({
|
||||
@@ -213,9 +215,7 @@ export function render({ navigate }) {
|
||||
const titleCheck = normalizeMetaText(titleEl.value, 50, 'Название');
|
||||
const descriptionCheck = normalizeMetaText(descriptionEl.value, 250, 'Описание');
|
||||
|
||||
nameErrorEl.textContent = invalidChannelLoginTyped
|
||||
? CHANNEL_LOGIN_HINT
|
||||
: (nameCheck.ok ? '' : channelNameErrorText(nameCheck.code));
|
||||
nameErrorEl.textContent = '';
|
||||
titleErrorEl.textContent = titleCheck.error;
|
||||
descriptionErrorEl.textContent = descriptionCheck.error;
|
||||
|
||||
@@ -238,8 +238,10 @@ export function render({ navigate }) {
|
||||
nameEl.addEventListener('input', () => {
|
||||
const raw = String(nameEl.value || '');
|
||||
const sanitized = sanitizeChannelLoginInput(raw);
|
||||
invalidChannelLoginTyped = raw !== sanitized;
|
||||
if (raw !== sanitized) nameEl.value = sanitized;
|
||||
if (raw !== sanitized) {
|
||||
nameEl.value = sanitized;
|
||||
window.alert(CHANNEL_LOGIN_HINT);
|
||||
}
|
||||
updateValidation();
|
||||
});
|
||||
titleEl.addEventListener('input', updateValidation);
|
||||
@@ -285,6 +287,11 @@ export function render({ navigate }) {
|
||||
}
|
||||
|
||||
const check = updateValidation();
|
||||
if (check.name && /^[0-9]+$/.test(check.name)) {
|
||||
window.alert(CHANNEL_LOGIN_DIGITS_ONLY_HINT);
|
||||
nameEl.focus();
|
||||
return;
|
||||
}
|
||||
if (!check.ok) return;
|
||||
|
||||
setBusy(true);
|
||||
|
||||
Reference in New Issue
Block a user