feat(grid): use Angular injected document to allow Server Side Rendering

Closes #124

Author: llorenspujol

projects/angular-grid-layout/src/lib/grid-item/grid-item.component.ts

@@ -13,6 +13,7 @@ import { GRID_ITEM_GET_RENDER_DATA_TOKEN, KtdGridItemRenderDataTokenType } from
 import { KtdGridService } from '../grid.service';
 import { ktdOutsideZone } from '../utils/operators';
 import { ktdIsMouseEventOrMousePointerEvent, ktdPointerClient, ktdPointerDown, ktdPointerUp } from '../utils/pointer.utils';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
     standalone: true,
@@ -109,6 +110,7 @@ export class KtdGridItemComponent implements OnInit, OnDestroy, AfterContentInit
                 private gridService: KtdGridService,
                 private renderer: Renderer2,
                 private ngZone: NgZone,
+                @Inject(DOCUMENT) private document: Document,
                 @Inject(GRID_ITEM_GET_RENDER_DATA_TOKEN) private getItemRenderData: KtdGridItemRenderDataTokenType) {
         this.dragStart$ = this.dragStartSubject.asObservable();
         this.resizeStart$ = this.resizeStartSubject.asObservable();
@@ -183,8 +185,8 @@ export class KtdGridItemComponent implements OnInit, OnDestroy, AfterContentInit
                 }
 
                 const startPointer = ktdPointerClient(startEvent);
-                return this.gridService.mouseOrTouchMove$(document).pipe(
-                    takeUntil(ktdPointerUp(document)),
+                return this.gridService.mouseOrTouchMove$(this.document).pipe(
+                    takeUntil(ktdPointerUp(this.document)),
                     ktdOutsideZone(this.ngZone),
                     filter((moveEvent) => {
                         moveEvent.preventDefault();

projects/angular-grid-layout/src/lib/grid.component.ts

@@ -1,6 +1,5 @@
 import {
-    AfterContentChecked, AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EmbeddedViewRef, EventEmitter,
-    HostBinding, Input,
+    AfterContentChecked, AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EmbeddedViewRef, EventEmitter, Inject, Input,
     NgZone, OnChanges, OnDestroy, Output, QueryList, Renderer2, SimpleChanges, ViewContainerRef, ViewEncapsulation
 } from '@angular/core';
 import { coerceNumberProperty, NumberInput } from './coercion/number-property';
@@ -20,6 +19,7 @@ import { ktdGetScrollTotalRelativeDifference$, ktdScrollIfNearElementClientRect$
 import { BooleanInput, coerceBooleanProperty } from './coercion/boolean-property';
 import { KtdGridItemPlaceholder } from './directives/placeholder';
 import { getTransformTransitionDurationInMs } from './utils/transition-duration';
+import { DOCUMENT } from '@angular/common';
 
 interface KtdDragResizeEvent {
     layout: KtdGridLayout;
@@ -315,7 +315,8 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                 private elementRef: ElementRef,
                 private viewContainerRef: ViewContainerRef,
                 private renderer: Renderer2,
-                private ngZone: NgZone) {
+                private ngZone: NgZone,
+                @Inject(DOCUMENT) private document: Document) {
 
     }
 
@@ -491,7 +492,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
             const gridElemClientRect: KtdClientRect = getMutableClientRect(this.elementRef.nativeElement as HTMLElement);
             const dragElemClientRect: KtdClientRect = getMutableClientRect(gridItem.elementRef.nativeElement as HTMLElement);
 
-            const scrollableParent = typeof this.scrollableParent === 'string' ? document.getElementById(this.scrollableParent) : this.scrollableParent;
+            const scrollableParent = typeof this.scrollableParent === 'string' ? this.document.getElementById(this.scrollableParent) : this.scrollableParent;
 
             this.renderer.addClass(gridItem.elementRef.nativeElement, 'no-transitions');
             this.renderer.addClass(gridItem.elementRef.nativeElement, 'ktd-grid-item-dragging');
@@ -509,14 +510,14 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
             //  - Pros are that we would not repeat subscriptions and takeUntil would shut down observables at the same time.
             //  - Cons are that moving this functionality as a side effect inside the main drag loop would be confusing.
             const scrollSubscription = this.ngZone.runOutsideAngular(() =>
-                (!scrollableParent ? NEVER : this.gridService.mouseOrTouchMove$(document).pipe(
+                (!scrollableParent ? NEVER : this.gridService.mouseOrTouchMove$(this.document).pipe(
                     map((event) => ({
                         pointerX: ktdPointerClientX(event),
                         pointerY: ktdPointerClientY(event)
                     })),
                     ktdScrollIfNearElementClientRect$(scrollableParent, {scrollStep: this.scrollSpeed})
                 )).pipe(
-                    takeUntil(ktdPointerUp(document))
+                    takeUntil(ktdPointerUp(this.document))
                 ).subscribe());
 
             /**
@@ -525,15 +526,15 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
             const subscription = this.ngZone.runOutsideAngular(() =>
                 merge(
                     combineLatest([
-                        this.gridService.mouseOrTouchMove$(document),
+                        this.gridService.mouseOrTouchMove$(this.document),
                         ...(!scrollableParent ? [of({top: 0, left: 0})] : [
                             ktdGetScrollTotalRelativeDifference$(scrollableParent).pipe(
                                 startWith({top: 0, left: 0}) // Force first emission to allow CombineLatest to emit even no scroll event has occurred
                             )
                         ])
                     ])
                 ).pipe(
-                    takeUntil(ktdPointerUp(document)),
+                    takeUntil(ktdPointerUp(this.document)),
                 ).subscribe(([pointerDragEvent, scrollDifference]: [MouseEvent | TouchEvent | PointerEvent, { top: number, left: number }]) => {
                         pointerDragEvent.preventDefault();
 

projects/angular-grid-layout/src/lib/grid.service.ts

@@ -1,8 +1,9 @@
-import { Injectable, NgZone, OnDestroy } from '@angular/core';
+import { Inject, Injectable, NgZone, OnDestroy } from '@angular/core';
 import { ktdNormalizePassiveListenerOptions } from './utils/passive-listeners';
 import { fromEvent, iif, Observable, Subject, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { ktdIsMobileOrTablet, ktdSupportsPointerEvents } from './utils/pointer.utils';
+import { DOCUMENT } from '@angular/common';
 
 /** Event options that can be used to bind an active, capturing event. */
 const activeCapturingEventOptions = ktdNormalizePassiveListenerOptions({
@@ -17,7 +18,7 @@ export class KtdGridService implements OnDestroy {
     private touchMoveSubject: Subject<TouchEvent> = new Subject<TouchEvent>();
     private touchMoveSubscription: Subscription;
 
-    constructor(private ngZone: NgZone) {
+    constructor(private ngZone: NgZone, @Inject(DOCUMENT) private document: Document) {
         this.touchMove$ = this.touchMoveSubject.asObservable();
         this.registerTouchMoveSubscription();
     }
@@ -45,7 +46,7 @@ export class KtdGridService implements OnDestroy {
         this.touchMoveSubscription = this.ngZone.runOutsideAngular(() =>
             // The event handler has to be explicitly active,
             // because newer browsers make it passive by default.
-            fromEvent(document, 'touchmove', activeCapturingEventOptions as AddEventListenerOptions) // TODO: Fix rxjs typings, boolean should be a good param too.
+            fromEvent(this.document, 'touchmove', activeCapturingEventOptions as AddEventListenerOptions) // TODO: Fix rxjs typings, boolean should be a good param too.
                 .pipe(filter((touchEvent: TouchEvent) => touchEvent.touches.length === 1))
                 .subscribe((touchEvent: TouchEvent) => this.touchMoveSubject.next(touchEvent))
         );