Skip to content

Commit ec6f36f

Browse files
xidedixxidedix
committed
refactor: drop Replace
- fix(sidebar): navItems reassignment bug [#126](coreui/coreui-free-angular-admin-template#126), [#42](coreui/coreui-free-angular-admin-template#42), #12 - refactor(aside): drop `Replace` - refactor(breadcrumb): drop `Replace` new component `cui-breadcrumb` (migration needed) - refactor(footer): minor changes - refactor(header): drop `Replace` - refactor(layout): cleanup - refactor(sidebar-nav): drop `Replace`, redesign
1 parent be62785 commit ec6f36f

31 files changed

+677
-432
lines changed

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

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,40 @@
11
import {Component, ElementRef, Input, OnInit, OnDestroy, Inject, Renderer2} from '@angular/core';
22
import {DOCUMENT} from '@angular/common';
33

4-
import { asideMenuCssClasses, Replace } from '../shared';
4+
import { asideMenuCssClasses } from '../shared';
55

66
@Component({
7-
selector: 'app-aside',
8-
template: `
9-
<aside class="aside-menu">
10-
<ng-content></ng-content>
11-
</aside>
12-
`
7+
selector: 'app-aside, cui-aside',
8+
template: `<ng-content></ng-content>`
139
})
1410
export class AppAsideComponent implements OnInit, OnDestroy {
1511
@Input() display: any;
1612
@Input() fixed: boolean;
1713
@Input() offCanvas: boolean;
1814

15+
private readonly fixedClass = 'aside-menu-fixed';
16+
1917
constructor(
2018
@Inject(DOCUMENT) private document: any,
2119
private renderer: Renderer2,
22-
private el: ElementRef
23-
) {}
20+
private hostElement: ElementRef
21+
) {
22+
renderer.addClass(hostElement.nativeElement, 'aside-menu');
23+
}
2424

2525
ngOnInit(): void {
26-
Replace(this.el);
2726
this.isFixed(this.fixed);
2827
this.isOffCanvas(this.offCanvas);
2928
this.displayBreakpoint(this.display);
3029
}
3130

3231
ngOnDestroy(): void {
33-
this.renderer.removeClass(this.document.body, 'aside-menu-fixed');
32+
this.renderer.removeClass(this.document.body, this.fixedClass);
3433
}
3534

3635
isFixed(fixed: boolean = this.fixed): void {
3736
if (fixed) {
38-
this.renderer.addClass(this.document.body, 'aside-menu-fixed');
37+
this.renderer.addClass(this.document.body, this.fixedClass);
3938
}
4039
}
4140

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {Replace} from '../shared';
2020
export class AppBreadcrumbComponent implements OnInit, OnDestroy {
2121
@Input() fixed: boolean;
2222
public breadcrumbs;
23+
private readonly fixedClass = 'breadcrumb-fixed';
2324

2425
constructor(
2526
@Inject(DOCUMENT) private document: any,
@@ -35,12 +36,12 @@ export class AppBreadcrumbComponent implements OnInit, OnDestroy {
3536
}
3637

3738
ngOnDestroy(): void {
38-
this.renderer.removeClass(this.document.body, 'breadcrumb-fixed');
39+
this.renderer.removeClass(this.document.body, this.fixedClass);
3940
}
4041

4142
isFixed(fixed: boolean = this.fixed): void {
4243
if (fixed) {
43-
this.renderer.addClass(this.document.body, 'breadcrumb-fixed');
44+
this.renderer.addClass(this.document.body, this.fixedClass);
4445
}
4546
}
4647
}

Diff for: ‎projects/coreui/angular/src/lib/breadcrumb/app-breadcrumb.module.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@ import { RouterModule } from '@angular/router';
55
// App Breadcrumb Component
66
import { AppBreadcrumbService } from './app-breadcrumb.service';
77
import { AppBreadcrumbComponent } from './app-breadcrumb.component';
8+
import { CuiBreadcrumbComponent } from './cui-breadcrumb.component';
89

910
// @dynamic
1011
@NgModule({
1112
imports: [ CommonModule, RouterModule ],
12-
exports: [ AppBreadcrumbComponent ],
13-
declarations: [ AppBreadcrumbComponent ]
13+
exports: [ AppBreadcrumbComponent, CuiBreadcrumbComponent ],
14+
declarations: [ AppBreadcrumbComponent, CuiBreadcrumbComponent ]
1415
})
1516
export class AppBreadcrumbModule {
1617
static forRoot(config?: any): ModuleWithProviders {

Diff for: ‎projects/coreui/angular/src/lib/breadcrumb/cui-breadcrumb.component.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<ol class="breadcrumb">
2+
<ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs | async" let-last = last>
3+
<li class="breadcrumb-item"
4+
*ngIf="breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)"
5+
[ngClass]="{active: last}">
6+
<a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</a>
7+
<span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
8+
</li>
9+
</ng-template>
10+
<ng-content></ng-content>
11+
</ol>

Diff for: ‎projects/coreui/angular/src/lib/breadcrumb/cui-breadcrumb.component.ts

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
6+
@Component({
7+
selector: 'cui-breadcrumb',
8+
templateUrl: './cui-breadcrumb.component.html'
9+
})
10+
export class CuiBreadcrumbComponent implements OnInit, OnDestroy {
11+
@Input() fixed: boolean;
12+
13+
public breadcrumbs;
14+
private readonly fixedClass = 'breadcrumb-fixed';
15+
16+
constructor(
17+
@Inject(DOCUMENT) private document: any,
18+
private renderer: Renderer2,
19+
public service: AppBreadcrumbService,
20+
) { }
21+
22+
public ngOnInit(): void {
23+
this.isFixed(this.fixed);
24+
this.breadcrumbs = this.service.breadcrumbs;
25+
}
26+
27+
ngOnDestroy(): void {
28+
this.renderer.removeClass(this.document.body, this.fixedClass);
29+
}
30+
31+
isFixed(fixed: boolean = this.fixed): void {
32+
if (fixed) {
33+
this.renderer.addClass(this.document.body, this.fixedClass);
34+
}
35+
}
36+
}

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

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, HostBinding, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
1+
import {Component, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
22
import {DOCUMENT} from '@angular/common';
33

44
@Component({
@@ -8,14 +8,15 @@ import {DOCUMENT} from '@angular/common';
88
export class AppFooterComponent implements OnInit, OnDestroy {
99
@Input() fixed: boolean;
1010

11-
@HostBinding('class.app-footer') true;
12-
1311
private readonly fixedClass = 'footer-fixed';
1412

1513
constructor(
1614
@Inject(DOCUMENT) private document: any,
1715
private renderer: Renderer2,
18-
) {}
16+
private hostElement: ElementRef
17+
) {
18+
renderer.addClass(hostElement.nativeElement, 'app-footer');
19+
}
1920

2021
ngOnInit(): void {
2122
this.isFixed(this.fixed);

Diff for: ‎projects/coreui/angular/src/lib/header/app-header.component.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<ng-template [ngIf]="mobileSidebarToggler != false">
2+
<button class="navbar-toggler d-lg-none" type="button" appSidebarToggler>
3+
<span class="navbar-toggler-icon"></span>
4+
</button>
5+
</ng-template>
6+
<a class="navbar-brand" [href]="navbarBrandHref">
7+
<ng-template [ngIf]="navbarBrandImg">
8+
<img *ngIf="navbarBrand"
9+
[appHtmlAttr]="navbarBrand"
10+
[ngClass]="'navbar-brand'">
11+
<img *ngIf="navbarBrandFull"
12+
[appHtmlAttr]="navbarBrandFull"
13+
[ngClass]="'navbar-brand-full'">
14+
<img *ngIf="navbarBrandMinimized"
15+
[appHtmlAttr]="navbarBrandMinimized"
16+
[ngClass]="'navbar-brand-minimized'">
17+
</ng-template>
18+
<ng-template [ngIf]="!navbarBrandImg">
19+
<div class="navbar-brand-full" [innerHTML]="navbarBrandText.text"></div>
20+
<div class="navbar-brand-minimized" [innerHTML]="navbarBrandText.icon"></div>
21+
</ng-template>
22+
</a>
23+
<ng-template [ngIf]="sidebarToggler != false">
24+
<button class="navbar-toggler d-md-down-none" type="button" [appSidebarToggler]="sidebarToggler">
25+
<span class="navbar-toggler-icon"></span>
26+
</button>
27+
</ng-template>
28+
<ng-content></ng-content>
29+
<ng-template [ngIf]="asideMenuToggler != false">
30+
<button class="navbar-toggler d-md-down-none" type="button" [appAsideMenuToggler]="asideMenuToggler">
31+
<span class="navbar-toggler-icon"></span>
32+
</button>
33+
</ng-template>
34+
<ng-template [ngIf]="mobileAsideMenuToggler != false">
35+
<button class="navbar-toggler d-lg-none" type="button" appAsideMenuToggler>
36+
<span class="navbar-toggler-icon"></span>
37+
</button>
38+
</ng-template>

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

+7-48
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,9 @@
11
import {Component, ElementRef, Input, OnInit, OnDestroy, Inject, Renderer2} from '@angular/core';
22
import { DOCUMENT } from '@angular/common';
33

4-
import { Replace } from '../shared';
5-
64
@Component({
7-
selector: 'app-header',
8-
template: `
9-
<header class="app-header navbar">
10-
<ng-template [ngIf]="mobileSidebarToggler != false">
11-
<button class="navbar-toggler d-lg-none" type="button" appSidebarToggler>
12-
<span class="navbar-toggler-icon"></span>
13-
</button>
14-
</ng-template>
15-
<a class="navbar-brand" [href]="navbarBrandHref">
16-
<ng-template [ngIf]="navbarBrandImg">
17-
<img *ngIf="navbarBrand"
18-
[appHtmlAttr]="navbarBrand"
19-
[ngClass]="'navbar-brand'">
20-
<img *ngIf="navbarBrandFull"
21-
[appHtmlAttr]="navbarBrandFull"
22-
[ngClass]="'navbar-brand-full'">
23-
<img *ngIf="navbarBrandMinimized"
24-
[appHtmlAttr]="navbarBrandMinimized"
25-
[ngClass]="'navbar-brand-minimized'">
26-
</ng-template>
27-
<ng-template [ngIf]="!navbarBrandImg">
28-
<div class="navbar-brand-full" [innerHTML]="navbarBrandText.text"></div>
29-
<div class="navbar-brand-minimized" [innerHTML]="navbarBrandText.icon"></div>
30-
</ng-template>
31-
</a>
32-
<ng-template [ngIf]="sidebarToggler != false">
33-
<button class="navbar-toggler d-md-down-none" type="button" [appSidebarToggler]="sidebarToggler">
34-
<span class="navbar-toggler-icon"></span>
35-
</button>
36-
</ng-template>
37-
<ng-content></ng-content>
38-
<ng-template [ngIf]="asideMenuToggler != false">
39-
<button class="navbar-toggler d-md-down-none" type="button" [appAsideMenuToggler]="asideMenuToggler">
40-
<span class="navbar-toggler-icon"></span>
41-
</button>
42-
</ng-template>
43-
<ng-template [ngIf]="mobileAsideMenuToggler != false">
44-
<button class="navbar-toggler d-lg-none" type="button" appAsideMenuToggler>
45-
<span class="navbar-toggler-icon"></span>
46-
</button>
47-
</ng-template>
48-
</header>
49-
`
5+
selector: 'app-header, cui-header',
6+
templateUrl: './app-header.component.html'
507
})
518
export class AppHeaderComponent implements OnInit, OnDestroy {
529

@@ -70,11 +27,13 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
7027
constructor(
7128
@Inject(DOCUMENT) private document: any,
7229
private renderer: Renderer2,
73-
private el: ElementRef
74-
) {}
30+
private hostElement: ElementRef
31+
) {
32+
renderer.addClass(hostElement.nativeElement, 'app-header');
33+
renderer.addClass(hostElement.nativeElement, 'navbar');
34+
}
7535

7636
ngOnInit(): void {
77-
Replace(this.el);
7837
this.isFixed(this.fixed);
7938
this.navbarBrandImg = Boolean(this.navbarBrand || this.navbarBrandFull || this.navbarBrandMinimized);
8039
}

Diff for: ‎projects/coreui/angular/src/lib/shared/layout/layout.directive.ts

+1-29
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ export class SidebarMinimizeDirective {
4242
body.classList.contains('sidebar-minimized') ?
4343
this.renderer.removeClass(body, 'sidebar-minimized') :
4444
this.renderer.addClass(body, 'sidebar-minimized');
45-
// document.body.classList.toggle('sidebar-minimized');
4645
}
4746
}
4847

@@ -55,19 +54,13 @@ export class MobileSidebarToggleDirective {
5554
private renderer: Renderer2,
5655
) { }
5756

58-
// Check if element has class
59-
private hasClass(target: any, elementClassName: string) {
60-
return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
61-
}
62-
6357
@HostListener('click', ['$event'])
6458
toggleOpen($event: any) {
6559
$event.preventDefault();
6660
const body = this.document.body;
6761
body.classList.contains('sidebar-show') ?
6862
this.renderer.removeClass(body, 'sidebar-show') :
6963
this.renderer.addClass(body, 'sidebar-show');
70-
// document.body.classList.toggle('sidebar-show');
7164
}
7265
}
7366

@@ -83,34 +76,15 @@ export class SidebarOffCanvasCloseDirective {
8376
private renderer: Renderer2,
8477
) { }
8578

86-
// Check if element has class
87-
private hasClass(target: any, elementClassName: string) {
88-
return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
89-
}
90-
91-
// Toggle element class
92-
private toggleClass(elem: any, elementClassName: string) {
93-
let newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
94-
if (this.hasClass(elem, elementClassName)) {
95-
while (newClass.indexOf(' ' + elementClassName + ' ') >= 0 ) {
96-
newClass = newClass.replace( ' ' + elementClassName + ' ' , ' ' );
97-
}
98-
elem.className = newClass.replace(/^\s+|\s+$/g, '');
99-
} else {
100-
elem.className += ' ' + elementClassName;
101-
}
102-
}
103-
10479
@HostListener('click', ['$event'])
10580
toggleOpen($event: any) {
10681
$event.preventDefault();
10782

10883
const body = this.document.body;
109-
if (this.hasClass(body, 'sidebar-off-canvas')) {
84+
if (body.classList.contains('sidebar-off-canvas')) {
11085
body.classList.contains('sidebar-show') ?
11186
this.renderer.removeClass(body, 'sidebar-show') :
11287
this.renderer.addClass(body, 'sidebar-show');
113-
// this.toggleClass(document.body, 'sidebar-opened');
11488
}
11589
}
11690
}
@@ -131,7 +105,6 @@ export class BrandMinimizeDirective {
131105
body.classList.contains('brand-minimized') ?
132106
this.renderer.removeClass(body, 'brand-minimized') :
133107
this.renderer.addClass(body, 'brand-minimized');
134-
// document.body.classList.toggle('brand-minimized');
135108
}
136109
}
137110

@@ -165,7 +138,6 @@ export class HtmlAttributesDirective implements OnInit {
165138
@Input() appHtmlAttr: {[key: string]: string };
166139

167140
constructor(
168-
@Inject(DOCUMENT) private document: any,
169141
private renderer: Renderer2,
170142
private el: ElementRef
171143
) {}

Diff for: ‎projects/coreui/angular/src/lib/sidebar/app-sidebar-footer.component.ts

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
import { Component, ElementRef, OnInit } from '@angular/core';
2-
3-
import { Replace } from '../shared';
1+
import {Component, ElementRef, OnInit, Renderer2} from '@angular/core';
42

53
@Component({
64
selector: 'app-sidebar-footer',
7-
template: `
8-
<div class="sidebar-footer">
9-
<ng-content></ng-content>
10-
</div>`
5+
template: `<ng-content></ng-content>`
116
})
127
export class AppSidebarFooterComponent implements OnInit {
138

14-
constructor(private el: ElementRef) { }
15-
16-
ngOnInit() {
17-
Replace(this.el);
9+
constructor(
10+
private renderer: Renderer2,
11+
private hostElement: ElementRef
12+
) {
13+
renderer.addClass(hostElement.nativeElement, 'app-sidebar-footer');
1814
}
15+
16+
ngOnInit() { }
1917
}

0 commit comments

Comments
 (0)