tildefriends/apps/ssb/tf-tab-news.js

157 lines
3.6 KiB
JavaScript
Raw Normal View History

import {LitElement, html, unsafeHTML, until} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
import {styles} from './tf-styles.js';
class TfTabNewsElement extends LitElement {
static get properties() {
return {
whoami: {type: String},
users: {type: Object},
hash: {type: String},
unread: {type: Array},
following: {type: Array},
drafts: {type: Object},
expanded: {type: Object},
};
}
static styles = styles;
constructor() {
super();
let self = this;
this.whoami = null;
this.users = {};
this.hash = '#';
this.unread = [];
this.following = [];
this.cache = {};
this.drafts = {};
this.expanded = {};
2024-02-24 11:09:34 -05:00
tfrpc.rpc.localStorageGet('drafts').then(function (d) {
self.drafts = JSON.parse(d || '{}');
});
}
connectedCallback() {
super.connectedCallback();
document.body.addEventListener('keypress', this.on_keypress.bind(this));
}
disconnectedCallback() {
super.disconnectedCallback();
document.body.removeEventListener('keypress', this.on_keypress.bind(this));
}
show_more() {
let unread = this.unread;
let news = this.shadowRoot?.getElementById('news');
if (news) {
console.log('injecting messages', news.messages);
2024-02-24 11:09:34 -05:00
news.add_messages(
Object.values(Object.fromEntries(this.unread.map((x) => [x.id, x])))
);
this.dispatchEvent(new CustomEvent('refresh'));
}
}
new_messages_text() {
if (!this.unread?.length) {
return 'No new messages.';
}
let counts = {};
for (let message of this.unread) {
let type = 'private';
try {
type = JSON.parse(message.content).type || type;
2024-02-24 11:09:34 -05:00
} catch {}
counts[type] = (counts[type] || 0) + 1;
}
2024-02-24 11:09:34 -05:00
return (
'↻ Show New: ' +
Object.keys(counts)
.sort()
.map((x) => counts[x].toString() + ' ' + x + 's')
.join(', ')
);
}
draft(event) {
let id = event.detail.id || '';
let previous = this.drafts[id];
if (event.detail.draft !== undefined) {
this.drafts[id] = event.detail.draft;
} else {
delete this.drafts[id];
}
/* Only trigger a re-render if we're creating a new draft or discarding an old one. */
if ((previous !== undefined) != (event.detail.draft !== undefined)) {
this.drafts = Object.assign({}, this.drafts);
}
tfrpc.rpc.localStorageSet('drafts', JSON.stringify(this.drafts));
}
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);
}
}
on_keypress(event) {
2024-02-24 11:09:34 -05:00
if (event.target === document.body && event.key == '.') {
this.show_more();
}
}
render() {
2024-02-24 11:09:34 -05:00
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">
2024-02-24 11:09:34 -05:00
<button
2024-04-04 20:35:09 -04:00
class="w3-bar-item w3-button w3-theme-d1"
2024-02-24 11:09:34 -05:00
@click=${this.show_more}
>
${this.new_messages_text()}
</button>
</p>
2024-02-24 11:09:34 -05:00
<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}
2024-02-24 11:09:34 -05:00
<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>
`;
}
}
customElements.define('tf-tab-news', TfTabNewsElement);