Mirroristas/gun
2
0
Fork 0
mirror of https://github.com/amark/gun.git synced 2025-06-06 22:26:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Martti Malmi 2020-09-18 11:07:56 +03:00
parent 866e8594d6
commit 773d5cba25
4 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
examples/infinite-scroll/InfiniteScrollWindow.js → examples/infinite-scroll/ScrollWindow.js
View File

@ -3,32 +3,35 @@ const DEFAULT_OPTIONS = {
stickTo: 'top', stickTo: 'top',
}; };
class InfiniteScrollWindow { class ScrollWindow {
constructor(gunNode, opts = {}) { constructor(gunNode, opts = {}) {
this.opts = Object.assign(DEFAULT_OPTIONS, opts); this.opts = Object.assign(DEFAULT_OPTIONS, opts);
this.elements = new Map(); this.elements = new Map();
this.node = gunNode; this.node = gunNode;
this.center = this.opts.startAt; this.center = this.opts.startAt;
this.updateListeners(); this.updateSubscriptions();
} }
updateListeners() { updateSubscriptions() {
this.upSubscription && this.upSubscription.off(); this.upSubscription && this.upSubscription.off();
this.downSubscription && this.downSubscription.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) { if (this.center) {
this.node.get({ '.': { '>': this.center, '<': '\uffff' }}).map().on((val, key, a, eve) => { subscribe({ '>': this.center, '<': '\uffff' });
this.upSubscription = eve; subscribe({'<': this.center, '>' : '', '-': true});
this._addElement(key, val);
});
this.node.get({ '.': { '<': this.center, '>' : '', '-': true }}).map().on((val, key, a, eve) => {
this.downSubscription = eve;
this._addElement(key, val);
});
} else { } else {
this.node.get({ '.': { '<': '\uffff', '>': '', '-': this.opts.stickTo === 'top' }}).map().on((val, key, a, eve) => { subscribe({ '<': '\uffff', '>': '', '-': this.opts.stickTo === 'top' });
this.upSubscription = eve;
this._addElement(key, val);
});
} }
} }
@ -46,7 +49,7 @@ class InfiniteScrollWindow {
const newMiddleIndex = Math.max(Math.min(half + n, keys.length - 1), 0); const newMiddleIndex = Math.max(Math.min(half + n, keys.length - 1), 0);
if (this.center !== keys[newMiddleIndex]) { if (this.center !== keys[newMiddleIndex]) {
this.center = keys[newMiddleIndex]; this.center = keys[newMiddleIndex];
this.updateListeners(); this.updateSubscriptions();
} }
return this.center; return this.center;
} }
@ -62,7 +65,7 @@ class InfiniteScrollWindow {
_topOrBottom(top) { _topOrBottom(top) {
this.opts.stickTo = top ? 'top' : 'bottom'; this.opts.stickTo = top ? 'top' : 'bottom';
this.center = null; this.center = null;
this.updateListeners(); this.updateSubscriptions();
} }
top() { top() {

6
examples/infinite-scroll/index.html
View File

@ -5,7 +5,7 @@
<link rel="stylesheet" type="text/css" href="./style.css"> <link rel="stylesheet" type="text/css" href="./style.css">
<script src="/jquery.js"></script> <script src="/jquery.js"></script>
<script src="/gun.js"></script> <script src="/gun.js"></script>
<script src="./InfiniteScrollWindow.js"></script> <script src="./ScrollWindow.js"></script>
</head> </head>
<body> <body>
@ -19,7 +19,9 @@
</div> </div>
</header> </header>
<div id="container" style="padding-top: 0px; padding-bottom: 0px"></div> <div id="top-sentinel" style="padding-top: 0px;"></div>
<div id="container"></div>
<div id="bottom-sentinel" style="padding-top: 0px;"></div>
<button id="bottom">Bottom</button> <button id="bottom">Bottom</button>

2
examples/infinite-scroll/index.js
View File

@ -39,7 +39,7 @@ const render = elements => {
const onChange = debounce(render, 20); 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 = () => { const initList = () => {
for (var n = 0; n < size; n++) { for (var n = 0; n < size; n++) {

2
test/panic/infinite-scroll/index.html
View File

@ -5,7 +5,7 @@
<link rel="stylesheet" type="text/css" href="./style.css"> <link rel="stylesheet" type="text/css" href="./style.css">
<script src="/jquery.js"></script> <script src="/jquery.js"></script>
<script src="/gun.js"></script> <script src="/gun.js"></script>
<script src="./InfiniteScrollWindow.js"></script> <script src="./ScrollWindow.js"></script>
<script src='panic.js'></script> <script src='panic.js'></script>
<script>panic.server(location.origin)</script> <script>panic.server(location.origin)</script>
</head> </head>