Adapter.replace

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 {

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) {

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,
 ];
 

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 };

demo/app/samples/adapter.component.html

@@ -31,9 +31,10 @@ <h1>Angular UI Scroll Adapter Demos</h1>
 <app-demo-items-count></app-demo-items-count>
 <app-demo-bof-eof></app-demo-bof-eof>
 <app-demo-first-last-visible-items></app-demo-first-last-visible-items>
+<app-demo-check-size></app-demo-check-size>
+<app-demo-clip></app-demo-clip>
 <app-demo-append-prepend></app-demo-append-prepend>
 <app-demo-append-prepend-sync></app-demo-append-prepend-sync>
-<app-demo-check-size></app-demo-check-size>
 <app-demo-remove></app-demo-remove>
-<app-demo-clip></app-demo-clip>
 <app-demo-insert></app-demo-insert>
+<app-demo-replace></app-demo-replace>

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.
     </p>
     <p>
-      At last, we may use <a href="#/adapter#return-value">Return value API</a>
+      At last, we may use
+      <a
+        [routerLink]="['/', adapterReturnValueDemoConfig.scope]"
+        fragment="{{adapterReturnValueDemoConfig.id}}"
+      >Return value API</a>
       (which is a part of each <em>Adapter</em> method)
       and get rid of the second "relax". This approach is demonstrated on the last tab "Return".
     </p>

demo/app/samples/adapter/adapter-relax.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 
-import { DemoContext, DemoSources } from '../../shared/interfaces';
+import { demos } from '../../routes';
+import { DemoSources } from '../../shared/interfaces';
+
 import { Datasource } from '../../../../public_api';
 
 @Component({
@@ -10,11 +12,11 @@ import { Datasource } from '../../../../public_api';
 export class DemoAdapterRelaxComponent {
 
   demoContext = {
-    scope: 'adapter',
-    title: `Adapter relax`,
-    titleId: `relax`,
+    config: demos.adapter.map.relax,
     noInfo: true
-  } as DemoContext;
+  };
+
+  adapterReturnValueDemoConfig = demos.adapter.map.returnValue;
 
   datasource = new Datasource({
     get: (index: number, count: number, success: Function) => {

demo/app/samples/adapter/adapter-return-value.component.html

@@ -1,6 +1,6 @@
 <div class="demo">
 
-  <app-demo-title [context]="demoContext"></app-demo-title>
+  <app-demo-title [config]="demoConfig"></app-demo-title>
 
   <div class="description">
     <p>