2022-09-11 13:42:41 -04:00
|
|
|
|
import {LitElement, html, unsafeHTML, until} from './lit-all.min.js';
|
|
|
|
|
import * as tfrpc from '/static/tfrpc.js';
|
|
|
|
|
import {styles} from './tf-styles.js';
|
|
|
|
|
|
2022-09-14 19:33:57 -04:00
|
|
|
|
class TfTabNewsElement extends LitElement {
|
|
|
|
|
static get properties() {
|
|
|
|
|
return {
|
|
|
|
|
whoami: {type: String},
|
|
|
|
|
users: {type: Object},
|
|
|
|
|
hash: {type: String},
|
|
|
|
|
unread: {type: Array},
|
|
|
|
|
following: {type: Array},
|
2023-01-20 19:16:18 -05:00
|
|
|
|
drafts: {type: Object},
|
2023-01-24 19:56:10 -05:00
|
|
|
|
expanded: {type: Object},
|
2024-05-11 10:40:34 -04:00
|
|
|
|
loading: {type: Boolean},
|
2024-11-30 15:05:14 -05:00
|
|
|
|
channels: {type: Array},
|
|
|
|
|
channels_unread: {type: Object},
|
|
|
|
|
channels_latest: {type: Object},
|
2023-03-29 18:02:12 -04:00
|
|
|
|
};
|
2022-09-14 19:33:57 -04:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
static styles = styles;
|
|
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
|
super();
|
|
|
|
|
let self = this;
|
|
|
|
|
this.whoami = null;
|
|
|
|
|
this.users = {};
|
|
|
|
|
this.hash = '#';
|
2022-09-11 13:42:41 -04:00
|
|
|
|
this.unread = [];
|
2022-09-14 19:33:57 -04:00
|
|
|
|
this.following = [];
|
|
|
|
|
this.cache = {};
|
2023-01-20 19:16:18 -05:00
|
|
|
|
this.drafts = {};
|
2023-01-24 19:56:10 -05:00
|
|
|
|
this.expanded = {};
|
2024-11-30 15:05:14 -05:00
|
|
|
|
this.channels_unread = {};
|
|
|
|
|
this.channels_latest = {};
|
|
|
|
|
this.channels = [];
|
2024-02-24 11:09:34 -05:00
|
|
|
|
tfrpc.rpc.localStorageGet('drafts').then(function (d) {
|
2023-01-20 19:16:18 -05:00
|
|
|
|
self.drafts = JSON.parse(d || '{}');
|
|
|
|
|
});
|
2022-09-11 13:42:41 -04:00
|
|
|
|
}
|
|
|
|
|
|
2023-05-02 12:47:27 -04:00
|
|
|
|
connectedCallback() {
|
|
|
|
|
super.connectedCallback();
|
|
|
|
|
document.body.addEventListener('keypress', this.on_keypress.bind(this));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
disconnectedCallback() {
|
|
|
|
|
super.disconnectedCallback();
|
|
|
|
|
document.body.removeEventListener('keypress', this.on_keypress.bind(this));
|
|
|
|
|
}
|
|
|
|
|
|
2022-09-14 19:33:57 -04:00
|
|
|
|
show_more() {
|
|
|
|
|
let unread = this.unread;
|
2023-05-03 18:32:21 -04:00
|
|
|
|
let news = this.shadowRoot?.getElementById('news');
|
2022-09-14 19:33:57 -04:00
|
|
|
|
if (news) {
|
2024-12-01 18:20:57 -05:00
|
|
|
|
news.load_latest();
|
2022-09-14 19:33:57 -04:00
|
|
|
|
this.dispatchEvent(new CustomEvent('refresh'));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
new_messages_text() {
|
|
|
|
|
if (!this.unread?.length) {
|
|
|
|
|
return 'No new messages.';
|
|
|
|
|
}
|
|
|
|
|
let counts = {};
|
|
|
|
|
for (let message of this.unread) {
|
2022-09-25 08:33:54 -04:00
|
|
|
|
let type = 'private';
|
2022-09-14 19:33:57 -04:00
|
|
|
|
try {
|
|
|
|
|
type = JSON.parse(message.content).type || type;
|
2024-02-24 11:09:34 -05:00
|
|
|
|
} catch {}
|
2022-09-14 19:33:57 -04:00
|
|
|
|
counts[type] = (counts[type] || 0) + 1;
|
2022-09-11 13:42:41 -04:00
|
|
|
|
}
|
2024-02-24 11:09:34 -05:00
|
|
|
|
return (
|
|
|
|
|
'↻ Show New: ' +
|
|
|
|
|
Object.keys(counts)
|
|
|
|
|
.sort()
|
|
|
|
|
.map((x) => counts[x].toString() + ' ' + x + 's')
|
|
|
|
|
.join(', ')
|
|
|
|
|
);
|
2022-09-11 13:42:41 -04:00
|
|
|
|
}
|
|
|
|
|
|
2023-01-20 19:16:18 -05:00
|
|
|
|
draft(event) {
|
|
|
|
|
let id = event.detail.id || '';
|
2023-01-28 14:39:41 -05:00
|
|
|
|
let previous = this.drafts[id];
|
2023-01-20 19:16:18 -05:00
|
|
|
|
if (event.detail.draft !== undefined) {
|
2023-01-28 14:39:41 -05:00
|
|
|
|
this.drafts[id] = event.detail.draft;
|
2023-01-20 19:16:18 -05:00
|
|
|
|
} else {
|
|
|
|
|
delete this.drafts[id];
|
2023-01-28 14:39:41 -05:00
|
|
|
|
}
|
2024-04-24 20:19:14 -04:00
|
|
|
|
this.drafts = Object.assign({}, this.drafts);
|
2023-01-20 19:16:18 -05:00
|
|
|
|
tfrpc.rpc.localStorageSet('drafts', JSON.stringify(this.drafts));
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-24 19:56:10 -05:00
|
|
|
|
on_expand(event) {
|
|
|
|
|
if (event.detail.expanded) {
|
|
|
|
|
let expand = {};
|
|
|
|
|
expand[event.detail.id] = true;
|
|
|
|
|
this.expanded = Object.assign({}, this.expanded, expand);
|
|
|
|
|
} else {
|
|
|
|
|
delete this.expanded[event.detail.id];
|
|
|
|
|
this.expanded = Object.assign({}, this.expanded);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-02 12:47:27 -04:00
|
|
|
|
on_keypress(event) {
|
2024-02-24 11:09:34 -05:00
|
|
|
|
if (event.target === document.body && event.key == '.') {
|
2023-05-02 12:47:27 -04:00
|
|
|
|
this.show_more();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-11-30 15:05:14 -05:00
|
|
|
|
unread_status(channel) {
|
2024-12-05 20:47:02 -05:00
|
|
|
|
if (
|
|
|
|
|
this.channels_latest[channel] &&
|
2024-11-30 15:05:14 -05:00
|
|
|
|
(this.channels_unread[channel] === undefined ||
|
2024-12-22 13:16:56 -05:00
|
|
|
|
this.channels_unread[channel] <= this.channels_latest[channel])
|
2024-12-05 20:47:02 -05:00
|
|
|
|
) {
|
2024-11-30 15:05:14 -05:00
|
|
|
|
return '🔵';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
show_sidebar() {
|
|
|
|
|
this.renderRoot.getElementById('sidebar').style.display = 'block';
|
2024-12-03 19:40:08 -05:00
|
|
|
|
this.renderRoot.getElementById('sidebar_overlay').style.display = 'block';
|
2024-11-30 15:05:14 -05:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
hide_sidebar() {
|
|
|
|
|
this.renderRoot.getElementById('sidebar').style.display = 'none';
|
2024-12-03 19:40:08 -05:00
|
|
|
|
this.renderRoot.getElementById('sidebar_overlay').style.display = 'none';
|
2024-11-30 15:05:14 -05:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async channel_toggle_subscribed() {
|
|
|
|
|
let channel = this.hash.substring(2);
|
|
|
|
|
let subscribed = this.channels.indexOf(channel) != -1;
|
|
|
|
|
subscribed = !subscribed;
|
|
|
|
|
|
|
|
|
|
await tfrpc.rpc.appendMessage(this.whoami, {
|
|
|
|
|
type: 'channel',
|
|
|
|
|
channel: channel,
|
|
|
|
|
subscribed: subscribed,
|
|
|
|
|
});
|
|
|
|
|
if (subscribed) {
|
|
|
|
|
this.channels = [].concat([channel], this.channels).sort();
|
|
|
|
|
} else {
|
2024-12-05 20:47:02 -05:00
|
|
|
|
this.channels = this.channels.filter((x) => x != channel);
|
2024-11-30 15:05:14 -05:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
channel() {
|
|
|
|
|
return this.hash.startsWith('##') ? this.hash.substring(2) : undefined;
|
|
|
|
|
}
|
|
|
|
|
|
2022-09-11 13:42:41 -04:00
|
|
|
|
render() {
|
2024-12-05 20:47:02 -05:00
|
|
|
|
let profile =
|
|
|
|
|
this.hash.startsWith('#@') && this.hash != '#@'
|
|
|
|
|
? html`<tf-profile
|
|
|
|
|
class="tf-profile"
|
|
|
|
|
id=${this.hash.substring(1)}
|
|
|
|
|
whoami=${this.whoami}
|
|
|
|
|
.users=${this.users}
|
|
|
|
|
></tf-profile>`
|
|
|
|
|
: undefined;
|
2024-05-11 10:40:34 -04:00
|
|
|
|
let edit_profile;
|
2024-05-12 07:48:34 -04:00
|
|
|
|
if (
|
|
|
|
|
!this.loading &&
|
2024-05-11 10:40:34 -04:00
|
|
|
|
this.users[this.whoami]?.name === undefined &&
|
2024-05-12 07:48:34 -04:00
|
|
|
|
this.hash.substring(1) != this.whoami
|
|
|
|
|
) {
|
|
|
|
|
edit_profile = html` <div
|
|
|
|
|
class="w3-panel w3-padding w3-round w3-card-4 w3-theme-l3"
|
|
|
|
|
>
|
|
|
|
|
ℹ️ Follow your identity link ☝️ above to edit your profile and set your
|
|
|
|
|
name.
|
|
|
|
|
</div>`;
|
2024-05-11 10:40:34 -04:00
|
|
|
|
}
|
2022-09-11 13:42:41 -04:00
|
|
|
|
return html`
|
2024-12-05 20:47:02 -05:00
|
|
|
|
<div
|
|
|
|
|
class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left"
|
2024-12-23 13:07:33 -05:00
|
|
|
|
style="width: 2in; left: 0; z-index: 5; box-sizing: border-box"
|
2024-12-05 20:47:02 -05:00
|
|
|
|
id="sidebar"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
class="w3-right w3-button w3-hide-large"
|
|
|
|
|
@click=${this.hide_sidebar}
|
|
|
|
|
>
|
|
|
|
|
×
|
|
|
|
|
</div>
|
|
|
|
|
${this.hash.startsWith('##') &&
|
|
|
|
|
this.channels.indexOf(this.hash.substring(2)) == -1
|
|
|
|
|
? html`
|
|
|
|
|
<div class="w3-bar-item w3-theme-d2">Viewing</div>
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="w3-bar-item w3-button"
|
|
|
|
|
style="font-weight: bold"
|
|
|
|
|
>${this.hash.substring(2)}</a
|
|
|
|
|
>
|
|
|
|
|
`
|
|
|
|
|
: undefined}
|
2024-11-30 15:05:14 -05:00
|
|
|
|
<div class="w3-bar-item w3-theme-d2">Channels</div>
|
2024-12-05 20:47:02 -05:00
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="w3-bar-item w3-button"
|
|
|
|
|
style=${this.hash == '#' ? 'font-weight: bold' : undefined}
|
|
|
|
|
>general ${this.unread_status('')}</a
|
|
|
|
|
>
|
|
|
|
|
<a
|
|
|
|
|
href="#@"
|
|
|
|
|
class="w3-bar-item w3-button"
|
|
|
|
|
style=${this.hash == '#@' ? 'font-weight: bold' : undefined}
|
|
|
|
|
>@mentions ${this.unread_status('@')}</a
|
|
|
|
|
>
|
2024-12-18 20:03:53 -05:00
|
|
|
|
<a
|
|
|
|
|
href="#🔐"
|
|
|
|
|
class="w3-bar-item w3-button"
|
|
|
|
|
style=${this.hash == '#🔐' ? 'font-weight: bold' : undefined}
|
|
|
|
|
>🔐private ${this.unread_status('🔐')}</a
|
|
|
|
|
>
|
2024-12-23 12:23:14 -05:00
|
|
|
|
${Object.keys(this.drafts).sort().map(x => html`
|
|
|
|
|
<a
|
|
|
|
|
href=${'#' + encodeURIComponent(x)}
|
|
|
|
|
class="w3-bar-item w3-button"
|
|
|
|
|
style="text-wrap: nowrap; text-overflow: ellipsis">📝 ${this.drafts[x]?.text ?? x}</a
|
|
|
|
|
>
|
|
|
|
|
`)}
|
2024-12-05 20:47:02 -05:00
|
|
|
|
${this.channels.map(
|
|
|
|
|
(x) => html`
|
|
|
|
|
<a
|
|
|
|
|
href=${'#' + encodeURIComponent('#' + x)}
|
|
|
|
|
class="w3-bar-item w3-button"
|
|
|
|
|
style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}
|
|
|
|
|
>#${x} ${this.unread_status(x)}</a
|
|
|
|
|
>
|
|
|
|
|
`
|
|
|
|
|
)}
|
2024-02-24 11:09:34 -05:00
|
|
|
|
</div>
|
2024-12-05 20:47:02 -05:00
|
|
|
|
<div
|
|
|
|
|
class="w3-overlay"
|
|
|
|
|
id="sidebar_overlay"
|
|
|
|
|
@click=${this.hide_sidebar}
|
|
|
|
|
></div>
|
2024-11-30 17:49:27 -05:00
|
|
|
|
<div style="margin-left: 2in; padding: 8px" id="main" class="w3-main">
|
2024-12-05 20:47:02 -05:00
|
|
|
|
<div
|
|
|
|
|
id="show_sidebar"
|
|
|
|
|
class="w3-left w3-button w3-hide-large"
|
|
|
|
|
@click=${this.show_sidebar}
|
|
|
|
|
>
|
|
|
|
|
☰
|
|
|
|
|
</div>
|
2024-11-30 15:05:14 -05:00
|
|
|
|
<p>
|
2024-12-05 20:47:02 -05:00
|
|
|
|
<button class="w3-button w3-theme-d1" @click=${this.show_more}>
|
2024-11-30 15:05:14 -05:00
|
|
|
|
${this.new_messages_text()}
|
|
|
|
|
</button>
|
2024-12-05 20:47:02 -05:00
|
|
|
|
${this.hash.startsWith('##')
|
|
|
|
|
? html`
|
|
|
|
|
<button
|
|
|
|
|
class="w3-button w3-theme-d1"
|
|
|
|
|
@click=${this.channel_toggle_subscribed}
|
|
|
|
|
>
|
|
|
|
|
${this.channels.indexOf(this.hash.substring(2)) != -1
|
|
|
|
|
? 'Unsubscribe from #'
|
|
|
|
|
: 'Subscribe to #'}${this.hash.substring(2)}
|
|
|
|
|
</button>
|
|
|
|
|
`
|
|
|
|
|
: undefined}
|
2024-11-30 15:05:14 -05:00
|
|
|
|
</p>
|
|
|
|
|
<div class="w3-bar">
|
|
|
|
|
Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!
|
|
|
|
|
${edit_profile}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<tf-compose
|
|
|
|
|
id="tf-compose"
|
|
|
|
|
whoami=${this.whoami}
|
|
|
|
|
.users=${this.users}
|
|
|
|
|
.drafts=${this.drafts}
|
|
|
|
|
@tf-draft=${this.draft}
|
|
|
|
|
.channel=${this.channel()}
|
|
|
|
|
></tf-compose>
|
|
|
|
|
</div>
|
|
|
|
|
${profile}
|
|
|
|
|
<tf-tab-news-feed
|
|
|
|
|
id="news"
|
2024-02-24 11:09:34 -05:00
|
|
|
|
whoami=${this.whoami}
|
|
|
|
|
.users=${this.users}
|
2024-11-30 15:05:14 -05:00
|
|
|
|
.following=${this.following}
|
|
|
|
|
hash=${this.hash}
|
2024-02-24 11:09:34 -05:00
|
|
|
|
.drafts=${this.drafts}
|
2024-11-30 15:05:14 -05:00
|
|
|
|
.expanded=${this.expanded}
|
2024-02-24 11:09:34 -05:00
|
|
|
|
@tf-draft=${this.draft}
|
2024-11-30 15:05:14 -05:00
|
|
|
|
@tf-expand=${this.on_expand}
|
|
|
|
|
.channels_unread=${this.channels_unread}
|
2024-12-10 21:09:55 -05:00
|
|
|
|
.channels_latest=${this.channels_latest}
|
2024-11-30 15:05:14 -05:00
|
|
|
|
></tf-tab-news-feed>
|
2024-02-24 11:09:34 -05:00
|
|
|
|
</div>
|
2022-09-11 13:42:41 -04:00
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-02 20:30:48 -04:00
|
|
|
|
customElements.define('tf-tab-news', TfTabNewsElement);
|