scroll down infinito

scroll-down.js

scrollInfinite = {
  initialize: function() {
    _this = this;
    this.template = _.template($('#artwork-template').html());
    this.$container = $('#products-list');
    this.spinner = $($('#spinner-template').html());
    this.page = 2;
    this.scrollAjaxStarted = false;
    this.bottomOfPage = false;
    this.onScroll();
    this.elementsSize = 0;
    this.$container.bind('scrollInfinite:contentAdded', function(){ _this.callbackHandler(); })
  },
  
  onScroll: function() {
    var _this = this;
    $(window).scroll(function() {
      if ( ($(window).scrollTop() >= ( $(document).height() - $(window).height() )) && !_this.scrollAjaxStarted && !_this.bottomOfPage) {
        _this.scrollAjaxStarted = true;
        $.ajax({
          url: location.pathname + '.json' + location.search,
          data: {page: _this.page},
          success: function(data) {
            _this.appendTemplate(data);
          }
        });
      }
    });
  },
  
  appendTemplate: function(data) {
    var _this = this;
    this.addSpinner();
    _this.page = _this.page + 1;
    if(_.isEmpty(data)) {
      _this.bottomOfPage = true;
      $content = $($('#end-pagination').html());
      _this.$container.append($content).masonry( 'appended', $content);
    } else {
      $content = [];
      _this.elementsSize = data.length;
      _.each(data, function(product, index){
        $content[index] = $(_this.template(product));
        $content[index].find('img').load(function(){
          _this.$container.append($content[index]).masonry('appended', $content[index]);
          _this.$container.trigger('scrollInfinite:contentAdded');
        });
      });
    }
    _this.scrollAjaxStarted = false;
  },
  
  addSpinner: function() { 
    this.callbacksCounter = 0;
    this.$container.append(this.spinner).masonry( 'appended', this.spinner); 
    this.$container.masonry('reload');
  },
  
  removeSpinner: function() { 
    this.$container.find('.spinner-span').remove(); 
    this.$container.masonry('reload');
  },
  
  callbackHandler: function() {
    this.callbacksCounter = this.callbacksCounter + 1;
    if(this.callbacksCounter == this.elementsSize) {
      this.removeSpinner();
    }
  }
}