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

improve styling; add autoscroll

Browse Source
This commit is contained in:
Iuri Matias 2019-04-10 20:51:29 -04:00
parent fbab9d8496
commit 072b077017
4 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md Normal file
View File

@ -0,0 +1,8 @@
````Html
<script src="https://status-im.github.io/status-chat-widget/dist/js/statuswidget.js"></script>
<div id="status-chat-widget"></div>
<script>StatusWidget("your-channel-name");</script>
```

2
dist/js/statuswidget.js vendored
View File

File diff suppressed because one or more lines are too long

32
index.html
View File

@ -1,5 +1,37 @@
<html> <html>
<head> <head>
<style>
body {
background-color: #eef2f5;
}
#status-chat-widget {
background-color: white;
width: 33%;
padding: 24px;
border-radius: 16px;
font-family: "Inter UI",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
h3 {
margin-top: 0px;
color: #4360df;
font-weight: 600;
font-size: 20px;
}
#chat {
height: 186px;
overflow: auto;
}
#post {
margin-top: 16px;
width: 100%;
height: 40px;
padding-left: 7px;
}
</style>
</head> </head>
<body> <body>
<script src="./dist/js/statuswidget.js"></script> <script src="./dist/js/statuswidget.js"></script>

10
src/index.js
View File

@ -2,13 +2,18 @@ import StatusJS from 'status-js-api';
import Murmur from 'murmur-client'; import Murmur from 'murmur-client';
window.StatusWidget = function (channelName) { window.StatusWidget = function (channelName) {
var channelTitle = document.createElement('h3');
channelTitle.innerHTML = "#" + channelName;
var chatBox = document.createElement('div'); var chatBox = document.createElement('div');
chatBox.id = "chat"; chatBox.id = "chat";
var chatInput = document.createElement('input'); var chatInput = document.createElement('input');
chatInput.type = "input"; chatInput.type = "input";
chatInput.id = "post"; chatInput.id = "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(chatBox);
document.querySelectorAll("#status-chat-widget")[0].append(chatInput); document.querySelectorAll("#status-chat-widget")[0].append(chatInput);
@ -32,7 +37,10 @@ window.StatusWidget = function (channelName) {
let div = document.createElement('div'); let div = document.createElement('div');
div.innerHTML = message.username + "> " + message.message; div.innerHTML = message.username + "> " + message.message;
document.querySelectorAll("#chat")[0].append(div) document.querySelectorAll("#chat")[0].append(div)
})
var element = document.getElementById("chat");
element.scrollTop = element.scrollHeight;
});
var input = document.getElementById("post") var input = document.getElementById("post")