diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index bc1d1d90538f7eb1b23e8d36c0f250ca67d2b1e2..3023c32d11a593d717b9c28b0b9fb4e8e59cb230 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/features/step_definitions/custom_web_steps.rb @@ -179,8 +179,6 @@ end And /^I scroll down$/ do evaluate_script("window.scrollBy(0,3000000)") - sleep 1 - wait_until(30) { evaluate_script('$("#infscr-loading:visible").length') == 0 } step "I wait for the ajax to finish" end diff --git a/public/javascripts/app/views/stream_view.js b/public/javascripts/app/views/stream_view.js index af54a3da9d4dcde4694b21cd5b35bc284298dc4c..2631fcde6ec61bf23542d6730527b687973365c3 100644 --- a/public/javascripts/app/views/stream_view.js +++ b/public/javascripts/app/views/stream_view.js @@ -9,9 +9,26 @@ app.views.Stream = Backbone.View.extend({ this.publisher = new app.views.Publisher({collection : this.collection}); + // inf scroll + // we're using this._loading to keep track of backbone's collection + // fetching state... is there a better way to do this? + var throttledScroll = _.throttle($.proxy(this.infScroll, this), 200); + $(window).scroll(throttledScroll); + return this; }, + infScroll : function(options) { + var $window = $(window); + var distFromTop = $window.height() + $window.scrollTop(); + var distFromBottom = $(document).height() - distFromTop; + var bufferPx = 300; + + if(distFromBottom < bufferPx && !this._loading) { + this.render(); + } + }, + prependPost : function(post) { var postView = new app.views.Post({ model: post }); $(this.el).prepend(postView.render().el); @@ -32,6 +49,8 @@ app.views.Stream = Backbone.View.extend({ href: this.collection.url(), id: "paginate" }).text('Load more posts')); + + this._loading = false; }, render : function(evt) { @@ -39,6 +58,9 @@ app.views.Stream = Backbone.View.extend({ var self = this; self.addLoader(); + + this._loading = true; + self.collection.fetch({ add: true, success: $.proxy(this.collectionFetched, self)