111 lines
3.0 KiB
JavaScript
111 lines
3.0 KiB
JavaScript
const gruvboxColors = [
|
|
"#b8bb26",
|
|
"#fabd2f",
|
|
"#83a598",
|
|
"#d3869b",
|
|
"#8ec07c",
|
|
"#458588",
|
|
"#cc241d",
|
|
"#d65d0e",
|
|
"#bdae93",
|
|
];
|
|
const generateGruvboxFromString = (string) =>
|
|
gruvboxColors[Array.from(string).map((x) => x.charCodeAt(0)).reduce((a, x) => a+x, 0) % gruvboxColors.length];
|
|
|
|
const RoomChat = (() => {
|
|
let channel;
|
|
const connect = (socket, postId) => {
|
|
channel = socket.channel(`post:${postId}`);
|
|
channel.join()
|
|
.receive("ok", resp => { console.log("Joined successfully: ", resp); })
|
|
.receive("error", resp => { console.log("Unable to join: ", resp); });
|
|
return channel;
|
|
};
|
|
|
|
const scrollToBottom = (element) => {
|
|
element.scrollTop = element.scrollHeight;
|
|
};
|
|
|
|
const appendComment = ({user, body, id, user_id, inserted_at}, element) => {
|
|
const messageElement = document.createElement("div");
|
|
messageElement.innerHTML = `
|
|
<div class="d-flex flex-row card border rounded m-2 align-items-center">
|
|
<div class="m-2">
|
|
<div class="circle" style="background:${generateGruvboxFromString(user)}">${user.charAt(0)}</div>
|
|
</div>
|
|
<div class="m-2">
|
|
<div class="comment">
|
|
<div class="comment-header">
|
|
<span class="comment-username">${user}</span>
|
|
<span class="text-muted">${new Date(inserted_at).toLocaleString()}</span>
|
|
</div>
|
|
<div class="comment-body">
|
|
${body}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
element.appendChild(messageElement);
|
|
scrollToBottom(element);
|
|
};
|
|
|
|
const leaveChannel = () => {
|
|
if (channel) {
|
|
channel.leave();
|
|
console.log(channel);
|
|
}
|
|
};
|
|
|
|
const main = (post_id) => {
|
|
leaveChannel();
|
|
const chatWindow = document.getElementById("chat");
|
|
window.userSocket.connect();
|
|
channel = connect(window.userSocket, post_id);
|
|
|
|
channel.on('shout', (comment) => {
|
|
appendComment(comment, chatWindow);
|
|
});
|
|
|
|
channel.on('initial-comments', ({comments}) => {
|
|
comments.forEach((comment) => {
|
|
appendComment(comment, chatWindow);
|
|
});
|
|
scrollToBottom(chatWindow);
|
|
});
|
|
|
|
channel.on('join', ({ user }) => {
|
|
const joinElement = document.createElement("div");
|
|
joinElement.innerHTML = `
|
|
<div class="m-2 card border rounded p-2 text-muted">
|
|
join: ${user}
|
|
</div>
|
|
`;
|
|
chatWindow.appendChild(joinElement);
|
|
scrollToBottom(chatWindow);
|
|
});
|
|
|
|
channel.on('left', ({ user }) => {
|
|
console.log(user, "left");
|
|
});
|
|
};
|
|
|
|
const submitForm = (e) => {
|
|
e.preventDefault();
|
|
let message = e.target.elements.message.value;
|
|
if (message) {
|
|
channel.push("send", {body: message});
|
|
e.target.elements.message.value = "";
|
|
}
|
|
return false;
|
|
};
|
|
|
|
return { main, submitForm };
|
|
})();
|
|
|
|
window.addEventListener('load', () => {
|
|
window.addEventListener('phx:initial-post', (e) => RoomChat.main(e.detail.id));
|
|
});
|
|
|
|
export default RoomChat;
|