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/pubsub.js"></script>
|
||||||
<script type="text/javascript" src="/js/localstorage_credentials.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/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/controller.js"></script>
|
||||||
<script type="text/javascript" src="/js/emoji.js"></script>
|
<script type="text/javascript" src="/js/emoji.js"></script>
|
||||||
<script type="text/javascript" src="/js/main.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) {
|
function transformMessageText(message) {
|
||||||
return message
|
return message
|
||||||
.split(/(?<=:|\W|^)(:[a-z0-9_-]+:)(?=:|\W|$)/)
|
.split(/(?<=:|\W|^)(:[a-z0-9_-]+:)(?=:|\W|$)/)
|
||||||
|
@ -192,11 +137,17 @@ function checkScrolledToBottom() {
|
||||||
byId("channel_contents_wrapper").addEventListener("scroll", 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 => {
|
pubsub.subscribe("MESSAGES_NEW", post => {
|
||||||
if (
|
const chan = currentChannel();
|
||||||
post.endpoint === byId("channel_contents").dataset["server"] &&
|
if (post.endpoint === chan.endpoint && post.channel_id === chan.channel_id) {
|
||||||
post.channel_id === byId("channel_contents").dataset["id"]
|
|
||||||
) {
|
|
||||||
addMessage(mm_client.get(post.endpoint), post);
|
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