From cf2c56c7061b7ed40fdd3b40a352ddb9c9b7371f Mon Sep 17 00:00:00 2001
From: alexwl <alexey.a.kiryushin@gmail.com>
Date: Tue, 2 Oct 2018 13:17:04 +0300
Subject: Initial commit

---
 javascript/app/components/infinite-list.js | 50 ++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 javascript/app/components/infinite-list.js

(limited to 'javascript/app/components/infinite-list.js')

diff --git a/javascript/app/components/infinite-list.js b/javascript/app/components/infinite-list.js
new file mode 100644
index 0000000..b73b6d4
--- /dev/null
+++ b/javascript/app/components/infinite-list.js
@@ -0,0 +1,50 @@
+import Component from '@ember/component';
+import { run } from '@ember/runloop';
+import { observer } from '@ember/object';
+
+let pageNumber;
+let updating = false;
+
+function initialize(component) {
+  component.set('renderedElements',component.get('elements').slice(0,component.get('perPage')));
+  pageNumber = 1;
+}
+
+export default Component.extend({  
+  renderedElements : [],
+  init() {
+    this._super(...arguments);
+    initialize(this);
+  },
+  elementsObserver : observer('elements',function() {    
+    initialize(this);
+    const containerElement = document.getElementById(this.get('containerElementId'));
+    if(containerElement) { 
+      containerElement.scrollTop = 0;
+    }
+  }),
+  didInsertElement() {
+    const containerElement = document.getElementById(this.get('containerElementId'));
+    if(containerElement) {
+      const component = this;                       
+      containerElement.onscroll = function() {
+        const perPage = component.get('perPage');
+        const elements = component.get('elements');
+        
+        if(!updating &&
+           (pageNumber * perPage < elements.length) &&
+           (containerElement.scrollTop + containerElement.offsetHeight
+            > component.element.offsetHeight - 100)) {
+          
+          updating = true;
+          run.next(component,() => {                        
+            const newElements = elements.slice(pageNumber * perPage,(pageNumber + 1) * perPage);
+            component.get('renderedElements').pushObjects(newElements);
+            pageNumber ++;
+            updating = false;
+          });
+        }
+      }
+    }
+  }
+});
-- 
cgit v1.2.3