RailsScript Infinite Scroll

infinite_scroll.js.coffee

window.App ||= {}
class App.GemgentoCategories extends App.Base

  show: =>
    new App.ProductGrid()
    @infiniteScroll()

    return


  # Enable infinite scrolling
  infiniteScroll: ->
    $("#category-products").infinitescroll
      navSelector: "div.pagination"
      nextSelector: "div.pagination a:first"
      itemSelector: "#category-products div.tile"
      bufferPx: 1200

    , (arrayOfNewElem) ->

      # hide the pagination link if we didn't load a full page
      if arrayOfNewElem.length != 12
        $('#next').hide()

      $(window).trigger('resize') # make sure the tiles are all sized correctly

      # hide images and fade in once loaded
      $(arrayOfNewElem).each ->
        $imageWrapper = $('.image-wrapper', this)
        $('img', $imageWrapper).hide()
        $imageWrapper.imagesLoaded ->
          $('img', $imageWrapper).fadeIn()

      return

    # pause the infinite scroll when user navigates away
    $(document).on 'page:fetch', ->
      $("#category-products").infinitescroll('pause');

    # resume infinite scroll when page is restored
    $(document).on 'page:restore', ->
      $("#category-products").infinitescroll('resume');

    return