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

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4149 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/cory/ssb.json

@@ -1 +1 @@
-{"type":"tildefriends-app","files":{"app.js":"&1HWTkyCc1doft6dyKF5FDxtRAErNeY25CBrfZbKPpyo=.sha256","lit-all.min.js":"&XKgdRySJuiZeZvchNFGjVWn0XOVhQFmG7/HTWYQ8s68=.sha256","index.html":"&TxhFekB9ov7tf/fmkAg7x5797i27oLidhgxEfDKC0T0=.sha256","script.js":"&G8puK9Q4MngHy3D4ppcKyT49WKbHD2OCeUcAw2ghTDE=.sha256","lit-all.min.js.map":"&lA9iFp1YbqSndxXZuwtgmrj7NDMkN71nJITbtjWL3VA=.sha256","tf-id-picker.js":"&maN8DUFrmRxW5nsVyOAMk5k1ekcz/pfzvSS99ac3jo8=.sha256","tf-app.js":"&F0fyawIO410YFidrzFjlHeY++sZy6ledf6CAXB+45U4=.sha256","tf-message.js":"&vj9Jb3/Jif7hwr0GIzQ8nw4IWcvCMxlv2ryoh+tqZnE=.sha256","tf-user.js":"&bXTedgBudTQLXEBPY9R8OLfQ/ZLpo8YRU9Oq/wuGG3Y=.sha256","tf-utils.js":"&lYNeL7cVlDgcqrfkoRIe69DHZeqSZMiHhZIieblHbU0=.sha256","commonmark.min.js":"&bfBaMLU19d1p/vPBF9hlARqDX002KXG/UOfxOahZhe4=.sha256","tf-compose.js":"&MwdAz7SVlwGJYK1BswEuehFWhqAs/iE0oPovLCsGthc=.sha256","emojis.json":"&h3P4pez+AI4aYdsN0dJ3pbUEFR0276t9AM20caj/W/s=.sha256","emojis.js":"&NC9VddNdX+ZpyIDUQJvH2y1u3ZczQub5+bNmN9ndj7I=.sha256","tf-styles.js":"&LFeL/vWgrv4N8q/mBrQAnhbaOI+dXNJYvH9bn1bXSqQ=.sha256","tf-profile.js":"&vRKjsnYvOiHCQahzEfznCvP5YDwUPtltlpWf+pxwZ1Y=.sha256","commonmark-linkify.js":"&X+hNNkmSRvKY86khyAun+cXksquXbMakZdINbGbx30g=.sha256","tf-tab-search.js":"&ESt2vMG19sH5j6ungKua/ZuvIGslyuWyb3juXdOCecg=.sha256","tf-tab-news.js":"&+hexNqLjYcjPnpDsU962Hy4wWh++pNWVZHO4gI3f1C8=.sha256","tf-tab-connections.js":"&ywqBz3w63R6naH09kZ+01A0SfmtuSfk8QPBXWsli0yg=.sha256","tf-news.js":"&jPigwc9k+I5nMjsaw14Kdt89I/s6m9LVcKG/udR+LGw=.sha256","tribute.css":"&9FogMzZHKXCfGb7mlh7z+/wiNZzBsOB/tKoh6MfYJno=.sha256","tribute.esm.js":"&P1wKqCfYULpR/ahSB98JP8xaxfikuZwwtT6I/SAo7/Y=.sha256","commonmark-hashtag.js":"&fudY0YdvcMjVCSZ0oiCqUt0+bVT0a06j5TcjWaCDO8E=.sha256"}}
+{"type":"tildefriends-app","files":{"app.js":"&1HWTkyCc1doft6dyKF5FDxtRAErNeY25CBrfZbKPpyo=.sha256","lit-all.min.js":"&XKgdRySJuiZeZvchNFGjVWn0XOVhQFmG7/HTWYQ8s68=.sha256","index.html":"&TxhFekB9ov7tf/fmkAg7x5797i27oLidhgxEfDKC0T0=.sha256","script.js":"&G8puK9Q4MngHy3D4ppcKyT49WKbHD2OCeUcAw2ghTDE=.sha256","lit-all.min.js.map":"&lA9iFp1YbqSndxXZuwtgmrj7NDMkN71nJITbtjWL3VA=.sha256","tf-id-picker.js":"&maN8DUFrmRxW5nsVyOAMk5k1ekcz/pfzvSS99ac3jo8=.sha256","tf-app.js":"&F0fyawIO410YFidrzFjlHeY++sZy6ledf6CAXB+45U4=.sha256","tf-message.js":"&8FJic0+42bH7zJueFaMoRfTH7t/hE9uwWuQxWZnEjAw=.sha256","tf-user.js":"&bXTedgBudTQLXEBPY9R8OLfQ/ZLpo8YRU9Oq/wuGG3Y=.sha256","tf-utils.js":"&lYNeL7cVlDgcqrfkoRIe69DHZeqSZMiHhZIieblHbU0=.sha256","commonmark.min.js":"&bfBaMLU19d1p/vPBF9hlARqDX002KXG/UOfxOahZhe4=.sha256","tf-compose.js":"&gQbQnoc4dxOFF6Pdq8yL9wneHfjr8g5/oixtI0XI9oc=.sha256","emojis.json":"&h3P4pez+AI4aYdsN0dJ3pbUEFR0276t9AM20caj/W/s=.sha256","emojis.js":"&NC9VddNdX+ZpyIDUQJvH2y1u3ZczQub5+bNmN9ndj7I=.sha256","tf-styles.js":"&LFeL/vWgrv4N8q/mBrQAnhbaOI+dXNJYvH9bn1bXSqQ=.sha256","tf-profile.js":"&vRKjsnYvOiHCQahzEfznCvP5YDwUPtltlpWf+pxwZ1Y=.sha256","commonmark-linkify.js":"&X+hNNkmSRvKY86khyAun+cXksquXbMakZdINbGbx30g=.sha256","tf-tab-search.js":"&ESt2vMG19sH5j6ungKua/ZuvIGslyuWyb3juXdOCecg=.sha256","tf-tab-news.js":"&YK6C9FhyQg+XaARoQM/uXivw3pVW//9QwHM3wkCULFU=.sha256","tf-tab-connections.js":"&ywqBz3w63R6naH09kZ+01A0SfmtuSfk8QPBXWsli0yg=.sha256","tf-news.js":"&w+P8XFAlfZBF/gZ2WtAM0DRdf0Mgc41YnCDHHvg/szQ=.sha256","tribute.css":"&9FogMzZHKXCfGb7mlh7z+/wiNZzBsOB/tKoh6MfYJno=.sha256","tribute.esm.js":"&P1wKqCfYULpR/ahSB98JP8xaxfikuZwwtT6I/SAo7/Y=.sha256","commonmark-hashtag.js":"&fudY0YdvcMjVCSZ0oiCqUt0+bVT0a06j5TcjWaCDO8E=.sha256"}}

apps/cory/ssb/tf-compose.js

@@ -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);
 		});

apps/cory/ssb/tf-message.js

@@ -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) {
+			if (!this.expanded[this.message.id]) {
-				return html`<input type="button" value=${this.total_child_messages(this.message) + ' More'} @click=${() => self.collapsed = false}></input>`;
+				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')) {

apps/cory/ssb/tf-news.js

@@ -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>
 		`;
 	}

apps/cory/ssb/tf-tab-news.js

@@ -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>
 		`;
 	}
 }