Skip to content

Commit e18301f

Browse files
xidedixxidedix
committed
refactor: use Renderer2 and DOCUMENT DI instead of direct DOM manipulation
1 parent b82a4a1 commit e18301f

14 files changed

+257
-130
lines changed

‎projects/coreui/angular/src/lib/aside/app-aside.component.ts

+22-13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
2-
import { asideMenuCssClasses, Replace } from './../shared/index';
1+
import {Component, ElementRef, Input, OnInit, OnDestroy, Inject, Renderer2} from '@angular/core';
2+
import {DOCUMENT} from '@angular/common';
3+
4+
import { asideMenuCssClasses, Replace } from '../shared';
35

46
@Component({
57
selector: 'app-aside',
@@ -14,7 +16,11 @@ export class AppAsideComponent implements OnInit, OnDestroy {
1416
@Input() fixed: boolean;
1517
@Input() offCanvas: boolean;
1618

17-
constructor(private el: ElementRef) {}
19+
constructor(
20+
@Inject(DOCUMENT) private document: any,
21+
private renderer: Renderer2,
22+
private el: ElementRef
23+
) {}
1824

1925
ngOnInit(): void {
2026
Replace(this.el);
@@ -24,22 +30,25 @@ export class AppAsideComponent implements OnInit, OnDestroy {
2430
}
2531

2632
ngOnDestroy(): void {
27-
document.body.classList.remove('aside-menu-fixed');
33+
this.renderer.removeClass(this.document.body, 'aside-menu-fixed');
2834
}
2935

30-
isFixed(fixed: boolean): void {
31-
if (this.fixed) { document.querySelector('body').classList.add('aside-menu-fixed'); }
36+
isFixed(fixed: boolean = this.fixed): void {
37+
if (fixed) {
38+
this.renderer.addClass(this.document.body, 'aside-menu-fixed');
39+
}
3240
}
3341

34-
isOffCanvas(offCanvas: boolean): void {
35-
if (this.offCanvas) { document.querySelector('body').classList.add('aside-menu-off-canvas'); }
42+
isOffCanvas(offCanvas: boolean = this.offCanvas): void {
43+
if (offCanvas) {
44+
this.renderer.addClass(this.document.body, 'aside-menu-off-canvas');
45+
}
3646
}
3747

38-
displayBreakpoint(display: any): void {
39-
if (this.display !== false ) {
40-
let cssClass;
41-
this.display ? cssClass = `aside-menu-${this.display}-show` : cssClass = asideMenuCssClasses[0];
42-
document.querySelector('body').classList.add(cssClass);
48+
displayBreakpoint(display: any = this.display): void {
49+
if (display !== false ) {
50+
const cssClass = this.display ? `aside-menu-${this.display}-show` : asideMenuCssClasses[0];
51+
this.renderer.addClass(this.document.body, cssClass);
4352
}
4453
}
4554
}

‎projects/coreui/angular/src/lib/breadcrumb/app-breadcrumb.component.ts

+16-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
2-
import { Replace } from './../shared';
3-
import { AppBreadcrumbService } from './app-breadcrumb.service';
1+
import {Component, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
2+
import {DOCUMENT} from '@angular/common';
3+
4+
import {AppBreadcrumbService} from './app-breadcrumb.service';
5+
import {Replace} from '../shared';
46

57
@Component({
68
selector: 'app-breadcrumb',
@@ -19,7 +21,12 @@ export class AppBreadcrumbComponent implements OnInit, OnDestroy {
1921
@Input() fixed: boolean;
2022
public breadcrumbs;
2123

22-
constructor(public service: AppBreadcrumbService, public el: ElementRef) { }
24+
constructor(
25+
@Inject(DOCUMENT) private document: any,
26+
private renderer: Renderer2,
27+
public service: AppBreadcrumbService,
28+
public el: ElementRef
29+
) { }
2330

2431
public ngOnInit(): void {
2532
Replace(this.el);
@@ -28,10 +35,12 @@ export class AppBreadcrumbComponent implements OnInit, OnDestroy {
2835
}
2936

3037
ngOnDestroy(): void {
31-
document.body.classList.remove('breadcrumb-fixed');
38+
this.renderer.removeClass(this.document.body, 'breadcrumb-fixed');
3239
}
3340

34-
isFixed(fixed: boolean): void {
35-
if (this.fixed) { document.querySelector('body').classList.add('breadcrumb-fixed'); }
41+
isFixed(fixed: boolean = this.fixed): void {
42+
if (fixed) {
43+
this.renderer.addClass(this.document.body, 'breadcrumb-fixed');
44+
}
3645
}
3746
}

‎projects/coreui/angular/src/lib/breadcrumb/app-breadcrumb.service.ts

+45-45
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,45 @@
1-
import { Injectable, Injector } from '@angular/core';
2-
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
3-
import { BehaviorSubject, Observable } from 'rxjs/index';
4-
import { filter } from 'rxjs/operators';
5-
6-
@Injectable()
7-
export class AppBreadcrumbService {
8-
9-
breadcrumbs: Observable<Array<Object>>;
10-
11-
private _breadcrumbs: BehaviorSubject<Array<Object>>;
12-
13-
constructor(private router: Router, private route: ActivatedRoute) {
14-
15-
this._breadcrumbs = new BehaviorSubject<Object[]>(new Array<Object>());
16-
17-
this.breadcrumbs = this._breadcrumbs.asObservable();
18-
19-
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event) => {
20-
const breadcrumbs = [];
21-
let currentRoute = this.route.root,
22-
url = '';
23-
do {
24-
const childrenRoutes = currentRoute.children;
25-
currentRoute = null;
26-
// tslint:disable-next-line:no-shadowed-variable
27-
childrenRoutes.forEach(route => {
28-
if (route.outlet === 'primary') {
29-
const routeSnapshot = route.snapshot;
30-
url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
31-
breadcrumbs.push({
32-
label: route.snapshot.data,
33-
url: url
34-
});
35-
currentRoute = route;
36-
}
37-
});
38-
} while (currentRoute);
39-
40-
this._breadcrumbs.next(Object.assign([], breadcrumbs));
41-
42-
return breadcrumbs;
43-
});
44-
}
45-
}
1+
import { Injectable } from '@angular/core';
2+
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
3+
import { BehaviorSubject, Observable } from 'rxjs/index';
4+
import { filter } from 'rxjs/operators';
5+
6+
@Injectable()
7+
export class AppBreadcrumbService {
8+
9+
breadcrumbs: Observable<Array<Object>>;
10+
11+
private _breadcrumbs: BehaviorSubject<Array<Object>>;
12+
13+
constructor(private router: Router, private route: ActivatedRoute) {
14+
15+
this._breadcrumbs = new BehaviorSubject<Object[]>(new Array<Object>());
16+
17+
this.breadcrumbs = this._breadcrumbs.asObservable();
18+
19+
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event) => {
20+
const breadcrumbs = [];
21+
let currentRoute = this.route.root,
22+
url = '';
23+
do {
24+
const childrenRoutes = currentRoute.children;
25+
currentRoute = null;
26+
// tslint:disable-next-line:no-shadowed-variable
27+
childrenRoutes.forEach(route => {
28+
if (route.outlet === 'primary') {
29+
const routeSnapshot = route.snapshot;
30+
url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
31+
breadcrumbs.push({
32+
label: route.snapshot.data,
33+
url: url
34+
});
35+
currentRoute = route;
36+
}
37+
});
38+
} while (currentRoute);
39+
40+
this._breadcrumbs.next(Object.assign([], breadcrumbs));
41+
42+
return breadcrumbs;
43+
});
44+
}
45+
}

‎projects/coreui/angular/src/lib/footer/app-footer.component.ts

+15-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
2-
import { Replace } from './../shared';
1+
import {Component, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
2+
import {DOCUMENT} from '@angular/common';
3+
4+
import {Replace} from '../shared';
35

46
@Component({
57
selector: 'app-footer',
68
template: `
9+
<ng-container class="app-footer"></ng-container>
710
<footer class="app-footer">
811
<ng-content></ng-content>
912
</footer>
@@ -12,18 +15,24 @@ import { Replace } from './../shared';
1215
export class AppFooterComponent implements OnInit, OnDestroy {
1316
@Input() fixed: boolean;
1417

15-
constructor(private el: ElementRef) {}
18+
constructor(
19+
@Inject(DOCUMENT) private document: any,
20+
private renderer: Renderer2,
21+
private el: ElementRef
22+
) {}
1623

1724
ngOnInit(): void {
1825
Replace(this.el);
1926
this.isFixed(this.fixed);
2027
}
2128

2229
ngOnDestroy(): void {
23-
document.body.classList.remove('footer-fixed');
30+
this.renderer.removeClass(this.document.body, 'footer-fixed');
2431
}
2532

26-
isFixed(fixed: boolean): void {
27-
if (this.fixed) { document.querySelector('body').classList.add('footer-fixed'); }
33+
isFixed(fixed: boolean = this.fixed): void {
34+
if (fixed) {
35+
this.renderer.addClass(this.document.body, 'footer-fixed');
36+
}
2837
}
2938
}

‎projects/coreui/angular/src/lib/header/app-header.component.ts

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
2-
import { Replace } from './../shared';
1+
import { Component, ElementRef, Input, OnInit, OnDestroy, Inject, Renderer2 } from '@angular/core';
2+
import { DOCUMENT } from '@angular/common';
3+
4+
import { Replace } from '../shared';
35

46
@Component({
57
selector: 'app-header',
@@ -73,7 +75,11 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
7375

7476
navbarBrandImg: boolean;
7577

76-
constructor(private el: ElementRef) {}
78+
constructor(
79+
@Inject(DOCUMENT) private document: any,
80+
private renderer: Renderer2,
81+
private el: ElementRef
82+
) {}
7783

7884
ngOnInit(): void {
7985
Replace(this.el);
@@ -82,11 +88,13 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
8288
}
8389

8490
ngOnDestroy(): void {
85-
document.body.classList.remove('header-fixed');
91+
this.renderer.removeClass(this.document.body, 'header-fixed');
8692
}
8793

88-
isFixed(fixed: boolean): void {
89-
if (this.fixed) { document.querySelector('body').classList.add('header-fixed'); }
94+
isFixed(fixed: boolean = this.fixed): void {
95+
if (fixed) {
96+
this.renderer.addClass(this.document.body, 'header-fixed');
97+
}
9098
}
9199

92100
imgSrc(brand: any): void {

0 commit comments

Comments
 (0)