From 6025b46a606f09d2dc80ea70e643e351a129a852 Mon Sep 17 00:00:00 2001 From: Denis Hilt Date: Thu, 17 Dec 2020 03:20:22 +0300 Subject: [PATCH] demo App router, useHash = true --- README.md | 76 +++++++++++++++++----------------- demo/app/app-routing.module.ts | 2 +- demo/app/routes.ts | 20 +-------- demo/main.ts | 11 +---- 4 files changed, 42 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index 93749549..7b9749c5 100644 --- a/README.md +++ b/README.md @@ -33,11 +33,11 @@ The \*uiScroll is a structural directive that works like \*ngFor and renders a t - 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 @@ -117,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 @@ -138,14 +138,14 @@ 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 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. | +|[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 @@ -165,36 +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. | -|[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_. | +|[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; @@ -205,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 diff --git a/demo/app/app-routing.module.ts b/demo/app/app-routing.module.ts index 80a50d85..2f48cbb0 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: false })], + imports: [RouterModule.forRoot(routes, { useHash: true })], exports: [RouterModule] }) export class AppRoutingModule { diff --git a/demo/app/routes.ts b/demo/app/routes.ts index d24a56d3..d416b242 100644 --- a/demo/app/routes.ts +++ b/demo/app/routes.ts @@ -267,22 +267,4 @@ const demoList = Object.values(demos).map(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 }; +export { IDemo, globalScope, demos, demoList }; diff --git a/demo/main.ts b/demo/main.ts index 3c96850c..29bc67d1 100644 --- a/demo/main.ts +++ b/demo/main.ts @@ -2,18 +2,11 @@ import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { environment } from './environments/environment'; -import { redirects } from './app/routes'; import { AppModule } from './app/app.module'; if (environment.production) { enableProdMode(); } -const redirect = redirects.find(({ from }) => from === location.hash); -if (redirect) { - location.href = redirect.to; -} else { - platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.log(err)); -} - +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.log(err));