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