[add][Refs #4] Display who is typing in current room

cli/lang/en.js

@@ -5,6 +5,11 @@ lang["en"] = {
     ,netErrorShort: "Network"
     ,edited: "edited"
 
+    ,areTyping: function(names) {
+        if (names.length === 1)
+            return names[0] +" is typing";
+        return names.join(", ") +" are typing";
+    }
     ,formatDate: function(ts) {
         if (typeof(ts) !== "string")
             ts = parseFloat(ts);

cli/lang/fr.js

@@ -5,6 +5,11 @@ lang["fr"] = {
     ,netErrorShort: "Reseau"
     ,edited: "edité"
 
+    ,areTyping: function(names) {
+        if (names.length === 1)
+            return names[0] +" est en train d'écrire";
+        return names.join(", ") +" sont en train d'écrire";
+    }
     ,formatDate: function(ts) {
         if (typeof(ts) !== "string")
             ts = parseFloat(ts);

cli/resources.js

@@ -7,6 +7,7 @@ var R = {
             title: "currentRoomTitle"
             ,content: "chatWindow"
         }
+        ,typing: "whoistyping"
         ,message: {
             form: "msgForm"
             ,input: "msgInput"

cli/ui.js

@@ -174,6 +174,21 @@ function onTypingUpdated() {
                 dom.classList.remove(R.klass.chatList.typing);
         }
     }
+    if (SELECTED_ROOM && typing[SELECTED_ROOM.id]) {
+        var typingUserNames = [], isOutOfSync = false;
+        for (var i in typing[SELECTED_ROOM.id]) {
+            var member = SLACK.context.getMember(i);
+            if (member)
+                typingUserNames.push(member.name);
+            else
+                isOutOfSync = true;
+        }
+        if (isOutOfSync)
+            outOfSync();
+        document.getElementById(R.id.typing).textContent = locale.areTyping(typingUserNames);
+    } else {
+        document.getElementById(R.id.typing).textContent = "";
+    }
 }
 
 function onNetworkStateUpdated(isNetworkWorking) {

cli/workflow.js

@@ -64,6 +64,10 @@ function poll(callback) {
     xhr.send(null);
 }
 
+function outOfSync() {
+    SLACK.lastServerVersion = 0;
+}
+
 /**
  * @param {boolean} success
  * @param {*} response

srv/public/index.html

@@ -17,6 +17,7 @@
         <div class="slack-chat-container">
             <div class="slack-chat-title" id="currentRoomTitle"></div>
             <div class="slack-chat-content" id="chatWindow"></div>
+            <div class="slack-chat-whoistyping" id="whoistyping"></div>
             <div id="replyToContainer" class="replyto-container"></div>
             <div class="slack-chat-control">
                 <form id="msgForm" class="msgform">

srv/public/style.css

@@ -25,6 +25,7 @@ body { display: flex; margin: 0; padding: 0; font-family: Lato, sans-serif; }
 .no-network .error { display: inline-block; }
 .slack-chat-content { flex: 1; overflow: auto; }
 .slack-chat-title { display: inline-block; padding: 14px 10px; font-size: 1.75em; font-style: italic; }
+.slack-chat-whoistyping { margin-left: 10px; }
 .slack-chat-control { display: inline-block; width: 100%; height: 2em; padding: 14px 0; }
 .slack-chat-control > * { display: inline-block; height: 100%; }
 .slack-context-room:not(.selected).unread, .slack-context-room:not(.selected).unread > a { font-weight: bold; color: white; }