Major refactor

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v0.4.4
+
+* Added ability to use virtual scroll with different heights of elements
+* flag "enableUnequalChildrenSizes_Experimental" was added (defaults to false) to bypass the different-height elements calculations until they're stable (& for users of fixed-height children to avoid the minor performance impact).
+Breaking Change: The value of ChangeEvent.end wasn't intuitive. This has been corrected. Both ChangeEvent.start and ChangeEvent.end are the 0-based array indexes of the items being rendered in the viewport. (Previously Change.End was the array index + 1)
+
 # v0.4.3
 
 * Added ability to use virtual scroll with different heights of elements

README.md

@@ -13,6 +13,9 @@ This method is effective because the number of DOM elements are always constant
 * Easy to use apis
 * OpenSource and available in GitHub
 
+## Breaking Changes:
+* The value of ChangeEvent.end wasn't intuitive. This has been corrected. Both ChangeEvent.start and ChangeEvent.end are the 0-based array indexes of the items being rendered in the viewport. (Previously Change.End was the array index + 1)
+
 ## New features:
 
 * Added ability to put other elements inside of scroll (Need to wrap list itself in @ContentChild('container'))
@@ -137,7 +140,7 @@ Child component is not necessary if your item is simple enough. See below.
 | 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.
 | bufferAmount   | number | The the number of elements to be rendered outside of the current container's viewport. Useful when not all elements are the same dimensions.
-| scrollAnimationTime | number | The time in milliseconds for the scroll animation to run for. Default value is 1500. 0 will completely disable the tween/animation.
+| scrollAnimationTime | number | The time in milliseconds for the scroll animation to run for. Default value is 750. 0 will completely disable the tween/animation.
 | parentScroll   | Element / Window | Element (or window), which will have scrollbar. This element must be one of the parents of virtual-scroll
 | start         | Event  | This event is fired every time `start` index changes and emits `ChangeEvent` which of format: `{ start: number, end: number }`
 | end         | Event  | This event is fired every time `end` index changes and emits `ChangeEvent` which of format: `{ start: number, end: number }`

demo/src/app/app.component.ts

@@ -24,6 +24,10 @@ import { ViewEncapsulation } from '@angular/core';
         <p><strong>change</strong> 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.</p>
         <pre><code class="javascript">{{codeListWithApi}}</code></pre>
+
+        <!--
+          <list-with-parent-scroll [items]="items"></list-with-parent-scroll>
+        -->
     `,
   styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None

demo/src/app/app.module.ts

@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { ListItemComponent } from './lists/list-item.component';
 import { ListWithApiComponent } from './lists/list-with-api.component';
+import { ListWithParentScrollComponent } from './lists/list-with-parent-scroll.component';
 import { MultiColListComponent } from './lists/multi-col-list.component';
 
 import { NgModule } from '@angular/core';
@@ -17,6 +18,7 @@ import { HorizontalListComponent } from "./lists/horizontal-list.component";
     AppComponent,
     ListItemComponent,
     ListWithApiComponent,
+    ListWithParentScrollComponent,
     MultiColListComponent,
     TableListComponent,
     VerticalListComponent,

demo/src/app/lists/horizontal-list.component.ts

@@ -13,14 +13,13 @@ import { ListItem } from './list-item.component';
     <button (click)="scrollTo()">Scroll to 50</button>
 
     <div class="status">
-        Showing <span class="badge">{{indices?.start + 1}}</span>
+        Showing <span class="badge">{{indices?.start}}</span>
         - <span class="badge">{{indices?.end}}</span>
         of <span class="badge">{{filteredList?.length}}</span>
       <span>({{scrollItems?.length}} nodes)</span>
       </div>
 
     <virtual-scroll
-      class="horizontal-scroll"
       [horizontal]="true"
       [items]="filteredList"
       (update)="scrollItems = $event"
@@ -64,7 +63,7 @@ export class HorizontalListComponent implements OnChanges {
   }
 
   scrollTo() {
-    this.virtualScroll.scrollInto(this.items[50]);
+    this.virtualScroll.scrollToIndex(50);
   }
 
   ngOnChanges() {

demo/src/app/lists/list-with-api.component.ts

@@ -9,7 +9,7 @@ import { SimpleChanges } from '@angular/core';
   selector: 'list-with-api',
   template: `
     <div class="status">
-      Showing <span class="badge">{{indices?.start + 1}}</span>
+      Showing <span class="badge">{{indices?.start}}</span>
       - <span class="badge">{{indices?.end}}</span>
       of <span class="badge">{{buffer?.length}}</span>
       <span>({{scrollItems?.length}} nodes)</span>
@@ -49,7 +49,7 @@ export class ListWithApiComponent implements OnChanges {
 
   fetchMore(event: ChangeEvent) {
     this.indices = event;
-    if (event.end === this.buffer.length) {
+    if (event.end === this.buffer.length - 1) {
       this.loading = true;
       this.fetchNextChunk(this.buffer.length, this.bufferSize, event).then(chunk => {
         this.buffer = this.buffer.concat(chunk);

demo/src/app/lists/list-with-parent-scroll.component.ts

@@ -0,0 +1,73 @@
+import { Component, Input, OnChanges, ViewChild } from '@angular/core';
+import { VirtualScrollComponent } from 'angular2-virtual-scroll';
+import { ListItem } from './list-item.component';
+
+@Component({
+  selector: 'list-with-parent-scroll',
+  template: `
+    <h1>Window/Parent Scroll</h1>
+    <button (click)="sortByName()">Sort By Name</button>
+    <button (click)="sortByIndex()">Sort By Index</button>
+    <button (click)="reduceListToEmpty()">Reduce to 0 Items</button>
+    <button (click)="reduceList()">Reduce to 100 Items</button>
+    <button (click)="setToFullList()">Revert to 1000 Items</button>
+    <button (click)="scrollTo()">Scroll to 50</button>
+
+    <div class="status">
+        Showing <span class="badge">{{indices?.start}}</span>
+        - <span class="badge">{{indices?.end}}</span>
+        of <span class="badge">{{filteredList?.length}}</span>
+      <span>({{scrollItems?.length}} nodes)</span>
+      </div>
+
+    <virtual-scroll #scroll [parentScroll]="scroll.window"
+      [items]="filteredList"
+      (update)="scrollItems = $event"
+      (change)="indices = $event">
+
+      <list-item *ngFor="let item of scrollItems" [item]="item"> </list-item>
+
+    </virtual-scroll>
+  `
+})
+export class ListWithParentScrollComponent implements OnChanges {
+
+  @Input()
+  items: ListItem[];
+  scrollItems: ListItem[];
+  indices: any;
+
+  filteredList: ListItem[];
+
+  @ViewChild(VirtualScrollComponent)
+  private virtualScroll: VirtualScrollComponent;
+
+  reduceListToEmpty() {
+    this.filteredList = [];
+  }
+
+  reduceList() {
+    this.filteredList = (this.items || []).slice(0, 100);
+  }
+
+  sortByName() {
+    this.filteredList = [].concat(this.filteredList || []).sort((a, b) => -(a.name < b.name) || +(a.name !== b.name));
+  }
+
+  sortByIndex() {
+    this.filteredList = [].concat(this.filteredList || []).sort((a, b) => -(a.index < b.index) || +(a.index !== b.index));
+  }
+
+  setToFullList() {
+    this.filteredList = (this.items || []).slice();
+  }
+
+  scrollTo() {
+    this.virtualScroll.scrollToIndex(50, false);
+  }
+
+  ngOnChanges() {
+    this.setToFullList();
+  }
+
+}

demo/src/app/lists/multi-col-list.component.ts

@@ -15,20 +15,19 @@ import { VirtualScrollComponent } from 'angular2-virtual-scroll';
     <button (click)="scrollTo()">Scroll to 50</button>
 
     <div class="status">
-        Showing <span class="badge">{{indices?.start + 1}}</span>
+        Showing <span class="badge">{{indices?.start}}</span>
         - <span class="badge">{{indices?.end}}</span>
         of <span class="badge">{{filteredList?.length}}</span>
       <span>({{scrollItems?.length}} nodes)</span>
       </div>
 
-    <div virtualScroll
+    <virtual-scroll
       [items]="filteredList"
       (update)="scrollItems = $event"
       (change)="indices = $event">
-
-      <list-item *ngFor="let item of scrollItems" [item]="item"> </list-item>
-
-    </div>
+      
+      <list-item *ngFor="let item of scrollItems" class="list-item horizontal-list-item" [item]="item"> </list-item>
+    </virtual-scroll>
   `,
   styleUrls: ['./multi-col-list.scss']
 })
@@ -67,7 +66,7 @@ export class MultiColListComponent implements OnChanges {
   }
 
   scrollTo() {
-    this.virtualScroll.scrollInto(this.items[50]);
+    this.virtualScroll.scrollToIndex(50);
   }
 
   ngOnChanges() {

demo/src/app/lists/table-list.component.ts

@@ -13,7 +13,7 @@ import { ListItem } from './list-item.component';
     <button (click)="scrollTo()">Scroll to 50</button>
 
     <div class="status">
-        Showing <span class="badge">{{indices?.start + 1}}</span>
+        Showing <span class="badge">{{indices?.start}}</span>
         - <span class="badge">{{indices?.end}}</span>
         of <span class="badge">{{filteredList?.length}}</span>
       <span>({{scrollItems?.length}} nodes)</span>
@@ -71,7 +71,7 @@ export class TableListComponent implements OnChanges {
   }
 
   scrollTo() {
-    this.virtualScroll.scrollInto(this.items[50]);
+    this.virtualScroll.scrollToIndex(50);
   }
 
   ngOnChanges() {

demo/src/app/lists/vertical-list.component.ts

@@ -13,7 +13,7 @@ import { ListItem } from './list-item.component';
     <button (click)="scrollTo()">Scroll to 50</button>
 
     <div class="status">
-        Showing <span class="badge">{{indices?.start + 1}}</span>
+        Showing <span class="badge">{{indices?.start}}</span>
         - <span class="badge">{{indices?.end}}</span>
         of <span class="badge">{{filteredList?.length}}</span>
       <span>({{scrollItems?.length}} nodes)</span>
@@ -62,7 +62,7 @@ export class VerticalListComponent implements OnChanges {
   }
 
   scrollTo() {
-    this.virtualScroll.scrollInto(this.items[50]);
+    this.virtualScroll.scrollToIndex(50);
   }
 
   ngOnChanges() {

dist/virtual-scroll.d.ts

@@ -6,17 +6,20 @@ export interface ChangeEvent {
 }
 export interface IDimensions {
     itemCount: number;
+    itemsPerWrapGroup: number;
+    wrapGroupsPerPage: number;
+    itemsPerPage: number;
+    pageCount_fractional: number;
     childWidth: number;
     childHeight: number;
-    itemsPerRow: number;
-    itemsPerCol: number;
-    scrollHeight: number;
-    scrollWidth: number;
+    scrollLength: number;
+}
+export interface IPageInfo {
+    arrayStartIndex: number;
+    arrayEndIndex: number;
 }
-export interface CalculateItemsResult {
-    start: number;
-    end: number;
-    scrollPosition: number;
+export interface IViewport extends IPageInfo {
+    padding: number;
     scrollLength: number;
 }
 export declare class VirtualScrollComponent implements OnInit, OnChanges, OnDestroy {
@@ -63,18 +66,14 @@ export declare class VirtualScrollComponent implements OnInit, OnChanges, OnDest
     protected _offsetType: any;
     protected _scrollType: any;
     protected _pageOffsetType: any;
-    protected _scrollDim: any;
-    protected _itemsPerScrollDir: any;
-    protected _itemsPerOpScrollDir: any;
     protected _childScrollDim: any;
     protected _translateDir: any;
     protected updateDirection(): void;
     protected refreshHandler: () => void;
     protected calculatedScrollbarWidth: number;
     protected calculatedScrollbarHeight: number;
     protected padding: number;
-    protected previousStart: number;
-    protected previousEnd: number;
+    protected previousViewPort: IViewport;
     protected currentTween: tween.Tween;
     protected itemsHeight: {
         [key: number]: number;
@@ -85,24 +84,19 @@ export declare class VirtualScrollComponent implements OnInit, OnChanges, OnDest
     protected cachedItemsLength: number;
     protected disposeScrollHandler: () => void | undefined;
     protected disposeResizeHandler: () => void | undefined;
-    /** Cache of the last scroll to prevent setting CSS when not needed. */
-    protected lastScrollLength: number;
-    /** Cache of the last padding to prevent setting CSS when not needed. */
-    protected lastScrollPosition: number;
-    protected refresh_internal(itemsArrayModified: boolean, maxReRunTimes?: number): void;
+    protected refresh_internal(itemsArrayModified: boolean, maxRunTimes?: number): void;
     protected getScrollElement(): HTMLElement;
     protected addScrollEventHandlers(): void;
     protected removeScrollEventHandlers(): void;
     protected getElementsOffset(): number;
-    protected countItemsPerRow(): number;
-    protected countItemsPerCol(): number;
-    protected countItemsPerDirection(propertyName: string): number;
-    protected getScrollValue(): number;
+    protected countItemsPerWrapGroup(): number;
+    protected getScrollPosition(): number;
     protected calculateDimensions(): IDimensions;
     protected cachedPageSize: number;
     protected previousScrollNumberElements: number;
-    protected calculateScrollPosition(start: number, dimensions: IDimensions, allowUnequalChildrenSizes_Experimental: boolean): number;
-    protected calculateItems(forceViewportUpdate?: boolean): CalculateItemsResult;
+    protected calculatePadding(arrayStartIndex: number, dimensions: IDimensions, allowUnequalChildrenSizes_Experimental: boolean): number;
+    protected calculatePageInfo(scrollPosition: number, dimensions: IDimensions): IPageInfo;
+    protected calculateViewport(forceViewportUpdate?: boolean): IViewport;
 }
 export declare class VirtualScrollModule {
 }