Implements the functionality to set subject to the chat room.

2014-06-20 11:00:49 +02:00 · 2014-06-20 11:00:49 +02:00 · 6e55d38ca9
parent 10f8ea786a
commit 6e55d38ca9
7 changed files with 232 additions and 38 deletions
--- a/chat.js
+++ b/chat.js
@ -39,10 +39,19 @@ var Chat = (function (my) {
        $('#usermsg').keydown(function (event) {
            if (event.keyCode === 13) {
                event.preventDefault();
-                var message = Util.escapeHtml(this.value);
+                var value = this.value;
                $('#usermsg').val('').trigger('autosize.resize');
                this.focus();
-                connection.emuc.sendMessage(message, nickname);
+                var command = new CommandsProcessor(value);
+                if(command.isCommand())
+                {
+                    command.processCommand();
+                }
+                else
+                {
+                    var message = Util.escapeHtml(value);
+                    connection.emuc.sendMessage(message, nickname);
+                }
            }
        });

@ -90,6 +99,45 @@ var Chat = (function (my) {
                { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
    };

+    /**
+     * Appends error message to the conversation
+     * @param errorMessage the received error message.
+     * @param originalText the original message.
+     */
+    my.chatAddError = function(errorMessage, originalText)
+    {
+        errorMessage = Util.escapeHtml(errorMessage);
+        originalText = Util.escapeHtml(originalText);
+
+        $('#chatconversation').append('<div class="errorMessage"><b>Error: </b>'
+            + 'Your message' + (originalText? (' \"'+ originalText + '\"') : "")
+            + ' was not sent.' + (errorMessage? (' Reason: ' + errorMessage) : '')
+            +  '</div>');
+        $('#chatconversation').animate(
+            { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
+
+    }
+
+    /**
+     * Sets the subject to the UI
+     * @param subject the subject
+     */
+    my.chatSetSubject = function(subject)
+    {
+        if(subject)
+            subject = subject.trim();
+        $('#subject').html(linkify(Util.escapeHtml(subject)));
+        if(subject == "")
+        {
+            $("#subject").css({display: "none"});
+        }
+        else
+        {
+            $("#subject").css({display: "block"});
+        }
+    }
+
+
    /**
     * Opens / closes the chat area.
     */
--- a/commands.js
+++ b/commands.js
@ -0,0 +1,98 @@
+/**
+ * Handles commands received via chat messages.
+ */
+var CommandsProcessor = (function()
+{
+    /**
+     * Constructs new CommandProccessor instance from a message.
+     * @param message the message
+     * @constructor
+     */
+    function CommandsPrototype(message)
+    {
+        /**
+         * Extracts the command from the message.
+         * @param message the received message
+         * @returns {string} the command
+         */
+        function getCommand(message)
+        {
+            if(message)
+            {
+                for(var command in commands)
+                {
+                    if(message.indexOf("/" + command) == 0)
+                        return command;
+                }
+            }
+            return "";
+        };
+
+        var command = getCommand(message);
+
+        /**
+         * Returns the name of the command.
+         * @returns {String} the command
+         */
+        this.getCommand = function()
+        {
+            return command;
+        }
+
+
+        var messageArgument = message.substr(command.length + 2);
+
+        /**
+         * Returns the arguments of the command.
+         * @returns {string}
+         */
+        this.getArgument = function()
+        {
+            return messageArgument;
+        }
+    }
+
+    /**
+     * Checks whether this instance is valid command or not.
+     * @returns {boolean}
+     */
+    CommandsPrototype.prototype.isCommand = function()
+    {
+        if(this.getCommand())
+            return true;
+        return false;
+    }
+
+    /**
+     * Processes the command.
+     */
+    CommandsPrototype.prototype.processCommand = function()
+    {
+        if(!this.isCommand())
+            return;
+
+        commands[this.getCommand()](this.getArgument());
+
+    }
+
+    /**
+     * Processes the data for topic command.
+     * @param commandArguments the arguments of the topic command.
+     */
+    var processTopic = function(commandArguments)
+    {
+        var topic = Util.escapeHtml(commandArguments);
+        connection.emuc.setSubject(topic);
+    }
+
+    /**
+     * List with supported commands. The keys are the names of the commands and
+     * the value is the function that processes the message.
+     * @type {{String: function}}
+     */
+    var commands = {
+        "topic" : processTopic
+    };
+
+    return CommandsPrototype;
+})();
--- a/css/main.css
+++ b/css/main.css
@ -43,6 +43,10 @@ html, body{
    color: #087dba;
 }

+.errorMessage {
+    color: red;
+}
+
 .remoteuser {
    color: #424242;
 }
--- a/css/videolayout_default.css
+++ b/css/videolayout_default.css
@ -235,7 +235,6 @@
 #header{
    display:none;
    position:absolute;
-    height: 0px;
    text-align:center;
    top:0;
    left:0;
@ -256,6 +255,21 @@
    border-bottom-right-radius: 12px;
 }

+#subject {
+    position: relative;
+    z-index: 3;
+    width: auto;
+    padding: 5px;
+    margin-left: 40%;
+    margin-right: 40%;
+    text-align: center;
+    background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35));
+    -webkit-box-shadow: 0 0 2px #000000, 0 0 10px #000000;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    display: none;
+}
+
 .watermark {
    display: block;
    position: absolute;
--- a/index.html
+++ b/index.html
@ -23,12 +23,13 @@
    <script src="libs/tooltip.js?v=1"></script><!-- bootstrap tooltip lib -->
    <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
    <script src="config.js?v=2"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
-    <script src="muc.js?v=11"></script><!-- simple MUC library -->
+    <script src="muc.js?v=12"></script><!-- simple MUC library -->
    <script src="estos_log.js?v=2"></script><!-- simple stanza logger -->
    <script src="desktopsharing.js?v=2"></script><!-- desktop sharing -->
    <script src="data_channels.js?v=1"></script><!-- data channels -->
    <script src="app.js?v=28"></script><!-- application logic -->
-    <script src="chat.js?v=5"></script><!-- chat logic -->
+    <script src="commands.js?v=1"></script><!-- application logic -->
+    <script src="chat.js?v=6"></script><!-- chat logic -->
    <script src="util.js?v=5"></script><!-- utility functions -->
    <script src="etherpad.js?v=8"></script><!-- etherpad plugin -->
    <script src="prezi.js?v=4"></script><!-- prezi plugin -->
@ -38,11 +39,11 @@
    <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
    <script src="rtp_stats.js?v=1"></script><!-- RTP stats processing -->
    <script src="videolayout.js?v=3"></script><!-- video ui -->
-    <script src="toolbar.js?v=1"></script><!-- toolbar ui -->
+    <script src="toolbar.js?v=2"></script><!-- toolbar ui -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font.css"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=20"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=6" id="videolayout_default"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=21"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=7" id="videolayout_default"/>
    <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
    <link rel="stylesheet" href="css/modaldialog.css?v=3">
    <link rel="stylesheet" href="css/popup_menu.css?v=2">
@ -56,37 +57,40 @@
    <script src="libs/prezi_player.js?v=2"></script>
  </head>
  <body>
-    <div id="header">
-        <span id="toolbar">
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Mute / Unmute" onclick='toggleAudio();'>
-                <i id="mute" class="icon-microphone"></i></a>
-            <div class="header_button_separator"></div>
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Start / stop camera" onclick='buttonClick("#video", "icon-camera icon-camera-disabled");toggleVideo();'>
-                <i id="video" class="icon-camera"></i></a>
-            <div class="header_button_separator"></div>
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Lock / unlock room" onclick="Toolbar.openLockDialog();">
-                <i id="lockIcon" class="icon-security"></i></a>
-            <div class="header_button_separator"></div>
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Invite others" onclick="Toolbar.openLinkDialog();"><i class="icon-link"></i></a>
-            <div class="header_button_separator"></div>
-            <span class="toolbar_span">
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Open / close chat" onclick='Chat.toggleChat();'><i id="chatButton" class="icon-chat"></i></a>
-                <span id="unreadMessages"></span>
-            </span>
-            <div class="header_button_separator"></div>
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share Prezi" onclick='Prezi.openPreziDialog();'><i class="icon-prezi"></i></a>
-            <span id="etherpadButton">
+    <div style="position: relative;" id="header_container">
+        <div id="header">
+            <span id="toolbar">
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Mute / Unmute" onclick='toggleAudio();'>
+                    <i id="mute" class="icon-microphone"></i></a>
                <div class="header_button_separator"></div>
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Shared document" onclick='Etherpad.toggleEtherpad(0);'><i class="icon-share-doc"></i></a>
-            </span>
-            <div class="header_button_separator"></div>
-            <span id="desktopsharing" style="display: none">
-                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share screen" onclick="toggleScreenSharing();"><i class="icon-share-desktop"></i></a>
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Start / stop camera" onclick='buttonClick("#video", "icon-camera icon-camera-disabled");toggleVideo();'>
+                    <i id="video" class="icon-camera"></i></a>
                <div class="header_button_separator"></div>
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Lock / unlock room" onclick="Toolbar.openLockDialog();">
+                    <i id="lockIcon" class="icon-security"></i></a>
+                <div class="header_button_separator"></div>
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Invite others" onclick="Toolbar.openLinkDialog();"><i class="icon-link"></i></a>
+                <div class="header_button_separator"></div>
+                <span class="toolbar_span">
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Open / close chat" onclick='Chat.toggleChat();'><i id="chatButton" class="icon-chat"></i></a>
+                    <span id="unreadMessages"></span>
+                </span>
+                <div class="header_button_separator"></div>
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share Prezi" onclick='Prezi.openPreziDialog();'><i class="icon-prezi"></i></a>
+                <span id="etherpadButton">
+                    <div class="header_button_separator"></div>
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Shared document" onclick='Etherpad.toggleEtherpad(0);'><i class="icon-share-doc"></i></a>
+                </span>
+                <div class="header_button_separator"></div>
+                <span id="desktopsharing" style="display: none">
+                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share screen" onclick="toggleScreenSharing();"><i class="icon-share-desktop"></i></a>
+                    <div class="header_button_separator"></div>
+                </span>
+                <a class="button" data-toggle="popover" data-placement="bottom" data-content="Enter / Exit Full Screen" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'>
+                    <i id="fullScreen" class="icon-full-screen"></i></a>
            </span>
-            <a class="button" data-toggle="popover" data-placement="bottom" data-content="Enter / Exit Full Screen" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'>
-                <i id="fullScreen" class="icon-full-screen"></i></a>
-        </span>
+        </div>
+        <div id="subject"></div>
    </div>
    <div id="settings">
      <h1>Connection Settings</h1>
--- a/muc.js
+++ b/muc.js
@ -170,12 +170,36 @@ Strophe.addConnectionPlugin('emuc', {
        }
        this.connection.send(msg);
    },
+    setSubject: function (subject){
+        var msg = $msg({to: this.roomjid, type: 'groupchat'});
+        msg.c('subject', subject);
+        this.connection.send(msg);
+        console.log("topic changed to " + subject);
+    },
    onMessage: function (msg) {
-        var txt = $(msg).find('>body').text();
-        // TODO: <subject/>
        // FIXME: this is a hack. but jingle on muc makes nickchanges hard
        var from = msg.getAttribute('from');
        var nick = $(msg).find('>nick[xmlns="http://jabber.org/protocol/nick"]').text() || Strophe.getResourceFromJid(from);
+
+        var txt = $(msg).find('>body').text();
+        var type = msg.getAttribute("type");
+        if(type == "error")
+        {
+            Chat.chatAddError($(msg).find('>text').text(), txt);
+            return true;
+        }
+
+        var subject = $(msg).find('>subject');
+        if(subject.length)
+        {
+            var subjectText = subject.text();
+            if(subjectText || subjectText == "") {
+                Chat.chatSetSubject(subjectText);
+                console.log("Subject is changed to " + subjectText);
+            }
+        }
+
+
        if (txt) {
            console.log('chat', nick, txt);

--- a/toolbar.js
+++ b/toolbar.js
@ -154,6 +154,7 @@ var Toolbar = (function (my) {
    my.showToolbar = function() {
        if (!$('#header').is(':visible')) {
            $('#header').show("slide", { direction: "up", duration: 300});
+            $('#subject').animate({top: "+=40"}, 300);

            if (toolbarTimeout) {
                clearTimeout(toolbarTimeout);
@ -222,6 +223,7 @@ var Toolbar = (function (my) {

        if (!isToolbarHover) {
            $('#header').hide("slide", { direction: "up", duration: 300});
+            $('#subject').animate({top: "-=40"}, 300);
        }
        else {
            toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);