hiimgoodpack/brainlet
1
0
Fork 0
forked from hippoz/brainlet
Code Issues Pull requests Projects Releases Wiki Activity

frontend: messages

Browse source
This commit is contained in:
hippoz 2021-03-22 19:39:10 +02:00
parent b039639ff8
commit b902a1fc04
No known key found for this signature in database
GPG key ID: 7C52899193467641
2 changed files with 31 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
brainlet/app/gatewaytest/app.js
View file

@ -119,14 +119,30 @@ class AppState {
constructor(token) { constructor(token) {
this.connection = new GatewayConnection(token); this.connection = new GatewayConnection(token);
this.tc = new Tricarbon(); this.tc = new Tricarbon();
this.elements = {
messagesContainer: "#messages",
messageInput: "#message-input",
channels: "#channels",
topBar: "#top-bar"
};
this.tcEvents = this.tc.useEvents(); this.tcEvents = this.tc.useEvents();
this.messageObserver = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === "childList") {
const messages = this.tc.A(this.elements.messagesContainer);
messages.scrollTop = messages.scrollHeight;
}
}
});
this.messageStore = {}; this.messageStore = {};
this.selectedChannelId = null; this.selectedChannelId = null;
this.Sidebar = (channels) => (ev) => ` this.Sidebar = (channels) => (ev) => `
${Object.keys(channels).map(k => ` ${Object.keys(channels).map(k => `
<button class="sidebar-button" onclick="${ev(() => this.navigateToChannel(channels[k]))}">${channels[k].title}</button> <button class="sidebar-button" id="${channels[k]._id}" onclick="${ev(() => this.navigateToChannel(channels[k]))}">${channels[k].title}</button>
`).join("")} `).join("")}
`; `;
@ -145,13 +161,14 @@ class AppState {
this.connection.onopen = (sessionInfo) => { this.connection.onopen = (sessionInfo) => {
this.renderSidebar(sessionInfo.channels); this.renderSidebar(sessionInfo.channels);
this.tc.A("#message-input").addEventListener("keydown", (e) => { this.messageObserver.observe(this.tc.A(this.elements.messagesContainer), { childList: true });
this.tc.A(this.elements.messageInput).addEventListener("keydown", (e) => {
if (e.code === "Enter") { if (e.code === "Enter") {
if (!this.selectedChannelId) return; if (!this.selectedChannelId) return;
const messageContent = this.tc.A("#message-input").value; const messageContent = this.tc.A(this.elements.messageInput).value;
if (!messageContent) return; if (!messageContent) return;
this.connection.sendMessage(messageContent, this.selectedChannelId); this.connection.sendMessage(messageContent, this.selectedChannelId);
this.tc.A("#message-input").value = ""; this.tc.A(this.elements.messageInput).value = "";
} }
}); });
}; };
@ -165,7 +182,7 @@ AppState.prototype.appendMessage = function(message) {
if (!this.messageStore[message.channel._id]) this.messageStore[message.channel._id] = []; if (!this.messageStore[message.channel._id]) this.messageStore[message.channel._id] = [];
this.messageStore[message.channel._id].push({ content: message.content, author: message.author }); this.messageStore[message.channel._id].push({ content: message.content, author: message.author });
if (this.selectedChannelId === message.channel._id) { if (this.selectedChannelId === message.channel._id) {
this.tc.push(this.ChannelMessages(this.messageStore[message.channel._id] || []), "#messages", false, this.tcEvents("#messages")); this.tc.push(this.ChannelMessages(this.messageStore[message.channel._id] || []), this.elements.messagesContainer, false, this.tcEvents(this.elements.messagesContainer));
} }
}; };
@ -173,13 +190,16 @@ AppState.prototype.navigateToChannel = function(channel) {
console.log("app: navigating to channel", channel); console.log("app: navigating to channel", channel);
if (this.selectedChannelId !== channel._id) { if (this.selectedChannelId !== channel._id) {
this.selectedChannelId = channel._id; this.selectedChannelId = channel._id;
this.tc.push(this.ChannelTopBar(channel), "#top-bar", false); this.tc.push(this.ChannelTopBar(channel), this.elements.topBar, false);
this.tc.push(this.ChannelMessages(this.messageStore[channel._id] || []), "#messages", false, this.tcEvents("#messages")); this.tc.push(this.ChannelMessages(this.messageStore[channel._id] || []), this.elements.messagesContainer, false, this.tcEvents(this.elements.messagesContainer));
} }
}; };
AppState.prototype.renderSidebar = function(channels) { AppState.prototype.renderSidebar = function(channels) {
this.tc.push(this.Sidebar(channels), "#channels", false, this.tcEvents("#channels")); this.tc.push(this.Sidebar(channels), this.elements.channels, false, this.tcEvents(this.elements.channels));
}; };
const app = new AppState(localStorage.getItem("token")); let app;
document.addEventListener("DOMContentLoaded", () => {
app = new AppState(localStorage.getItem("token"));
});

2
brainlet/app/gatewaytest/style.css
View file

@ -35,6 +35,7 @@ main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 10; flex: 10;
height: 100%;
} }
.sidebar { .sidebar {
@ -97,6 +98,7 @@ main {
flex: 1; flex: 1;
flex-wrap: wrap; flex-wrap: wrap;
overflow-y: auto; overflow-y: auto;
height: 100%;
background-color: var(--bg); background-color: var(--bg);
} }