1104 lines
50 KiB
JavaScript
1104 lines
50 KiB
JavaScript
|
import * as i1 from '@angular/common';
|
||
|
|
import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
|
||
|
|
import * as i0 from '@angular/core';
|
||
|
|
import { EventEmitter, PLATFORM_ID, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
|
||
|
|
import { PrimeTemplate, SharedModule } from 'primeng/api';
|
||
|
|
import { DomHandler } from 'primeng/dom';
|
||
|
|
import { SpinnerIcon } from 'primeng/icons/spinner';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Scroller is a performance-approach to handle huge data efficiently.
|
||
|
|
* @group Components
|
||
|
|
*/
|
||
|
|
class Scroller {
|
||
|
|
document;
|
||
|
|
platformId;
|
||
|
|
renderer;
|
||
|
|
cd;
|
||
|
|
zone;
|
||
|
|
/**
|
||
|
|
* Unique identifier of the element.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get id() {
|
||
|
|
return this._id;
|
||
|
|
}
|
||
|
|
set id(val) {
|
||
|
|
this._id = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Inline style of the component.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get style() {
|
||
|
|
return this._style;
|
||
|
|
}
|
||
|
|
set style(val) {
|
||
|
|
this._style = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Style class of the element.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get styleClass() {
|
||
|
|
return this._styleClass;
|
||
|
|
}
|
||
|
|
set styleClass(val) {
|
||
|
|
this._styleClass = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Index of the element in tabbing order.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get tabindex() {
|
||
|
|
return this._tabindex;
|
||
|
|
}
|
||
|
|
set tabindex(val) {
|
||
|
|
this._tabindex = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* An array of objects to display.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get items() {
|
||
|
|
return this._items;
|
||
|
|
}
|
||
|
|
set items(val) {
|
||
|
|
this._items = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* The height/width of item according to orientation.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get itemSize() {
|
||
|
|
return this._itemSize;
|
||
|
|
}
|
||
|
|
set itemSize(val) {
|
||
|
|
this._itemSize = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Height of the scroll viewport.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get scrollHeight() {
|
||
|
|
return this._scrollHeight;
|
||
|
|
}
|
||
|
|
set scrollHeight(val) {
|
||
|
|
this._scrollHeight = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Width of the scroll viewport.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get scrollWidth() {
|
||
|
|
return this._scrollWidth;
|
||
|
|
}
|
||
|
|
set scrollWidth(val) {
|
||
|
|
this._scrollWidth = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* The orientation of scrollbar.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get orientation() {
|
||
|
|
return this._orientation;
|
||
|
|
}
|
||
|
|
set orientation(val) {
|
||
|
|
this._orientation = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Used to specify how many items to load in each load method in lazy mode.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get step() {
|
||
|
|
return this._step;
|
||
|
|
}
|
||
|
|
set step(val) {
|
||
|
|
this._step = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Delay in scroll before new data is loaded.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get delay() {
|
||
|
|
return this._delay;
|
||
|
|
}
|
||
|
|
set delay(val) {
|
||
|
|
this._delay = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Delay after window's resize finishes.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get resizeDelay() {
|
||
|
|
return this._resizeDelay;
|
||
|
|
}
|
||
|
|
set resizeDelay(val) {
|
||
|
|
this._resizeDelay = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Used to append each loaded item to top without removing any items from the DOM. Using very large data may cause the browser to crash.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get appendOnly() {
|
||
|
|
return this._appendOnly;
|
||
|
|
}
|
||
|
|
set appendOnly(val) {
|
||
|
|
this._appendOnly = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Specifies whether the scroller should be displayed inline or not.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get inline() {
|
||
|
|
return this._inline;
|
||
|
|
}
|
||
|
|
set inline(val) {
|
||
|
|
this._inline = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Defines if data is loaded and interacted with in lazy manner.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get lazy() {
|
||
|
|
return this._lazy;
|
||
|
|
}
|
||
|
|
set lazy(val) {
|
||
|
|
this._lazy = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* If disabled, the scroller feature is eliminated and the content is displayed directly.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get disabled() {
|
||
|
|
return this._disabled;
|
||
|
|
}
|
||
|
|
set disabled(val) {
|
||
|
|
this._disabled = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Used to implement a custom loader instead of using the loader feature in the scroller.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get loaderDisabled() {
|
||
|
|
return this._loaderDisabled;
|
||
|
|
}
|
||
|
|
set loaderDisabled(val) {
|
||
|
|
this._loaderDisabled = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Columns to display.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get columns() {
|
||
|
|
return this._columns;
|
||
|
|
}
|
||
|
|
set columns(val) {
|
||
|
|
this._columns = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Used to implement a custom spacer instead of using the spacer feature in the scroller.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get showSpacer() {
|
||
|
|
return this._showSpacer;
|
||
|
|
}
|
||
|
|
set showSpacer(val) {
|
||
|
|
this._showSpacer = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Defines whether to show loader.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get showLoader() {
|
||
|
|
return this._showLoader;
|
||
|
|
}
|
||
|
|
set showLoader(val) {
|
||
|
|
this._showLoader = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Determines how many additional elements to add to the DOM outside of the view. According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number. Default value is half the number of items shown in the view.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get numToleratedItems() {
|
||
|
|
return this._numToleratedItems;
|
||
|
|
}
|
||
|
|
set numToleratedItems(val) {
|
||
|
|
this._numToleratedItems = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Defines whether the data is loaded.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get loading() {
|
||
|
|
return this._loading;
|
||
|
|
}
|
||
|
|
set loading(val) {
|
||
|
|
this._loading = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Defines whether to dynamically change the height or width of scrollable container.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get autoSize() {
|
||
|
|
return this._autoSize;
|
||
|
|
}
|
||
|
|
set autoSize(val) {
|
||
|
|
this._autoSize = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get trackBy() {
|
||
|
|
return this._trackBy;
|
||
|
|
}
|
||
|
|
set trackBy(val) {
|
||
|
|
this._trackBy = val;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Defines whether to use the scroller feature. The properties of scroller component can be used like an object in it.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get options() {
|
||
|
|
return this._options;
|
||
|
|
}
|
||
|
|
set options(val) {
|
||
|
|
this._options = val;
|
||
|
|
if (val && typeof val === 'object') {
|
||
|
|
//@ts-ignore
|
||
|
|
Object.entries(val).forEach(([k, v]) => this[`_${k}`] !== v && (this[`_${k}`] = v));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Callback to invoke in lazy mode to load new data.
|
||
|
|
* @param {ScrollerLazyLoadEvent} event - Custom lazy load event.
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
onLazyLoad = new EventEmitter();
|
||
|
|
/**
|
||
|
|
* Callback to invoke when scroll position changes.
|
||
|
|
* @param {ScrollerScrollEvent} event - Custom scroll event.
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
onScroll = new EventEmitter();
|
||
|
|
/**
|
||
|
|
* Callback to invoke when scroll position and item's range in view changes.
|
||
|
|
* @param {ScrollerScrollEvent} event - Custom scroll index change event.
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
onScrollIndexChange = new EventEmitter();
|
||
|
|
elementViewChild;
|
||
|
|
contentViewChild;
|
||
|
|
templates;
|
||
|
|
_id;
|
||
|
|
_style;
|
||
|
|
_styleClass;
|
||
|
|
_tabindex = 0;
|
||
|
|
_items;
|
||
|
|
_itemSize = 0;
|
||
|
|
_scrollHeight;
|
||
|
|
_scrollWidth;
|
||
|
|
_orientation = 'vertical';
|
||
|
|
_step = 0;
|
||
|
|
_delay = 0;
|
||
|
|
_resizeDelay = 10;
|
||
|
|
_appendOnly = false;
|
||
|
|
_inline = false;
|
||
|
|
_lazy = false;
|
||
|
|
_disabled = false;
|
||
|
|
_loaderDisabled = false;
|
||
|
|
_columns;
|
||
|
|
_showSpacer = true;
|
||
|
|
_showLoader = false;
|
||
|
|
_numToleratedItems;
|
||
|
|
_loading;
|
||
|
|
_autoSize = false;
|
||
|
|
_trackBy;
|
||
|
|
_options;
|
||
|
|
d_loading = false;
|
||
|
|
d_numToleratedItems;
|
||
|
|
contentEl;
|
||
|
|
contentTemplate;
|
||
|
|
itemTemplate;
|
||
|
|
loaderTemplate;
|
||
|
|
loaderIconTemplate;
|
||
|
|
first = 0;
|
||
|
|
last = 0;
|
||
|
|
page = 0;
|
||
|
|
isRangeChanged = false;
|
||
|
|
numItemsInViewport = 0;
|
||
|
|
lastScrollPos = 0;
|
||
|
|
lazyLoadState = {};
|
||
|
|
loaderArr = [];
|
||
|
|
spacerStyle = {};
|
||
|
|
contentStyle = {};
|
||
|
|
scrollTimeout;
|
||
|
|
resizeTimeout;
|
||
|
|
initialized = false;
|
||
|
|
windowResizeListener;
|
||
|
|
defaultWidth;
|
||
|
|
defaultHeight;
|
||
|
|
defaultContentWidth;
|
||
|
|
defaultContentHeight;
|
||
|
|
get vertical() {
|
||
|
|
return this._orientation === 'vertical';
|
||
|
|
}
|
||
|
|
get horizontal() {
|
||
|
|
return this._orientation === 'horizontal';
|
||
|
|
}
|
||
|
|
get both() {
|
||
|
|
return this._orientation === 'both';
|
||
|
|
}
|
||
|
|
get loadedItems() {
|
||
|
|
if (this._items && !this.d_loading) {
|
||
|
|
if (this.both)
|
||
|
|
return this._items.slice(this._appendOnly ? 0 : this.first.rows, this.last.rows).map((item) => (this._columns ? item : item.slice(this._appendOnly ? 0 : this.first.cols, this.last.cols)));
|
||
|
|
else if (this.horizontal && this._columns)
|
||
|
|
return this._items;
|
||
|
|
else
|
||
|
|
return this._items.slice(this._appendOnly ? 0 : this.first, this.last);
|
||
|
|
}
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
get loadedRows() {
|
||
|
|
return this.d_loading ? (this._loaderDisabled ? this.loaderArr : []) : this.loadedItems;
|
||
|
|
}
|
||
|
|
get loadedColumns() {
|
||
|
|
if (this._columns && (this.both || this.horizontal)) {
|
||
|
|
return this.d_loading && this._loaderDisabled ? (this.both ? this.loaderArr[0] : this.loaderArr) : this._columns.slice(this.both ? this.first.cols : this.first, this.both ? this.last.cols : this.last);
|
||
|
|
}
|
||
|
|
return this._columns;
|
||
|
|
}
|
||
|
|
constructor(document, platformId, renderer, cd, zone) {
|
||
|
|
this.document = document;
|
||
|
|
this.platformId = platformId;
|
||
|
|
this.renderer = renderer;
|
||
|
|
this.cd = cd;
|
||
|
|
this.zone = zone;
|
||
|
|
}
|
||
|
|
ngOnInit() {
|
||
|
|
this.setInitialState();
|
||
|
|
}
|
||
|
|
ngOnChanges(simpleChanges) {
|
||
|
|
let isLoadingChanged = false;
|
||
|
|
if (simpleChanges.loading) {
|
||
|
|
const { previousValue, currentValue } = simpleChanges.loading;
|
||
|
|
if (this.lazy && previousValue !== currentValue && currentValue !== this.d_loading) {
|
||
|
|
this.d_loading = currentValue;
|
||
|
|
isLoadingChanged = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (simpleChanges.orientation) {
|
||
|
|
this.lastScrollPos = this.both ? { top: 0, left: 0 } : 0;
|
||
|
|
}
|
||
|
|
if (simpleChanges.numToleratedItems) {
|
||
|
|
const { previousValue, currentValue } = simpleChanges.numToleratedItems;
|
||
|
|
if (previousValue !== currentValue && currentValue !== this.d_numToleratedItems) {
|
||
|
|
this.d_numToleratedItems = currentValue;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (simpleChanges.options) {
|
||
|
|
const { previousValue, currentValue } = simpleChanges.options;
|
||
|
|
if (this.lazy && previousValue?.loading !== currentValue?.loading && currentValue?.loading !== this.d_loading) {
|
||
|
|
this.d_loading = currentValue.loading;
|
||
|
|
isLoadingChanged = true;
|
||
|
|
}
|
||
|
|
if (previousValue?.numToleratedItems !== currentValue?.numToleratedItems && currentValue?.numToleratedItems !== this.d_numToleratedItems) {
|
||
|
|
this.d_numToleratedItems = currentValue.numToleratedItems;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.initialized) {
|
||
|
|
const isChanged = !isLoadingChanged && (simpleChanges.items?.previousValue?.length !== simpleChanges.items?.currentValue?.length || simpleChanges.itemSize || simpleChanges.scrollHeight || simpleChanges.scrollWidth);
|
||
|
|
if (isChanged) {
|
||
|
|
this.init();
|
||
|
|
this.calculateAutoSize();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngAfterContentInit() {
|
||
|
|
this.templates.forEach((item) => {
|
||
|
|
switch (item.getType()) {
|
||
|
|
case 'content':
|
||
|
|
this.contentTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'item':
|
||
|
|
this.itemTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'loader':
|
||
|
|
this.loaderTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'loadericon':
|
||
|
|
this.loaderIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
this.itemTemplate = item.template;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
ngAfterViewInit() {
|
||
|
|
Promise.resolve().then(() => {
|
||
|
|
this.viewInit();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
ngAfterViewChecked() {
|
||
|
|
if (!this.initialized) {
|
||
|
|
this.viewInit();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
this.unbindResizeListener();
|
||
|
|
this.contentEl = null;
|
||
|
|
this.initialized = false;
|
||
|
|
}
|
||
|
|
viewInit() {
|
||
|
|
if (isPlatformBrowser(this.platformId) && !this.initialized) {
|
||
|
|
if (DomHandler.isVisible(this.elementViewChild?.nativeElement)) {
|
||
|
|
this.setInitialState();
|
||
|
|
this.setContentEl(this.contentEl);
|
||
|
|
this.init();
|
||
|
|
this.defaultWidth = DomHandler.getWidth(this.elementViewChild?.nativeElement);
|
||
|
|
this.defaultHeight = DomHandler.getHeight(this.elementViewChild?.nativeElement);
|
||
|
|
this.defaultContentWidth = DomHandler.getWidth(this.contentEl);
|
||
|
|
this.defaultContentHeight = DomHandler.getHeight(this.contentEl);
|
||
|
|
this.initialized = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
init() {
|
||
|
|
if (!this._disabled) {
|
||
|
|
this.setSize();
|
||
|
|
this.calculateOptions();
|
||
|
|
this.setSpacerSize();
|
||
|
|
this.bindResizeListener();
|
||
|
|
this.cd.detectChanges();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setContentEl(el) {
|
||
|
|
this.contentEl = el || this.contentViewChild?.nativeElement || DomHandler.findSingle(this.elementViewChild?.nativeElement, '.p-scroller-content');
|
||
|
|
}
|
||
|
|
setInitialState() {
|
||
|
|
this.first = this.both ? { rows: 0, cols: 0 } : 0;
|
||
|
|
this.last = this.both ? { rows: 0, cols: 0 } : 0;
|
||
|
|
this.numItemsInViewport = this.both ? { rows: 0, cols: 0 } : 0;
|
||
|
|
this.lastScrollPos = this.both ? { top: 0, left: 0 } : 0;
|
||
|
|
this.d_loading = this._loading || false;
|
||
|
|
this.d_numToleratedItems = this._numToleratedItems;
|
||
|
|
this.loaderArr = [];
|
||
|
|
this.spacerStyle = {};
|
||
|
|
this.contentStyle = {};
|
||
|
|
}
|
||
|
|
getElementRef() {
|
||
|
|
return this.elementViewChild;
|
||
|
|
}
|
||
|
|
getPageByFirst(first) {
|
||
|
|
return Math.floor(((first ?? this.first) + this.d_numToleratedItems * 4) / (this._step || 1));
|
||
|
|
}
|
||
|
|
isPageChanged(first) {
|
||
|
|
return this._step ? this.page !== this.getPageByFirst(first ?? this.first) : true;
|
||
|
|
}
|
||
|
|
scrollTo(options) {
|
||
|
|
// this.lastScrollPos = this.both ? { top: 0, left: 0 } : 0;
|
||
|
|
this.elementViewChild?.nativeElement?.scrollTo(options);
|
||
|
|
}
|
||
|
|
scrollToIndex(index, behavior = 'auto') {
|
||
|
|
const valid = this.both ? index.every((i) => i > -1) : index > -1;
|
||
|
|
if (valid) {
|
||
|
|
const first = this.first;
|
||
|
|
const { scrollTop = 0, scrollLeft = 0 } = this.elementViewChild?.nativeElement;
|
||
|
|
const { numToleratedItems } = this.calculateNumItems();
|
||
|
|
const contentPos = this.getContentPosition();
|
||
|
|
const itemSize = this.itemSize;
|
||
|
|
const calculateFirst = (_index = 0, _numT) => (_index <= _numT ? 0 : _index);
|
||
|
|
const calculateCoord = (_first, _size, _cpos) => _first * _size + _cpos;
|
||
|
|
const scrollTo = (left = 0, top = 0) => this.scrollTo({ left, top, behavior });
|
||
|
|
let newFirst = this.both ? { rows: 0, cols: 0 } : 0;
|
||
|
|
let isRangeChanged = false, isScrollChanged = false;
|
||
|
|
if (this.both) {
|
||
|
|
newFirst = { rows: calculateFirst(index[0], numToleratedItems[0]), cols: calculateFirst(index[1], numToleratedItems[1]) };
|
||
|
|
scrollTo(calculateCoord(newFirst.cols, itemSize[1], contentPos.left), calculateCoord(newFirst.rows, itemSize[0], contentPos.top));
|
||
|
|
isScrollChanged = this.lastScrollPos.top !== scrollTop || this.lastScrollPos.left !== scrollLeft;
|
||
|
|
isRangeChanged = newFirst.rows !== first.rows || newFirst.cols !== first.cols;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
newFirst = calculateFirst(index, numToleratedItems);
|
||
|
|
this.horizontal ? scrollTo(calculateCoord(newFirst, itemSize, contentPos.left), scrollTop) : scrollTo(scrollLeft, calculateCoord(newFirst, itemSize, contentPos.top));
|
||
|
|
isScrollChanged = this.lastScrollPos !== (this.horizontal ? scrollLeft : scrollTop);
|
||
|
|
isRangeChanged = newFirst !== first;
|
||
|
|
}
|
||
|
|
this.isRangeChanged = isRangeChanged;
|
||
|
|
isScrollChanged && (this.first = newFirst);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
scrollInView(index, to, behavior = 'auto') {
|
||
|
|
if (to) {
|
||
|
|
const { first, viewport } = this.getRenderedRange();
|
||
|
|
const scrollTo = (left = 0, top = 0) => this.scrollTo({ left, top, behavior });
|
||
|
|
const isToStart = to === 'to-start';
|
||
|
|
const isToEnd = to === 'to-end';
|
||
|
|
if (isToStart) {
|
||
|
|
if (this.both) {
|
||
|
|
if (viewport.first.rows - first.rows > index[0]) {
|
||
|
|
scrollTo(viewport.first.cols * this._itemSize[1], (viewport.first.rows - 1) * this._itemSize[0]);
|
||
|
|
}
|
||
|
|
else if (viewport.first.cols - first.cols > index[1]) {
|
||
|
|
scrollTo((viewport.first.cols - 1) * this._itemSize[1], viewport.first.rows * this._itemSize[0]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (viewport.first - first > index) {
|
||
|
|
const pos = (viewport.first - 1) * this._itemSize;
|
||
|
|
this.horizontal ? scrollTo(pos, 0) : scrollTo(0, pos);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (isToEnd) {
|
||
|
|
if (this.both) {
|
||
|
|
if (viewport.last.rows - first.rows <= index[0] + 1) {
|
||
|
|
scrollTo(viewport.first.cols * this._itemSize[1], (viewport.first.rows + 1) * this._itemSize[0]);
|
||
|
|
}
|
||
|
|
else if (viewport.last.cols - first.cols <= index[1] + 1) {
|
||
|
|
scrollTo((viewport.first.cols + 1) * this._itemSize[1], viewport.first.rows * this._itemSize[0]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (viewport.last - first <= index + 1) {
|
||
|
|
const pos = (viewport.first + 1) * this._itemSize;
|
||
|
|
this.horizontal ? scrollTo(pos, 0) : scrollTo(0, pos);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.scrollToIndex(index, behavior);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getRenderedRange() {
|
||
|
|
const calculateFirstInViewport = (_pos, _size) => (_size || _pos ? Math.floor(_pos / (_size || _pos)) : 0);
|
||
|
|
let firstInViewport = this.first;
|
||
|
|
let lastInViewport = 0;
|
||
|
|
if (this.elementViewChild?.nativeElement) {
|
||
|
|
const { scrollTop, scrollLeft } = this.elementViewChild.nativeElement;
|
||
|
|
if (this.both) {
|
||
|
|
firstInViewport = { rows: calculateFirstInViewport(scrollTop, this._itemSize[0]), cols: calculateFirstInViewport(scrollLeft, this._itemSize[1]) };
|
||
|
|
lastInViewport = { rows: firstInViewport.rows + this.numItemsInViewport.rows, cols: firstInViewport.cols + this.numItemsInViewport.cols };
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const scrollPos = this.horizontal ? scrollLeft : scrollTop;
|
||
|
|
firstInViewport = calculateFirstInViewport(scrollPos, this._itemSize);
|
||
|
|
lastInViewport = firstInViewport + this.numItemsInViewport;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
first: this.first,
|
||
|
|
last: this.last,
|
||
|
|
viewport: {
|
||
|
|
first: firstInViewport,
|
||
|
|
last: lastInViewport
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
calculateNumItems() {
|
||
|
|
const contentPos = this.getContentPosition();
|
||
|
|
const contentWidth = (this.elementViewChild?.nativeElement ? this.elementViewChild.nativeElement.offsetWidth - contentPos.left : 0) || 0;
|
||
|
|
const contentHeight = (this.elementViewChild?.nativeElement ? this.elementViewChild.nativeElement.offsetHeight - contentPos.top : 0) || 0;
|
||
|
|
const calculateNumItemsInViewport = (_contentSize, _itemSize) => (_itemSize || _contentSize ? Math.ceil(_contentSize / (_itemSize || _contentSize)) : 0);
|
||
|
|
const calculateNumToleratedItems = (_numItems) => Math.ceil(_numItems / 2);
|
||
|
|
const numItemsInViewport = this.both
|
||
|
|
? { rows: calculateNumItemsInViewport(contentHeight, this._itemSize[0]), cols: calculateNumItemsInViewport(contentWidth, this._itemSize[1]) }
|
||
|
|
: calculateNumItemsInViewport(this.horizontal ? contentWidth : contentHeight, this._itemSize);
|
||
|
|
const numToleratedItems = this.d_numToleratedItems || (this.both ? [calculateNumToleratedItems(numItemsInViewport.rows), calculateNumToleratedItems(numItemsInViewport.cols)] : calculateNumToleratedItems(numItemsInViewport));
|
||
|
|
return { numItemsInViewport, numToleratedItems };
|
||
|
|
}
|
||
|
|
calculateOptions() {
|
||
|
|
const { numItemsInViewport, numToleratedItems } = this.calculateNumItems();
|
||
|
|
const calculateLast = (_first, _num, _numT, _isCols = false) => this.getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);
|
||
|
|
const first = this.first;
|
||
|
|
const last = this.both
|
||
|
|
? { rows: calculateLast(this.first.rows, numItemsInViewport.rows, numToleratedItems[0]), cols: calculateLast(this.first.cols, numItemsInViewport.cols, numToleratedItems[1], true) }
|
||
|
|
: calculateLast(this.first, numItemsInViewport, numToleratedItems);
|
||
|
|
this.last = last;
|
||
|
|
this.numItemsInViewport = numItemsInViewport;
|
||
|
|
this.d_numToleratedItems = numToleratedItems;
|
||
|
|
if (this.showLoader) {
|
||
|
|
this.loaderArr = this.both ? Array.from({ length: numItemsInViewport.rows }).map(() => Array.from({ length: numItemsInViewport.cols })) : Array.from({ length: numItemsInViewport });
|
||
|
|
}
|
||
|
|
if (this._lazy) {
|
||
|
|
Promise.resolve().then(() => {
|
||
|
|
this.lazyLoadState = {
|
||
|
|
first: this._step ? (this.both ? { rows: 0, cols: first.cols } : 0) : first,
|
||
|
|
last: Math.min(this._step ? this._step : this.last, this.items.length)
|
||
|
|
};
|
||
|
|
this.handleEvents('onLazyLoad', this.lazyLoadState);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
calculateAutoSize() {
|
||
|
|
if (this._autoSize && !this.d_loading) {
|
||
|
|
Promise.resolve().then(() => {
|
||
|
|
if (this.contentEl) {
|
||
|
|
this.contentEl.style.minHeight = this.contentEl.style.minWidth = 'auto';
|
||
|
|
this.contentEl.style.position = 'relative';
|
||
|
|
this.elementViewChild.nativeElement.style.contain = 'none';
|
||
|
|
const [contentWidth, contentHeight] = [DomHandler.getWidth(this.contentEl), DomHandler.getHeight(this.contentEl)];
|
||
|
|
contentWidth !== this.defaultContentWidth && (this.elementViewChild.nativeElement.style.width = '');
|
||
|
|
contentHeight !== this.defaultContentHeight && (this.elementViewChild.nativeElement.style.height = '');
|
||
|
|
const [width, height] = [DomHandler.getWidth(this.elementViewChild.nativeElement), DomHandler.getHeight(this.elementViewChild.nativeElement)];
|
||
|
|
(this.both || this.horizontal) && (this.elementViewChild.nativeElement.style.width = width < this.defaultWidth ? width + 'px' : this._scrollWidth || this.defaultWidth + 'px');
|
||
|
|
(this.both || this.vertical) && (this.elementViewChild.nativeElement.style.height = height < this.defaultHeight ? height + 'px' : this._scrollHeight || this.defaultHeight + 'px');
|
||
|
|
this.contentEl.style.minHeight = this.contentEl.style.minWidth = '';
|
||
|
|
this.contentEl.style.position = '';
|
||
|
|
this.elementViewChild.nativeElement.style.contain = '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getLast(last = 0, isCols = false) {
|
||
|
|
return this._items ? Math.min(isCols ? (this._columns || this._items[0]).length : this._items.length, last) : 0;
|
||
|
|
}
|
||
|
|
getContentPosition() {
|
||
|
|
if (this.contentEl) {
|
||
|
|
const style = getComputedStyle(this.contentEl);
|
||
|
|
const left = parseFloat(style.paddingLeft) + Math.max(parseFloat(style.left) || 0, 0);
|
||
|
|
const right = parseFloat(style.paddingRight) + Math.max(parseFloat(style.right) || 0, 0);
|
||
|
|
const top = parseFloat(style.paddingTop) + Math.max(parseFloat(style.top) || 0, 0);
|
||
|
|
const bottom = parseFloat(style.paddingBottom) + Math.max(parseFloat(style.bottom) || 0, 0);
|
||
|
|
return { left, right, top, bottom, x: left + right, y: top + bottom };
|
||
|
|
}
|
||
|
|
return { left: 0, right: 0, top: 0, bottom: 0, x: 0, y: 0 };
|
||
|
|
}
|
||
|
|
setSize() {
|
||
|
|
if (this.elementViewChild?.nativeElement) {
|
||
|
|
const parentElement = this.elementViewChild.nativeElement.parentElement.parentElement;
|
||
|
|
const width = this._scrollWidth || `${this.elementViewChild.nativeElement.offsetWidth || parentElement.offsetWidth}px`;
|
||
|
|
const height = this._scrollHeight || `${this.elementViewChild.nativeElement.offsetHeight || parentElement.offsetHeight}px`;
|
||
|
|
const setProp = (_name, _value) => (this.elementViewChild.nativeElement.style[_name] = _value);
|
||
|
|
if (this.both || this.horizontal) {
|
||
|
|
setProp('height', height);
|
||
|
|
setProp('width', width);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
setProp('height', height);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setSpacerSize() {
|
||
|
|
if (this._items) {
|
||
|
|
const contentPos = this.getContentPosition();
|
||
|
|
const setProp = (_name, _value, _size, _cpos = 0) => (this.spacerStyle = { ...this.spacerStyle, ...{ [`${_name}`]: (_value || []).length * _size + _cpos + 'px' } });
|
||
|
|
if (this.both) {
|
||
|
|
setProp('height', this._items, this._itemSize[0], contentPos.y);
|
||
|
|
setProp('width', this._columns || this._items[1], this._itemSize[1], contentPos.x);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.horizontal ? setProp('width', this._columns || this._items, this._itemSize, contentPos.x) : setProp('height', this._items, this._itemSize, contentPos.y);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setContentPosition(pos) {
|
||
|
|
if (this.contentEl && !this._appendOnly) {
|
||
|
|
const first = pos ? pos.first : this.first;
|
||
|
|
const calculateTranslateVal = (_first, _size) => _first * _size;
|
||
|
|
const setTransform = (_x = 0, _y = 0) => (this.contentStyle = { ...this.contentStyle, ...{ transform: `translate3d(${_x}px, ${_y}px, 0)` } });
|
||
|
|
if (this.both) {
|
||
|
|
setTransform(calculateTranslateVal(first.cols, this._itemSize[1]), calculateTranslateVal(first.rows, this._itemSize[0]));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const translateVal = calculateTranslateVal(first, this._itemSize);
|
||
|
|
this.horizontal ? setTransform(translateVal, 0) : setTransform(0, translateVal);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onScrollPositionChange(event) {
|
||
|
|
const target = event.target;
|
||
|
|
const contentPos = this.getContentPosition();
|
||
|
|
const calculateScrollPos = (_pos, _cpos) => (_pos ? (_pos > _cpos ? _pos - _cpos : _pos) : 0);
|
||
|
|
const calculateCurrentIndex = (_pos, _size) => (_size || _pos ? Math.floor(_pos / (_size || _pos)) : 0);
|
||
|
|
const calculateTriggerIndex = (_currentIndex, _first, _last, _num, _numT, _isScrollDownOrRight) => {
|
||
|
|
return _currentIndex <= _numT ? _numT : _isScrollDownOrRight ? _last - _num - _numT : _first + _numT - 1;
|
||
|
|
};
|
||
|
|
const calculateFirst = (_currentIndex, _triggerIndex, _first, _last, _num, _numT, _isScrollDownOrRight) => {
|
||
|
|
if (_currentIndex <= _numT)
|
||
|
|
return 0;
|
||
|
|
else
|
||
|
|
return Math.max(0, _isScrollDownOrRight ? (_currentIndex < _triggerIndex ? _first : _currentIndex - _numT) : _currentIndex > _triggerIndex ? _first : _currentIndex - 2 * _numT);
|
||
|
|
};
|
||
|
|
const calculateLast = (_currentIndex, _first, _last, _num, _numT, _isCols = false) => {
|
||
|
|
let lastValue = _first + _num + 2 * _numT;
|
||
|
|
if (_currentIndex >= _numT) {
|
||
|
|
lastValue += _numT + 1;
|
||
|
|
}
|
||
|
|
return this.getLast(lastValue, _isCols);
|
||
|
|
};
|
||
|
|
const scrollTop = calculateScrollPos(target.scrollTop, contentPos.top);
|
||
|
|
const scrollLeft = calculateScrollPos(target.scrollLeft, contentPos.left);
|
||
|
|
let newFirst = this.both ? { rows: 0, cols: 0 } : 0;
|
||
|
|
let newLast = this.last;
|
||
|
|
let isRangeChanged = false;
|
||
|
|
let newScrollPos = this.lastScrollPos;
|
||
|
|
if (this.both) {
|
||
|
|
const isScrollDown = this.lastScrollPos.top <= scrollTop;
|
||
|
|
const isScrollRight = this.lastScrollPos.left <= scrollLeft;
|
||
|
|
if (!this._appendOnly || (this._appendOnly && (isScrollDown || isScrollRight))) {
|
||
|
|
const currentIndex = { rows: calculateCurrentIndex(scrollTop, this._itemSize[0]), cols: calculateCurrentIndex(scrollLeft, this._itemSize[1]) };
|
||
|
|
const triggerIndex = {
|
||
|
|
rows: calculateTriggerIndex(currentIndex.rows, this.first.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0], isScrollDown),
|
||
|
|
cols: calculateTriggerIndex(currentIndex.cols, this.first.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], isScrollRight)
|
||
|
|
};
|
||
|
|
newFirst = {
|
||
|
|
rows: calculateFirst(currentIndex.rows, triggerIndex.rows, this.first.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0], isScrollDown),
|
||
|
|
cols: calculateFirst(currentIndex.cols, triggerIndex.cols, this.first.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], isScrollRight)
|
||
|
|
};
|
||
|
|
newLast = {
|
||
|
|
rows: calculateLast(currentIndex.rows, newFirst.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0]),
|
||
|
|
cols: calculateLast(currentIndex.cols, newFirst.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], true)
|
||
|
|
};
|
||
|
|
isRangeChanged = newFirst.rows !== this.first.rows || newLast.rows !== this.last.rows || newFirst.cols !== this.first.cols || newLast.cols !== this.last.cols || this.isRangeChanged;
|
||
|
|
newScrollPos = { top: scrollTop, left: scrollLeft };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const scrollPos = this.horizontal ? scrollLeft : scrollTop;
|
||
|
|
const isScrollDownOrRight = this.lastScrollPos <= scrollPos;
|
||
|
|
if (!this._appendOnly || (this._appendOnly && isScrollDownOrRight)) {
|
||
|
|
const currentIndex = calculateCurrentIndex(scrollPos, this._itemSize);
|
||
|
|
const triggerIndex = calculateTriggerIndex(currentIndex, this.first, this.last, this.numItemsInViewport, this.d_numToleratedItems, isScrollDownOrRight);
|
||
|
|
newFirst = calculateFirst(currentIndex, triggerIndex, this.first, this.last, this.numItemsInViewport, this.d_numToleratedItems, isScrollDownOrRight);
|
||
|
|
newLast = calculateLast(currentIndex, newFirst, this.last, this.numItemsInViewport, this.d_numToleratedItems);
|
||
|
|
isRangeChanged = newFirst !== this.first || newLast !== this.last || this.isRangeChanged;
|
||
|
|
newScrollPos = scrollPos;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
first: newFirst,
|
||
|
|
last: newLast,
|
||
|
|
isRangeChanged,
|
||
|
|
scrollPos: newScrollPos
|
||
|
|
};
|
||
|
|
}
|
||
|
|
onScrollChange(event) {
|
||
|
|
const { first, last, isRangeChanged, scrollPos } = this.onScrollPositionChange(event);
|
||
|
|
if (isRangeChanged) {
|
||
|
|
const newState = { first, last };
|
||
|
|
this.setContentPosition(newState);
|
||
|
|
this.first = first;
|
||
|
|
this.last = last;
|
||
|
|
this.lastScrollPos = scrollPos;
|
||
|
|
this.handleEvents('onScrollIndexChange', newState);
|
||
|
|
if (this._lazy && this.isPageChanged(first)) {
|
||
|
|
const lazyLoadState = {
|
||
|
|
first: this._step ? Math.min(this.getPageByFirst(first) * this._step, this.items.length - this._step) : first,
|
||
|
|
last: Math.min(this._step ? (this.getPageByFirst(first) + 1) * this._step : last, this.items.length)
|
||
|
|
};
|
||
|
|
const isLazyStateChanged = this.lazyLoadState.first !== lazyLoadState.first || this.lazyLoadState.last !== lazyLoadState.last;
|
||
|
|
isLazyStateChanged && this.handleEvents('onLazyLoad', lazyLoadState);
|
||
|
|
this.lazyLoadState = lazyLoadState;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onContainerScroll(event) {
|
||
|
|
this.handleEvents('onScroll', { originalEvent: event });
|
||
|
|
if (this._delay && this.isPageChanged()) {
|
||
|
|
if (this.scrollTimeout) {
|
||
|
|
clearTimeout(this.scrollTimeout);
|
||
|
|
}
|
||
|
|
if (!this.d_loading && this.showLoader) {
|
||
|
|
const { isRangeChanged } = this.onScrollPositionChange(event);
|
||
|
|
const changed = isRangeChanged || (this._step ? this.isPageChanged() : false);
|
||
|
|
if (changed) {
|
||
|
|
this.d_loading = true;
|
||
|
|
this.cd.detectChanges();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.scrollTimeout = setTimeout(() => {
|
||
|
|
this.onScrollChange(event);
|
||
|
|
if (this.d_loading && this.showLoader && (!this._lazy || this._loading === undefined)) {
|
||
|
|
this.d_loading = false;
|
||
|
|
this.page = this.getPageByFirst();
|
||
|
|
this.cd.detectChanges();
|
||
|
|
}
|
||
|
|
}, this._delay);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
!this.d_loading && this.onScrollChange(event);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
bindResizeListener() {
|
||
|
|
if (isPlatformBrowser(this.platformId)) {
|
||
|
|
if (!this.windowResizeListener) {
|
||
|
|
this.zone.runOutsideAngular(() => {
|
||
|
|
const window = this.document.defaultView;
|
||
|
|
const event = DomHandler.isTouchDevice() ? 'orientationchange' : 'resize';
|
||
|
|
this.windowResizeListener = this.renderer.listen(window, event, this.onWindowResize.bind(this));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
unbindResizeListener() {
|
||
|
|
if (this.windowResizeListener) {
|
||
|
|
this.windowResizeListener();
|
||
|
|
this.windowResizeListener = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onWindowResize() {
|
||
|
|
if (this.resizeTimeout) {
|
||
|
|
clearTimeout(this.resizeTimeout);
|
||
|
|
}
|
||
|
|
this.resizeTimeout = setTimeout(() => {
|
||
|
|
if (DomHandler.isVisible(this.elementViewChild?.nativeElement)) {
|
||
|
|
const [width, height] = [DomHandler.getWidth(this.elementViewChild?.nativeElement), DomHandler.getHeight(this.elementViewChild?.nativeElement)];
|
||
|
|
const [isDiffWidth, isDiffHeight] = [width !== this.defaultWidth, height !== this.defaultHeight];
|
||
|
|
const reinit = this.both ? isDiffWidth || isDiffHeight : this.horizontal ? isDiffWidth : this.vertical ? isDiffHeight : false;
|
||
|
|
reinit &&
|
||
|
|
this.zone.run(() => {
|
||
|
|
this.d_numToleratedItems = this._numToleratedItems;
|
||
|
|
this.defaultWidth = width;
|
||
|
|
this.defaultHeight = height;
|
||
|
|
this.defaultContentWidth = DomHandler.getWidth(this.contentEl);
|
||
|
|
this.defaultContentHeight = DomHandler.getHeight(this.contentEl);
|
||
|
|
this.init();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, this._resizeDelay);
|
||
|
|
}
|
||
|
|
handleEvents(name, params) {
|
||
|
|
//@ts-ignore
|
||
|
|
return this.options && this.options[name] ? this.options[name](params) : this[name].emit(params);
|
||
|
|
}
|
||
|
|
getContentOptions() {
|
||
|
|
return {
|
||
|
|
contentStyleClass: `p-scroller-content ${this.d_loading ? 'p-scroller-loading' : ''}`,
|
||
|
|
items: this.loadedItems,
|
||
|
|
getItemOptions: (index) => this.getOptions(index),
|
||
|
|
loading: this.d_loading,
|
||
|
|
getLoaderOptions: (index, options) => this.getLoaderOptions(index, options),
|
||
|
|
itemSize: this._itemSize,
|
||
|
|
rows: this.loadedRows,
|
||
|
|
columns: this.loadedColumns,
|
||
|
|
spacerStyle: this.spacerStyle,
|
||
|
|
contentStyle: this.contentStyle,
|
||
|
|
vertical: this.vertical,
|
||
|
|
horizontal: this.horizontal,
|
||
|
|
both: this.both
|
||
|
|
};
|
||
|
|
}
|
||
|
|
getOptions(renderedIndex) {
|
||
|
|
const count = (this._items || []).length;
|
||
|
|
const index = this.both ? this.first.rows + renderedIndex : this.first + renderedIndex;
|
||
|
|
return {
|
||
|
|
index,
|
||
|
|
count,
|
||
|
|
first: index === 0,
|
||
|
|
last: index === count - 1,
|
||
|
|
even: index % 2 === 0,
|
||
|
|
odd: index % 2 !== 0
|
||
|
|
};
|
||
|
|
}
|
||
|
|
getLoaderOptions(index, extOptions) {
|
||
|
|
const count = this.loaderArr.length;
|
||
|
|
return {
|
||
|
|
index,
|
||
|
|
count,
|
||
|
|
first: index === 0,
|
||
|
|
last: index === count - 1,
|
||
|
|
even: index % 2 === 0,
|
||
|
|
odd: index % 2 !== 0,
|
||
|
|
...extOptions
|
||
|
|
};
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: Scroller, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: Scroller, selector: "p-scroller", inputs: { id: "id", style: "style", styleClass: "styleClass", tabindex: "tabindex", items: "items", itemSize: "itemSize", scrollHeight: "scrollHeight", scrollWidth: "scrollWidth", orientation: "orientation", step: "step", delay: "delay", resizeDelay: "resizeDelay", appendOnly: "appendOnly", inline: "inline", lazy: "lazy", disabled: "disabled", loaderDisabled: "loaderDisabled", columns: "columns", showSpacer: "showSpacer", showLoader: "showLoader", numToleratedItems: "numToleratedItems", loading: "loading", autoSize: "autoSize", trackBy: "trackBy", options: "options" }, outputs: { onLazyLoad: "onLazyLoad", onScroll: "onScroll", onScrollIndexChange: "onScrollIndexChange" }, host: { classAttribute: "p-scroller-viewport p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "elementViewChild", first: true, predicate: ["element"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
||
|
|
<ng-container *ngIf="!_disabled; else disabledContainer">
|
||
|
|
<div
|
||
|
|
#element
|
||
|
|
[attr.id]="_id"
|
||
|
|
[attr.tabindex]="tabindex"
|
||
|
|
[ngStyle]="_style"
|
||
|
|
[class]="_styleClass"
|
||
|
|
[ngClass]="{ 'p-scroller': true, 'p-scroller-inline': inline, 'p-both-scroll': both, 'p-horizontal-scroll': horizontal }"
|
||
|
|
(scroll)="onContainerScroll($event)"
|
||
|
|
[attr.data-pc-name]="'scroller'"
|
||
|
|
[attr.data-pc-section]="'root'"
|
||
|
|
>
|
||
|
|
<ng-container *ngIf="contentTemplate; else buildInContent">
|
||
|
|
<ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: loadedItems, options: getContentOptions() }"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
<ng-template #buildInContent>
|
||
|
|
<div #content class="p-scroller-content" [ngClass]="{ 'p-scroller-loading': d_loading }" [ngStyle]="contentStyle" [attr.data-pc-section]="'content'">
|
||
|
|
<ng-container *ngFor="let item of loadedItems; let index = index; trackBy: _trackBy || index">
|
||
|
|
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, options: getOptions(index) }"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
<div *ngIf="_showSpacer" class="p-scroller-spacer" [ngStyle]="spacerStyle" [attr.data-pc-section]="'spacer'"></div>
|
||
|
|
<div *ngIf="!loaderDisabled && _showLoader && d_loading" class="p-scroller-loader" [ngClass]="{ 'p-component-overlay': !loaderTemplate }" [attr.data-pc-section]="'loader'">
|
||
|
|
<ng-container *ngIf="loaderTemplate; else buildInLoader">
|
||
|
|
<ng-container *ngFor="let item of loaderArr; let index = index">
|
||
|
|
<ng-container *ngTemplateOutlet="loaderTemplate; context: { options: getLoaderOptions(index, both && { numCols: _numItemsInViewport.cols }) }"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
</ng-container>
|
||
|
|
<ng-template #buildInLoader>
|
||
|
|
<ng-container *ngIf="loaderIconTemplate; else buildInLoaderIcon">
|
||
|
|
<ng-container *ngTemplateOutlet="loaderIconTemplate; context: { options: { styleClass: 'p-scroller-loading-icon' } }"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
<ng-template #buildInLoaderIcon>
|
||
|
|
<SpinnerIcon [styleClass]="'p-scroller-loading-icon pi-spin'" [attr.data-pc-section]="'loadingIcon'" />
|
||
|
|
</ng-template>
|
||
|
|
</ng-template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</ng-container>
|
||
|
|
<ng-template #disabledContainer>
|
||
|
|
<ng-content></ng-content>
|
||
|
|
<ng-container *ngIf="contentTemplate">
|
||
|
|
<ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: items, options: { rows: _items, columns: loadedColumns } }"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
</ng-template>
|
||
|
|
`, isInline: true, styles: ["@layer primeng{p-scroller{flex:1;outline:0 none}.p-scroller{position:relative;overflow:auto;contain:strict;transform:translateZ(0);will-change:scroll-position;outline:0 none}.p-scroller-content{position:absolute;top:0;left:0;min-height:100%;min-width:100%;will-change:transform}.p-scroller-spacer{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0;pointer-events:none}.p-scroller-loader{position:sticky;top:0;left:0;width:100%;height:100%}.p-scroller-loader.p-component-overlay{display:flex;align-items:center;justify-content:center}.p-scroller-loading-icon{scale:2}.p-scroller-inline .p-scroller-content{position:static}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => SpinnerIcon), selector: "SpinnerIcon" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: Scroller, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{ selector: 'p-scroller', template: `
|
||
|
|
<ng-container *ngIf="!_disabled; else disabledContainer">
|
||
|
|
<div
|
||
|
|
#element
|
||
|
|
[attr.id]="_id"
|
||
|
|
[attr.tabindex]="tabindex"
|
||
|
|
[ngStyle]="_style"
|
||
|
|
[class]="_styleClass"
|
||
|
|
[ngClass]="{ 'p-scroller': true, 'p-scroller-inline': inline, 'p-both-scroll': both, 'p-horizontal-scroll': horizontal }"
|
||
|
|
(scroll)="onContainerScroll($event)"
|
||
|
|
[attr.data-pc-name]="'scroller'"
|
||
|
|
[attr.data-pc-section]="'root'"
|
||
|
|
>
|
||
|
|
<ng-container *ngIf="contentTemplate; else buildInContent">
|
||
|
|
<ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: loadedItems, options: getContentOptions() }"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
<ng-template #buildInContent>
|
||
|
|
<div #content class="p-scroller-content" [ngClass]="{ 'p-scroller-loading': d_loading }" [ngStyle]="contentStyle" [attr.data-pc-section]="'content'">
|
||
|
|
<ng-container *ngFor="let item of loadedItems; let index = index; trackBy: _trackBy || index">
|
||
|
|
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, options: getOptions(index) }"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
<div *ngIf="_showSpacer" class="p-scroller-spacer" [ngStyle]="spacerStyle" [attr.data-pc-section]="'spacer'"></div>
|
||
|
|
<div *ngIf="!loaderDisabled && _showLoader && d_loading" class="p-scroller-loader" [ngClass]="{ 'p-component-overlay': !loaderTemplate }" [attr.data-pc-section]="'loader'">
|
||
|
|
<ng-container *ngIf="loaderTemplate; else buildInLoader">
|
||
|
|
<ng-container *ngFor="let item of loaderArr; let index = index">
|
||
|
|
<ng-container *ngTemplateOutlet="loaderTemplate; context: { options: getLoaderOptions(index, both && { numCols: _numItemsInViewport.cols }) }"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
</ng-container>
|
||
|
|
<ng-template #buildInLoader>
|
||
|
|
<ng-container *ngIf="loaderIconTemplate; else buildInLoaderIcon">
|
||
|
|
<ng-container *ngTemplateOutlet="loaderIconTemplate; context: { options: { styleClass: 'p-scroller-loading-icon' } }"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
<ng-template #buildInLoaderIcon>
|
||
|
|
<SpinnerIcon [styleClass]="'p-scroller-loading-icon pi-spin'" [attr.data-pc-section]="'loadingIcon'" />
|
||
|
|
</ng-template>
|
||
|
|
</ng-template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</ng-container>
|
||
|
|
<ng-template #disabledContainer>
|
||
|
|
<ng-content></ng-content>
|
||
|
|
<ng-container *ngIf="contentTemplate">
|
||
|
|
<ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: items, options: { rows: _items, columns: loadedColumns } }"></ng-container>
|
||
|
|
</ng-container>
|
||
|
|
</ng-template>
|
||
|
|
`, changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, host: {
|
||
|
|
class: 'p-scroller-viewport p-element'
|
||
|
|
}, styles: ["@layer primeng{p-scroller{flex:1;outline:0 none}.p-scroller{position:relative;overflow:auto;contain:strict;transform:translateZ(0);will-change:scroll-position;outline:0 none}.p-scroller-content{position:absolute;top:0;left:0;min-height:100%;min-width:100%;will-change:transform}.p-scroller-spacer{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0;pointer-events:none}.p-scroller-loader{position:sticky;top:0;left:0;width:100%;height:100%}.p-scroller-loader.p-component-overlay{display:flex;align-items:center;justify-content:center}.p-scroller-loading-icon{scale:2}.p-scroller-inline .p-scroller-content{position:static}}\n"] }]
|
||
|
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }, { type: undefined, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [PLATFORM_ID]
|
||
|
|
}] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { id: [{
|
||
|
|
type: Input
|
||
|
|
}], style: [{
|
||
|
|
type: Input
|
||
|
|
}], styleClass: [{
|
||
|
|
type: Input
|
||
|
|
}], tabindex: [{
|
||
|
|
type: Input
|
||
|
|
}], items: [{
|
||
|
|
type: Input
|
||
|
|
}], itemSize: [{
|
||
|
|
type: Input
|
||
|
|
}], scrollHeight: [{
|
||
|
|
type: Input
|
||
|
|
}], scrollWidth: [{
|
||
|
|
type: Input
|
||
|
|
}], orientation: [{
|
||
|
|
type: Input
|
||
|
|
}], step: [{
|
||
|
|
type: Input
|
||
|
|
}], delay: [{
|
||
|
|
type: Input
|
||
|
|
}], resizeDelay: [{
|
||
|
|
type: Input
|
||
|
|
}], appendOnly: [{
|
||
|
|
type: Input
|
||
|
|
}], inline: [{
|
||
|
|
type: Input
|
||
|
|
}], lazy: [{
|
||
|
|
type: Input
|
||
|
|
}], disabled: [{
|
||
|
|
type: Input
|
||
|
|
}], loaderDisabled: [{
|
||
|
|
type: Input
|
||
|
|
}], columns: [{
|
||
|
|
type: Input
|
||
|
|
}], showSpacer: [{
|
||
|
|
type: Input
|
||
|
|
}], showLoader: [{
|
||
|
|
type: Input
|
||
|
|
}], numToleratedItems: [{
|
||
|
|
type: Input
|
||
|
|
}], loading: [{
|
||
|
|
type: Input
|
||
|
|
}], autoSize: [{
|
||
|
|
type: Input
|
||
|
|
}], trackBy: [{
|
||
|
|
type: Input
|
||
|
|
}], options: [{
|
||
|
|
type: Input
|
||
|
|
}], onLazyLoad: [{
|
||
|
|
type: Output
|
||
|
|
}], onScroll: [{
|
||
|
|
type: Output
|
||
|
|
}], onScrollIndexChange: [{
|
||
|
|
type: Output
|
||
|
|
}], elementViewChild: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['element']
|
||
|
|
}], contentViewChild: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['content']
|
||
|
|
}], templates: [{
|
||
|
|
type: ContentChildren,
|
||
|
|
args: [PrimeTemplate]
|
||
|
|
}] } });
|
||
|
|
class ScrollerModule {
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ScrollerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
||
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: ScrollerModule, declarations: [Scroller], imports: [CommonModule, SharedModule, SpinnerIcon], exports: [Scroller, SharedModule] });
|
||
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ScrollerModule, imports: [CommonModule, SharedModule, SpinnerIcon, SharedModule] });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ScrollerModule, decorators: [{
|
||
|
|
type: NgModule,
|
||
|
|
args: [{
|
||
|
|
imports: [CommonModule, SharedModule, SpinnerIcon],
|
||
|
|
exports: [Scroller, SharedModule],
|
||
|
|
declarations: [Scroller]
|
||
|
|
}]
|
||
|
|
}] });
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Generated bundle index. Do not edit.
|
||
|
|
*/
|
||
|
|
|
||
|
|
export { Scroller, ScrollerModule };
|
||
|
|
//# sourceMappingURL=primeng-scroller.mjs.map
|