Adapter.clip demo

Author: dhilt

demo/app/app.module.ts

@@ -35,6 +35,7 @@ import { DemoAppendPrependSyncComponent } from './samples/adapter/append-prepend
 import { DemoIsLoadingExtendedComponent } from './samples/adapter/is-loading-extended.component';
 import { DemoCheckSizeComponent } from './samples/adapter/check-size.component';
 import { DemoRemoveComponent } from './samples/adapter/remove.component';
+import { DemoClipComponent } from './samples/adapter/clip.component';
 import { DemoDatasourceSignaturesComponent } from './samples/datasource/datasource-signatures.component';
 import { DemoBidirectionalUnlimitedDatasourceComponent } from './samples/datasource/bidirectional-unlimited-datasource.component';
 import { DemoLimitedDatasourceComponent } from './samples/datasource/limited-datasource.component';
@@ -76,6 +77,7 @@ import { AppRoutingModule } from './app-routing.module';
     DemoIsLoadingExtendedComponent,
     DemoCheckSizeComponent,
     DemoRemoveComponent,
+    DemoClipComponent,
     DemoDatasourceSignaturesComponent,
     DemoBidirectionalUnlimitedDatasourceComponent,
     DemoLimitedDatasourceComponent,

demo/app/samples/adapter.component.html

@@ -32,3 +32,4 @@ <h1>Angular UI Scroll Adapter Demos</h1>
 <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>

demo/app/samples/adapter/clip.component.html

@@ -0,0 +1,48 @@
+<app-demo [datasource]="datasource" [context]="demoContext" [sources]="sources">
+  <div actions style="display: flex">
+    <button (click)="doClip()">Clip</button>
+  </div>
+
+  <div description>
+    <p>
+      <em>Adapter.clip</em> is another <em>Adapter</em> API method
+      allowing to remove out-of-viewport items on demand.
+      Commonly, the <em>uiScroll</em> runs the clipping procedure
+      each time new items are fetched after scrolling.
+      Also, the <em>uiScroll</em> clipps old items from a side of the viewport
+      that is opposite to a side where new items appear.
+      This is one of the core parts of the virtualization concept.
+      By invoking the <em>Adapter.clip</em> method
+      we are telling the <em>uiScroll</em> to run this process immediately
+      and remove items that are out of the visible part of the viewport
+      in both directions or in specific direction.
+    </p>
+    <p>
+      This could be useful when we enlarge the list of items manually,
+      via <em>Adapter.append</em> or <em>.prepend</em> methods.
+      For example, we appended 100 new items and started scrolling down, in forward direction.
+      We might want the items that exit the viewport in backward direction to be clipped.
+      Such a clipping will occur automatically only when we reach the bottom line of the buffer
+      and new items are fetched and rendered in forward direction.
+      If we don't want to wait, we just call <em>Adapter.clip</em>.
+    </p>
+    <p>
+      This demo implements some artificial but quite illustrative case.
+      Here we disabled virtualization by turning on the <em>infinite</em> setting.
+      Clipping will never happen automatically.
+      We see how the DOM elements counter value is getting bigger and bigger as we scroll on and on.
+      By pressiing the "Clip" button, we let only 20-21 items to survive.
+      This way a kind of manual virtualization could be implemented.
+    </p>
+    <p>
+      The method has an argument object that allows to run clipping process
+      only in one direction: 
+    </p>
+    <pre>{{clipOptionsDescription}}</pre>
+    <p>
+      So, if we call <em>Adapter.clip({{clipOptionsSample}})</em>,
+      only ithose tems that are out of the bottom border of the visible part of the viewport
+      will be clipped out.
+    </p>
+  </div>
+</app-demo>

demo/app/samples/adapter/clip.component.ts

@@ -0,0 +1,87 @@
+import { Component } from '@angular/core';
+
+import { DemoContext, DemoSources, DemoSourceType } from '../../shared/interfaces';
+import { datasourceGetCallbackInfinite } from '../../shared/datasource-get';
+
+import { Datasource } from '../../../../public_api'; // from 'ngx-ui-scroll';
+
+@Component({
+  selector: 'app-demo-clip',
+  templateUrl: './clip.component.html'
+})
+export class DemoClipComponent {
+
+  demoContext: DemoContext = <DemoContext>{
+    scope: 'adapter',
+    title: `Clip`,
+    titleId: `clip`,
+    viewportId: `clip-viewport`,
+    count: 0,
+    log: ''
+  };
+
+  datasource = new Datasource({
+    get: datasourceGetCallbackInfinite(this.demoContext),
+    settings: {
+      infinite: true
+    },
+    devSettings: {
+      debug: true,
+      logProcessRun: true
+    }
+  });
+
+  sources: DemoSources = [{
+    name: DemoSourceType.Component,
+    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);
+  },
+  settings: {
+    infinite: true
+  }
+});
+
+doClip() {
+  this.datasource.adapter.clip();
+}`
+  }, {
+    active: true,
+    name: DemoSourceType.Template,
+    text: `<button (click)="doClip()">Clip</button>
+
+<div class="viewport">
+  <div *uiScroll="let item of datasource">
+    <div class="item">{{item.text}}</div>
+  </div>
+</div>`
+  }, {
+    name: DemoSourceType.Styles,
+    text: `.viewport {
+  width: 150px;
+  height: 250px;
+  overflow-y: auto;
+  overflow-anchor: none;
+}
+.item {
+  font-weight: bold;
+  height: 25px;
+}`
+  }];
+
+  clipOptionsDescription = `  ClipOptions {
+    forwardOnly?: boolean;
+    backwardOnly?: boolean;
+  }`;
+
+  clipOptionsSample = `{ forwardOnly: true }`;
+
+  doClip() {
+    this.datasource.adapter.clip();
+  }
+
+}