Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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
  • Loading branch information
gabceb committed Mar 20, 2013
1 parent d3d6cde commit ee1c31c
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 26 deletions.
38 changes: 38 additions & 0 deletions app/assets/javascripts/backbone/views/channel_pane.js.coffee
Expand Up @@ -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()
Expand All @@ -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
})
Expand Up @@ -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()
Expand All @@ -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")
)
})
Expand Up @@ -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')

Expand Down
8 changes: 6 additions & 2 deletions app/assets/stylesheets/_chat_area.sass
Expand Up @@ -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%

Expand Down
2 changes: 1 addition & 1 deletion 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>

0 comments on commit ee1c31c

Please sign in to comment.