interfect/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Pull Requests Activity

Run prettier.

Browse Source
This commit is contained in:
Cory McWilliams
2024-02-24 11:09:34 -05:00
parent 8e7e0ed490
commit d5267be38c
90 changed files with 5789 additions and 2265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
apps/ssb/tf-compose.js
View File

@ -58,7 +58,9 @@ class TfComposeElement extends LitElement {
link: link,
};
}
draft.mentions[link].name = name.startsWith('@') ? name.substring(1) : name;
draft.mentions[link].name = name.startsWith('@')
? name.substring(1)
: name;
updated = true;
}
if (updated) {
@ -72,34 +74,39 @@ class TfComposeElement extends LitElement {
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');
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) {
this.dispatchEvent(new CustomEvent('tf-draft', {
bubbles: true,
composed: true,
detail: {
id: this.branch,
draft: draft
},
}));
this.dispatchEvent(
new CustomEvent('tf-draft', {
bubbles: true,
composed: true,
detail: {
id: this.branch,
draft: draft,
},
})
);
}
change() {
let draft = this.get_draft();
draft.text = this.renderRoot.getElementById('edit')?.value;
draft.content_warning = this.renderRoot.getElementById('content_warning')?.value;
draft.content_warning =
this.renderRoot.getElementById('content_warning')?.value;
this.notify(draft);
}
convert_to_format(buffer, type, mime_type) {
return new Promise(function(resolve, reject) {
return new Promise(function (resolve, reject) {
let img = new Image();
img.onload = function() {
img.onload = function () {
let canvas = document.createElement('canvas');
let width_scale = Math.min(img.width, 1024) / img.width;
let height_scale = Math.min(img.height, 1024) / img.height;
@ -109,13 +116,17 @@ class TfComposeElement extends LitElement {
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0, canvas.width, canvas.height);
let data_url = canvas.toDataURL(mime_type);
let result = atob(data_url.split(',')[1]).split('').map(x => x.charCodeAt(0));
let result = atob(data_url.split(',')[1])
.split('')
.map((x) => x.charCodeAt(0));
resolve(result);
};
img.onerror = function(event) {
img.onerror = function (event) {
reject(new Error('Failed to load image.'));
};
let raw = Array.from(new Uint8Array(buffer)).map(b => String.fromCharCode(b)).join('');
let raw = Array.from(new Uint8Array(buffer))
.map((b) => String.fromCharCode(b))
.join('');
let original = `data:${type};base64,${btoa(raw)}`;
img.src = original;
});
@ -131,7 +142,11 @@ class TfComposeElement extends LitElement {
let best_buffer;
let best_type;
for (let format of ['image/png', 'image/jpeg', 'image/webp']) {
let test_buffer = await self.convert_to_format(buffer, file.type, format);
let test_buffer = await self.convert_to_format(
buffer,
file.type,
format
);
if (!best_buffer || test_buffer.length < best_buffer.length) {
best_buffer = test_buffer;
best_type = format;
@ -157,7 +172,7 @@ class TfComposeElement extends LitElement {
edit.value += `\n![${name}](${id})`;
self.change();
self.input();
} catch(e) {
} catch (e) {
alert(e?.message);
}
}
@ -201,11 +216,15 @@ class TfComposeElement extends LitElement {
to = [...to];
message.recps = to;
console.log('message is now', message);
message = await tfrpc.rpc.encrypt(this.whoami, to, JSON.stringify(message));
message = await tfrpc.rpc.encrypt(
this.whoami,
to,
JSON.stringify(message)
);
console.log('encrypted as', message);
}
try {
await tfrpc.rpc.appendMessage(this.whoami, message).then(function() {
await tfrpc.rpc.appendMessage(this.whoami, message).then(function () {
edit.value = '';
self.change();
self.notify(undefined);
@ -230,7 +249,7 @@ class TfComposeElement extends LitElement {
let edit = this.renderRoot.getElementById('edit');
let input = document.createElement('input');
input.type = 'file';
input.onchange = function(event) {
input.onchange = function (event) {
let file = event.target.files[0];
self.add_file(file);
};
@ -241,12 +260,15 @@ class TfComposeElement extends LitElement {
this.last_autocomplete = text;
let results = [];
try {
let rows = await tfrpc.rpc.query(`
let rows = await tfrpc.rpc.query(
`
SELECT messages.content FROM messages_fts(?)
JOIN messages ON messages.rowid = messages_fts.rowid
WHERE messages.content LIKE ?
ORDER BY timestamp DESC LIMIT 10
`, ['"' + text.replace('"', '""') + '"', `%![%${text}%](%)%`]);
`,
['"' + text.replace('"', '""') + '"', `%![%${text}%](%)%`]
);
for (let row of rows) {
for (let match of row.content.matchAll(/!\[([^\]]*)\]\((&.*?)\)/g)) {
if (match[1].toLowerCase().indexOf(text.toLowerCase()) != -1) {
@ -265,15 +287,18 @@ class TfComposeElement extends LitElement {
let tribute = new Tribute({
collection: [
{
values: Object.entries(this.users).map(x => ({key: x[1].name, value: x[0]})),
selectTemplate: function(item) {
values: Object.entries(this.users).map((x) => ({
key: x[1].name,
value: x[0],
})),
selectTemplate: function (item) {
return `[@${item.original.key}](${item.original.value})`;
},
},
{
trigger: '&',
values: this.autocomplete,
selectTemplate: function(item) {
selectTemplate: function (item) {
return `![${item.original.key}](${item.original.value})`;
},
},
@ -293,8 +318,11 @@ class TfComposeElement extends LitElement {
let encrypt = this.renderRoot.getElementById('encrypt_to');
if (encrypt) {
let tribute = new Tribute({
values: Object.entries(this.users).map(x => ({key: x[1].name, value: x[0]})),
selectTemplate: function(item) {
values: Object.entries(this.users).map((x) => ({
key: x[1].name,
value: x[0],
})),
selectTemplate: function (item) {
return item.original.value;
},
});
@ -311,20 +339,30 @@ class TfComposeElement extends LitElement {
render_mention(mention) {
let self = this;
return html`
<div style="display: flex; flex-direction: row">
<div style="align-self: center; margin: 0.5em">
<button class="w3-button w3-dark-grey" title="Remove ${mention.name} mention" @click=${() => self.remove_mention(mention.link)}>🚮</button>
return html` <div style="display: flex; flex-direction: row">
<div style="align-self: center; margin: 0.5em">
<button
class="w3-button w3-dark-grey"
title="Remove ${mention.name} mention"
@click=${() => self.remove_mention(mention.link)}
>
🚮
</button>
</div>
<div style="display: flex; flex-direction: column">
<h3>${mention.name}</h3>
<div style="padding-left: 1em">
${Object.entries(mention)
.filter((x) => x[0] != 'name')
.map(
(x) =>
html`<div>
<span style="font-weight: bold">${x[0]}</span>: ${x[1]}
</div>`
)}
</div>
<div style="display: flex; flex-direction: column">
<h3>${mention.name}</h3>
<div style="padding-left: 1em">
${Object.entries(mention)
.filter(x => x[0] != 'name')
.map(x => html`<div><span style="font-weight: bold">${x[0]}</span>: ${x[1]}</div>`)}
</div>
</div>
</div>`;
</div>
</div>`;
}
render_attach_app() {
@ -359,12 +397,21 @@ class TfComposeElement extends LitElement {
return html`
<div class="w3-card-4 w3-margin w3-padding">
<select id="select" class="w3-select w3-dark-grey">
${Object.keys(self.apps).map(app => html`<option value=${app}>${app}</option>`)}
${Object.keys(self.apps).map(
(app) => html`<option value=${app}>${app}</option>`
)}
</select>
<button class="w3-button w3-dark-grey" @click=${attach_selected_app}>Attach</button>
<button class="w3-button w3-dark-grey" @click=${() => this.apps = null}>Cancel</button>
<button class="w3-button w3-dark-grey" @click=${attach_selected_app}>
Attach
</button>
<button
class="w3-button w3-dark-grey"
@click=${() => (this.apps = null)}
>
Cancel
</button>
</div>
`;
`;
}
}
@ -374,9 +421,16 @@ class TfComposeElement extends LitElement {
self.apps = await tfrpc.rpc.apps();
}
if (!this.apps) {
return html`<button class="w3-button w3-dark-grey" @click=${attach_app}>Attach App</button>`;
return html`<button class="w3-button w3-dark-grey" @click=${attach_app}>
Attach App
</button>`;
} else {
return html`<button class="w3-button w3-dark-grey" @click=${() => this.apps = null}>Discard App</button>`;
return html`<button
class="w3-button w3-dark-grey"
@click=${() => (this.apps = null)}
>
Discard App
</button>`;
}
}
@ -435,11 +489,13 @@ class TfComposeElement extends LitElement {
<button class="w3-button w3-dark-grey" @click=${() => this.set_encrypt(undefined)}>🚮</button>
</div>
<ul>
${draft.encrypt_to.map(x => html`
${draft.encrypt_to.map(
(x) => html`
<li>
<tf-user id=${x} .users=${this.users}></tf-user>
<input type="button" class="w3-button w3-dark-grey" value="🚮" @click=${() => this.set_encrypt(draft.encrypt_to.filter(id => id != x))}></input>
</li>`)}
<input type="button" class="w3-button w3-dark-grey" value="🚮" @click=${() => this.set_encrypt(draft.encrypt_to.filter((id) => id != x))}></input>
</li>`
)}
</ul>
`;
}
@ -455,34 +511,65 @@ class TfComposeElement extends LitElement {
let self = this;
let draft = self.get_draft();
let content_warning =
draft.content_warning !== undefined ?
html`<div class="w3-panel w3-round-xlarge w3-blue">
<p id="content_warning_preview">${draft.content_warning}</p>
</div>` :
undefined;
let encrypt = draft.encrypt_to !== undefined ?
undefined :
html`<button class="w3-button w3-dark-grey" @click=${() => this.set_encrypt([])}>🔐</button>`;
draft.content_warning !== undefined
? html`<div class="w3-panel w3-round-xlarge w3-blue">
<p id="content_warning_preview">${draft.content_warning}</p>
</div>`
: undefined;
let encrypt =
draft.encrypt_to !== undefined
? undefined
: html`<button
class="w3-button w3-dark-grey"
@click=${() => this.set_encrypt([])}
>
🔐
</button>`;
let result = html`
<div class="w3-card-4 w3-blue-grey w3-padding" style="box-sizing: border-box">
<div
class="w3-card-4 w3-blue-grey w3-padding"
style="box-sizing: border-box"
>
${this.render_encrypt()}
<div style="display: flex; flex-direction: row; width: 100%; gap: 4px">
<div style="flex: 1 0 50%">
<p><textarea class="w3-input w3-dark-grey w3-border" style="resize: vertical" placeholder="Write a post here." id="edit" @input=${this.input} @change=${this.change} @paste=${this.paste}>${draft.text}</textarea></p>
<p>
<textarea
class="w3-input w3-dark-grey w3-border"
style="resize: vertical"
placeholder="Write a post here."
id="edit"
@input=${this.input}
@change=${this.change}
@paste=${this.paste}
>
${draft.text}</textarea
>
</p>
</div>
<div style="flex: 1 0 50%">
${content_warning}
<div id="preview"></div>
</div>
</div>
${Object.values(draft.mentions || {}).map(x => self.render_mention(x))}
${this.render_attach_app()}
${this.render_content_warning()}
<button class="w3-button w3-dark-grey" id="submit" @click=${this.submit}>Submit</button>
<button class="w3-button w3-dark-grey" @click=${this.attach}>Attach</button>
${this.render_attach_app_button()}
${encrypt}
<button class="w3-button w3-dark-grey" @click=${this.discard}>Discard</button>
${Object.values(draft.mentions || {}).map((x) =>
self.render_mention(x)
)}
${this.render_attach_app()} ${this.render_content_warning()}
<button
class="w3-button w3-dark-grey"
id="submit"
@click=${this.submit}
>
Submit
</button>
<button class="w3-button w3-dark-grey" @click=${this.attach}>
Attach
</button>
${this.render_attach_app_button()} ${encrypt}
<button class="w3-button w3-dark-grey" @click=${this.discard}>
Discard
</button>
</div>
`;
return result;