status-im/status-chat-widget
2
0
Fork 0
mirror of https://github.com/status-im/status-chat-widget.git synced 2025-02-24 02:08:06 +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; background-color: #eef2f5;
} }
#status-chat-widget { ._status-chat-widget {
background-color: white; background-color: white;
width: 33%; width: 33%;
border-radius: 16px; border-radius: 16px;
@ -17,7 +17,7 @@
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
} }
h3 { ._status-chat-widget h3 {
margin-top: 0px; margin-top: 0px;
color: #4360df; color: #4360df;
font-weight: 600; font-weight: 600;
@ -26,7 +26,7 @@
padding-bottom: 5px; padding-bottom: 5px;
} }
#chat { ._status-chat-widget .chat {
height: 218px; height: 218px;
overflow: auto; overflow: auto;
padding: 24px; padding: 24px;
@ -34,7 +34,7 @@
background-color: #eef2f5; background-color: #eef2f5;
} }
#post { ._status-chat-widget .post {
width: 100%; width: 100%;
height: 60px; height: 60px;
padding-left: 30px; padding-left: 30px;
@ -45,12 +45,12 @@
font-size: 14px; font-size: 14px;
} }
.username { ._status-chat-widget .username {
color: #939ba1; color: #939ba1;
font-size: 14px; font-size: 14px;
} }
.message { ._status-chat-widget .message {
background-color: white; background-color: white;
padding: 5px 10px; padding: 5px 10px;
border-radius: 10px; border-radius: 10px;

26
src/index.js
View File

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