Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular-infinite-list

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-infinite-list - npm Package Compare versions

Comparing version 0.3.7 to 0.5.1

1105

bundles/angular-infinite-list.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/Subject'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/Subject', '@angular/common'], factory) :
(factory((global['angular-infinite-list'] = {}),global.ng.core,global.Rx,global.ng.common));
}(this, (function (exports,core,Subject,common) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs', '@angular/common'], factory) :
(global = global || self, factory(global['angular-infinite-list'] = {}, global.core, global.rxjs, global.common));
}(this, (function (exports, core, rxjs, common) { 'use strict';
var ILEvent = (function () {
function ILEvent() {
this.offset = 0;
this.start = 0;
this.stop = 0;
}
ILEvent.prototype.getStyle = function (index) { };
return ILEvent;
}());
var ILEvent = (function () {
function ILEvent() {
this.offset = 0;
this.start = 0;
this.stop = 0;
}
ILEvent.prototype.getStyle = function (index) { };
return ILEvent;
}());
var ALIGN_AUTO = 'auto';
var ALIGN_START = 'start';
var ALIGN_CENTER = 'center';
var ALIGN_END = 'end';
var DIRECTION_VERTICAL = 'vertical';
var DIRECTION_HORIZONTAL = 'horizontal';
var SCROLL_CHANGE_OBSERVED = 'observed';
var SCROLL_CHANGE_REQUESTED = 'requested';
var scrollProp = (_a = {},
_a[DIRECTION_VERTICAL] = 'scrollTop',
_a[DIRECTION_HORIZONTAL] = 'scrollLeft',
_a);
var sizeProp = (_b = {},
_b[DIRECTION_VERTICAL] = 'height',
_b[DIRECTION_HORIZONTAL] = 'width',
_b);
var positionProp = (_c = {},
_c[DIRECTION_VERTICAL] = 'top',
_c[DIRECTION_HORIZONTAL] = 'left',
_c);
var _a;
var _b;
var _c;
var ALIGN_AUTO = 'auto';
var ALIGN_START = 'start';
var ALIGN_CENTER = 'center';
var ALIGN_END = 'end';
var DIRECTION_VERTICAL = 'vertical';
var DIRECTION_HORIZONTAL = 'horizontal';
var SCROLL_CHANGE_OBSERVED = 'observed';
var SCROLL_CHANGE_REQUESTED = 'requested';
var scrollProp = (_a = {},
_a[DIRECTION_VERTICAL] = 'scrollTop',
_a[DIRECTION_HORIZONTAL] = 'scrollLeft',
_a);
var sizeProp = (_b = {},
_b[DIRECTION_VERTICAL] = 'height',
_b[DIRECTION_HORIZONTAL] = 'width',
_b);
var positionProp = (_c = {},
_c[DIRECTION_VERTICAL] = 'top',
_c[DIRECTION_HORIZONTAL] = 'left',
_c);
var _a, _b, _c;
/* Forked from react-virtualized 💖 */
var SizeAndPositionManager = (function () {
function SizeAndPositionManager(_a) {
var itemCount = _a.itemCount, itemSizeGetter = _a.itemSizeGetter, estimatedItemSize = _a.estimatedItemSize;
this.itemSizeGetter = itemSizeGetter;
this.itemCount = itemCount;
this.estimatedItemSize = estimatedItemSize;
// Cache of size and position data for items, mapped by item index.
this.itemSizeAndPositionData = {};
// Measurements for items up to this index can be trusted; items afterward should be estimated.
this.lastMeasuredIndex = -1;
}
SizeAndPositionManager.prototype.updateConfig = function (_a) {
var itemCount = _a.itemCount, estimatedItemSize = _a.estimatedItemSize;
this.itemCount = itemCount;
this.estimatedItemSize = estimatedItemSize;
};
SizeAndPositionManager.prototype.getLastMeasuredIndex = function () {
return this.lastMeasuredIndex;
};
SizeAndPositionManager.prototype.destroy = function () {
for (var key in this.itemSizeAndPositionData) {
delete this.itemSizeAndPositionData[key];
/* Forked from react-virtualized 💖 */
var SizeAndPositionManager = (function () {
function SizeAndPositionManager(_a) {
var itemCount = _a.itemCount, itemSizeGetter = _a.itemSizeGetter, estimatedItemSize = _a.estimatedItemSize;
this.itemSizeGetter = itemSizeGetter;
this.itemCount = itemCount;
this.estimatedItemSize = estimatedItemSize;
// Cache of size and position data for items, mapped by item index.
this.itemSizeAndPositionData = {};
// Measurements for items up to this index can be trusted; items afterward should be estimated.
this.lastMeasuredIndex = -1;
}
};
/**
* This method returns the size and position for the item at the specified index.
* It just-in-time calculates (or used cached values) for items leading up to the index.
*/
SizeAndPositionManager.prototype.getSizeAndPositionForIndex = function (index) {
if (index < 0 || index >= this.itemCount) {
throw Error("Requested index " + index + " is outside of range 0.." + this.itemCount);
}
if (index > this.lastMeasuredIndex) {
SizeAndPositionManager.prototype.updateConfig = function (_a) {
var itemCount = _a.itemCount, estimatedItemSize = _a.estimatedItemSize;
this.itemCount = itemCount;
this.estimatedItemSize = estimatedItemSize;
};
SizeAndPositionManager.prototype.getLastMeasuredIndex = function () {
return this.lastMeasuredIndex;
};
SizeAndPositionManager.prototype.destroy = function () {
for (var key in this.itemSizeAndPositionData) {
delete this.itemSizeAndPositionData[key];
}
};
/**
* This method returns the size and position for the item at the specified index.
* It just-in-time calculates (or used cached values) for items leading up to the index.
*/
SizeAndPositionManager.prototype.getSizeAndPositionForIndex = function (index) {
if (index < 0 || index >= this.itemCount) {
throw Error("Requested index " + index + " is outside of range 0.." + this.itemCount);
}
if (index > this.lastMeasuredIndex) {
var lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
var offset = lastMeasuredSizeAndPosition.offset +
lastMeasuredSizeAndPosition.size;
for (var i = this.lastMeasuredIndex + 1; i <= index; i++) {
var size = this.itemSizeGetter(i);
if (size == null || isNaN(size)) {
throw Error("Invalid size returned for index " + i + " of value " + size);
}
this.itemSizeAndPositionData[i] = {
offset: offset,
size: size,
};
offset += size;
}
this.lastMeasuredIndex = index;
}
return this.itemSizeAndPositionData[index];
};
SizeAndPositionManager.prototype.getSizeAndPositionOfLastMeasuredItem = function () {
return this.lastMeasuredIndex >= 0
? this.itemSizeAndPositionData[this.lastMeasuredIndex]
: { offset: 0, size: 0 };
};
/**
* Total size of all items being measured.
* This value will be completedly estimated initially.
* As items as measured the estimate will be updated.
*/
SizeAndPositionManager.prototype.getTotalSize = function () {
var lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
var offset = lastMeasuredSizeAndPosition.offset +
lastMeasuredSizeAndPosition.size;
for (var i = this.lastMeasuredIndex + 1; i <= index; i++) {
var size = this.itemSizeGetter(i);
if (size == null || isNaN(size)) {
throw Error("Invalid size returned for index " + i + " of value " + size);
}
this.itemSizeAndPositionData[i] = {
return lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size + (this.itemCount - this.lastMeasuredIndex - 1) * this.estimatedItemSize;
};
/**
* Determines a new offset that ensures a certain item is visible, given the alignment.
*
* @param align Desired alignment within container; one of "start" (default), "center", or "end"
* @param containerSize Size (width or height) of the container viewport
* @return Offset to use to ensure the specified item is visible
*/
SizeAndPositionManager.prototype.getUpdatedOffsetForIndex = function (_a) {
var _b = _a.align, align = _b === void 0 ? ALIGN_START : _b, containerSize = _a.containerSize, currentOffset = _a.currentOffset, targetIndex = _a.targetIndex;
if (containerSize <= 0) {
return 0;
}
var datum = this.getSizeAndPositionForIndex(targetIndex);
var maxOffset = datum.offset;
var minOffset = maxOffset - containerSize + datum.size;
var idealOffset;
switch (align) {
case ALIGN_END:
idealOffset = minOffset;
break;
case ALIGN_CENTER:
idealOffset = maxOffset - (containerSize - datum.size) / 2;
break;
case ALIGN_START:
idealOffset = maxOffset;
break;
default:
idealOffset = Math.max(minOffset, Math.min(maxOffset, currentOffset));
}
var totalSize = this.getTotalSize();
return Math.max(0, Math.min(totalSize - containerSize, idealOffset));
};
SizeAndPositionManager.prototype.getVisibleRange = function (_a) {
var containerSize = _a.containerSize, offset = _a.offset, overscanCount = _a.overscanCount;
var totalSize = this.getTotalSize();
if (totalSize === 0) {
return {};
}
var maxOffset = offset + containerSize;
var start = this.findNearestItem(offset);
if (typeof start === 'undefined') {
throw Error("Invalid offset " + offset + " specified");
}
var datum = this.getSizeAndPositionForIndex(start);
offset = datum.offset + datum.size;
var stop = start;
while (offset < maxOffset && stop < this.itemCount - 1) {
stop++;
offset += this.getSizeAndPositionForIndex(stop).size;
}
if (overscanCount) {
start = Math.max(0, start - overscanCount);
stop = Math.min(stop + overscanCount, this.itemCount - 1);
}
return {
start: start,
stop: stop,
};
};
/**
* Clear all cached values for items after the specified index.
* This method should be called for any item that has changed its size.
* It will not immediately perform any calculations; they'll be performed the next time getSizeAndPositionForIndex() is called.
*/
SizeAndPositionManager.prototype.resetItem = function (index) {
this.lastMeasuredIndex = Math.min(this.lastMeasuredIndex, index - 1);
};
/**
* Searches for the item (index) nearest the specified offset.
*
* If no exact match is found the next lowest item index will be returned.
* This allows partially visible items (with offsets just before/above the fold) to be visible.
*/
SizeAndPositionManager.prototype.findNearestItem = function (offset) {
if (isNaN(offset)) {
throw Error("Invalid offset " + offset + " specified");
}
// Our search algorithms find the nearest match at or below the specified offset.
// So make sure the offset is at least 0 or no match will be found.
offset = Math.max(0, offset);
var lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
var lastMeasuredIndex = Math.max(0, this.lastMeasuredIndex);
if (lastMeasuredSizeAndPosition.offset >= offset) {
// If we've already measured items within this range just use a binary search as it's faster.
return this.binarySearch({
high: lastMeasuredIndex,
low: 0,
offset: offset,
size: size,
};
offset += size;
});
}
this.lastMeasuredIndex = index;
}
return this.itemSizeAndPositionData[index];
};
SizeAndPositionManager.prototype.getSizeAndPositionOfLastMeasuredItem = function () {
return this.lastMeasuredIndex >= 0
? this.itemSizeAndPositionData[this.lastMeasuredIndex]
: { offset: 0, size: 0 };
};
/**
* Total size of all items being measured.
* This value will be completedly estimated initially.
* As items as measured the estimate will be updated.
*/
SizeAndPositionManager.prototype.getTotalSize = function () {
var lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
return lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size + (this.itemCount - this.lastMeasuredIndex - 1) * this.estimatedItemSize;
};
/**
* Determines a new offset that ensures a certain item is visible, given the alignment.
*
* @param align Desired alignment within container; one of "start" (default), "center", or "end"
* @param containerSize Size (width or height) of the container viewport
* @return Offset to use to ensure the specified item is visible
*/
SizeAndPositionManager.prototype.getUpdatedOffsetForIndex = function (_a) {
var _b = _a.align, align = _b === void 0 ? ALIGN_START : _b, containerSize = _a.containerSize, currentOffset = _a.currentOffset, targetIndex = _a.targetIndex;
if (containerSize <= 0) {
else {
// If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
// The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
// The overall complexity for this approach is O(log n).
return this.exponentialSearch({
index: lastMeasuredIndex,
offset: offset,
});
}
};
SizeAndPositionManager.prototype.binarySearch = function (_a) {
var low = _a.low, high = _a.high, offset = _a.offset;
var middle = 0;
var currentOffset = 0;
while (low <= high) {
middle = low + Math.floor((high - low) / 2);
currentOffset = this.getSizeAndPositionForIndex(middle).offset;
if (currentOffset === offset) {
return middle;
}
else if (currentOffset < offset) {
low = middle + 1;
}
else if (currentOffset > offset) {
high = middle - 1;
}
}
if (low > 0) {
return low - 1;
}
return 0;
}
var datum = this.getSizeAndPositionForIndex(targetIndex);
var maxOffset = datum.offset;
var minOffset = maxOffset - containerSize + datum.size;
var idealOffset;
switch (align) {
case ALIGN_END:
idealOffset = minOffset;
break;
case ALIGN_CENTER:
idealOffset = maxOffset - (containerSize - datum.size) / 2;
break;
case ALIGN_START:
idealOffset = maxOffset;
break;
default:
idealOffset = Math.max(minOffset, Math.min(maxOffset, currentOffset));
}
var totalSize = this.getTotalSize();
return Math.max(0, Math.min(totalSize - containerSize, idealOffset));
};
SizeAndPositionManager.prototype.getVisibleRange = function (_a) {
var containerSize = _a.containerSize, offset = _a.offset, overscanCount = _a.overscanCount;
var totalSize = this.getTotalSize();
if (totalSize === 0) {
return {};
}
var maxOffset = offset + containerSize;
var start = this.findNearestItem(offset);
if (typeof start === 'undefined') {
throw Error("Invalid offset " + offset + " specified");
}
var datum = this.getSizeAndPositionForIndex(start);
offset = datum.offset + datum.size;
var stop = start;
while (offset < maxOffset && stop < this.itemCount - 1) {
stop++;
offset += this.getSizeAndPositionForIndex(stop).size;
}
if (overscanCount) {
start = Math.max(0, start - overscanCount);
stop = Math.min(stop + overscanCount, this.itemCount - 1);
}
return {
start: start,
stop: stop,
};
};
/**
* Clear all cached values for items after the specified index.
* This method should be called for any item that has changed its size.
* It will not immediately perform any calculations; they'll be performed the next time getSizeAndPositionForIndex() is called.
*/
SizeAndPositionManager.prototype.resetItem = function (index) {
this.lastMeasuredIndex = Math.min(this.lastMeasuredIndex, index - 1);
};
/**
* Searches for the item (index) nearest the specified offset.
*
* If no exact match is found the next lowest item index will be returned.
* This allows partially visible items (with offsets just before/above the fold) to be visible.
*/
SizeAndPositionManager.prototype.findNearestItem = function (offset) {
if (isNaN(offset)) {
throw Error("Invalid offset " + offset + " specified");
}
// Our search algorithms find the nearest match at or below the specified offset.
// So make sure the offset is at least 0 or no match will be found.
offset = Math.max(0, offset);
var lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
var lastMeasuredIndex = Math.max(0, this.lastMeasuredIndex);
if (lastMeasuredSizeAndPosition.offset >= offset) {
// If we've already measured items within this range just use a binary search as it's faster.
SizeAndPositionManager.prototype.exponentialSearch = function (_a) {
var index = _a.index, offset = _a.offset;
var interval = 1;
while (index < this.itemCount &&
this.getSizeAndPositionForIndex(index).offset < offset) {
index += interval;
interval *= 2;
}
return this.binarySearch({
high: lastMeasuredIndex,
low: 0,
high: Math.min(index, this.itemCount - 1),
low: Math.floor(index / 2),
offset: offset,
});
};
return SizeAndPositionManager;
}());
var InfinitelistService = (function () {
function InfinitelistService() {
}
else {
// If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
// The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
// The overall complexity for this approach is O(log n).
return this.exponentialSearch({
index: lastMeasuredIndex,
offset: offset,
});
}
};
SizeAndPositionManager.prototype.binarySearch = function (_a) {
var low = _a.low, high = _a.high, offset = _a.offset;
var middle = 0;
var currentOffset = 0;
while (low <= high) {
middle = low + Math.floor((high - low) / 2);
currentOffset = this.getSizeAndPositionForIndex(middle).offset;
if (currentOffset === offset) {
return middle;
InfinitelistService.prototype.addEventListener = function (ele, eventType, callback) {
if (ele.addEventListener) {
return ele.addEventListener(eventType, callback, false);
}
else if (currentOffset < offset) {
low = middle + 1;
else if (ele['attachEvent']) {
return ele['attachEvent'](eventType, callback);
}
else if (currentOffset > offset) {
high = middle - 1;
else {
return ele["on" + eventType] = callback;
}
}
if (low > 0) {
return low - 1;
}
return 0;
};
SizeAndPositionManager.prototype.exponentialSearch = function (_a) {
var index = _a.index, offset = _a.offset;
var interval = 1;
while (index < this.itemCount &&
this.getSizeAndPositionForIndex(index).offset < offset) {
index += interval;
interval *= 2;
}
return this.binarySearch({
high: Math.min(index, this.itemCount - 1),
low: Math.floor(index / 2),
offset: offset,
});
};
return SizeAndPositionManager;
}());
};
InfinitelistService.prototype.removeEventListener = function (ele, eventType, callback) {
if (ele.removeEventListener) {
return ele.removeEventListener(eventType, callback, false);
}
else if (ele['detachEvent']) {
return ele['detachEvent'](eventType, callback);
}
else {
return ele["on" + eventType] = null;
}
};
InfinitelistService.prototype.isArray = function (val) {
return Object.prototype.toString.call(val) === '[object Array]';
};
InfinitelistService.prototype.randomColor = function () {
return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
};
InfinitelistService.prototype.isPureNumber = function (val) {
if (typeof val === 'number' || !val)
return true;
else
return false;
};
InfinitelistService.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
InfinitelistService.ctorParameters = function () { return []; };
return InfinitelistService;
}());
var InfinitelistService = (function () {
function InfinitelistService() {
}
InfinitelistService.prototype.addEventListener = function (ele, eventType, callback) {
if (ele.addEventListener) {
return ele.addEventListener(eventType, callback, false);
var __assign = (undefined && undefined.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
else if (ele['attachEvent']) {
return ele['attachEvent'](eventType, callback);
}
else {
return ele["on" + eventType] = callback;
}
return t;
};
InfinitelistService.prototype.removeEventListener = function (ele, eventType, callback) {
if (ele.removeEventListener) {
return ele.removeEventListener(eventType, callback, false);
var InfinitelistComponent = (function () {
function InfinitelistComponent(zone, infinitelistService) {
this.zone = zone;
this.infinitelistService = infinitelistService;
this.styleCache = {};
this._width = '100%';
this._height = '100%';
this.scrollDirection = DIRECTION_VERTICAL;
this.scrollToAlignment = ALIGN_AUTO;
this.useob = false;
this.overscanCount = 4;
this.debug = false;
this.unit = 'px';
this.update = new core.EventEmitter();
this.ob$ = new rxjs.Subject();
this.items = [];
this.event = new ILEvent();
this.event.getStyle = this.getStyle.bind(this);
}
else if (ele['detachEvent']) {
return ele['detachEvent'](eventType, callback);
}
else {
return ele["on" + eventType] = null;
}
};
InfinitelistService.prototype.isArray = function (val) {
return Object.prototype.toString.call(val) === '[object Array]';
};
InfinitelistService.prototype.randomColor = function () {
return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
};
InfinitelistService.prototype.isPureNumber = function (val) {
if (typeof val === 'number' || !val)
return true;
else
return false;
};
InfinitelistService.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
InfinitelistService.ctorParameters = function () { return []; };
return InfinitelistService;
}());
var __assign = (undefined && undefined.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var InfinitelistComponent = (function () {
function InfinitelistComponent(zone, infinitelistService) {
this.zone = zone;
this.infinitelistService = infinitelistService;
this.styleCache = {};
this._width = '100%';
this._height = '100%';
this.scrollDirection = DIRECTION_VERTICAL;
this.scrollToAlignment = ALIGN_AUTO;
this.useob = false;
this.overscanCount = 4;
this.debug = false;
this.unit = 'px';
this.update = new core.EventEmitter();
this.ob$ = new Subject.Subject();
this.items = [];
this.event = new ILEvent();
this.event.getStyle = this.getStyle.bind(this);
}
Object.defineProperty(InfinitelistComponent.prototype, "itemCount", {
get: function () {
return this.data ? this.data.length : 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(InfinitelistComponent.prototype, "currentSizeProp", {
get: function () {
return sizeProp[this.scrollDirection];
},
enumerable: true,
configurable: true
});
Object.defineProperty(InfinitelistComponent.prototype, "currentScrollProp", {
get: function () {
return scrollProp[this.scrollDirection];
},
enumerable: true,
configurable: true
});
InfinitelistComponent.prototype.ngOnInit = function () {
var _this = this;
this.createSizeAndPositionManager();
this.zone.runOutsideAngular(function () {
_this.handleScrollbind = _this.handleScroll.bind(_this);
_this.infinitelistService.addEventListener(_this.rootNode.nativeElement, 'scroll', _this.handleScrollbind);
Object.defineProperty(InfinitelistComponent.prototype, "itemCount", {
get: function () {
return this.data ? this.data.length : 0;
},
enumerable: true,
configurable: true
});
// set offset init value
this.offset = this.scrollOffset || this.scrollToIndex != null && this.getOffsetForIndex(this.scrollToIndex) || 0;
this.scrollChangeReason = SCROLL_CHANGE_REQUESTED;
// srcoll init value
if (this.scrollOffset != null) {
this.scrollTo(this.scrollOffset);
}
else if (this.scrollToIndex != null) {
this.scrollTo(this.getOffsetForIndex(this.scrollToIndex));
}
if (this.useob) {
setTimeout(function () {
_this.update.emit(_this.ob$);
_this.ngRender();
}, 0);
}
else {
this.ngRender();
}
};
InfinitelistComponent.prototype.ngOnDestroy = function () {
this.sizeAndPositionManager.destroy();
this.infinitelistService.removeEventListener(this.rootNode.nativeElement, 'scroll', this.handleScrollbind);
};
InfinitelistComponent.prototype.ngOnChanges = function (changes) {
this.createSizeAndPositionManager();
var scrollPropsHaveChanged = (this.valueChanged(changes, 'scrollToIndex') ||
this.valueChanged(changes, 'scrollToAlignment'));
var itemPropsHaveChanged = (this.valueChanged(changes, 'data') ||
this.valueChanged(changes, 'itemSize') ||
this.valueChanged(changes, 'estimatedItemSize'));
if (this.valueChanged(changes, 'data') ||
this.valueChanged(changes, 'estimatedItemSize')) {
this.sizeAndPositionManager.updateConfig({
itemCount: this.itemCount,
estimatedItemSize: this.getEstimatedItemSize(),
Object.defineProperty(InfinitelistComponent.prototype, "currentSizeProp", {
get: function () {
return sizeProp[this.scrollDirection];
},
enumerable: true,
configurable: true
});
Object.defineProperty(InfinitelistComponent.prototype, "currentScrollProp", {
get: function () {
return scrollProp[this.scrollDirection];
},
enumerable: true,
configurable: true
});
InfinitelistComponent.prototype.ngAfterViewInit = function () {
setTimeout(this.initAll.bind(this));
};
InfinitelistComponent.prototype.initAll = function () {
var _this = this;
this.createSizeAndPositionManager();
this.zone.runOutsideAngular(function () {
_this.handleScrollbind = _this.handleScroll.bind(_this);
_this.infinitelistService.addEventListener(_this.rootNode.nativeElement, 'scroll', _this.handleScrollbind);
});
}
if (itemPropsHaveChanged)
this.recomputeSizes();
this.warpStyle = __assign({}, STYLE_WRAPPER, { height: this.addUnit(this.height), width: this.addUnit(this.width) });
this.innerStyle = __assign({}, STYLE_INNER, (_a = {}, _a[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize()), _a));
if (this.valueChanged(changes, 'scrollOffset')) {
this.offset = this.scrollOffset || 0;
// set offset init value
this.offset = this.scrollOffset || this.scrollToIndex != null && this.getOffsetForIndex(this.scrollToIndex) || 0;
this.scrollChangeReason = SCROLL_CHANGE_REQUESTED;
this.ngRender();
}
else if (typeof this.scrollToIndex === 'number' && (scrollPropsHaveChanged || itemPropsHaveChanged)) {
this.offset = this.getOffsetForIndex(this.scrollToIndex, this.scrollToAlignment, this.itemCount);
this.scrollChangeReason = SCROLL_CHANGE_REQUESTED;
this.ngRender();
}
var _a;
};
InfinitelistComponent.prototype.ngDidUpdate = function () {
if (this.oldOffset !== this.offset && this.scrollChangeReason === SCROLL_CHANGE_REQUESTED) {
this.scrollTo(this.offset);
}
};
InfinitelistComponent.prototype.ngRender = function () {
var _this = this;
var _a = this.sizeAndPositionManager.getVisibleRange({
containerSize: this[this.currentSizeProp] || 0,
offset: this.offset,
overscanCount: this.overscanCount
}), start = _a.start, stop = _a.stop;
// fill items;
if (typeof start !== 'undefined' && typeof stop !== 'undefined') {
this.items.length = 0;
for (var i = start; i <= stop; i++) {
this.items.push(this.data[i]);
// srcoll init value
if (this.scrollOffset != null) {
this.scrollTo(this.scrollOffset);
}
this.event.start = start;
this.event.stop = stop;
this.event.offset = this.offset;
this.event.items = this.items;
if (!this.infinitelistService.isPureNumber(this.itemSize))
this.innerStyle = __assign({}, STYLE_INNER, (_b = {}, _b[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize()), _b));
else if (this.scrollToIndex != null) {
this.scrollTo(this.getOffsetForIndex(this.scrollToIndex));
}
if (this.useob) {
this.ob$.next(this.event);
if (!this.infinitelistService.isPureNumber(this.itemSize))
this.innerNode.nativeElement.style[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize());
setTimeout(function () {
_this.update.emit(_this.ob$);
_this.ngRender();
}, 0);
}
else {
this.zone.run(function () { return _this.update.emit(_this.event); });
this.ngRender();
}
}
this.ngDidUpdate();
var _b;
};
InfinitelistComponent.prototype.valueChanged = function (changes, key) {
return changes[key] ? changes[key].currentValue !== changes[key].previousValue : false;
};
InfinitelistComponent.prototype.handleScroll = function (e) {
var offset = this.getNodeOffset();
if (offset < 0 || this.offset === offset || e.target !== this.rootNode.nativeElement)
return;
this.offset = offset;
this.scrollChangeReason = SCROLL_CHANGE_OBSERVED;
this.ngRender();
};
InfinitelistComponent.prototype.getStyle = function (index) {
index += this.event.start;
var style = this.styleCache[index];
if (style)
return style;
var _a = this.sizeAndPositionManager.getSizeAndPositionForIndex(index), size = _a.size, offset = _a.offset;
var debugStyle = this.debug ? { backgroundColor: this.infinitelistService.randomColor() } : null;
return this.styleCache[index] = __assign({}, STYLE_ITEM, debugStyle, (_b = {}, _b[this.currentSizeProp] = this.addUnit(size), _b[positionProp[this.scrollDirection]] = this.addUnit(offset), _b));
var _b;
};
////////////////////////////////////////////////////////////////////////////
// PRIVATE
////////////////////////////////////////////////////////////////////////////
// init SizeAndPositionManager
InfinitelistComponent.prototype.createSizeAndPositionManager = function () {
var _this = this;
if (!this.sizeAndPositionManager)
this.sizeAndPositionManager = new SizeAndPositionManager({
itemCount: this.itemCount,
itemSizeGetter: function (index) { return _this.getSize(index); },
estimatedItemSize: this.getEstimatedItemSize(),
};
InfinitelistComponent.prototype.ngOnDestroy = function () {
this.sizeAndPositionManager.destroy();
this.infinitelistService.removeEventListener(this.rootNode.nativeElement, 'scroll', this.handleScrollbind);
};
InfinitelistComponent.prototype.ngOnChanges = function (changes) {
this.createSizeAndPositionManager();
var scrollPropsHaveChanged = (this.valueChanged(changes, 'scrollToIndex') ||
this.valueChanged(changes, 'scrollToAlignment'));
var itemPropsHaveChanged = (this.valueChanged(changes, 'data') ||
this.valueChanged(changes, 'itemSize') ||
this.valueChanged(changes, 'estimatedItemSize'));
if (this.valueChanged(changes, 'data') ||
this.valueChanged(changes, 'estimatedItemSize')) {
this.sizeAndPositionManager.updateConfig({
itemCount: this.itemCount,
estimatedItemSize: this.getEstimatedItemSize(),
});
}
if (itemPropsHaveChanged)
this.recomputeSizes();
this.warpStyle = __assign({}, STYLE_WRAPPER, { height: this.addUnit(this.height), width: this.addUnit(this.width) });
this.innerStyle = __assign({}, STYLE_INNER, (_a = {}, _a[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize()), _a));
if (this.valueChanged(changes, 'scrollOffset')) {
this.offset = this.scrollOffset || 0;
this.scrollChangeReason = SCROLL_CHANGE_REQUESTED;
this.ngRender();
}
else if (typeof this.scrollToIndex === 'number' && (scrollPropsHaveChanged || itemPropsHaveChanged)) {
this.offset = this.getOffsetForIndex(this.scrollToIndex, this.scrollToAlignment, this.itemCount);
this.scrollChangeReason = SCROLL_CHANGE_REQUESTED;
this.ngRender();
}
var _a;
};
InfinitelistComponent.prototype.ngDidUpdate = function () {
if (this.oldOffset !== this.offset && this.scrollChangeReason === SCROLL_CHANGE_REQUESTED) {
this.scrollTo(this.offset);
}
};
InfinitelistComponent.prototype.ngRender = function () {
var _this = this;
var _a = this.sizeAndPositionManager.getVisibleRange({
containerSize: this[this.currentSizeProp] || 0,
offset: this.offset,
overscanCount: this.overscanCount
}), start = _a.start, stop = _a.stop;
// fill items;
if (typeof start !== 'undefined' && typeof stop !== 'undefined') {
this.items.length = 0;
for (var i = start; i <= stop; i++) {
this.items.push(this.data[i]);
}
this.event.start = start;
this.event.stop = stop;
this.event.offset = this.offset;
this.event.items = this.items;
if (!this.infinitelistService.isPureNumber(this.itemSize))
this.innerStyle = __assign({}, STYLE_INNER, (_b = {}, _b[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize()), _b));
if (this.useob) {
this.ob$.next(this.event);
if (!this.infinitelistService.isPureNumber(this.itemSize))
this.innerNode.nativeElement.style[this.currentSizeProp] = this.addUnit(this.sizeAndPositionManager.getTotalSize());
}
else {
this.zone.run(function () { return _this.update.emit(_this.event); });
}
}
this.ngDidUpdate();
var _b;
};
InfinitelistComponent.prototype.valueChanged = function (changes, key) {
return changes[key] ? changes[key].currentValue !== changes[key].previousValue : false;
};
InfinitelistComponent.prototype.handleScroll = function (e) {
var offset = this.getNodeOffset();
if (offset < 0 || this.offset === offset || e.target !== this.rootNode.nativeElement)
return;
this.offset = offset;
this.scrollChangeReason = SCROLL_CHANGE_OBSERVED;
this.ngRender();
};
InfinitelistComponent.prototype.getStyle = function (index) {
index += this.event.start;
var style = this.styleCache[index];
if (style)
return style;
var _a = this.sizeAndPositionManager.getSizeAndPositionForIndex(index), size = _a.size, offset = _a.offset;
var debugStyle = this.debug ? { backgroundColor: this.infinitelistService.randomColor() } : null;
return this.styleCache[index] = __assign({}, STYLE_ITEM, debugStyle, (_b = {}, _b[this.currentSizeProp] = this.addUnit(size), _b[positionProp[this.scrollDirection]] = this.addUnit(offset), _b));
var _b;
};
////////////////////////////////////////////////////////////////////////////
// PRIVATE
////////////////////////////////////////////////////////////////////////////
// init SizeAndPositionManager
InfinitelistComponent.prototype.createSizeAndPositionManager = function () {
var _this = this;
if (!this.sizeAndPositionManager)
this.sizeAndPositionManager = new SizeAndPositionManager({
itemCount: this.itemCount,
itemSizeGetter: function (index) { return _this.getSize(index); },
estimatedItemSize: this.getEstimatedItemSize(),
});
return this.sizeAndPositionManager;
};
InfinitelistComponent.prototype.addUnit = function (val) {
return typeof val === 'string' ? val : val + this.unit;
};
InfinitelistComponent.prototype.getEstimatedItemSize = function () {
return this.estimatedItemSize || typeof this.itemSize === 'number' && this.itemSize || 50;
};
InfinitelistComponent.prototype.getNodeOffset = function () {
return this.rootNode.nativeElement[this.currentScrollProp];
};
InfinitelistComponent.prototype.scrollTo = function (value) {
this.rootNode.nativeElement[this.currentScrollProp] = value;
this.oldOffset = value;
};
InfinitelistComponent.prototype.getOffsetForIndex = function (index, scrollToAlignment, itemCount) {
if (scrollToAlignment === void 0) { scrollToAlignment = this.scrollToAlignment; }
if (itemCount === void 0) { itemCount = this.itemCount; }
if (index < 0 || index >= itemCount)
index = 0;
return this.sizeAndPositionManager.getUpdatedOffsetForIndex({
align: this.scrollToAlignment,
containerSize: this[this.currentSizeProp],
currentOffset: this.offset || 0,
targetIndex: index,
});
return this.sizeAndPositionManager;
};
InfinitelistComponent.prototype.getSize = function (index) {
if (typeof this.itemSize === 'function') {
return this.itemSize(index);
}
return this.infinitelistService.isArray(this.itemSize) ? this.itemSize[index] : this.itemSize;
};
InfinitelistComponent.prototype.recomputeSizes = function (startIndex) {
if (startIndex === void 0) { startIndex = 0; }
this.styleCache = {};
this.sizeAndPositionManager.resetItem(startIndex);
};
InfinitelistComponent.decorators = [
{ type: core.Component, args: [{
selector: 'infinite-list, infinitelist, [infinitelist]',
template: "\n<div #dom [ngStyle]=\"warpStyle\">\n <div #inner [ngStyle]=\"innerStyle\">\n <ng-content></ng-content>\n </div>\n</div>\n ",
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
InfinitelistComponent.ctorParameters = function () { return [
{ type: core.NgZone, },
{ type: InfinitelistService, },
]; };
InfinitelistComponent.propDecorators = {
'scrollDirection': [{ type: core.Input },],
'scrollToAlignment': [{ type: core.Input },],
'useob': [{ type: core.Input },],
'overscanCount': [{ type: core.Input },],
'itemSize': [{ type: core.Input },],
'data': [{ type: core.Input },],
'debug': [{ type: core.Input },],
'unit': [{ type: core.Input },],
'width': [{ type: core.Input },],
'height': [{ type: core.Input },],
'scrollOffset': [{ type: core.Input },],
'scrollToIndex': [{ type: core.Input },],
'estimatedItemSize': [{ type: core.Input },],
'update': [{ type: core.Output },],
'rootNode': [{ type: core.ViewChild, args: ['dom', { read: core.ElementRef },] },],
'innerNode': [{ type: core.ViewChild, args: ['inner', { read: core.ElementRef },] },],
};
return InfinitelistComponent;
}());
var STYLE_WRAPPER = {
overflow: 'auto',
willChange: 'transform',
WebkitOverflowScrolling: 'touch',
};
InfinitelistComponent.prototype.addUnit = function (val) {
return typeof val === 'string' ? val : val + this.unit;
var STYLE_INNER = {
position: 'relative',
overflow: 'hidden',
width: '100%',
minHeight: '100%',
};
InfinitelistComponent.prototype.getEstimatedItemSize = function () {
return this.estimatedItemSize || typeof this.itemSize === 'number' && this.itemSize || 50;
var STYLE_ITEM = {
position: 'absolute',
left: 0,
width: '100%',
height: '100%'
};
InfinitelistComponent.prototype.getNodeOffset = function () {
return this.rootNode.nativeElement[this.currentScrollProp];
};
InfinitelistComponent.prototype.scrollTo = function (value) {
this.rootNode.nativeElement[this.currentScrollProp] = value;
this.oldOffset = value;
};
InfinitelistComponent.prototype.getOffsetForIndex = function (index, scrollToAlignment, itemCount) {
if (scrollToAlignment === void 0) { scrollToAlignment = this.scrollToAlignment; }
if (itemCount === void 0) { itemCount = this.itemCount; }
if (index < 0 || index >= itemCount)
index = 0;
return this.sizeAndPositionManager.getUpdatedOffsetForIndex({
align: this.scrollToAlignment,
containerSize: this[this.currentSizeProp],
currentOffset: this.offset || 0,
targetIndex: index,
});
};
InfinitelistComponent.prototype.getSize = function (index) {
if (typeof this.itemSize === 'function') {
return this.itemSize(index);
var InfiniteListModule = (function () {
function InfiniteListModule() {
}
return this.infinitelistService.isArray(this.itemSize) ? this.itemSize[index] : this.itemSize;
};
InfinitelistComponent.prototype.recomputeSizes = function (startIndex) {
if (startIndex === void 0) { startIndex = 0; }
this.styleCache = {};
this.sizeAndPositionManager.resetItem(startIndex);
};
InfinitelistComponent.decorators = [
{ type: core.Component, args: [{
selector: 'infinite-list, infinitelist, [infinitelist]',
template: "\n<div #dom [ngStyle]=\"warpStyle\">\n <div #inner [ngStyle]=\"innerStyle\">\n <ng-content></ng-content>\n </div>\n</div>\n ",
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
InfinitelistComponent.ctorParameters = function () { return [
{ type: core.NgZone, },
{ type: InfinitelistService, },
]; };
InfinitelistComponent.propDecorators = {
'scrollDirection': [{ type: core.Input },],
'scrollToAlignment': [{ type: core.Input },],
'useob': [{ type: core.Input },],
'overscanCount': [{ type: core.Input },],
'itemSize': [{ type: core.Input },],
'data': [{ type: core.Input },],
'debug': [{ type: core.Input },],
'unit': [{ type: core.Input },],
'width': [{ type: core.Input },],
'height': [{ type: core.Input },],
'scrollOffset': [{ type: core.Input },],
'scrollToIndex': [{ type: core.Input },],
'estimatedItemSize': [{ type: core.Input },],
'update': [{ type: core.Output },],
'rootNode': [{ type: core.ViewChild, args: ['dom', { read: core.ElementRef },] },],
'innerNode': [{ type: core.ViewChild, args: ['inner', { read: core.ElementRef },] },],
};
return InfinitelistComponent;
}());
var STYLE_WRAPPER = {
overflow: 'auto',
willChange: 'transform',
WebkitOverflowScrolling: 'touch',
};
var STYLE_INNER = {
position: 'relative',
overflow: 'hidden',
width: '100%',
minHeight: '100%',
};
var STYLE_ITEM = {
position: 'absolute',
left: 0,
width: '100%',
height: '100%'
};
InfiniteListModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [InfinitelistComponent],
exports: [InfinitelistComponent],
imports: [common.CommonModule],
providers: [InfinitelistService]
},] },
];
/** @nocollapse */
InfiniteListModule.ctorParameters = function () { return []; };
return InfiniteListModule;
}());
var InfiniteListModule = (function () {
function InfiniteListModule() {
}
InfiniteListModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [InfinitelistComponent],
exports: [InfinitelistComponent],
imports: [common.CommonModule],
providers: [InfinitelistService]
},] },
];
/** @nocollapse */
InfiniteListModule.ctorParameters = function () { return []; };
return InfiniteListModule;
}());
exports.ALIGN_AUTO = ALIGN_AUTO;
exports.ALIGN_CENTER = ALIGN_CENTER;
exports.ALIGN_END = ALIGN_END;
exports.ALIGN_START = ALIGN_START;
exports.DIRECTION_HORIZONTAL = DIRECTION_HORIZONTAL;
exports.DIRECTION_VERTICAL = DIRECTION_VERTICAL;
exports.ILEvent = ILEvent;
exports.InfiniteListModule = InfiniteListModule;
exports.InfinitelistComponent = InfinitelistComponent;
exports.SCROLL_CHANGE_OBSERVED = SCROLL_CHANGE_OBSERVED;
exports.SCROLL_CHANGE_REQUESTED = SCROLL_CHANGE_REQUESTED;
exports.positionProp = positionProp;
exports.scrollProp = scrollProp;
exports.sizeProp = sizeProp;
exports.ILEvent = ILEvent;
exports.ALIGN_AUTO = ALIGN_AUTO;
exports.ALIGN_START = ALIGN_START;
exports.ALIGN_CENTER = ALIGN_CENTER;
exports.ALIGN_END = ALIGN_END;
exports.DIRECTION_VERTICAL = DIRECTION_VERTICAL;
exports.DIRECTION_HORIZONTAL = DIRECTION_HORIZONTAL;
exports.SCROLL_CHANGE_OBSERVED = SCROLL_CHANGE_OBSERVED;
exports.SCROLL_CHANGE_REQUESTED = SCROLL_CHANGE_REQUESTED;
exports.scrollProp = scrollProp;
exports.sizeProp = sizeProp;
exports.positionProp = positionProp;
exports.InfinitelistComponent = InfinitelistComponent;
exports.InfiniteListModule = InfiniteListModule;
Object.defineProperty(exports, '__esModule', { value: true });
Object.defineProperty(exports, '__esModule', { value: true });
})));
import { EventEmitter, SimpleChange, ElementRef, NgZone } from '@angular/core';
import { InfinitelistService } from './infinite-list.service';
import { ILEvent } from './il-event';
import { Subject } from 'rxjs/Subject';
import { Subject } from 'rxjs';
export declare class InfinitelistComponent {

@@ -41,3 +41,4 @@ private zone;

constructor(zone: NgZone, infinitelistService: InfinitelistService);
ngOnInit(): void;
ngAfterViewInit(): void;
initAll(): void;
ngOnDestroy(): void;

@@ -44,0 +45,0 @@ ngOnChanges(changes: SimpleChange): void;

@@ -13,3 +13,3 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {

import { ILEvent } from './il-event';
import { Subject } from 'rxjs/Subject';
import { Subject } from 'rxjs';
import { ALIGN_AUTO, DIRECTION_VERTICAL, SCROLL_CHANGE_OBSERVED, SCROLL_CHANGE_REQUESTED, positionProp, scrollProp, sizeProp } from './constants';

@@ -56,3 +56,6 @@ var InfinitelistComponent = (function () {

});
InfinitelistComponent.prototype.ngOnInit = function () {
InfinitelistComponent.prototype.ngAfterViewInit = function () {
setTimeout(this.initAll.bind(this));
};
InfinitelistComponent.prototype.initAll = function () {
var _this = this;

@@ -59,0 +62,0 @@ this.createSizeAndPositionManager();

@@ -1,1 +0,1 @@

[{"__symbolic":"module","version":3,"metadata":{"InfinitelistComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"infinite-list, infinitelist, [infinitelist]","template":"\n<div #dom [ngStyle]=\"warpStyle\">\n <div #inner [ngStyle]=\"innerStyle\">\n <ng-content></ng-content>\n </div>\n</div>\n ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"scrollDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overscanCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"estimatedItemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"rootNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dom",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"innerNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inner",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./infinite-list.service","name":"InfinitelistService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDidUpdate":[{"__symbolic":"method"}],"ngRender":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"handleScroll":[{"__symbolic":"method"}],"getStyle":[{"__symbolic":"method"}],"createSizeAndPositionManager":[{"__symbolic":"method"}],"addUnit":[{"__symbolic":"method"}],"getEstimatedItemSize":[{"__symbolic":"method"}],"getNodeOffset":[{"__symbolic":"method"}],"scrollTo":[{"__symbolic":"method"}],"getOffsetForIndex":[{"__symbolic":"method"}],"getSize":[{"__symbolic":"method"}],"recomputeSizes":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"InfinitelistComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"infinite-list, infinitelist, [infinitelist]","template":"\n<div #dom [ngStyle]=\"warpStyle\">\n <div #inner [ngStyle]=\"innerStyle\">\n <ng-content></ng-content>\n </div>\n</div>\n ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"scrollDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overscanCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"estimatedItemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"rootNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dom",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"innerNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inner",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./infinite-list.service","name":"InfinitelistService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDidUpdate":[{"__symbolic":"method"}],"ngRender":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"handleScroll":[{"__symbolic":"method"}],"getStyle":[{"__symbolic":"method"}],"createSizeAndPositionManager":[{"__symbolic":"method"}],"addUnit":[{"__symbolic":"method"}],"getEstimatedItemSize":[{"__symbolic":"method"}],"getNodeOffset":[{"__symbolic":"method"}],"scrollTo":[{"__symbolic":"method"}],"getOffsetForIndex":[{"__symbolic":"method"}],"getSize":[{"__symbolic":"method"}],"recomputeSizes":[{"__symbolic":"method"}]}}}}]
[{"__symbolic":"module","version":3,"metadata":{"InfinitelistComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"infinite-list, infinitelist, [infinitelist]","template":"\n<div #dom [ngStyle]=\"warpStyle\">\n <div #inner [ngStyle]=\"innerStyle\">\n <ng-content></ng-content>\n </div>\n</div>\n ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"scrollDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overscanCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"estimatedItemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"rootNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dom",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"innerNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inner",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./infinite-list.service","name":"InfinitelistService"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"initAll":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDidUpdate":[{"__symbolic":"method"}],"ngRender":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"handleScroll":[{"__symbolic":"method"}],"getStyle":[{"__symbolic":"method"}],"createSizeAndPositionManager":[{"__symbolic":"method"}],"addUnit":[{"__symbolic":"method"}],"getEstimatedItemSize":[{"__symbolic":"method"}],"getNodeOffset":[{"__symbolic":"method"}],"scrollTo":[{"__symbolic":"method"}],"getOffsetForIndex":[{"__symbolic":"method"}],"getSize":[{"__symbolic":"method"}],"recomputeSizes":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"InfinitelistComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"infinite-list, infinitelist, [infinitelist]","template":"\n<div #dom [ngStyle]=\"warpStyle\">\n <div #inner [ngStyle]=\"innerStyle\">\n <ng-content></ng-content>\n </div>\n</div>\n ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"scrollDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"useob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overscanCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollToIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"estimatedItemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"rootNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dom",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"innerNode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inner",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"./infinite-list.service","name":"InfinitelistService"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"initAll":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDidUpdate":[{"__symbolic":"method"}],"ngRender":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"handleScroll":[{"__symbolic":"method"}],"getStyle":[{"__symbolic":"method"}],"createSizeAndPositionManager":[{"__symbolic":"method"}],"addUnit":[{"__symbolic":"method"}],"getEstimatedItemSize":[{"__symbolic":"method"}],"getNodeOffset":[{"__symbolic":"method"}],"scrollTo":[{"__symbolic":"method"}],"getOffsetForIndex":[{"__symbolic":"method"}],"getSize":[{"__symbolic":"method"}],"recomputeSizes":[{"__symbolic":"method"}]}}}}]
{
"name": "angular-infinite-list",
"version": "0.3.7",
"version": "0.5.1",
"description": "A tiny but mighty 3k list virtualization library for angular, with zero dependencies",

@@ -17,3 +17,3 @@ "main": "dist/index.js",

"type": "git",
"url": "git+https://a-jie.github.io/angular-infinite-list"
"url": "git+https://drawcall.github.io/angular-infinite-list"
},

@@ -25,5 +25,5 @@ "keywords": [

],
"author": "a-jie",
"author": "drawcall",
"license": "MIT",
"homepage": "https://a-jie.github.io/angular-infinite-listangular-infinite-list",
"homepage": "https://drawcall.github.io/angular-infinite-listangular-infinite-list",
"devDependencies": {

@@ -44,2 +44,3 @@ "@angular/cli": "^1.3.0",

"rimraf": "^2.6.1",
"rollup": "^1.27.14",
"rxjs": "^5.4.2",

@@ -46,0 +47,0 @@ "tslint": "^5.5.0",

<div align="center" style="margin-bottom: 30px;">
<img src="https://raw.githubusercontent.com/a-jie/angular-infinite-list/master/imgs/logo.png" width="200"/>
<img src="https://raw.githubusercontent.com/drawcall/angular-infinite-list/master/imgs/logo.png" width="200"/>
</div>

@@ -16,3 +16,3 @@

Check out the [demo](https://a-jie.github.io/angular-infinite-list) for some examples.
Check out the [demo](https://drawcall.github.io/angular-infinite-list) for some examples.

@@ -44,2 +44,3 @@ Getting Started

<infinitelist
style="width:100%"
[width]='"100%"'

@@ -99,3 +100,3 @@ [height]='500'

```
[view demo code](https://github.com/a-jie/angular-infinite-list/blob/master/demo/src/app/components/demo/demo2.component.ts)
[view demo code](https://github.com/drawcall/angular-infinite-list/blob/master/demo/src/app/components/demo/demo2.component.ts)

@@ -134,3 +135,3 @@

## Reporting Issues
Found an issue? Please [report it](https://github.com/a-jie/angular-infinite-list/issues) along with any relevant details to reproduce it.
Found an issue? Please [report it](https://github.com/drawcall/angular-infinite-list/issues) along with any relevant details to reproduce it.

@@ -137,0 +138,0 @@ ## Acknowledgments

export default {
input: 'dist/index.js',
output: {
name: 'angular-infinite-list',
file: 'bundles/angular-infinite-list.umd.js',

@@ -5,0 +6,0 @@ format: 'umd'

@@ -7,3 +7,3 @@ import { Component, Input, Output, EventEmitter, SimpleChange, ViewChild, ElementRef, NgZone, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

import { ILEvent } from './il-event';
import { Subject } from 'rxjs/Subject';
import { Subject } from 'rxjs';

@@ -98,3 +98,7 @@ import {

ngOnInit() {
ngAfterViewInit(){
setTimeout(this.initAll.bind(this));
}
initAll() {
this.createSizeAndPositionManager();

@@ -101,0 +105,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc