status-im
/
status-chat-widget
mirror of https://github.com/status-im/status-chat-widget.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

pass dom element as argument

This commit is contained in:
Iuri Matias 2019-04-10 22:03:23 -04:00
parent a9c474c5dd
commit e22d65c666
3 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/js/statuswidget.js vendored
View File

@ -4522,7 +4522,7 @@ eval("module.exports = extend\n\nvar hasOwnProperty = Object.prototype.hasOwnPro
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var status_js_api__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! status-js-api */ \"./node_modules/status-js-api/index.js\");\n/* harmony import */ var status_js_api__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(status_js_api__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var murmur_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! murmur-client */ \"./node_modules/murmur-client/dist/browser.js\");\n/* harmony import */ var murmur_client__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(murmur_client__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\nwindow.StatusWidget = function (channelName) {\n var channelTitle = document.createElement('h3');\n channelTitle.innerHTML = \"#\" + channelName;\n\n var chatBox = document.createElement('div');\n chatBox.className = \"chat\";\n\n var chatInput = document.createElement('input');\n chatInput.type = \"input\";\n chatInput.className = \"post\";\n chatInput.placeholder = \"Type a message..\";\n\n document.querySelectorAll(\"#status-chat-widget\")[0].className += \" _status-chat-widget\";\n document.querySelectorAll(\"._status-chat-widget\")[0].append(channelTitle);\n document.querySelectorAll(\"._status-chat-widget\")[0].append(chatBox);\n document.querySelectorAll(\"._status-chat-widget\")[0].append(chatInput);\n\n let server = new murmur_client__WEBPACK_IMPORTED_MODULE_1___default.a({\n protocols: [\"libp2p\"],\n signalServers: [\n \"/dns4/web-bridge.status.im/tcp/443/wss/p2p-webrtc-star\"\n ],\n bootnodes: []\n });\n server.start();\n\n const status = new status_js_api__WEBPACK_IMPORTED_MODULE_0___default.a();\n status.connectToProvider(server.provider, null);\n\n var lastMessageUser = \"\";\n\n status.joinChat(channelName, () => {\n status.onMessage(channelName, (err, data) => {\n if (err || !data) {\n console.dir(\"error receiving message\");\n console.dir(err);\n return;\n }\n const msg = JSON.parse(data.payload)[1][0];\n\n const message = { username: data.username, message: msg, pubkey: data.data.sig, data };\n let div = document.createElement('div');\n if (lastMessageUser === message.username) {\n div.innerHTML = \"<span class='message'>\" + message.message + \"</span>\";\n } else {\n div.innerHTML = \"<span class='username'>\" + message.username + \"</span><span class='message'>\" + message.message + \"</span>\";\n }\n //document.querySelectorAll(\"#chat\")[0].append(div);\n chatBox.append(div);\n lastMessageUser = message.username;\n\n var element = document.getElementById(\"chat\");\n element.scrollTop = element.scrollHeight;\n });\n\n //var input = document.getElementById(\"post\")\n\n chatInput.addEventListener(\"keyup\", function(event) {\n if (event.keyCode !== 13) {\n return\n }\n\n event.preventDefault();\n\n //var value = document.getElementById(\"post\").value;\n var value = chatInput.value;\n status.sendMessage(channelName, value);\n chatInput.value = \"\";\n });\n })\n}\n\n\n//# sourceURL=webpack:///./src/index.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var status_js_api__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! status-js-api */ \"./node_modules/status-js-api/index.js\");\n/* harmony import */ var status_js_api__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(status_js_api__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var murmur_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! murmur-client */ \"./node_modules/murmur-client/dist/browser.js\");\n/* harmony import */ var murmur_client__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(murmur_client__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\nwindow.StatusWidget = function (channelName, chatWidget) {\n if (!channelName) { throw new Error(\"no channelName provider\"); }\n if (!chatWidget) { throw new Error(\"no DOM element for chat\"); }\n\n var channelTitle = document.createElement('h3');\n channelTitle.innerHTML = \"#\" + channelName;\n\n var chatBox = document.createElement('div');\n chatBox.className = \"chat\";\n\n var chatInput = document.createElement('input');\n chatInput.type = \"input\";\n chatInput.className = \"post\";\n chatInput.placeholder = \"Type a message..\";\n\n chatWidget.className += \" _status-chat-widget\";\n chatWidget.append(channelTitle);\n chatWidget.append(chatBox);\n chatWidget.append(chatInput);\n\n let server = new murmur_client__WEBPACK_IMPORTED_MODULE_1___default.a({\n protocols: [\"libp2p\"],\n signalServers: [\n \"/dns4/web-bridge.status.im/tcp/443/wss/p2p-webrtc-star\"\n ],\n bootnodes: []\n });\n server.start();\n\n const status = new status_js_api__WEBPACK_IMPORTED_MODULE_0___default.a();\n status.connectToProvider(server.provider, null);\n\n var lastMessageUser = \"\";\n\n status.joinChat(channelName, () => {\n status.onMessage(channelName, (err, data) => {\n if (err || !data) {\n console.dir(\"error receiving message\");\n console.dir(err);\n return;\n }\n const msg = JSON.parse(data.payload)[1][0];\n\n const message = { username: data.username, message: msg, pubkey: data.data.sig, data };\n let div = document.createElement('div');\n if (lastMessageUser === message.username) {\n div.innerHTML = \"<span class='message'>\" + message.message + \"</span>\";\n } else {\n div.innerHTML = \"<span class='username'>\" + message.username + \"</span><span class='message'>\" + message.message + \"</span>\";\n }\n chatBox.append(div);\n lastMessageUser = message.username;\n\n var element = document.getElementById(\"chat\");\n element.scrollTop = element.scrollHeight;\n });\n\n chatInput.addEventListener(\"keyup\", function(event) {\n if (event.keyCode !== 13) {\n return\n }\n\n event.preventDefault();\n\n var value = chatInput.value;\n status.sendMessage(channelName, value);\n chatInput.value = \"\";\n });\n })\n}\n\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ }),

2
index.html
View File

@ -65,6 +65,6 @@
<body>
<script src="./dist/js/statuswidget.js"></script>
<div id="status-chat-widget"></div>
<script>StatusWidget("gitter-bridge");</script>
<script>StatusWidget("gitter-bridge", document.getElementById("status-chat-widget"));</script>
</body>
</html>

13
src/index.js
View File

@ -1,7 +1,10 @@
import StatusJS from 'status-js-api';
import Murmur from 'murmur-client';
window.StatusWidget = function (channelName) {
window.StatusWidget = function (channelName, chatWidget) {
if (!channelName) { throw new Error("no channelName provider"); }
if (!chatWidget) { throw new Error("no DOM element for chat"); }
var channelTitle = document.createElement('h3');
channelTitle.innerHTML = "#" + channelName;
@ -13,10 +16,10 @@ window.StatusWidget = function (channelName) {
chatInput.className = "post";
chatInput.placeholder = "Type a message..";
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);
chatWidget.className += " _status-chat-widget";
chatWidget.append(channelTitle);
chatWidget.append(chatBox);
chatWidget.append(chatInput);
let server = new Murmur({
protocols: ["libp2p"],