(#46) Fixing IE11/Edge compatibility issues

tnicola · Mar 16, 2019 · c97f537 · c97f537
1 parent 180be16
commit c97f537
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 8 deletions.
diff --git a/src/lib/src/services/document.service.spec.ts b/src/lib/src/services/document.service.spec.ts
@@ -55,7 +55,25 @@ describe('DocumentService', () => {
 
             expect(documentService.getDocumentHeight()).toBe(50);
         });
+
+        // These two tests work only in IE 11 - Edge
+        xit(`should bind elementsFromPoint to document elementsFromPoint if it doesn't exist`, () => {
+            document.elementsFromPoint.prototype = undefined;
+            expect(document.elementsFromPoint).not.toBeDefined();
+
+            documentService = TestBed.get(DocumentService);
+
+            expect(document.elementsFromPoint).toBeDefined();
+            expect(document.elementsFromPoint.toString()).toEqual(documentService['elementsFromPoint'].toString());
+        });
+
+        xit(`should NOT bind elementsFromPoint to document elementsFromPoint if it already exists`, () => {
+            documentService = TestBed.get(DocumentService);
+
+            expect(document.elementsFromPoint).toBeDefined();
+        });
     });
+
     describe('after service initialization', () => {
         beforeEach(() => {
             documentService = TestBed.get(DocumentService);

diff --git a/src/lib/src/services/document.service.ts b/src/lib/src/services/document.service.ts
@@ -25,6 +25,10 @@ export class DocumentService implements IDocumentService {
 
     constructor(private readonly DOMService: DomRefService) {
         this.setDocumentHeight();
+        if (!document.elementsFromPoint) {
+            // IE 11 - Edge browsers
+            document.elementsFromPoint = this.elementsFromPoint.bind(this);
+        }
     }
 
     getElementFixedTop(elementRef: ElementRef) {
@@ -75,7 +79,12 @@ export class DocumentService implements IDocumentService {
     scrollToTheTop(elementRef: ElementRef): void {
         const firstScrollableParent = this.getFirstScrollableParent(elementRef.nativeElement);
         if (firstScrollableParent !== this.DOMService.getNativeDocument().body) {
-            firstScrollableParent.scrollTo(0, 0);
+            if (firstScrollableParent.scrollTo) {
+                firstScrollableParent.scrollTo(0, 0);
+            } else {
+                // IE 11 - Edge browsers
+                firstScrollableParent.scrollTop = 0;
+            }
         } else {
             this.DOMService.getNativeWindow().scrollTo(0, 0);
         }
@@ -84,7 +93,12 @@ export class DocumentService implements IDocumentService {
     scrollToTheBottom(elementRef: ElementRef): void {
         const firstScrollableParent = this.getFirstScrollableParent(elementRef.nativeElement);
         if (firstScrollableParent !== this.DOMService.getNativeDocument().body) {
-            firstScrollableParent.scrollTo(0, this.DOMService.getNativeDocument().body.scrollHeight);
+            if (firstScrollableParent.scrollTo) {
+                firstScrollableParent.scrollTo(0, this.DOMService.getNativeDocument().body.scrollHeight);
+            } else {
+                // IE 11 - Edge browsers
+                firstScrollableParent.scrollTop = firstScrollableParent.scrollHeight - firstScrollableParent.clientHeight;
+            }
         } else {
             this.DOMService.getNativeWindow().scrollTo(0, this.DOMService.getNativeDocument().body.scrollHeight);
         }
@@ -141,6 +155,25 @@ export class DocumentService implements IDocumentService {
         return { x: docReference.body.scrollLeft, y: docReference.body.scrollTop };
     }
 
+    private elementsFromPoint(x, y) {
+        var parents = [];
+        var parent = void 0;
+        do {
+            const elem = this.DOMService.getNativeDocument().elementFromPoint(x, y);
+            if (elem && parent !== elem) {
+                parent = elem;
+                parents.push(parent);
+                parent.style.pointerEvents = 'none';
+            } else {
+                parent = false;
+            }
+        } while (parent);
+        parents.forEach(function(parent) {
+            return (parent.style.pointerEvents = 'all');
+        });
+        return parents;
+    }
+
     private getFirstElementWithoutKeyword(elements: Element[], keyword: string): Element {
         while (elements[0] && elements[0].classList.toString().includes(keyword)) {
             elements.shift();

diff --git a/src/lib/src/services/dom.service.spec.ts b/src/lib/src/services/dom.service.spec.ts
@@ -22,7 +22,7 @@ describe('DomRefService', () => {
         });
         it(`should return the fake window if this.platformId is 'server'`, () => {
             domService = new DomRefService('server');
-            expect(domService.getNativeWindow()).toEqual(<Window>{ document: { body: {}, documentElement: {} } });
+            expect(domService.getNativeWindow()).toEqual(<Window>{ document: { body: {}, documentElement: {} }, navigator: {} });
         });
     });
     describe('getNativeDocument()', () => {

diff --git a/src/lib/src/services/dom.service.ts b/src/lib/src/services/dom.service.ts
@@ -3,12 +3,9 @@ import { isPlatformBrowser } from '@angular/common';
 
 @Injectable()
 export class DomRefService {
-
     private fakeDocument: Document = <Document>{ body: {}, documentElement: {} };
-    private fakeWindow: Window = <Window>{ document: this.fakeDocument};
-    constructor(
-        @Inject(PLATFORM_ID) private platformId: Object
-    ) { }
+    private fakeWindow: Window = <Window>{ document: this.fakeDocument, navigator: {} };
+    constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
     getNativeWindow(): Window {
         if (isPlatformBrowser(this.platformId)) return window;
         else return this.fakeWindow;