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:
Cory McWilliams 2023-01-28 19:39:41 +00:00
parent ef7f9db9c4
commit 48cd08e095
4 changed files with 35 additions and 15 deletions

View File

@ -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"}}

View File

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

View File

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

View File

@ -169,12 +169,14 @@ class TfTabNewsElement extends LitElement {
draft(event) { draft(event) {
let id = event.detail.id || ''; let id = event.detail.id || '';
let previous = this.drafts[id];
if (event.detail.draft !== undefined) { 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 { } else {
delete this.drafts[id]; 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); this.drafts = Object.assign({}, this.drafts);
} }
tfrpc.rpc.localStorageSet('drafts', JSON.stringify(this.drafts)); tfrpc.rpc.localStorageSet('drafts', JSON.stringify(this.drafts));