Stenciljs-virtual-scroll

This is a project for building a standalone Virtual Scroll Web Component using Stencil. Project contain collection of two components:

1. virtual-scroll (VirtualScrollWebComponent). This component render subset of elements with DIFFERENT height, required to fill the viewport

2. fetch-helper (FetchHelperWebComponent) This component show you, how to use virtual scroll without framework.

Get Started with Angular5 (Ionic 3)

Step 1. Install Stenciljs-virtual-scroll

npm install stenciljs-virtual-scroll --save

Step 2. Import virtual scroll component into your angular app module

....
import 'stenciljs-virtual-scroll/dist/virtualscroll';
....

Step 3. Import CUSTOM_ELEMENTS_SCHEMA into your angular app module

....
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
....

@NgModule({
    ...
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    ....
})
export class AppModule { }

Step 4. Copying the Components

For Angular2+

During the build, the components need to be copied to the build output directory. The easiest way to do this is to modify include the collection in the assets array of the .angular-cli.json file.

"assets": [
        "assets",
        "favicon.ico",
        { "glob": "**/*", "input": "../node_modules/stenciljs-virtual-scroll/dist/virtualscroll", "output": "./virtualscroll" }
      ]

For Ionic2+

You must use app-script to copy web component files in www directory

1. Add in package.json

"config": {
    "ionic_copy": "./config/copy.config.js"
  }

2. Create config/copy.config.js and put in

// this is a custom dictionary to make it easy to extend/override
// provide a name for an entry, it can be anything such as 'copyAssets' or 'copyFonts'
// then provide an object with a `src` array of globs and a `dest` string
module.exports = {
    copyAssets: {
      src: ['{{SRC}}/assets/**/*'],
      dest: '{{WWW}}/assets'
    },
    copyIndexContent: {
      src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
      dest: '{{WWW}}'
    },
    copyFonts: {
      src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
      dest: '{{WWW}}/assets/fonts'
    },
    copyPolyfills: {
      src: [`{{ROOT}}/node_modules/ionic-angular/polyfills/${process.env.IONIC_POLYFILL_FILE_NAME}`],
      dest: '{{BUILD}}'
    },
    copySwToolbox: {
      src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
      dest: '{{BUILD}}'
    },
    copyVirtualScrollCore: {
      src: ['{{ROOT}}/node_modules/stenciljs-virtual-scroll/dist/virtualscroll/**/*'],
      dest: '{{BUILD}}/virtualscroll'
    },
    copyVirtualScroll: {
      src: ['{{ROOT}}/node_modules/stenciljs-virtual-scroll/dist/virtualscroll.js'],
      dest: '{{BUILD}}'
    }
  }

before copyVirtualScrollCore property set standart app-script copy.config properties (if you are modify self config or my version is outdated, get only last 2 properties and put in your)

3. And register component in app module

....
import 'stenciljs-virtual-scroll/dist/virtualscroll';
....

4. rebuild

Usage

....
  <div class="virtual-container">
    <virtual-scroll #scroll bottom-offset="5" selector="page-example .scroll-content">

      <div slot="virtual" class="virtual-slot">
        <div class="offer virtual-item" [attr.id]="item.index" *ngFor="let item of virtual">
          <div [style.backgroundImage]="'url(' + item.thumbnailUrl + ')'" class="cover">
          </div>
          <div class="title">{{item.index}}</div>
          <div class="title">{{item.title}}</div>
        </div>
      </div>
      <div slot="loader">loading...</div>
    </virtual-scroll>
  </div>
....

OR without selector

....
  <div class="virtual-container">
    <virtual-scroll #scroll bottom-offset="5" selector="">

      <div slot="virtual" class="virtual-slot">
        <div class="offer virtual-item" [attr.id]="item.index" *ngFor="let item of virtual">
          {{item.index}}
      </div>
      <div slot="loader">loading...</div>
    </virtual-scroll>
  </div>
....

....
export class ExamplePage {

  @ViewChild('scroll') vscroll: ElementRef;
  private virtual: Array<any> = [];
  ....

  initVScroll() {

    this.vscroll.nativeElement.addEventListener('update', (event) => {
      this.virtual = event.detail;
      //this.changeDetector.detectChanges(); if need
    });

    this.vscroll.nativeElement.addEventListener('toBottom', (event) => {
      this.http.get('https://jsonplaceholder.typicode.com/photos', {}).map(res => res.json()).subscribe(data => {
        this.vscroll.nativeElement.list = this.vscroll.nativeElement.list.concat(data.splice(0, 50))

        if (this.vscroll.nativeElement.list.length > 200) {
          this.vscroll.nativeElement.setInfinateFinally();
        }
        else {
          this.vscroll.nativeElement.setInfinateOn();
        }
        //this.changeDetector.detectChanges(); if need
      });
    });

    this.http.get('https://jsonplaceholder.typicode.com/photos', {}).map(res => res.json()).subscribe(data => {
      this.vscroll.nativeElement.list = data.splice(0, 50);
        //this.changeDetector.detectChanges(); if need
    });


  }
}

....

virtual-scroll {
    display: block;
}

If you need to use it without framework, watch fetch-helper component.

API

Selector

In this attribute you must set selector of scrollable container (ionic application example). If attribute is empty, component use inner scroll container.

bottom-offset

offset of elements to fired toBottom() event

toBottom()

this event is fired if scroll came to the end

update()

this event is fired every time when virtual scroll data is changed

setInfinateOn()

this method must call every time when lazy load data is finish. If this method do not call. toBottom event never fired again

setInfinateFinally()

this method must call if lazy load finally and never fired toBottom() evend, and hide loader element

clear()

this method clear all need params of component, but not list

....
    this.vscroll.nativeElement.list = [];
    this.vscroll.nativeElement.clear(); 
    //this.changeDetector.detectChanges(); if need     
....

scrollToNode()

set list item index, duration, offset

....
    this.vscroll.nativeElement.scrollToNode(25, 1000, -50);
....

forceUpdateComponent()

this method re-checks all dimensions, add the missing ones and force update component

....
    this.vscroll.nativeElement.forceUpdateComponent();
....

virtual-ratio

add nodes after last and before first viewed nodes in viewport.

WARN

nodes(list items) index must be different. Component set different index but if you change it, or if your list contain dublicates there may be problems.