tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

An experiment in collapsing messages, and link placeholders.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4013 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams
2022-10-18 22:31:54 +00:00
parent 16dbc7617c
commit 60d1ea9d39
3 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/cory/ssblit/tf-message.js
View File

@ -12,6 +12,7 @@ class TfMessageElement extends LitElement {
users: {type: Object},
reply: {type: Boolean},
raw: {type: Boolean},
collapsed: {type: Boolean},
}
}
@ -25,6 +26,7 @@ class TfMessageElement extends LitElement {
this.users = {};
this.reply = false;
this.raw = false;
this.collapsed = false;
}
show_reply() {
@ -163,6 +165,15 @@ class TfMessageElement extends LitElement {
}
}
render_children() {
let self = this;
if (false && this.collapsed && this.message.child_messages?.length) {
return html`<input type="button" value=${this.message.child_messages?.length + ' More'} @click=${() => self.collapsed = false}></input>`;
} else {
return html`${(this.message.child_messages || []).map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users}></tf-message>`)}`;
}
}
render() {
let content = this.message?.content;
let self = this;
@ -183,10 +194,10 @@ class TfMessageElement extends LitElement {
if (this.message.placeholder) {
return html`
<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
${this.message.id} (placeholder)
<a target="_top" href=${'#' + this.message.id}>${this.message.id}</a> (placeholder)
<div>${this.render_votes()}</div>
${(this.message.child_messages || []).map(x => html`
<tf-message .message=${x} whoami=${this.whoami} .users=${this.users}></tf-message>
<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} collapsed=true></tf-message>
`)}
</div>`;
} else if (typeof(content?.type === 'string')) {
@ -253,7 +264,7 @@ class TfMessageElement extends LitElement {
${reply}
<input type="button" value="React" @click=${this.react}></input>
</div>
${(this.message.child_messages || []).map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users}></tf-message>`)}
${this.render_children()}
</div>
`;
} else if (content.type === 'pub') {

2
apps/cory/ssblit/tf-news.js
View File

@ -155,7 +155,7 @@ class TfNewsElement extends LitElement {
let final_messages = this.finalize_messages(messages_by_id);
return html`
<div style="display: flex; flex-direction: column">
${final_messages.map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users}></tf-message>`)}
${final_messages.map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} collapsed=true></tf-message>`)}
</div>
`;
}