Split view.js into messages and sidebar
This commit is contained in:
parent
38a3bec0a4
commit
f86299f776
3 changed files with 73 additions and 60 deletions
|
@ -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>
|
||||
|
|
|
@ -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
61
js/view/sidebar.js
Normal 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
|
||||
}
|
||||
});
|
Loading…
Reference in a new issue