forked from cory/tildefriends
Run prettier.
This commit is contained in:
@ -76,7 +76,7 @@ tfrpc.register(function getHash(id, message) {
|
||||
tfrpc.register(function setHash(hash) {
|
||||
return app.setHash(hash);
|
||||
});
|
||||
ssb.addEventListener('message', async function(id) {
|
||||
ssb.addEventListener('message', async function (id) {
|
||||
await tfrpc.rpc.notifyNewMessage(id);
|
||||
});
|
||||
tfrpc.register(async function store_blob(blob) {
|
||||
@ -100,18 +100,18 @@ tfrpc.register(async function try_decrypt(id, content) {
|
||||
tfrpc.register(async function encrypt(id, recipients, content) {
|
||||
return await ssb.privateMessageEncrypt(id, recipients, content);
|
||||
});
|
||||
ssb.addEventListener('broadcasts', async function() {
|
||||
ssb.addEventListener('broadcasts', async function () {
|
||||
await tfrpc.rpc.set('broadcasts', await ssb.getBroadcasts());
|
||||
});
|
||||
|
||||
core.register('onConnectionsChanged', async function() {
|
||||
core.register('onConnectionsChanged', async function () {
|
||||
await tfrpc.rpc.set('connections', await ssb.connections());
|
||||
});
|
||||
|
||||
async function main() {
|
||||
if (typeof(database) !== 'undefined') {
|
||||
if (typeof database !== 'undefined') {
|
||||
g_database = await database('ssb');
|
||||
}
|
||||
await app.setDocument(utf8Decode(await getFile('index.html')));
|
||||
}
|
||||
main();
|
||||
main();
|
||||
|
||||
@ -4,14 +4,14 @@ function get_emojis() {
|
||||
if (g_emojis) {
|
||||
return Promise.resolve(g_emojis);
|
||||
}
|
||||
return fetch('emojis.json').then(function(result) {
|
||||
return fetch('emojis.json').then(function (result) {
|
||||
g_emojis = result.json();
|
||||
return g_emojis;
|
||||
});
|
||||
}
|
||||
|
||||
export function picker(callback, anchor) {
|
||||
get_emojis().then(function(json) {
|
||||
get_emojis().then(function (json) {
|
||||
let div = document.createElement('div');
|
||||
div.id = 'emoji_picker';
|
||||
div.style.color = '#000';
|
||||
@ -36,7 +36,7 @@ export function picker(callback, anchor) {
|
||||
div.appendChild(input);
|
||||
let list = document.createElement('div');
|
||||
div.appendChild(list);
|
||||
div.addEventListener('mousedown', function(event) {
|
||||
div.addEventListener('mousedown', function (event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
@ -72,9 +72,11 @@ export function picker(callback, anchor) {
|
||||
list.appendChild(header);
|
||||
let any = false;
|
||||
for (let entry of Object.entries(row[1])) {
|
||||
if (search &&
|
||||
if (
|
||||
search &&
|
||||
search.length &&
|
||||
entry[0].toLowerCase().indexOf(search) == -1) {
|
||||
entry[0].toLowerCase().indexOf(search) == -1
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
let emoji = document.createElement('span');
|
||||
@ -109,4 +111,4 @@ export function picker(callback, anchor) {
|
||||
document.body.addEventListener('mousedown', cleanup);
|
||||
window.addEventListener('keydown', key_down);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html style="color: #fff">
|
||||
<head>
|
||||
<title>Tilde Friends</title>
|
||||
<base target="_top">
|
||||
<link rel="stylesheet" href="tribute.css"/>
|
||||
<base target="_top" />
|
||||
<link rel="stylesheet" href="tribute.css" />
|
||||
<style>
|
||||
.tribute-container {
|
||||
color: #000;
|
||||
@ -11,12 +11,14 @@
|
||||
</style>
|
||||
</head>
|
||||
<body style="background-color: #223a5e">
|
||||
<tf-app class="w3-deep-purple"/>
|
||||
<script>window.litDisableBundleWarning = true;</script>
|
||||
<tf-app class="w3-deep-purple" />
|
||||
<script>
|
||||
window.litDisableBundleWarning = true;
|
||||
</script>
|
||||
<script src="filesaver.min.js"></script>
|
||||
<script src="commonmark.min.js"></script>
|
||||
<script src="commonmark-linkify.js" type="module"></script>
|
||||
<script src="commonmark-hashtag.js" type="module"></script>
|
||||
<script src="script.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -14,4 +14,4 @@ import * as tf_tab_news_feed from './tf-tab-news-feed.js';
|
||||
import * as tf_tab_search from './tf-tab-search.js';
|
||||
import * as tf_tab_connections from './tf-tab-connections.js';
|
||||
import * as tf_tab_query from './tf-tab-query.js';
|
||||
import * as tf_tag from './tf-tag.js';
|
||||
import * as tf_tag from './tf-tag.js';
|
||||
|
||||
@ -34,9 +34,13 @@ class TfElement extends LitElement {
|
||||
this.users = {};
|
||||
this.loaded = false;
|
||||
this.tags = [];
|
||||
tfrpc.rpc.getBroadcasts().then(b => { self.broadcasts = b || []; });
|
||||
tfrpc.rpc.getConnections().then(c => { self.connections = c || []; });
|
||||
tfrpc.rpc.getHash().then(hash => self.set_hash(hash));
|
||||
tfrpc.rpc.getBroadcasts().then((b) => {
|
||||
self.broadcasts = b || [];
|
||||
});
|
||||
tfrpc.rpc.getConnections().then((c) => {
|
||||
self.connections = c || [];
|
||||
});
|
||||
tfrpc.rpc.getHash().then((hash) => self.set_hash(hash));
|
||||
tfrpc.register(function hashChanged(hash) {
|
||||
self.set_hash(hash);
|
||||
});
|
||||
@ -86,9 +90,14 @@ class TfElement extends LitElement {
|
||||
last_row_id: 0,
|
||||
};
|
||||
}
|
||||
let max_row_id = (await tfrpc.rpc.query(`
|
||||
let max_row_id = (
|
||||
await tfrpc.rpc.query(
|
||||
`
|
||||
SELECT MAX(rowid) AS max_row_id FROM messages
|
||||
`, []))[0].max_row_id;
|
||||
`,
|
||||
[]
|
||||
)
|
||||
)[0].max_row_id;
|
||||
for (let id of Object.keys(cache.about)) {
|
||||
if (ids.indexOf(id) == -1) {
|
||||
delete cache.about[id];
|
||||
@ -120,17 +129,21 @@ class TfElement extends LitElement {
|
||||
ORDER BY messages.author, messages.sequence
|
||||
`,
|
||||
[
|
||||
JSON.stringify(ids.filter(id => cache.about[id])),
|
||||
JSON.stringify(ids.filter(id => !cache.about[id])),
|
||||
JSON.stringify(ids.filter((id) => cache.about[id])),
|
||||
JSON.stringify(ids.filter((id) => !cache.about[id])),
|
||||
cache.last_row_id,
|
||||
max_row_id,
|
||||
]);
|
||||
]
|
||||
);
|
||||
for (let about of abouts) {
|
||||
let content = JSON.parse(about.content);
|
||||
if (content.about === about.author) {
|
||||
delete content.type;
|
||||
delete content.about;
|
||||
cache.about[about.author] = Object.assign(cache.about[about.author] || {}, content);
|
||||
cache.about[about.author] = Object.assign(
|
||||
cache.about[about.author] || {},
|
||||
content
|
||||
);
|
||||
}
|
||||
}
|
||||
cache.last_row_id = max_row_id;
|
||||
@ -150,10 +163,8 @@ class TfElement extends LitElement {
|
||||
JOIN json_each(?) AS following ON messages.author = following.value
|
||||
WHERE messages.id = ?
|
||||
`,
|
||||
[
|
||||
JSON.stringify(this.following),
|
||||
id,
|
||||
]);
|
||||
[JSON.stringify(this.following), id]
|
||||
);
|
||||
if (messages && messages.length) {
|
||||
this.unread = [...this.unread, ...messages];
|
||||
this.unread = this.unread.slice(this.unread.length - 1024);
|
||||
@ -173,7 +184,7 @@ class TfElement extends LitElement {
|
||||
}
|
||||
|
||||
async create_identity() {
|
||||
if (confirm("Are you sure you want to create a new identity?")) {
|
||||
if (confirm('Are you sure you want to create a new identity?')) {
|
||||
await tfrpc.rpc.createIdentity();
|
||||
this.ids = (await tfrpc.rpc.getIdentities()) || [];
|
||||
if (this.ids && !this.whoami) {
|
||||
@ -185,15 +196,30 @@ class TfElement extends LitElement {
|
||||
render_id_picker() {
|
||||
return html`
|
||||
<div style="display: flex; gap: 8px">
|
||||
<tf-id-picker id="picker" style="flex: 1 1 auto" selected=${this.whoami} .ids=${this.ids} .users=${this.users} @change=${this._handle_whoami_changed}></tf-id-picker>
|
||||
<button class="w3-button w3-dark-grey w3-border" style="flex: 0 0 auto" @click=${this.create_identity} id="create_identity">Create Identity</button>
|
||||
<tf-id-picker
|
||||
id="picker"
|
||||
style="flex: 1 1 auto"
|
||||
selected=${this.whoami}
|
||||
.ids=${this.ids}
|
||||
.users=${this.users}
|
||||
@change=${this._handle_whoami_changed}
|
||||
></tf-id-picker>
|
||||
<button
|
||||
class="w3-button w3-dark-grey w3-border"
|
||||
style="flex: 0 0 auto"
|
||||
@click=${this.create_identity}
|
||||
id="create_identity"
|
||||
>
|
||||
Create Identity
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async load_recent_tags() {
|
||||
let start = new Date();
|
||||
this.tags = await tfrpc.rpc.query(`
|
||||
this.tags = await tfrpc.rpc.query(
|
||||
`
|
||||
WITH
|
||||
recent AS (SELECT id, content FROM messages
|
||||
WHERE messages.timestamp > ? AND json_extract(content, '$.type') = 'post'
|
||||
@ -207,7 +233,9 @@ class TfElement extends LitElement {
|
||||
combined AS (SELECT id, tag FROM recent_channels UNION ALL SELECT id, tag FROM recent_mentions),
|
||||
by_message AS (SELECT DISTINCT id, tag FROM combined)
|
||||
SELECT tag, COUNT(*) AS count FROM by_message GROUP BY tag ORDER BY count DESC LIMIT 10
|
||||
`, [new Date() - 7 * 24 * 60 * 60 * 1000]);
|
||||
`,
|
||||
[new Date() - 7 * 24 * 60 * 60 * 1000]
|
||||
);
|
||||
console.log('tags took', (new Date() - start) / 1000.0, 'seconds');
|
||||
}
|
||||
|
||||
@ -241,23 +269,53 @@ class TfElement extends LitElement {
|
||||
let users = this.users;
|
||||
if (this.tab === 'news') {
|
||||
return html`
|
||||
<tf-tab-news id="tf-tab-news" .following=${this.following} whoami=${this.whoami} .users=${this.users} hash=${this.hash} .unread=${this.unread} @refresh=${() => this.unread = []}></tf-tab-news>
|
||||
<tf-tab-news
|
||||
id="tf-tab-news"
|
||||
.following=${this.following}
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
hash=${this.hash}
|
||||
.unread=${this.unread}
|
||||
@refresh=${() => (this.unread = [])}
|
||||
></tf-tab-news>
|
||||
`;
|
||||
} else if (this.tab === 'connections') {
|
||||
return html`
|
||||
<tf-tab-connections .users=${this.users} .connections=${this.connections} .broadcasts=${this.broadcasts}></tf-tab-connections>
|
||||
<tf-tab-connections
|
||||
.users=${this.users}
|
||||
.connections=${this.connections}
|
||||
.broadcasts=${this.broadcasts}
|
||||
></tf-tab-connections>
|
||||
`;
|
||||
} else if (this.tab === 'mentions') {
|
||||
return html`
|
||||
<tf-tab-mentions .following=${this.following} whoami=${this.whoami} .users=${this.users}}></tf-tab-mentions>
|
||||
<tf-tab-mentions
|
||||
.following=${this.following}
|
||||
whoami=${this.whoami}
|
||||
.users="${this.users}}"
|
||||
></tf-tab-mentions>
|
||||
`;
|
||||
} else if (this.tab === 'search') {
|
||||
return html`
|
||||
<tf-tab-search .following=${this.following} whoami=${this.whoami} .users=${this.users} query=${this.hash?.startsWith('#q=') ? decodeURIComponent(this.hash.substring(3)) : null}></tf-tab-search>
|
||||
<tf-tab-search
|
||||
.following=${this.following}
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
query=${this.hash?.startsWith('#q=')
|
||||
? decodeURIComponent(this.hash.substring(3))
|
||||
: null}
|
||||
></tf-tab-search>
|
||||
`;
|
||||
} else if (this.tab === 'query') {
|
||||
return html`
|
||||
<tf-tab-query .following=${this.following} whoami=${this.whoami} .users=${this.users} query=${this.hash?.startsWith('#sql=') ? decodeURIComponent(this.hash.substring(5)) : null}></tf-tab-query>
|
||||
<tf-tab-query
|
||||
.following=${this.following}
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
query=${this.hash?.startsWith('#sql=')
|
||||
? decodeURIComponent(this.hash.substring(5))
|
||||
: null}
|
||||
></tf-tab-query>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -280,7 +338,7 @@ class TfElement extends LitElement {
|
||||
|
||||
if (!this.loading && this.whoami && this.loaded !== this.whoami) {
|
||||
this.loading = true;
|
||||
this.load().finally(function() {
|
||||
this.load().finally(function () {
|
||||
self.loading = false;
|
||||
});
|
||||
}
|
||||
@ -295,21 +353,32 @@ class TfElement extends LitElement {
|
||||
|
||||
let tabs = html`
|
||||
<div class="w3-bar w3-black">
|
||||
${Object.entries(k_tabs).map(([k, v]) => html`
|
||||
<button title=${v} class="w3-bar-item w3-padding-large w3-hover-gray tab ${self.tab == v ? 'w3-red' : 'w3-black'}" @click=${() => self.set_tab(v)}>${k}</button>
|
||||
`)}
|
||||
${Object.entries(k_tabs).map(
|
||||
([k, v]) => html`
|
||||
<button
|
||||
title=${v}
|
||||
class="w3-bar-item w3-padding-large w3-hover-gray tab ${self.tab ==
|
||||
v
|
||||
? 'w3-red'
|
||||
: 'w3-black'}"
|
||||
@click=${() => self.set_tab(v)}
|
||||
>
|
||||
${k}
|
||||
</button>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
let contents =
|
||||
!this.loaded ?
|
||||
this.loading ?
|
||||
html`<div>Loading...</div>` :
|
||||
html`<div>Select or create an identity.</div>` :
|
||||
this.render_tab();
|
||||
let contents = !this.loaded
|
||||
? this.loading
|
||||
? html`<div>Loading...</div>`
|
||||
: html`<div>Select or create an identity.</div>`
|
||||
: this.render_tab();
|
||||
return html`
|
||||
${this.render_id_picker()}
|
||||
${tabs}
|
||||
${this.tags.map(x => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`)}
|
||||
${this.render_id_picker()} ${tabs}
|
||||
${this.tags.map(
|
||||
(x) => html`<tf-tag tag=${x.tag} count=${x.count}></tf-tag>`
|
||||
)}
|
||||
${contents}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -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`;
|
||||
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.replace('"', '""') + '"', `%%`]
|
||||
);
|
||||
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 ``;
|
||||
},
|
||||
},
|
||||
@ -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;
|
||||
|
||||
@ -3,8 +3,8 @@ import * as tfrpc from '/static/tfrpc.js';
|
||||
import {styles} from './tf-styles.js';
|
||||
|
||||
/*
|
||||
** Provide a list of IDs, and this lets the user pick one.
|
||||
*/
|
||||
** Provide a list of IDs, and this lets the user pick one.
|
||||
*/
|
||||
class TfIdentityPickerElement extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
@ -24,15 +24,28 @@ class TfIdentityPickerElement extends LitElement {
|
||||
|
||||
changed(event) {
|
||||
this.selected = event.srcElement.value;
|
||||
this.dispatchEvent(new Event('change', {
|
||||
srcElement: this,
|
||||
}));
|
||||
this.dispatchEvent(
|
||||
new Event('change', {
|
||||
srcElement: this,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<select class="w3-select w3-dark-grey w3-padding w3-border" @change=${this.changed} style="max-width: 100%; overflow: hidden">
|
||||
${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${this.users[id]?.name ? (this.users[id]?.name + ' - ') : undefined}<small>${id}</small></option>`)}
|
||||
<select
|
||||
class="w3-select w3-dark-grey w3-padding w3-border"
|
||||
@change=${this.changed}
|
||||
style="max-width: 100%; overflow: hidden"
|
||||
>
|
||||
${(this.ids ?? []).map(
|
||||
(id) =>
|
||||
html`<option ?selected=${id == this.selected} value=${id}>
|
||||
${this.users[id]?.name
|
||||
? this.users[id]?.name + ' - '
|
||||
: undefined}<small>${id}</small>
|
||||
</option>`
|
||||
)}
|
||||
</select>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -31,14 +31,27 @@ class TfMessageElement extends LitElement {
|
||||
}
|
||||
|
||||
show_reply() {
|
||||
let event = new CustomEvent('tf-draft', {bubbles: true, composed: true, detail: {id: this.message?.id, draft: {
|
||||
encrypt_to: this.message?.decrypted?.recps,
|
||||
}}});
|
||||
let event = new CustomEvent('tf-draft', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {
|
||||
id: this.message?.id,
|
||||
draft: {
|
||||
encrypt_to: this.message?.decrypted?.recps,
|
||||
},
|
||||
},
|
||||
});
|
||||
this.dispatchEvent(event);
|
||||
}
|
||||
|
||||
discard_reply() {
|
||||
this.dispatchEvent(new CustomEvent('tf-draft', {bubbles: true, composed: true, detail: {id: this.id, draft: undefined}}));
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('tf-draft', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {id: this.id, draft: undefined},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
render_votes() {
|
||||
@ -53,12 +66,19 @@ class TfMessageElement extends LitElement {
|
||||
return expression;
|
||||
}
|
||||
}
|
||||
return html`<div>${(this.message.votes || []).map(
|
||||
vote => html`
|
||||
<span title="${this.users[vote.author]?.name ?? vote.author} ${new Date(vote.timestamp)}">
|
||||
${normalize_expression(vote.content.vote.expression)}
|
||||
</span>
|
||||
`)}</div>`;
|
||||
return html`<div>
|
||||
${(this.message.votes || []).map(
|
||||
(vote) => html`
|
||||
<span
|
||||
title="${this.users[vote.author]?.name ?? vote.author} ${new Date(
|
||||
vote.timestamp
|
||||
)}"
|
||||
>
|
||||
${normalize_expression(vote.content.vote.expression)}
|
||||
</span>
|
||||
`
|
||||
)}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
render_raw() {
|
||||
@ -72,30 +92,40 @@ class TfMessageElement extends LitElement {
|
||||
content: this.message?.content,
|
||||
signature: this.message?.signature,
|
||||
};
|
||||
return html`<div style="white-space: pre-wrap">${JSON.stringify(raw, null, 2)}</div>`;
|
||||
return html`<div style="white-space: pre-wrap">
|
||||
${JSON.stringify(raw, null, 2)}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
vote(emoji) {
|
||||
let reaction = emoji;
|
||||
let message = this.message.id;
|
||||
if (confirm('Are you sure you want to react with ' + reaction + ' to ' + message + '?')) {
|
||||
tfrpc.rpc.appendMessage(
|
||||
this.whoami,
|
||||
{
|
||||
if (
|
||||
confirm(
|
||||
'Are you sure you want to react with ' +
|
||||
reaction +
|
||||
' to ' +
|
||||
message +
|
||||
'?'
|
||||
)
|
||||
) {
|
||||
tfrpc.rpc
|
||||
.appendMessage(this.whoami, {
|
||||
type: 'vote',
|
||||
vote: {
|
||||
link: message,
|
||||
value: 1,
|
||||
expression: reaction,
|
||||
},
|
||||
}).catch(function(error) {
|
||||
})
|
||||
.catch(function (error) {
|
||||
alert(error?.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
react(event) {
|
||||
emojis.picker(x => this.vote(x));
|
||||
emojis.picker((x) => this.vote(x));
|
||||
}
|
||||
|
||||
show_image(link) {
|
||||
@ -129,7 +159,10 @@ class TfMessageElement extends LitElement {
|
||||
body_click(event) {
|
||||
if (event.srcElement.tagName == 'IMG') {
|
||||
this.show_image(event.srcElement.src);
|
||||
} else if (event.srcElement.tagName == 'DIV' && event.srcElement.classList.contains('img_caption')) {
|
||||
} else if (
|
||||
event.srcElement.tagName == 'DIV' &&
|
||||
event.srcElement.classList.contains('img_caption')
|
||||
) {
|
||||
let next = event.srcElement.nextSibling;
|
||||
if (next.style.display == 'block') {
|
||||
next.style.display = 'none';
|
||||
@ -140,50 +173,77 @@ class TfMessageElement extends LitElement {
|
||||
}
|
||||
|
||||
render_mention(mention) {
|
||||
if (!mention?.link || typeof(mention.link) != 'string') {
|
||||
if (!mention?.link || typeof mention.link != 'string') {
|
||||
return html` <pre>${JSON.stringify(mention)}</pre>`;
|
||||
} else if (mention?.link?.startsWith('&') &&
|
||||
mention?.type?.startsWith('image/')) {
|
||||
} else if (
|
||||
mention?.link?.startsWith('&') &&
|
||||
mention?.type?.startsWith('image/')
|
||||
) {
|
||||
return html`
|
||||
<img src=${'/' + mention.link + '/view'} style="max-width: 128px; max-height: 128px" title=${mention.name} @click=${() => this.show_image('/' + mention.link + '/view')}>
|
||||
<img
|
||||
src=${'/' + mention.link + '/view'}
|
||||
style="max-width: 128px; max-height: 128px"
|
||||
title=${mention.name}
|
||||
@click=${() => this.show_image('/' + mention.link + '/view')}
|
||||
/>
|
||||
`;
|
||||
} else if (mention.link?.startsWith('&') &&
|
||||
mention.name?.startsWith('audio:')) {
|
||||
} else if (
|
||||
mention.link?.startsWith('&') &&
|
||||
mention.name?.startsWith('audio:')
|
||||
) {
|
||||
return html`
|
||||
<audio controls style="height: 32px">
|
||||
<source src=${'/' + mention.link + '/view'}></source>
|
||||
</audio>
|
||||
`;
|
||||
} else if (mention.link?.startsWith('&') &&
|
||||
mention.name?.startsWith('video:')) {
|
||||
} else if (
|
||||
mention.link?.startsWith('&') &&
|
||||
mention.name?.startsWith('video:')
|
||||
) {
|
||||
return html`
|
||||
<video controls style="max-height: 240px; max-width: 128px">
|
||||
<source src=${'/' + mention.link + '/view'}></source>
|
||||
</video>
|
||||
`;
|
||||
} else if (mention.link?.startsWith('&') &&
|
||||
mention?.type === 'application/tildefriends') {
|
||||
} else if (
|
||||
mention.link?.startsWith('&') &&
|
||||
mention?.type === 'application/tildefriends'
|
||||
) {
|
||||
return html` <a href=${`/${mention.link}/`}>😎 ${mention.name}</a>`;
|
||||
} else if (mention.link?.startsWith('%') || mention.link?.startsWith('@')) {
|
||||
return html` <a href=${'#' + encodeURIComponent(mention.link)}>${mention.name}</a>`;
|
||||
return html` <a href=${'#' + encodeURIComponent(mention.link)}
|
||||
>${mention.name}</a
|
||||
>`;
|
||||
} else if (mention.link?.startsWith('#')) {
|
||||
return html` <a href=${'#q=' + encodeURIComponent(mention.link)}>${mention.link}</a>`;
|
||||
} else if (Object.keys(mention).length == 2 && mention.link && mention.name) {
|
||||
return html` <a href=${'#q=' + encodeURIComponent(mention.link)}
|
||||
>${mention.link}</a
|
||||
>`;
|
||||
} else if (
|
||||
Object.keys(mention).length == 2 &&
|
||||
mention.link &&
|
||||
mention.name
|
||||
) {
|
||||
return html` <a href=${`/${mention.link}/view`}>${mention.name}</a>`;
|
||||
} else {
|
||||
return html` <pre style="white-space: pre-wrap">${JSON.stringify(mention, null, 2)}</pre>`;
|
||||
return html` <pre style="white-space: pre-wrap">
|
||||
${JSON.stringify(mention, null, 2)}</pre
|
||||
>`;
|
||||
}
|
||||
}
|
||||
|
||||
render_mentions() {
|
||||
let mentions = this.message?.content?.mentions || [];
|
||||
mentions = mentions.filter(x => this.message?.content?.text?.indexOf(x.link) === -1);
|
||||
mentions = mentions.filter(
|
||||
(x) => this.message?.content?.text?.indexOf(x.link) === -1
|
||||
);
|
||||
if (mentions.length) {
|
||||
let self = this;
|
||||
return html`
|
||||
<fieldset style="background-color: rgba(0, 0, 0, 0.1); padding: 0.5em; border: 1px solid black">
|
||||
<fieldset
|
||||
style="background-color: rgba(0, 0, 0, 0.1); padding: 0.5em; border: 1px solid black"
|
||||
>
|
||||
<legend>Mentions</legend>
|
||||
${mentions.map(x => self.render_mention(x))}
|
||||
${mentions.map((x) => self.render_mention(x))}
|
||||
</fieldset>
|
||||
`;
|
||||
}
|
||||
@ -194,28 +254,55 @@ class TfMessageElement extends LitElement {
|
||||
return 0;
|
||||
}
|
||||
let total = message.child_messages.length;
|
||||
for (let m of message.child_messages)
|
||||
{
|
||||
for (let m of message.child_messages) {
|
||||
total += this.total_child_messages(m);
|
||||
}
|
||||
return total;
|
||||
}
|
||||
|
||||
set_expanded(expanded, tag) {
|
||||
this.dispatchEvent(new CustomEvent('tf-expand', {bubbles: true, composed: true, detail: {id: (this.message.id || '') + (tag || ''), expanded: expanded}}));
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('tf-expand', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
detail: {id: (this.message.id || '') + (tag || ''), expanded: expanded},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
toggle_expanded(tag) {
|
||||
this.set_expanded(!this.expanded[(this.message.id || '') + (tag || '')], tag);
|
||||
this.set_expanded(
|
||||
!this.expanded[(this.message.id || '') + (tag || '')],
|
||||
tag
|
||||
);
|
||||
}
|
||||
|
||||
render_children() {
|
||||
let self = this;
|
||||
if (this.message.child_messages?.length) {
|
||||
if (!this.expanded[this.message.id]) {
|
||||
return html`<button class="w3-button w3-dark-grey" @click=${() => self.set_expanded(true)}>+ ${this.total_child_messages(this.message) + ' More'}</button>`;
|
||||
return html`<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => self.set_expanded(true)}
|
||||
>
|
||||
+ ${this.total_child_messages(this.message) + ' More'}
|
||||
</button>`;
|
||||
} else {
|
||||
return html`<button class="w3-button w3-dark-grey" @click=${() => self.set_expanded(false)}>Collapse</button>${(this.message.child_messages || []).map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>`)}`;
|
||||
return html`<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => self.set_expanded(false)}
|
||||
>
|
||||
Collapse</button
|
||||
>${(this.message.child_messages || []).map(
|
||||
(x) =>
|
||||
html`<tf-message
|
||||
.message=${x}
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
.drafts=${this.drafts}
|
||||
.expanded=${this.expanded}
|
||||
></tf-message>`
|
||||
)}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -231,13 +318,12 @@ class TfMessageElement extends LitElement {
|
||||
}
|
||||
if (Array.isArray(content.mentions)) {
|
||||
for (let mention of content.mentions) {
|
||||
if (typeof mention?.link === 'string' &&
|
||||
mention.link.startsWith('#')) {
|
||||
if (typeof mention?.link === 'string' && mention.link.startsWith('#')) {
|
||||
channels.push(mention.link);
|
||||
}
|
||||
}
|
||||
}
|
||||
return channels.map(x => html`<tf-tag tag=${x}></tf-tag>`);
|
||||
return channels.map((x) => html`<tf-tag tag=${x}></tf-tag>`);
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -250,54 +336,110 @@ class TfMessageElement extends LitElement {
|
||||
switch (this.format) {
|
||||
case 'raw':
|
||||
if (content?.type == 'post' || content?.type == 'blog') {
|
||||
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'md'}>Markdown</button>`;
|
||||
raw_button = html`<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => (self.format = 'md')}
|
||||
>
|
||||
Markdown
|
||||
</button>`;
|
||||
} else {
|
||||
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'message'}>Message</button>`;
|
||||
raw_button = html`<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => (self.format = 'message')}
|
||||
>
|
||||
Message
|
||||
</button>`;
|
||||
}
|
||||
break;
|
||||
case 'md':
|
||||
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'message'}>Message</button>`;
|
||||
raw_button = html`<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => (self.format = 'message')}
|
||||
>
|
||||
Message
|
||||
</button>`;
|
||||
break;
|
||||
case 'decrypted':
|
||||
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'raw'}>Raw</button>`;
|
||||
raw_button = html`<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => (self.format = 'raw')}
|
||||
>
|
||||
Raw
|
||||
</button>`;
|
||||
break;
|
||||
default:
|
||||
if (this.message.decrypted) {
|
||||
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'decrypted'}>Decrypted</button>`;
|
||||
raw_button = html`<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => (self.format = 'decrypted')}
|
||||
>
|
||||
Decrypted
|
||||
</button>`;
|
||||
} else {
|
||||
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'raw'}>Raw</button>`;
|
||||
raw_button = html`<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => (self.format = 'raw')}
|
||||
>
|
||||
Raw
|
||||
</button>`;
|
||||
}
|
||||
break;
|
||||
}
|
||||
function small_frame(inner) {
|
||||
let body;
|
||||
return html`
|
||||
<div class="w3-card-4" style="background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere">
|
||||
<div
|
||||
class="w3-card-4"
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere"
|
||||
>
|
||||
<tf-user id=${self.message.author} .users=${self.users}></tf-user>
|
||||
<span style="padding-right: 8px"><a tfarget="_top" href=${'#' + self.message.id}>%</a> ${new Date(self.message.timestamp).toLocaleString()}</span>
|
||||
${raw_button}
|
||||
${self.format == 'raw' ? self.render_raw() : inner}
|
||||
<span style="padding-right: 8px"
|
||||
><a tfarget="_top" href=${'#' + self.message.id}>%</a> ${new Date(
|
||||
self.message.timestamp
|
||||
).toLocaleString()}</span
|
||||
>
|
||||
${raw_button} ${self.format == 'raw' ? self.render_raw() : inner}
|
||||
${self.render_votes()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
if (this.message?.type === 'contact_group') {
|
||||
return html`
|
||||
<div class="w3-card-4" style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
|
||||
${this.message.messages.map(x =>
|
||||
html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>`
|
||||
)}
|
||||
</div>`;
|
||||
return html` <div
|
||||
class="w3-card-4"
|
||||
style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
|
||||
>
|
||||
${this.message.messages.map(
|
||||
(x) =>
|
||||
html`<tf-message
|
||||
.message=${x}
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
.drafts=${this.drafts}
|
||||
.expanded=${this.expanded}
|
||||
></tf-message>`
|
||||
)}
|
||||
</div>`;
|
||||
} else if (this.message.placeholder) {
|
||||
return html`
|
||||
<div class="w3-card-4" style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
|
||||
<a target="_top" href=${'#' + this.message.id}>${this.message.id}</a> (placeholder)
|
||||
<div>${this.render_votes()}</div>
|
||||
${(this.message.child_messages || []).map(x => html`
|
||||
<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>
|
||||
`)}
|
||||
</div>`;
|
||||
} else if (typeof(content?.type === 'string')) {
|
||||
return html` <div
|
||||
class="w3-card-4"
|
||||
style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
|
||||
>
|
||||
<a target="_top" href=${'#' + this.message.id}>${this.message.id}</a>
|
||||
(placeholder)
|
||||
<div>${this.render_votes()}</div>
|
||||
${(this.message.child_messages || []).map(
|
||||
(x) => html`
|
||||
<tf-message
|
||||
.message=${x}
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
.drafts=${this.drafts}
|
||||
.expanded=${this.expanded}
|
||||
></tf-message>
|
||||
`
|
||||
)}
|
||||
</div>`;
|
||||
} else if (typeof (content?.type === 'string')) {
|
||||
if (content.type == 'about') {
|
||||
let name;
|
||||
let image;
|
||||
@ -307,7 +449,7 @@ class TfMessageElement extends LitElement {
|
||||
}
|
||||
if (content.image !== undefined) {
|
||||
image = html`
|
||||
<div><img src=${'/' + (typeof(content.image?.link) == 'string' ? content.image.link : content.image) + '/view'} style="width: 256px; height: auto"></img></div>
|
||||
<div><img src=${'/' + (typeof content.image?.link == 'string' ? content.image.link : content.image) + '/view'} style="width: 256px; height: auto"></img></div>
|
||||
`;
|
||||
}
|
||||
if (content.description !== undefined) {
|
||||
@ -317,42 +459,55 @@ class TfMessageElement extends LitElement {
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
let update = content.about == this.message.author ?
|
||||
html`<div style="font-weight: bold">Updated profile.</div>` :
|
||||
html`<div style="font-weight: bold">Updated profile for <tf-user id=${content.about} .users=${this.users}></tf-user>.</div>`;
|
||||
return small_frame(html`
|
||||
${update}
|
||||
${name}
|
||||
${image}
|
||||
${description}
|
||||
`);
|
||||
let update =
|
||||
content.about == this.message.author
|
||||
? html`<div style="font-weight: bold">Updated profile.</div>`
|
||||
: html`<div style="font-weight: bold">
|
||||
Updated profile for
|
||||
<tf-user id=${content.about} .users=${this.users}></tf-user>.
|
||||
</div>`;
|
||||
return small_frame(html` ${update} ${name} ${image} ${description} `);
|
||||
} else if (content.type == 'contact') {
|
||||
return html`
|
||||
<div>
|
||||
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
|
||||
is
|
||||
${
|
||||
content.blocking === true ? 'blocking' :
|
||||
content.blocking === false ? 'no longer blocking' :
|
||||
content.following === true ? 'following' :
|
||||
content.following === false ? 'no longer following' :
|
||||
'?'
|
||||
}
|
||||
<tf-user id=${this.message.content.contact} .users=${this.users}></tf-user>
|
||||
${content.blocking === true
|
||||
? 'blocking'
|
||||
: content.blocking === false
|
||||
? 'no longer blocking'
|
||||
: content.following === true
|
||||
? 'following'
|
||||
: content.following === false
|
||||
? 'no longer following'
|
||||
: '?'}
|
||||
<tf-user
|
||||
id=${this.message.content.contact}
|
||||
.users=${this.users}
|
||||
></tf-user>
|
||||
</div>
|
||||
`;
|
||||
} else if (content.type == 'post') {
|
||||
let reply = (this.drafts[this.message?.id] !== undefined) ? html`
|
||||
<tf-compose
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
root=${this.message.content.root || this.message.id}
|
||||
branch=${this.message.id}
|
||||
.drafts=${this.drafts}
|
||||
@tf-discard=${this.discard_reply}></tf-compose>
|
||||
` : html`
|
||||
<button class="w3-button w3-dark-grey" @click=${this.show_reply}>Reply</button>
|
||||
`;
|
||||
let reply =
|
||||
this.drafts[this.message?.id] !== undefined
|
||||
? html`
|
||||
<tf-compose
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
root=${this.message.content.root || this.message.id}
|
||||
branch=${this.message.id}
|
||||
.drafts=${this.drafts}
|
||||
@tf-discard=${this.discard_reply}
|
||||
></tf-compose>
|
||||
`
|
||||
: html`
|
||||
<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${this.show_reply}
|
||||
>
|
||||
Reply
|
||||
</button>
|
||||
`;
|
||||
let self = this;
|
||||
let body;
|
||||
switch (this.format) {
|
||||
@ -360,35 +515,47 @@ class TfMessageElement extends LitElement {
|
||||
body = this.render_raw();
|
||||
break;
|
||||
case 'md':
|
||||
body = html`<code style="white-space: pre-wrap; overflow-wrap: anywhere">${content.text}</code>`;
|
||||
body = html`<code
|
||||
style="white-space: pre-wrap; overflow-wrap: anywhere"
|
||||
>${content.text}</code
|
||||
>`;
|
||||
break;
|
||||
case 'message':
|
||||
body = unsafeHTML(tfutils.markdown(content.text));
|
||||
break;
|
||||
case 'decrypted':
|
||||
body = html`<pre style="white-space: pre-wrap; overflow-wrap: anywhere">${JSON.stringify(content, null, 2)}</pre>`;
|
||||
body = html`<pre
|
||||
style="white-space: pre-wrap; overflow-wrap: anywhere"
|
||||
>
|
||||
${JSON.stringify(content, null, 2)}</pre
|
||||
>`;
|
||||
break;
|
||||
}
|
||||
let content_warning = html`
|
||||
<div class="w3-panel w3-round-xlarge w3-blue" style="cursor: pointer" @click=${x => this.toggle_expanded(':cw')}><p>${content.contentWarning}</p></div>
|
||||
`;
|
||||
let content_html =
|
||||
html`
|
||||
${this.render_channels()}
|
||||
<div @click=${this.body_click}>${body}</div>
|
||||
${this.render_mentions()}
|
||||
`;
|
||||
let payload =
|
||||
content.contentWarning ?
|
||||
self.expanded[(this.message.id || '') + ':cw'] ?
|
||||
html`
|
||||
${content_warning}
|
||||
${content_html}
|
||||
` :
|
||||
content_warning :
|
||||
content_html;
|
||||
let is_encrypted = this.message?.decrypted ? html`<span style="align-self: center">🔓</span>` : undefined;
|
||||
let style_background = this.message?.decrypted ? 'rgba(255, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.1)';
|
||||
<div
|
||||
class="w3-panel w3-round-xlarge w3-blue"
|
||||
style="cursor: pointer"
|
||||
@click=${(x) => this.toggle_expanded(':cw')}
|
||||
>
|
||||
<p>${content.contentWarning}</p>
|
||||
</div>
|
||||
`;
|
||||
let content_html = html`
|
||||
${this.render_channels()}
|
||||
<div @click=${this.body_click}>${body}</div>
|
||||
${this.render_mentions()}
|
||||
`;
|
||||
let payload = content.contentWarning
|
||||
? self.expanded[(this.message.id || '') + ':cw']
|
||||
? html` ${content_warning} ${content_html} `
|
||||
: content_warning
|
||||
: content_html;
|
||||
let is_encrypted = this.message?.decrypted
|
||||
? html`<span style="align-self: center">🔓</span>`
|
||||
: undefined;
|
||||
let style_background = this.message?.decrypted
|
||||
? 'rgba(255, 0, 0, 0.2)'
|
||||
: 'rgba(255, 255, 255, 0.1)';
|
||||
return html`
|
||||
<style>
|
||||
code {
|
||||
@ -404,26 +571,37 @@ class TfMessageElement extends LitElement {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<div class="w3-card-4" style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px">
|
||||
<div
|
||||
class="w3-card-4"
|
||||
style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px"
|
||||
>
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
|
||||
${is_encrypted}
|
||||
<span style="flex: 1"></span>
|
||||
<span style="padding-right: 8px"><a target="_top" href=${'#' + self.message.id}>%</a> ${new Date(this.message.timestamp).toLocaleString()}</span>
|
||||
<span style="padding-right: 8px"
|
||||
><a target="_top" href=${'#' + self.message.id}>%</a>
|
||||
${new Date(this.message.timestamp).toLocaleString()}</span
|
||||
>
|
||||
<span>${raw_button}</span>
|
||||
</div>
|
||||
${payload}
|
||||
${this.render_votes()}
|
||||
${payload} ${this.render_votes()}
|
||||
<p>
|
||||
${reply}
|
||||
<button class="w3-button w3-dark-grey" @click=${this.react}>React</button>
|
||||
<button class="w3-button w3-dark-grey" @click=${this.react}>
|
||||
React
|
||||
</button>
|
||||
</p>
|
||||
${this.render_children()}
|
||||
</div>
|
||||
`;
|
||||
} else if (content.type === 'issue') {
|
||||
let is_encrypted = this.message?.decrypted ? html`<span style="align-self: center">🔓</span>` : undefined;
|
||||
let style_background = this.message?.decrypted ? 'rgba(255, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.1)';
|
||||
let is_encrypted = this.message?.decrypted
|
||||
? html`<span style="align-self: center">🔓</span>`
|
||||
: undefined;
|
||||
let style_background = this.message?.decrypted
|
||||
? 'rgba(255, 0, 0, 0.2)'
|
||||
: 'rgba(255, 255, 255, 0.1)';
|
||||
return html`
|
||||
<style>
|
||||
code {
|
||||
@ -439,31 +617,41 @@ class TfMessageElement extends LitElement {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<div class="w3-card-4" style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px">
|
||||
<div
|
||||
class="w3-card-4"
|
||||
style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px"
|
||||
>
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
|
||||
${is_encrypted}
|
||||
<span style="flex: 1"></span>
|
||||
<span style="padding-right: 8px"><a target="_top" href=${'#' + self.message.id}>%</a> ${new Date(this.message.timestamp).toLocaleString()}</span>
|
||||
<span style="padding-right: 8px"
|
||||
><a target="_top" href=${'#' + self.message.id}>%</a>
|
||||
${new Date(this.message.timestamp).toLocaleString()}</span
|
||||
>
|
||||
<span>${raw_button}</span>
|
||||
</div>
|
||||
${content.text}
|
||||
${this.render_votes()}
|
||||
${content.text} ${this.render_votes()}
|
||||
<p>
|
||||
<button class="w3-button w3-dark-grey" @click=${this.react}>React</button>
|
||||
<button class="w3-button w3-dark-grey" @click=${this.react}>
|
||||
React
|
||||
</button>
|
||||
</p>
|
||||
${this.render_children()}
|
||||
</div>
|
||||
`;
|
||||
} else if (content.type === 'blog') {
|
||||
let self = this;
|
||||
tfrpc.rpc.get_blob(content.blog).then(function(data) {
|
||||
tfrpc.rpc.get_blob(content.blog).then(function (data) {
|
||||
self.blog_data = data;
|
||||
});
|
||||
let payload =
|
||||
this.expanded[(this.message.id || '') + ':blog'] ?
|
||||
html`<div>${this.blog_data ? unsafeHTML(tfutils.markdown(this.blog_data)) : 'Loading...'}</div>` :
|
||||
undefined;
|
||||
let payload = this.expanded[(this.message.id || '') + ':blog']
|
||||
? html`<div>
|
||||
${this.blog_data
|
||||
? unsafeHTML(tfutils.markdown(this.blog_data))
|
||||
: 'Loading...'}
|
||||
</div>`
|
||||
: undefined;
|
||||
let body;
|
||||
switch (this.format) {
|
||||
case 'raw':
|
||||
@ -476,7 +664,7 @@ class TfMessageElement extends LitElement {
|
||||
body = html`
|
||||
<div
|
||||
style="border: 1px solid #fff; border-radius: 1em; padding: 8px; margin: 4px; cursor: pointer"
|
||||
@click=${x => self.toggle_expanded(':blog')}>
|
||||
@click=${(x) => self.toggle_expanded(':blog')}>
|
||||
<h2>${content.title}</h2>
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<img src=/${content.thumbnail}/view></img>
|
||||
@ -487,17 +675,26 @@ class TfMessageElement extends LitElement {
|
||||
`;
|
||||
break;
|
||||
}
|
||||
let reply = (this.drafts[this.message?.id] !== undefined) ? html`
|
||||
<tf-compose
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
root=${this.message.content.root || this.message.id}
|
||||
branch=${this.message.id}
|
||||
.drafts=${this.drafts}
|
||||
@tf-discard=${this.discard_reply}></tf-compose>
|
||||
` : html`
|
||||
<button class="w3-button w3-dark-grey" @click=${this.show_reply}>Reply</button>
|
||||
`;
|
||||
let reply =
|
||||
this.drafts[this.message?.id] !== undefined
|
||||
? html`
|
||||
<tf-compose
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
root=${this.message.content.root || this.message.id}
|
||||
branch=${this.message.id}
|
||||
.drafts=${this.drafts}
|
||||
@tf-discard=${this.discard_reply}
|
||||
></tf-compose>
|
||||
`
|
||||
: html`
|
||||
<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${this.show_reply}
|
||||
>
|
||||
Reply
|
||||
</button>
|
||||
`;
|
||||
return html`
|
||||
<style>
|
||||
code {
|
||||
@ -513,11 +710,17 @@ class TfMessageElement extends LitElement {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<div class="w3-card-4" style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px">
|
||||
<div
|
||||
class="w3-card-4"
|
||||
style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px"
|
||||
>
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
|
||||
<span style="flex: 1"></span>
|
||||
<span style="padding-right: 8px"><a target="_top" href=${'#' + self.message.id}>%</a> ${new Date(this.message.timestamp).toLocaleString()}</span>
|
||||
<span style="padding-right: 8px"
|
||||
><a target="_top" href=${'#' + self.message.id}>%</a>
|
||||
${new Date(this.message.timestamp).toLocaleString()}</span
|
||||
>
|
||||
<span>${raw_button}</span>
|
||||
</div>
|
||||
|
||||
@ -525,37 +728,52 @@ class TfMessageElement extends LitElement {
|
||||
${this.render_mentions()}
|
||||
<div>
|
||||
${reply}
|
||||
<button class="w3-button w3-dark-grey" @click=${this.react}>React</button>
|
||||
<button class="w3-button w3-dark-grey" @click=${this.react}>
|
||||
React
|
||||
</button>
|
||||
</div>
|
||||
${this.render_votes()}
|
||||
${this.render_children()}
|
||||
${this.render_votes()} ${this.render_children()}
|
||||
</div>
|
||||
`;
|
||||
} else if (content.type === 'pub') {
|
||||
return small_frame(html`
|
||||
<style>
|
||||
span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
<span>
|
||||
<div>
|
||||
🍻 <tf-user .users=${this.users} id=${content.address.key}></tf-user>
|
||||
</div>
|
||||
<pre>${content.address.host}:${content.address.port}</pre>
|
||||
</span>`);
|
||||
return small_frame(
|
||||
html` <style>
|
||||
span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
<span>
|
||||
<div>
|
||||
🍻
|
||||
<tf-user
|
||||
.users=${this.users}
|
||||
id=${content.address.key}
|
||||
></tf-user>
|
||||
</div>
|
||||
<pre>${content.address.host}:${content.address.port}</pre>
|
||||
</span>`
|
||||
);
|
||||
} else if (content.type === 'channel') {
|
||||
return small_frame(html`
|
||||
<div>
|
||||
${content.subscribed ? 'subscribed to' : 'unsubscribed from'} <a href=${'#q=' + encodeURIComponent('#' + content.channel)}>#${content.channel}</a>
|
||||
${content.subscribed ? 'subscribed to' : 'unsubscribed from'}
|
||||
<a href=${'#q=' + encodeURIComponent('#' + content.channel)}
|
||||
>#${content.channel}</a
|
||||
>
|
||||
</div>
|
||||
`);
|
||||
} else if (typeof(this.message.content) == 'string') {
|
||||
} else if (typeof this.message.content == 'string') {
|
||||
if (this.message?.decrypted) {
|
||||
if (this.format == 'decrypted') {
|
||||
return small_frame(html`<span>🔓</span><pre>${JSON.stringify(this.message.decrypted, null, 2)}</pre>`);
|
||||
return small_frame(
|
||||
html`<span>🔓</span>
|
||||
<pre>${JSON.stringify(this.message.decrypted, null, 2)}</pre>`
|
||||
);
|
||||
} else {
|
||||
return small_frame(html`<span>🔓</span><div>${this.message.decrypted.type}</div>`);
|
||||
return small_frame(
|
||||
html`<span>🔓</span>
|
||||
<div>${this.message.decrypted.type}</div>`
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return small_frame(html`<span>🔒</span>`);
|
||||
@ -569,4 +787,4 @@ class TfMessageElement extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-message', TfMessageElement);
|
||||
customElements.define('tf-message', TfMessageElement);
|
||||
|
||||
@ -61,7 +61,7 @@ class TfNewsElement extends LitElement {
|
||||
message.parent_message = message.content.vote.link;
|
||||
} else if (message.content.type == 'post') {
|
||||
if (message.content.root) {
|
||||
if (typeof(message.content.root) === 'string') {
|
||||
if (typeof message.content.root === 'string') {
|
||||
let m = ensure_message(message.content.root);
|
||||
if (!m.child_messages) {
|
||||
m.child_messages = [];
|
||||
@ -89,8 +89,7 @@ class TfNewsElement extends LitElement {
|
||||
for (let message of messages) {
|
||||
try {
|
||||
message.content = JSON.parse(message.content);
|
||||
} catch {
|
||||
}
|
||||
} catch {}
|
||||
if (!messages_by_id[message.id]) {
|
||||
messages_by_id[message.id] = message;
|
||||
link_message(message);
|
||||
@ -100,8 +99,12 @@ class TfNewsElement extends LitElement {
|
||||
message.parent_message = placeholder.parent_message;
|
||||
message.child_messages = placeholder.child_messages;
|
||||
message.votes = placeholder.votes;
|
||||
if (placeholder.parent_message && messages_by_id[placeholder.parent_message]) {
|
||||
let children = messages_by_id[placeholder.parent_message].child_messages;
|
||||
if (
|
||||
placeholder.parent_message &&
|
||||
messages_by_id[placeholder.parent_message]
|
||||
) {
|
||||
let children =
|
||||
messages_by_id[placeholder.parent_message].child_messages;
|
||||
children.splice(children.indexOf(placeholder), 1);
|
||||
children.push(message);
|
||||
}
|
||||
@ -116,7 +119,10 @@ class TfNewsElement extends LitElement {
|
||||
let latest = 0;
|
||||
for (let message of messages || []) {
|
||||
if (message.latest_subtree_timestamp === undefined) {
|
||||
message.latest_subtree_timestamp = Math.max(message.timestamp ?? 0, this.update_latest_subtree_timestamp(message.child_messages));
|
||||
message.latest_subtree_timestamp = Math.max(
|
||||
message.timestamp ?? 0,
|
||||
this.update_latest_subtree_timestamp(message.child_messages)
|
||||
);
|
||||
}
|
||||
latest = Math.max(latest, message.latest_subtree_timestamp);
|
||||
}
|
||||
@ -127,20 +133,22 @@ class TfNewsElement extends LitElement {
|
||||
function recursive_sort(messages, top) {
|
||||
if (messages) {
|
||||
if (top) {
|
||||
messages.sort((a, b) => b.latest_subtree_timestamp - a.latest_subtree_timestamp);
|
||||
messages.sort(
|
||||
(a, b) => b.latest_subtree_timestamp - a.latest_subtree_timestamp
|
||||
);
|
||||
} else {
|
||||
messages.sort((a, b) => a.timestamp - b.timestamp);
|
||||
}
|
||||
for (let message of messages) {
|
||||
recursive_sort(message.child_messages, false);
|
||||
}
|
||||
return messages.map(x => Object.assign({}, x));
|
||||
return messages.map((x) => Object.assign({}, x));
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
let roots = Object.values(messages_by_id).filter(x => !x.parent_message);
|
||||
let roots = Object.values(messages_by_id).filter((x) => !x.parent_message);
|
||||
this.update_latest_subtree_timestamp(roots);
|
||||
return recursive_sort(roots, true);
|
||||
}
|
||||
@ -167,10 +175,22 @@ class TfNewsElement extends LitElement {
|
||||
|
||||
load_and_render(messages) {
|
||||
let messages_by_id = this.process_messages(messages);
|
||||
let final_messages = this.group_following(this.finalize_messages(messages_by_id));
|
||||
let final_messages = this.group_following(
|
||||
this.finalize_messages(messages_by_id)
|
||||
);
|
||||
return html`
|
||||
<div style="display: flex; flex-direction: column">
|
||||
${final_messages.map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded} collapsed=true></tf-message>`)}
|
||||
${final_messages.map(
|
||||
(x) =>
|
||||
html`<tf-message
|
||||
.message=${x}
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
.drafts=${this.drafts}
|
||||
.expanded=${this.expanded}
|
||||
collapsed="true"
|
||||
></tf-message>`
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@ -180,4 +200,4 @@ class TfNewsElement extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-news', TfNewsElement);
|
||||
customElements.define('tf-news', TfNewsElement);
|
||||
|
||||
@ -36,23 +36,29 @@ class TfProfileElement extends LitElement {
|
||||
this.following = undefined;
|
||||
this.blocking = undefined;
|
||||
|
||||
let result = await tfrpc.rpc.query(`
|
||||
let result = await tfrpc.rpc.query(
|
||||
`
|
||||
SELECT json_extract(content, '$.following') AS following
|
||||
FROM messages WHERE author = ? AND
|
||||
json_extract(content, '$.type') = 'contact' AND
|
||||
json_extract(content, '$.contact') = ? AND
|
||||
following IS NOT NULL
|
||||
ORDER BY sequence DESC LIMIT 1
|
||||
`, [this.whoami, this.id]);
|
||||
`,
|
||||
[this.whoami, this.id]
|
||||
);
|
||||
this.following = result?.[0]?.following ?? false;
|
||||
result = await tfrpc.rpc.query(`
|
||||
result = await tfrpc.rpc.query(
|
||||
`
|
||||
SELECT json_extract(content, '$.blocking') AS blocking
|
||||
FROM messages WHERE author = ? AND
|
||||
json_extract(content, '$.type') = 'contact' AND
|
||||
json_extract(content, '$.contact') = ? AND
|
||||
blocking IS NOT NULL
|
||||
ORDER BY sequence DESC LIMIT 1
|
||||
`, [this.whoami, this.id]);
|
||||
`,
|
||||
[this.whoami, this.id]
|
||||
);
|
||||
this.blocking = result?.[0]?.blocking ?? false;
|
||||
}
|
||||
}
|
||||
@ -60,13 +66,16 @@ class TfProfileElement extends LitElement {
|
||||
async initial_load() {
|
||||
this.server_follows_me = undefined;
|
||||
let server_id = await tfrpc.rpc.getServerIdentity();
|
||||
let followed = await tfrpc.rpc.query(`
|
||||
let followed = await tfrpc.rpc.query(
|
||||
`
|
||||
SELECT json_extract(content, '$.following') AS following
|
||||
FROM messages
|
||||
WHERE author = ? AND
|
||||
json_extract(content, '$.type') = 'contact' AND
|
||||
json_extract(content, '$.contact') = ? ORDER BY sequence DESC LIMIT 1
|
||||
`, [server_id, this.whoami]);
|
||||
`,
|
||||
[server_id, this.whoami]
|
||||
);
|
||||
let is_followed = false;
|
||||
for (let row of followed) {
|
||||
is_followed = row.following != 0;
|
||||
@ -75,11 +84,18 @@ class TfProfileElement extends LitElement {
|
||||
}
|
||||
|
||||
modify(change) {
|
||||
tfrpc.rpc.appendMessage(this.whoami,
|
||||
Object.assign({
|
||||
type: 'contact',
|
||||
contact: this.id,
|
||||
}, change)).catch(function(error) {
|
||||
tfrpc.rpc
|
||||
.appendMessage(
|
||||
this.whoami,
|
||||
Object.assign(
|
||||
{
|
||||
type: 'contact',
|
||||
contact: this.id,
|
||||
},
|
||||
change
|
||||
)
|
||||
)
|
||||
.catch(function (error) {
|
||||
alert(error?.message);
|
||||
});
|
||||
}
|
||||
@ -122,11 +138,14 @@ class TfProfileElement extends LitElement {
|
||||
message[key] = this.editing[key];
|
||||
}
|
||||
}
|
||||
tfrpc.rpc.appendMessage(this.whoami, message).then(function() {
|
||||
self.editing = null;
|
||||
}).catch(function(error) {
|
||||
alert(error?.message);
|
||||
});
|
||||
tfrpc.rpc
|
||||
.appendMessage(this.whoami, message)
|
||||
.then(function () {
|
||||
self.editing = null;
|
||||
})
|
||||
.catch(function (error) {
|
||||
alert(error?.message);
|
||||
});
|
||||
}
|
||||
|
||||
discard_edits() {
|
||||
@ -137,17 +156,21 @@ class TfProfileElement extends LitElement {
|
||||
let self = this;
|
||||
let input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.onchange = function(event) {
|
||||
input.onchange = function (event) {
|
||||
let file = event.target.files[0];
|
||||
file.arrayBuffer().then(function(buffer) {
|
||||
let bin = Array.from(new Uint8Array(buffer));
|
||||
return tfrpc.rpc.store_blob(bin);
|
||||
}).then(function(id) {
|
||||
self.editing = Object.assign({}, self.editing, {image: id});
|
||||
console.log(self.editing);
|
||||
}).catch(function(e) {
|
||||
alert(e.message);
|
||||
});
|
||||
file
|
||||
.arrayBuffer()
|
||||
.then(function (buffer) {
|
||||
let bin = Array.from(new Uint8Array(buffer));
|
||||
return tfrpc.rpc.store_blob(bin);
|
||||
})
|
||||
.then(function (id) {
|
||||
self.editing = Object.assign({}, self.editing, {image: id});
|
||||
console.log(self.editing);
|
||||
})
|
||||
.catch(function (e) {
|
||||
alert(e.message);
|
||||
});
|
||||
};
|
||||
input.click();
|
||||
}
|
||||
@ -166,15 +189,22 @@ class TfProfileElement extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.id == this.whoami && this.editing && this.server_follows_me === undefined) {
|
||||
if (
|
||||
this.id == this.whoami &&
|
||||
this.editing &&
|
||||
this.server_follows_me === undefined
|
||||
) {
|
||||
this.initial_load();
|
||||
}
|
||||
this.load();
|
||||
let self = this;
|
||||
let profile = this.users[this.id] || {};
|
||||
tfrpc.rpc.query(
|
||||
`SELECT SUM(LENGTH(content)) AS size FROM messages WHERE author = ?`,
|
||||
[this.id]).then(function(result) {
|
||||
tfrpc.rpc
|
||||
.query(
|
||||
`SELECT SUM(LENGTH(content)) AS size FROM messages WHERE author = ?`,
|
||||
[this.id]
|
||||
)
|
||||
.then(function (result) {
|
||||
self.size = result[0].size;
|
||||
});
|
||||
let edit;
|
||||
@ -184,52 +214,75 @@ class TfProfileElement extends LitElement {
|
||||
if (this.editing) {
|
||||
let server_follow;
|
||||
if (this.server_follows_me === true) {
|
||||
server_follow = html`<button class="w3-button w3-dark-grey" @click=${() => this.server_follow_me(false)}>Server, Stop Following Me</button>`;
|
||||
server_follow = html`<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => this.server_follow_me(false)}
|
||||
>
|
||||
Server, Stop Following Me
|
||||
</button>`;
|
||||
} else if (this.server_follows_me === false) {
|
||||
server_follow = html`<button class="w3-button w3-dark-grey" @click=${() => this.server_follow_me(true)}>Server, Follow Me</button>`;
|
||||
server_follow = html`<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => this.server_follow_me(true)}
|
||||
>
|
||||
Server, Follow Me
|
||||
</button>`;
|
||||
}
|
||||
edit = html`
|
||||
<button class="w3-button w3-dark-grey" @click=${this.save_edits}>Save Profile</button>
|
||||
<button class="w3-button w3-dark-grey" @click=${this.discard_edits}>Discard</button>
|
||||
<button class="w3-button w3-dark-grey" @click=${this.save_edits}>
|
||||
Save Profile
|
||||
</button>
|
||||
<button class="w3-button w3-dark-grey" @click=${this.discard_edits}>
|
||||
Discard
|
||||
</button>
|
||||
${server_follow}
|
||||
`;
|
||||
} else {
|
||||
edit = html`<button class="w3-button w3-dark-grey" @click=${this.edit}>Edit Profile</button>`;
|
||||
edit = html`<button class="w3-button w3-dark-grey" @click=${this.edit}>
|
||||
Edit Profile
|
||||
</button>`;
|
||||
}
|
||||
}
|
||||
if (this.id !== this.whoami &&
|
||||
this.following !== undefined) {
|
||||
follow =
|
||||
this.following ?
|
||||
html`<button class="w3-button w3-dark-grey" @click=${this.unfollow}>Unfollow</button>` :
|
||||
html`<button class="w3-button w3-dark-grey" @click=${this.follow}>Follow</button>`;
|
||||
if (this.id !== this.whoami && this.following !== undefined) {
|
||||
follow = this.following
|
||||
? html`<button class="w3-button w3-dark-grey" @click=${this.unfollow}>
|
||||
Unfollow
|
||||
</button>`
|
||||
: html`<button class="w3-button w3-dark-grey" @click=${this.follow}>
|
||||
Follow
|
||||
</button>`;
|
||||
}
|
||||
if (this.id !== this.whoami &&
|
||||
this.blocking !== undefined) {
|
||||
block =
|
||||
this.blocking ?
|
||||
html`<button class="w3-button w3-dark-grey" @click=${this.unblock}>Unblock</button>` :
|
||||
html`<button class="w3-button w3-dark-grey" @click=${this.block}>Block</button>`;
|
||||
if (this.id !== this.whoami && this.blocking !== undefined) {
|
||||
block = this.blocking
|
||||
? html`<button class="w3-button w3-dark-grey" @click=${this.unblock}>
|
||||
Unblock
|
||||
</button>`
|
||||
: html`<button class="w3-button w3-dark-grey" @click=${this.block}>
|
||||
Block
|
||||
</button>`;
|
||||
}
|
||||
let edit_profile = this.editing ? html`
|
||||
let edit_profile = this.editing
|
||||
? html`
|
||||
<div style="flex: 1 0 50%; display: flex; flex-direction: column; gap: 8px">
|
||||
<div class="w3-container">
|
||||
<div>
|
||||
<label for="name">Name:</label>
|
||||
<input class="w3-input w3-dark-grey" type="text" id="name" value=${this.editing.name} @input=${event => this.editing = Object.assign({}, this.editing, {name: event.srcElement.value})}></input>
|
||||
<input class="w3-input w3-dark-grey" type="text" id="name" value=${this.editing.name} @input=${(event) => (this.editing = Object.assign({}, this.editing, {name: event.srcElement.value}))}></input>
|
||||
</div>
|
||||
<div><label for="description">Description:</label></div>
|
||||
<textarea class="w3-input w3-dark-grey" style="resize: vertical" rows="8" id="description" @input=${event => this.editing = Object.assign({}, this.editing, {description: event.srcElement.value})}>${this.editing.description}</textarea>
|
||||
<textarea class="w3-input w3-dark-grey" style="resize: vertical" rows="8" id="description" @input=${(event) => (this.editing = Object.assign({}, this.editing, {description: event.srcElement.value}))}>${this.editing.description}</textarea>
|
||||
<div>
|
||||
<label for="public_web_hosting">Public Web Hosting:</label>
|
||||
<input class="w3-check w3-dark-grey" type="checkbox" id="public_web_hosting" ?checked=${this.editing.publicWebHosting} @input=${event => self.editing = Object.assign({}, self.editing, {publicWebHosting: event.srcElement.checked})}></input>
|
||||
<input class="w3-check w3-dark-grey" type="checkbox" id="public_web_hosting" ?checked=${this.editing.publicWebHosting} @input=${(event) => (self.editing = Object.assign({}, self.editing, {publicWebHosting: event.srcElement.checked}))}></input>
|
||||
</div>
|
||||
<div>
|
||||
<button class="w3-button w3-dark-grey" @click=${this.attach_image}>Attach Image</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>` : null;
|
||||
let image = typeof(profile.image) == 'string' ? profile.image : profile.image?.link;
|
||||
</div>`
|
||||
: null;
|
||||
let image =
|
||||
typeof profile.image == 'string' ? profile.image : profile.image?.link;
|
||||
image = this.editing?.image ?? image;
|
||||
let description = this.editing?.description ?? profile.description;
|
||||
return html`<div style="border: 2px solid black; background-color: rgba(255, 255, 255, 0.2); padding: 16px">
|
||||
@ -256,4 +309,4 @@ class TfProfileElement extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-profile', TfProfileElement);
|
||||
customElements.define('tf-profile', TfProfileElement);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -23,10 +23,10 @@ class TfTabConnectionsElement extends LitElement {
|
||||
this.connections = [];
|
||||
this.stored_connections = [];
|
||||
this.users = {};
|
||||
tfrpc.rpc.getAllIdentities().then(function(identities) {
|
||||
tfrpc.rpc.getAllIdentities().then(function (identities) {
|
||||
self.identities = identities || [];
|
||||
});
|
||||
tfrpc.rpc.getStoredConnections().then(function(connections) {
|
||||
tfrpc.rpc.getStoredConnections().then(function (connections) {
|
||||
self.stored_connections = connections || [];
|
||||
});
|
||||
}
|
||||
@ -43,10 +43,12 @@ class TfTabConnectionsElement extends LitElement {
|
||||
|
||||
render_room_peers(connection) {
|
||||
let self = this;
|
||||
let peers = this.broadcasts.filter(x => x.tunnel?.id == connection);
|
||||
let peers = this.broadcasts.filter((x) => x.tunnel?.id == connection);
|
||||
if (peers.length) {
|
||||
let connections = this.connections.map(x => x.id);
|
||||
return html`${peers.filter(x => connections.indexOf(x.pubkey) == -1).map(x => html`${self.render_room_peer(x)}`)}`;
|
||||
let connections = this.connections.map((x) => x.id);
|
||||
return html`${peers
|
||||
.filter((x) => connections.indexOf(x.pubkey) == -1)
|
||||
.map((x) => html`${self.render_room_peer(x)}`)}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,7 +60,12 @@ class TfTabConnectionsElement extends LitElement {
|
||||
let self = this;
|
||||
return html`
|
||||
<li>
|
||||
<button class="w3-button w3-dark-grey" @click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)}>Connect</button>
|
||||
<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)}
|
||||
>
|
||||
Connect
|
||||
</button>
|
||||
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user> 📡
|
||||
</li>
|
||||
`;
|
||||
@ -67,7 +74,12 @@ class TfTabConnectionsElement extends LitElement {
|
||||
render_broadcast(connection) {
|
||||
return html`
|
||||
<li>
|
||||
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(connection)}>Connect</button>
|
||||
<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => tfrpc.rpc.connect(connection)}
|
||||
>
|
||||
Connect
|
||||
</button>
|
||||
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
|
||||
${this.render_connection_summary(connection)}
|
||||
</li>
|
||||
@ -81,11 +93,20 @@ class TfTabConnectionsElement extends LitElement {
|
||||
|
||||
render_connection(connection) {
|
||||
return html`
|
||||
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.closeConnection(connection.id)}>Close</button>
|
||||
<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => tfrpc.rpc.closeConnection(connection.id)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<tf-user id=${connection.id} .users=${this.users}></tf-user>
|
||||
${connection.tunnel !== undefined ? '🚇' : html`(${connection.host}:${connection.port})`}
|
||||
${connection.tunnel !== undefined
|
||||
? '🚇'
|
||||
: html`(${connection.host}:${connection.port})`}
|
||||
<ul>
|
||||
${this.connections.filter(x => x.tunnel === this.connections.indexOf(connection)).map(x => html`<li>${this.render_connection(x)}</li>`)}
|
||||
${this.connections
|
||||
.filter((x) => x.tunnel === this.connections.indexOf(connection))
|
||||
.map((x) => html`<li>${this.render_connection(x)}</li>`)}
|
||||
${this.render_room_peers(connection.id)}
|
||||
</ul>
|
||||
`;
|
||||
@ -97,34 +118,58 @@ class TfTabConnectionsElement extends LitElement {
|
||||
<div class="w3-container">
|
||||
<h2>New Connection</h2>
|
||||
<textarea class="w3-input w3-dark-grey" id="code"></textarea>
|
||||
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)}>Connect</button>
|
||||
<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() =>
|
||||
tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)}
|
||||
>
|
||||
Connect
|
||||
</button>
|
||||
<h2>Broadcasts</h2>
|
||||
<ul>
|
||||
${this.broadcasts.filter(x => x.address).map(x => self.render_broadcast(x))}
|
||||
${this.broadcasts
|
||||
.filter((x) => x.address)
|
||||
.map((x) => self.render_broadcast(x))}
|
||||
</ul>
|
||||
<h2>Connections</h2>
|
||||
<ul>
|
||||
${this.connections.filter(x => x.tunnel === undefined).map(x => html`
|
||||
<li>${this.render_connection(x)}</li>
|
||||
`)}
|
||||
${this.connections
|
||||
.filter((x) => x.tunnel === undefined)
|
||||
.map((x) => html` <li>${this.render_connection(x)}</li> `)}
|
||||
</ul>
|
||||
<h2>Stored Connections (WIP)</h2>
|
||||
<ul>
|
||||
${this.stored_connections.map(x => html`
|
||||
<li>
|
||||
<button class="w3-button w3-dark-grey" @click=${() => self.forget_stored_connection(x)}>Forget</button>
|
||||
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(x)}>Connect</button>
|
||||
${x.address}:${x.port} <tf-user id=${x.pubkey} .users=${self.users}></tf-user>
|
||||
</li>
|
||||
`)}
|
||||
${this.stored_connections.map(
|
||||
(x) => html`
|
||||
<li>
|
||||
<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => self.forget_stored_connection(x)}
|
||||
>
|
||||
Forget
|
||||
</button>
|
||||
<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${() => tfrpc.rpc.connect(x)}
|
||||
>
|
||||
Connect
|
||||
</button>
|
||||
${x.address}:${x.port}
|
||||
<tf-user id=${x.pubkey} .users=${self.users}></tf-user>
|
||||
</li>
|
||||
`
|
||||
)}
|
||||
</ul>
|
||||
<h2>Local Accounts</h2>
|
||||
<ul>
|
||||
${this.identities.map(x => html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>`)}
|
||||
${this.identities.map(
|
||||
(x) =>
|
||||
html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>`
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-tab-connections', TfTabConnectionsElement);
|
||||
customElements.define('tf-tab-connections', TfTabConnectionsElement);
|
||||
|
||||
@ -27,7 +27,8 @@ class TfTabMentionsElement extends LitElement {
|
||||
|
||||
async load() {
|
||||
console.log('Loading...', this.whoami);
|
||||
let results = await tfrpc.rpc.query(`
|
||||
let results = await tfrpc.rpc.query(
|
||||
`
|
||||
SELECT messages.*
|
||||
FROM messages_fts(?)
|
||||
JOIN messages ON messages.rowid = messages_fts.rowid
|
||||
@ -35,7 +36,12 @@ class TfTabMentionsElement extends LitElement {
|
||||
WHERE messages.author != ?
|
||||
ORDER BY timestamp DESC limit 20
|
||||
`,
|
||||
['"' + this.whoami.replace('"', '""') + '"', JSON.stringify(this.following), this.whoami]);
|
||||
[
|
||||
'"' + this.whoami.replace('"', '""') + '"',
|
||||
JSON.stringify(this.following),
|
||||
this.whoami,
|
||||
]
|
||||
);
|
||||
console.log('Done.');
|
||||
this.messages = results;
|
||||
}
|
||||
@ -58,8 +64,15 @@ class TfTabMentionsElement extends LitElement {
|
||||
this.load();
|
||||
}
|
||||
return html`
|
||||
<tf-news id="news" whoami=${this.whoami} .messages=${this.messages} .users=${this.users} .expanded=${this.expanded} @tf-expand=${this.on_expand}></tf-news>
|
||||
<tf-news
|
||||
id="news"
|
||||
whoami=${this.whoami}
|
||||
.messages=${this.messages}
|
||||
.users=${this.users}
|
||||
.expanded=${this.expanded}
|
||||
@tf-expand=${this.on_expand}
|
||||
></tf-news>
|
||||
`;
|
||||
}
|
||||
}
|
||||
customElements.define('tf-tab-mentions', TfTabMentionsElement);
|
||||
customElements.define('tf-tab-mentions', TfTabMentionsElement);
|
||||
|
||||
@ -45,9 +45,8 @@ class TfTabNewsFeedElement extends LitElement {
|
||||
UNION
|
||||
SELECT * FROM mine
|
||||
`,
|
||||
[
|
||||
this.hash.substring(1),
|
||||
]);
|
||||
[this.hash.substring(1)]
|
||||
);
|
||||
return r;
|
||||
} else if (this.hash.startsWith('#%')) {
|
||||
return await tfrpc.rpc.query(
|
||||
@ -61,15 +60,15 @@ class TfTabNewsFeedElement extends LitElement {
|
||||
ON messages.id = messages_refs.message
|
||||
WHERE messages_refs.ref = ?1
|
||||
`,
|
||||
[
|
||||
this.hash.substring(1),
|
||||
]);
|
||||
[this.hash.substring(1)]
|
||||
);
|
||||
} else {
|
||||
let promises = [];
|
||||
const k_following_limit = 256;
|
||||
for (let i = 0; i < this.following.length; i += k_following_limit) {
|
||||
promises.push(tfrpc.rpc.query(
|
||||
`
|
||||
promises.push(
|
||||
tfrpc.rpc.query(
|
||||
`
|
||||
WITH news AS (SELECT messages.*
|
||||
FROM messages
|
||||
JOIN json_each(?) AS following ON messages.author = following.value
|
||||
@ -87,15 +86,17 @@ class TfTabNewsFeedElement extends LitElement {
|
||||
UNION
|
||||
SELECT news.* FROM news
|
||||
`,
|
||||
[
|
||||
JSON.stringify(this.following.slice(i, i + k_following_limit)),
|
||||
this.start_time,
|
||||
/*
|
||||
** Don't show messages more than a day into the future to prevent
|
||||
** messages with far-future timestamps from staying at the top forever.
|
||||
*/
|
||||
new Date().valueOf() + 24 * 60 * 60 * 1000,
|
||||
]));
|
||||
[
|
||||
JSON.stringify(this.following.slice(i, i + k_following_limit)),
|
||||
this.start_time,
|
||||
/*
|
||||
** Don't show messages more than a day into the future to prevent
|
||||
** messages with far-future timestamps from staying at the top forever.
|
||||
*/
|
||||
new Date().valueOf() + 24 * 60 * 60 * 1000,
|
||||
]
|
||||
)
|
||||
);
|
||||
}
|
||||
return [].concat(...(await Promise.all(promises)));
|
||||
}
|
||||
@ -124,11 +125,8 @@ class TfTabNewsFeedElement extends LitElement {
|
||||
UNION
|
||||
SELECT news.* FROM news
|
||||
`,
|
||||
[
|
||||
JSON.stringify(this.following),
|
||||
this.start_time,
|
||||
last_start_time,
|
||||
]);
|
||||
[JSON.stringify(this.following), this.start_time, last_start_time]
|
||||
);
|
||||
this.messages = await this.decrypt([...more, ...this.messages]);
|
||||
}
|
||||
|
||||
@ -139,14 +137,12 @@ class TfTabNewsFeedElement extends LitElement {
|
||||
let content;
|
||||
try {
|
||||
content = JSON.parse(message?.content);
|
||||
} catch {
|
||||
}
|
||||
if (typeof(content) === 'string') {
|
||||
} catch {}
|
||||
if (typeof content === 'string') {
|
||||
let decrypted;
|
||||
try {
|
||||
decrypted = await tfrpc.rpc.try_decrypt(this.whoami, content);
|
||||
} catch {
|
||||
}
|
||||
} catch {}
|
||||
if (decrypted) {
|
||||
try {
|
||||
message.decrypted = JSON.parse(decrypted);
|
||||
@ -165,34 +161,51 @@ class TfTabNewsFeedElement extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.messages ||
|
||||
if (
|
||||
!this.messages ||
|
||||
this._messages_hash !== this.hash ||
|
||||
this._messages_following !== this.following) {
|
||||
console.log(`loading messages for ${this.whoami} (following ${this.following.length})`);
|
||||
this._messages_following !== this.following
|
||||
) {
|
||||
console.log(
|
||||
`loading messages for ${this.whoami} (following ${this.following.length})`
|
||||
);
|
||||
let self = this;
|
||||
this.messages = [];
|
||||
this._messages_hash = this.hash;
|
||||
this._messages_following = this.following;
|
||||
this.fetch_messages().then(this.decrypt.bind(this)).then(function(messages) {
|
||||
self.messages = messages;
|
||||
console.log(`loading mesages done for ${self.whoami}`);
|
||||
}).catch(function(error) {
|
||||
alert(JSON.stringify(error, null, 2));
|
||||
});
|
||||
this.fetch_messages()
|
||||
.then(this.decrypt.bind(this))
|
||||
.then(function (messages) {
|
||||
self.messages = messages;
|
||||
console.log(`loading mesages done for ${self.whoami}`);
|
||||
})
|
||||
.catch(function (error) {
|
||||
alert(JSON.stringify(error, null, 2));
|
||||
});
|
||||
}
|
||||
let more;
|
||||
if (!this.hash.startsWith('#@') && !this.hash.startsWith('#%')) {
|
||||
more = html`
|
||||
<p>
|
||||
<button class="w3-button w3-dark-grey" @click=${this.load_more}>Load More</button>
|
||||
<button class="w3-button w3-dark-grey" @click=${this.load_more}>
|
||||
Load More
|
||||
</button>
|
||||
</p>
|
||||
`;
|
||||
}
|
||||
return html`
|
||||
<tf-news id="news" whoami=${this.whoami} .users=${this.users} .messages=${this.messages} .following=${this.following} .drafts=${this.drafts} .expanded=${this.expanded}></tf-news>
|
||||
<tf-news
|
||||
id="news"
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
.messages=${this.messages}
|
||||
.following=${this.following}
|
||||
.drafts=${this.drafts}
|
||||
.expanded=${this.expanded}
|
||||
></tf-news>
|
||||
${more}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-tab-news-feed', TfTabNewsFeedElement);
|
||||
customElements.define('tf-tab-news-feed', TfTabNewsFeedElement);
|
||||
|
||||
@ -28,7 +28,7 @@ class TfTabNewsElement extends LitElement {
|
||||
this.cache = {};
|
||||
this.drafts = {};
|
||||
this.expanded = {};
|
||||
tfrpc.rpc.localStorageGet('drafts').then(function(d) {
|
||||
tfrpc.rpc.localStorageGet('drafts').then(function (d) {
|
||||
self.drafts = JSON.parse(d || '{}');
|
||||
});
|
||||
}
|
||||
@ -48,7 +48,9 @@ class TfTabNewsElement extends LitElement {
|
||||
let news = this.shadowRoot?.getElementById('news');
|
||||
if (news) {
|
||||
console.log('injecting messages', news.messages);
|
||||
news.add_messages(Object.values(Object.fromEntries(this.unread.map(x => [x.id, x]))));
|
||||
news.add_messages(
|
||||
Object.values(Object.fromEntries(this.unread.map((x) => [x.id, x])))
|
||||
);
|
||||
this.dispatchEvent(new CustomEvent('refresh'));
|
||||
}
|
||||
}
|
||||
@ -62,11 +64,16 @@ class TfTabNewsElement extends LitElement {
|
||||
let type = 'private';
|
||||
try {
|
||||
type = JSON.parse(message.content).type || type;
|
||||
} catch {
|
||||
}
|
||||
} catch {}
|
||||
counts[type] = (counts[type] || 0) + 1;
|
||||
}
|
||||
return '↻ Show New: ' + Object.keys(counts).sort().map(x => (counts[x].toString() + ' ' + x + 's')).join(', ');
|
||||
return (
|
||||
'↻ Show New: ' +
|
||||
Object.keys(counts)
|
||||
.sort()
|
||||
.map((x) => counts[x].toString() + ' ' + x + 's')
|
||||
.join(', ')
|
||||
);
|
||||
}
|
||||
|
||||
draft(event) {
|
||||
@ -96,23 +103,52 @@ class TfTabNewsElement extends LitElement {
|
||||
}
|
||||
|
||||
on_keypress(event) {
|
||||
if (event.target === document.body &&
|
||||
event.key == '.') {
|
||||
if (event.target === document.body && event.key == '.') {
|
||||
this.show_more();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let profile = this.hash.startsWith('#@') ?
|
||||
html`<tf-profile id=${this.hash.substring(1)} whoami=${this.whoami} .users=${this.users}></tf-profile>` : undefined;
|
||||
let profile = this.hash.startsWith('#@')
|
||||
? html`<tf-profile
|
||||
id=${this.hash.substring(1)}
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
></tf-profile>`
|
||||
: undefined;
|
||||
return html`
|
||||
<p class="w3-bar">
|
||||
<button class="w3-bar-item w3-button w3-dark-grey" @click=${this.show_more}>${this.new_messages_text()}</button>
|
||||
<button
|
||||
class="w3-bar-item w3-button w3-dark-grey"
|
||||
@click=${this.show_more}
|
||||
>
|
||||
${this.new_messages_text()}
|
||||
</button>
|
||||
</p>
|
||||
<div>Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!</div>
|
||||
<div><tf-compose id="tf-compose" whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} @tf-draft=${this.draft}></tf-compose></div>
|
||||
<div>
|
||||
Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!
|
||||
</div>
|
||||
<div>
|
||||
<tf-compose
|
||||
id="tf-compose"
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
.drafts=${this.drafts}
|
||||
@tf-draft=${this.draft}
|
||||
></tf-compose>
|
||||
</div>
|
||||
${profile}
|
||||
<tf-tab-news-feed id="news" whoami=${this.whoami} .users=${this.users} .following=${this.following} hash=${this.hash} .drafts=${this.drafts} .expanded=${this.expanded} @tf-draft=${this.draft} @tf-expand=${this.on_expand}></tf-tab-news-feed>
|
||||
<tf-tab-news-feed
|
||||
id="news"
|
||||
whoami=${this.whoami}
|
||||
.users=${this.users}
|
||||
.following=${this.following}
|
||||
hash=${this.hash}
|
||||
.drafts=${this.drafts}
|
||||
.expanded=${this.expanded}
|
||||
@tf-draft=${this.draft}
|
||||
@tf-expand=${this.on_expand}
|
||||
></tf-tab-news-feed>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,7 +41,7 @@ class TfTabQueryElement extends LitElement {
|
||||
await tfrpc.rpc.setHash('#sql=' + encodeURIComponent(query));
|
||||
let start_time = new Date();
|
||||
try {
|
||||
this.results = await tfrpc.rpc.query(query, [])
|
||||
this.results = await tfrpc.rpc.query(query, []);
|
||||
} catch (error) {
|
||||
this.error = error;
|
||||
}
|
||||
@ -79,8 +79,15 @@ class TfTabQueryElement extends LitElement {
|
||||
} else {
|
||||
let keys = Object.keys(this.results[0]).sort();
|
||||
return html`<table style="width: 100%; max-width: 100%">
|
||||
<tr>${keys.map(key => html`<th>${key}</th>`)}</tr>
|
||||
${this.results.map(row => html`<tr>${keys.map(key => html`<td>${row[key]}</td>`)}</tr>`)}
|
||||
<tr>
|
||||
${keys.map((key) => html`<th>${key}</th>`)}
|
||||
</tr>
|
||||
${this.results.map(
|
||||
(row) =>
|
||||
html`<tr>
|
||||
${keys.map((key) => html`<td>${row[key]}</td>`)}
|
||||
</tr>`
|
||||
)}
|
||||
</table>`;
|
||||
}
|
||||
}
|
||||
@ -100,15 +107,30 @@ class TfTabQueryElement extends LitElement {
|
||||
let self = this;
|
||||
return html`
|
||||
<div style="display: flex; flex-direction: row; gap: 4px">
|
||||
<textarea id="search" rows=8 class="w3-input w3-dark-grey" style="flex: 1; resize: vertical" @keydown=${this.search_keydown}>${this.query}</textarea>
|
||||
<button class="w3-button w3-dark-grey" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}>Execute</button>
|
||||
<textarea
|
||||
id="search"
|
||||
rows="8"
|
||||
class="w3-input w3-dark-grey"
|
||||
style="flex: 1; resize: vertical"
|
||||
@keydown=${this.search_keydown}
|
||||
>
|
||||
${this.query}</textarea
|
||||
>
|
||||
<button
|
||||
class="w3-button w3-dark-grey"
|
||||
@click=${(event) =>
|
||||
self.search(self.renderRoot.getElementById('search').value)}
|
||||
>
|
||||
Execute
|
||||
</button>
|
||||
</div>
|
||||
<div ?hidden=${this.duration === undefined}>
|
||||
Took ${this.duration / 1000.0} seconds.
|
||||
</div>
|
||||
<div ?hidden=${this.duration === undefined}>Took ${this.duration / 1000.0} seconds.</div>
|
||||
<div ?hidden=${this.duration !== undefined}>Executing...</div>
|
||||
${this.render_error()}
|
||||
${this.render_results()}
|
||||
${this.render_error()} ${this.render_results()}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-tab-query', TfTabQueryElement);
|
||||
customElements.define('tf-tab-query', TfTabQueryElement);
|
||||
|
||||
@ -27,23 +27,25 @@ class TfTabSearchElement extends LitElement {
|
||||
async search(query) {
|
||||
console.log('Searching...', this.whoami, query);
|
||||
let search = this.renderRoot.getElementById('search');
|
||||
if (search ) {
|
||||
if (search) {
|
||||
search.value = query;
|
||||
search.focus();
|
||||
search.select();
|
||||
}
|
||||
await tfrpc.rpc.setHash('#q=' + encodeURIComponent(query));
|
||||
let results = await tfrpc.rpc.query(`
|
||||
let results = await tfrpc.rpc.query(
|
||||
`
|
||||
SELECT messages.*
|
||||
FROM messages_fts(?)
|
||||
JOIN messages ON messages.rowid = messages_fts.rowid
|
||||
JOIN json_each(?) AS following ON messages.author = following.value
|
||||
ORDER BY timestamp DESC limit 100
|
||||
`,
|
||||
['"' + query.replace('"', '""') + '"', JSON.stringify(this.following)]);
|
||||
['"' + query.replace('"', '""') + '"', JSON.stringify(this.following)]
|
||||
);
|
||||
console.log('Done.');
|
||||
search = this.renderRoot.getElementById('search');
|
||||
if (search ) {
|
||||
if (search) {
|
||||
search.value = query;
|
||||
search.focus();
|
||||
search.select();
|
||||
@ -84,4 +86,4 @@ class TfTabSearchElement extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-tab-search', TfTabSearchElement);
|
||||
customElements.define('tf-tab-search', TfTabSearchElement);
|
||||
|
||||
@ -17,8 +17,12 @@ class TfTagElement extends LitElement {
|
||||
|
||||
render() {
|
||||
let number = this.count ? html` (${this.count})` : undefined;
|
||||
return html`<a href="#q=${this.tag}" style="display: inline-block; margin: 3px; border: 1px solid black; background-color: #444; padding: 4px; border-radius: 3px">${this.tag}${number}</a>`;
|
||||
return html`<a
|
||||
href="#q=${this.tag}"
|
||||
style="display: inline-block; margin: 3px; border: 1px solid black; background-color: #444; padding: 4px; border-radius: 3px"
|
||||
>${this.tag}${number}</a
|
||||
>`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-tag', TfTagElement);
|
||||
customElements.define('tf-tag', TfTagElement);
|
||||
|
||||
@ -20,25 +20,28 @@ class TfUserElement extends LitElement {
|
||||
|
||||
render() {
|
||||
let name = this.users?.[this.id]?.name;
|
||||
name = name !== undefined ?
|
||||
html`<a target="_top" href=${'#' + this.id}>${name}</a>` :
|
||||
html`<a target="_top" href=${'#' + this.id}>${this.id}</a>`;
|
||||
name =
|
||||
name !== undefined
|
||||
? html`<a target="_top" href=${'#' + this.id}>${name}</a>`
|
||||
: html`<a target="_top" href=${'#' + this.id}>${this.id}</a>`;
|
||||
|
||||
if (this.users[this.id]) {
|
||||
let image = this.users[this.id].image;
|
||||
image = typeof(image) == 'string' ? image : image?.link;
|
||||
return html`
|
||||
<div style="display: inline-block; font-weight: bold">
|
||||
<img style="width: 2em; height: 2em; vertical-align: middle; border-radius: 50%" ?hidden=${image === undefined} src="${image ? '/' + image + '/view' : undefined}">
|
||||
${name}
|
||||
</div>`;
|
||||
image = typeof image == 'string' ? image : image?.link;
|
||||
return html` <div style="display: inline-block; font-weight: bold">
|
||||
<img
|
||||
style="width: 2em; height: 2em; vertical-align: middle; border-radius: 50%"
|
||||
?hidden=${image === undefined}
|
||||
src="${image ? '/' + image + '/view' : undefined}"
|
||||
/>
|
||||
${name}
|
||||
</div>`;
|
||||
} else {
|
||||
return html`
|
||||
<div style="display: inline-block; font-weight: bold">
|
||||
${name}
|
||||
</div>`;
|
||||
return html` <div style="display: inline-block; font-weight: bold">
|
||||
${name}
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-user', TfUserElement);
|
||||
customElements.define('tf-user', TfUserElement);
|
||||
|
||||
@ -2,20 +2,32 @@ import * as linkify from './commonmark-linkify.js';
|
||||
import * as hashtagify from './commonmark-hashtag.js';
|
||||
|
||||
function image(node, entering) {
|
||||
if (node.firstChild?.type === 'text' &&
|
||||
node.firstChild.literal.startsWith('video:')) {
|
||||
if (
|
||||
node.firstChild?.type === 'text' &&
|
||||
node.firstChild.literal.startsWith('video:')
|
||||
) {
|
||||
if (entering) {
|
||||
this.lit('<video style="max-width: 100%; max-height: 480px" title="' + this.esc(node.firstChild?.literal) + '" controls>');
|
||||
this.lit(
|
||||
'<video style="max-width: 100%; max-height: 480px" title="' +
|
||||
this.esc(node.firstChild?.literal) +
|
||||
'" controls>'
|
||||
);
|
||||
this.lit('<source src="' + this.esc(node.destination) + '"></source>');
|
||||
this.disableTags += 1;
|
||||
} else {
|
||||
this.disableTags -= 1;
|
||||
this.lit('</video>');
|
||||
}
|
||||
} else if (node.firstChild?.type === 'text' &&
|
||||
node.firstChild.literal.startsWith('audio:')) {
|
||||
} else if (
|
||||
node.firstChild?.type === 'text' &&
|
||||
node.firstChild.literal.startsWith('audio:')
|
||||
) {
|
||||
if (entering) {
|
||||
this.lit('<audio style="height: 32px; max-width: 100%" title="' + this.esc(node.firstChild?.literal) + '" controls>');
|
||||
this.lit(
|
||||
'<audio style="height: 32px; max-width: 100%" title="' +
|
||||
this.esc(node.firstChild?.literal) +
|
||||
'" controls>'
|
||||
);
|
||||
this.lit('<source src="' + this.esc(node.destination) + '"></source>');
|
||||
this.disableTags += 1;
|
||||
} else {
|
||||
@ -25,7 +37,11 @@ function image(node, entering) {
|
||||
} else {
|
||||
if (entering) {
|
||||
if (this.disableTags === 0) {
|
||||
this.lit('<div class="img_caption">' + this.esc(node.firstChild?.literal || node.destination) + '</div>');
|
||||
this.lit(
|
||||
'<div class="img_caption">' +
|
||||
this.esc(node.firstChild?.literal || node.destination) +
|
||||
'</div>'
|
||||
);
|
||||
if (this.options.safe && potentiallyUnsafe(node.destination)) {
|
||||
this.lit('<img src="" alt="');
|
||||
} else {
|
||||
@ -58,14 +74,20 @@ export function markdown(md) {
|
||||
node = event.node;
|
||||
if (event.entering) {
|
||||
if (node.type == 'link') {
|
||||
if (node.destination.startsWith('@') &&
|
||||
node.destination.endsWith('.ed25519')) {
|
||||
if (
|
||||
node.destination.startsWith('@') &&
|
||||
node.destination.endsWith('.ed25519')
|
||||
) {
|
||||
node.destination = '#' + node.destination;
|
||||
} else if (node.destination.startsWith('%') &&
|
||||
node.destination.endsWith('.sha256')) {
|
||||
} else if (
|
||||
node.destination.startsWith('%') &&
|
||||
node.destination.endsWith('.sha256')
|
||||
) {
|
||||
node.destination = '#' + node.destination;
|
||||
} else if (node.destination.startsWith('&') &&
|
||||
node.destination.endsWith('.sha256')) {
|
||||
} else if (
|
||||
node.destination.startsWith('&') &&
|
||||
node.destination.endsWith('.sha256')
|
||||
) {
|
||||
node.destination = '/' + node.destination + '/view';
|
||||
}
|
||||
} else if (node.type == 'image') {
|
||||
@ -90,4 +112,4 @@ export function human_readable_size(bytes) {
|
||||
}
|
||||
}
|
||||
return `${Math.round(v * 10) / 10} ${u}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
.tribute-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
z-index: 999999;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
z-index: 999999;
|
||||
}
|
||||
.tribute-container ul {
|
||||
margin: 0;
|
||||
margin-top: 2px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: #efefef;
|
||||
margin: 0;
|
||||
margin-top: 2px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: #efefef;
|
||||
}
|
||||
.tribute-container li {
|
||||
padding: 5px 5px;
|
||||
cursor: pointer;
|
||||
padding: 5px 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tribute-container li.highlight {
|
||||
background: #ddd;
|
||||
background: #ddd;
|
||||
}
|
||||
.tribute-container li span {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tribute-container li.no-match {
|
||||
cursor: default;
|
||||
cursor: default;
|
||||
}
|
||||
.tribute-container .menu-highlighted {
|
||||
font-weight: bold;
|
||||
}
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user