Added link to load more chat-messages using new GET_CHAT_MESSAGES

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/static/css/pad.css

@@ -488,6 +488,11 @@ table#otheruserstable {
   -ms-overflow-x: hidden;
   overflow-x: hidden;
 }
+#chatloadmessages
+{
+  color: blue;
+  text-decoration: underline;
+}
 #chatinputbox {
   padding: 3px 2px;
   position: absolute;

src/static/js/chat.js

@@ -29,6 +29,7 @@ var chat = (function()
 {
   var isStuck = false;
   var gotInitialMessages = false;
+  var historyPointer = 0;
   var chatMentions = 0;
   var self = {
     show: function () 
@@ -114,7 +115,7 @@ var chat = (function()
       
       var html = "<p class='" + authorClass + "'><b>" + authorName + ":</b><span class='time " + authorClass + "'>" + timeStr + "</span> " + text + "</p>";
       if(isHistoryAdd)
-        $("#chattext").prepend(html);
+        $(html).insertAfter('#chatloadmessages');
       else
         $("#chattext").append(html);
       
@@ -164,6 +165,19 @@ var chat = (function()
 	  // initial messages are loaded in pad.js' _afterHandshake
 	  
 	  $("#chatcounter").text(0);
+	  $("#chatloadmessages").click(function()
+	  {
+        var start = Math.max(self.historyPointer - 100, 0);
+		var end = self.historyPointer;
+		
+        if(start == end) // nothing to load
+          return;
+        if(start == 0) // reached the top
+          $("#chatloadmessages").css("display", "none");
+
+        pad.collabClient.sendMessage({"type": "GET_CHAT_MESSAGES", "start": start, "end": end});
+        self.historyPointer = start;
+	  });
     }
   }
 

src/static/js/collab_client.js

@@ -411,7 +411,10 @@ function getCollabClient(ace2editor, serverVars, initialUserInfo, options, _pad)
       if(!chat.gotInitalMessages)
       {
         chat.scrollDown();
-	    chat.gotInitalMessages = true;
+        chat.gotInitalMessages = true;
+        chat.historyPointer = clientVars.chatHead - msg.messages.length;
+        if(chat.historyPointer == -1) // there are less than 100 messages
+          $("#chatloadmessages").css("display", "none");
       }
     }
     else if (msg.type == "SERVER_MESSAGE")

src/static/js/pad.js

@@ -556,9 +556,16 @@ var pad = {
     pad.collabClient.setOnInternalAction(pad.handleCollabAction);
 
     // load initial chat-messages
-    var chatHead = clientVars.chatHead;
-    var start = Math.max(chatHead - 100, 0);
-    pad.collabClient.sendMessage({"type": "GET_CHAT_MESSAGES", "start": start, "end": chatHead});
+    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
+    {
+      $("#chatloadmessages").css("display", "none");
+    }
 
     function postAceInit()
     {

src/templates/pad.html

@@ -368,7 +368,7 @@
 
         <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"><a id="chatloadmessages" data-l10n-id="pad.chat.loadmessages"></a></div>
             <div id="chatinputbox">
                 <form>
                     <input id="chatinput" type="text" maxlength="999">