Skip to content
Snippets Groups Projects
Commit bdcc4031 authored by Alexandre Bourlier's avatar Alexandre Bourlier
Browse files

Implementing the web component skeleton

parent b135dd05
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
chat-window-component.html 0 → 100644
+ 89
− 0
View file @ bdcc4031
<template>
<!--<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/css/converse.min.css">-->
<link type="text/css" rel="stylesheet" media="screen" href="node_modules/conversejs/node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="node_modules/conversejs/node_modules/font-awesome/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="node_modules/conversejs/css/theme.css" />
<link type="text/css" rel="stylesheet" media="screen" href="node_modules/conversejs/css/converse.css"/>
<h1>BOOM</h1>
</template>
<!--<script id="conversejs" src="https://cdn.conversejs.org/dist/converse.min.js"></script>-->
<script id="require-js" src="node_modules/conversejs/node_modules/requirejs/require.js"></script>
<script id="config-js" src="node_modules/conversejs/src/config.js"></script>
<script>
// Importing Converse lib into the main document
var currentDoc = document.currentScript.ownerDocument;
var mainDoc = document;
var conversejs = currentDoc.querySelector("#require-js", "#config-js");
mainDoc.head.appendChild(conversejs.cloneNode(true));
// Declaring Custom chat element
class ChatWindow extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: "open"});
const template = currentDoc.querySelector("template");
const instance = template.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
}
window.customElements.define("hd-chat-window", ChatWindow);
// ConverseJS init
require.config({
baseUrl: 'node_modules/conversejs',
});
require(['converse'], function (converse) {
converse.initialize({
//allow_otr: true,
//auto_login: true,
//auto_away: 300,// 5 minutes
//auto_reconnect: true,
//auto_join_on_invite: true,
//auto_join_rooms: [{"jid": "bordel@chat.component.local"}],
blacklisted_plugins: [
"converse-bookmarks",
"converse-chatview",
"converse-controlbox",
"converse-core",
"converse-dragresize",
"converse-headline",
"converse-mam",
"converse-minimize",
"converse-muc",
"converse-notification",
"converse-otr",
"converse-ping",
"converse-register",
"converse-rosterview",
"converse-vcard",
],
//credentials_url: "/credentials.php",
//csi_waiting_time: 300,// 5 minutes
debug: true,
//// default_domain: "some.default.domain",
//domain_placeholder: "happy-dev.fr",
//forward_messages: true,
//message_archiving: "always",
//message_carbons: true,
//muc_domain: "conference.chat.component.local",
//muc_nickname_from_jid: true,
//play_sounds: true,
//show_controlbox_by_default: true,
//show_send_button: true,
//visible_toolbar_buttons: {
// call: false,
// clear: false,
// emoji: true,
// toggle_occupants: true
//},
websocket_url: "ws://"+ location.hostname +":5280/ws/",
});
});
</script>
converse.html
+ 26
− 26
View file @ bdcc4031
...@@ -18,32 +18,32 @@ ...@@ -18,32 +18,32 @@
}); });
require(['converse'], function (converse) { require(['converse'], function (converse) {
converse.initialize({ converse.initialize({
allow_otr: false, // allow_otr: true,
auto_login: true, // auto_login: true,
auto_away: 300,// 5 minutes // auto_away: 300,// 5 minutes
auto_reconnect: true, // auto_reconnect: true,
auto_join_on_invite: true, // auto_join_on_invite: true,
//auto_join_rooms: [{'jid': 'bordel@chat.component.local'}], // //auto_join_rooms: [{'jid': 'bordel@chat.component.local'}],
credentials_url: "/credentials.php", // credentials_url: "/credentials.php",
csi_waiting_time: 300,// 5 minutes // csi_waiting_time: 300,// 5 minutes
debug: true, // debug: true,
//default_domain: "some.default.domain", // //default_domain: "some.default.domain",
domain_placeholder: "happy-dev.fr", // domain_placeholder: "happy-dev.fr",
forward_messages: true, // forward_messages: true,
message_archiving: "always", // message_archiving: "always",
message_carbons: true, // message_carbons: true,
muc_domain: "conference.chat.component.local", // muc_domain: "conference.chat.component.local",
muc_nickname_from_jid: true, // muc_nickname_from_jid: true,
play_sounds: true, // play_sounds: true,
show_controlbox_by_default: true, // show_controlbox_by_default: false,
show_send_button: true, // show_send_button: true,
visible_toolbar_buttons: { // visible_toolbar_buttons: {
call: false, // call: false,
clear: false, // clear: false,
emoji: true, // emoji: true,
toggle_occupants: true // toggle_occupants: true
}, // },
websocket_url: "ws://"+ location.hostname +":5280/ws/", websocket_url: "ws://"+ location.hostname +":5280/ws/",
}); });
}); });
</script> </script>
index.html
+ 3
− 2
View file @ bdcc4031
...@@ -4,12 +4,13 @@ ...@@ -4,12 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<script src="node_modules/webcomponentsjs/full.js"></script> <script src="node_modules/webcomponentsjs/full.js"></script>
<link rel="import" href="converse.html"/> <link rel="import" href="chat-window-component.html">
<!--<link rel="import" href="converse.html"/>-->
<title>XMPP chat</title> <title>XMPP chat</title>
</head> </head>
<body> <body>
<p>Hello World !</p> <hd-chat-window jid="sylvain@chat.component.local"></hd-chat-window>
</body> </body>
</html> </html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment