Skip to content

Commit 030ad76

Browse files
mddragnevmddragnev
authored
fix(ssr): Change all occurrences of pure document call with injected … (#15119)
1 parent 02f34a6 commit 030ad76

File tree

10 files changed

+51
-47
lines changed

10 files changed

+51
-47
lines changed

‎projects/igniteui-angular/src/lib/carousel/carousel.component.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common';
1+
import { NgIf, NgClass, NgFor, NgTemplateOutlet, DOCUMENT } from '@angular/common';
22
import {
33
AfterContentInit,
44
ChangeDetectorRef,
@@ -584,7 +584,8 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
584584
private iterableDiffers: IterableDiffers,
585585
@Inject(IgxAngularAnimationService) animationService: AnimationService,
586586
private platformUtil: PlatformUtil,
587-
private dir: IgxDirectionality
587+
private dir: IgxDirectionality,
588+
@Inject(DOCUMENT) private document: any
588589
) {
589590
super(animationService, cdr);
590591
this.differ = this.iterableDiffers.find([]).create(null);
@@ -1003,7 +1004,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
10031004
}
10041005

10051006
private focusElement() {
1006-
const focusedElement = document.activeElement;
1007+
const focusedElement = this.document.activeElement;
10071008

10081009
if (focusedElement.classList.contains('igx-carousel-indicators__indicator')) {
10091010
this.indicatorsElements[this.current].nativeElement.focus();

‎projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,14 @@ import {
1818
QueryList,
1919
RendererStyleFlags2,
2020
booleanAttribute,
21-
EmbeddedViewRef
21+
EmbeddedViewRef,
22+
inject
2223
} from '@angular/core';
2324
import { animationFrameScheduler, fromEvent, interval, Subject } from 'rxjs';
2425
import { takeUntil, throttle } from 'rxjs/operators';
2526
import { IBaseEventArgs, PlatformUtil } from '../../core/utils';
2627
import { IDropStrategy, IgxDefaultDropStrategy } from './drag-drop.strategy';
28+
import { DOCUMENT } from '@angular/common';
2729

2830
enum DragScrollDirection {
2931
UP,
@@ -551,7 +553,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
551553
protected set ghostLeft(pageX: number) {
552554
if (this.ghostElement) {
553555
// We need to take into account marginLeft, since top style does not include margin, but pageX includes the margin.
554-
const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
556+
const ghostMarginLeft = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
555557
// If ghost host is defined it needs to be taken into account.
556558
this.ghostElement.style.left = (pageX - ghostMarginLeft - this._ghostHostX) + 'px';
557559
}
@@ -566,7 +568,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
566568
protected set ghostTop(pageY: number) {
567569
if (this.ghostElement) {
568570
// We need to take into account marginTop, since top style does not include margin, but pageY includes the margin.
569-
const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
571+
const ghostMarginTop = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
570572
// If ghost host is defined it needs to be taken into account.
571573
this.ghostElement.style.top = (pageY - ghostMarginTop - this._ghostHostY) + 'px';
572574
}
@@ -579,19 +581,19 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
579581
}
580582

581583
protected get windowScrollTop() {
582-
return document.documentElement.scrollTop || window.scrollY;
584+
return this.document.documentElement.scrollTop || window.scrollY;
583585
}
584586

585587
protected get windowScrollLeft() {
586-
return document.documentElement.scrollLeft || window.scrollX;
588+
return this.document.documentElement.scrollLeft || window.scrollX;
587589
}
588590

589591
protected get windowScrollHeight() {
590-
return document.documentElement.scrollHeight;
592+
return this.document.documentElement.scrollHeight;
591593
}
592594

593595
protected get windowScrollWidth() {
594-
return document.documentElement.scrollWidth;
596+
return this.document.documentElement.scrollWidth;
595597
}
596598

597599
/**
@@ -641,6 +643,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
641643
protected _scrollContainerStepMs = 10;
642644
protected _scrollContainerThreshold = 25;
643645
protected _containerScrollIntervalId = null;
646+
private document = inject(DOCUMENT);
644647

645648
/**
646649
* Sets the offset of the dragged element relative to the mouse in pixels.
@@ -690,7 +693,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
690693
public viewContainer: ViewContainerRef,
691694
public zone: NgZone,
692695
public renderer: Renderer2,
693-
protected platformUtil: PlatformUtil,
696+
protected platformUtil: PlatformUtil
694697
) {
695698
}
696699

@@ -746,20 +749,20 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
746749

747750
// We should bind to document events only once when there are no pointer events.
748751
if (!this.pointerEventsEnabled && this.touchEventsEnabled) {
749-
fromEvent(document.defaultView, 'touchmove').pipe(
752+
fromEvent(this.document.defaultView, 'touchmove').pipe(
750753
throttle(() => interval(0, animationFrameScheduler)),
751754
takeUntil(this._destroy)
752755
).subscribe((res) => this.onPointerMove(res));
753756

754-
fromEvent(document.defaultView, 'touchend').pipe(takeUntil(this._destroy))
757+
fromEvent(this.document.defaultView, 'touchend').pipe(takeUntil(this._destroy))
755758
.subscribe((res) => this.onPointerUp(res));
756759
} else if (!this.pointerEventsEnabled) {
757-
fromEvent(document.defaultView, 'mousemove').pipe(
760+
fromEvent(this.document.defaultView, 'mousemove').pipe(
758761
throttle(() => interval(0, animationFrameScheduler)),
759762
takeUntil(this._destroy)
760763
).subscribe((res) => this.onPointerMove(res));
761764

762-
fromEvent(document.defaultView, 'mouseup').pipe(takeUntil(this._destroy))
765+
fromEvent(this.document.defaultView, 'mouseup').pipe(takeUntil(this._destroy))
763766
.subscribe((res) => this.onPointerUp(res));
764767
}
765768
this.element.nativeElement.addEventListener('transitionend', this.onTransitionEnd.bind(this));
@@ -1140,9 +1143,9 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
11401143
if (this.ghostHost && !Array.from(this.ghostHost.children).includes(this.ghostElement)) {
11411144
ghostReattached = true;
11421145
this.ghostHost.appendChild(this.ghostElement);
1143-
} else if (!this.ghostHost && !Array.from(document.body.children).includes(this.ghostElement)) {
1146+
} else if (!this.ghostHost && !Array.from(this.document.body.children).includes(this.ghostElement)) {
11441147
ghostReattached = true;
1145-
document.body.appendChild(this.ghostElement);
1148+
this.document.body.appendChild(this.ghostElement);
11461149
}
11471150

11481151
if (ghostReattached) {
@@ -1293,11 +1296,11 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
12931296
if (this.ghostHost) {
12941297
this.ghostHost.appendChild(this.ghostElement);
12951298
} else {
1296-
document.body.appendChild(this.ghostElement);
1299+
this.document.body.appendChild(this.ghostElement);
12971300
}
12981301

1299-
const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
1300-
const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
1302+
const ghostMarginLeft = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
1303+
const ghostMarginTop = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
13011304
this.ghostElement.style.left = (this._ghostStartX - ghostMarginLeft + totalMovedX - this._ghostHostX) + 'px';
13021305
this.ghostElement.style.top = (this._ghostStartY - ghostMarginTop + totalMovedY - this._ghostHostY) + 'px';
13031306

@@ -1417,13 +1420,13 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
14171420
// using window.pageXOffset for IE9 compatibility
14181421
const viewPortX = pageX - window.pageXOffset;
14191422
const viewPortY = pageY - window.pageYOffset;
1420-
if (document['msElementsFromPoint']) {
1423+
if (this.document['msElementsFromPoint']) {
14211424
// Edge and IE special snowflakes
1422-
const elements = document['msElementsFromPoint'](viewPortX, viewPortY);
1425+
const elements = this.document['msElementsFromPoint'](viewPortX, viewPortY);
14231426
return elements === null ? [] : elements;
14241427
} else {
14251428
// Other browsers like Chrome, Firefox, Opera
1426-
return document.elementsFromPoint(viewPortX, viewPortY);
1429+
return this.document.elementsFromPoint(viewPortX, viewPortY);
14271430
}
14281431
}
14291432

@@ -1483,8 +1486,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
14831486
protected getGhostHostBaseOffsetX() {
14841487
if (!this.ghostHost) return 0;
14851488

1486-
const ghostPosition = document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
1487-
if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === document.body) {
1489+
const ghostPosition = this.document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
1490+
if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === this.document.body) {
14881491
return 0;
14891492
} else if (ghostPosition === 'static' && this.ghostHost.offsetParent) {
14901493
return this.ghostHost.offsetParent.getBoundingClientRect().left + this.windowScrollLeft;
@@ -1495,8 +1498,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
14951498
protected getGhostHostBaseOffsetY() {
14961499
if (!this.ghostHost) return 0;
14971500

1498-
const ghostPosition = document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
1499-
if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === document.body) {
1501+
const ghostPosition = this.document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
1502+
if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === this.document.body) {
15001503
return 0;
15011504
} else if (ghostPosition === 'static' && this.ghostHost.offsetParent) {
15021505
return this.ghostHost.offsetParent.getBoundingClientRect().top + this.windowScrollTop;
@@ -1540,8 +1543,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
15401543
let yDir = scrollDir == DragScrollDirection.UP ? -1 : (scrollDir == DragScrollDirection.DOWN ? 1 : 0);
15411544
if (!this.scrollContainer) {
15421545
// Cap scrolling so we don't scroll past the window max scroll position.
1543-
const maxScrollX = this._originalScrollContainerWidth - document.documentElement.clientWidth;
1544-
const maxScrollY = this._originalScrollContainerHeight - document.documentElement.clientHeight;
1546+
const maxScrollX = this._originalScrollContainerWidth - this.document.documentElement.clientWidth;
1547+
const maxScrollY = this._originalScrollContainerHeight - this.document.documentElement.clientHeight;
15451548
xDir = (this.windowScrollLeft <= 0 && xDir < 0) || (this.windowScrollLeft >= maxScrollX && xDir > 0) ? 0 : xDir;
15461549
yDir = (this.windowScrollTop <= 0 && yDir < 0) || (this.windowScrollTop >= maxScrollY && yDir > 0) ? 0 : yDir;
15471550
} else {

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -223,16 +223,16 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
223223
const chipsAreaElements = this.chipsArea.element.nativeElement.children;
224224
let visibleChipsCount = 0;
225225
const moreIconWidth = this.moreIcon.nativeElement.offsetWidth -
226-
parseInt(document.defaultView.getComputedStyle(this.moreIcon.nativeElement)['margin-left'], 10);
226+
parseInt(this.column?.grid.document.defaultView.getComputedStyle(this.moreIcon.nativeElement)['margin-left'], 10);
227227

228228
for (let index = 0; index < chipsAreaElements.length - 1; index++) {
229229
if (viewWidth + chipsAreaElements[index].offsetWidth < areaWidth) {
230230
viewWidth += chipsAreaElements[index].offsetWidth;
231231
if (index % 2 === 0) {
232232
visibleChipsCount++;
233233
} else {
234-
viewWidth += parseInt(document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-left'], 10);
235-
viewWidth += parseInt(document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-right'], 10);
234+
viewWidth += parseInt(this.column?.grid.document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-left'], 10);
235+
viewWidth += parseInt(this.column?.grid.document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-right'], 10);
236236
}
237237
} else {
238238
if (index % 2 !== 0 && viewWidth + moreIconWidth > areaWidth) {

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -512,7 +512,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
512512
return;
513513
}
514514
requestAnimationFrame(() => {
515-
const focusedElement = document.activeElement;
515+
const focusedElement = this.column?.grid.document.activeElement;
516516

517517
if (focusedElement.classList.contains('igx-chip__remove')) {
518518
return;
@@ -606,7 +606,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
606606

607607

608608
public onChipPointerdown(args, chip: IgxChipComponent) {
609-
const activeElement = document.activeElement;
609+
const activeElement = this.column?.grid.document.activeElement;
610610
this._cancelChipClick = chip.selected
611611
&& activeElement && this.editorFocused(activeElement);
612612
}

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7510,7 +7510,7 @@ export abstract class IgxGridBaseDirective implements GridType,
75107510
protected get renderedActualRowHeight() {
75117511
let border = 1;
75127512
if (this.rowList.toArray().length > 0) {
7513-
const rowStyles = document.defaultView.getComputedStyle(this.rowList.first.nativeElement);
7513+
const rowStyles = this.document.defaultView.getComputedStyle(this.rowList.first.nativeElement);
75147514
border = rowStyles.borderBottomWidth ? Math.ceil(parseFloat(rowStyles.borderBottomWidth)) : border;
75157515
}
75167516
return this.rowHeight + border;

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
305305
public set expandChildren(value: boolean) {
306306
this._defaultExpandState = value;
307307
this.rowIslandAPI.getChildGrids().forEach((grid) => {
308-
if (document.body.contains(grid.nativeElement)) {
308+
if (this.document.body.contains(grid.nativeElement)) {
309309
// Detect changes right away if the grid is visible
310310
grid.expandChildren = value;
311311
grid.cdr.detectChanges();
@@ -549,7 +549,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
549549
this.updateColumns(this._childColumns);
550550
this.rowIslandAPI.getChildGrids().forEach((grid: GridType) => {
551551
grid.createColumnsList(this._childColumns);
552-
if (!document.body.contains(grid.nativeElement)) {
552+
if (!this.document.body.contains(grid.nativeElement)) {
553553
grid.updateOnRender = true;
554554
}
555555
});

‎projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,8 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective implements On
120120

121121
this.ghostElement.classList.remove(this.columnSelectedClass);
122122

123-
const icon = document.createElement('i');
124-
const text = document.createTextNode('block');
123+
const icon = this.column?.grid.document.createElement('i');
124+
const text = this.column?.grid.document.createTextNode('block');
125125
icon.appendChild(text);
126126

127127
icon.classList.add('material-icons');

‎projects/igniteui-angular/src/lib/grids/selection/selection.service.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ export class IgxGridSelectionService {
248248
this.pointerState.ctrl = ctrl;
249249
this.pointerState.shift = shift;
250250
this.pointerEventInGridBody = true;
251-
document.body.addEventListener('pointerup', this.pointerOriginHandler);
251+
this.grid.document.body.addEventListener('pointerup', this.pointerOriginHandler);
252252

253253
// No ctrl key pressed - no multiple selection
254254
if (!ctrl) {
@@ -385,7 +385,7 @@ export class IgxGridSelectionService {
385385
public restoreTextSelection(): void {
386386
const selection = window.getSelection();
387387
if (!selection.rangeCount) {
388-
selection.addRange(this._selectionRange || document.createRange());
388+
selection.addRange(this._selectionRange || this.grid.document.createRange());
389389
}
390390
}
391391

@@ -855,7 +855,7 @@ export class IgxGridSelectionService {
855855

856856
private pointerOriginHandler = (event) => {
857857
this.pointerEventInGridBody = false;
858-
document.body.removeEventListener('pointerup', this.pointerOriginHandler);
858+
this.grid.document.body.removeEventListener('pointerup', this.pointerOriginHandler);
859859

860860
const targetTagName = event.target.tagName.toLowerCase();
861861
if (targetTagName !== 'igx-grid-cell' && targetTagName !== 'igx-tree-grid-cell') {

‎projects/igniteui-angular/src/lib/services/excel/worksheet-data-dictionary.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export class WorksheetDataDictionary {
9393

9494
private getContext(): any {
9595
if (!this._context) {
96-
const canvas = document.createElement('canvas');
96+
const canvas = globalThis.document?.createElement('canvas');
9797
this._context = canvas.getContext('2d');
9898
this._context.font = WorksheetDataDictionary.DEFAULT_FONT;
9999
}

‎projects/igniteui-angular/src/lib/services/exporter-common/export-utilities.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
/**
32
* @hidden
43
*/
@@ -23,14 +22,15 @@ export class ExportUtilities {
2322
}
2423

2524
public static saveBlobToFile(blob: Blob, fileName) {
26-
const a = document.createElement('a');
25+
const doc = globalThis.document;
26+
const a = doc.createElement('a');
2727
const url = window.URL.createObjectURL(blob);
2828
a.download = fileName;
2929

3030
a.href = url;
31-
document.body.appendChild(a);
31+
doc.body.appendChild(a);
3232
a.click();
33-
document.body.removeChild(a);
33+
doc.body.removeChild(a);
3434
window.URL.revokeObjectURL(url);
3535
}
3636

0 commit comments

Comments
 (0)