Added jabber chatbox gadget

58b39fb5 · Thibaut Frain · 3bd308e0 · 58b39fb5 · 58b39fb5 · 58b39fb5
Commit 58b39fb5 authored May 23, 2014 by Thibaut Frain
4 changed files
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -102,7 +102,9 @@ module.exports = function (grunt) {
          "<%= global_config.dest %>/jabber_login/jabber_login.css":
            "<%= global_config.src %>/jabber_login/jabber_login.css",
          "<%= global_config.dest %>/jabber_contactlist/jabber_contactlist.css":
-            "<%= global_config.src %>/jabber_contactlist/jabber_contactlist.css"
+            "<%= global_config.src %>/jabber_contactlist/jabber_contactlist.css",
+          "<%= global_config.dest %>/jabber_chatbox/jabber_chatbox.css":
+            "<%= global_config.src %>/jabber_chatbox/jabber_chatbox.css"
        }
      }
    },

--- a/src/jabber_chatbox/index.html
+++ b/src/jabber_chatbox/index.html
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Chatbox</title>
+
+    <link rel="stylesheet" href="jabber_chatbox.css">
+
+    <script src="../<%= curl.jquery.relative_dest %>"></script>
+    <script src="../<%= curl.strophejs.relative_dest %>"></script>
+    <script src="../<%= copy.rsvp.relative_dest %>"></script>
+    <script src="../<%= copy.renderjs.relative_dest %>"></script>
+    
+    <script src="jabber_chatbox.js"></script>
+  </head>
+  <body>
+    <div id="contact"></div>
+    <div id="talk"></div>
+    <textarea id="talk-input"></textarea>
+    <button id="send-button">Send</button>
+  </body>
+</html>
--- a/src/jabber_chatbox/jabber_chatbox.css
+++ b/src/jabber_chatbox/jabber_chatbox.css
+html {
+    height: 100%;
+}
+body {
+    height: 100%;
+}
+#talk {
+    padding: 10px;
+    height: 82%;
+    border: solid 1px #aaa;
+    font-family: monospace;
+    overflow: auto;
+}
+
+#talk-input { 
+    width: 80%;
+    height: 5%;
+    border: solid 1px #aaa;
+    font-family: monospace;
+    overflow: auto;
+    float: left;
+}
+
+#send-button {
+    width: 10%;
+    height: 5%;
+    float: left;
+}
--- a/src/jabber_chatbox/jabber_chatbox.js
+++ b/src/jabber_chatbox/jabber_chatbox.js
+/*globals window, document, RSVP, XMLSerializer, DOMParser,
+  rJS, $, DOMParser, Strophe, $msg*/
+
+(function ($, gadget) {
+  "use strict";
+
+  var main,
+    parseXML = function (xmlString) {
+      return new DOMParser()
+        .parseFromString(xmlString, 'text/xml')
+        .children[0];
+    };
+
+  function Chat(jid, name) {
+    this.jid = jid;
+    this.name = name;
+  }
+
+  Chat.prototype.sendInput = function () {
+    var message = $('#talk-input').val(),
+      messageStanzas;
+    $('#talk-input').val("");
+    if (message) {
+      $('#talk').append('<p>Me: ' + message + '</p>');
+      messageStanzas = this.getMessageStanzas(message);
+      main.send(messageStanzas);
+    }
+  };
+
+  Chat.prototype.getMessageStanzas = function (message) {
+    return $msg({to: this.jid, type: "chat"}).c('body').t(message).toString();
+  };
+
+  gadget
+    .declareAcquiredMethod('send', 'send')
+
+    .declareMethod('initContact', function (jid, name) {
+      this.chat = new Chat(jid, name);
+      $('#contact').html(jid);
+      return this.chat;
+    })
+
+    .declareMethod('receive', function (message) {
+      var xmlMessage = parseXML(message);
+      $('#talk').append(
+        '<p>' + Strophe.getBareJidFromJid($(xmlMessage).attr('from')) +
+          ': ' +
+          $(xmlMessage).find('body').text() +
+          '</p>'
+      );
+    })
+
+    .ready(function (g) {
+      main = g;
+
+      $('#send-button').click(function () {
+        g.chat.sendInput();
+      });
+
+      $("#talk-input").keypress(function (e) {
+        if (e.charCode === 13) {
+          e.preventDefault();
+          g.chat.sendInput();
+        }
+      });
+    });
+
+}($, rJS(window)));