FlexInfiniteScroll

Infinite scroll for Ruby on Rails applications on pure JavaScript.

• Virtual scroll.
• Custom response handling.
• Views and Models helpers.
• Perfect scrollbar support.

Add gem to GemFile

gem 'flex_infinite_scroll'

Add JS library to application.js

//= require flex_infinite_scroll

In controller add render method for the model which will be loaded:

def list
    render json:  User.fis(params).render_html{ |el| content_tag(:div, el.name) }
end

Now add fis_tag to view, with same scoped data, path to list method and attach an event to window scroll:

<%= fis_tag(User, { requestUrl: list_users_path, windowScroll: true }  do |el| %>
    <div><%= el.name %></div>
<% end %>

If you don't want to use helpers, you can initialize it as JavaScript library:

var scrollContainer = document.getElementById('example');
var fis = new flexIS(scrollContainer, {requestUrl: 'example_path'}).init();

For more examples, you can run a demo project locally. Go to example folder.

Install gems:

bundle install

Initialize the database and seed it with test data:

rake db:create
rake db:migrate
rake db:seed

Run server:

rails s

Now you can access with browser - http://localhost:3000

fis_data = User.fis(options)

Default options:

{
    page: 1 # Which page select
    per_page: 20 # How much elements per page
}

Return current page for scoped data.

fis_data.page 

Return next page for scoped data.

fis_data.next_page

Return per page value for scoped data.

fis_data.per_page

Return amount of page value for initial data.

fis_data.total_pages

Render data in JSON format

fis_data.render_json

Render data in HTML format. Required HTML data block as a template for each element.

fis_data.render_html{ |el|
    content_tag(:div, el.name)
}

<%= fis_tag(data, fis_options, container_options) do |el| %>
    # HTML template for elements
<% end %>

data - scoped data. Must be same scope as in remote method. fis_options - library options. container_options - content_tag options, which will be applied to container.

var fis = new flexIS(scrollContainer, options); 

scrollContainer - DOM object. options - options in JSON format.

Initialize scroll container.

fis.init(); 

Reset scroll to the specific page and clear all data in the container. Default page - 1.

fis.resetScroll(); 

Append DOM element to scroll container.

fis.appendChild(el); 

el - DOM object.

Fires before next page request.

Fires after next page loaded.

HTML - available in HTML helper. JS - available in JS library.

Data processing after loading the next page. By default, data will be added as HTML.

Set custom response attribute. Default:

{
    next_page: 'next_page', // Next page integer value, "null" - if no more pages. 
    data: 'data' // Field with HTML for render. Only for default response render.
    elements_left : 'elements_left' // Required for virtual scroll, how much elements left.
}

Select different DOM elements for the scroll event. In query selector format '#example'.

URL for next page.

Bottom margin in pixels, when will start loading the next page. Default: 150

Start page for loading data. Default: 1

Type of AJAX request. Default: GET

Parameters that will be sent with next page request. Default: {page: next_page}

Attach scroll event to window object.

Enable virtual scroll.

Set element height. By default, it will be last element height on page.

Enable perfect-scrollbar library support (perfect-scrollbar not included in gem).

Set perfect-scrollbar library config.

Virtual scroll only supports fixed height elements. Virtual scroll can be enabled only in an HTML helper. virtualScroll and virtualScrollElementSize must be defined.

MIT