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

Hoisting expanded state so that it plays better with stored drafts. Still learning to Lit Element.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4149 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams
2023-01-25 00:56:10 +00:00
parent da75ad9337
commit f9db1a7acf
5 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/cory/ssb/tf-compose.js
View File

@@ -167,7 +167,7 @@ class TfComposeElement extends LitElement {
edit.value = '';
self.mentions = {};
self.change();
this.dispatchEvent(new CustomEvent('tf-draft', {detail: {id: this.branch, discard: undefined}}));
self.dispatchEvent(new CustomEvent('tf-draft', {detail: {id: self.branch, discard: undefined}}));
}).catch(function(error) {
alert(error.message);
});

16
apps/cory/ssb/tf-message.js
View File

@@ -12,10 +12,10 @@ class TfMessageElement extends LitElement {
users: {type: Object},
drafts: {type: Object},
raw: {type: Boolean},
collapsed: {type: Boolean},
content_warning_expanded: {type: Boolean},
blog_data: {type: String},
blog_expanded: {type: Boolean},
expanded: {type: Object},
}
}
@@ -29,7 +29,7 @@ class TfMessageElement extends LitElement {
this.users = {};
this.drafts = {};
this.raw = false;
this.collapsed = false;
this.expanded = {};
}
show_reply() {
@@ -197,13 +197,17 @@ class TfMessageElement extends LitElement {
return total;
}
set_expanded(expanded) {
this.dispatchEvent(new CustomEvent('tf-expand', {bubbles: true, composed: true, detail: {id: this.message.id, expanded: expanded}}));
}
render_children() {
let self = this;
if (this.message.child_messages?.length) {
if (this.collapsed) {
return html`<input type="button" value=${this.total_child_messages(this.message) + ' More'} @click=${() => self.collapsed = false}></input>`;
if (!this.expanded[this.message.id]) {
return html`<input type="button" value=${this.total_child_messages(this.message) + ' More'} @click=${() => self.set_expanded(true)}></input>`;
} else {
return html`<input type="button" value="Collapse" @click=${() => self.collapsed = true}></input>${(this.message.child_messages || []).map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts}></tf-message>`)}`;
return html`<input type="button" value="Collapse" @click=${() => self.set_expanded(false)}></input>${(this.message.child_messages || []).map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>`)}`;
}
}
}
@@ -231,7 +235,7 @@ class TfMessageElement extends LitElement {
<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} .drafts=${this.drafts} collapsed=true></tf-message>
<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>
`)}
</div>`;
} else if (typeof(content?.type === 'string')) {

4
apps/cory/ssb/tf-news.js
View File

@@ -10,6 +10,7 @@ class TfNewsElement extends LitElement {
messages: {type: Array},
following: {type: Array},
drafts: {type: Object},
expanded: {type: Object},
}
}
@@ -23,6 +24,7 @@ class TfNewsElement extends LitElement {
this.messages = [];
this.following = [];
this.drafts = {};
this.expanded = {};
}
process_messages(messages) {
@@ -147,7 +149,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} .drafts=${this.drafts} collapsed=true></tf-message>`)}
${final_messages.map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded} collapsed=true></tf-message>`)}
</div>
`;
}

19
apps/cory/ssb/tf-tab-news.js
View File

@@ -11,6 +11,7 @@ class TfTabNewsFeedElement extends LitElement {
following: {type: Array},
messages: {type: Array},
drafts: {type: Object},
expanded: {type: Object},
}
}
@@ -24,6 +25,7 @@ class TfTabNewsFeedElement extends LitElement {
this.hash = '#';
this.following = [];
this.drafts = {};
this.expanded = {};
}
async fetch_messages() {
@@ -104,7 +106,7 @@ class TfTabNewsFeedElement extends LitElement {
alert(JSON.stringify(error, null, 2));
});
}
return html`<tf-news id="news" whoami=${this.whoami} .users=${this.users} .messages=${this.messages} .following=${this.following} .drafts=${this.drafts}></tf-news>`;
return html`<tf-news id="news" whoami=${this.whoami} .users=${this.users} .messages=${this.messages} .following=${this.following} .drafts=${this.drafts} .expanded=${this.expanded}></tf-news>`;
}
}
@@ -117,6 +119,7 @@ class TfTabNewsElement extends LitElement {
unread: {type: Array},
following: {type: Array},
drafts: {type: Object},
expanded: {type: Object},
}
}
@@ -132,6 +135,7 @@ class TfTabNewsElement extends LitElement {
this.following = [];
this.cache = {};
this.drafts = {};
this.expanded = {};
tfrpc.rpc.localStorageGet('drafts').then(function(d) {
self.drafts = JSON.parse(d || '{}');
});
@@ -176,6 +180,17 @@ class TfTabNewsElement extends LitElement {
tfrpc.rpc.localStorageSet('drafts', JSON.stringify(this.drafts));
}
on_expand(event) {
if (event.detail.expanded) {
let expand = {};
expand[event.detail.id] = true;
this.expanded = Object.assign({}, this.expanded, expand);
} else {
delete this.expanded[event.detail.id];
this.expanded = Object.assign({}, this.expanded);
}
}
render() {
let profile = this.hash.startsWith('#@') ?
html`<tf-profile id=${this.hash.substring(1)} whoami=${this.whoami} .users=${this.users}></tf-profile>` : undefined;
@@ -185,7 +200,7 @@ class TfTabNewsElement extends LitElement {
<div>Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!</div>
<div><tf-compose whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} @tf-draft=${this.draft}></tf-compose></div>
${profile}
<tf-tab-news-feed id="news" whoami=${this.whoami} .users=${this.users} .following=${this.following} hash=${this.hash} .drafts=${this.drafts} @tf-draft=${this.draft}></tf-tab-news-feed>
<tf-tab-news-feed id="news" whoami=${this.whoami} .users=${this.users} .following=${this.following} hash=${this.hash} .drafts=${this.drafts} .expanded=${this.expanded} @tf-draft=${this.draft} @tf-expand=${this.on_expand}></tf-tab-news-feed>
`;
}
}