Marionette infinite scrolling rows

infinite_scroll.coffee

@PM.module 'Layouts', (Layouts, App, Backbone, Marionette) ->
  class Layouts.FeedbackLayout extends Layouts.CompositeList
    className: 'row feedback composite-list-wrapper max-container'
    template:  'feedback/feedback'
    historyIndex: 1
    initialize: ->
      @addRegions({ 
        productHistory: '.product-history-container'
      })

      #attaches scroll event to window triggering 'detect_scroll' and passing the 'this' context so it's not window
      $(window).on('scroll', _.bind(@detect_scroll, @))

      @historyCollection = @options.historyView.collection
      @historyCollection.on 'fetch:start', @toggleSpinner, @
      @historyCollection.on 'fetch:end', @renderProductHistory, @
      @historyCollection.search(@historyIndex)
      
      @stageView = @options.stageView

      console.log "recreating sidebar view", @
      @sidebarView = new App.Views.FeedbackSidebar
        collection: @options.sidebarCollection
        feedback: @options.feedback

    detect_scroll: ->
      $window = $ window
      $document = $ document

      if $window.scrollTop() >= $document.height() - $window.height() - 300
        @historyIndex++
        @historyCollection.search(@historyIndex)

    close: ->
      #remove scroll event when FeedbackLayout is closed
      $(window).off('scroll')

    toggleSpinner: ->
      @historyView.$el.find('.loading').removeClass('hide') if @historyView
      $(window).off('scroll')

    renderProductHistory: ->
      #items = @historyCollection.models[0].get('items')

      #if items from history are fetched back
      # if @historyView 
      #   @historyView.$el.append(new @itemView.itemView({ collection: @historyCollection }).render().el)
      # else
      # if @historyCollection.length > 0
      #   items = @historyCollection.models[0].get('items')

      #   @historyView = new App.Feedback.Views.History
      #     collection: @historyCollection

      #   @productHistory.show @historyView 

      #   @historyView.$el.find('.loading').addClass('hide')
      
      #if historyView already exists we want to create a new row and append child elements
      #we also want to group the collection by three for each row, if a row
      #doesn't have 3 items add another child element else create a new row
      if @historyView
        debugger
        #JSON response contains items and count we need to convert items array to a collection
        #returns an array of three items
        @collection = new Backbone.Collection( @historyCollection.models[0].get('items') )

        return if @collection.length is 0

        #cache view since it's reused a lot
        historyView = @historyView

        @collection.each (item, index) ->
          debugger
          row = historyView.$itemViewContainer.children().last()

          if row.children().length isnt 3
            row.append( new App.Feedback.Views.HistoryItemView( model: item ).render().el )
          else
            row = new App.Feedback.Views.HistoryRow( model: item, collection: [] )
            row.addChildView(item, App.Feedback.Views.HistoryItemView)
            historyView.$itemViewContainer.append( row.$el )
        , @

      else
        @collection = new Backbone.Collection( @historyCollection.models[0].get('items') )

        @historyView = new App.Feedback.Views.History
          collection: @collection

        @productHistory.show @historyView 

      
      $(window).on('scroll', _.bind(@detect_scroll, @))

    onShow: ->
      console.log "feedbackLayout", @

      #@history.fetch reset: true if @history.length == 0
      #will be empty if the collection is empty because a view is never created
      
      @historyView = new App.Feedback.Views.History
        collection: @historyCollection

      @productHistory.show @historyView

      if @sidebarView
        @sidebar.show @sidebarView
        @sidebar.$el.removeClass('hide')

      if @stageView
        @stage.show @stageView 
        @stage.$el.removeClass('empty')
      

      # if stageView = @options.stageView
      #   @sidebarView.activate stageView.section
      #   @sidebarView.setListVisible stageView.pendingFeedbackVisible