Monday, October 13, 2014

infinity scroll

poniedziałek, październik 13, 2014 Dodany przez Miłosz Osiński #RUBY ON RAILS ##
Po dłuższej przerwie wyjaśnie jak w aplikacji zamienić standardową paginacje na infinity scroll

Jeśli wahacie się nad tym rozwiązaniem polecam ten artykuł: Paginacja czy infinite scroll?

Wychodzę z założenia że każdy ma już działającą paginacje przy pomocy will_paginate :)

Na początek poprawiamy widok index.html.erb :
- Do #posts będziemy wstrzykiwać artykuły z kolejnych stron
- W #info wyświetlimy standardowe informacje o zawartości stron np. Wyświetlane Artykuły 1-20 z 50
- Ukrywamy starą paginację
#app/views/articles/index.html.erb
<div id="posts">
 <%= render @articles %>
</div>

<div id="info">
  <%= page_entries_info @articles %>
</div>

<div class="blog-pager" id="blog-pager" style="display:none">
  <%= will_paginate @articles, inner_window: 2, outer_window: 0 %>
</div>

Następnie tworzymy widok odpowiedzialny za wyrenderowanie odpowiedzi z js:
#app/views/articles/index.js.erb
$('.blog-posts #posts').append('<%= j render @articles %>');
<% if @articles.next_page %>
  $('#info').replaceWith("<div id='info'><%= j page_entries_info @articles %></div>");
  $('.pagination').replaceWith('<%= j will_paginate @posts %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
<% end %>

Należy też pamiętać aby w controlerze articles w akcji index było:
#app/controllers/articles_controller.rb
respond_to do |format|
 format.js
end

Na koniec pozostało dodać ten skrypt odpowiedzialny za skroll i nie tylko:
//app/assets/javascripts/infinity_scroll.js
var onEndless = function() {
  $(window).off('scroll', onEndless);
  var url = $('.pagination a.next_page').attr('href');
  if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 100) {
    $('#info').html('<img src="/loading.gif" alt="Loading..." title="Loading..."/>');
    setTimeout(function (){
      return $.getScript(url, function() {
        return $(window).on('scroll', onEndless);
      });
    }, 1000);
  } else {
    return $(window).on('scroll', onEndless);
  }
};

jQuery(function() {
  if ($('.pagination').size() > 0) {
    $(window).on('scroll', onEndless);
  }
});

$(window).scroll();
Obrazek wyświetlany podczas wczytywnia danych dostępny jest Tutaj

W tym momencie Infinity scroll powinien działać bez zarzutu :)