flex_infinite_scroll 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2557a6f5390214ce8246d233d45b74c435935816
-  data.tar.gz: 93605b2012ff14d17244b8daecdc74bf1c605d66
+  metadata.gz: d2fd414bc8323c2bb367697232a7e2e259cfed15
+  data.tar.gz: 1f5f35932d20c2049a2e28734677e41a466338df
 SHA512:
-  metadata.gz: 9c1e4446ee54023638482f0c251b25ebea1e16d32adb13308bd48ba1c1cff6cabed59bb3add68beda0d42f8df782cf7a6a7e14fa5f010660c156546b42757e95
-  data.tar.gz: e7c29fb2c5aa9a8f19d14bd3d707759876f7c684e4fc79965cdd1c62d0a35e7056d7ab7a30c635469f75b49b1b43edc9479c79fab08fe28cdb271158d0cee29a
+  metadata.gz: 78ddf99585b446ec32503783b6a300904dec526a8489e8de03bf1d0aeac1f2291ceb26d84ad452eb23d28c1387c1b5ec3efb64370e366e78312275bf8f825473
+  data.tar.gz: dac2a3773a6f1538873f57d20ec97ad85b98afeef77e2bf8a90c2e5672157a5081f1ee84d4efd552b76dfeec6bf7ea1e3aba68b42a316a3c95d925c56e1155d5

data/vendor/assets/javascript/flex_infinite_scroll.js

@@ -18,7 +18,11 @@
         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'
     }
 */
 
@@ -30,6 +34,7 @@ class flexIS {
         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;
@@ -44,8 +49,18 @@ class flexIS {
                 return eventTarget;
             }
         }
+
+        if (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();
         this.config.eventTarget.addEventListener('scroll', () => {
@@ -57,6 +72,7 @@ class flexIS {
         return this;
     }
 
+    // Reset scroll to specific page
     resetScroll(page) {
         this.targetObject.innerHTML = '';
         this.nextPage =  page || this.config.startPage || 1;
@@ -64,8 +80,15 @@ class flexIS {
         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 ) => {
         var xhr = new XMLHttpRequest();
         var params;
@@ -88,6 +111,10 @@ class flexIS {
           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();
+            }
             if (this.#scrollHitBottom()) this.#getData();
           }
 
@@ -97,18 +124,27 @@ class flexIS {
         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) {
@@ -123,22 +159,49 @@ class flexIS {
         return params;
     }
 
+    // Response handling
     #customResponse = (json) => {
         var customResponse = this.config.customResponse;
+        var data = json[this.config.customResponseAttributes.data];
         var div;
-        if (typeof customResponse === "function") {
-            customResponse(this.targetObject, json);
-        } else {
+
+        delete json[this.config.customResponseAttributes.data]
+
+        if (data.constructor === Array) {
+            data.forEach((el) => {
+                var htmlEl
+                if (typeof customResponse === "function") {
+                    htmlEl = customResponse(el, json);
+                } else {
+                    htmlEl = el;
+                }
+                this.#appendElementToContainer(htmlEl)
+            })
+        } else if (data.constructor === String) {
             div = document.createElement('div');
-            div.innerHTML = json[this.config.customResponseAttributes.data];
+            div.innerHTML = data;
             while (div.children.length > 0) {
-                this.targetObject.appendChild(div.children[0]);
+                this.#appendElementToContainer(div.children[0])
             }
         }
 
         this.#hideInvisibleContent();
+
+        if (this.perfectScrollbar) {
+            this.perfectScrollbar.update();
+        }
+    }
+
+    #appendElementToContainer = (el) => {
+        if (this.#virtualScroll().baloon()) {
+            this.targetObject.insertBefore(el, this.#virtualScroll().baloon());
+        } else {
+            this.targetObject.appendChild(el);
+        }
+        this.elementHeight = el.offsetHeight;
     }
 
+    // Hide invisible content, when leaving active zone
     #hideInvisibleContent = () => {
         var elems = this.targetObject.children;
         for (let i = 0; i < elems.length; i++) {
@@ -146,6 +209,8 @@ class flexIS {
             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';
@@ -156,13 +221,60 @@ 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()
+            },
+            baloon: () => {
+                return baloonAdded();
+            }
+        }
+    }
+
+    // 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) {
@@ -173,8 +285,15 @@ class flexIS {
         return this.config.requestUrl + '?' + encodedString.join('&');
     }
 
+    // Check when load next page
     #scrollHitBottom = () => {
-        return (this.#scrollHeight() - this.#scrollTop()  - this.#containerSize() - this.config.loadMargin <= 0);
+        var hitBottom;
+        if (this.#virtualScroll().baloon()) {
+            hitBottom = this.#containerPosition() > this.#virtualScroll().baloon().offsetTop;
+        } else {
+            hitBottom = this.#scrollHeight() - this.#containerPosition() <= 0;
+        }
+        return hitBottom;
     }
 }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: flex_infinite_scroll
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Anton Ignatov
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-12 00:00:00.000000000 Z
+date: 2020-05-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -55,5 +55,7 @@ rubyforge_project:
 rubygems_version: 2.6.14.3
 signing_key: 
 specification_version: 4
-summary: Infinite scroll for Ruby on Rails applications on pure JavaScript.
+summary: 'Infinite scroll for Ruby on Rails applications on pure JavaScript. Supported
+  features: - Custom response handling. - Virtual scrollbar. - Perfect scrollbar support.
+  - Kaminari support.'
 test_files: []