Some emoji picker and drafts tweaks.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4152 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":"&HToh+7UCoanBzlr/TEsy/JG4OS2IBU1tMuzjuNmUkAo=.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":"&Zn+vxLUqVJbo/q6RcW8ezvbdilzllvXhZRyXk8kYwL0=.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":"&HToh+7UCoanBzlr/TEsy/JG4OS2IBU1tMuzjuNmUkAo=.sha256","tf-user.js":"&bXTedgBudTQLXEBPY9R8OLfQ/ZLpo8YRU9Oq/wuGG3Y=.sha256","tf-utils.js":"&lYNeL7cVlDgcqrfkoRIe69DHZeqSZMiHhZIieblHbU0=.sha256","commonmark.min.js":"&bfBaMLU19d1p/vPBF9hlARqDX002KXG/UOfxOahZhe4=.sha256","tf-compose.js":"&7HZLHf5NB5hE6FW0hiXNvM17ekGBn5BBle1bvnjVjyo=.sha256","emojis.json":"&h3P4pez+AI4aYdsN0dJ3pbUEFR0276t9AM20caj/W/s=.sha256","emojis.js":"&tOkUocccQWBzkNzSEf9VMltkTSHcUALYSPYVWmJMoBc=.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":"&fY+thANurOKU2/RhDt411ZtkxW0nV24+hLEf00Z1sTY=.sha256","tf-tab-connections.js":"&ywqBz3w63R6naH09kZ+01A0SfmtuSfk8QPBXWsli0yg=.sha256","tf-news.js":"&Zn+vxLUqVJbo/q6RcW8ezvbdilzllvXhZRyXk8kYwL0=.sha256","tribute.css":"&9FogMzZHKXCfGb7mlh7z+/wiNZzBsOB/tKoh6MfYJno=.sha256","tribute.esm.js":"&P1wKqCfYULpR/ahSB98JP8xaxfikuZwwtT6I/SAo7/Y=.sha256","commonmark-hashtag.js":"&fudY0YdvcMjVCSZ0oiCqUt0+bVT0a06j5TcjWaCDO8E=.sha256"}}

apps/cory/ssb/emojis.js

@@ -12,11 +12,6 @@ function get_emojis() {
 
 export function picker(callback, anchor) {
 	get_emojis().then(function(json) {
-		let existing = document.getElementById('emoji_picker');
-		if (existing) {
-			existing.parentElement.removeChild(existing);
-			return;
-		}
 		let div = document.createElement('div');
 		div.id = 'emoji_picker';
 		div.style.color = '#000';
@@ -24,9 +19,9 @@ export function picker(callback, anchor) {
 		div.style.border = '1px solid #000';
 		div.style.display = 'block';
 		div.style.position = 'absolute';
-		div.style.minWidth = '16em';
+		div.style.minWidth = 'min(16em, 90vw)';
-		div.style.width = '16em';
+		div.style.width = 'min(16em, 90vw)';
-		div.style.maxWidth = '16em';
+		div.style.maxWidth = 'min(16em, 90vw)';
 		div.style.maxHeight = '16em';
 		div.style.overflow = 'scroll';
 		div.style.fontWeight = 'bold';
@@ -41,10 +36,16 @@ export function picker(callback, anchor) {
 		div.appendChild(input);
 		let list = document.createElement('div');
 		div.appendChild(list);
+		div.addEventListener('mousedown', function(event) {
+			event.stopPropagation();
+		});
 
 		function cleanup() {
+			console.log('emoji cleanup');
 			div.parentElement.removeChild(div);
 			window.removeEventListener('keydown', key_down);
+			console.log('removing click');
+			document.body.removeEventListener('mousedown', cleanup);
 		}
 
 		function key_down(event) {
@@ -77,6 +78,7 @@ export function picker(callback, anchor) {
 					emoji.style.cursor = 'pointer';
 					emoji.onclick = function() {
 						callback(entry);
+						cleanup();
 					}
 					emoji.title = entry.name;
 					emoji.appendChild(document.createTextNode(entry.emoji));
@@ -100,6 +102,8 @@ export function picker(callback, anchor) {
 		div.style.left = '50%';
 		div.style.transform = 'translate(-50%, -50%)';
 		input.focus();
+		console.log('adding click');
+		document.body.addEventListener('mousedown', cleanup);
 		window.addEventListener('keydown', key_down);
 	});
 }

apps/cory/ssb/tf-compose.js

@@ -57,6 +57,7 @@ class TfComposeElement extends LitElement {
 			}
 			this.mentions[link].name = name.startsWith('@') ? name.substring(1) : name;
 			this.mentions = Object.assign({}, this.mentions);
+			console.log(this.mentions);
 		}
 		return tfutils.markdown(text);
 	}
@@ -67,9 +68,20 @@ class TfComposeElement extends LitElement {
 		preview.innerHTML = this.process_text(edit.value);
 	}
 
+	notify(draft) {
+		this.dispatchEvent(new CustomEvent('tf-draft', {
+			bubbles: true,
+			composed: true,
+			detail: {
+				id: this.branch,
+				draft: draft
+			},
+		}));
+	}
+
 	change(event) {
 		let edit = this.renderRoot.getElementById('edit');
-		this.dispatchEvent(new CustomEvent('tf-draft', {bubbles: true, composed: true, detail: {id: this.branch, draft: edit.value}}));
+		this.notify(edit.value);
 	}
 
 	convert_to_format(buffer, type, mime_type) {
@@ -167,7 +179,7 @@ class TfComposeElement extends LitElement {
 			edit.value = '';
 			self.mentions = {};
 			self.change();
-			self.dispatchEvent(new CustomEvent('tf-draft', {detail: {id: self.branch, discard: undefined}}));
+			self.notify(undefined);
 		}).catch(function(error) {
 			alert(error.message);
 		});
@@ -177,7 +189,9 @@ class TfComposeElement extends LitElement {
 		let edit = this.renderRoot.getElementById('edit');
 		edit.value = '';
 		this.change();
-		this.dispatchEvent(new CustomEvent('tf-draft', {bubble: true, composed: true, detail: {id: this.branch, discard: undefined}}));
+		let preview = this.renderRoot.getElementById('preview');
+		preview.innerHTML = '';
+		this.notify(undefined);
 	}
 
 	attach() {

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

@@ -169,12 +169,14 @@ class TfTabNewsElement extends LitElement {
 
 	draft(event) {
 		let id = event.detail.id || '';
+		let previous = this.drafts[id];
 		if (event.detail.draft !== undefined) {
-			let draft = {};
+			this.drafts[id] = event.detail.draft;
-			draft[id] = event.detail.draft;
-			this.drafts = Object.assign({}, this.drafts, draft);
 		} else {
 			delete this.drafts[id];
+		}
+		/* Only trigger a re-render if we're creating a new draft or discarding an old one. */
+		if ((previous !== undefined) != (event.detail.draft !== undefined)) {
 			this.drafts = Object.assign({}, this.drafts);
 		}
 		tfrpc.rpc.localStorageSet('drafts', JSON.stringify(this.drafts));