Changeset 952baf3 in Klonkt for src/views/partials/msg-item.ejs
- Timestamp:
- 08/07/2026 05:15:52 PM (5 weeks ago)
- Branches:
- main
- Children:
- ba76bf5
- Parents:
- f85b2c3 (diff), 0d5bd2c (diff)
Note: this is a merge changeset, the changes displayed below correspond to the merge itself.
Use the(diff)links above to see all the changes relative to each parent. - File:
-
- 1 edited
-
src/views/partials/msg-item.ejs (modified) (7 diffs)
Legend:
- Unmodified
- Added
- Removed
-
src/views/partials/msg-item.ejs
rf85b2c3 r952baf3 1 <% if (n.type === 'thread') { %> 2 <% 3 var _tseen = (typeof seen !== 'undefined' && seen) ? seen : 0; 4 // Een draad is nieuw zodra EEN bericht erin nieuw is. 5 var _tnew = !!_tseen && (n.messages || []).some(function (m) { 6 return m.created_at && Date.parse(m.created_at) > _tseen; 7 }); 8 var _tpeople = (n.people || []).map(function (p) { return p.name || p.handle || '?'; }); 9 // Alleen jij aan het woord: dan is de tegenpartij het adres waaraan 10 // je schreef, niet een lege naam. 11 var _tto = ((n.messages || []).find(function (m) { return m.to_handle; }) || {}).to_handle; 12 var _tlabel = _tpeople.length ? _tpeople.join(', ') : (_tto || t('msg.you')); 13 %> 14 <li class="msg-item msg-thread<%= _tnew ? ' is-new' : '' %>" data-kind="conv" data-who="<%= (_tpeople.join(' ') + ' ' + (_tto || '')).toLowerCase() %>"> 15 <div class="msg-thread-head"> 16 <%# Tegenpartij en aantal in EEN uitsparing: het is een label bij het 17 gesprek, geen kop erboven. Zo houdt de inhoud de ruimte. 18 19 Deze uitsparing is ook de knop die het gesprek in- en uitklapt 20 (Barts aanwijzing): tikken op de tegenpartij is waar je van 21 nature naar wijst als je "dit gesprek" bedoelt. Een BUTTON en 22 geen span met een klikhandler, want dan werkt hij ook met het 23 toetsenbord en leest een schermlezer de stand voor. 24 25 Zonder JavaScript doet hij niets, en dan staat het gesprek 26 gewoon open -- dat is ook de stand waar we mee beginnen. %> 27 <button type="button" class="msg-thread-who" aria-expanded="true"> 28 <span class="msg-thread-name"><%= _tlabel %></span> 29 <% if (n.count > 1) { %><span class="msg-thread-count"><%= n.count %></span><% } %> 30 <svg class="msg-thread-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg> 31 </button> 32 <% if (_tnew) { %><span class="msg-new" title="<%= t('msg.new') %>"></span><% } %> 33 <%# De context bij de draad: waar gaat dit gesprek over? Zonder deze 34 link is een antwoord in een lijst niet te plaatsen. %> 35 <% if (n.post) { %> 36 <a class="msg-thread-post" href="/<%= n.post.slug %>"> 37 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> 38 <%= n.post.title || n.post.slug %> 39 </a> 40 <% } %> 41 </div> 42 <ul class="msg-thread-msgs"> 43 <% (n.messages || []).forEach(function (m) { %><%- include('msg-item', { n: m, seen: _tseen, inThread: true }) %><% }); %> 44 </ul> 45 <%# Antwoorden vanuit de draad zelf. Ingeklapt, want een open editor 46 onder elk gesprek maakt de lijst onleesbaar -- juist het probleem 47 dat deze weergave moest oplossen. De route kiest het pad: een 48 draad aan een post krijgt een reply, een draad aan een persoon een 49 direct bericht. %> 50 <% var _rt = n.replyTo || {}; var _kan = canMutate && ((_rt.interactionId && _rt.postSlug) || _rt.actorUri); %> 51 <% if (_kan) { %> 52 <div class="msg-thread-foot"> 53 <details class="msg-reply"> 54 <summary><%= t('fedi.reply') %></summary> 55 <div class="msg-reply-form"> 56 <%- include('../partials/reply-editor', { 57 action: (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') + '/messages/reply', 58 hiddenFields: [ 59 { name: 'interaction_id', value: _rt.interactionId || '' }, 60 { name: 'post_slug', value: _rt.postSlug || '' }, 61 { name: 'to', value: _rt.actorUri || '' }, 62 ], 63 placeholder: t('fedi.reply_ph'), 64 submitLabel: t('fedi.reply'), 65 rows: 2, 66 }) %> 67 </div> 68 </details> 69 <%# De zwaai blijft een eigen knop: het is geen antwoord maar een 70 seintje (FEP-633c), en die twee horen niet op een hoop. %> 71 <% if (_rt.actorUri) { %> 72 <form method="post" action="<%= (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') %>/messages/quick-reply" class="msg-wave"> 73 <input type="hidden" name="to" value="<%= _rt.actorUri %>"> 74 <button class="btn small" name="text" value="👋" title="<%= t('msg.wave_back') %>">👋</button> 75 </form> 76 <% } %> 77 </div> 78 <% } %> 79 </li> 80 <% } else { %> 1 81 <% 2 82 var _seen = (typeof seen !== 'undefined' && seen) ? seen : 0; … … 5 85 var _who = n.name || n.handle || ''; 6 86 var _priv0 = (n.visibility === 'followers' || n.visibility === 'direct'); 7 // Buckets (klonkt-demo-3jf): Messages = @mentions + private (DM) replies; 8 // Activity = likes/boosts/follows; Moderation = reports; Sent = your 9 // replies; Conversations = every other (public) reply. 10 var _kind = _t === 'sent' ? 'sent' 11 : (_t === 'like' || _t === 'boost' || _t === 'follow' || _t === 'poll_done') ? 'act' 87 // Emmers: Activiteit = likes/boosts/follows/polls, Moderatie = 88 // reports, en al het overige is gesprek. De oude emmers 'msgs' en 89 // 'sent' bestaan niet meer sinds Berichten, Gesprekken en Verzonden 90 // samenvielen -- en dat is geen cosmetische hernoeming: een 91 // gespreksregel die om wat voor reden dan ook geen draad werd (geen 92 // post, geen herkenbare tegenpartij) hield anders een data-kind 93 // waarvoor geen chip meer bestond, en was daarmee onder ELKE chip 94 // behalve Alles onzichtbaar. 95 var _kind = (_t === 'like' || _t === 'boost' || _t === 'follow' || _t === 'poll_done') ? 'act' 12 96 : _t === 'report' ? 'mod' 13 : (_t === 'mention' || _priv0) ? 'msgs'14 97 : 'conv'; 98 // Binnen een draad is dit geen zelfstandige regel: de chip filtert op 99 // de draad, niet op de losse zinnen erin. 100 var _sub = (typeof inThread !== 'undefined' && inThread); 15 101 var _init = String(_who || '?').replace(/^@/, '').charAt(0).toUpperCase(); 16 102 var _priv = (n.visibility === 'followers' || n.visibility === 'direct'); 17 103 %> 18 <li class=" msg-item msg-<%= _t %><%= _new ? ' is-new' : '' %>" data-kind="<%= _kind %>"data-who="<%= String(_who).toLowerCase() %>">104 <li class="<%= _sub ? 'msg-sub' : 'msg-item' %> msg-<%= _t %><%= _new ? ' is-new' : '' %>"<% if (!_sub) { %> data-kind="<%= _kind %>"<% } %> data-who="<%= String(_who).toLowerCase() %>"> 19 105 <span class="msg-av<%= _t === 'sent' ? ' msg-av-sent' : '' %>" aria-hidden="true"> 20 106 <% if (_t === 'sent') { %><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg> … … 38 124 <% if (_t === 'sent') { %> 39 125 <span class="msg-who"><%= t('msg.you') %></span> 40 <% if (n.to_handle ) { %><span class="msg-handle">→ <%= n.to_handle %></span><% } %>126 <% if (n.to_handle && !_sub) { %><span class="msg-handle">→ <%= n.to_handle %></span><% } %> 41 127 <% } else { %> 42 128 <a class="msg-who" href="<%= n.url %>" target="_blank" rel="nofollow noopener"><%- emojiName(_who, n.actor_emoji_json) %></a> 43 <% if (n.handle && n.name) { %><span class="msg-handle"><%= n.handle %></span><% } %> 129 <% /* De naam blijft: binnen een draad moet je zien WIE wat zei. 130 De handle erachter niet -- die staat in de kop. */ %> 131 <% if (n.handle && n.name && !_sub) { %><span class="msg-handle"><%= n.handle %></span><% } %> 44 132 <% } %> 45 133 <% if (_new) { %><span class="msg-new" title="<%= t('msg.new') %>"></span><% } %> … … 50 138 </div> 51 139 140 <% var _hasWhat = !_sub || _priv 141 || (_t === 'mention' && (n.help_request || n.wave || n.note_url)) 142 || (_t === 'sent' && n.in_reply_to); %> 143 <% if (_hasWhat) { %> 52 144 <div class="msg-what"> 53 145 <% if (n.count && n.count > 1) { %> … … 60 152 <% } else if (_t === 'mention' && n.help_request) { %>🛟 <%= t('msg.help_request') %> 61 153 <% } else if (_t === 'mention' && n.wave) { %>👋 <%= t('msg.waved_at_you') %> 154 <% } else if (_sub) { %><%# binnen een draad zegt de kop al dat dit een gesprek is %> 62 155 <% } else if (_t === 'mention') { %><%= t('notif.mentioned') %> 63 156 <% } else if (_t === 'sent') { %><%= t('msg.sent_reply') %> … … 65 158 <% } else { %><%= t('notif.replied') %><% } %> 66 159 <% if (_priv) { %><span class="msg-priv" title="<%= t('msg.private_hint') %>">🔒 <%= t('msg.private') %></span><% } %> 67 <% if (n.post_slug ) { %><a class="msg-post" href="/<%= n.post_slug %>"><%= n.post_title || n.post_slug %></a><% } %>160 <% if (n.post_slug && !_sub) { %><a class="msg-post" href="/<%= n.post_slug %>"><%= n.post_title || n.post_slug %></a><% } %> 68 161 <% if (_t === 'mention' && n.note_url) { %><a class="msg-post" href="<%= n.note_url %>" target="_blank" rel="nofollow noopener"><%= t('tl.view_original') %></a><% } %> 69 162 <% if (_t === 'sent' && n.in_reply_to) { %><a class="msg-post" href="<%= n.in_reply_to %>" target="_blank" rel="nofollow noopener"><%= t('tl.view_original') %></a><% } %> 70 163 </div> 164 <% } %> 71 165 72 166 <% if (_t === 'report' && n.content) { %><div class="msg-content"><%= n.content %></div> … … 116 210 </div> 117 211 </li> 212 <% } %>
Note:
See TracChangeset
for help on using the changeset viewer.
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)