flex_infinite_scroll 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d2fd414bc8323c2bb367697232a7e2e259cfed15
-  data.tar.gz: 1f5f35932d20c2049a2e28734677e41a466338df
+  metadata.gz: 566821164973e19e83ef507c84b5b77f0d66e148
+  data.tar.gz: e22f3d0148db3746989eef48649e82376c12f02d
 SHA512:
-  metadata.gz: 78ddf99585b446ec32503783b6a300904dec526a8489e8de03bf1d0aeac1f2291ceb26d84ad452eb23d28c1387c1b5ec3efb64370e366e78312275bf8f825473
-  data.tar.gz: dac2a3773a6f1538873f57d20ec97ad85b98afeef77e2bf8a90c2e5672157a5081f1ee84d4efd552b76dfeec6bf7ea1e3aba68b42a316a3c95d925c56e1155d5
+  metadata.gz: b8a8bf1db18cdb92f26ef9953c5fee972f64c43de1e05f1fe0afae24fe21bbd07e425032d5675a8db5921c4bdab062ae80f2d6914bb542da046e9645be0a0c49
+  data.tar.gz: 4b6567f7892c2bc453d32a45a3a1866c8dd2eade75192f8386c3c7502262febd9e5295e6cad57c59a94f872619887eaaa734839ecd5241b5741c975e2b9fb61b

data/lib/flex_infinite_scroll.rb

@@ -3,3 +3,6 @@
 module FlexInfiniteScroll
   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

@@ -43,30 +43,39 @@ class flexIS {
 
         function prepareEventTarget(object) {
             var eventTarget = document.querySelector(object.config.eventTarget) || object.targetObject;
-            if (object.config.windowScroll) {
+            if (["true", true].includes(object.config.windowScroll)) {
                 return window;
             } else {
                 return eventTarget;
             }
         }
 
-        if (this.config.perfectScrollbarSupport) {
+        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() {
-        this.#getData();
+        if(this.#virtualScroll().enabled()) {
+            this.#virtualScroll().pagesLoad();
+        } else {
+            this.#getData();
+        }
+
         this.config.eventTarget.addEventListener('scroll', () => {
-        	if (this.#scrollHitBottom() && this.nextPage) {
-                this.#getData();
-        	};
+            if(this.#virtualScroll().enabled()) {
+                this.#virtualScroll().pagesLoad();
+            } else {
+            	if (this.#scrollHitBottom() && this.nextPage) {
+                    this.#getData();
+            	};
+            }
             this.#hideInvisibleContent();
         });
         return this;
@@ -89,13 +98,13 @@ class flexIS {
     // Private methods
 
     // Run data request for next page
-    #getData = (page = this.nextPage ) => {
+    #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) return false;
+        if (!page || (this.loading && !forceLoad)) return false;
 
         this.loading = true;
 
@@ -109,13 +118,11 @@ class flexIS {
           this.loading = false;
 
           if (xhr.status === 200) {
-            this.#customResponse(json);
-            this.nextPage = json[this.config.customResponseAttributes.next_page];
-            if (this.config.virtualScroll) {
-                this.elementsLeft = json[this.config.customResponseAttributes.elements_left];
-                this.#virtualScroll().update();
+            this.#customResponse(json, page);
+            if (!this.#virtualScroll().enabled()) {
+                this.nextPage = json[this.config.customResponseAttributes.next_page];
+                if (this.#scrollHitBottom()) this.#getData();
             }
-            if (this.#scrollHitBottom()) this.#getData();
           }
 
           this.targetObject.dispatchEvent(afterLoadEvent);
@@ -141,7 +148,7 @@ class flexIS {
 
     // Container position
     #containerPosition = () => {
-        return this.#scrollTop() + this.#containerSize() + this.config.loadMargin
+        return this.#scrollTop() + this.#containerSize() + this.config.loadMargin;
     }
 
     // Add custom params to request
@@ -160,12 +167,12 @@ class flexIS {
     }
 
     // Response handling
-    #customResponse = (json) => {
+    #customResponse = (json, page) => {
         var customResponse = this.config.customResponse;
         var data = json[this.config.customResponseAttributes.data];
         var div;
 
-        delete json[this.config.customResponseAttributes.data]
+        delete json[this.config.customResponseAttributes.data];
 
         if (data.constructor === Array) {
             data.forEach((el) => {
@@ -173,32 +180,37 @@ class flexIS {
                 if (typeof customResponse === "function") {
                     htmlEl = customResponse(el, json);
                 } else {
-                    htmlEl = el;
+                    let div = document.createElement('div');
+                    div.innerHTML = el;
+                    htmlEl = div.children[0];
                 }
-                this.#appendElementToContainer(htmlEl)
+                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])
+                this.#appendElementToContainer(div.children[0], page);
             }
         }
 
         this.#hideInvisibleContent();
 
+        if (this.#virtualScroll().enabled()) {
+            this.#virtualScroll().destroyBaloon(page);
+        }
+
         if (this.perfectScrollbar) {
             this.perfectScrollbar.update();
         }
     }
 
-    #appendElementToContainer = (el) => {
-        if (this.#virtualScroll().baloon()) {
-            this.targetObject.insertBefore(el, this.#virtualScroll().baloon());
+    #appendElementToContainer = (el, page) => {
+        if (this.#virtualScroll().enabled()) {
+            this.#virtualScroll().insertBeforeBaloon(page, el);
         } else {
             this.targetObject.appendChild(el);
         }
-        this.elementHeight = el.offsetHeight;
     }
 
     // Hide invisible content, when leaving active zone
@@ -222,45 +234,33 @@ class flexIS {
     }
 
     #virtualScroll = () => {
-        // Find baloon
-        var baloon = this.targetObject.getElementsByClassName('fis-baloon')[0];
-
-        // Create new baloon
-        var createBaloon = () => {
-            baloon = document.createElement('div');
-            baloon.className = 'fis-baloon';
-            this.targetObject.appendChild(baloon);
-            return baloon;
-        }
-
-        // Check if baloon exist and return it
-        var baloonAdded = () => {
-            if (baloon) {
-                return baloon;
-            }
-            return false
-        }
-
-        // Update baloon size
-        var updateScroll = () => {
-            var elementHeight = this.config.virtualScrollElementSize || this.elementHeight;
-            if (!baloonAdded()) {
-                baloon = createBaloon();
-            }
-            if (this.elementsLeft > 0) {
-                baloon.style.height = (elementHeight * this.elementsLeft) + 'px';
-            } else {
-                // Remove baloon, if no more elements to load.
-                baloon.remove();
-            }
-        }
-
         return {
-            update: () => {
-                updateScroll()
+            enabled: () => {
+                return ["true", true].includes(this.config.virtualScroll);
             },
-            baloon: () => {
-                return baloonAdded();
+            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();
             }
         }
     }
@@ -287,13 +287,7 @@ class flexIS {
 
     // Check when load next page
     #scrollHitBottom = () => {
-        var hitBottom;
-        if (this.#virtualScroll().baloon()) {
-            hitBottom = this.#containerPosition() > this.#virtualScroll().baloon().offsetTop;
-        } else {
-            hitBottom = this.#scrollHeight() - this.#containerPosition() <= 0;
-        }
-        return hitBottom;
+        return this.#scrollHeight() - this.#containerPosition() <= 0;
     }
 }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: flex_infinite_scroll
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.0
 platform: ruby
 authors:
 - Anton Ignatov
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-21 00:00:00.000000000 Z
+date: 2020-05-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -31,6 +31,11 @@ extensions: []
 extra_rdoc_files: []
 files:
 - lib/flex_infinite_scroll.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:
@@ -55,7 +60,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. Supported
-  features: - Custom response handling. - Virtual scrollbar. - Perfect scrollbar support.
-  - Kaminari support.'
+summary: Infinite scroll for Ruby on Rails applications on pure JavaScript.
 test_files: []