refactor: rename directive appLinkAttributes -> appHtmlAttr

- moved to layout
- feat(app-header): navbarBrand img use appHtmlAttr instead of attr.*
- refactor(app-header): drop unused methods
- refactor(sidebar-nav): directive appLinkAttributes -> appHtmlAttr

Author: xidedix

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, OnInit, OnDestroy, Inject, Renderer2 } from '@angular/core';
+import {Component, ElementRef, Input, OnInit, OnDestroy, Inject, Renderer2} from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 import { Replace } from '../shared';
@@ -15,23 +15,14 @@ import { Replace } from '../shared';
         <a class="navbar-brand" [href]="navbarBrandHref">
           <ng-template [ngIf]="navbarBrandImg">
           <img *ngIf="navbarBrand"
-               [src]="imgSrc(navbarBrand)"
-               [attr.width]="imgWidth(navbarBrand)"
-               [attr.height]="imgHeight(navbarBrand)"
-               [attr.alt]="imgAlt(navbarBrand)"
-               class="navbar-brand">
+               [appHtmlAttr]="navbarBrand"
+               [ngClass]="'navbar-brand'">
           <img *ngIf="navbarBrandFull"
-               [src]="imgSrc(navbarBrandFull)"
-               [attr.width]="imgWidth(navbarBrandFull)"
-               [attr.height]="imgHeight(navbarBrandFull)"
-               [attr.alt]="imgAlt(navbarBrandFull)"
-               class="navbar-brand-full">
+               [appHtmlAttr]="navbarBrandFull"
+               [ngClass]="'navbar-brand-full'">
           <img *ngIf="navbarBrandMinimized"
-               [src]="imgSrc(navbarBrandMinimized)"
-               [attr.width]="imgWidth(navbarBrandMinimized)"
-               [attr.height]="imgHeight(navbarBrandMinimized)"
-               [attr.alt]="imgAlt(navbarBrandMinimized)"
-               class="navbar-brand-minimized">
+               [appHtmlAttr]="navbarBrandMinimized"
+               [ngClass]="'navbar-brand-minimized'">
           </ng-template>
           <ng-template [ngIf]="!navbarBrandImg">
             <div class="navbar-brand-full" [innerHTML]="navbarBrandText.text"></div>
@@ -73,6 +64,7 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
   @Input() asideMenuToggler: any;
   @Input() mobileAsideMenuToggler: any;
 
+  private readonly fixedClass = 'header-fixed';
   navbarBrandImg: boolean;
 
   constructor(
@@ -88,33 +80,12 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.renderer.removeClass(this.document.body, 'header-fixed');
+    this.renderer.removeClass(this.document.body, this.fixedClass);
   }
 
   isFixed(fixed: boolean = this.fixed): void {
     if (fixed) {
-      this.renderer.addClass(this.document.body, 'header-fixed');
+      this.renderer.addClass(this.document.body, this.fixedClass);
     }
   }
-
-  imgSrc(brand: any): void {
-    return brand.src ? brand.src : '';
-  }
-
-  imgWidth(brand: any): void {
-    return brand.width ? brand.width : 'auto';
-  }
-
-  imgHeight(brand: any): void {
-    return brand.height ? brand.height : 'auto';
-  }
-
-  imgAlt(brand: any): void {
-    return brand.alt ? brand.alt : '';
-  }
-
-  breakpoint(breakpoint: any): void {
-    console.log(breakpoint);
-    return breakpoint ? breakpoint : '';
-  }
 }

projects/coreui/angular/src/lib/header/app-header.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule} from '@angular/common';
 import { NgModule } from '@angular/core';
-import { LayoutModule } from './../shared/layout/layout.module';
+import { LayoutModule } from '../shared/layout';
 
 import { AppHeaderComponent } from './app-header.component';
 

projects/coreui/angular/src/lib/shared/layout/layout.directive.ts

@@ -1,4 +1,4 @@
-import {Directive, HostListener, Inject, Input, OnInit, Renderer2} from '@angular/core';
+import {Directive, ElementRef, HostListener, Inject, Input, OnInit, Renderer2} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 
 import { asideMenuCssClasses, sidebarCssClasses } from '../classes';
@@ -157,3 +157,46 @@ export class AsideToggleDirective implements OnInit {
     this.classToggler.toggleClasses(cssClass, asideMenuCssClasses);
   }
 }
+
+@Directive({
+  selector: '[appHtmlAttr]'
+})
+export class HtmlAttributesDirective implements OnInit {
+  @Input() appHtmlAttr: {[key: string]: string };
+
+  constructor(
+    @Inject(DOCUMENT) private document: any,
+    private renderer: Renderer2,
+    private el: ElementRef
+  ) {}
+
+  ngOnInit() {
+    const attribs = this.appHtmlAttr;
+    for (const attr in attribs) {
+      if (attr === 'style' && typeof(attribs[attr]) === 'object' ) {
+        this.setStyle(attribs[attr]);
+      } else if (attr === 'class') {
+        this.addClass(attribs[attr]);
+      } else {
+        this.setAttrib(attr, attribs[attr]);
+      }
+    }
+  }
+
+  private setStyle(styles) {
+    for (const style in styles) {
+      this.renderer.setStyle(this.el.nativeElement, style, styles[style] );
+    }
+  }
+
+  private addClass(classes) {
+    const classArray = (Array.isArray(classes) ? classes : classes.split(' '));
+    classArray.filter((element) => element.length > 0).forEach(element => {
+      this.renderer.addClass(this.el.nativeElement, element );
+    });
+  }
+
+  private setAttrib(key, value) {
+    this.renderer.setAttribute(this.el.nativeElement, key, value );
+  }
+}

projects/coreui/angular/src/lib/shared/layout/layout.module.ts

@@ -6,7 +6,8 @@ import {
   MobileSidebarToggleDirective,
   SidebarToggleDirective,
   SidebarMinimizeDirective,
-  SidebarOffCanvasCloseDirective
+  SidebarOffCanvasCloseDirective,
+  HtmlAttributesDirective
 } from './layout.directive';
 import { ClassToggler } from '../toggle-classes';
 
@@ -20,15 +21,17 @@ import { ClassToggler } from '../toggle-classes';
     MobileSidebarToggleDirective,
     SidebarToggleDirective,
     SidebarMinimizeDirective,
-    SidebarOffCanvasCloseDirective
+    SidebarOffCanvasCloseDirective,
+    HtmlAttributesDirective
   ],
   declarations: [
     AsideToggleDirective,
     BrandMinimizeDirective,
     MobileSidebarToggleDirective,
     SidebarToggleDirective,
     SidebarMinimizeDirective,
-    SidebarOffCanvasCloseDirective
+    SidebarOffCanvasCloseDirective,
+    HtmlAttributesDirective
   ],
   providers: [
     ClassToggler

projects/coreui/angular/src/lib/sidebar/app-sidebar-nav.component.ts

@@ -44,51 +44,6 @@ export class NavDropdownToggleDirective {
   }
 }
 
-@Directive({
-  selector: '[appLinkAttributes]'
-})
-export class LinkAttributesDirective implements OnInit {
-  @Input() appLinkAttributes: {[key: string]: string };
-
-  constructor(
-    @Inject(DOCUMENT) private document: any,
-    private renderer: Renderer2,
-    private el: ElementRef
-  ) {}
-
-  ngOnInit() {
-    const attribs = this.appLinkAttributes;
-    for (const attr in attribs) {
-      if (attr === 'style' && typeof(attribs[attr]) === 'object' ) {
-        this.setStyle(attribs[attr]);
-      } else if (attr === 'class') {
-        this.addClass(attribs[attr]);
-      } else {
-        this.setAttrib(attr, attribs[attr]);
-      }
-    }
-  }
-
-  private setStyle(styles) {
-    for (const style in styles) {
-      this.renderer.setStyle(this.el.nativeElement, style, styles[style] );
-    }
-  }
-
-  private addClass(classes) {
-    const classArray = Array.isArray(classes) ? classes : classes.split(' ');
-    classArray.forEach(element => {
-      this.renderer.addClass(this.el.nativeElement, element );
-    });
-  }
-
-  private setAttrib(key, value) {
-    const newAttr = this.document.createAttribute(key);
-    newAttr.value = value;
-    this.renderer.setAttribute(this.el.nativeElement, key, value );
-  }
-}
-
 @Component({
   selector: 'app-sidebar-nav',
   template: `
@@ -102,7 +57,8 @@ export class LinkAttributesDirective implements OnInit {
           <app-sidebar-nav-item [item]='navitem'></app-sidebar-nav-item>
         </ng-template>
       </ng-template>
-    </ul>`
+    </ul>
+  `
 })
 export class AppSidebarNavComponent implements OnChanges {
   @Input() navItems: Array<any>;
@@ -175,21 +131,21 @@ export class AppSidebarNavItemComponent implements OnInit {
     <ng-container [ngSwitch]="getLinkType()">
       <a *ngSwitchCase="'disabled'"
       [attr.disabled]="true"
-      [appLinkAttributes]="link.attributes"
+      [appHtmlAttr]="link.attributes"
       href=""
       [ngClass]="getClasses()">
         <i *ngIf="isIcon()" class="nav-icon {{ link.icon }}"></i>
         {{ link.name }}
         <span *ngIf="isBadge()" [ngClass]="'badge badge-' + link.badge.variant">{{ link.badge.text }}</span>
       </a>
-      <a *ngSwitchCase="'external'" [ngClass]="getClasses()" href="{{link.url}}" [appLinkAttributes]="link.attributes">
+      <a *ngSwitchCase="'external'" [ngClass]="getClasses()" href="{{link.url}}" [appHtmlAttr]="link.attributes">
         <i *ngIf="isIcon()" class="nav-icon {{ link.icon }}"></i>
         {{ link.name }}
         <span *ngIf="isBadge()" [ngClass]="'badge badge-' + link.badge.variant">{{ link.badge.text }}</span>
       </a>
       <a *ngSwitchDefault
         [ngClass]="getClasses()"
-        [appLinkAttributes]="link.attributes"
+        [appHtmlAttr]="link.attributes"
         routerLinkActive="active"
         [routerLink]="[link.url]"
         (click)="hideMobile()">

projects/coreui/angular/src/lib/sidebar/app-sidebar.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule} from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { LayoutModule } from './../shared/layout/layout.module';
+import { LayoutModule } from '../shared/layout';
 
 // App Sidebar Component
 import { AppSidebarFooterComponent } from './app-sidebar-footer.component';
@@ -16,8 +16,7 @@ import {
   AppSidebarNavLinkComponent,
   AppSidebarNavTitleComponent,
   NavDropdownDirective,
-  NavDropdownToggleDirective,
-  LinkAttributesDirective
+  NavDropdownToggleDirective
 } from './app-sidebar-nav.component';
 
 @NgModule({
@@ -39,7 +38,6 @@ import {
     AppSidebarNavTitleComponent,
     NavDropdownDirective,
     NavDropdownToggleDirective,
-    LinkAttributesDirective,
     LayoutModule
   ],
   declarations: [
@@ -55,8 +53,7 @@ import {
     AppSidebarNavLinkComponent,
     AppSidebarNavTitleComponent,
     NavDropdownDirective,
-    NavDropdownToggleDirective,
-    LinkAttributesDirective
+    NavDropdownToggleDirective
   ]
 })
 export class AppSidebarModule { }