status-im/status-chat-widget
2
0
Fork 0
mirror of https://github.com/status-im/status-chat-widget.git synced 2025-02-23 09:48:18 +00:00
Code Issues Projects Releases Wiki Activity

name css classes

Browse Source
This commit is contained in:
Iuri Matias 2019-04-10 22:00:09 -04:00
parent 7e66f7b70f
commit a9c474c5dd
3 changed files with 4055 additions and 2976 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6993
dist/js/statuswidget.js vendored
View File

File diff suppressed because one or more lines are too long

12
index.html
View File

@ -5,7 +5,7 @@
background-color: #eef2f5;
}
#status-chat-widget {
._status-chat-widget {
background-color: white;
width: 33%;
border-radius: 16px;
@ -17,7 +17,7 @@
border-right: 1px solid #ddd;
}
h3 {
._status-chat-widget h3 {
margin-top: 0px;
color: #4360df;
font-weight: 600;
@ -26,7 +26,7 @@
padding-bottom: 5px;
}
#chat {
._status-chat-widget .chat {
height: 218px;
overflow: auto;
padding: 24px;
@ -34,7 +34,7 @@
background-color: #eef2f5;
}
#post {
._status-chat-widget .post {
width: 100%;
height: 60px;
padding-left: 30px;
@ -45,12 +45,12 @@
font-size: 14px;
}
.username {
._status-chat-widget .username {
color: #939ba1;
font-size: 14px;
}
.message {
._status-chat-widget .message {
background-color: white;
padding: 5px 10px;
border-radius: 10px;

26
src/index.js
View File

@ -6,16 +6,17 @@ window.StatusWidget = function (channelName) {
channelTitle.innerHTML = "#" + channelName;
var chatBox = document.createElement('div');
chatBox.id = "chat";
chatBox.className = "chat";
var chatInput = document.createElement('input');
chatInput.type = "input";
chatInput.id = "post";
chatInput.className = "post";
chatInput.placeholder = "Type a message..";
document.querySelectorAll("#status-chat-widget")[0].append(channelTitle);
document.querySelectorAll("#status-chat-widget")[0].append(chatBox);
document.querySelectorAll("#status-chat-widget")[0].append(chatInput);
document.querySelectorAll("#status-chat-widget")[0].className += " _status-chat-widget";
document.querySelectorAll("._status-chat-widget")[0].append(channelTitle);
document.querySelectorAll("._status-chat-widget")[0].append(chatBox);
document.querySelectorAll("._status-chat-widget")[0].append(chatInput);
let server = new Murmur({
protocols: ["libp2p"],
@ -33,6 +34,11 @@ window.StatusWidget = function (channelName) {
status.joinChat(channelName, () => {
status.onMessage(channelName, (err, data) => {
if (err || !data) {
console.dir("error receiving message");
console.dir(err);
return;
}
const msg = JSON.parse(data.payload)[1][0];
const message = { username: data.username, message: msg, pubkey: data.data.sig, data };
@ -42,25 +48,23 @@ window.StatusWidget = function (channelName) {
} else {
div.innerHTML = "<span class='username'>" + message.username + "</span><span class='message'>" + message.message + "</span>";
}
document.querySelectorAll("#chat")[0].append(div);
chatBox.append(div);
lastMessageUser = message.username;
var element = document.getElementById("chat");
element.scrollTop = element.scrollHeight;
});
var input = document.getElementById("post")
input.addEventListener("keyup", function(event) {
chatInput.addEventListener("keyup", function(event) {
if (event.keyCode !== 13) {
return
}
event.preventDefault();
var value = document.getElementById("post").value;
var value = chatInput.value;
status.sendMessage(channelName, value);
document.getElementById("post").value = "";
chatInput.value = "";
});
})
}