issue-351 adapter pause/resume demo

demo/app/demos.ts

@@ -45,6 +45,7 @@ import { DemoAdapterFixPositionComponent } from './samples/experimental/adapter-
 import { DemoAdapterFixUpdaterComponent } from './samples/experimental/adapter-fix-updater.component';
 import { DemoAdapterFixScrollToItemComponent } from './samples/experimental/adapter-fix-scrollToItem.component';
 import { DemoOnBeforeClipSettingComponent } from './samples/experimental/onBeforeClip-setting.component';
+import { DemoAdapterPauseResumeComponent } from './samples/experimental/adapter-pause-resume.component';
 import { DemoRoutinesComponent } from './samples/experimental/routines.component';
 
 const common = [
@@ -100,6 +101,7 @@ const experimental = [
   DemoAdapterFixUpdaterComponent,
   DemoAdapterFixScrollToItemComponent,
   DemoOnBeforeClipSettingComponent,
+  DemoAdapterPauseResumeComponent,
   DemoRoutinesComponent
 ];
 

demo/app/routes.ts

@@ -262,6 +262,11 @@ const experimentalScope = {
     name: 'onBeforeClip setting',
     scope: globalScope.experimental.id
   },
+  adapterPauseResume: {
+    id: 'adapter-pause-resume',
+    name: 'Adapter pause/resume methods',
+    scope: globalScope.experimental.id
+  },
   routines: {
     id: 'routines',
     name: 'Routines',

demo/app/samples/experimental.component.html

@@ -45,4 +45,5 @@ <h1>Angular UI Scroll Experimental Demos</h1>
 <app-adapter-fix-updater></app-adapter-fix-updater>
 <app-adapter-fix-scroll-to-item></app-adapter-fix-scroll-to-item>
 <app-on-before-clip-setting></app-on-before-clip-setting>
+<app-adapter-pause-resume></app-adapter-pause-resume>
 <app-routines></app-routines>

demo/app/samples/experimental/adapter-pause-resume.component.html

@@ -0,0 +1,19 @@
+<app-demo [datasource]="datasource" [context]="demoContext" [sources]="sources">
+  <div actions>
+    <div class="comment">Available since v3.2.0, undocumented</div>
+    <button (click)="datasource.adapter.pause()">Pause</button>
+    <button (click)="datasource.adapter.resume()">Resume</button>
+  </div>
+  <div description>
+    <p>
+      The <em>Adapter.pause</em> method is to stop the Scroller.
+      It doesn't receive the scroll events from the viewport,
+      so the scroll events are ignored. Also, all the Adapter methods
+      (except <em>Adapter.resume</em> and <em>Adapter.reset</em>)
+      don't do anything.
+    </p>
+    <p>
+      The <em>Adapter.resume</em> method is to make the Scroller live again.
+    </p>
+  </div>
+</app-demo>

demo/app/samples/experimental/adapter-pause-resume.component.ts

@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+
+import { demos } from '../../routes';
+import { DemoSources, DemoSourceType, MyItem } from '../../shared/interfaces';
+
+import { Datasource } from 'ngx-ui-scroll';
+
+@Component({
+  selector: 'app-adapter-pause-resume',
+  templateUrl: './adapter-pause-resume.component.html'
+})
+export class DemoAdapterPauseResumeComponent {
+  demoContext = {
+    config: demos.experimental.map.adapterPauseResume,
+    noInfo: true
+  };
+
+  datasource = new Datasource({
+    get: (index, count, success) => {
+      const data: MyItem[] = [];
+      for (let i = index; i <= index + count - 1; i++) {
+        data.push({ id: i, text: 'item #' + i });
+      }
+      success(data);
+    },
+    devSettings: {
+      debug: true
+    }
+  });
+
+  sources: DemoSources = [
+    {
+      active: true,
+      name: DemoSourceType.Template,
+      text: `<button (click)="datasource.adapter.pause()">Pause</button>
+<button (click)="datasource.adapter.resume()">Resume</button>
+
+<div class="viewport">
+  <div *uiScroll="let item of datasource">
+    <div class="item">{{item.text}}</div>
+  </div>
+</div>`
+    },
+    {
+      name: DemoSourceType.Datasource,
+      text: `datasource = new Datasource({
+  get: (index, count, success) => {
+    const data = [];
+    for (let i = index; i <= index + count - 1; i++) {
+      data.push({ id: i, text: 'item #' + i });
+    }
+    success(data);
+  }
+  }
+})`
+    }
+  ];
+
+  argumentDescription = `  onBeforeClip: (items: {
+    $index: number,
+    data: any,
+    element?: HTMLElement
+  }[]) => void`;
+}