Selaa lähdekoodia

Add initial demo of embedded MUC chat

JC Brand 8 vuotta sitten
vanhempi
commit
890d87c980

+ 3 - 6
.gitignore

@@ -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/

+ 8 - 2
Makefile

@@ -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 - 0
css/converse-muc-embedded.css

@@ -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 */

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 265 - 1
css/converse.css


+ 3 - 0
css/theme.css

@@ -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 - 0
embedded.html

@@ -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 - 0
sass/_chatbox.scss

@@ -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 - 0
sass/_chatrooms.scss

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

+ 4 - 0
sass/_core.scss

@@ -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 - 0
sass/_fonts.scss

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

+ 54 - 0
sass/_muc_embedded.scss

@@ -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 - 0
src/converse-muc-embedded.js

@@ -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;
+                }
+            }
+        }
+    });
+}));

+ 1 - 1
src/templates/chatroom_nickname_form.html

@@ -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>

Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä