Implements infinite scrolling

- Implements infinite scrolling by binding to the scroll method
- Changes pagination from a clickable div to a nice looking spinner when loading messages
- Adds silence_mentions to make sure mentions are not fired when loading old messages
- When pulling old messages we do not navigate to oldest message anymore
- Fixes #186
- Fixes #180

Author: gabceb

app/assets/javascripts/backbone/views/channel_pane.js.coffee

@@ -4,6 +4,16 @@ class Kandan.Views.ChannelPane extends Backbone.View
   render: (container)->
     $container = $(container || @el)
     $container.html @paginatedActivitiesView()
+
+    # Flag to avoid pulling new messages when we already requested new messages from the server
+    @loading_new_messages = false
+    
+    $container.bind 'scroll', ()=>
+      if $container.scrollTop() <= 100 && !@loading_new_messages
+        @loading_new_messages = true
+        @loadMoreActivities($container)
+      return
+
     $container.append @chatboxView()
     @setIdAndData($container)
     $li = $("a[href=#channels-#{@options.channel.get('id')}]").parent()
@@ -27,3 +37,31 @@ class Kandan.Views.ChannelPane extends Backbone.View
   chatboxView: ()->
     view = new Kandan.Views.Chatbox({channel: @options.channel})
     view.render().el
+
+  loadMoreActivities: ($container)->
+    $channel_activities = $container.find(".channel-activities")
+    
+    # Keeping a reference of the first child to find the offset after the elements are added
+    $current_top_element = $channel_activities.children().first()
+
+    $pagination = $container.find(".pagination")
+    oldest = $pagination.data("oldest")
+
+    activities = new Kandan.Collections.Activities([], {channel_id: @options.channel.get("id")})
+    activities.fetch({
+      data: { oldest: oldest },
+      success: (collection)=>
+        for activity in collection.models.reverse()
+          activityView = new Kandan.Views.ShowActivity({activity: activity, silence_mentions: true})
+          $container.find(".channel-activities").prepend(activityView.render().el)
+
+        $container.scrollTop($current_top_element.offset().top)
+
+        Kandan.Helpers.Channels.setPaginationState(
+          collection.channelId,
+          collection.moreActivities,
+          _.last(collection.models).get("id")
+        )
+
+        @loading_new_messages = false
+    })

app/assets/javascripts/backbone/views/paginated_activities.js.coffee

@@ -4,17 +4,13 @@ class Kandan.Views.PaginatedActivities extends Backbone.View
   className: 'paginated-activities'
   template: JST['paginated_activities']
 
-  events:
-    "click .pagination": "loadMoreActivities"
-
   setPagination: ()->
     oldestActivityId = 0
     if @channel.activities and @channel.activities.models.length > 0
       oldestActivityId = _.first(@channel.activities.models).get("id")
 
     $(@el).find(".pagination").data("oldest", oldestActivityId)
 
-
   render: ()->
     @channel = @options.channel
     $(@el).html @template()
@@ -24,21 +20,3 @@ class Kandan.Views.PaginatedActivities extends Backbone.View
     listActivitiesView = new Kandan.Views.ListActivities({channel: @channel})
     $(@el).append listActivitiesView.render().el
     @
-
-
-  loadMoreActivities: ()->
-    oldest = $(@el).find(".pagination").data("oldest")
-    activities = new Kandan.Collections.Activities([], {channel_id: @channel.get("id")})
-    activities.fetch({
-      data: { oldest: oldest },
-      success: (collection)=>
-        for activity in collection.models.reverse()
-          activityView = new Kandan.Views.ShowActivity({activity: activity})
-          $(@el).find(".channel-activities").prepend(activityView.render().el)
-
-        Kandan.Helpers.Channels.setPaginationState(
-          collection.channelId,
-          collection.moreActivities,
-          _.last(collection.models).get("id")
-        )
-    })

app/assets/javascripts/backbone/views/show_activity.js.coffee

@@ -23,7 +23,8 @@ class Kandan.Views.ShowActivity extends Backbone.View
       if activity.user.id == Kandan.Helpers.Users.currentUser().id
         $(@el).addClass("current_user")
 
-      if user_mention_regex.test(@compiledTemplate) || all_mention_regex.test(@compiledTemplate)
+      # Only fire mentions if we are not loading old messages
+      if !@options.silence_mentions && (user_mention_regex.test(@compiledTemplate) || all_mention_regex.test(@compiledTemplate))
         $(@el).addClass("mentioned_user")
         Kandan.Plugins.Notifications?.playAudioNotification('attention')
 

app/assets/stylesheets/_chat_area.sass

@@ -114,8 +114,12 @@ html body .ui-tabs .ui-tabs-nav li
   min-height: 110%
   padding-bottom: 0px
   .pagination
-    text-decoration: underline
-    cursor: pointer
+    text-align: center
+    font-size: 14px
+    span
+      position: relative
+      top: -6px
+      left: 10px
   .channel-activities
     width: 100%
 

app/assets/templates/paginated_activities.jst.eco

@@ -1 +1 @@
-<div class="pagination">previous messages</div>
+<div class="pagination"><i class="icon-spinner icon-spin icon-2x"></i><span>Loading previous messages</span></div>