Loading older chats now works.

brunch/src/app/collections/chats.coffee

@@ -3,4 +3,14 @@ Chat = require('models/chat').Chat
 class exports.Chats extends Backbone.Collection
   model: Chat
 
-  url: 'http://localhost:3000/chats'
+  addOlderChats: (chats) =>
+    for chat in chats
+      # Add to the chat collection, set silent to avoid triggering
+      # the addOne() function.
+      chatModel = new app.models.chat(chat)
+      @add(chatModel, silent:true)
+      # Call our special prependOne function to prepend the chat.
+      app.views.chatsView.prependOne(chatModel)
+
+  comparator: (chat) =>
+    chat.get('date')

brunch/src/app/collections/users.coffee

@@ -3,8 +3,6 @@ User = require('models/user').User
 class exports.Users extends Backbone.Collection
   model: User
 
-  url: 'http://localhost:3000/Users'
-
   currentUserUID: =>
     return @currentUser.get("uid")
 

brunch/src/app/main.coffee

@@ -35,6 +35,9 @@ $(document).ready ->
     app.collections.chats = new Chats()
     app.collections.chats.reset(Drupal.settings.chatroom.group.chats)
 
+    # Initialize ChatsView
+    app.views.chatsView = new ChatsView( collection: app.collections.chats )
+
     app.views.home = new HomeView( el: '#main-content' )
     app.routers.main.navigate 'home', true if Backbone.history.getFragment() is ''
 
@@ -49,10 +52,6 @@ $(document).ready ->
     'reconnection delay': 500,
     'max reconnection attempts': 20
   )
-  # TODO on disconnect, set some sort of message to let client know there's problems
-  # plus disable the chat box.
-  # Implement events disconnect, reconnect, reconnect_failed -- when disconnect
-  # disable. On reconnect, set message saying we're back on then fade off after 5 seconds.
 
   socket.on 'connect', ->
     app.settings.set(connection_status: 'connected')
@@ -90,6 +89,9 @@ $(document).ready ->
   socket.on 'rem groupie', (data) ->
     app.collections.users.remove(parseInt(data.uid, 10))
 
+  socket.on 'load older chats', (data) ->
+    app.collections.chats.addOlderChats(data)
+
 ################# Helper functions
 
 # Create a cookie with the specified name and value.

brunch/src/app/templates/home.eco

@@ -0,0 +1 @@
+<div class="button"><a id="load-older-chats" href="#home">Load older chats</a></div>

brunch/src/app/templates/userContainer.eco

@@ -1,4 +1,4 @@
-<li class='user-container'>
+<li id='<%= @id %>' class='user-container'>
   <div class='user'>
     <%- @user.get("pic") %>
     <span class="name"><%= @user.get('shortname') %></span>

brunch/src/app/views/chats_view.coffee

@@ -8,6 +8,7 @@ class exports.ChatsView extends Backbone.View
   lastUserContainer = 0
 
   initialize: ->
+    @lastUserContainerId = 0
     @bulkLoading = false
     @dateCount = 5
     @collection.bind('add', @addOne)
@@ -29,6 +30,10 @@ class exports.ChatsView extends Backbone.View
     setInterval((-> $('span.humaneDate').humaneDates()), 5000)
     @
 
+  prependOne: (chat) =>
+    chat.prepend = true
+    @addOne(chat)
+
   addOne: (chat) =>
     view = new chatView( model: chat )
     user = app.collections.users.get(chat.get('uid'))
@@ -42,9 +47,10 @@ class exports.ChatsView extends Backbone.View
              scrollTop: $(document).height()-$(window).height(),
              500
 
+    # Create a new user container if the user is different than the last user.
+    if parseInt(chat.get('uid'), 10) isnt parseInt(@currentUser, 10)
+      @lastUserContainerId++
 
-    # If user different than the last user, create a new user container.
-    if chat.get('uid') isnt @lastUserContainer
       # Only add the Date every five user containers.
       addDate = false
       if @dateCount is 5
@@ -53,18 +59,21 @@ class exports.ChatsView extends Backbone.View
       else
         @dateCount++
 
-      @$('ul').append(userContainerTemplate( user: user, addDate: addDate, date: chat.get("date")))
+      if chat.prepend?
+        @$('ul').prepend(userContainerTemplate( user: user, addDate: addDate, date: chat.get("date"), id: @lastUserContainerId))
+      else
+        @$('ul').append(userContainerTemplate( user: user, addDate: addDate, date: chat.get("date"), id: @lastUserContainerId))
 
       # Fade in the new user container.
       @$('ul li:last').hide().fadeIn()
 
       # Change dates to use 'x time ago' format.
       @$('.humaneDate').humaneDates()
 
-      @lastUserContainer = user.id
+      @currentUser = user.id
 
     # Add the message to the current user container.
-    @$(".chat-messages").filter(":last").append view.render().el
+    @$("#" + @lastUserContainerId).find('.chat-messages').append view.render().el
     scrollDown()
     @
 

brunch/src/app/views/home_view.coffee

@@ -1,14 +1,19 @@
 homeTemplate = require('templates/home')
-ChatsView = require('views/chats_view').ChatsView
 ConnectedView = require('views/connected_view').ConnectedView
 
 class exports.HomeView extends Backbone.View
   id: 'home-view'
 
   render: ->
     $(@el).html homeTemplate( name: Drupal.settings.chatroom.group.name )
-    chatsView = new ChatsView( collection: app.collections.chats )
-    $(@el).append chatsView.render().el
+    $(@el).append app.views.chatsView.render().el
     connectedView = new ConnectedView( collection: app.collections.users )
     connectedView.render()
+
+    # Load older chats
+    $('#load-older-chats').click( ->
+      socket.emit 'get older chats',
+        gid: Drupal.settings.chatroom.group.nid,
+        date: app.collections.chats.at(0).get('date')
+    )
     @

eduglu_chatroom.features.inc

@@ -12,3 +12,26 @@ function eduglu_chatroom_ctools_plugin_api() {
     return array("version" => 3);
   }
 }
+
+/**
+ * Implementation of hook_imagecache_default_presets().
+ */
+function eduglu_chatroom_imagecache_default_presets() {
+  $items = array(
+    'chatroom_pic' => array(
+      'presetname' => 'chatroom_pic',
+      'actions' => array(
+        '0' => array(
+          'weight' => '0',
+          'module' => 'imagecache',
+          'action' => 'imagecache_scale_and_crop',
+          'data' => array(
+            'width' => '25',
+            'height' => '25',
+          ),
+        ),
+      ),
+    ),
+  );
+  return $items;
+}

eduglu_chatroom.info

@@ -8,6 +8,7 @@ features[box][] = "chatroom_connected"
 features[context][] = "eduglu_chatroom"
 features[ctools][] = "boxes:box:1"
 features[ctools][] = "context:context:3"
+features[imagecache][] = "chatroom_pic"
 features[menu_links][] = "features:chatroom"
 name = "Eduglu Chatroom"
 package = "Features"