diff --git a/examples/infinite-scroll/InfiniteScrollWindow.js b/examples/infinite-scroll/ScrollWindow.js
similarity index 78%
rename from examples/infinite-scroll/InfiniteScrollWindow.js
rename to examples/infinite-scroll/ScrollWindow.js
index 54dc9bee..4db4fda6 100644
--- a/examples/infinite-scroll/InfiniteScrollWindow.js
+++ b/examples/infinite-scroll/ScrollWindow.js
@@ -3,32 +3,35 @@ const DEFAULT_OPTIONS = {
stickTo: 'top',
};
-class InfiniteScrollWindow {
+class ScrollWindow {
constructor(gunNode, opts = {}) {
this.opts = Object.assign(DEFAULT_OPTIONS, opts);
this.elements = new Map();
this.node = gunNode;
this.center = this.opts.startAt;
- this.updateListeners();
+ this.updateSubscriptions();
}
- updateListeners() {
+ updateSubscriptions() {
this.upSubscription && this.upSubscription.off();
this.downSubscription && this.downSubscription.off();
+
+ const subscribe = params => {
+ this.node.get({ '.': params}).map().on((val, key, a, eve) => {
+ if (params['-']) {
+ this.downSubscription = eve;
+ } else {
+ this.upSubscription = eve;
+ }
+ this._addElement(key, val);
+ });
+ };
+
if (this.center) {
- this.node.get({ '.': { '>': this.center, '<': '\uffff' }}).map().on((val, key, a, eve) => {
- this.upSubscription = eve;
- this._addElement(key, val);
- });
- this.node.get({ '.': { '<': this.center, '>' : '', '-': true }}).map().on((val, key, a, eve) => {
- this.downSubscription = eve;
- this._addElement(key, val);
- });
+ subscribe({ '>': this.center, '<': '\uffff' });
+ subscribe({'<': this.center, '>' : '', '-': true});
} else {
- this.node.get({ '.': { '<': '\uffff', '>': '', '-': this.opts.stickTo === 'top' }}).map().on((val, key, a, eve) => {
- this.upSubscription = eve;
- this._addElement(key, val);
- });
+ subscribe({ '<': '\uffff', '>': '', '-': this.opts.stickTo === 'top' });
}
}
@@ -46,7 +49,7 @@ class InfiniteScrollWindow {
const newMiddleIndex = Math.max(Math.min(half + n, keys.length - 1), 0);
if (this.center !== keys[newMiddleIndex]) {
this.center = keys[newMiddleIndex];
- this.updateListeners();
+ this.updateSubscriptions();
}
return this.center;
}
@@ -62,7 +65,7 @@ class InfiniteScrollWindow {
_topOrBottom(top) {
this.opts.stickTo = top ? 'top' : 'bottom';
this.center = null;
- this.updateListeners();
+ this.updateSubscriptions();
}
top() {
diff --git a/examples/infinite-scroll/index.html b/examples/infinite-scroll/index.html
index 0d6d0f49..83ba03f7 100644
--- a/examples/infinite-scroll/index.html
+++ b/examples/infinite-scroll/index.html
@@ -5,7 +5,7 @@
-
+
@@ -19,7 +19,9 @@
-
+
+
+
diff --git a/examples/infinite-scroll/index.js b/examples/infinite-scroll/index.js
index 34904450..b5448572 100644
--- a/examples/infinite-scroll/index.js
+++ b/examples/infinite-scroll/index.js
@@ -39,7 +39,7 @@ const render = elements => {
const onChange = debounce(render, 20);
-const scroller = new InfiniteScrollWindow(gunNode, {size, stickTo: 'top', onChange});
+const scroller = new ScrollWindow(gunNode, {size, stickTo: 'top', onChange});
const initList = () => {
for (var n = 0; n < size; n++) {
diff --git a/test/panic/infinite-scroll/index.html b/test/panic/infinite-scroll/index.html
index b7da61fd..d60afc64 100644
--- a/test/panic/infinite-scroll/index.html
+++ b/test/panic/infinite-scroll/index.html
@@ -5,7 +5,7 @@
-
+