Split view.js into messages and sidebar

This commit is contained in:
Midgard 2022-06-08 17:57:06 +02:00
parent 38a3bec0a4
commit f86299f776
Signed by: midgard
GPG key ID: 511C112F1331BBB4
3 changed files with 73 additions and 60 deletions

View file

@ -64,7 +64,8 @@
<script type="text/javascript" src="/js/pubsub.js"></script>
<script type="text/javascript" src="/js/localstorage_credentials.js"></script>
<script type="text/javascript" src="/js/mm_client.js"></script>
<script type="text/javascript" src="/js/view/view.js"></script>
<script type="text/javascript" src="/js/view/messages.js"></script>
<script type="text/javascript" src="/js/view/sidebar.js"></script>
<script type="text/javascript" src="/js/controller.js"></script>
<script type="text/javascript" src="/js/emoji.js"></script>
<script type="text/javascript" src="/js/main.js"></script>

View file

@ -1,58 +1,3 @@
function populateServerSelectionList() {
const servers = localstorage_credentials.getServers();
let nodes = [];
for (let server of servers) {
const li = document.createElement("li");
const endpoint = humanReadableEndpoint(server.endpoint);
li.innerText = `${server.login_id}@${endpoint} `;
const logoutButton = document.createElement("button");
logoutButton.className = "logout";
logoutButton.innerText = "Log out";
logoutButton.addEventListener("click", e => logOut(server.endpoint, e.currentTarget));
li.appendChild(logoutButton);
nodes.push(li);
}
byId("server_selection_list").innerHTML = "";
byId("server_selection_list").append(...nodes);
}
function populateChannelList() {
async function addChannelItems(client) {
const teams = await client.myTeams();
for (let team of teams) {
let nodes = [];
const channels = await client.myChannels(team.id);
for (let channel of channels) {
const li = document.createElement("li");
const a = document.createElement("a");
a.href = "javascript:void(0)";
const titleAndElements = channelNameElements(team, channel);
if (!titleAndElements) continue;
a.title = titleAndElements[0];
a.append(...titleAndElements[1]);
a.addEventListener("click", () => switchToChannel(client, team, channel));
li.appendChild(a);
li.dataset["id"] = channel.id;
nodes.push(li);
}
byId("channel_list").append(...nodes);
}
}
byId("channel_list").innerHTML = "";
const endpoints = localstorage_credentials.getServers().map(server => server.endpoint);
for (let client of mm_client.getMultiple(endpoints)) {
addChannelItems(client);
}
}
function transformMessageText(message) {
return message
.split(/(?<=:|\W|^)(:[a-z0-9_-]+:)(?=:|\W|$)/)
@ -192,11 +137,17 @@ function checkScrolledToBottom() {
byId("channel_contents_wrapper").addEventListener("scroll", checkScrolledToBottom);
function currentChannel() {
return {
endpoint: byId("channel_contents").dataset["server"],
channel_id: byId("channel_contents").dataset["id"]
};
}
pubsub.subscribe("MESSAGES_NEW", post => {
if (
post.endpoint === byId("channel_contents").dataset["server"] &&
post.channel_id === byId("channel_contents").dataset["id"]
) {
const chan = currentChannel();
if (post.endpoint === chan.endpoint && post.channel_id === chan.channel_id) {
addMessage(mm_client.get(post.endpoint), post);
}
});

61
js/view/sidebar.js Normal file
View file

@ -0,0 +1,61 @@
function populateServerSelectionList() {
const servers = localstorage_credentials.getServers();
let nodes = [];
for (let server of servers) {
const li = document.createElement("li");
const endpoint = humanReadableEndpoint(server.endpoint);
li.innerText = `${server.login_id}@${endpoint} `;
const logoutButton = document.createElement("button");
logoutButton.className = "logout";
logoutButton.innerText = "Log out";
logoutButton.addEventListener("click", e => logOut(server.endpoint, e.currentTarget));
li.appendChild(logoutButton);
nodes.push(li);
}
byId("server_selection_list").innerHTML = "";
byId("server_selection_list").append(...nodes);
}
function populateChannelList() {
async function addChannelItems(client) {
const teams = await client.myTeams();
for (let team of teams) {
let nodes = [];
const channels = await client.myChannels(team.id);
for (let channel of channels) {
const li = document.createElement("li");
const a = document.createElement("a");
a.href = "javascript:void(0)";
const titleAndElements = channelNameElements(team, channel);
if (!titleAndElements) continue;
a.title = titleAndElements[0];
a.append(...titleAndElements[1]);
a.addEventListener("click", () => switchToChannel(client, team, channel));
li.appendChild(a);
li.dataset["id"] = channel.id;
nodes.push(li);
}
byId("channel_list").append(...nodes);
}
}
byId("channel_list").innerHTML = "";
const endpoints = localstorage_credentials.getServers().map(server => server.endpoint);
for (let client of mm_client.getMultiple(endpoints)) {
addChannelItems(client);
}
}
pubsub.subscribe("MESSAGES_NEW", post => {
const chan = currentChannel();
if (!(post.endpoint === chan.endpoint && post.channel_id === chan.channel_id)) {
// TODO mark channel unread
}
});