2020-03-31 12:09:33 +02:00
|
|
|
"use strict";
|
|
|
|
|
|
|
|
|
|
|
|
function buttonDisable(element, text) {
|
|
|
|
if (!element.dataset.originalText) {
|
|
|
|
element.dataset.originalText = element.innerText;
|
|
|
|
}
|
|
|
|
element.innerText = text;
|
|
|
|
element.disabled = true;
|
|
|
|
}
|
|
|
|
function buttonEnable(element) {
|
|
|
|
element.innerText = element.dataset.originalText;
|
|
|
|
element.disabled = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
function logIn() {
|
2022-06-09 14:35:49 +02:00
|
|
|
const client = mm_client.getOrCreate(normalizedEndpoint(byId("login_server").value));
|
2020-03-31 12:09:33 +02:00
|
|
|
|
|
|
|
buttonDisable(byId("login_button"), "Logging in...");
|
|
|
|
|
|
|
|
client.logIn(byId("login_login_id").value, byId("login_password").value)
|
|
|
|
.then(json => {
|
2022-06-09 15:26:44 +02:00
|
|
|
client.start();
|
2020-03-31 12:09:33 +02:00
|
|
|
buttonEnable(byId("login_button"));
|
|
|
|
byId("login_message").innerText = "";
|
|
|
|
byId("channel_list").innerText = `Logged in as ${json.username}`;
|
|
|
|
window.location = "#";
|
|
|
|
populateServerSelectionList();
|
|
|
|
populateChannelList();
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
console.error(error);
|
|
|
|
buttonEnable(byId("login_button"));
|
2022-06-08 17:33:16 +02:00
|
|
|
if (error.xhr && error.xhr.responseJson && error.xhr.responseJson.message) {
|
|
|
|
byId("login_message").innerText = `Error: ${error.xhr.responseJson.message}`;
|
|
|
|
} else {
|
|
|
|
byId("login_message").innerText = `${error}`;
|
|
|
|
}
|
2020-03-31 12:09:33 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function logOut(endpoint, button) {
|
2022-06-09 14:35:49 +02:00
|
|
|
const client = mm_client.getOrCreate(endpoint);
|
2020-03-31 12:09:33 +02:00
|
|
|
|
|
|
|
buttonDisable(button, "Logging out...");
|
|
|
|
|
|
|
|
client.logOut()
|
|
|
|
.then(response => {
|
|
|
|
console.info("Succesfully logged out");
|
|
|
|
populateServerSelectionList();
|
|
|
|
populateChannelList();
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
console.error(error);
|
|
|
|
const span = document.createElement("span");
|
|
|
|
span.innerText = `Failed to log out: ${error.message}`;
|
|
|
|
button.parentElement.appendChild(span);
|
|
|
|
buttonEnable(button);
|
|
|
|
});
|
2021-02-17 16:07:15 +01:00
|
|
|
|
|
|
|
mm_client.drop(endpoint);
|
2020-03-31 12:09:33 +02:00
|
|
|
}
|
|
|
|
|
2022-06-17 23:43:16 +02:00
|
|
|
function channelNameElements(team, channel, me, users) {
|
2022-06-17 23:04:16 +02:00
|
|
|
const teamName = team ? team.name : "";
|
|
|
|
const inTeam = teamName ? " in team " + teamName : "";
|
2020-03-31 12:09:33 +02:00
|
|
|
let icon = "";
|
|
|
|
let channelName = channel.name;
|
|
|
|
let title = "";
|
|
|
|
|
|
|
|
switch (channel.type) {
|
|
|
|
case "O": // Public channel
|
2022-06-17 23:04:16 +02:00
|
|
|
title = `${channel.name}${inTeam} (public)`;
|
2020-03-31 12:09:33 +02:00
|
|
|
break;
|
|
|
|
case "P": // Private channel
|
|
|
|
icon = "🔒";
|
2022-06-17 23:04:16 +02:00
|
|
|
title = `${channel.name}${inTeam} (private)`;
|
2020-03-31 12:09:33 +02:00
|
|
|
break;
|
|
|
|
case "D": // Direct message
|
2022-06-17 23:43:16 +02:00
|
|
|
const participants = channel.name.split("__");
|
|
|
|
const other = participants[0] === me ? participants[1] : participants[0];
|
|
|
|
const userName = users[other]["username"];
|
|
|
|
channelName = `👤 ${userName}`;
|
2020-03-31 12:09:33 +02:00
|
|
|
title = `Direct message`;
|
|
|
|
break;
|
|
|
|
case "G": // Group chat
|
|
|
|
channelName = `👥 ${channel.display_name}`;
|
|
|
|
title = `Group chat with ${channel.display_name}`;
|
|
|
|
break;
|
|
|
|
default: // Unsupported
|
|
|
|
icon = channel.type;
|
2022-06-17 23:04:16 +02:00
|
|
|
title = `${channel.name}${inTeam} (type ${channel.type})`;
|
2020-03-31 12:09:33 +02:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
let elements = [];
|
|
|
|
|
|
|
|
if (icon) {
|
|
|
|
elements.push(`${icon} `);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (teamName) {
|
|
|
|
const teamElement = document.createElement("span");
|
|
|
|
teamElement.className = "team-name";
|
|
|
|
teamElement.innerText = teamName;
|
|
|
|
elements.push(teamElement);
|
|
|
|
|
|
|
|
const separatorElement = document.createElement("span");
|
|
|
|
separatorElement.className = "separator";
|
|
|
|
separatorElement.innerText = "/";
|
|
|
|
elements.push(separatorElement);
|
|
|
|
}
|
|
|
|
|
|
|
|
const channelElement = document.createElement("span");
|
|
|
|
channelElement.className = "channel-name";
|
|
|
|
channelElement.innerText = channelName;
|
|
|
|
elements.push(channelElement);
|
|
|
|
|
|
|
|
return [title, elements];
|
|
|
|
}
|
|
|
|
|
2022-06-17 23:43:16 +02:00
|
|
|
async function switchToChannel(client, team, channel) {
|
2020-03-31 12:09:33 +02:00
|
|
|
for (let el of byId("channel_list").childNodes) {
|
2022-06-08 21:42:33 +02:00
|
|
|
if (el.dataset["server"] == client.endpoint && el.dataset["id"] == channel.id) {
|
2022-06-08 23:24:59 +02:00
|
|
|
addClass(el, "active");
|
2020-03-31 12:09:33 +02:00
|
|
|
} else {
|
2022-06-08 23:24:59 +02:00
|
|
|
removeClass(el, "active");
|
2020-03-31 12:09:33 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-17 23:43:16 +02:00
|
|
|
const users = await client.getUsers();
|
|
|
|
const [title, elements] = channelNameElements(team, channel, client.me["id"], users);
|
2020-03-31 12:09:33 +02:00
|
|
|
byId("channel_header").innerHTML = "";
|
|
|
|
byId("channel_header").append(...elements);
|
|
|
|
byId("compose").setAttribute("placeholder", `Write to ${byId("channel_header").textContent}`);
|
2022-06-18 17:52:10 +02:00
|
|
|
|
|
|
|
byId("channel_contents").innerText = "Loading…";
|
|
|
|
try {
|
|
|
|
const response = await client.channelPosts(channel.id);
|
|
|
|
console.info(`Got channel contents of ${channel.id} (${channel.name})`);
|
|
|
|
response.order.reverse();
|
|
|
|
populateChannelContents(client, channel, response);
|
|
|
|
|
|
|
|
markChannelAsRead(client, channel);
|
|
|
|
} catch(error) {
|
|
|
|
console.error(error);
|
|
|
|
byId("channel_contents").innerText = `Failed to get channel contents:\n${error.message}`;
|
|
|
|
}
|
2020-03-31 12:09:33 +02:00
|
|
|
}
|
2021-02-17 18:15:57 +01:00
|
|
|
|
|
|
|
function sendMessage(endpoint, channel_id, message) {
|
2022-06-09 14:35:49 +02:00
|
|
|
const client = mm_client.getOrCreate(endpoint);
|
2021-02-17 18:15:57 +01:00
|
|
|
client.writePost(channel_id, message);
|
2021-02-17 21:58:06 +01:00
|
|
|
//pubsub.publish("MESSAGES_NEW", {
|
|
|
|
//endpoint,
|
|
|
|
//channel_id: channel_id,
|
|
|
|
//create_at: (new Date()).getTime(),
|
|
|
|
//user_id: client.me.id,
|
|
|
|
//message
|
|
|
|
//});
|
2021-02-17 18:15:57 +01:00
|
|
|
}
|
|
|
|
|
2022-06-09 00:29:24 +02:00
|
|
|
async function executeSlashCommand(endpoint, channel_id, command) {
|
2022-06-09 14:35:49 +02:00
|
|
|
const client = mm_client.getOrCreate(endpoint);
|
2022-06-09 00:29:24 +02:00
|
|
|
const response = await client.executeSlashCommand(channel_id, command);
|
|
|
|
|
|
|
|
if (
|
|
|
|
response.responseJson &&
|
|
|
|
response.responseJson.text &&
|
|
|
|
response.responseJson.response_type !== "in_channel"
|
|
|
|
) {
|
|
|
|
pubsub.publish("MESSAGES_NEW", {
|
|
|
|
endpoint,
|
|
|
|
channel_id,
|
|
|
|
create_at: (new Date()).getTime(),
|
|
|
|
user_id: client.me.id,
|
|
|
|
message: "(only visible to you) " + response.responseJson.text
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-08 23:24:59 +02:00
|
|
|
function markChannelAsRead(client, channel) {
|
|
|
|
return client.markChannelRead(channel.id);
|
|
|
|
}
|
|
|
|
|
2021-02-17 18:15:57 +01:00
|
|
|
function checkKeyPress(event) {
|
|
|
|
// Battle tested for many years in several browsers
|
|
|
|
if ((event.keyCode === event.DOM_VK_RETURN || event.keyCode === 13 || event.keyCode === 10 || event.key === "Enter" || event.keyIdentifier === "U+000A") && !event.shiftKey && !event.ctrlKey) {
|
|
|
|
if (byId("compose").value.length > 0) {
|
2022-06-09 00:29:24 +02:00
|
|
|
let message = byId("compose").value;
|
|
|
|
|
|
|
|
if (message[0] === "/") {
|
|
|
|
executeSlashCommand(
|
|
|
|
byId("channel_contents").dataset["server"],
|
|
|
|
byId("channel_contents").dataset["id"],
|
|
|
|
message
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
sendMessage(
|
|
|
|
byId("channel_contents").dataset["server"],
|
|
|
|
byId("channel_contents").dataset["id"],
|
|
|
|
message
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-02-17 18:15:57 +01:00
|
|
|
byId("compose").value = "";
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
2022-06-09 15:14:40 +02:00
|
|
|
|
|
|
|
pubsub.subscribe("MESSAGES_NEW", post => {
|
|
|
|
const curChan = currentChannel();
|
2022-06-17 23:04:16 +02:00
|
|
|
const client = mm_client.getOrCreate(post.endpoint);
|
|
|
|
if (window.hasFocus && post.endpoint === curChan.endpoint && post.channel_id === curChan.channel_id) {
|
|
|
|
client.markChannelRead(post.channel_id);
|
|
|
|
} else {
|
|
|
|
client.channelStore.increaseUnread(post);
|
2022-06-09 15:14:40 +02:00
|
|
|
}
|
2022-06-17 23:26:43 +02:00
|
|
|
|
|
|
|
client.channelStore.updateLastPostTime(post.channel_id, post["create_at"]);
|
2022-06-09 15:14:40 +02:00
|
|
|
});
|
|
|
|
|
2022-06-17 23:04:16 +02:00
|
|
|
pubsub.subscribe("CHANNEL_READ", ({endpoint, channel_id}) => {
|
|
|
|
mm_client.getOrCreate(endpoint).channelStore.setUnread(channel_id, 0, 0);
|
|
|
|
});
|
|
|
|
|
2022-06-09 15:14:40 +02:00
|
|
|
pubsub.subscribe("WINDOW_FOCUSED", () => {
|
|
|
|
const curChan = currentChannel();
|
|
|
|
if (!curChan.channel_id) return;
|
|
|
|
mm_client.getOrCreate(curChan.endpoint).markChannelRead(curChan.channel_id);
|
|
|
|
});
|