Update lit element. Better drafts. Compose content warnings.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4157 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-01-30 01:45:23 +00:00
parent 3c288f7f68
commit 0ba54c2b7b
6 changed files with 106 additions and 25 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":"&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"}}
{"type":"tildefriends-app","files":{"app.js":"&1HWTkyCc1doft6dyKF5FDxtRAErNeY25CBrfZbKPpyo=.sha256","lit-all.min.js":"&FjJo4WtPgPmzEeF6Uhkhzv1FA7tyYfYSRuQz5zwc4fU=.sha256","index.html":"&TxhFekB9ov7tf/fmkAg7x5797i27oLidhgxEfDKC0T0=.sha256","script.js":"&G8puK9Q4MngHy3D4ppcKyT49WKbHD2OCeUcAw2ghTDE=.sha256","lit-all.min.js.map":"&H9HlMb6gIKYsWSNd+Kp0HwwpPwnlagEgi8B583aOEQQ=.sha256","tf-id-picker.js":"&maN8DUFrmRxW5nsVyOAMk5k1ekcz/pfzvSS99ac3jo8=.sha256","tf-app.js":"&F0fyawIO410YFidrzFjlHeY++sZy6ledf6CAXB+45U4=.sha256","tf-message.js":"&WYh0KTqqtlZF7ahldWokUt1yLdlThO5j1g2xlpfqI3U=.sha256","tf-user.js":"&bXTedgBudTQLXEBPY9R8OLfQ/ZLpo8YRU9Oq/wuGG3Y=.sha256","tf-utils.js":"&lYNeL7cVlDgcqrfkoRIe69DHZeqSZMiHhZIieblHbU0=.sha256","commonmark.min.js":"&bfBaMLU19d1p/vPBF9hlARqDX002KXG/UOfxOahZhe4=.sha256","tf-compose.js":"&AA04w0u0erTaBbJdMmnm1mukslXzCqozpv6UQPLZszE=.sha256","emojis.json":"&h3P4pez+AI4aYdsN0dJ3pbUEFR0276t9AM20caj/W/s=.sha256","emojis.js":"&tOkUocccQWBzkNzSEf9VMltkTSHcUALYSPYVWmJMoBc=.sha256","tf-styles.js":"&2Za+CmlZKGhUnWvGQdZBe8Plxv59WZ3nX5u5rbfwwkY=.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"}}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -11,7 +11,6 @@ class TfComposeElement extends LitElement {
users: {type: Object},
root: {type: String},
branch: {type: String},
mentions: {type: Object},
apps: {type: Object},
drafts: {type: Object},
}
@ -24,7 +23,6 @@ class TfComposeElement extends LitElement {
this.users = {};
this.root = undefined;
this.branch = undefined;
this.mentions = {};
this.apps = undefined;
this.drafts = {};
}
@ -34,6 +32,8 @@ class TfComposeElement extends LitElement {
return '';
}
/* Update mentions. */
let draft = this.get_draft();
let updated = false;
for (let match of text.matchAll(/\[([^\[]+)]\(([@&%][^\)]+)/g)) {
let name = match[1];
let link = match[2];
@ -50,14 +50,19 @@ class TfComposeElement extends LitElement {
break;
}
}
if (!this.mentions[link]) {
this.mentions[link] = {
if (!draft.mentions) {
draft.mentions = {};
}
if (!draft.mentions[link]) {
draft.mentions[link] = {
link: link,
}
}
this.mentions[link].name = name.startsWith('@') ? name.substring(1) : name;
this.mentions = Object.assign({}, this.mentions);
console.log(this.mentions);
draft.mentions[link].name = name.startsWith('@') ? name.substring(1) : name;
updated = true;
}
if (updated) {
this.requestUpdate();
}
return tfutils.markdown(text);
}
@ -66,6 +71,11 @@ class TfComposeElement extends LitElement {
let edit = this.renderRoot.getElementById('edit');
let preview = this.renderRoot.getElementById('preview');
preview.innerHTML = this.process_text(edit.value);
let content_warning = this.renderRoot.getElementById('content_warning');
let content_warning_preview = this.renderRoot.getElementById('content_warning_preview');
if (content_warning && content_warning_preview) {
content_warning_preview.innerText = content_warning.value;
}
}
notify(draft) {
@ -79,9 +89,11 @@ class TfComposeElement extends LitElement {
}));
}
change(event) {
let edit = this.renderRoot.getElementById('edit');
this.notify(edit.value);
change() {
let draft = this.get_draft();
draft.text = this.renderRoot.getElementById('edit')?.value;
draft.content_warning = this.renderRoot.getElementById('content_warning')?.value;
this.notify(draft);
}
convert_to_format(buffer, type, mime_type) {
@ -111,6 +123,7 @@ class TfComposeElement extends LitElement {
async add_file(file) {
try {
let draft = this.get_draft();
let self = this;
let buffer = await file.arrayBuffer();
let type = file.type;
@ -131,16 +144,19 @@ class TfComposeElement extends LitElement {
}
let id = await tfrpc.rpc.store_blob(buffer);
let name = type.split('/')[0] + ':' + file.name;
self.mentions[id] = {
if (!draft.mentions) {
draft.mentions = {};
}
draft.mentions[id] = {
link: id,
name: name,
type: type,
size: buffer.length ?? buffer.byteLength,
};
self.mentions = Object.assign({}, self.mentions);
let edit = self.renderRoot.getElementById('edit');
edit.value += `\n![${name}](${id})`;
self.change();
self.input();
} catch(e) {
alert(e?.message);
}
@ -162,6 +178,7 @@ class TfComposeElement extends LitElement {
submit() {
let self = this;
let draft = this.get_draft();
let edit = this.renderRoot.getElementById('edit');
let message = {
type: 'post',
@ -171,15 +188,18 @@ class TfComposeElement extends LitElement {
message.root = this.root;
message.branch = this.branch;
}
if (Object.values(this.mentions).length) {
message.mentions = Object.values(this.mentions);
if (Object.values(draft.mentions || {}).length) {
message.mentions = Object.values(draft.mentions);
}
if (draft.content_warning !== undefined) {
message.contentWarning = draft.content_warning;
}
console.log('Would post:', message);
tfrpc.rpc.appendMessage(this.whoami, message).then(function() {
edit.value = '';
self.mentions = {};
self.change();
self.notify(undefined);
self.requestUpdate();
}).catch(function(error) {
alert(error.message);
});
@ -216,9 +236,21 @@ class TfComposeElement extends LitElement {
tribute.attach(this.renderRoot.getElementById('edit'));
}
updated() {
super.updated();
let edit = this.renderRoot.getElementById('edit');
if (this.last_updated_text !== edit.value) {
let preview = this.renderRoot.getElementById('preview');
preview.innerHTML = this.process_text(edit.value);
this.last_updated_text = edit.value;
}
}
remove_mention(id) {
delete this.mentions[id];
this.mentions = Object.assign({}, this.mentions);
let draft = this.get_draft();
delete draft.mentions[id];
this.notify(draft);
this.requestUpdate();
}
render_mention(mention) {
@ -251,7 +283,10 @@ class TfComposeElement extends LitElement {
};
}
}
this.mentions = Object.assign(this.mentions || {}, mentions);
let draft = this.get_draft();
draft.mentions = Object.assign(draft.mentions || {}, mentions);
this.requestUpdate();
this.notify(draft);
this.apps = null;
}
@ -279,14 +314,53 @@ class TfComposeElement extends LitElement {
}
}
set_content_warning(value) {
let draft = this.get_draft();
draft.content_warning = value;
this.notify(draft);
this.requestUpdate();
}
render_content_warning() {
let self = this;
let draft = this.get_draft();
if (draft.content_warning !== undefined) {
return html`
<div>
<input type="checkbox" id="cw" @change=${() => self.set_content_warning(undefined)} checked></input>
<label for="cw">CW</label>
<input type="text" id="content_warning" @input=${this.input} @change=${this.change} value=${draft.content_warning}></input>
</div>
`;
} else {
return html`
<input type="checkbox" id="cw" @change=${() => self.set_content_warning('')}></input>
<label for="cw">CW</label>
`;
}
}
get_draft() {
return this.drafts[this.branch || ''] || {};
}
render() {
let self = this;
let draft = self.get_draft();
let content_warning =
draft.content_warning !== undefined ?
html`<div id="content_warning_preview" class="content_warning">${draft.content_warning}</div>` :
undefined;
let result = html`
<div style="display: flex; flex-direction: row; width: 100%">
<textarea id="edit" @input=${this.input} @change=${this.change} @paste=${this.paste} style="flex: 1 0 50%">${this.drafts[this.branch || '']}</textarea>
<div id="preview" style="flex: 1 0 50%"></div>
<textarea id="edit" @input=${this.input} @change=${this.change} @paste=${this.paste} style="flex: 1 0 50%">${draft.text}</textarea>
<div style="flex: 1 0 50%">
${content_warning}
<div id="preview"></div>
</div>
${Object.values(this.mentions).map(x => self.render_mention(x))}
</div>
${Object.values(draft.mentions || {}).map(x => self.render_mention(x))}
${this.render_content_warning()}
${this.render_attach_app()}
<input type="button" value="Submit" @click=${this.submit}></input>
<input type="button" value="Attach" @click=${this.attach}></input>

View File

@ -300,7 +300,7 @@ class TfMessageElement extends LitElement {
this.render_raw() :
unsafeHTML(tfutils.markdown(content.text));
let content_warning = html`
<div style="border: 1px solid #fff; border-radius: 1em; padding: 8px; margin: 4px" @click=${x => this.toggle_expanded(':cw')}>${content.contentWarning}</div>
<div class="content_warning" @click=${x => this.toggle_expanded(':cw')}>${content.contentWarning}</div>
`;
let content_html =
html`

View File

@ -29,4 +29,11 @@ img {
color: #088;
background-color: #fff;
}
.content_warning {
border: 1px solid #fff;
border-radius: 1em;
padding: 8px;
margin: 4px;
}
`;