auto scroll is working on initial load and tab switch

kandanapp · Feb 16, 2013 · 623ff1b · 623ff1b
1 parent b2053b7
commit 623ff1b
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 12 deletions.
diff --git a/app/assets/javascripts/backbone/helpers/channels.js.coffee b/app/assets/javascripts/backbone/helpers/channels.js.coffee
@@ -11,10 +11,14 @@ class Kandan.Helpers.Channels
     scrollPercentage > @options.autoScrollThreshold
 
   @scrollToLatestMessage: (channelId)->
-    $(document).scrollTop($(document).height()+9000)
+    if channelId
+      theScrollArea = $('#channels-'+channelId)
+      theScrollArea.scrollTop(theScrollArea.prop('scrollHeight'))
+    else
+      $('.channels-pane').scrollTop($('.channels-pane').prop('scrollHeight'))
 
   @currentScrollPosition: (channelId)->
-    $(document).scrollTop()
+    $('channels-pane').scrollTop()
 
   @channelActivitiesEl: (channelId)->
     $("#channel-activities-#{channelId}")
@@ -34,6 +38,7 @@ class Kandan.Helpers.Channels
       return $(document).data("active-channel-id")
 
 
+
   @confirmDeletion: ()->
     return confirm("Really delete the channel?")
 
@@ -57,7 +62,7 @@ class Kandan.Helpers.Channels
   @getChannelIdByTabIndex: (tabIndex)->
     $("#kandan .ui-tabs-panel")
       .eq(tabIndex)
-      .data("channel-id")
+      .data("channel-id") 
 
   @getTabIndexByChannelId: (channelId)->
     $("#channels-#{channelId}").prevAll("div").length
@@ -90,6 +95,7 @@ class Kandan.Helpers.Channels
     view = new Kandan.Views.ChannelPane({channel: channel})
     view.render $(channelArea)
     $(channelArea).data("channel_id", channel.get("id"))
+
 
 
   @newActivityView: (activityAttributes)->

diff --git a/app/assets/javascripts/backbone/kandan.js.coffee.erb b/app/assets/javascripts/backbone/kandan.js.coffee.erb
@@ -72,7 +72,15 @@ window.Kandan =
       select: (event, ui)->
         $(document).data('active-channel-id',
           Kandan.Helpers.Channels.getChannelIdByTabIndex(ui.index))
+
+        #the need for the delay feels hacky to me. 
+        #It is there because the chat area has to render before scrollHeight can be determined.
+        theId = Kandan.Helpers.Channels.getActiveChannelId() 
+        delay = (ms, func) -> setTimeout func, ms
+        delay 1, -> Kandan.Helpers.Channels.scrollToLatestMessage(theId)
         Kandan.Data.Channels.runCallbacks('change')
+
+
       add: (event, ui) ->
         $('.header .ui-tabs-panel:last').detach().appendTo('#channels')
         $('#kandan').tabs('option', 'disabled', [])
@@ -92,10 +100,10 @@ window.Kandan =
       </li>
     '''
 
+
   initChatArea: (channels)->
     chatArea = new Kandan.Views.ChatArea({channels: channels})
     $(".main-area").append(chatArea.render().el)
-    $(document).scrollTop($(document).height()+9000)
 
 
   onFetchActiveUsers: (channels)=>
@@ -109,6 +117,8 @@ window.Kandan =
       Kandan.initChatArea(channels)
       Kandan.initTabs()
       Kandan.Widgets.initAll()
+      Kandan.Helpers.Channels.scrollToLatestMessage()
+
 
   setCurrentUser: ()->
     template = JST['current_user']

diff --git a/app/assets/javascripts/backbone/views/channel_pane.js.coffee b/app/assets/javascripts/backbone/views/channel_pane.js.coffee
@@ -13,11 +13,12 @@ class Kandan.Views.ChannelPane extends Backbone.View
     $(container).attr "id", "channels-#{@options.channel.get("id")}"
     $(container).attr "class", "channels-pane"
     $(container).data "channel-id", @options.channel.get('id')
-
+    
   paginatedActivitiesView: ()->
     view = new Kandan.Views.PaginatedActivities({channel: @options.channel})
     view.render().el
 
   chatboxView: ()->
     view = new Kandan.Views.Chatbox({channel: @options.channel})
     view.render().el
+
diff --git a/app/assets/javascripts/backbone/views/chatbox.js.coffee b/app/assets/javascripts/backbone/views/chatbox.js.coffee
@@ -37,8 +37,9 @@ class Kandan.Views.Chatbox extends Backbone.View
       )
 
       $("#activity-c#{model.cid}").attr("id", "activity-#{model.get('id')}")
-      $scrollbox = $('.channels-pane')
-      $scrollbox.prop("scrollTop", $scrollbox.prop('scrollHeight'))
+      theId = Kandan.Helpers.Channels.getActiveChannelId()
+      Kandan.Helpers.Channels.scrollToLatestMessage(theId)
+
     })
 
   render: ()->

diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb
@@ -4,9 +4,6 @@
   })
 <%- end %>
 
-
-
-
 <div id="kandan">
   <div class="header">
     <%= image_tag "logo.png", :class=>"logo" %>  
@@ -50,5 +47,4 @@
     <%= link_to 'Logout', destroy_user_session_path, :method => :delete %><br />
     <hr>
     <%= link_to 'About Kandan', about_path, @about %>
-  </div>
-
+  </div>