feat(scrollpoint): handle custom scroll points

Author: nivekcode

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

@@ -13,28 +13,31 @@ export class ScrollHelperService {
 
   private window: WindowProxy;
   private DEFAULT_SCROLLSPEED = 50;
+  private SCROLL_BUFFER = 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)) {
+  public scrollIfNecessary(event: any, scrollPoints: ScrollPoints = {}, scrollSpeed?: number): void {
+    const position = event.pageY - this.window.scrollY;
+
+    if (this.isTopScrollNeeded(position, scrollPoints.top)) {
       this.window.scrollBy({top: -scrollSpeed || -this.DEFAULT_SCROLLSPEED, behavior: 'smooth'});
       return;
     }
 
-    if (this.isBottomScrollNeeded(bounding.top, scrollPoints.bottom)) {
+    if (this.isBottomScrollNeeded(position, 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 isTopScrollNeeded(currentPosition: number, scrollPointTop: number): boolean {
+    return scrollPointTop ? currentPosition < scrollPointTop + this.SCROLL_BUFFER : currentPosition < 20;
   }
 
-  private isBottomScrollNeeded(bottomBounding: number, scrollPointBottom: number): boolean {
-    return scrollPointBottom ? bottomBounding < scrollPointBottom : bottomBounding > this.window.innerHeight;
+  private isBottomScrollNeeded(currentPosition: number, scrollPointBottom: number): boolean {
+    return scrollPointBottom ?
+      currentPosition < scrollPointBottom : currentPosition > this.window.innerHeight - this.SCROLL_BUFFER;
   }
 }

projects/ng-sortgrid/src/lib/ngsg-item.directive.ts

@@ -28,7 +28,9 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe
   @Input() ngSortGridGroup = 'defaultGroup';
   @Input() ngSortGridItems;
   @Input() scrollPointTop;
+  @Input() scrollPointBottom;
   @Input() scrollSpeed;
+  @Input() autoScroll = false;
 
   @Output() sorted = new EventEmitter<any>();
 
@@ -91,7 +93,12 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe
 
   @HostListener('drag', ['$event'])
   drag(event): void {
-    this.scrollHelperService.scrollIfNecessary(event.target, {top: this.scrollPointTop}, this.scrollSpeed);
+    if (this.autoScroll) {
+      this.scrollHelperService.scrollIfNecessary(event, {
+        top: this.scrollPointTop,
+        bottom: this.scrollPointBottom
+      }, this.scrollSpeed);
+    }
   }
 
   @HostListener('dragover', ['$event'])