Merge pull request #1334 from mluto/load-more-chat-messages

Load more than 100 chat messages using a 'load more'-link

src/locales/de.json

@@ -81,6 +81,7 @@
 	"pad.share.emebdcode": "In Webseite einbetten",
 	"pad.chat": "Chat",
 	"pad.chat.title": "Den Chat dieses Pads \u00f6ffnen",
+	"pad.chat.loadmessages": "Weitere Nachrichten laden",
 	"timeslider.pageTitle": "{{appTitle}} Pad-Versionsgeschichte",
 	"timeslider.toolbar.returnbutton": "Zur\u00fcck zum Pad",
 	"timeslider.toolbar.authors": "Autoren:",

src/node/db/Pad.js

@@ -281,27 +281,7 @@ Pad.prototype.getChatMessage = function getChatMessage(entryNum, callback) {
   });
 };
 
-Pad.prototype.getLastChatMessages = function getLastChatMessages(count, callback) {
-  //return an empty array if there are no chat messages
-  if(this.chatHead == -1)
-  {
-    callback(null, []);
-    return;
-  }
-
-  var _this = this;
-
-  //works only if we decrement the amount, for some reason
-  count--;
-
-  //set the startpoint
-  var start = this.chatHead-count;
-  if(start < 0)
-    start = 0;
-
-  //set the endpoint
-  var end = this.chatHead;
-
+Pad.prototype.getChatMessages = function getChatMessages(start, end, callback) {
   //collect the numbers of chat entries and in which order we need them
   var neededEntries = [];
   var order = 0;
@@ -311,6 +291,8 @@ Pad.prototype.getLastChatMessages = function getLastChatMessages(count, callback
     order++;
   }
   
+  var _this = this;
+  
   //get all entries out of the database
   var entries = [];
   async.forEach(neededEntries, function(entryObject, callback)

src/node/handler/PadMessageHandler.js

@@ -205,6 +205,8 @@ exports.handleMessage = function(client, message)
         handleUserInfoUpdate(client, message);
       } else if (message.data.type == "CHAT_MESSAGE") {
         handleChatMessage(client, message);
+      } else if (message.data.type == "GET_CHAT_MESSAGES") {
+        handleGetChatMessages(client, message);
       } else if (message.data.type == "SAVE_REVISION") {
         handleSaveRevisionMessage(client, message);
       } else if (message.data.type == "CLIENT_MESSAGE" &&
@@ -362,6 +364,74 @@ function handleChatMessage(client, message)
   });
 }
 
+/**
+ * Handles the clients request for more chat-messages
+ * @param client the client that send this message
+ * @param message the message from the client
+ */
+function handleGetChatMessages(client, message)
+{
+  if(message.data.start == null)
+  {
+    messageLogger.warn("Dropped message, GetChatMessages Message has no start!");
+    return;
+  }
+  if(message.data.end == null)
+  {
+    messageLogger.warn("Dropped message, GetChatMessages Message has no start!");
+    return;
+  }
+  
+  var start = message.data.start;
+  var end = message.data.end;
+  var count = start - count;
+  
+  if(count < 0 && count > 100)
+  {
+    messageLogger.warn("Dropped message, GetChatMessages Message, client requested invalid amout of messages!");
+    return;
+  }
+  
+  var padId = sessioninfos[client.id].padId;
+  var pad;
+  
+  async.series([
+    //get the pad
+    function(callback)
+    {
+      padManager.getPad(padId, function(err, _pad)
+      {
+        if(ERR(err, callback)) return;
+        pad = _pad;
+        callback();
+      });
+    },
+    function(callback)
+    {
+      pad.getChatMessages(start, end, function(err, chatMessages)
+      {
+        if(ERR(err, callback)) return;
+		
+	    var infoMsg = {
+	      type: "COLLABROOM",
+	      data: {
+	        type: "CHAT_MESSAGES",
+	        messages: chatMessages
+	      }
+	    };
+		
+		// send the messages back to the client
+        for(var i in pad2sessions[padId])
+        {
+          if(pad2sessions[padId][i] == client.id)
+          {
+            socketio.sockets.sockets[pad2sessions[padId][i]].json.send(infoMsg);
+			break;
+          }
+        }
+      });
+    }]);
+}
 
 /**
  * Handles a handleSuggestUserName, that means a user have suggest a userName for a other user
@@ -778,19 +848,18 @@ function handleClientReady(client, message)
   var pad;
   var historicalAuthorData = {};
   var currentTime;
-  var chatMessages;
   var padIds;
 
   async.series([
-    // Get ro/rw id:s
-    function (callback) {
+    //Get ro/rw id:s
+    function (callback)
+    {
       readOnlyManager.getIds(message.padId, function(err, value) {
         if(ERR(err, callback)) return;
         padIds = value;
         callback();
       });
     },
-
     //check permissions
     function(callback)
     {
@@ -816,7 +885,7 @@ function handleClientReady(client, message)
         }
       });
     }, 
-    //get all authordata of this new user
+    //get all authordata of this new user, and load the pad-object from the database
     function(callback)
     {
       async.parallel([
@@ -840,6 +909,7 @@ function handleClientReady(client, message)
             callback();
           });
         },
+        //get pad
         function(callback)
         {
           padManager.getPad(padIds.padId, function(err, value)
@@ -851,7 +921,7 @@ function handleClientReady(client, message)
         }
       ], callback);
     },
-    //these db requests all need the pad object
+    //these db requests all need the pad object (timestamp of latest revission, author data)
     function(callback)
     {
       var authors = pad.getAllAuthors();
@@ -880,20 +950,11 @@ function handleClientReady(client, message)
               callback();
             });
           }, callback);
-        },
-        //get the latest chat messages
-        function(callback)
-        {
-          pad.getLastChatMessages(100, function(err, _chatMessages)
-          {
-            if(ERR(err, callback)) return;
-            chatMessages = _chatMessages;
-            callback();
-          });
         }
       ], callback);
       
     },
+    //glue the clientVars together, send them and tell the other clients that a new one is there
     function(callback)
     {
       //Check that the client is still here. It might have disconnected between callbacks.
@@ -966,7 +1027,9 @@ function handleClientReady(client, message)
         "padId": message.padId,
         "initialTitle": "Pad: " + message.padId,
         "opts": {},
-        "chatHistory": chatMessages,
+        // tell the client the number of the latest chat-message, which will be 
+        // used to request the latest 100 chat-messages later (GET_CHAT_MESSAGES)
+        "chatHead": pad.chatHead,
         "numConnectedUsers": pad2sessions[padIds.padId].length,
         "isProPad": false,
         "readOnlyId": padIds.readOnlyPadId,
@@ -984,7 +1047,6 @@ function handleClientReady(client, message)
           "parts": plugins.parts,
         },
         "initialChangesets": [] // FIXME: REMOVE THIS SHIT
-
       }
 
       //Add a username to the clientVars if one avaiable

src/static/css/pad.css

@@ -488,6 +488,22 @@ table#otheruserstable {
   -ms-overflow-x: hidden;
   overflow-x: hidden;
 }
+.chatloadmessages
+{
+  margin-bottom: 5px;
+  margin-top: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+#chatloadmessagesbutton
+{
+  line-height: 1.8em;
+}
+#chatloadmessagesball
+{
+  display: none;
+}
 #chatinputbox {
   padding: 3px 2px;
   position: absolute;

src/static/js/chat.js

@@ -28,6 +28,8 @@ var Tinycon = require('tinycon/tinycon');
 var chat = (function()
 {
   var isStuck = false;
+  var gotInitialMessages = false;
+  var historyPointer = 0;
   var chatMentions = 0;
   var self = {
     show: function () 
@@ -76,7 +78,7 @@ var chat = (function()
       this._pad.collabClient.sendMessage({"type": "CHAT_MESSAGE", "text": text});
       $("#chatinput").val("");
     },
-    addMessage: function(msg, increment)
+    addMessage: function(msg, increment, isHistoryAdd)
     {    
       //correct the time
       msg.time += this._pad.clientTimeOffset;
@@ -112,6 +114,9 @@ var chat = (function()
       var authorName = msg.userName == null ? _('pad.userlist.unnamed') : padutils.escapeHtml(msg.userName); 
       
       var html = "<p class='" + authorClass + "'><b>" + authorName + ":</b><span class='time " + authorClass + "'>" + timeStr + "</span> " + text + "</p>";
+      if(isHistoryAdd)
+        $(html).insertAfter('#chatloadmessagesbutton');
+      else
         $("#chattext").append(html);
       
       //should we increment the counter??
@@ -125,7 +130,7 @@ var chat = (function()
         
         $("#chatcounter").text(count);
         // chat throb stuff -- Just make it throw for twice as long
-        if(wasMentioned && !alreadyFocused)
+        if(wasMentioned && !alreadyFocused && !isHistoryAdd)
         { // If the user was mentioned show for twice as long and flash the browser window
           $('#chatthrob').html("<b>"+authorName+"</b>" + ": " + text).show().delay(4000).hide(400);
           chatMentions++;
@@ -141,8 +146,8 @@ var chat = (function()
         chatMentions = 0;
         Tinycon.setBubble(0);
       });
+      if(!isHistoryAdd)
         self.scrollDown();
-
     },
     init: function(pad)
     {
@@ -157,12 +162,23 @@ var chat = (function()
         }
       });
       
-      var that = this;
-      $.each(clientVars.chatHistory, function(i, o){
-        that.addMessage(o, false);
-      })
+	  // initial messages are loaded in pad.js' _afterHandshake
 	  
-      $("#chatcounter").text(clientVars.chatHistory.length);
+	  $("#chatcounter").text(0);
+	  $("#chatloadmessagesbutton").click(function()
+	  {
+        var start = Math.max(self.historyPointer - 20, 0);
+        var end = self.historyPointer;
+
+        if(start == end) // nothing to load
+          return;
+
+        $("#chatloadmessagesbutton").css("display", "none");
+        $("#chatloadmessagesball").css("display", "block");
+
+        pad.collabClient.sendMessage({"type": "GET_CHAT_MESSAGES", "start": start, "end": end});
+        self.historyPointer = start;
+	  });
     }
   }
 

src/static/js/collab_client.js

@@ -400,7 +400,29 @@ function getCollabClient(ace2editor, serverVars, initialUserInfo, options, _pad)
     }
     else if (msg.type == "CHAT_MESSAGE")
     {
-      chat.addMessage(msg, true);
+      chat.addMessage(msg, true, false);
+    }
+    else if (msg.type == "CHAT_MESSAGES")
+    {
+      for(var i = msg.messages.length - 1; i >= 0; i--)
+      {
+        chat.addMessage(msg.messages[i], true, true);
+      }
+      if(!chat.gotInitalMessages)
+      {
+        chat.scrollDown();
+        chat.gotInitalMessages = true;
+        chat.historyPointer = clientVars.chatHead - msg.messages.length;
+      }
+
+      // messages are loaded, so hide the loading-ball
+      $("#chatloadmessagesball").css("display", "none");
+
+      // there are less than 100 messages or we reached the top
+      if(chat.historyPointer <= 0) 
+        $("#chatloadmessagesbutton").css("display", "none");
+      else // there are still more messages, re-show the load-button
+        $("#chatloadmessagesbutton").css("display", "block");
     }
     else if (msg.type == "SERVER_MESSAGE")
     {

src/static/js/pad.js

@@ -555,6 +555,18 @@ var pad = {
     pad.collabClient.setOnChannelStateChange(pad.handleChannelStateChange);
     pad.collabClient.setOnInternalAction(pad.handleCollabAction);
 
+    // load initial chat-messages
+    if(clientVars.chatHead != -1)
+    {
+      var chatHead = clientVars.chatHead;
+      var start = Math.max(chatHead - 100, 0);
+      pad.collabClient.sendMessage({"type": "GET_CHAT_MESSAGES", "start": start, "end": chatHead});
+    }
+    else // there are no messages
+    {
+      $("#chatloadmessagesbutton").css("display", "none");
+    }
+
     function postAceInit()
     {
       padeditbar.init();

src/templates/pad.html

@@ -368,7 +368,10 @@
 
         <div id="chatbox">
             <div id="titlebar"><span id ="titlelabel" data-l10n-id="pad.chat"></span><a id="titlecross" onClick="chat.hide();return false;">-&nbsp;</a></div>
-            <div id="chattext" class="authorColors"></div>
+            <div id="chattext" class="authorColors">
+                <img alt="loading.." id="chatloadmessagesball" class="chatloadmessages" src="../static/img/loading.gif" align="top">
+                <button id="chatloadmessagesbutton" class="chatloadmessages" data-l10n-id="pad.chat.loadmessages"></button>
+            </div>
             <div id="chatinputbox">
                 <form>
                     <input id="chatinput" type="text" maxlength="999">

tests/frontend/specs/chat_load_messages.js

@@ -0,0 +1,85 @@
+describe("chat-load-messages", function(){
+  it("creates a pad", function(done) {
+    helper.newPad(done);
+  });
+
+  it("adds a lot of messages", function(done) {
+    var inner$ = helper.padInner$; 
+    var chrome$ = helper.padChrome$; 
+    var chatButton = chrome$("#chaticon");
+    chatButton.click();
+    var chatInput = chrome$("#chatinput");
+    var chatText = chrome$("#chattext");
+    
+    var messages = 140;
+    for(var i=1; i <= messages; i++) {
+      var num = ''+i;
+      if(num.length == 1)
+        num = '00'+num;
+      if(num.length == 2)
+        num = '0'+num;
+      chatInput.sendkeys('msg' + num);
+      chatInput.sendkeys('{enter}');
+    }
+    helper.waitFor(function(){
+      return chatText.children("p").length == messages;
+    }).always(function(){
+      expect(chatText.children("p").length).to.be(messages);
+      $('#iframe-container iframe')[0].contentWindow.location.reload();
+      done();
+     });
+  });
+  
+  it("checks initial message count", function(done) {
+    var chatText;
+    var expectedCount = 101;
+    helper.waitFor(function(){
+      // wait for the frame to load
+      var chrome$ = $('#iframe-container iframe')[0].contentWindow.$;
+      if(!chrome$) // page not fully loaded
+        return false;
+    
+      var chatButton = chrome$("#chaticon");
+      chatButton.click();
+      chatText = chrome$("#chattext");
+      return chatText.children("p").length == expectedCount;
+    }).always(function(){
+      expect(chatText.children("p").length).to.be(expectedCount);
+      done();
+    });
+  });
+  
+  it("loads more messages", function(done) {
+    var expectedCount = 122;
+    var chrome$ = $('#iframe-container iframe')[0].contentWindow.$;
+    var chatButton = chrome$("#chaticon");
+    chatButton.click();
+    var chatText = chrome$("#chattext");
+    var loadMsgBtn = chrome$("#chatloadmessagesbutton");
+      
+    loadMsgBtn.click();
+    helper.waitFor(function(){
+      return chatText.children("p").length == expectedCount;
+    }).always(function(){
+      expect(chatText.children("p").length).to.be(expectedCount);
+      done();
+    });
+  });
+  
+  it("checks for button vanishing", function(done) {
+    var expectedDisplay = 'none';
+    var chrome$ = $('#iframe-container iframe')[0].contentWindow.$;
+    var chatButton = chrome$("#chaticon");
+    chatButton.click();
+    var chatText = chrome$("#chattext");
+    var loadMsgBtn = chrome$("#chatloadmessagesbutton");
+
+    loadMsgBtn.click();
+    helper.waitFor(function(){
+      return loadMsgBtn.css('display') == expectedDisplay;
+    }).always(function(){
+      expect(loadMsgBtn.css('display')).to.be(expectedDisplay);
+      done();
+    });
+  });
+});