flex_infinite_scroll 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0b2a488c4c9a4e8d1c412c49188eb0a5b386e6ab
-  data.tar.gz: b2e285288ffaba7bd0b3c0e82d1ee74a1f38bdac
+  metadata.gz: 2557a6f5390214ce8246d233d45b74c435935816
+  data.tar.gz: 93605b2012ff14d17244b8daecdc74bf1c605d66
 SHA512:
-  metadata.gz: 66f797500898467fb03d9602f69756962dee609f10673a8efd925dd36893c37e586fa3d0c7db8956ee25ad98793d79160662cf12728df563e7609fa3d36fa1c4
-  data.tar.gz: 4df833cc66d11917c625d88cc2caade11fcee8863d61b8a8f5639eefebf42331018760a3dfbe548ec07fe2f328e16e40dc87a4a14b246366bca16e472cb4b271
+  metadata.gz: 9c1e4446ee54023638482f0c251b25ebea1e16d32adb13308bd48ba1c1cff6cabed59bb3add68beda0d42f8df782cf7a6a7e14fa5f010660c156546b42757e95
+  data.tar.gz: e7c29fb2c5aa9a8f19d14bd3d707759876f7c684e4fc79965cdd1c62d0a35e7056d7ab7a30c635469f75b49b1b43edc9479c79fab08fe28cdb271158d0cee29a

data/vendor/assets/javascript/flex_infinite_scroll.js

@@ -1,5 +1,27 @@
 // Flex Infinite Scroll initialization
 
+/*
+    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'
+        }
+    }
+*/
+
 'use strict';
 
 class flexIS {
@@ -12,13 +34,14 @@ class flexIS {
         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 (object.config.windowScroll) {
-                return window
+                return window;
             } else {
-                return eventTarget
+                return eventTarget;
             }
         }
     }
@@ -29,6 +52,7 @@ class flexIS {
         	if (this.#scrollHitBottom() && this.nextPage) {
                 this.#getData();
         	};
+            this.#hideInvisibleContent();
         });
         return this;
     }
@@ -54,7 +78,7 @@ class flexIS {
 
         params = this.#customParams({page: parseInt(page, 10)});
 
-        this.targetObject.dispatchEvent(beforeLoadEvent)
+        this.targetObject.dispatchEvent(beforeLoadEvent);
         xhr.open('GET', this.#requestUrl(params));
         xhr.onload = () => {
           var json = JSON.parse(xhr.response);
@@ -62,12 +86,12 @@ class flexIS {
           this.loading = false;
 
           if (xhr.status === 200) {
-            this.#customResponse(json)
-            this.nextPage = json.next_page;
+            this.#customResponse(json);
+            this.nextPage = json[this.config.customResponseAttributes.next_page];
             if (this.#scrollHitBottom()) this.#getData();
           }
 
-          this.targetObject.dispatchEvent(afterLoadEvent)
+          this.targetObject.dispatchEvent(afterLoadEvent);
 
         }
         xhr.send();
@@ -78,7 +102,7 @@ class flexIS {
     }
 
     #scrollTop = () => {
-        return this.config.eventTarget.scrollTop || this.config.eventTarget.scrollY;
+        return this.config.eventTarget.scrollTop || this.config.eventTarget.scrollY || 0;
     }
 
     #containerSize = () => {
@@ -106,12 +130,37 @@ class flexIS {
             customResponse(this.targetObject, json);
         } else {
             div = document.createElement('div');
-            div.innerHTML = json.data;
+            div.innerHTML = json[this.config.customResponseAttributes.data];
             while (div.children.length > 0) {
                 this.targetObject.appendChild(div.children[0]);
             }
         }
 
+        this.#hideInvisibleContent();
+    }
+
+    #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 (elementTopPosition <= 0 || elementBottomPosition >= 0) {
+                if (elem.style.visibility === 'hidden') continue;
+                elem.style.visibility = 'hidden';
+            } else {
+                if (elem.style.visibility === '') continue;
+                elem.style.visibility = '';
+            }
+        }
+    }
+
+    #customResponseAttributesSet = () => {
+        var attr = this.config.customResponseAttributes || {};
+        attr.next_page = attr.next_page || 'next_page';
+        attr.data = attr.data || 'data';
+        this.config.customResponseAttributes = attr
     }
 
     #requestUrl = (params) => {
@@ -134,7 +183,7 @@ document.addEventListener('DOMContentLoaded', () => {
     fisObjects.forEach(object => {
         object.data = {
             flexIS: new flexIS(object).init()
-        }
+        };
     })
 })
 
@@ -143,6 +192,6 @@ document.addEventListener('turbolinks:load', () => {
     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.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Anton Ignatov
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-06 00:00:00.000000000 Z
+date: 2020-05-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails