@html-next/vertical-collection 5.0.1 → 5.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/addon-main.cjs +4 -0
- package/dist/-private/index.js +1 -1
- package/dist/index.js +1 -1
- package/dist/{static-radar-D0EvnYLd.js → static-radar-Bu6d3fDF.js} +34 -152
- package/dist/static-radar-Bu6d3fDF.js.map +1 -0
- package/package.json +2 -2
- package/src/-private/data-view/radar/radar.js +1 -6
- package/src/-private/data-view/skip-list.js +6 -26
- package/src/-private/data-view/utils/scroll-handler.js +13 -65
- package/src/-private/data-view/viewport-container.js +8 -28
- package/src/-private/index.js +0 -2
- package/src/-private/utils/element/estimate-element-height.js +5 -4
- package/dist/static-radar-D0EvnYLd.js.map +0 -1
- package/src/-private/data-view/elements/viewport-container.js +0 -80
- package/src/-private/data-view/utils/supports-passive.js +0 -16
- package/src/-private/utils/element/closest.js +0 -31
package/addon-main.cjs
ADDED
package/dist/-private/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { D as DynamicRadar, S as ScrollHandler, a as StaticRadar, V as ViewportContainer, b as addScrollHandler,
|
|
1
|
+
export { D as DynamicRadar, S as ScrollHandler, a as StaticRadar, V as ViewportContainer, b as addScrollHandler, k as keyForItem, o as objectAt, r as removeScrollHandler } from '../static-radar-Bu6d3fDF.js';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import Component, { setComponentTemplate } from '@ember/component';
|
|
|
6
6
|
import { get, computed } from '@ember/object';
|
|
7
7
|
import { run } from '@ember/runloop';
|
|
8
8
|
import { Token, scheduler } from 'ember-raf-scheduler';
|
|
9
|
-
import { a as StaticRadar, D as DynamicRadar, V as ViewportContainer, o as objectAt, k as keyForItem } from './static-radar-
|
|
9
|
+
import { a as StaticRadar, D as DynamicRadar, V as ViewportContainer, o as objectAt, k as keyForItem } from './static-radar-Bu6d3fDF.js';
|
|
10
10
|
import { precompileTemplate } from '@ember/template-compilation';
|
|
11
11
|
|
|
12
12
|
;
|
|
@@ -3,7 +3,7 @@ import { assert } from '@ember/debug';
|
|
|
3
3
|
import { A } from '@ember/array';
|
|
4
4
|
import { get, set } from '@ember/object';
|
|
5
5
|
import { begin, end, run } from '@ember/runloop';
|
|
6
|
-
import {
|
|
6
|
+
import { Token, scheduler } from 'ember-raf-scheduler';
|
|
7
7
|
import { guidFor } from '@ember/object/internals';
|
|
8
8
|
|
|
9
9
|
function identity(item) {
|
|
@@ -37,29 +37,6 @@ function keyForItem(item, keyPath, index) {
|
|
|
37
37
|
return key;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
const VENDOR_MATCH_FNS = ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'];
|
|
41
|
-
let ELEMENT_MATCH_FN;
|
|
42
|
-
function setElementMatchFn(el) {
|
|
43
|
-
VENDOR_MATCH_FNS.forEach(fn => {
|
|
44
|
-
if (ELEMENT_MATCH_FN === undefined && typeof el[fn] === 'function') {
|
|
45
|
-
ELEMENT_MATCH_FN = fn;
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
function closest(el, selector) {
|
|
50
|
-
if (ELEMENT_MATCH_FN === undefined) {
|
|
51
|
-
setElementMatchFn(el);
|
|
52
|
-
}
|
|
53
|
-
while (el) {
|
|
54
|
-
// TODO add explicit test
|
|
55
|
-
if (el[ELEMENT_MATCH_FN](selector)) {
|
|
56
|
-
return el;
|
|
57
|
-
}
|
|
58
|
-
el = el.parentElement;
|
|
59
|
-
}
|
|
60
|
-
return null;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
40
|
var document$1 = window ? window.document : undefined;
|
|
64
41
|
|
|
65
42
|
let VC_IDENTITY = 0;
|
|
@@ -232,30 +209,13 @@ function isAppend(lenDiff, newItems, key, oldFirstKey, oldLastKey) {
|
|
|
232
209
|
return oldFirstKey === newFirstKey && oldLastKey === newLastKey;
|
|
233
210
|
}
|
|
234
211
|
|
|
235
|
-
let supportsPassive = false;
|
|
236
|
-
try {
|
|
237
|
-
let opts = Object.defineProperty({}, 'passive', {
|
|
238
|
-
get() {
|
|
239
|
-
supportsPassive = true;
|
|
240
|
-
return supportsPassive;
|
|
241
|
-
}
|
|
242
|
-
});
|
|
243
|
-
window.addEventListener('test', null, opts);
|
|
244
|
-
} catch {
|
|
245
|
-
// do nothing
|
|
246
|
-
}
|
|
247
|
-
var SUPPORTS_PASSIVE = supportsPassive;
|
|
248
|
-
|
|
249
212
|
const DEFAULT_ARRAY_SIZE = 10;
|
|
250
|
-
const UNDEFINED_VALUE = Object.create(null);
|
|
251
213
|
class ScrollHandler {
|
|
252
214
|
constructor() {
|
|
253
215
|
this.elements = new Array(DEFAULT_ARRAY_SIZE);
|
|
254
216
|
this.maxLength = DEFAULT_ARRAY_SIZE;
|
|
255
217
|
this.length = 0;
|
|
256
218
|
this.handlers = new Array(DEFAULT_ARRAY_SIZE);
|
|
257
|
-
this.isPolling = false;
|
|
258
|
-
this.isUsingPassive = SUPPORTS_PASSIVE;
|
|
259
219
|
}
|
|
260
220
|
addScrollHandler(element, handler) {
|
|
261
221
|
let index = this.elements.indexOf(element);
|
|
@@ -272,67 +232,42 @@ class ScrollHandler {
|
|
|
272
232
|
cache = this.handlers[index] = {
|
|
273
233
|
top: element.scrollTop,
|
|
274
234
|
left: element.scrollLeft,
|
|
275
|
-
handlers
|
|
276
|
-
|
|
277
|
-
// TODO add explicit test
|
|
278
|
-
if (SUPPORTS_PASSIVE) {
|
|
279
|
-
cache.passiveHandler = function () {
|
|
235
|
+
handlers,
|
|
236
|
+
passiveHandler() {
|
|
280
237
|
ScrollHandler.triggerElementHandlers(element, cache);
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
cache.passiveHandler = UNDEFINED_VALUE;
|
|
284
|
-
}
|
|
238
|
+
}
|
|
239
|
+
};
|
|
285
240
|
} else {
|
|
286
241
|
cache = this.handlers[index];
|
|
287
242
|
handlers = cache.handlers;
|
|
288
243
|
handlers.push(handler);
|
|
289
244
|
}
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
element.addEventListener('scroll', cache.passiveHandler, {
|
|
296
|
-
capture: true,
|
|
297
|
-
passive: true
|
|
298
|
-
});
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
// TODO add explicit test
|
|
302
|
-
} else if (!this.isPolling) {
|
|
303
|
-
this.poll();
|
|
245
|
+
if (handlers.length === 1) {
|
|
246
|
+
element.addEventListener('scroll', cache.passiveHandler, {
|
|
247
|
+
capture: true,
|
|
248
|
+
passive: true
|
|
249
|
+
});
|
|
304
250
|
}
|
|
305
251
|
}
|
|
306
252
|
removeScrollHandler(element, handler) {
|
|
307
253
|
let index = this.elements.indexOf(element);
|
|
308
254
|
let elementCache = this.handlers[index];
|
|
309
|
-
// TODO add explicit test
|
|
310
255
|
if (elementCache && elementCache.handlers) {
|
|
311
256
|
let index = elementCache.handlers.indexOf(handler);
|
|
312
257
|
if (index === -1) {
|
|
313
258
|
throw new Error('Attempted to remove an unknown handler');
|
|
314
259
|
}
|
|
315
260
|
elementCache.handlers.splice(index, 1);
|
|
316
|
-
|
|
317
|
-
// cleanup element entirely if needed
|
|
318
|
-
// TODO add explicit test
|
|
319
261
|
if (!elementCache.handlers.length) {
|
|
320
262
|
index = this.elements.indexOf(element);
|
|
321
263
|
this.handlers.splice(index, 1);
|
|
322
264
|
this.elements.splice(index, 1);
|
|
323
265
|
this.length--;
|
|
324
266
|
this.maxLength--;
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
// TODO add explicit test
|
|
330
|
-
if (this.isUsingPassive) {
|
|
331
|
-
element.removeEventListener('scroll', elementCache.passiveHandler, {
|
|
332
|
-
capture: true,
|
|
333
|
-
passive: true
|
|
334
|
-
});
|
|
335
|
-
}
|
|
267
|
+
element.removeEventListener('scroll', elementCache.passiveHandler, {
|
|
268
|
+
capture: true,
|
|
269
|
+
passive: true
|
|
270
|
+
});
|
|
336
271
|
}
|
|
337
272
|
} else {
|
|
338
273
|
throw new Error('Attempted to remove a handler from an unknown element or an element with no handlers');
|
|
@@ -349,8 +284,6 @@ class ScrollHandler {
|
|
|
349
284
|
top: cachedTop,
|
|
350
285
|
left: cachedLeft
|
|
351
286
|
};
|
|
352
|
-
|
|
353
|
-
// TODO add explicit test
|
|
354
287
|
if (topChanged || leftChanged) {
|
|
355
288
|
begin();
|
|
356
289
|
for (let j = 0; j < meta.handlers.length; j++) {
|
|
@@ -359,25 +292,6 @@ class ScrollHandler {
|
|
|
359
292
|
end();
|
|
360
293
|
}
|
|
361
294
|
}
|
|
362
|
-
poll() {
|
|
363
|
-
this.isPolling = true;
|
|
364
|
-
scheduler.schedule('sync', () => {
|
|
365
|
-
// TODO add explicit test
|
|
366
|
-
if (!this.isPolling) {
|
|
367
|
-
return;
|
|
368
|
-
}
|
|
369
|
-
for (let i = 0; i < this.length; i++) {
|
|
370
|
-
let element = this.elements[i];
|
|
371
|
-
let info = this.handlers[i];
|
|
372
|
-
ScrollHandler.triggerElementHandlers(element, info);
|
|
373
|
-
}
|
|
374
|
-
this.isPolling = this.length > 0;
|
|
375
|
-
// TODO add explicit test
|
|
376
|
-
if (this.isPolling) {
|
|
377
|
-
this.poll();
|
|
378
|
-
}
|
|
379
|
-
});
|
|
380
|
-
}
|
|
381
295
|
}
|
|
382
296
|
const instance = new ScrollHandler();
|
|
383
297
|
function addScrollHandler(element, handler) {
|
|
@@ -388,36 +302,25 @@ function removeScrollHandler(element, handler) {
|
|
|
388
302
|
}
|
|
389
303
|
|
|
390
304
|
/*
|
|
391
|
-
*
|
|
392
|
-
*
|
|
393
|
-
*
|
|
394
|
-
* The only cross-browser listener for scroll on body
|
|
395
|
-
* is to listen on window with capture.
|
|
396
|
-
*
|
|
397
|
-
* They also implement different standards for how to
|
|
398
|
-
* access the scroll position.
|
|
399
|
-
*
|
|
400
|
-
* This singleton class provides a cross-browser way
|
|
401
|
-
* to access and set the scrollTop and scrollLeft properties.
|
|
402
|
-
*
|
|
305
|
+
* This singleton class provides a way to treat the document viewport
|
|
306
|
+
* like a scrollable element, proxying scroll position access and
|
|
307
|
+
* event listeners to the appropriate browser APIs.
|
|
403
308
|
*/
|
|
404
309
|
function ViewportContainer() {
|
|
405
|
-
// A bug occurs in Chrome when we reload the browser at a lower
|
|
406
|
-
// scrollTop, window.scrollY becomes stuck on a single value.
|
|
407
310
|
Object.defineProperty(this, 'scrollTop', {
|
|
408
311
|
get() {
|
|
409
|
-
return
|
|
312
|
+
return window.scrollY;
|
|
410
313
|
},
|
|
411
314
|
set(v) {
|
|
412
|
-
|
|
315
|
+
window.scrollTo(window.scrollX, v);
|
|
413
316
|
}
|
|
414
317
|
});
|
|
415
318
|
Object.defineProperty(this, 'scrollLeft', {
|
|
416
319
|
get() {
|
|
417
|
-
return window.scrollX
|
|
320
|
+
return window.scrollX;
|
|
418
321
|
},
|
|
419
322
|
set(v) {
|
|
420
|
-
window.
|
|
323
|
+
window.scrollTo(v, window.scrollY);
|
|
421
324
|
}
|
|
422
325
|
});
|
|
423
326
|
Object.defineProperty(this, 'offsetHeight', {
|
|
@@ -429,7 +332,7 @@ function ViewportContainer() {
|
|
|
429
332
|
ViewportContainer.prototype.addEventListener = function addEventListener(event, handler, options) {
|
|
430
333
|
return window.addEventListener(event, handler, options);
|
|
431
334
|
};
|
|
432
|
-
ViewportContainer.prototype.removeEventListener = function
|
|
335
|
+
ViewportContainer.prototype.removeEventListener = function removeEventListener(event, handler, options) {
|
|
433
336
|
return window.removeEventListener(event, handler, options);
|
|
434
337
|
};
|
|
435
338
|
ViewportContainer.prototype.getBoundingClientRect = function getBoundingClientRect() {
|
|
@@ -447,10 +350,10 @@ var ViewportContainer$1 = new ViewportContainer();
|
|
|
447
350
|
function estimateElementHeight(element, fallbackHeight) {
|
|
448
351
|
assert(`You called estimateElement height without a fallbackHeight`, fallbackHeight);
|
|
449
352
|
assert(`You called estimateElementHeight without an element`, element);
|
|
450
|
-
if (fallbackHeight.
|
|
353
|
+
if (fallbackHeight.includes('%')) {
|
|
451
354
|
return getPercentageHeight(element, fallbackHeight);
|
|
452
355
|
}
|
|
453
|
-
if (fallbackHeight.
|
|
356
|
+
if (fallbackHeight.includes('em')) {
|
|
454
357
|
return getEmHeight(element, fallbackHeight);
|
|
455
358
|
}
|
|
456
359
|
return parseInt(fallbackHeight, 10);
|
|
@@ -463,7 +366,7 @@ function getPercentageHeight(element, fallbackHeight) {
|
|
|
463
366
|
return percent * parentHeight / 100.0;
|
|
464
367
|
}
|
|
465
368
|
function getEmHeight(element, fallbackHeight) {
|
|
466
|
-
const fontSizeElement = fallbackHeight.
|
|
369
|
+
const fontSizeElement = fallbackHeight.includes('rem') ? document.documentElement : element;
|
|
467
370
|
const fontSize = window.getComputedStyle(fontSizeElement).getPropertyValue('font-size');
|
|
468
371
|
return parseFloat(fallbackHeight) * parseFloat(fontSize);
|
|
469
372
|
}
|
|
@@ -574,10 +477,6 @@ class Radar {
|
|
|
574
477
|
this.virtualComponents = A([this._occludedContentBefore, this._occludedContentAfter]);
|
|
575
478
|
this.orderedComponents = [];
|
|
576
479
|
this._updateVirtualComponents();
|
|
577
|
-
|
|
578
|
-
// In older versions of Ember/IE, binding anything on an object in the template
|
|
579
|
-
// adds observers which creates __ember_meta__
|
|
580
|
-
this.__ember_meta__ = null;
|
|
581
480
|
if (DEBUG) {
|
|
582
481
|
this._debugDidUpdate = null;
|
|
583
482
|
}
|
|
@@ -618,7 +517,7 @@ class Radar {
|
|
|
618
517
|
// Use the occluded content element, which has been inserted into the DOM,
|
|
619
518
|
// to find the item container and the scroll container
|
|
620
519
|
this._itemContainer = _occludedContentBefore.element.parentNode;
|
|
621
|
-
this._scrollContainer = containerSelector === 'body' ? ViewportContainer$1 :
|
|
520
|
+
this._scrollContainer = containerSelector === 'body' ? ViewportContainer$1 : this._itemContainer.closest(containerSelector);
|
|
622
521
|
this._updateConstants();
|
|
623
522
|
|
|
624
523
|
// Setup initial scroll state
|
|
@@ -1157,27 +1056,10 @@ class Radar {
|
|
|
1157
1056
|
* traverse to get the total value before and after the final index.
|
|
1158
1057
|
*/
|
|
1159
1058
|
|
|
1160
|
-
function fill(array, value, start = 0, end = array.length) {
|
|
1161
|
-
if (typeof array.fill === 'function') {
|
|
1162
|
-
array.fill(value, start, end);
|
|
1163
|
-
} else {
|
|
1164
|
-
for (; start < end; start++) {
|
|
1165
|
-
array[start] = value;
|
|
1166
|
-
}
|
|
1167
|
-
return array;
|
|
1168
|
-
}
|
|
1169
|
-
}
|
|
1170
|
-
function subarray(array, start, end) {
|
|
1171
|
-
if (typeof array.subarray === 'function') {
|
|
1172
|
-
return array.subarray(start, end);
|
|
1173
|
-
} else {
|
|
1174
|
-
return array.slice(start, end);
|
|
1175
|
-
}
|
|
1176
|
-
}
|
|
1177
1059
|
class SkipList {
|
|
1178
1060
|
constructor(length, defaultValue) {
|
|
1179
1061
|
const values = new Float32Array(new ArrayBuffer(length * 4));
|
|
1180
|
-
fill(
|
|
1062
|
+
values.fill(defaultValue);
|
|
1181
1063
|
this.length = length;
|
|
1182
1064
|
this.defaultValue = defaultValue;
|
|
1183
1065
|
this._initializeLayers(values, defaultValue);
|
|
@@ -1199,7 +1081,7 @@ class SkipList {
|
|
|
1199
1081
|
// This allows us to use the `fill` method on Typed arrays, which
|
|
1200
1082
|
// an order of magnitude faster than manually calculating each value.
|
|
1201
1083
|
defaultValue = defaultValue * 2;
|
|
1202
|
-
fill(
|
|
1084
|
+
layer.fill(defaultValue);
|
|
1203
1085
|
left = prevLayer[(length - 1) * 2] || 0;
|
|
1204
1086
|
right = prevLayer[(length - 1) * 2 + 1] || 0;
|
|
1205
1087
|
|
|
@@ -1326,7 +1208,7 @@ class SkipList {
|
|
|
1326
1208
|
const newLength = numPrepended + oldLength;
|
|
1327
1209
|
const newValues = new Float32Array(new ArrayBuffer(newLength * 4));
|
|
1328
1210
|
newValues.set(oldValues, numPrepended);
|
|
1329
|
-
fill(
|
|
1211
|
+
newValues.fill(defaultValue, 0, numPrepended);
|
|
1330
1212
|
this.length = newLength;
|
|
1331
1213
|
this._initializeLayers(newValues);
|
|
1332
1214
|
}
|
|
@@ -1339,7 +1221,7 @@ class SkipList {
|
|
|
1339
1221
|
const newLength = numAppended + oldLength;
|
|
1340
1222
|
const newValues = new Float32Array(new ArrayBuffer(newLength * 4));
|
|
1341
1223
|
newValues.set(oldValues);
|
|
1342
|
-
fill(
|
|
1224
|
+
newValues.fill(defaultValue, oldLength);
|
|
1343
1225
|
this.length = newLength;
|
|
1344
1226
|
this._initializeLayers(newValues);
|
|
1345
1227
|
}
|
|
@@ -1355,9 +1237,9 @@ class SkipList {
|
|
|
1355
1237
|
const newValues = new Float32Array(new ArrayBuffer(newLength * 4));
|
|
1356
1238
|
if (oldLength < newLength) {
|
|
1357
1239
|
newValues.set(oldValues);
|
|
1358
|
-
fill(
|
|
1240
|
+
newValues.fill(defaultValue, oldLength);
|
|
1359
1241
|
} else {
|
|
1360
|
-
newValues.set(subarray(
|
|
1242
|
+
newValues.set(oldValues.subarray(0, newLength));
|
|
1361
1243
|
}
|
|
1362
1244
|
this.length = newLength;
|
|
1363
1245
|
if (oldLength === 0) {
|
|
@@ -1672,5 +1554,5 @@ class StaticRadar extends Radar {
|
|
|
1672
1554
|
}
|
|
1673
1555
|
}
|
|
1674
1556
|
|
|
1675
|
-
export { DynamicRadar as D, ScrollHandler as S, ViewportContainer$1 as V, StaticRadar as a, addScrollHandler as b,
|
|
1676
|
-
//# sourceMappingURL=static-radar-
|
|
1557
|
+
export { DynamicRadar as D, ScrollHandler as S, ViewportContainer$1 as V, StaticRadar as a, addScrollHandler as b, keyForItem as k, objectAt as o, removeScrollHandler as r };
|
|
1558
|
+
//# sourceMappingURL=static-radar-Bu6d3fDF.js.map
|