flex_infinite_scroll 0.1.3 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA256:
-  metadata.gz: 3cb41835798253e2a4d88bdcfe92c12777f14b68c8ed69b1983f59d70ef17253
-  data.tar.gz: 50e727fdb17ba2d7fbf6990197e4d083e281fe0cfdd79cc10c0a449f156ec243
+SHA1:
+  metadata.gz: 566821164973e19e83ef507c84b5b77f0d66e148
+  data.tar.gz: e22f3d0148db3746989eef48649e82376c12f02d
 SHA512:
-  metadata.gz: ed2d0f945d3afe55c13e162cce7f4c8ef87bb8de0f644de7bd48e818b24e5c0c3d58a1e96769436a513976bd36bf119abf528d35d0e2327101cae85b28f4e415
-  data.tar.gz: 0e80acdf4f616b7bb78374bed03b75598d4fc25c267fa2fcf22643ad4da39b5e477fdfb6ab73221dd03d7cfeeb1e609069ea7926d1699b82bd9e2b7148bbf807
+  metadata.gz: b8a8bf1db18cdb92f26ef9953c5fee972f64c43de1e05f1fe0afae24fe21bbd07e425032d5675a8db5921c4bdab062ae80f2d6914bb542da046e9645be0a0c49
+  data.tar.gz: 4b6567f7892c2bc453d32a45a3a1866c8dd2eade75192f8386c3c7502262febd9e5295e6cad57c59a94f872619887eaaa734839ecd5241b5741c975e2b9fb61b

data/lib/flex_infinite_scroll.rb

@@ -1,25 +1,8 @@
 # frozen_string_literal: true
 
-# Infinite scroll module
-require 'flex_infinite_scroll/view_helpers'
-require 'sanitize'
-
 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
+
+require 'flex_infinite_scroll/activerecord'
+require 'flex_infinite_scroll/actionview'

data/lib/flex_infinite_scroll/actionview.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+ActiveSupport.on_load :action_view do
+  require 'flex_infinite_scroll/actionview/extension'
+  ::ActionView::Base.include FlexInfiniteScroll::ActionViewExtension
+end

data/lib/flex_infinite_scroll/actionview/extension.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module FlexInfiniteScroll
+  module ActionViewExtension
+    def fis_tag(data = nil, fis_config = {}, container_config = {})
+      container_config[:data] ||= {}
+      container_config[:class] = "fis-container #{container_config[:class]}"
+
+      virtual_el_size = fis_config[:virtualScrollElementSize]
+
+      page = fis_config[:startPage] || 1
+      fis_config[:startPage] = page + 1
+
+      fis_config.each do |k, _v|
+        container_config[:data][k.to_s.underscore] = fis_config[k]
+      end
+
+      content_tag :div, container_config do
+        data = data.fis(page: page, per_page: fis_config[:perPage])
+        data_html = data.map { |el| yield el }.join
+
+        baloons = []
+        if virtual_el_size
+          (fis_config[:startPage]..data.total_pages).each do |page_number|
+            baloons.push(
+              content_tag(:div, nil,
+                          class: 'fis-baloon',
+                          data: {
+                            baloon_page: page_number
+                          },
+                          style: "height: #{virtual_el_size * data.per_page}px")
+            )
+          end
+        end
+        (data_html + baloons.join).html_safe
+      end
+    end
+  end
+end

data/lib/flex_infinite_scroll/activerecord.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+ActiveSupport.on_load :active_record do
+  require 'flex_infinite_scroll/activerecord/extension'
+  ::ActiveRecord::Base.include FlexInfiniteScroll::ActiveRecordExtension
+end

data/lib/flex_infinite_scroll/activerecord/extension.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module FlexInfiniteScroll
+  module ActiveRecordExtension
+    extend ActiveSupport::Concern
+
+    require 'flex_infinite_scroll/activerecord/helpers'
+
+    included do
+      def self.fis(config = { page: 1 })
+        page = config[:page].to_i
+        per_page = config[:per_page] ? config[:per_page].to_i : 20
+        offset(per_page * (page - 1)).limit(per_page).extending do
+          include FlexInfiniteScroll::ActiveRecordHelpers
+        end
+      end
+    end
+  end
+end

data/lib/flex_infinite_scroll/activerecord/helpers.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module FlexInfiniteScroll
+  module ActiveRecordHelpers
+    def render_json
+      prepare_render.merge(data: as_json)
+    end
+
+    def render_html
+      prepare_render.merge(data: map { |el| yield el }.join.html_safe)
+    end
+
+    def per_page
+      values[:limit]
+    end
+
+    def page
+      (values[:offset] / per_page) + 1
+    end
+
+    def next_page
+      page == total_pages ? nil : page + 1
+    end
+
+    def total_pages
+      (except(:offset, :limit, :order).count / per_page).ceil
+    end
+
+    private
+
+    def prepare_render
+      {
+        next_page: next_page,
+        total_pages: total_pages
+      }
+    end
+  end
+end

data/vendor/assets/javascript/flex_infinite_scroll.js

@@ -1,108 +1,310 @@
 // Flex Infinite Scroll initialization
 
-$.fn.extend({
-  flexInfiniteScroll: function(config = {}) {
-    // Config preparing
-    var startPage = config.startPage || 1;
-    var nextPage = startPage + 1;
-    var dataUrl = config.url;
-    var scrollContainer = this[0];
-    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 = (scrollContainer.localName == 'body' ? window : scrollContainer);
-    if (config.lastPage) nextPage = 'last';
-    scrollContainer.dataset.fisNextPage = nextPage;
-    scrollContainer.dataset.fisUrl = dataUrl;
-    scrollContainer.dataset.fisLoading = 0;
-    
-    function getScrollHeight(){
-      if (scrollContainer.localName == 'body'){
-        return document.documentElement.scrollHeight
-      } else {
-        return eventTarget.scrollHeight
-      }
-      
-    }
-    
-    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)
+/*
+    config = {
+        customResponse: function(target, data) {
+            'Data processing after loading next page. By default data will be added as HTML.'
+        },
+        eventTarget: 'Select different DOM element for scroll event',
+        requestUrl: 'URL for next page.',
+        loadMargin: 'Bottom margin in pixels, when will start loading next page. Default: 150',
+        startPage: 'Start page for loading data. Default: 1',
+        requestType: 'Type of AJAX request. Default: GET',
+        customParams: function(params) {
+            Parameters that will be sent with next page request. Default: {page: next_page}
+            return params
+        },
+        windowScroll: Attach scroll event to window object,
+        customResponseAttributes: {
+            next_page: 'next_page',
+            data: 'data'
+        },
+        virtualScroll: 'Enable virtual scroll',
+        virtualScrollElementSize: 'Element size for virtual scroll',
+        perfectScrollbarSupport: 'Enable perfect-scrollbar support'
+        perfectScrollbarConfig: 'Config for perfect-scrollbar'
+    }
+*/
+
+'use strict';
+
+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.totalElements;
+
+        this.config.requestType = this.config.requestType || 'GET';
+        this.config.loadMargin = this.config.loadMargin || 150;
+        this.config.eventTarget = prepareEventTarget(this);
+        this.#customResponseAttributesSet();
+
+        function prepareEventTarget(object) {
+            var eventTarget = document.querySelector(object.config.eventTarget) || object.targetObject;
+            if (["true", true].includes(object.config.windowScroll)) {
+                return window;
+            } else {
+                return eventTarget;
+            }
         }
-      }
-      $.ajax({
-        url: scrollContainer.dataset.fisUrl,
-        // custom query params
-        data: (queryParams || {page: page}),
-        dataType: 'json',
-        type: 'GET',
-        success: function(json) {
-          
-          if (dataProcess){
-            // custom user processor
-            dataProcess(json,$(targetContainer));
-          } else {
-            // default data processor
-            $(json.data).appendTo($(targetContainer));
-          }
-          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)
+
+        if (["true", true].includes(this.config.perfectScrollbarSupport)) {
+            let PSConfig = this.config.perfectScrollbarConfig || {}
+            PSConfig.minScrollbarLength = PSConfig.minScrollbarLength || 40
+            this.perfectScrollbar = new PerfectScrollbar(
+                this.targetObject,
+                PSConfig
+            );
+        }
+    }
+
+    // Init infinite scroll
+    init() {
+        if(this.#virtualScroll().enabled()) {
+            this.#virtualScroll().pagesLoad();
+        } else {
+            this.#getData();
+        }
+
+        this.config.eventTarget.addEventListener('scroll', () => {
+            if(this.#virtualScroll().enabled()) {
+                this.#virtualScroll().pagesLoad();
+            } else {
+            	if (this.#scrollHitBottom() && this.nextPage) {
+                    this.#getData();
+            	};
+            }
+            this.#hideInvisibleContent();
+        });
+        return this;
+    }
+
+    // Reset scroll to specific page
+    resetScroll(page) {
+        this.targetObject.innerHTML = '';
+        this.nextPage =  page || this.config.startPage || 1;
+        this.#getData();
+        return this;
+    }
+
+    // Append element to container
+    appendChild(el) {
+        this.#appendElementToContainer(el);
+        return this;
+    }
+
+    // Private methods
+
+    // Run data request for next page
+    #getData = (page = this.nextPage, forceLoad = false) => {
+        var xhr = new XMLHttpRequest();
+        var params;
+        const beforeLoadEvent = new CustomEvent('FlexIS:beforeLoad');
+        const afterLoadEvent = new CustomEvent('FlexIS:afterLoad');
+
+        if (!page || (this.loading && !forceLoad)) 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, page);
+            if (!this.#virtualScroll().enabled()) {
+                this.nextPage = json[this.config.customResponseAttributes.next_page];
+                if (this.#scrollHitBottom()) this.#getData();
             }
           }
-        },
-        error: function() {
-          scrollContainer.dataset.fisLoading = 0;
+
+          this.targetObject.dispatchEvent(afterLoadEvent);
+
         }
-      });
-    }
-    
-    // intial load
-    if (initialLoad) {
-      getData(startPage)
-    } else if (scrollNotApear()) {
-      // check if on initial load not enough elements on screen
-      getData(scrollContainer.dataset.fisNextPage);
-    }
-    
-    // check if body scroll
-    
-    function scrollNotApear(){
-      var containerSize=$(eventTarget).innerHeight();
-    	var scrollSize=getScrollHeight();
-      return (scrollSize - containerSize - loadMargin <= 0)
-    }
-
-    $(eventTarget).on('scroll', () => {
-    	var scrollTop=$(eventTarget).scrollTop();
-    	var containerSize=$(eventTarget).innerHeight();
-    	var scrollSize=getScrollHeight();
-    	if (scrollTop + containerSize > scrollSize - loadMargin && scrollContainer.dataset.fisNextPage != 'last'){
-        getData(scrollContainer.dataset.fisNextPage);
-    	};
+        xhr.send();
+    }
+
+    // Full scroll height
+    #scrollHeight = () => {
+        return this.targetObject.scrollHeight;
+    }
+
+    // Top scroll position
+    #scrollTop = () => {
+        return this.config.eventTarget.scrollTop || this.config.eventTarget.scrollY || 0;
+    }
+
+    // Get container size
+    #containerSize = () => {
+        return this.config.eventTarget.innerHeight || this.targetObject.offsetHeight;
+    }
+
+    // Container position
+    #containerPosition = () => {
+        return this.#scrollTop() + this.#containerSize() + this.config.loadMargin;
+    }
+
+    // Add custom params to request
+    #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};
+            }
+        }
+        return params;
+    }
+
+    // Response handling
+    #customResponse = (json, page) => {
+        var customResponse = this.config.customResponse;
+        var data = json[this.config.customResponseAttributes.data];
+        var div;
+
+        delete json[this.config.customResponseAttributes.data];
+
+        if (data.constructor === Array) {
+            data.forEach((el) => {
+                var htmlEl
+                if (typeof customResponse === "function") {
+                    htmlEl = customResponse(el, json);
+                } else {
+                    let div = document.createElement('div');
+                    div.innerHTML = el;
+                    htmlEl = div.children[0];
+                }
+                this.#appendElementToContainer(htmlEl, page);
+            })
+        } else if (data.constructor === String) {
+            div = document.createElement('div');
+            div.innerHTML = data;
+            while (div.children.length > 0) {
+                this.#appendElementToContainer(div.children[0], page);
+            }
+        }
+
+        this.#hideInvisibleContent();
+
+        if (this.#virtualScroll().enabled()) {
+            this.#virtualScroll().destroyBaloon(page);
+        }
+
+        if (this.perfectScrollbar) {
+            this.perfectScrollbar.update();
+        }
+    }
+
+    #appendElementToContainer = (el, page) => {
+        if (this.#virtualScroll().enabled()) {
+            this.#virtualScroll().insertBeforeBaloon(page, el);
+        } else {
+            this.targetObject.appendChild(el);
+        }
+    }
+
+    // Hide invisible content, when leaving active zone
+    #hideInvisibleContent = () => {
+        var elems = this.targetObject.children;
+        for (let i = 0; i < elems.length; i++) {
+            let elem = elems[i];
+            let elementTopPosition = elems[i].offsetTop + elems[i].offsetHeight - this.#scrollTop();
+            let elementBottomPosition = elems[i].offsetTop - elems[i].offsetHeight - this.#scrollTop() - this.#containerSize();
+
+            if (elem.className.includes('ps__rail-x', 'ps__rail-y')) continue;
+
+            if (elementTopPosition <= 0 || elementBottomPosition >= 0) {
+                if (elem.style.visibility === 'hidden') continue;
+                elem.style.visibility = 'hidden';
+            } else {
+                if (elem.style.visibility === '') continue;
+                elem.style.visibility = '';
+            }
+        }
+    }
+
+    #virtualScroll = () => {
+        return {
+            enabled: () => {
+                return ["true", true].includes(this.config.virtualScroll);
+            },
+            insertBeforeBaloon: (page, el) => {
+                var baloon = this.targetObject.querySelector(`[data-baloon-page="${page}"]`)
+                var newHeight;
+                this.targetObject.insertBefore(el, baloon);
+                newHeight = baloon.offsetHeight - el.offsetHeight;
+                baloon.style.height = newHeight + 'px';
+
+            },
+            pagesLoad: () => {
+                var baloons = [...this.targetObject.getElementsByClassName('fis-baloon')];
+                var containerPosition = this.#containerPosition();
+                baloons.forEach(baloon => {
+                    var visibleBottom = this.#containerPosition() > baloon.offsetTop;
+                    var visibleTop = this.#scrollTop() < baloon.offsetTop + baloon.offsetHeight;
+                    if (baloon.dataset.loading) return;
+                    if (visibleBottom && visibleTop) {
+                        baloon.dataset.loading = true;
+                        this.#getData(baloon.dataset.baloonPage, true);
+                    }
+                })
+            },
+            destroyBaloon: (page) => {
+                this.targetObject.querySelector(`[data-baloon-page="${page}"]`).remove();
+            }
+        }
+    }
+
+    // Update response attributes
+    #customResponseAttributesSet = () => {
+        var attr = this.config.customResponseAttributes || {};
+        attr.next_page = attr.next_page || 'next_page';
+        attr.data = attr.data || 'data';
+        attr.elements_left = attr.elements_left || 'elements_left';
+        this.config.customResponseAttributes = attr
+    }
+
+    // Generate url with params
+    #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 when load next page
+    #scrollHitBottom = () => {
+        return this.#scrollHeight() - this.#containerPosition() <= 0;
+    }
+}
+
+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,29 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: flex_infinite_scroll
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.3.0
 platform: ruby
 authors:
 - Anton Ignatov
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-04-21 00:00:00.000000000 Z
+date: 2020-05-30 00:00:00.000000000 Z
 dependencies:
-- !ruby/object:Gem::Dependency
-  name: sanitize
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 4.6.3
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 4.6.3
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -45,7 +31,11 @@ extensions: []
 extra_rdoc_files: []
 files:
 - lib/flex_infinite_scroll.rb
-- lib/flex_infinite_scroll/view_helpers.rb
+- lib/flex_infinite_scroll/actionview.rb
+- lib/flex_infinite_scroll/actionview/extension.rb
+- lib/flex_infinite_scroll/activerecord.rb
+- lib/flex_infinite_scroll/activerecord/extension.rb
+- lib/flex_infinite_scroll/activerecord/helpers.rb
 - vendor/assets/javascript/flex_infinite_scroll.js
 homepage: https://github.com/aignatov-bio/flex_infinite_scroll
 licenses:
@@ -65,11 +55,10 @@ required_rubygems_version: !ruby/object:Gem::Requirement
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
-requirements:
-- jQuery
+requirements: []
 rubyforge_project: 
-rubygems_version: 2.7.6
+rubygems_version: 2.6.14.3
 signing_key: 
 specification_version: 4
-summary: Add infinite scrolling to models and views
+summary: Infinite scroll for Ruby on Rails applications on pure JavaScript.
 test_files: []

data/lib/flex_infinite_scroll/view_helpers.rb

@@ -1,43 +0,0 @@
-# frozen_string_literal: true
-
-module FlexInfiniteScroll
-  module ViewHelpers
-    include ActionView::Helpers::TagHelper
-    include ActionView::Context
-
-    def fis_init_list(data, partial, config = {})
-      result = if config[:targetContainer]
-                 fis_get_list(data, partial, 'html')
-               else
-                 content_tag :div, class: "fis-container #{config[:container_class] || ''}" do
-                   fis_get_list(data, partial, 'html')
-                 end
-               end
-      config[:scrollContainer] ||= (config[:targetContainer] || 'body')
-      config[:targetContainer] ||= '.fis-container'
-      result += javascript_tag do
-        "$('#{config[:scrollContainer]}').flexInfiniteScroll(#{config.to_json})".html_safe
-      end
-      Sanitize.fragment(result,
-                        Sanitize::Config.merge(Sanitize::Config::RELAXED,
-                                               elements: Sanitize::Config::RELAXED[:elements] + %w(script))).html_safe
-    end
-
-    def fis_next_page(data, partial)
-      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
-      Sanitize.fragment(result, Sanitize::Config::RELAXED).html_safe
-    end
-  end
-end