forked from SitePen/dgrid
-
Notifications
You must be signed in to change notification settings - Fork 0
/
OnDemandList.js
377 lines (353 loc) · 14.8 KB
/
OnDemandList.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
define(["./List", "./_StoreMixin", "dojo/_base/declare", "dojo/_base/lang", "dojo/_base/Deferred", "dojo/on", "./util/misc", "put-selector/put"],
function(List, _StoreMixin, declare, lang, Deferred, listen, miscUtil, put){
return declare([List, _StoreMixin], {
// minRowsPerPage: Integer
// The minimum number of rows to request at one time.
minRowsPerPage: 25,
// maxRowsPerPage: Integer
// The maximum number of rows to request at one time.
maxRowsPerPage: 100,
// maxEmptySpace: Integer
// Defines the maximum size (in pixels) of unrendered space below the
// currently-rendered rows.
maxEmptySpace: 10000,
// farOffRemoval: Integer
// Defines the minimum distance (in pixels) from the visible viewport area
// rows must be in order to be removed. Setting to Infinity causes rows
// to never be removed.
farOffRemoval: 1000,
rowHeight: 22,
// queryRowsOverlap: Integer
// Indicates the number of rows to overlap queries. This helps keep
// continuous data when underlying data changes (and thus pages don't
// exactly align)
queryRowsOverlap: 1,
// pagingDelay: Integer
// Indicates the delay (in milliseconds) to wait before paging in more data
// on scroll. This can be increased for low-bandwidth clients, or to
// reduce the number of requests against a server
pagingDelay: miscUtil.defaultDelay,
postCreate: function(){
this.inherited(arguments);
var self = this;
// check visibility on scroll events
listen(this.bodyNode, "scroll",
miscUtil.throttleDelayed(function(event){ self._processScroll(event); },
null, this.pagingDelay));
},
renderQuery: function(query, preloadNode){
// summary:
// Creates a preload node for rendering a query into, and executes the query
// for the first page of data. Subsequent data will be downloaded as it comes
// into view.
var preload = {
query: query,
count: 0,
node: preloadNode
};
if(!preloadNode){
var rootQuery = true;
var topPreload = {
node: put(this.contentNode, "div.dgrid-preload", {
rowIndex: 0
}),
//topPreloadNode.preload = true;
query: query,
count: 0,
next: preload
};
preload.node = preloadNode = put(this.contentNode, "div.dgrid-preload");
preload.previous = topPreload;
}
// this preload node is used to represent the area of the grid that hasn't been
// downloaded yet
preloadNode.rowIndex = this.minRowsPerPage;
var priorPreload = this.preload;
if(priorPreload){
// the preload nodes (if there are multiple) are represented as a linked list, need to insert it
if((preload.next = priorPreload.next) &&
// check to make sure that the current scroll position is below this preload
this.bodyNode.scrollTop >= priorPreload.node.offsetTop){
// the prior preload is above/before in the linked list
preload.previous = priorPreload;
}else{
// the prior preload is below/after in the linked list
preload.next = priorPreload;
preload.previous = priorPreload.previous;
}
// adjust the previous and next links so the linked list is proper
preload.previous.next = preload;
preload.next.previous = preload;
}else{
this.preload = preload;
}
var loadingNode = put(preloadNode, "-div.dgrid-loading");
put(loadingNode, "div.dgrid-below", this.loadingMessage);
// Establish query options, mixing in our own.
// (The getter returns a delegated object, so simply using mixin is safe.)
var options = lang.mixin(this.get("queryOptions"),
{start: 0, count: this.minRowsPerPage, query: query});
// execute the query
var results = query(options);
var self = this;
// render the result set
Deferred.when(this.renderArray(results, preloadNode, options), function(trs){
return Deferred.when(results.total || results.length, function(total){
// remove loading node
put(loadingNode, "!");
// now we need to adjust the height and total count based on the first result set
var trCount = trs.length;
total = total || trCount;
if(!total){
put(self.contentNode, "div.dgrid-no-data").innerHTML = self.noDataMessage;
}
var height = 0;
for(var i = 0; i < trCount; i++){
height += trs[i].offsetHeight;
}
// only update rowHeight if we actually got results and are visible
if(trCount && height){ self.rowHeight = height / trCount; }
total -= trCount;
preload.count = total;
preloadNode.rowIndex = trCount;
if(total){
preloadNode.style.height = Math.min(total * self.rowHeight, self.maxEmptySpace) + "px";
}else{
// if total is 0, IE quirks mode can't handle 0px height for some reason, I don't know why, but we are setting display: none for now
preloadNode.style.display = "none";
}
self._processScroll(); // recheck the scroll position in case the query didn't fill the screen
// can remove the loading node now
return trs;
});
});
// return results so that callers can handle potential of async error
return results;
},
refresh: function(){
this.inherited(arguments);
if(this.store){
// render the query
var self = this;
this._trackError(function(){
return self.renderQuery(function(queryOptions){
return self.store.query(self.query, queryOptions);
});
});
}
},
_calcRowHeight: function(rowElement){
// summary:
// Calculate the height of a row. This is a method so it can be overriden for
// plugins that add connected elements to a row, like the tree
return rowElement.offsetHeight;
},
lastScrollTop: 0,
_processScroll: function(){
// summary:
// Checks to make sure that everything in the viewable area has been
// downloaded, and triggering a request for the necessary data when needed.
var grid = this,
scrollNode = grid.bodyNode,
transform = grid.contentNode.style.webkitTransform,
visibleTop = scrollNode.scrollTop + (transform ? -transform.match(/translate[\w]*\(.*?,(.*?)px/)[1] : 0),
visibleBottom = scrollNode.offsetHeight + visibleTop,
priorPreload, preloadNode, preload = grid.preload,
lastScrollTop = grid.lastScrollTop;
// XXX: I do not know why this happens.
// munging the actual location of the viewport relative to the preload node by a few pixels in either
// direction is necessary because at least WebKit on Windows seems to have an error that causes it to
// not quite get the entire element being focused in the viewport during keyboard navigation,
// which means it becomes impossible to load more data using keyboard navigation because there is
// no more data to scroll to to trigger the fetch.
// 1 is arbitrary and just gets it to work correctly with our current test cases; don’t wanna go
// crazy and set it to a big number without understanding more about what is going on.
// wondering if it has to do with border-box or something, but changing the border widths does not
// seem to make it break more or less, so I do not know…
var mungeAmount = 1;
grid.lastScrollTop = visibleTop;
function removeDistantNodes(preload, distanceOff, traversal, below){
// we check to see the the nodes are "far off"
var farOffRemoval = grid.farOffRemoval,
preloadNode = preload.node;
// by checking to see if it is the farOffRemoval distance away
if(distanceOff > 2 * farOffRemoval){
// ok, there is preloadNode that is far off, let's remove rows until we get to in the current viewpoint
var row, nextRow = preloadNode[traversal];
var reclaimedHeight = 0;
var count = 0;
var toDelete = [];
while((row = nextRow)){
var rowHeight = grid._calcRowHeight(row);
if(reclaimedHeight + rowHeight + farOffRemoval > distanceOff || nextRow.className.indexOf("dgrid-row") < 0){
// we have reclaimed enough rows or we have gone beyond grid rows, let's call it good
break;
}
var nextRow = row[traversal]; // have to do this before removing it
var lastObserverIndex, currentObserverIndex = row.observerIndex;
if(currentObserverIndex != lastObserverIndex && lastObserverIndex > -1){
// we have gathered a whole page of observed rows, we can delete them now
var observers = grid.observers;
var observer = observers[lastObserverIndex];
observer && observer.cancel();
observers[lastObserverIndex] = 0; // remove it so we don't call cancel twice
}
reclaimedHeight += rowHeight;
count++;
lastObserverIndex = currentObserverIndex;
// we just do cleanup here, as we will do a more efficient node destruction in the setTimeout below
grid.removeRow(row, true);
delete grid._rowIdToObject[row.id]; // clear out of the lookup
toDelete.push(row);
}
// now adjust the preloadNode based on the reclaimed space
preload.count += count;
if(below){
preloadNode.rowIndex -= count;
adjustHeight(preload);
}else{
// if it is above, we can calculate the change in exact row changes, which we must do to not mess with the scrolling
preloadNode.style.height = (preloadNode.offsetHeight + reclaimedHeight) + "px";
}
// we remove the elements after expanding the preload node so that the contraction doesn't alter the scroll position
var trashBin = put("div");
for(var i = 0; i < toDelete.length; i++){
put(trashBin, toDelete[i]); // remove it from the DOM
}
setTimeout(function(){
// we can defer the destruction until later
put(trashBin, "!");
},1);
}
}
function adjustHeight(preload){
var newHeight = preload.count * grid.rowHeight;
preload.node.style.height = (preload.node.rowIndex > 0 ? Math.min(newHeight, grid.maxEmptySpace) : newHeight) + "px";
}
// there can be multiple preloadNodes (if they split, or multiple queries are created),
// so we can traverse them until we find whatever is in the current viewport, making
// sure we don't backtrack
while(preload && preload != priorPreload){
priorPreload = grid.preload;
grid.preload = preload;
preloadNode = preload.node;
var preloadTop = preloadNode.offsetTop;
var preloadHeight;
if(visibleBottom + mungeAmount < preloadTop){
// the preload is below the line of sight
do{
preload = preload.previous;
}while(preload && !preload.node.offsetWidth); // skip past preloads that are not currently connected
}else if(visibleTop - mungeAmount > (preloadTop + (preloadHeight = preloadNode.offsetHeight))){
// the preload is above the line of sight
do{
preload = preload.next;
}while(preload && !preload.node.offsetWidth);// skip past preloads that are not currently connected
}else{
// the preload node is visible, or close to visible, better show it
var offset = ((preloadNode.rowIndex ? visibleTop : visibleBottom) - preloadTop) / grid.rowHeight;
var count = (visibleBottom - visibleTop) / grid.rowHeight;
// utilize momentum for predictions
var momentum = Math.max(Math.min((visibleTop - lastScrollTop) * grid.rowHeight, grid.maxRowsPerPage/2), grid.maxRowsPerPage/-2);
count += Math.min(Math.abs(momentum), 10);
if(preloadNode.rowIndex == 0){
// at the top, adjust from bottom to top
offset -= count;
}
offset = Math.max(offset, 0);
if(offset < 10 && offset > 0 && count + offset < grid.maxRowsPerPage){
// connect to the top of the preloadNode if possible to avoid excessive adjustments
count += offset;
offset = 0;
}
count = Math.min(Math.max(count, grid.minRowsPerPage),
grid.maxRowsPerPage, preload.count);
if(count == 0){
return;
}
offset = Math.round(offset);
count = Math.round(count);
var options = grid.get("queryOptions");
preload.count -= count;
var beforeNode = preloadNode,
keepScrollTo, queryRowsOverlap = grid.queryRowsOverlap,
below = preloadNode.rowIndex > 0 && preload;
if(below){
// add new rows below
var previous = preload.previous;
if(previous){
removeDistantNodes(previous, visibleTop - (previous.node.offsetTop + previous.node.offsetHeight), 'nextSibling');
if(offset > 0 && previous.node == preloadNode.previousSibling){
// all of the nodes above were removed
offset = Math.min(preload.count, offset);
preload.previous.count += offset;
adjustHeight(preload.previous);
preload.count -= offset;
preloadNode.rowIndex += offset;
queryRowsOverlap = 0;
}
}
options.start = preloadNode.rowIndex - queryRowsOverlap;
preloadNode.rowIndex += count;
}else{
// add new rows above
if(preload.next){
// remove out of sight nodes first
removeDistantNodes(preload.next, preload.next.node.offsetTop - visibleBottom, 'previousSibling', true);
var beforeNode = preloadNode.nextSibling;
if(beforeNode == preload.next.node){
// all of the nodes were removed, can position wherever we want
preload.next.count += preload.count - offset;
preload.next.node.rowIndex = offset + count;
preload.count = offset;
queryRowsOverlap = 0;
}else{
keepScrollTo = true;
}
}
options.start = preload.count;
}
options.count = count + queryRowsOverlap;
if(keepScrollTo){
keepScrollTo = beforeNode.offsetTop;
}
adjustHeight(preload);
// create a loading node as a placeholder while the data is loaded
var loadingNode = put(beforeNode, "-div.dgrid-loading[style=height:" + count * grid.rowHeight + "px]");
put(loadingNode, "div.dgrid-" + (below ? "below" : "above"), grid.loadingMessage);
// use the query associated with the preload node to get the next "page"
options.query = preload.query;
// Query now to fill in these rows.
// Keep _trackError-wrapped results separate, since if results is a
// promise, it will lose QueryResults functions when chained by `when`
var results = preload.query(options),
trackedResults = grid._trackError(function(){ return results; });
if(trackedResults === undefined){ return; } // sync query failed
Deferred.when(grid.renderArray(results, loadingNode, options), function(){
// can remove the loading node now
beforeNode = loadingNode.nextSibling;
put(loadingNode, "!");
if(keepScrollTo){
// if the preload area above the nodes is approximated based on average
// row height, we may need to adjust the scroll once they are filled in
// so we don't "jump" in the scrolling position
scrollNode.scrollTop += beforeNode.offsetTop - keepScrollTo;
}
if(below){
// if it is below, we will use the total from the results to update
// the count in case the total changes as later pages are retrieved
// (not uncommon when total counts are estimated for db perf reasons)
Deferred.when(results.total || results.length, function(total){
// recalculate the count
below.count = total - below.node.rowIndex;
// readjust the height
adjustHeight(below);
});
}
});
preload = preload.previous;
}
}
}
});
});