Chapril/xmpp.chapril.org-conversejs
Chapril
/
xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Add initial demo of embedded MUC chat

This commit is contained in:
JC Brand 2017-01-16 22:15:07 +01:00
parent 761970c903
commit 890d87c980
13 changed files with 521 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.gitignore vendored
View File

@ -1,4 +1,5 @@
*~
.sw?
*.mo
*.kpf
.*.sw?
@ -57,11 +58,7 @@ dist/converse.nojquery.js
dist/converse.nojquery.min.js
dist/converse-mobile.min.js
css/converse.css.map
css/converse.min.css
css/theme.min.css
css/mobile.min.css
css/*.map
css/*.min.css
.sv?
/vendor/

10
Makefile
View File

@ -125,7 +125,13 @@ dev: stamp-bower stamp-bundler
## Builds
.PHONY: css
css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css
css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css
css/converse-muc-embedded.css:: stamp-bundler stamp-bower sass
$(SASS) -I ./components/bourbon/app/assets/stylesheets/ sass/_muc_embedded.scss css/converse-muc-embedded.css
css/converse-muc-embedded.min.css:: stamp-bundler stamp-bower sass css/converse-muc-embedded.css
$(CLEANCSS) css/converse-muc-embedded.css > css/converse-muc-embedded.min.css
css/converse.css:: stamp-bundler stamp-bower sass
$(SASS) -I ./components/bourbon/app/assets/stylesheets/ sass/converse.scss css/converse.css
@ -141,7 +147,7 @@ css/mobile.min.css:: stamp-npm
.PHONY: watch
watch: stamp-bundler
$(SASS) --watch -I ./components/bourbon/app/assets/stylesheets/ sass/converse.scss:css/converse.css
$(SASS) --watch -I ./components/bourbon/app/assets/stylesheets/ sass/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css
BUILDS = dist/converse.js \
dist/converse.min.js \

41
css/converse-muc-embedded.css Normal file
View File

@ -0,0 +1,41 @@
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
*/
/* $font-path: "../fonticons/fonts/" !default; */
#converse-embedded-chat {
bottom: auto;
right: auto;
position: relative;
width: 100%; }
#converse-embedded-chat .chatroom {
width: auto; }
#converse-embedded-chat .flyout {
bottom: auto;
display: block;
position: relative; }
#converse-embedded-chat .chatbox {
float: none; }
#converse-embedded-chat .chatbox .box-flyout {
box-shadow: none; }
#converse-embedded-chat .chatbox .chat-title {
padding: 0.3em;
font-size: 110%; }
#converse-embedded-chat .chatbox-btn {
display: none; }
#converse-embedded-chat .chatroom .box-flyout {
min-width: auto;
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chat-body {
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px); }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container {
height: auto;
position: relative; }
#converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list {
padding-left: 0.3em; }
#converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list li.occupant {
font-size: 14px; }
/*# sourceMappingURL=converse-muc-embedded.css.map */

269
css/converse.css
View File

File diff suppressed because it is too large Load Diff

3
css/theme.css
View File

@ -139,6 +139,9 @@ a:focus {
text-align: center;
margin-top: 3em;
}
.brand-heading-embedded {
margin-top: 1.5em;
}
.intro-text {
font-size: 18px;
}

87
embedded.html Normal file
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converse.js</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Converse.js: A free chat client for your website" />
<meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" />
<link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="../components/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../components/fontawesome/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/theme.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/converse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/converse-muc-embedded.css" />
<script type="text/javascript" src="../analytics.js"></script>
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<![if gte IE 9]>
<script src="node_modules/requirejs/require.js"></script>
<script src="config.js"></script>
<script src="/src/converse-muc-embedded.js"></script>
<![endif]>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav"><li> <a href="/docs/html/index.html">Documentation</a> </li>
</ul>
</div>
</div>
</nav>
<section class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading brand-heading-embedded"><i class="icon-conversejs"></i>Converse.js</h1>
<p class="intro-text">Embedded MUC chat demo</p>
<div id="converse-embedded-chat"></div>
</div>
</div>
</div>
</div>
</section>
</body>
<script>
require(['converse-api', 'converse-muc-embedded'], function (converse) {
converse.initialize({
allow_logout: false, // No point in logging out when we have auto_login as true.
allow_muc_invitations: false, // Doesn't make sense to allow because only
// roster contacts can be invited
allow_contact_requests: false, // Contacts from other servers cannot,
// be added and anonymous users don't
// know one another's JIDs, so disabling.
authentication: 'anonymous',
auto_login: true,
auto_join_rooms: [
'anonymous@conference.nomnom.im',
],
notify_all_room_messages: [
'anonymous@conference.nomnom.im',
],
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
// allow chatting with other XMPP servers).
keepalive: true,
hide_muc_server: true, // Federation is disabled, so no use in
// showing the MUC server.
play_sounds: true,
show_controlbox_by_default: true,
strict_plugin_dependencies: false,
debug: true
});
});
</script>
</html>

2
sass/_chatbox.scss
View File

@ -1,3 +1,4 @@
#converse-embedded-chat,
#conversejs {
.flyout {
border-radius: $chatbox-border-radius;
@ -78,6 +79,7 @@
}
.chatbox {
display: block;
text-align: left;
float: right;
height: $bottom-gutter-height;
margin: 0 $chat-gutter;

5
sass/_chatrooms.scss
View File

@ -1,4 +1,9 @@
#converse-embedded-chat,
#conversejs {
.new-chatroom-nick {
margin: 1em auto;
}
.add-chatroom {
input[type="submit"],
input[type="button"] {

4
sass/_core.scss
View File

@ -1,3 +1,4 @@
#converse-embedded-chat,
#conversejs {
bottom: 0;
color: $text-color;
@ -192,6 +193,9 @@
}
}
}
&.pure-form.converse-centered-form {
text-align: center;
}
}
.chat-textarea-chatbox-selected {

1
sass/_fonts.scss
View File

@ -23,6 +23,7 @@
content: "\e600";
}
#converse-embedded-chat,
#conversejs {
.icon-address-book:before { content: "\270f"; }
.icon-angry:before { content: "\e03f"; }

54
sass/_muc_embedded.scss Normal file
View File

@ -0,0 +1,54 @@
@import "bourbon";
@import "variables";
#converse-embedded-chat {
bottom: auto;
right: auto;
position: relative;
width: 100%;
.chatroom {
width: auto;
}
.flyout {
bottom: auto;
display: block;
position: relative;
}
.chatbox {
float: none;
.box-flyout {
box-shadow: none;
}
.chat-title {
padding: 0.3em;
font-size: 110%;
}
}
.chatbox-btn {
display: none;
}
.chatroom {
.box-flyout {
min-width: auto;
width: 100%;
.chat-body {
@include calc(height, '100% - #{$chat-head-height}');
}
.chatroom-body {
.chatroom-form-container {
height: auto;
position: relative;
}
}
.occupants {
.occupant-list {
padding-left: 0.3em;
li.occupant {
font-size: 14px;
}
}
}
}
}
}

44
src/converse-muc-embedded.js Normal file
View File

@ -0,0 +1,44 @@
(function (root, factory) {
define("converse-muc-embedded", [
"converse-api",
"converse-muc"
], factory);
}(this, function (converse) {
"use strict";
converse.plugins.add('converse-muc-embedded', {
overrides: {
// Overrides mentioned here will be picked up by converse.js's
// plugin architecture they will replace existing methods on the
// relevant objects or classes.
//
// New functions which don't exist yet can also be added.
ChatBoxes: {
onConnected: function () {
// Override to avoid storing or fetching chat boxes from session
// storage.
var _converse = this.__super__._converse;
this.browserStorage = new Backbone.BrowserStorage[_converse.storage](
converse.env.b64_sha1('converse.chatboxes-'+_converse.bare_jid));
this.registerMessageHandler();
/* This is disabled:
*
* this.fetch({
* add: true,
* success: this.onChatBoxesFetched.bind(this)
* });
*/
this.onChatBoxesFetched(new Backbone.Collection());
}
},
ChatRoomView: {
insertIntoDOM: function () {
converse.env.jQuery('#converse-embedded-chat').html(this.$el);
return this;
}
}
}
});
}));

2
src/templates/chatroom_nickname_form.html
View File

@ -1,5 +1,5 @@
<div class="chatroom-form-container">
<form class="pure-form converse-form chatroom-form">
<form class="pure-form converse-form chatroom-form converse-centered-form">
<fieldset>
<label>{{heading}}</label>
<p class="validation-message">{{validation_message}}</p>