version 0.7.0

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v 0.7.0 (2017/11/27)
+* [ADD] - watch changes for: infiniteScrollDisabled - fix #196
+* [ADD] - watch changes for: infiniteScrollDistance - fix #202
+* [FIX] - fix for IE11 - fix #203 
+* [REFACTOR] - "disable" now removes the scroll listener instead of rxjs/filter
+
 ## v 0.6.1 (2017/10/20)
 * [REFACTOR] - updated code to be functional based
 * [FIX] - fix #67, fix #191, fix #190

example/bs-config.json

@@ -1,5 +1,12 @@
 {
   "port": 8000,
-  "files": ["./example**/*.{html,htm,css,js,ts,map}"],
-  "server": ["./example", "./dist/bundles"]
-}
+  "files": [
+    "./example**/*.{html,htm,css,js,ts,map}",
+    "./example/src/**/*.{html,htm,css,js,ts,map}",
+    "./dist/bundles**/*.{html,htm,css,js,ts,map}"
+  ],
+  "server": [
+    "./example",
+    "./dist/bundles"
+  ]
+}

example/src/main.ts

@@ -1,6 +1,7 @@
 // main entry point
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
@@ -10,9 +11,9 @@ import { TestInnerComponent } from './test.inner';
 
 @NgModule({
   declarations: [AppComponent, TestComponent, TestInnerComponent],
-  imports: [BrowserModule, InfiniteScrollModule],
+  imports: [BrowserModule, InfiniteScrollModule, FormsModule],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }
 
 platformBrowserDynamic().bootstrapModule(AppModule);

example/src/test.inner.ts

@@ -17,7 +17,8 @@ import { ListMaker } from './list.service';
          [infiniteScrollThrottle]="throttle"
          (scrolled)="onScrollDown()"
          (scrolledUp)="onUp()">
-      <h3 class="info">{{ className }}{{ info }}</h3>
+      <h3 class="info">{{ className }}, {{ info }}</h3>
+      <p>{{ info }}</p>
       <section class="content">
         <p *ngFor="let i of array">
           {{ i }}
@@ -34,21 +35,22 @@ export class TestInnerComponent {
   @Input() info = '';
 
   array = this.listMaker.array;
-  throttle = 300;
+  throttle = 20;
   scrollDistance = 1;
   scrollUpDistance = 2;
 
-  constructor(public listMaker: ListMaker) {}
+  constructor(public listMaker: ListMaker) { }
 
   onScrollDown(ev) {
-    console.log('scrolled down!!', ev);
+    console.log(`scrolled down, from ${this.className} ${this.info}`);
     this.listMaker.setDirectionDown();
   }
 
   onUp(ev) {
-    console.log('scrolled up!', ev);
+    console.log(`scrolled up, from  ${this.className} ${this.info}`);
     this.listMaker.setDirectionUp();
   }
+
   generateWord() {
     return chance.word();
   }

example/src/test.ts

@@ -12,12 +12,16 @@ import { ListMaker } from './list.service';
     data-infinite-scroll
     [infiniteScrollContainer]="selector"
     [fromRoot]="fromRoot"
+    [infiniteScrollDisabled]="disableScroll"
     [infiniteScrollDistance]="scrollDistance"
     [infiniteScrollUpDistance]="scrollUpDistance"
     [infiniteScrollThrottle]="throttle"
     (scrolled)="onScrollDown()"
     (scrolledUp)="onUp()">
-      <h3 class="info">{{ className }}{{info}}</h3>
+      <h3 class="info">
+        {{ className }}, {{info}}
+        <input type="checkbox" name="_disable" [(ngModel)]="disableScroll" title="disables scroll">
+      </h3>
       <p *ngFor="let i of array">
         {{ i }}
       </p>
@@ -31,20 +35,22 @@ export class TestComponent {
   @Input() fromRoot = false;
   @Input() info = '';
 
+  disableScroll = false;
+
   array = this.listMaker.array;
-  throttle = 300;
-  scrollDistance = 1;
+  throttle = 20;
+  scrollDistance = 3;
   scrollUpDistance = 2;
 
-  constructor(public listMaker: ListMaker) {}
+  constructor(public listMaker: ListMaker) { }
 
   onScrollDown(ev) {
-    console.log('scrolled down!!', ev);
+    console.log(`scrolled down, from ${this.className} ${this.info}`);
     this.listMaker.setDirectionDown();
   }
 
   onUp(ev) {
-    console.log('scrolled up!', ev);
+    console.log(`scrolled up, from  ${this.className} ${this.info}`);
     this.listMaker.setDirectionUp();
   }
   generateWord() {

example/style.css

@@ -18,6 +18,10 @@
   overflow: scroll;
   display: block;
   position: fixed;
+  transition: width .3s ease-out;
+}
+.fixed:hover {
+  width: 350px;
 }
 .fixed .info {
   position: fixed;

package.json

@@ -1,8 +1,7 @@
 {
   "name": "ngx-infinite-scroll",
-  "version": "0.6.1",
-  "description":
-    "An infinite scroll directive for Angular compatible with AoT compilation and Tree shaking",
+  "version": "0.7.0",
+  "description": "An infinite scroll directive for Angular compatible with AoT compilation and Tree shaking",
   "main": "./bundles/ngx-infinite-scroll.umd.js",
   "module": "./modules/ngx-infinite-scroll.es5.js",
   "es2015": "./modules/ngx-infinite-scroll.js",
@@ -28,7 +27,11 @@
     "url": "https://github.com/orizens/ngx-infinite-scroll/issues"
   },
   "homepage": "https://github.com/orizens/ngx-infinite-scroll",
-  "keywords": ["angular", "javascript", "typescript"],
+  "keywords": [
+    "angular",
+    "javascript",
+    "typescript"
+  ],
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": ">= 4.0.0",
@@ -70,4 +73,4 @@
     "sorcery": "0.10.0",
     "yargs": "7.0.2"
   }
-}
+}

src/modules/infinite-scroll.directive.ts

@@ -75,7 +75,6 @@ export class InfiniteScrollDirective
             // tslint:disable-next-line:arrow-parens
             up: event => this.zone.run(() => this.scrolledUp.emit(event))
           },
-          filterBefore: () => !this.infiniteScrollDisabled,
           horizontal: this.horizontal,
           scrollContainer: this.infiniteScrollContainer,
           scrollWindow: this.scrollWindow,

src/services/scroll-register.ts

@@ -18,7 +18,6 @@ import { getScrollStats, updateScrollPosition } from './scroll-resolver';
 export interface IScrollRegisterConfig {
   container: ContainerRef;
   throttleDuration: number;
-  filterBefore: () => boolean;
   mergeMap: Function;
   scrollHandler: (value: any) => void;
 }
@@ -31,7 +30,6 @@ export interface IScroller {
   scrollWindow: boolean;
   element: ElementRef;
   scrollContainer: string | ElementRef;
-  filterBefore: () => boolean;
   alwaysCallback: boolean;
   downDistance: number;
   upDistance: number;
@@ -46,7 +44,6 @@ export function attachScrollEvent(
 ): Subscription {
   return Observable.fromEvent(options.container, 'scroll')
     .sampleTime(options.throttleDuration)
-    .filter(options.filterBefore)
     .mergeMap((ev: any) => Observable.of(options.mergeMap(ev)))
     .subscribe(options.scrollHandler);
 }
@@ -68,7 +65,6 @@ export function createScroller(config: IScroller): Subscription {
   };
   const options: IScrollRegisterConfig = {
     container: resolver.container,
-    filterBefore: config.filterBefore,
     mergeMap: () => calculatePoints(config.element, resolver),
     scrollHandler: (positionStats: IPositionStats) =>
       handleOnScroll(scrollPosition, positionStats, config),

tests/services/scroll-register.spec.ts

@@ -31,7 +31,6 @@ describe('Scroll Regsiter', () => {
     const mockDom = createMockDom();
     const scrollConfig: IScrollRegisterConfig = {
       container: mockDom.container.nativeElement,
-      filterBefore: () => true,
       mergeMap: (e: any) => e,
       scrollHandler: (ev: any) => ev,
       throttleDuration: 300,