flex_infinite_scroll 0.1.4 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6dca995d94c2ad3e09019b7d273940ba9aaab2c7
-  data.tar.gz: 11616db0db37cbefd5d5a303d528440baa5c11f5
+  metadata.gz: 0b2a488c4c9a4e8d1c412c49188eb0a5b386e6ab
+  data.tar.gz: b2e285288ffaba7bd0b3c0e82d1ee74a1f38bdac
 SHA512:
-  metadata.gz: cd01ef3e67277c1805e030e6cce972978eb8e0f88839eb5fcf5166c7a7fb9497c1f1ecb5c504c979d45e3292cf5458d6315339cdd93855e65b3beeaeba7b402c
-  data.tar.gz: 83e655f62ab35e6c8f2375bddfeca4996dafb9add85de27eb1ef24d557133e63cfd71069f26d197b767bbb6fd206576b517160ab12508fdd21f152e2c3ccf8c6
+  metadata.gz: 66f797500898467fb03d9602f69756962dee609f10673a8efd925dd36893c37e586fa3d0c7db8956ee25ad98793d79160662cf12728df563e7609fa3d36fa1c4
+  data.tar.gz: 4df833cc66d11917c625d88cc2caade11fcee8863d61b8a8f5639eefebf42331018760a3dfbe548ec07fe2f328e16e40dc87a4a14b246366bca16e472cb4b271

data/lib/flex_infinite_scroll.rb

@@ -1,24 +1,5 @@
 # frozen_string_literal: true
 
-# Infinite scroll module
-require 'flex_infinite_scroll/view_helpers'
-
 module FlexInfiniteScroll
-  class Engine < ::Rails::Engine
-    ActionView::Base.send :include, FlexInfiniteScroll::ViewHelpers
-  end
-  extend ActiveSupport::Concern
-  def infinite_scroll(page = 1, page_size = (ENV['FIS_PAGE_SIZE'] || 20))
-    page ||= 1
-    page = page.to_i if page.class == String
-    offset_skip = (page - 1) * page_size
-    total_page = (count('*') / page_size.to_f).ceil
-    {
-      data: offset(offset_skip).limit(page_size),
-      total_page: total_page,
-      prev_page: (page == 1 ? nil : page - 1),
-      current_page: page,
-      next_page: (page == total_page ? nil : page + 1)
-    }
-  end
+  class Engine < ::Rails::Engine; end
 end

data/vendor/assets/javascript/flex_infinite_scroll.js

@@ -1,122 +1,148 @@
 // Flex Infinite Scroll initialization
 
+'use strict';
 
-function flexInfiniteScroll(object_id,config = {}) {
-    // Config preparing
-    var startPage = config.startPage || 1;
-    var nextPage = startPage + 1;
-    var dataUrl = config.url;
-    var scrollContainer = (object_id == 'body' ? document.body : document.getElementById(object_id));
-    var queryParams = config.queryParams;
-    var dataProcess = config.dataProcess;
-    var initialLoad = config.initialLoad;
-    var loadMargin = config.loadMargin || 150;
-    var beforeAction = config.beforeAction;
-    var afterAction = config.afterAction;
-    var targetContainer= config.targetContainer || scrollContainer ;
-    var eventTarget = (object_id == 'body' ? window : scrollContainer);
-    if (config.lastPage) nextPage = 'last';
-    scrollContainer.dataset.fisNextPage = nextPage;
-    scrollContainer.dataset.fisUrl = dataUrl;
-    scrollContainer.dataset.fisLoading = 0;
-    
-    function getScrollHeight(){
-      if (object_id == 'body'){
-        return document.documentElement.scrollHeight;
-      } else {
-        return eventTarget.scrollHeight;
-      }
-      
+class flexIS {
+    constructor(targetObject, config = {}) {
+        this.targetObject = (typeof(targetObject) === 'object' ? targetObject : document.querySelector(targetObject));
+        this.config = {...config, ...this.targetObject.dataset};
+        this.loading = false;
+        this.nextPage = this.config.startPage || 1;
+
+        this.config.requestType = this.config.requestType || 'GET';
+        this.config.loadMargin = this.config.loadMargin || 150;
+        this.config.eventTarget = prepareEventTarget(this);
+
+        function prepareEventTarget(object) {
+            var eventTarget = document.querySelector(object.config.eventTarget) || object.targetObject;
+            if (object.config.windowScroll) {
+                return window
+            } else {
+                return eventTarget
+            }
+        }
+    }
+
+    init() {
+        this.#getData();
+        this.config.eventTarget.addEventListener('scroll', () => {
+        	if (this.#scrollHitBottom() && this.nextPage) {
+                this.#getData();
+        	};
+        });
+        return this;
     }
 
-    function urlParams(object) {
-      var encodedString = '';
-      for (var prop in object) {
-          if (object.hasOwnProperty(prop)) {
-              if (encodedString.length > 0) {
-                  encodedString += '&';
-              }
-              encodedString += encodeURI(prop + '=' + object[prop]);
+    resetScroll(page) {
+        this.targetObject.innerHTML = '';
+        this.nextPage =  page || this.config.startPage || 1;
+        this.#getData();
+        return this;
+    }
+
+    // Private methods
+
+    #getData = (page = this.nextPage ) => {
+        var xhr = new XMLHttpRequest();
+        var params;
+        const beforeLoadEvent = new CustomEvent('FlexIS:beforeLoad');
+        const afterLoadEvent = new CustomEvent('FlexIS:afterLoad');
+
+        if (!page || this.loading) return false;
+
+        this.loading = true;
+
+        params = this.#customParams({page: parseInt(page, 10)});
+
+        this.targetObject.dispatchEvent(beforeLoadEvent)
+        xhr.open('GET', this.#requestUrl(params));
+        xhr.onload = () => {
+          var json = JSON.parse(xhr.response);
+
+          this.loading = false;
+
+          if (xhr.status === 200) {
+            this.#customResponse(json)
+            this.nextPage = json.next_page;
+            if (this.#scrollHitBottom()) this.#getData();
           }
-      }
-      return encodedString;
+
+          this.targetObject.dispatchEvent(afterLoadEvent)
+
+        }
+        xhr.send();
+    }
+
+    #scrollHeight = () => {
+        return this.targetObject.scrollHeight;
+    }
+
+    #scrollTop = () => {
+        return this.config.eventTarget.scrollTop || this.config.eventTarget.scrollY;
     }
-    
-    function getData(page = 1){
-      // Check for loading process and last page
-      if (scrollContainer.dataset.fisLoading === '1' || page == 'last') return false;
-      scrollContainer.dataset.fisLoading = 1;
-      // before load action
-      if (beforeAction) {
-        if (typeof(beforeAction) == 'function') {
-          beforeAction();
-        }else if (typeof(beforeAction) == 'string') {
-          eval(beforeAction);
+
+    #containerSize = () => {
+        return this.config.eventTarget.innerHeight || this.targetObject.offsetHeight;
+    }
+
+    #customParams = (params) => {
+        var customParams = this.config.customParams;
+        if (customParams) {
+            if (typeof customParams === "function") {
+                return customParams(params);
+            } else if (typeof customParams === "object") {
+                return {...customParams, ...params};
+            } else if (typeof customParams === "string") {
+                return {...JSON.parse(customParams), ...params};
+            }
         }
-      }
-      var xhr = new XMLHttpRequest();
-      var params = (queryParams || {page: page});
-      xhr.open('GET', scrollContainer.dataset.fisUrl + '?' + urlParams(params));
-      xhr.onload = function() {
-        var json = JSON.parse(xhr.response)
-        if (xhr.status === 200) {
-          if (dataProcess){
-            // custom user processor
-            dataProcess(json,targetContainer);
-          } else {
-            // default data processor
-            var div = document.createElement('div');
+        return params;
+    }
+
+    #customResponse = (json) => {
+        var customResponse = this.config.customResponse;
+        var div;
+        if (typeof customResponse === "function") {
+            customResponse(this.targetObject, json);
+        } else {
+            div = document.createElement('div');
             div.innerHTML = json.data;
             while (div.children.length > 0) {
-              document.getElementById(targetContainer).appendChild(div.children[0]);
+                this.targetObject.appendChild(div.children[0]);
             }
-          }
-          scrollContainer.dataset.fisNextPage = json.next_page || 'last';
-          scrollContainer.dataset.fisLoading = 0;
-          if (scrollNotApear()) {
-            // check if on initial load not enough elements on screen
-            getData(scrollContainer.dataset.fisNextPage);
-          }
-          // after load action
-          if (afterAction) {
-            if (typeof(afterAction) == 'function') {
-              afterAction();
-            }else if (typeof(afterAction) == 'string') {
-              eval(afterAction)
-            }
-          }   
-        } else {
-          scrollContainer.dataset.fisLoading = 0;
         }
-      };
-      xhr.send();
+
     }
-    
-    // intial load
-    if (initialLoad) {
-      getData(startPage);
-    } else if (scrollNotApear()) {
-      // check if on initial load not enough elements on screen
-      getData(scrollContainer.dataset.fisNextPage);
+
+    #requestUrl = (params) => {
+        var encodedString = [];
+        for (var prop in params) {
+            if (params.hasOwnProperty(prop)) {
+                encodedString.push(encodeURI(prop + '=' + params[prop]));
+            }
+        }
+        return this.config.requestUrl + '?' + encodedString.join('&');
     }
-    
-    // check if body scroll
-    
-    function scrollNotApear(){
-      var containerSize=(object_id == 'body' ?  eventTarget.innerHeight : eventTarget.offsetHeight);
-    	var scrollSize=getScrollHeight();
-      return (scrollSize - containerSize - loadMargin <= 0);
+
+    #scrollHitBottom = () => {
+        return (this.#scrollHeight() - this.#scrollTop()  - this.#containerSize() - this.config.loadMargin <= 0);
     }
+}
 
-    eventTarget.addEventListener('scroll', function() {
-    	var scrollTop= (object_id == 'body' ?  eventTarget.scrollY : eventTarget.scrollTop);
-    	var containerSize=(object_id == 'body' ?  eventTarget.innerHeight : eventTarget.offsetHeight);
-    	var scrollSize=getScrollHeight();
-    	if (scrollTop + containerSize > scrollSize - loadMargin && scrollContainer.dataset.fisNextPage != 'last'){
-        getData(scrollContainer.dataset.fisNextPage);
-    	};
+document.addEventListener('DOMContentLoaded', () => {
+    var fisObjects = [...document.getElementsByClassName('fis-container')];
+    fisObjects.forEach(object => {
+        object.data = {
+            flexIS: new flexIS(object).init()
+        }
     })
-    
-    
-    
-}
+})
+
+document.addEventListener('turbolinks:load', () => {
+    var fisObjects = [...document.getElementsByClassName('fis-turbolinks-container')];
+    fisObjects.forEach(object => {
+        object.data = {
+            flexIS: new flexIS(object).init()
+        }
+    })
+})

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: flex_infinite_scroll
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.2.0
 platform: ruby
 authors:
 - Anton Ignatov
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-05-05 00:00:00.000000000 Z
+date: 2020-05-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -31,7 +31,6 @@ extensions: []
 extra_rdoc_files: []
 files:
 - lib/flex_infinite_scroll.rb
-- lib/flex_infinite_scroll/view_helpers.rb
 - vendor/assets/javascript/flex_infinite_scroll.js
 homepage: https://github.com/aignatov-bio/flex_infinite_scroll
 licenses:
@@ -56,6 +55,5 @@ rubyforge_project:
 rubygems_version: 2.6.14.3
 signing_key: 
 specification_version: 4
-summary: Infinite scroll for Ruby on Rails applications on pure JavaScript. Also has
-  Kaminari support for pagination.
+summary: Infinite scroll for Ruby on Rails applications on pure JavaScript.
 test_files: []

data/lib/flex_infinite_scroll/view_helpers.rb

@@ -1,52 +0,0 @@
-# frozen_string_literal: true
-
-module FlexInfiniteScroll
-  module ViewHelpers
-    include ActionView::Helpers::TagHelper
-    include ActionView::Context
-
-    def fis_init_list(data, partial, config = {})
-      data = kaminari_prepare(data) if config[:kaminari]
-      result = if config[:targetContainer]
-                 fis_get_list(data, partial, 'html')
-               else
-                 content_tag :div, id: 'fis-container', class: (config[:container_class] || '').to_s do
-                   fis_get_list(data, partial, 'html')
-                 end
-               end
-      config[:scrollContainer] ||= (config[:targetContainer] || 'body')
-      config[:targetContainer] ||= 'fis-container'
-      result += javascript_tag do
-        "flexInfiniteScroll('#{config[:scrollContainer]}',#{config.to_json})".html_safe
-      end
-      result.html_safe
-    end
-
-    def fis_next_page(data, partial, config = {})
-      data = kaminari_prepare(data) if config[:kaminari]
-      data[:data] = fis_get_list(data, partial, 'json')
-      data
-    end
-
-    def fis_get_list(data, partial, format)
-      result = ''
-      data[:data].each do |member|
-        result += if format == 'json'
-                    render_to_string(partial: partial, locals: { fis_object: member })
-                  else
-                    render partial: partial, locals: { fis_object: member }
-                  end
-      end
-      result.html_safe
-    end
-
-    private
-
-    def kaminari_prepare(data)
-      {
-        data: data,
-        next_page: data.next_page
-      }
-    end
-  end
-end