feat(scrollpoints): react on scrollpoints

Author: nivekcode

projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts

@@ -0,0 +1,40 @@
+import {Inject, Injectable} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+
+export interface ScrollPoints {
+  top?: number;
+  bottom?: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ScrollHelperService {
+
+  private window: WindowProxy;
+  private DEFAULT_SCROLLSPEED = 50;
+
+  constructor(@Inject(DOCUMENT) private document) {
+    this.window = document.defaultView;
+  }
+
+  public scrollIfNecessary(element: HTMLElement, scrollPoints: ScrollPoints = {}, scrollSpeed?: number): void {
+    const bounding = element.getBoundingClientRect();
+    if (this.isTopScrollNeeded(bounding.top, scrollPoints.top)) {
+      this.window.scrollBy({top: -scrollSpeed || -this.DEFAULT_SCROLLSPEED, behavior: 'smooth'});
+      return;
+    }
+
+    if (this.isBottomScrollNeeded(bounding.top, scrollPoints.bottom)) {
+      this.window.scrollBy({top: scrollSpeed || this.DEFAULT_SCROLLSPEED, behavior: 'smooth'});
+    }
+  }
+
+  private isTopScrollNeeded(topBounding: number, scrollPointTop: number): boolean {
+    return scrollPointTop ? topBounding < scrollPointTop : topBounding < 0;
+  }
+
+  private isBottomScrollNeeded(bottomBounding: number, scrollPointBottom: number): boolean {
+    return scrollPointBottom ? bottomBounding < scrollPointBottom : bottomBounding > this.window.innerHeight;
+  }
+}

projects/ng-sortgrid/src/lib/helpers/view-port.service.ts

@@ -17,21 +17,22 @@ import {NgsgStoreService} from './ngsg-store.service';
 import {NgsgSortService} from './ngsg-sort.service';
 import {NgsgSelectionService} from './ngsg-selection.service';
 import {NgsgEventsService} from './ngsg-events.service';
+import {ScrollHelperService} from './helpers/scroll-helper.service';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
-import {ViewPortService} from './helpers/view-port.service';
 
 const selector = '[ngSortgridItem]';
 
 @Directive({selector})
 export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   @Input() ngSortGridGroup = 'defaultGroup';
   @Input() ngSortGridItems;
+  @Input() scrollPointTop;
+  @Input() scrollSpeed;
 
   @Output() sorted = new EventEmitter<any>();
 
   private selected = false;
-  private SCROLLSPEED = 100;
   private destroy$ = new Subject();
 
   constructor(
@@ -41,7 +42,7 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe
     private reflectService: NgsgReflectService,
     private ngsgStore: NgsgStoreService,
     private ngsgEventService: NgsgEventsService,
-    private viewPortService: ViewPortService
+    private scrollHelperService: ScrollHelperService
   ) {
   }
 
@@ -90,14 +91,7 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe
 
   @HostListener('dragover', ['$event'])
   dragOver(event): boolean {
-
-    if (this.viewPortService.isOutOfViewport(event.target).top) {
-      window.scrollBy({top: -this.SCROLLSPEED, behavior: 'smooth'});
-    }
-
-    if (this.viewPortService.isOutOfViewport(event.target).bottom) {
-      window.scrollBy({top: this.SCROLLSPEED, behavior: 'smooth'});
-    }
+    this.scrollHelperService.scrollIfNecessary(event.target, {top: this.scrollPointTop}, this.scrollSpeed);
 
     if (event.preventDefault) {
       // Necessary. Allows us to drop.