diff --git a/README.md b/README.md
index 1221db67..93749549 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,14 @@
[![Build Status](https://travis-ci.com/dhilt/ngx-ui-scroll.svg?branch=master)](https://travis-ci.com/dhilt/ngx-ui-scroll)
-[![npm version](https://badge.fury.io/js/ngx-ui-scroll.svg)](https://www.npmjs.com/package/ngx-ui-scroll)
+[![npm version](https://badge.fury.io/js/ngx-ui-scroll.svg)](https://www.npmjs.com/package/ngx-ui-scroll)
# NgxUiScroll
Unlimited bidirectional scrolling over limited viewport. A directive for [Angular](https://angular.io/) framework. Built with [angular-library-starter](https://github.com/robisim74/angular-library-starter). Inspired by [angular-ui-scroll](https://github.com/angular-ui/ui-scroll) (AngularJS, since 2013). Demo is available at [dhilt.github.io/ngx-ui-scroll](https://dhilt.github.io/ngx-ui-scroll/).
+
+can donate? go here 👉 make open-source world better
+
+
- [Motivation](#motivation)
- [Features](#features)
- [Getting](#getting)
@@ -13,11 +17,13 @@ Unlimited bidirectional scrolling over limited viewport. A directive for [Angula
- [Adapter API](#adapter-api)
- [Development](#development)
+
+
### Motivation
-Scrolling large data sets may cause performance issues. Many DOM elements, many data-bindings, many event listeners... The common way to improve this case is to render only a small portion of the data set visible to a user. Other data set elements that are not visible to a user are virtualized with upward and downward empty padding elements which should give us a consistent viewport with consistent scrollbar parameters.
+Scrolling large datasets may cause performance issues. Many DOM elements, many data-bindings, many event listeners... The common way to improve the performance is to render only a small portion of the dataset visible to a user. Other dataset elements that are not visible to a user are virtualized with upward and downward empty padding elements which should provide a consistent viewport with consistent scrollbar parameters.
-The \*uiScroll is structural directive that works like \*ngFor and renders a templated element once per item from a collection. By requesting the external Datasource (the implementation of which is a developer responsibility) the \*uiScroll directive fetches necessary portion of the data set and renders corresponded elements until the visible part of the viewport is filled out. It starts to retrieve new data to render new elements again if a user scrolls to the edge of visible element list. It dynamically destroys elements as they become invisible and recreates them if they become visible again.
+The \*uiScroll is a structural directive that works like \*ngFor and renders a templated element once per item from a collection. By requesting the external Datasource (the implementation of which is a developer responsibility) the \*uiScroll directive fetches necessary portion of the dataset and renders corresponded elements until the visible part of the viewport is filled out. It starts to retrieve new data to render new elements again if a user scrolls to the edge of visible element list. It dynamically destroys elements as they become invisible and recreates them if they become visible again.
@@ -27,11 +33,11 @@ The \*uiScroll is structural directive that works like \*ngFor and renders a tem
- unlimited bidirectional virtual scroll
- lots of virtualization settings
- super easy templating
- - infinite mode, [demo](https://dhilt.github.io/ngx-ui-scroll/#settings#infinite-mode)
- - horizontal mode, [demo](https://dhilt.github.io/ngx-ui-scroll/#settings#horizontal-mode)
- - entire window scrollable, [demo](https://dhilt.github.io/ngx-ui-scroll/#settings#window-viewport)
- - items with non-constant heights, [demo](https://dhilt.github.io/ngx-ui-scroll/#settings#different-item-heights)
- - API Adapter object to manipulate and assess the scroller, [demos](https://dhilt.github.io/ngx-ui-scroll/#/adapter)
+ - infinite mode, [demo](https://dhilt.github.io/ngx-ui-scroll/settings#infinite-mode)
+ - horizontal mode, [demo](https://dhilt.github.io/ngx-ui-scroll/settings#horizontal-mode)
+ - entire window scrollable, [demo](https://dhilt.github.io/ngx-ui-scroll/settings#window-viewport)
+ - items with non-constant heights, [demo](https://dhilt.github.io/ngx-ui-scroll/settings#different-item-heights)
+ - API Adapter object to manipulate and assess the scroller, [demos](https://dhilt.github.io/ngx-ui-scroll/adapter)
### Getting
@@ -80,7 +86,7 @@ where the viewport is a scrollable area of finite height:
}
```
-If the height of the viewport is not constrained, it will pull the entire content of the datasource and no scrollbar will appear. Previous versions of the library (prior to 1.6.4) had the requirement that the value of "overflow-anchor" css property should be set to "none" for the viewport element.
+If the height of the viewport is not constrained, it will pull the entire content of the datasource and no scrollbar will appear.
\*uiScroll acts like \*ngFor, but the datasource is an object of special type (IDatasource). It implements method _get_ to be used by the \*uiScroll directive to access the data by _index_ and _count_ parameters. The directive calls `Datasource.get` method each time a user scrolls to the edge of visible element list. That's the API provided by the \*uiScroll.
@@ -111,7 +117,7 @@ _Datasource.get_ has 3 signatures: callback based, Promise based and Observable
};
```
-More details could be found on the [Datasource demo page](https://dhilt.github.io/ngx-ui-scroll/#/datasource).
+More details could be found on the [Datasource demo page](https://dhilt.github.io/ngx-ui-scroll/datasource).
### Settings
@@ -132,18 +138,18 @@ Settings are being applied during the uiScroll initialization and have an impact
|Name|Type|Default|Description|
|:--|:----:|:----------:|:----------|
-|[bufferSize](https://dhilt.github.io/ngx-ui-scroll/#settings#buffer-size)|number, integer|5| Fixes minimal size of the pack of the datasource items to be requested per single _Datasource.get_ call. Can't be less than 1. |
-|[padding](https://dhilt.github.io/ngx-ui-scroll/#settings#padding)|number, float|0.5| Determines viewport outlets relative to the viewport's size that need to be filled. For example, 0.5 means that we'll have as many items at a moment as needed to fill out 100% of the visible part of the viewport, + 50% of the viewport size in backward direction and + 50% in forward direction. The value can't be less than 0.01. |
-|[startIndex](https://dhilt.github.io/ngx-ui-scroll/#settings#start-index)|number, integer|1| Specifies item index to be requested/rendered first. Can be any, but real datasource boundaries should be taken into account. |
-|[minIndex](https://dhilt.github.io/ngx-ui-scroll/#settings#min-max-indexes)|number, integer|-Infinity| Fixes absolute minimal index of the data set. The datasource left boundary. |
-|[maxIndex](https://dhilt.github.io/ngx-ui-scroll/#settings#min-max-indexes)|number, integer|+Infinity| Fixes absolute maximal index of the data set. The datasource right boundary. |
-|[infinite](https://dhilt.github.io/ngx-ui-scroll/#settings#infinite-mode)|boolean|false| Allows to run "infinite" mode, when items rendered once are never removed. |
-|[horizontal](https://dhilt.github.io/ngx-ui-scroll/#settings#horizontal-mode)|boolean|false| Allows to run "horizontal" mode, when the viewport's orientation is horizontal. |
-|[windowViewport](https://dhilt.github.io/ngx-ui-scroll/#settings#window-viewport)|boolean|false| Allows to run "entire window scrollable" mode, when the entire window becomes the scrollable viewport. |
+|[bufferSize](https://dhilt.github.io/ngx-ui-scroll/settings#buffer-size)|number, integer|5| Fixes minimal size of the pack of the datasource items to be requested per single _Datasource.get_ call. Can't be less than 1. |
+|[padding](https://dhilt.github.io/ngx-ui-scroll/settings#padding)|number, float|0.5| Determines viewport outlets relative to the viewport's size that need to be filled. For example, 0.5 means that we'll have as many items at a moment as needed to fill out 100% of the visible part of the viewport, + 50% of the viewport size in backward direction and + 50% in forward direction. The value can't be less than 0.01. |
+|[startIndex](https://dhilt.github.io/ngx-ui-scroll/settings#start-index)|number, integer|1| Specifies item index to be requested/rendered first. Can be any, but real datasource boundaries should be taken into account. |
+|[minIndex](https://dhilt.github.io/ngx-ui-scroll/settings#min-max-indexes)|number, integer|-Infinity| Fixes absolute minimal index of the dataset. The datasource left boundary. |
+|[maxIndex](https://dhilt.github.io/ngx-ui-scroll/settings#min-max-indexes)|number, integer|+Infinity| Fixes absolute maximal index of the dataset. The datasource right boundary. |
+|[infinite](https://dhilt.github.io/ngx-ui-scroll/settings#infinite-mode)|boolean|false| Allows to run "infinite" mode, when items rendered once are never removed. |
+|[horizontal](https://dhilt.github.io/ngx-ui-scroll/settings#horizontal-mode)|boolean|false| Allows to run "horizontal" mode, when the viewport's orientation is horizontal. |
+|[windowViewport](https://dhilt.github.io/ngx-ui-scroll/settings#window-viewport)|boolean|false| Allows to run "entire window scrollable" mode, when the entire window becomes the scrollable viewport. |
### Adapter API
-The uiScroll has API to assess its parameters and provide some manipulations run-time. This API is available via special Adapter object. The datasource needs to be instantiated via operator "new" for the Adapter object to be added to it:
+The uiScroll has API to assess its parameters and provide some manipulations at runtime. This API is available via special Adapter object. The datasource needs to be instantiated via operator "new" for the Adapter object to be added to it:
```javascript
import { Datasource } from 'ngx-ui-scroll';
@@ -159,35 +165,36 @@ Then `this.datasource.adapter.version`, `this.datasource.adapter.reload()` and o
|Name|Type|Description|
|:--|:----|:----------|
|version|string|Current version of ngx-ui-scroll library|
-|[isLoading](https://dhilt.github.io/ngx-ui-scroll/#/adapter#is-loading)|boolean|Indicates whether the uiScroll is working ot not. |
-|[isLoading$](https://dhilt.github.io/ngx-ui-scroll/#/adapter#is-loading)|Subject<boolean>|An Observable version of "isLoading" property. |
-|[itemsCount](https://dhilt.github.io/ngx-ui-scroll/#/adapter#items-count)|number|A number of items that are rendered in the viewport at a moment.|
-|[bof](https://dhilt.github.io/ngx-ui-scroll/#/adapter#bof-eof)|boolean|Indicates whether the beginning of the dataset is reached or not.|
-|[bof$](https://dhilt.github.io/ngx-ui-scroll/#/adapter#bof-eof)|Subject<boolean>|An Observable version of "bof" property.|
-|[eof](https://dhilt.github.io/ngx-ui-scroll/#/adapter#bof-eof)|boolean|Indicates whether the end of the dataset is reached or not.|
-|[eof$](https://dhilt.github.io/ngx-ui-scroll/#/adapter#bof-eof)|Subject<boolean>|An Observable version of "eof" property.|
-|[firstVisible](https://dhilt.github.io/ngx-ui-scroll/#/adapter#first-last-visible-items)|ItemAdapter { $index: number; data: any; element?: HTMLElement; }|Object of ItemAdapter type containing information about first visible item, where "$index" corresponds to the datasource item index value, "data" is exactly the item's content, "element" is a link to DOM element which is relevant to the item. |
-|[firstVisible$](https://dhilt.github.io/ngx-ui-scroll/#/adapter#first-last-visible-items)|BehaviorSubject <ItemAdapter>|An observable version of "firstVisible" property. |
-|[lastVisible](https://dhilt.github.io/ngx-ui-scroll/#/adapter#first-last-visible-items)|ItemAdapter { $index: number; data: any; element?: HTMLElement; }|Object of ItemAdapter type containing information about last visible item. |
-|[lastVisible$](https://dhilt.github.io/ngx-ui-scroll/#/adapter#first-last-visible-items)|BehaviorSubject <ItemAdapter>|An observable version of "lastVisible" property. |
+|[isLoading](https://dhilt.github.io/ngx-ui-scroll/adapter#is-loading)|boolean|Indicates whether the uiScroll is working ot not. |
+|[isLoading$](https://dhilt.github.io/ngx-ui-scroll/adapter#is-loading)|Subject<boolean>|An Observable version of "isLoading" property. |
+|[itemsCount](https://dhilt.github.io/ngx-ui-scroll/adapter#items-count)|number|A number of items that are rendered in the viewport at a moment.|
+|[bof](https://dhilt.github.io/ngx-ui-scroll/adapter#bof-eof)|boolean|Indicates whether the beginning of the dataset is reached or not.|
+|[bof$](https://dhilt.github.io/ngx-ui-scroll/adapter#bof-eof)|Subject<boolean>|An Observable version of "bof" property.|
+|[eof](https://dhilt.github.io/ngx-ui-scroll/adapter#bof-eof)|boolean|Indicates whether the end of the dataset is reached or not.|
+|[eof$](https://dhilt.github.io/ngx-ui-scroll/adapter#bof-eof)|Subject<boolean>|An Observable version of "eof" property.|
+|[firstVisible](https://dhilt.github.io/ngx-ui-scroll/adapter#first-last-visible-items)|ItemAdapter { $index: number; data: any; element?: HTMLElement; }|Object of ItemAdapter type containing information about first visible item, where "$index" corresponds to the datasource item index value, "data" is exactly the item's content, "element" is a link to DOM element which is relevant to the item. |
+|[firstVisible$](https://dhilt.github.io/ngx-ui-scroll/adapter#first-last-visible-items)|BehaviorSubject <ItemAdapter>|An observable version of "firstVisible" property. |
+|[lastVisible](https://dhilt.github.io/ngx-ui-scroll/adapter#first-last-visible-items)|ItemAdapter { $index: number; data: any; element?: HTMLElement; }|Object of ItemAdapter type containing information about last visible item. |
+|[lastVisible$](https://dhilt.github.io/ngx-ui-scroll/adapter#first-last-visible-items)|BehaviorSubject <ItemAdapter>|An observable version of "lastVisible" property. |
Below is the list of invocable methods of the Adapter API with description and links to demos.
|Name|Parameters|Description|
|:--|:----|:----------|
-|[relax](https://dhilt.github.io/ngx-ui-scroll/#/adapter#relax)|(callback?: Function)|Resolves asynchronously when there are no pending processes. If the _callback_ is set, it will be executed right before resolving. Basically, it needs to protect with the _relax_ every piece of the App logic, that might be sensitive to the uiScroll internal processes, to avoid interference and race conditions. |
-|[reload](https://dhilt.github.io/ngx-ui-scroll/#/adapter#reload)|(startIndex?: number)|Resets the items buffer, resets the viewport params and starts fetching items from _startIndex_ (if set). |
-|[reset](https://dhilt.github.io/ngx-ui-scroll/#/adapter#reset)|(datasource?: IDatasource)|Performs hard reset of the uiScroll internal state by re-instantiating all its entities (instead of reusing them when _reload_). If _datasource_ argument is passed, it will be treated as new Datasource. All props of the _datasource_ are optional and the result Datasource will be a combination (merge) of the original one and the one passed as an argument. |
-|[append](https://dhilt.github.io/ngx-ui-scroll/#/adapter#append-prepend)|(options: { items: any[], eof?: boolean })
(items: any | any[], eof?: boolean) * * old signature, deprecated|Adds items to the end of the uiScroll dataset. If eof parameter is not set, items will be added and rendered immediately, they will be placed right after the last item in the uiScroll buffer. If eof parameter is set to true, items will be added and rendered only if the end of the dataset is reached; otherwise, these items will be virtualized. See also [bof/eof](https://dhilt.github.io/ngx-ui-scroll/#/adapter#bof-eof) demo. |
-|[prepend](https://dhilt.github.io/ngx-ui-scroll/#/adapter#append-prepend)|(options: { items: any[], bof?: boolean })
(items: any | any[], bof?: boolean) * * old signature, deprecated|Adds items to the beginning of the uiScroll dataset. If bof parameter is not set, items will be added and rendered immediately, they will be placed right before the first item in the uiScroll buffer. If bof parameter is set to true, items will be added and rendered only if the beginning of the dataset is reached; otherwise, these items will be virtualized. See also [bof/eof](https://dhilt.github.io/ngx-ui-scroll/#/adapter#bof-eof) demo. |
-|[check](https://dhilt.github.io/ngx-ui-scroll/#/adapter#check-size)| |Checks if any of current items changed it's size and runs a procedure to provide internal consistency and new items fetching if needed. |
-|[remove](https://dhilt.github.io/ngx-ui-scroll/#/adapter#remove)|(options: { predicate?: ItemsPredicate, indexes?: number[], increase?: boolean })
(func: ItemsPredicate) * * old signature, deprecated
type ItemsPredicate = (item: ItemAdapter) => boolean|Removes items form buffer and/or virtually. Predicate is a function to be applied to every item presently in the buffer. Predicate must return a boolean value. If predicate's return value is true, the item will be removed. Alternatively, if _indexes_ array is passed, the items whose indexes match the list will be removed. Only one of the _predicate_ and _indexes_ options is allowed. In case of _indexes_, the deletion is performed also virtually. By default, indexes of the items following the deleted ones are decremented. Instead, if _increase_ is set to _true_, indexes of the items before the removed ones will be increased. |
-|[clip](https://dhilt.github.io/ngx-ui-scroll/#/adapter#clip)|(options: { forwardOnly?: boolean, backwardOnly?: boolean })|Removes out-of-viewport items on demand. The direction in which invisible items should be clipped can be specified by passing an options object. If no options is passed (or both properties are set to _true_), clipping will occur in both directions. |
-|[insert](https://dhilt.github.io/ngx-ui-scroll/#/adapter#insert)|(options: { items: any[], before?: ItemsPredicate, after?: ItemsPredicate, decrease?: boolean })|Inserts items _before_ or _after_ the one that presents in the buffer and satisfies the predicate condition. Only one of the _before_ and _after_ options is allowed. Indexes increase by default. Decreasing strategy can be enabled via _decrease_ option. |
+|[relax](https://dhilt.github.io/ngx-ui-scroll/adapter#relax)|(callback?: Function)|Resolves asynchronously when there are no pending processes. If the _callback_ is set, it will be executed right before resolving. Basically, it needs to protect with the _relax_ every piece of the App logic, that might be sensitive to the uiScroll internal processes, to avoid interference and race conditions. |
+|[reload](https://dhilt.github.io/ngx-ui-scroll/adapter#reload)|(startIndex?: number)|Resets the items buffer, resets the viewport params and starts fetching items from _startIndex_ (if set). |
+|[reset](https://dhilt.github.io/ngx-ui-scroll/adapter#reset)|(datasource?: IDatasource)|Performs hard reset of the uiScroll internal state by re-instantiating all its entities (instead of reusing them when _reload_). If _datasource_ argument is passed, it will be treated as new Datasource. All props of the _datasource_ are optional and the result Datasource will be a combination (merge) of the original one and the one passed as an argument. |
+|[check](https://dhilt.github.io/ngx-ui-scroll/adapter#check-size)| |Checks if any of current items changed it's size and runs a procedure to provide internal consistency and new items fetching if needed. |
+|[clip](https://dhilt.github.io/ngx-ui-scroll/adapter#clip)|(options: { forwardOnly?: boolean, backwardOnly?: boolean })|Removes out-of-viewport items on demand. The direction in which invisible items should be clipped can be specified by passing an options object. If no options is passed (or both properties are set to _true_), clipping will occur in both directions. |
+|[append](https://dhilt.github.io/ngx-ui-scroll/adapter#append-prepend)|(options: { items: any[], eof?: boolean })
(items: any | any[], eof?: boolean) * * old signature, deprecated|Adds items to the end of the uiScroll dataset. If eof parameter is not set, items will be added and rendered immediately, they will be placed right after the last item in the uiScroll buffer. If eof parameter is set to true, items will be added and rendered only if the end of the dataset is reached; otherwise, these items will be virtualized. See also [bof/eof](https://dhilt.github.io/ngx-ui-scroll/adapter#bof-eof) demo. |
+|[prepend](https://dhilt.github.io/ngx-ui-scroll/adapter#append-prepend)|(options: { items: any[], bof?: boolean })
(items: any | any[], bof?: boolean) * * old signature, deprecated|Adds items to the beginning of the uiScroll dataset. If bof parameter is not set, items will be added and rendered immediately, they will be placed right before the first item in the uiScroll buffer. If bof parameter is set to true, items will be added and rendered only if the beginning of the dataset is reached; otherwise, these items will be virtualized. See also [bof/eof](https://dhilt.github.io/ngx-ui-scroll/adapter#bof-eof) demo. |
+|[remove](https://dhilt.github.io/ngx-ui-scroll/adapter#remove)|(options: { predicate?: ItemsPredicate, indexes?: number[], increase?: boolean })
(func: ItemsPredicate) * * old signature, deprecated
type ItemsPredicate = (item: ItemAdapter) => boolean|Removes items form buffer and/or virtually. Predicate is a function to be applied to every item presently in the buffer. Predicate must return a boolean value. If predicate's return value is true, the item will be removed. Only a continuous series of items can be removed at a time using _predicate_. Alternatively, if _indexes_ array is passed, the items whose indexes match the list will be removed. Only one of the _predicate_ and _indexes_ options is allowed. In case of _indexes_, the deletion is performed also virtually. By default, indexes of the items following the deleted ones are decremented. Instead, if _increase_ is set to _true_, indexes of the items before the removed ones will be increased. |
+|[insert](https://dhilt.github.io/ngx-ui-scroll/adapter#insert)|(options: { items: any[], before?: ItemsPredicate, after?: ItemsPredicate, decrease?: boolean })|Inserts items _before_ or _after_ the one that presents in the buffer and satisfies the predicate condition. Only one of the _before_ and _after_ options is allowed. Indexes increase by default. Decreasing strategy can be enabled via _decrease_ option. |
+|[replace](https://dhilt.github.io/ngx-ui-scroll/adapter#replace)|(options: { predicate: ItemsPredicate, items: any[], fixRight?: boolean })|Replaces items that continuously match the _predicate_ with an array of new _items_. Indexes are maintained on the assumption that the left border of the dataset is fixed. To release the left border and fix the right one the _fixRight_ option should be set to _true_. |
-Along with the documented API there are some undocumented features that can be treated as experimental. They are not tested enough and might change over time. Some of them can be found on the [experimental tab](https://dhilt.github.io/ngx-ui-scroll/#/experimental) of the demo app.
+Along with the documented API there are some undocumented features that can be treated as experimental. They are not tested enough and might change over time. Some of them can be found on the [experimental tab](https://dhilt.github.io/ngx-ui-scroll/experimental) of the demo app.
-All of the Adapter methods return Promise resolving at the moment when the scroller terminates its internal processes triggered by the invocation of correspondent Adapter method. It is called [Adapter Return API](https://dhilt.github.io/ngx-ui-scroll/#/adapter#return-value). This promise has exactly the same nature as the promise of the [relax method](https://dhilt.github.io/ngx-ui-scroll/#/experimental#adapter-relax). Both "Relax" and "Return API" are the instruments of the App-Scroller processes normalization. It might be quite important to run some logic after the Scroller finishes its job and relaxes. Below is an example of how an explicit sequence of the Adapter methods can be safely implemented:
+All of the Adapter methods return Promise resolving at the moment when the scroller terminates its internal processes triggered by the invocation of correspondent Adapter method. It is called [Adapter Return API](https://dhilt.github.io/ngx-ui-scroll/adapter#return-value). This promise has exactly the same nature as the promise of the [relax method](https://dhilt.github.io/ngx-ui-scroll/experimental#adapter-relax). Both "Relax" and "Return API" are the instruments of the App-Scroller processes normalization. It might be quite important to run some logic after the Scroller finishes its job and relaxes. Below is an example of how an explicit sequence of the Adapter methods can be safely implemented:
```js
const { adapter } = this.datasource;
@@ -198,7 +205,7 @@ await adapter.insert({ items: [itemToReplace], before: predicate });
console.log('Replacement done');
```
-For more information, see [Adapter demo page](https://dhilt.github.io/ngx-ui-scroll/#/adapter).
+For more information, see [Adapter demo page](https://dhilt.github.io/ngx-ui-scroll/adapter).
### Development
@@ -226,7 +233,7 @@ import { Datasource } from 'ngx-ui-scroll';
});
```
-Like the experimental features, the development settings are not documented. Information about them can be obtained directly from the [source code](https://github.com/dhilt/ngx-ui-scroll/blob/master/src/component/classes/settings.ts). The uiScroll has "debug" mode with powerful logging which can be enabled via `devSettings.debug = true`. Also, with `devSettings.immediateLog = false` the console logging will be postponed until the undocumented Adapter method `showLog` is called (`datasource.adapter.showLog()`). This case could be important from the performance view: there might be too many logs and pushing them to the console output immediately could slow down the App.
+The development settings are not documented. Information about them can be obtained directly from the [source code](https://github.com/dhilt/ngx-ui-scroll/blob/master/src/component/classes/settings.ts). The uiScroll has "debug" mode with powerful logging which can be enabled via `devSettings.debug = true`. Also, with `devSettings.immediateLog = false` the console logging will be postponed until the undocumented Adapter method `showLog` is called (`datasource.adapter.showLog()`). This case could be important from the performance view: there might be too many logs and pushing them to the console output immediately could slow down the App.
At last, any participation is welcome, so feel free to submit new [Issues](https://github.com/dhilt/ngx-ui-scroll/issues) and open [Pull Requests](https://github.com/dhilt/ngx-ui-scroll/pulls).
diff --git a/demo/app/app-routing.module.ts b/demo/app/app-routing.module.ts
index 2f48cbb0..80a50d85 100644
--- a/demo/app/app-routing.module.ts
+++ b/demo/app/app-routing.module.ts
@@ -21,7 +21,7 @@ const routes: Routes = [
];
@NgModule({
- imports: [RouterModule.forRoot(routes, { useHash: true })],
+ imports: [RouterModule.forRoot(routes, { useHash: false })],
exports: [RouterModule]
})
export class AppRoutingModule {
diff --git a/demo/app/app.component.ts b/demo/app/app.component.ts
index beeef8ff..8a5a3b3b 100644
--- a/demo/app/app.component.ts
+++ b/demo/app/app.component.ts
@@ -27,6 +27,9 @@ export class AppComponent implements AfterViewInit, OnDestroy {
} else {
document.body.classList.remove('entire-window');
}
+ if (!url.includes('#')) {
+ window.scrollTo(0, 0);
+ }
})
);
if ('scrollRestoration' in history) {
diff --git a/demo/app/demos.ts b/demo/app/demos.ts
index fb5538f5..a30f7203 100644
--- a/demo/app/demos.ts
+++ b/demo/app/demos.ts
@@ -31,6 +31,7 @@ import { DemoIsLoadingExtendedComponent } from './samples/adapter/is-loading-ext
import { DemoInsertComponent } from './samples/adapter/insert.component';
import { DemoCheckSizeComponent } from './samples/adapter/check-size.component';
import { DemoRemoveComponent } from './samples/adapter/remove.component';
+import { DemoReplaceComponent } from './samples/adapter/replace.component';
import { DemoClipComponent } from './samples/adapter/clip.component';
import { DemoViewportElementSettingComponent } from './samples/experimental/viewportElement-setting.component';
@@ -78,6 +79,7 @@ const adapter = [
DemoInsertComponent,
DemoCheckSizeComponent,
DemoRemoveComponent,
+ DemoReplaceComponent,
DemoClipComponent,
];
diff --git a/demo/app/routes.ts b/demo/app/routes.ts
new file mode 100644
index 00000000..d24a56d3
--- /dev/null
+++ b/demo/app/routes.ts
@@ -0,0 +1,288 @@
+interface IScope {
+ id: string;
+ name: string;
+}
+
+interface IDemo extends IScope {
+ scope: string;
+}
+
+interface ScopeDemo extends IScope {
+ map: {
+ [key in string]: IDemo
+ };
+}
+
+type Demos = {
+ [key in string]: ScopeDemo
+};
+
+const globalScope = {
+ datasource: {
+ id: 'datasource',
+ name: 'Datasource'
+ },
+ settings: {
+ id: 'settings',
+ name: 'Settings'
+ },
+ adapter: {
+ id: 'adapter',
+ name: 'Adapter'
+ },
+ experimental: {
+ id: 'experimental',
+ name: 'Experimental'
+ },
+};
+
+const datasourceScope = {
+ datasourceGetSignatures: {
+ id: 'datasource-get-signatures',
+ name: 'Get-method signatures',
+ scope: globalScope.datasource.id
+ },
+ unlimitedBidirectional: {
+ id: 'unlimited-bidirectional',
+ name: 'Unlimited bidirectional datasource',
+ scope: globalScope.datasource.id
+ },
+ limited: {
+ id: 'limited',
+ name: 'Limited datasource',
+ scope: globalScope.datasource.id
+ },
+ positiveLimitedIndexes: {
+ id: 'positive-limited-indexes',
+ name: 'Positive limited datasource',
+ scope: globalScope.datasource.id
+ },
+ remote: {
+ id: 'remote',
+ name: 'Remote datasource',
+ scope: globalScope.datasource.id
+ },
+ invertedIndexes: {
+ id: 'inverted-indexes',
+ name: 'Inverted datasource',
+ scope: globalScope.datasource.id
+ },
+ pages: {
+ id: 'pages',
+ name: 'Pages datasource',
+ scope: globalScope.datasource.id
+ },
+};
+
+const settingsScope = {
+ noSettings: {
+ id: 'no-settings',
+ name: 'No settings',
+ scope: globalScope.settings.id
+ },
+ bufferSize: {
+ id: 'buffer-size',
+ name: 'bufferSize setting',
+ scope: globalScope.settings.id
+ },
+ padding: {
+ id: 'padding',
+ name: 'padding setting',
+ scope: globalScope.settings.id
+ },
+ itemSize: {
+ id: 'item-size',
+ name: 'itemSize setting',
+ scope: globalScope.settings.id
+ },
+ startIndex: {
+ id: 'start-index',
+ name: 'startIndex setting',
+ scope: globalScope.settings.id
+ },
+ minMaxIndexes: {
+ id: 'min-max-indexes',
+ name: 'minIndex / maxIndex',
+ scope: globalScope.settings.id
+ },
+ infiniteMode: {
+ id: 'infinite-mode',
+ name: 'Infinite mode',
+ scope: globalScope.settings.id
+ },
+ horizontalMode: {
+ id: 'horizontal-mode',
+ name: 'Horizontal mode',
+ scope: globalScope.settings.id
+ },
+ differentItemHeights: {
+ id: 'different-item-heights',
+ name: 'Different item heights',
+ scope: globalScope.settings.id
+ },
+ windowViewport: {
+ id: 'window-viewport',
+ name: 'Entire window scrollable',
+ scope: globalScope.settings.id
+ },
+};
+
+const adapterScope = {
+ returnValue: {
+ id: 'return-value',
+ name: 'Return value',
+ scope: globalScope.adapter.id
+ },
+ relax: {
+ id: 'relax',
+ name: 'Relax',
+ scope: globalScope.adapter.id
+ },
+ reload: {
+ id: 'reload',
+ name: 'Reload',
+ scope: globalScope.adapter.id
+ },
+ reset: {
+ id: 'reset',
+ name: 'Reset',
+ scope: globalScope.adapter.id
+ },
+ isLoading: {
+ id: 'is-loading',
+ name: 'Is loading?',
+ scope: globalScope.adapter.id
+ },
+ isLoadingAdvanced: {
+ id: 'is-loading-advanced',
+ name: 'Is loading, advanced',
+ scope: globalScope.adapter.id
+ },
+ itemsCount: {
+ id: 'items-count',
+ name: 'Buffer items counter',
+ scope: globalScope.adapter.id
+ },
+ bofEof: {
+ id: 'bof-eof',
+ name: 'Begin/end of file',
+ scope: globalScope.adapter.id
+ },
+ firstLastVisible: {
+ id: 'first-last-visible-items',
+ name: 'First and last visible items',
+ scope: globalScope.adapter.id
+ },
+ check: {
+ id: 'check-size',
+ name: 'Check size',
+ scope: globalScope.adapter.id
+ },
+ clip: {
+ id: 'clip',
+ name: 'Clip',
+ scope: globalScope.adapter.id
+ },
+ appendPrepend: {
+ id: 'append-prepend',
+ name: 'Append / prepend',
+ scope: globalScope.adapter.id
+ },
+ appendPrependSync: {
+ id: 'append-prepend-sync',
+ name: 'Append / prepend sync',
+ scope: globalScope.adapter.id
+ },
+ remove: {
+ id: 'remove',
+ name: 'Remove',
+ scope: globalScope.adapter.id
+ },
+ insert: {
+ id: 'insert',
+ name: 'Insert',
+ scope: globalScope.adapter.id
+ },
+ replace: {
+ id: 'replace',
+ name: 'Replace',
+ scope: globalScope.adapter.id
+ },
+};
+
+const experimentalScope = {
+ viewportElementSetting: {
+ id: 'viewportElement-setting',
+ name: 'viewportElement setting',
+ scope: globalScope.experimental.id
+ },
+ inverseSetting: {
+ id: 'inverse-setting',
+ name: 'inverse setting',
+ scope: globalScope.experimental.id
+ },
+ adapterFixPosition: {
+ id: 'adapter-fix-position',
+ name: 'Adapter fix-position method',
+ scope: globalScope.experimental.id
+ },
+ adapterFixUpdater: {
+ id: 'adapter-fix-updater',
+ name: 'Adapter fix-updater method',
+ scope: globalScope.experimental.id
+ },
+ adapterFixScrollToItem: {
+ id: 'adapter-fix-scrollToItem',
+ name: 'Adapter fix-scrollToItem method',
+ scope: globalScope.experimental.id
+ },
+ onBeforeClipSetting: {
+ id: 'onBeforeClip-setting',
+ name: 'onBeforeClip setting',
+ scope: globalScope.experimental.id
+ },
+};
+
+const demos = {
+ datasource: {
+ ...globalScope.datasource,
+ map: datasourceScope
+ },
+ settings: {
+ ...globalScope.settings,
+ map: settingsScope
+ },
+ adapter: {
+ ...globalScope.adapter,
+ map: adapterScope
+ },
+ experimental: {
+ ...globalScope.experimental,
+ map: experimentalScope
+ }
+};
+
+const demoList = Object.values(demos).map(scope => ({
+ ...scope,
+ map: Object.values(scope.map).map(demo => demo)
+}));
+
+interface IRedirect {
+ from: string;
+ to: string;
+}
+
+const getHashRedirect = (scopeId: string, demoId?: string): IRedirect => ({
+ from: '#/' + scopeId + (demoId ? '#' + demoId : ''),
+ to: '/' + scopeId + (demoId ? '#' + demoId : '')
+});
+
+const redirects = Object.values(demos).reduce((acc: IRedirect[], scope) => [
+ ...acc,
+ getHashRedirect(scope.id),
+ ...Object.values(scope.map).map(({ id }) =>
+ getHashRedirect(scope.id, id)
+ )
+], []);
+
+export { IDemo, globalScope, demos, demoList, redirects };
diff --git a/demo/app/samples/adapter.component.html b/demo/app/samples/adapter.component.html
index 34745350..a8b6e535 100644
--- a/demo/app/samples/adapter.component.html
+++ b/demo/app/samples/adapter.component.html
@@ -31,9 +31,10 @@
Angular UI Scroll Adapter Demos
+
+
-
-
+
diff --git a/demo/app/samples/adapter/adapter-relax.component.html b/demo/app/samples/adapter/adapter-relax.component.html
index 59420275..9d32715c 100644
--- a/demo/app/samples/adapter/adapter-relax.component.html
+++ b/demo/app/samples/adapter/adapter-relax.component.html
@@ -44,7 +44,11 @@
This might be helpful if we don't want to wait until the end of current call stack.
- At last, we may use Return value API
+ At last, we may use
+ Return value API
(which is a part of each Adapter method)
and get rid of the second "relax". This approach is demonstrated on the last tab "Return".
diff --git a/demo/app/samples/adapter/adapter-return-value.component.ts b/demo/app/samples/adapter/adapter-return-value.component.ts
index c55e370b..ae7ffda9 100644
--- a/demo/app/samples/adapter/adapter-return-value.component.ts
+++ b/demo/app/samples/adapter/adapter-return-value.component.ts
@@ -1,18 +1,14 @@
import { Component } from '@angular/core';
-import { DemoContext } from '../../shared/interfaces';
+import { demos } from '../../routes';
@Component({
selector: 'app-demo-adapter-return-value',
templateUrl: './adapter-return-value.component.html'
})
export class DemoAdapterReturnValueComponent {
- demoContext = {
- scope: 'adapter',
- title: `Return value`,
- titleId: `return-value`,
- noWorkView: true
- } as DemoContext;
+
+ demoConfig = demos.adapter.map.returnValue;
returnValueType = ` Promise<{
success: boolean,
diff --git a/demo/app/samples/adapter/append-prepend-sync.component.html b/demo/app/samples/adapter/append-prepend-sync.component.html
index f42e0c43..86b85223 100644
--- a/demo/app/samples/adapter/append-prepend-sync.component.html
+++ b/demo/app/samples/adapter/append-prepend-sync.component.html
@@ -16,8 +16,11 @@
have eof/bof parameter
which is optional and which allows to prevent rendering of new items in the Viewport when
the end of the dataset (if we are speaking of append) or
- beginning of the dataset (prepend case) is not reached.
- See also bof/eof demo.
+ beginning of the dataset (prepend case) is not reached. See also
+ bof/eof demo.
Let's discuss {{prependCallSample}} case.
@@ -43,8 +46,14 @@
the main idea is to synchronize, say, remote dataset changes with
the uiScroll state visible to the end user.
Another examples of such synchronization could be found in
- remove and
- insert demos.
+ remove and
+ insert.
+ Adapter.replace method allows to perform many-to-many in-Buffer replacement.
+ It acts as a combination of insert and remove operations working in a single run,
+ which means minimal latency in comparison to applying
+ Adapter.insert and Adapter.remove methods one by one.
+ The argument of this method is an object of the following type:
+
+
{{argumentsDescription}}
+
+ The predicate option is exactly the same as in
+ Adapter-remove and case.
+ The indexes options is exactly the same as in the
+ Adapter-insert case.
+ The fixRight option allows to change
+ the default indexing strategy.
+ The default fixRight value is false,
+ which means the indexes of the items following the replaced ones
+ will be changed during the replacement.
+ Otherwise, if fixRight is set true,
+ the indexes of the items preceding the replaced ones will be changed.
+
+
+ Current limitations of the Adapter.replace method:
+ no virtual replacements are possible and only continues series are allowed.
+ So only a portion of items that are currently in the uiScroll Buffer
+ can be replaced with this method.
+ And this portion must consist of a continuous list of items.
+
+
+ In this demo we are replacing 3 items with indexes [3, 4, 5] with 2 new items.
+ Switching to "fixRight" strategy is not implemented here,
+ in order to keep natural indexes flow as simple as possible.
+ Note, before running the "replace" operation over the uiScroll Buffer,
+ the Datasource gets the update as well.
+
The uiScroll can accept only one of min/max indexes settings.
diff --git a/demo/app/samples/common/min-max-indexes.component.ts b/demo/app/samples/common/min-max-indexes.component.ts
index 9456cd70..27f598d5 100644
--- a/demo/app/samples/common/min-max-indexes.component.ts
+++ b/demo/app/samples/common/min-max-indexes.component.ts
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
+import { demos } from '../../routes';
import { DemoContext, DemoSources, DemoSourceType } from '../../shared/interfaces';
import { datasourceGetCallbackInfinite } from '../../shared/datasource-get';
@@ -12,14 +13,14 @@ import { IDatasource } from '../../../../public_api'; // from 'ngx-ui-scroll';
export class DemoMinMaxIndexesComponent {
demoContext: DemoContext = {
- scope: 'settings',
- title: `minIndex / maxIndex settings`,
- titleId: `min-max-indexes`,
+ config: demos.settings.map.minMaxIndexes,
viewportId: `min-max-indexes-viewport`,
count: 0,
log: ''
};
+ datasourceLimitedDemoConfig = demos.datasource.map.limited;
+
datasource: IDatasource = {
get: datasourceGetCallbackInfinite(this.demoContext),
settings: {
diff --git a/demo/app/samples/common/padding.component.ts b/demo/app/samples/common/padding.component.ts
index 9360c655..a93e1ea4 100644
--- a/demo/app/samples/common/padding.component.ts
+++ b/demo/app/samples/common/padding.component.ts
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
+import { demos } from '../../routes';
import { DemoContext, DemoSources, DemoSourceType } from '../../shared/interfaces';
import { datasourceGetCallbackInfinite } from '../../shared/datasource-get';
@@ -12,9 +13,7 @@ import { IDatasource } from '../../../../public_api'; // from 'ngx-ui-scroll';
export class DemoPaddingComponent {
demoContext: DemoContext = {
- scope: 'settings',
- title: `padding setting`,
- titleId: `padding`,
+ config: demos.settings.map.padding,
viewportId: `padding-viewport`,
count: 0,
log: ''
diff --git a/demo/app/samples/common/start-index.component.ts b/demo/app/samples/common/start-index.component.ts
index 29bcdb9e..4e05ca0b 100644
--- a/demo/app/samples/common/start-index.component.ts
+++ b/demo/app/samples/common/start-index.component.ts
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
+import { demos } from '../../routes';
import { DemoContext, DemoSources, DemoSourceType } from '../../shared/interfaces';
import { datasourceGetCallbackInfinite } from '../../shared/datasource-get';
@@ -12,9 +13,7 @@ import { IDatasource } from '../../../../public_api'; // from 'ngx-ui-scroll';
export class DemoStartIndexComponent {
demoContext: DemoContext = {
- scope: 'settings',
- title: `startIndex setting`,
- titleId: `start-index`,
+ config: demos.settings.map.startIndex,
viewportId: `start-index-viewport`,
count: 0,
log: ''
diff --git a/demo/app/samples/common/window-viewport.component.ts b/demo/app/samples/common/window-viewport.component.ts
index d7909c9b..06a5da43 100644
--- a/demo/app/samples/common/window-viewport.component.ts
+++ b/demo/app/samples/common/window-viewport.component.ts
@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
+import { demos } from '../../routes';
import { DemoContext, DemoSources, DemoSourceType } from '../../shared/interfaces';
@Component({
@@ -9,9 +10,7 @@ import { DemoContext, DemoSources, DemoSourceType } from '../../shared/interface
export class DemoWindowViewportComponent {
demoContext: DemoContext = {
- scope: 'settings',
- title: `Entire window scrollable`,
- titleId: `window-viewport`,
+ config: demos.settings.map.windowViewport,
viewportId: `window-viewport-viewport`,
noWorkView: true,
count: 0,
diff --git a/demo/app/samples/datasource.component.html b/demo/app/samples/datasource.component.html
index ac0abd85..2d8c674f 100644
--- a/demo/app/samples/datasource.component.html
+++ b/demo/app/samples/datasource.component.html
@@ -25,7 +25,7 @@
Angular UI Scroll Datasource Demos
The constructor argument in the second case should be an object of IDatasource type.
Instantiating via operator new is needed for
the Adapter to be available on the result datasource object
- (for details see Adapter demo page).
+ (for details see Adapter demo page).
Both of IDatasource and Datasource definitions
could be imported from UiScrollModule:
@@ -39,7 +39,7 @@
Angular UI Scroll Datasource Demos
With the help of settings object the scroller could be configured,
- as it is described on Settings demo page.
+ as it is described on Settings demo page.
Here we are going to discuss the Datasource.get method implementation.
diff --git a/demo/app/samples/datasource/inverted-datasource.component.ts b/demo/app/samples/datasource/inverted-datasource.component.ts
index 01fce375..58eb7f6e 100644
--- a/demo/app/samples/datasource/inverted-datasource.component.ts
+++ b/demo/app/samples/datasource/inverted-datasource.component.ts
@@ -1,6 +1,8 @@
import { Component } from '@angular/core';
-import { DemoContext, DemoSources, DemoSourceType } from '../../shared/interfaces';
+import { demos } from '../../routes';
+import { DemoSources, DemoSourceType } from '../../shared/interfaces';
+
import { IDatasource } from '../../../../public_api'; // from 'ngx-ui-scroll';
@Component({
@@ -9,12 +11,7 @@ import { IDatasource } from '../../../../public_api'; // from 'ngx-ui-scroll';
})
export class DemoInvertedDatasourceComponent {
- context = {
- scope: 'datasource',
- title: `Inverted datasource`,
- titleId: `inverted-indexes`,
- noWorkView: true
- } as DemoContext;
+ demoConfig = demos.datasource.map.invertedIndexes;
MIN = 1;
diff --git a/demo/app/samples/datasource/limited-datasource.component.html b/demo/app/samples/datasource/limited-datasource.component.html
index fe4c2f3d..a2c9eb74 100644
--- a/demo/app/samples/datasource/limited-datasource.component.html
+++ b/demo/app/samples/datasource/limited-datasource.component.html
@@ -13,7 +13,10 @@
Another option of how to limit the datasource is to use
- minIndex and maxIndex settings;
+ minIndex and maxIndex settings;
this way the implementation of the Datasource.get method could remain unlimited
as the uiScroll will not request for items that are out of
[minIndex; maxIndex] range.
diff --git a/demo/app/samples/datasource/limited-datasource.component.ts b/demo/app/samples/datasource/limited-datasource.component.ts
index eb260abe..5c6b217c 100644
--- a/demo/app/samples/datasource/limited-datasource.component.ts
+++ b/demo/app/samples/datasource/limited-datasource.component.ts
@@ -1,9 +1,11 @@
import { Component } from '@angular/core';
-import { DemoContext, DemoSources, DemoSourceType } from '../../shared/interfaces';
-import { IDatasource } from '../../../../public_api';
+import { demos } from '../../routes';
+import { DemoSources, DemoSourceType } from '../../shared/interfaces';
import { doLog } from '../../shared/datasource-get';
+import { IDatasource } from '../../../../public_api';
+
@Component({
selector: 'app-limited-datasource',
templateUrl: './limited-datasource.component.html'
@@ -11,13 +13,13 @@ import { doLog } from '../../shared/datasource-get';
export class DemoLimitedDatasourceComponent {
demoContext = {
- scope: 'datasource',
- title: `Limited datasource`,
- titleId: `limited`,
+ config: demos.datasource.map.limited,
logViewOnly: true,
log: '',
count: 0
- } as DemoContext;
+ };
+
+ minMaxDemoConfig = demos.settings.map.minMaxIndexes;
MIN = -99;
MAX = 900;
diff --git a/demo/app/samples/datasource/pages-datasource.component.ts b/demo/app/samples/datasource/pages-datasource.component.ts
index b2b1fda4..9757bb4e 100644
--- a/demo/app/samples/datasource/pages-datasource.component.ts
+++ b/demo/app/samples/datasource/pages-datasource.component.ts
@@ -1,6 +1,8 @@
import { Component } from '@angular/core';
-import { DemoContext, DemoSources, DemoSourceType } from '../../shared/interfaces';
+import { demos } from '../../routes';
+import { DemoSources, DemoSourceType } from '../../shared/interfaces';
+
import { IDatasource } from '../../../../public_api';
@Component({
@@ -10,12 +12,10 @@ import { IDatasource } from '../../../../public_api';
export class DemoPagesDatasourceComponent {
demoContext = {
- scope: 'datasource',
- title: `Pages datasource`,
- titleId: `pages`,
+ config: demos.datasource.map.pages,
logViewOnly: true,
log: ''
- } as DemoContext;
+ };
private getCount = 0;
private pagesCount = 30;
@@ -65,7 +65,7 @@ export class DemoPagesDatasourceComponent {
}
this.demoContext.log = `${this.getCount}.3 requesting pages: ${logPages.join(', ')}\n` + this.demoContext.log;
this.demoContext.log = `${this.getCount}.4 ` + (!pagesResult.length ? 'empty result' :
- `pages result [${pagesResult[0].index}..${pagesResult[pagesResult.length - 1].index}]`
+ `pages result [${pagesResult[0].index}..${pagesResult[pagesResult.length - 1].index}]`
) + '\n' + this.demoContext.log;
// slicing pages result to satisfy start/end indexes
@@ -73,7 +73,7 @@ export class DemoPagesDatasourceComponent {
const end = start + endIndex - startIndex + 1;
const data = pagesResult.slice(start, end);
this.demoContext.log = (!data.length ? '' :
- `${this.getCount}.5 sliced result [${data[0].index}..${data[data.length - 1].index}]\n`
+ `${this.getCount}.5 sliced result [${data[0].index}..${data[data.length - 1].index}]\n`
) + this.demoContext.log;
success(data);
@@ -142,9 +142,9 @@ getDataPage(page: number) {
return this.data[page];
}`
},
- {
- name: DemoSourceType.Component + ' (async)',
- text: `datasource: IDatasource = {
+ {
+ name: DemoSourceType.Component + ' (async)',
+ text: `datasource: IDatasource = {
get: (index, count, success) => {
const startIndex = Math.max(index, 0);
const endIndex = index + count - 1;
@@ -180,7 +180,7 @@ constructor(
private remoteDataService: RemoteDataService
) {
}`
- }];
+ }];
getDataPage(page: number) {
if (page < 0 || page >= this.pagesCount) {
diff --git a/demo/app/samples/datasource/positive-limited-datasource.component.html b/demo/app/samples/datasource/positive-limited-datasource.component.html
index 1555cd8e..da47393a 100644
--- a/demo/app/samples/datasource/positive-limited-datasource.component.html
+++ b/demo/app/samples/datasource/positive-limited-datasource.component.html
@@ -10,12 +10,18 @@
This is a particular case of limited datasource discussed above
with only MIN value set up. Also, positive limitation
could be alternatively achieved by assigning 1 (or 0) value to
- minIndex setting.
+ minIndex and maxIndex settings.
Note that if 0 index is the left boundary of the dataset,
then it seems reasonable to assign 0 value to
- startIndex setting too,
+ startIndex setting too,
because the default startIndex value is 1.
For example, Adapter.fix method. It has different options for different cases
diff --git a/demo/app/samples/experimental.component.ts b/demo/app/samples/experimental.component.ts
index 47fafab7..9c0230d7 100644
--- a/demo/app/samples/experimental.component.ts
+++ b/demo/app/samples/experimental.component.ts
@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
+import { demos } from '../routes';
@Component({
selector: 'app-experimental',
@@ -9,6 +10,9 @@ export class ExperimentalComponent {
constructor() {
}
+ scope = demos.experimental.map;
+ base = '../' + demos.experimental.id;
+
adapterFixArgumentDescription = ` interface AdapterFixOptions {
scrollPosition?: number;
minIndex?: number;
diff --git a/demo/app/samples/experimental/adapter-fix-position.component.ts b/demo/app/samples/experimental/adapter-fix-position.component.ts
index 1f2fdd49..4e83afe8 100644
--- a/demo/app/samples/experimental/adapter-fix-position.component.ts
+++ b/demo/app/samples/experimental/adapter-fix-position.component.ts
@@ -1,6 +1,8 @@
import { Component } from '@angular/core';
-import { DemoContext, DemoSources, DemoSourceType } from '../../shared/interfaces';
+import { demos } from '../../routes';
+import { DemoSources, DemoSourceType } from '../../shared/interfaces';
+
import { Datasource } from '../../../../public_api';
@Component({
@@ -10,11 +12,9 @@ import { Datasource } from '../../../../public_api';
export class DemoAdapterFixPositionComponent {
demoContext = {
- scope: 'experimental',
- title: `Adapter fix scroll position`,
- titleId: `adapter-fix-position`,
+ config: demos.experimental.map.adapterFixPosition,
noInfo: true
- } as DemoContext;
+ };
datasource = new Datasource({
get: (index: number, count: number, success: Function) => {
diff --git a/demo/app/samples/experimental/adapter-fix-scrollToItem.component.ts b/demo/app/samples/experimental/adapter-fix-scrollToItem.component.ts
index dfe08f4c..dff1b1c6 100644
--- a/demo/app/samples/experimental/adapter-fix-scrollToItem.component.ts
+++ b/demo/app/samples/experimental/adapter-fix-scrollToItem.component.ts
@@ -1,6 +1,8 @@
import { Component } from '@angular/core';
+import { demos } from '../../routes';
import { DemoContext, DemoSources, DemoSourceType } from '../../shared/interfaces';
+
import { Datasource } from '../../../../public_api';
@Component({
@@ -10,9 +12,7 @@ import { Datasource } from '../../../../public_api';
export class DemoAdapterFixScrollToItemComponent {
demoContext: DemoContext = {
- scope: 'experimental',
- title: `Adapter fix scrollToItem`,
- titleId: `adapter-fix-scrollToItem`,
+ config: demos.experimental.map.adapterFixScrollToItem,
noInfo: true
};
@@ -47,7 +47,7 @@ export class DemoAdapterFixScrollToItemComponent {
`
}, {
name: DemoSourceType.Component,
- text: `index = '5'
+ text: `index = '5'
scrollToBottom = false;
datasource = new Datasource({
diff --git a/demo/app/samples/experimental/adapter-fix-updater.component.html b/demo/app/samples/experimental/adapter-fix-updater.component.html
index 8f6de4f6..74ca44b4 100644
--- a/demo/app/samples/experimental/adapter-fix-updater.component.html
+++ b/demo/app/samples/experimental/adapter-fix-updater.component.html
@@ -28,15 +28,29 @@
we need to care about datasource consistency and every update we want to
be applied to the uiScroll buffer should also happen at the datasource level.
The examples of Datasource-Adapter synching can be found
- here, here
- and here.
+ here,
+ here and
+ here.
The Adapter.fix({ updater }) usage can be very diverse. For example, we may
not change anything in the buffer, but gather some statistic. In this demo
countItems method uses updater to get a number of items in the buffer
at a particular moment. The result is equal to the value of Adapter.itemsCount
- read-only property (link).
+ read-only property
+ (link).
Also, I would not recommend to bind countItems-like methods with the template
as it is in this demo, for it might affect the performance.