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/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.width = '16em';
-		div.style.maxWidth = '16em';
+		div.style.minWidth = 'min(16em, 90vw)';
+		div.style.width = 'min(16em, 90vw)';
+		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 = {};
-			draft[id] = event.detail.draft;
-			this.drafts = Object.assign({}, this.drafts, draft);
+			this.drafts[id] = event.detail.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));