angular2-virtual-scroll - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

CHANGELOG.md

 
+# v0.0.8
+
+* Feature: [Using virtual scroll with api #4](https://github.com/rintoj/angular2-virtual-scroll/issues/4) & [data from server #7](https://github.com/rintoj/angular2-virtual-scroll/issues/7)
+
 # v0.0.7
@@ -3,0 +7,0 @@

dist/virtual-scroll.d.ts

 import { ElementRef, EventEmitter, ModuleWithProviders, OnChanges, OnDestroy, OnInit, Renderer, SimpleChanges } from '@angular/core';
-export interface IndexUpdateEvent {
+export interface ChangeEvent {
     start?: number;
@@ -15,3 +15,3 @@ end?: number;
     update: EventEmitter<any[]>;
-    indexUpdate: EventEmitter<IndexUpdateEvent>;
+    change: EventEmitter<ChangeEvent>;
     protected contentElementRef: ElementRef;
@@ -18,0 +18,0 @@ private onScrollListener;

dist/virtual-scroll.js

@@ -19,3 +19,3 @@ "use strict";
         this.update = new core_1.EventEmitter();
-        this.indexUpdate = new core_1.EventEmitter();
+        this.change = new core_1.EventEmitter();
         this.startupLoop = true;
@@ -106,6 +106,2 @@ }
             this.update.emit(items.slice(start, end));
-            this.indexUpdate.emit({
-                start: start,
-                end: end
-            });
             this.previousStart = start;
@@ -116,2 +112,8 @@ this.previousEnd = end;
             }
+            else {
+                this.change.emit({
+                    start: start,
+                    end: end
+                });
+            }
         }
@@ -149,3 +151,3 @@ else {
         __metadata('design:type', core_1.EventEmitter)
-    ], VirtualScrollComponent.prototype, "indexUpdate", void 0);
+    ], VirtualScrollComponent.prototype, "change", void 0);
     __decorate([
@@ -152,0 +154,0 @@ core_1.ViewChild('content', { read: core_1.ElementRef }),

package.json

 {
     "name": "angular2-virtual-scroll",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "description": "Angular 2 module for virtual -infinite- list. Supports multi-column",
@@ -5,0 +5,0 @@ "main": "dist/virtual-scroll.js",

README.md

@@ -116,2 +116,14 @@
 
+## API
+
+| Attribute      | Type   | Description
+|----------------|--------|------------
+| items          | any[]  | The data that builds the templates within the virtual scroll. This is the same data that you'd pass to ngFor. It's important to note that when this data has changed, then the entire virtual scroll is refreshed.
+| childWidth     | number | The minimum width of the item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. Note that the actual rendered size of the first cell is used by default if not specified.
+| childHeight    | number | The minimum height of the item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. Note that the actual rendered size of the first cell is used by default if not specified.
+| update         | Event  | This event is fired every time `start` or `end` index change and emits list of items from `start` to `end`. The list emitted by this event must be used with `*ngFor` to render the actual list of items within `<virtual-scroll>`
+| change         | Event  | This event is fired every time `start` or `end` index change and emits `ChangeEvent` which of format: `{ start: number, end: number }`
+
+
+
 ## Items with variable size
@@ -133,2 +145,48 @@
 
+## Loading in chunk
+
+`change` event is fired every time `start` or `end` index change. You could use this to load more items at the end of the scroll. See below.
+
+```
+
+import { ChangeEvent } from '@angular2-virtual-scroll';
+...
+
+@Component({
+    selector: 'list-with-api',
+    template: `
+        <virtual-scroll [items]="buffer" (update)="scrollItems = $event"
+            (change)="onListChange($event)">
+
+            <list-item *ngFor="let item of scrollItems" [item]="item"> </list-item>
+            <div *ngIf="loading" class="loader">Loading...</div>
+
+        </virtual-scroll>
+    `
+})
+export class ListWithApiComponent implements OnChanges {
+
+    @Input()
+    items: ListItem[];
+
+    protected buffer: ListItem[] = [];
+    protected loading: boolean;
+
+    protected onListChange(event: ChangeEvent) {
+        if (event.end !== this.buffer.length) return;
+        this.loading = true;
+        this.fetchNextChunk(this.buffer.length, 10).then(chunk => {
+            this.buffer = this.buffer.concat(chunk);
+            this.loading = false;
+        }, () => this.loading = false);
+    }
+
+    protected fetchNextChunk(skip: number, limit: number): Promise<ListItem[]> {
+        return new Promise((resolve, reject) => {
+            ....
+        });
+    }
+}
+```
+
 ## If container size change
@@ -135,0 +193,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32095

increased by9.91%

Lines of code

423

increased by0.48%

Number of lines in readme file

263

increased by28.29%

No dependency changes