forked from cory/tildefriends
		
	Some emoji picker and drafts tweaks.
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4152 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
		@@ -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"}}
 | 
			
		||||
@@ -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);
 | 
			
		||||
	});
 | 
			
		||||
}
 | 
			
		||||
@@ -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() {
 | 
			
		||||
 
 | 
			
		||||
@@ -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));
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user