feat(core): added new directive for virtual scroll

Author: thekiba

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ngxf",
-  "version": "6.0.8",
+  "version": "6.0.9",
   "scripts": {
     "ng": "ng",
     "tsc": "tsc",
@@ -32,6 +32,7 @@
     "@angular/pwa": "^0.8.4",
     "@angular/router": "7.2.1",
     "@angular/service-worker": "7.2.1",
+    "@ngxd/core": "7.0.1",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
     "rxjs": "6.3.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngxf/platform",
-  "version": "6.0.8",
+  "version": "6.0.9",
   "description": "NGXF - Non-State Management for Angular",
   "keywords": [
     "non-ngxs",
@@ -40,6 +40,7 @@
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0",
     "@angular/core": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0",
     "@angular/router": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0",
+    "@ngxd/core": "^7.0.1",
     "rxjs": ">=6.0.0 || ^5.6.0-forward-compat.4"
   }
 }

projects/platform/package.json

@@ -13,3 +13,4 @@ export * from './timeout.directive';
 export * from './use-reducer.directive';
 export * from './use-state.directive';
 export * from './use-effect.directive';
+export * from './virtual.directive';

projects/platform/src/lib/directives/index.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectorRef, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
+import { VirtualHandler } from '../tools';
+
+@Directive({ selector: '[virtual]' })
+export class VirtualDirective implements OnDestroy {
+  @Input() virtual: any;
+
+  constructor(
+    private handler: VirtualHandler,
+    private elementRef: ElementRef,
+    private cd: ChangeDetectorRef
+  ) {
+    this.handler.register(this.elementRef.nativeElement, cd);
+  }
+
+  ngOnDestroy() {
+    this.handler.unregister(this.elementRef.nativeElement);
+  }
+}

projects/platform/src/lib/directives/virtual.directive.ts

@@ -15,7 +15,8 @@ import {
   TimeoutDirective,
   UseEffectDirective,
   UseReducerDirective,
-  UseStateDirective
+  UseStateDirective,
+  VirtualDirective
 } from './directives';
 import { CallPipe } from './pipes';
 
@@ -34,7 +35,8 @@ const DIRECTIVES = [
   TimeoutDirective,
   UseReducerDirective,
   UseStateDirective,
-  UseEffectDirective
+  UseEffectDirective,
+  VirtualDirective
 ];
 
 const PIPES = [

projects/platform/src/lib/platform.module.ts

@@ -1,3 +1,4 @@
-export * from './cookies.tools';
 export * from './recompose';
 export * from './utils';
+export * from './cookies.tools';
+export * from './virtual.handler';

projects/platform/src/lib/tools/index.ts

@@ -0,0 +1,38 @@
+import { Injectable, ChangeDetectorRef, OnDestroy } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class VirtualHandler implements OnDestroy {
+
+  private elementLink = new Map<Element, ChangeDetectorRef>();
+  private observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      const cd = this.elementLink.get(entry.target as Element);
+      entry.isIntersecting ? attachCD(cd) : detachCD(cd);
+    });
+  });
+
+  register(element: Element, cd: ChangeDetectorRef) {
+    this.elementLink.set(element, cd);
+    this.observer.observe(element);
+  }
+
+  unregister(element: Element) {
+    this.elementLink.delete(element);
+    this.observer.unobserve(element);
+  }
+
+  ngOnDestroy() {
+    this.elementLink.forEach((cd, e) => this.observer.unobserve(e));
+    this.elementLink.clear();
+  }
+
+}
+
+function attachCD(cd: ChangeDetectorRef) {
+  cd.reattach();
+  cd.detectChanges();
+}
+
+function detachCD(cd: ChangeDetectorRef) {
+  cd.detach();
+}