From 48cd08e09503cbbab570b2a6a138ce4a66d832a9 Mon Sep 17 00:00:00 2001 From: Cory McWilliams Date: Sat, 28 Jan 2023 19:39:41 +0000 Subject: [PATCH] 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 | 2 +- apps/cory/ssb/emojis.js | 20 ++++++++++++-------- apps/cory/ssb/tf-compose.js | 20 +++++++++++++++++--- apps/cory/ssb/tf-tab-news.js | 8 +++++--- 4 files changed, 35 insertions(+), 15 deletions(-) diff --git a/apps/cory/ssb.json b/apps/cory/ssb.json index c73ec09e..20f159a6 100644 --- a/apps/cory/ssb.json +++ b/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"}} \ No newline at end of file +{"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"}} \ No newline at end of file diff --git a/apps/cory/ssb/emojis.js b/apps/cory/ssb/emojis.js index 7881a3e6..c678b084 100644 --- a/apps/cory/ssb/emojis.js +++ b/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); }); } \ No newline at end of file diff --git a/apps/cory/ssb/tf-compose.js b/apps/cory/ssb/tf-compose.js index 9eb60873..6bc1ee0d 100644 --- a/apps/cory/ssb/tf-compose.js +++ b/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() { diff --git a/apps/cory/ssb/tf-tab-news.js b/apps/cory/ssb/tf-tab-news.js index 7585d94d..1fc5e45c 100644 --- a/apps/cory/ssb/tf-tab-news.js +++ b/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));