${replyRow('Михаил','МЛ','blue',second?'Спасибо за список! Добавлю ещё парк у старого моста.':'У воды всегда легче выдохнуть. Это возле старого моста?')}${replyRow('Лена','ЛС','green',second?'В выходные попробую один из маршрутов.':'А я ухожу гулять без наушников. Город звучит совсем иначе.')}${replies.map(r=>replyRow('Вы','ВЫ','self',r.text,r.target)).join('')}`;
}
function composer(s) {
if (s.screen==='list') return '';
if (s.screen==='feed' && role==='reader') return '';
return ``;
}
function render(s) {
const previousView = s.phone.querySelector('.view');
s.scrolls ||= {};
if (previousView && s.renderedScreen) s.scrolls[s.renderedScreen] = previousView.scrollTop;
s.phone.innerHTML = `
`:'';
}
function removeOverlay(s) {
s.phone.querySelector('.overlay')?.remove();
s.phone.querySelectorAll(':scope > *').forEach(el=>el.inert=false);
}
function closeEditor(s) {
s.editor = null;
removeOverlay(s);
if (s.returnFocus?.isConnected) s.returnFocus.focus({preventScroll:true});
else s.phone.querySelector('[data-action="reply"], [data-action="new-post"], [data-action="back"]')?.focus({preventScroll:true});
}
function openEditor(s, mode='reply', author=s.channel.owner, text=s.activePost==='second'?secondText:mainText, trigger=null) {
if (s.editor) closeEditor(s);
s.editor=mode;
s.replyTo=author;
s.replyText=text;
s.returnFocus=trigger;
s.expanded=false;
mountEditor(s);
}
function toast(s, message) {
s.phone.querySelector('.toast')?.remove();
clearTimeout(s.toastTimer);
const el=document.createElement('div');
el.className='toast'; el.setAttribute('role','status'); el.textContent=message;
s.phone.append(el);
s.toastTimer=setTimeout(()=>el.remove(),3500);
}
function menu(s, title, contents, trigger) {
removeOverlay(s);
s.returnFocus=trigger;
const el=document.createElement('div'); el.className='overlay';
el.innerHTML=`
${button('close-menu','Закрыть','close')}
${escapeText(title)}
${contents}
`;
s.phone.querySelectorAll(':scope > *').forEach(child=>child.inert=true);
s.phone.append(el); el.querySelector('.sheet').focus({preventScroll:true});
}
const menuAction=(action,label,i='file')=>``;
function updateEditor(s) {
const modal=s.phone.querySelector('.overlay');
modal.querySelector('.char-count').textContent=`${s.drafts[s.editor].length} / 2000`;
modal.querySelector('[data-action="send"]').disabled=!s.drafts[s.editor].trim()&&!s.attachments[s.editor];
modal.querySelector('.selected-attachment').innerHTML=attachmentMarkup(s);
}
function handle(s, event) {
const el=event.target.closest('[data-action]');
if (!el || el.disabled) return;
const action=el.dataset.action;
if (action==='filter') { s.filter=el.dataset.value; render(s); }
else if (action==='open-channel') { s.channel=channels[Number(el.dataset.index)]; s.screen='feed'; s.activePost='first'; s.replies=[]; s.posts=[]; s.likes.clear(); render(s); }
else if (action==='list'||action==='back') { s.screen=action==='list'||s.screen==='feed'?'list':'feed'; render(s); }
else if (action==='thread') { s.activePost=el.dataset.post||s.activePost; s.screen='thread'; render(s); }
else if (action==='reply'||action==='new-post') { s.activePost=el.dataset.post||s.activePost; openEditor(s,action==='new-post'?'post':'reply',s.channel.owner,s.activePost==='second'?secondText:mainText,el); }
else if (action==='reply-to') openEditor(s,'reply',el.dataset.author,el.dataset.text,el);
else if (action==='close-editor') { closeEditor(s); toast(s,'Черновик сохранён до закрытия страницы'); }
else if (action==='expand') { s.expanded=!s.expanded; removeOverlay(s); mountEditor(s); }
else if (action==='attach') s.phone.querySelector('[data-file]').click();
else if (action==='remove-attachment') { s.attachments[s.editor]=''; updateEditor(s); }
else if (action==='send') {
const mode=s.editor;
const text=s.drafts[mode].trim();
const attachment=s.attachments[mode];
if (!text&&!attachment) return;
if (mode==='reply') s.replies.push({text:text+(attachment?'\n📎 '+attachment:''),target:s.replyTo,post:s.activePost});
else s.posts.push(text+(attachment?'\n📎 '+attachment:''));
s.drafts[mode]=''; s.attachments[mode]=''; s.editor=null; s.screen=mode==='reply'?'thread':'feed'; render(s);
const view=s.phone.querySelector('.view'); view.scrollTop=view.scrollHeight;
s.phone.querySelector('.composer-trigger')?.focus({preventScroll:true}); toast(s,'Отправлено в макете. Данные на сервер не передаются.');
}
else if (action==='like') {
const key=el.dataset.post; const liked=s.likes.has(key); liked?s.likes.delete(key):s.likes.add(key);
el.setAttribute('aria-pressed',String(!liked)); el.querySelector('span').textContent=String(Number(el.querySelector('span').textContent)+(liked?-1:1));
}
else if (action==='share') menu(s,'Поделиться', '
В приложении здесь появится системное меню отправки ссылки. В макете внешние ссылки не создаются.
'+menuAction('close-menu','Понятно','check'),el);
else if (action==='subscribe') { s.subscribed=!s.subscribed; el.textContent=s.subscribed?'Вы подписаны':'Подписаться'; }
else if (action==='notifications') { s.muted=!s.muted; el.setAttribute('aria-label',s.muted?'Включить уведомления':'Настроить уведомления'); toast(s,s.muted?'Уведомления канала выключены в макете':'Уведомления канала включены в макете'); }
else if (action==='post-menu') menu(s,'Сообщение',menuAction('reactions','Кто поставил лайк','heart')+menuAction('details','Данные записи','file')+(role==='owner'?menuAction('edit-demo','Редактировать','edit'):'')+'
Редкие действия собраны здесь, чтобы оставлять больше места самому сообщению.
',el);
else if (action==='channel-menu') menu(s,s.channel.title,menuAction('about','О канале','channels')+menuAction('contents','Оглавление','book')+menuAction('notifications','Уведомления','bell'),el);
else if (action==='contents') menu(s,'Оглавление','
С чего начать знакомство с каналом
'+menuAction('jump-post','01 · Маленькие открытия','book')+menuAction('jump-file','02 · Наш список любимых мест','file'),el);
else if (action==='jump-post'||action==='jump-file') { removeOverlay(s); s.screen='feed'; render(s); s.phone.querySelectorAll('.post')[action==='jump-file'?1:0]?.scrollIntoView({block:'nearest'}); }
else if (action==='reactions') menu(s,'Лайки','
Все: 24 · основные: 18 · сияющие: 6
Названия категорий сохранены из текущего приложения. Их объяснение пользователю нужно согласовать отдельно.
',el);
else if (action==='details') menu(s,'Данные записи','
Здесь доступны номер записи, цепочка автора, хэш и подпись. В мокапе технические данные не генерируются.
',el);
else if (action==='about') menu(s,'О канале','
Замечаем красоту рядом. Делимся местами, историями и маленькими открытиями.
Автор: @'+escapeText(s.channel.owner)+'
',el);
else if (action==='close-menu') { removeOverlay(s); if(s.returnFocus?.isConnected)s.returnFocus.focus({preventScroll:true}); }
else if (action==='new-channel') toast(s,'Создание канала — следующий этап проектирования');
else if (action==='edit-demo') toast(s,'Редактор существующего сообщения — следующий этап');
else if (action==='outside') toast(s,'Сейчас проектируем каналы. Этот раздел пока вне макета.');
}
function attachEvents(s) {
s.phone.addEventListener('click',event=>handle(s,event));
s.phone.addEventListener('input',event=>{
if(event.target.matches('[data-search]')) { s.query=event.target.value; s.phone.querySelector('.channel-rows').innerHTML=rows(s); }
if(event.target.matches('.editor-input')) { s.drafts[s.editor]=event.target.value; updateEditor(s); }
});
s.phone.addEventListener('change',event=>{
if(event.target.matches('[data-file]')) { s.attachments[s.editor]=event.target.files[0]?.name||''; updateEditor(s); }
});
s.phone.addEventListener('keydown',event=>{
const dialog=s.phone.querySelector('[role="dialog"]');
if(!dialog) return;
if(event.key==='Escape') { event.preventDefault(); s.editor?closeEditor(s):removeOverlay(s); if(s.returnFocus?.isConnected)s.returnFocus.focus({preventScroll:true}); }
if(event.key==='Tab') {
const focusable=[...dialog.querySelectorAll('button:not(:disabled), textarea, input:not([hidden])')];
const first=focusable[0], last=focusable.at(-1);
if(event.shiftKey&&(document.activeElement===first||document.activeElement===dialog)) { event.preventDefault(); last?.focus(); }
else if(!event.shiftKey&&(document.activeElement===last||document.activeElement===dialog)) { event.preventDefault(); first?.focus(); }
}
});
}
function init() {
const query=new URLSearchParams(location.search);
const chosen=concepts.find(c=>c.id===query.get('variant'));
const gallery=document.getElementById('gallery');
if(chosen) {gallery.classList.add('single');document.body.classList.add('focused');}
for(const c of chosen?[chosen]:concepts) {
const article=document.createElement('section');article.className='concept';article.setAttribute('aria-label',c.title);
article.innerHTML=`
`;
gallery.append(article);
const s={id:c.id,phone:article.querySelector('.phone'),screen:'list',activePost:'first',channel:channels[0],query:'',filter:'all',likes:new Set(),subscribed:true,muted:false,replies:[],posts:[],drafts:{reply:'',post:''},attachments:{reply:'',post:''},editor:null};
states.set(c.id,s);render(s);attachEvents(s);
}
document.querySelectorAll('[data-screen]').forEach(el=>el.addEventListener('click',()=>{
document.querySelectorAll('[data-screen]').forEach(b=>{b.classList.toggle('selected',b===el);b.setAttribute('aria-pressed',String(b===el));});
for(const s of states.values()) { s.editor=null;s.screen=el.dataset.screen==='reply'?'thread':el.dataset.screen;render(s);if(el.dataset.screen==='reply')openEditor(s); }
el.focus({preventScroll:true});
}));
document.getElementById('role').addEventListener('change',event=>{role=event.target.value;for(const s of states.values())render(s);});
document.getElementById('keyboard').addEventListener('change',event=>{showKeyboard=event.target.checked;for(const s of states.values())if(s.editor){removeOverlay(s);mountEditor(s);}event.target.focus({preventScroll:true});});
}
init();