enhancement(theming): changing how taas applies themes

angular.json

@@ -25,7 +25,47 @@
               "src/favicon.ico"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              {
+                "bundleName": "material-light",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-angular.css"
+              },
+              {
+                "bundleName": "material-dark",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-angular-dark.css"
+              },
+              {
+                "bundleName": "bootstrap-light",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-bootstrap-light.css"
+              },
+              {
+                "bundleName": "bootstrap-dark",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-bootstrap-dark.css"
+              },
+              {
+                "bundleName": "fluent-light",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-fluent-light.css"
+              },
+              {
+                "bundleName": "fluent-dark",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-fluent-dark.css"
+              },
+              {
+                "bundleName": "indigo-light",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-indigo-light.css"
+              },
+              {
+                "bundleName": "indigo-dark",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-indigo-dark.css"
+              }
             ],
             "scripts": [],
             "vendorChunk": true,
@@ -137,7 +177,47 @@
               "projects/app-lob/src/assets"
             ],
             "styles": [
-              "projects/app-lob/src/styles.scss"
+              "projects/app-lob/src/styles.scss",
+              {
+                "bundleName": "material-light",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-angular.css"
+              },
+              {
+                "bundleName": "material-dark",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-angular-dark.css"
+              },
+              {
+                "bundleName": "bootstrap-light",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-bootstrap-light.css"
+              },
+              {
+                "bundleName": "bootstrap-dark",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-bootstrap-dark.css"
+              },
+              {
+                "bundleName": "fluent-light",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-fluent-light.css"
+              },
+              {
+                "bundleName": "fluent-dark",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-fluent-dark.css"
+              },
+              {
+                "bundleName": "indigo-light",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-indigo-light.css"
+              },
+              {
+                "bundleName": "indigo-dark",
+                "inject": false,
+                "input": "node_modules/igniteui-angular/styles/igniteui-indigo-dark.css"
+              }
             ],
             "scripts": [],
             "vendorChunk": true,

projects/app-crm/src/index.html

@@ -11,6 +11,7 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
     <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700" rel="stylesheet">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
         integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
 </head>

projects/app-lob/src/app/app.component.ts

@@ -1,76 +1,38 @@
 import { DOCUMENT } from '@angular/common';
-import { Component, HostListener, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { filter, map, mergeMap } from 'rxjs/operators';
+import { filter, map } from 'rxjs/operators';
+import { ThemableDirective } from '../../../../src/app/common/themable-app.directive';
 import { SEOService } from './seo.service';
 
 @Component({
     selector: 'app-root',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html'
 })
-export class AppComponent implements OnInit {
+export class AppComponent extends ThemableDirective implements OnInit {
     public title = 'app-lob';
-    private isIE = !((window as any).ActiveXObject) && 'ActiveXObject' in window;
-    private theme = 'default-theme';
-    private styleElem: HTMLStyleElement;
-    private typefacesLoaded = ['Titillium Web', 'Roboto'];
-    private typefaceUrl = 'https://fonts.googleapis.com/css?family=';
 
-    constructor(@Inject(DOCUMENT) private document: Document, private router: Router,
-        private activatedRoute: ActivatedRoute, private seoService: SEOService) { }
+    constructor(
+        @Inject(DOCUMENT) document: Document,
+        private router: Router,
+        private activatedRoute: ActivatedRoute,
+        private seoService: SEOService) {
+        super(document);
+    }
 
     public ngOnInit() {
         this.router.events.pipe(
             filter((event) => event instanceof NavigationEnd),
             map(() => {
                 let route = this.activatedRoute.firstChild;
-                while (route.firstChild) {route = route.firstChild;}
+                while (route.firstChild) { route = route.firstChild; }
                 return route;
             })
-        )
-            .subscribe((event) => {
-                this.seoService.updateHeadProperties(event.snapshot.data['title'] ?? event.parent.snapshot.data['title'],
-                    event.snapshot.data['title'] ?? event.parent.snapshot.data['description'], window.location.href);
-            });
-        this.createThemeStyle();
-    }
-
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    @HostListener('window:message', ['$event'])
-    private onMessage(e: MessageEvent) {
-        if (e.origin === e.data.origin && typeof e.data.themeStyle === 'string') {
-            this.styleElem.textContent = e.data.themeStyle;
-
-            const typeface = window.getComputedStyle(this.document.body).fontFamily.replace(/[\'\"]/g, '');
-            if (!(typeface.match(/,/g) || []).length &&
-                !this.typefacesLoaded.includes(typeface)) {
-                this.typefacesLoaded.push(typeface);
-                this.createTypefaceLink(typeface);
-            }
-        } else if (e.origin === e.data.origin && typeof e.data.theme === 'string') {
-            this.document.body.classList.remove(this.theme);
-            this.document.body.classList.add(e.data.theme);
-            this.theme = e.data.theme;
-        }
-    }
-
-    private createTypefaceLink(typeface: string) {
-        const typefaceElem = this.document.createElement('link');
-        typefaceElem.rel = 'stylesheet';
-        typefaceElem.id = 'ignteui-theme-typeface';
-        typefaceElem.href = this.typefaceUrl + typeface.split(' ').join('+');
-        document.head.insertBefore(typefaceElem, this.document.head.lastElementChild);
-    }
-
-    private createThemeStyle() {
-        if (this.isIE) {
-            this.document.body.classList.add(this.theme);
-        } else {
-            this.styleElem = document.createElement('style');
-            this.styleElem.id = 'igniteui-theme';
-            document.head.insertBefore(this.styleElem, this.document.head.lastElementChild);
-            this.document.body.classList.add('custom-body');
-        }
+        ).subscribe((event) => {
+            this.seoService.updateHeadProperties(event.snapshot.data['title'] ?? event.parent.snapshot.data['title'],
+                event.snapshot.data['title'] ?? event.parent.snapshot.data['description'], window.location.href);
+        });
+        super.ngOnInit();
     }
 }

projects/app-lob/src/app/index/docs-layout.component.ts

@@ -1,59 +1,11 @@
-import { DOCUMENT } from '@angular/common';
-import { Component, HostListener, Inject, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { ThemableDirective } from '../../../../../src/app/common/themable-app.directive';
 
 @Component({
     selector: 'app-docs-layout',
     styleUrls: ['./docs-layout.component.scss'],
     template: `<router-outlet></router-outlet>`
 })
+export class DocsLayoutComponent extends ThemableDirective {
 
-export class DocsLayoutComponent implements OnInit {
-    private isIE = !((window as any).ActiveXObject) && 'ActiveXObject' in window;
-    private theme = 'default-theme';
-    private styleElem: HTMLStyleElement;
-    private typefacesLoaded = ['Titillium Web', 'Roboto'];
-    private typefaceUrl = 'https://fonts.googleapis.com/css?family=';
-
-    constructor(@Inject(DOCUMENT) private document: Document) {}
-
-    @HostListener('window:message', ['$event'])
-    private onMessage(e: MessageEvent) {
-        if (e.origin === e.data.origin && typeof e.data.themeStyle === 'string') {
-            this.styleElem.textContent = e.data.themeStyle;
-
-            const typeface = window.getComputedStyle(this.document.body).fontFamily.replace(/\'/g, '');
-            if (!(typeface.match(/,/g) || []).length &&
-                !this.typefacesLoaded.includes(typeface)) {
-                this.typefacesLoaded.push(typeface);
-                this.createTypefaceLink(typeface);
-            }
-        } else if (e.origin === e.data.origin && typeof e.data.theme === 'string') {
-            this.document.body.classList.remove(this.theme);
-            this.document.body.classList.add(e.data.theme);
-            this.theme = e.data.theme;
-        }
-    }
-
-    public ngOnInit() {
-        this.createThemeStyle();
-    }
-
-    private createThemeStyle() {
-        if (this.isIE) {
-            this.document.body.classList.add(this.theme);
-        } else {
-            this.styleElem = document.createElement('style');
-            this.styleElem.id = 'igniteui-theme';
-            document.head.insertBefore(this.styleElem, this.document.head.lastElementChild);
-            this.document.body.classList.add('custom-body');
-        }
-    }
-
-    private createTypefaceLink(typeface: string) {
-        const typefaceElem = this.document.createElement('link');
-        typefaceElem.rel = 'stylesheet';
-        typefaceElem.id = 'ignteui-theme-typeface';
-        typefaceElem.href = this.typefaceUrl + typeface.split(' ').join('+');
-        document.head.insertBefore(typefaceElem, this.document.head.lastElementChild);
-    }
 }

projects/app-lob/src/index.html

@@ -20,6 +20,7 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700" rel="stylesheet">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
         integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
 </head>

projects/app-lob/src/styles.scss

@@ -8,12 +8,7 @@ body {
     overflow: hidden;
     margin: 0;
 }
-@include core();
-@include typography();
-@include theme(
-    $palette: $palette,
-    $schema: $schema
-);
+
 :root {
     @include palette($palette);
 }

src/app/app.component.ts

@@ -1,59 +1,11 @@
-import { DOCUMENT } from '@angular/common';
-import { Component, HostListener, Inject, OnInit } from '@angular/core';
+import { Component } from '@angular/core'
+import { ThemableDirective } from './common/themable-app.directive';
 
 @Component({
     selector: 'app-root',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html'
 })
-export class AppComponent implements OnInit {
+export class AppComponent extends ThemableDirective {
     public title = 'Samples';
-    private isIE = !((window as any).ActiveXObject) && 'ActiveXObject' in window;
-    private theme = 'default-theme';
-    private styleElem: HTMLStyleElement;
-    private typefacesLoaded = ['Titillium Web', 'Roboto'];
-    private typefaceUrl = 'https://fonts.googleapis.com/css?family=';
-
-    constructor(@Inject(DOCUMENT) private document: Document) {}
-
-    public ngOnInit() {
-        this.createThemeStyle();
-    }
-
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    @HostListener('window:message', ['$event'])
-    private onMessage(e: MessageEvent) {
-        if (e.origin === e.data.origin && typeof e.data.themeStyle === 'string') {
-            this.styleElem.textContent = e.data.themeStyle;
-            const typeface = window.getComputedStyle(this.document.body).fontFamily.replace(/[\'\"]/g, '');
-            if (!(typeface.match(/,/g) || []).length &&
-                !this.typefacesLoaded.includes(typeface)) {
-                this.typefacesLoaded.push(typeface);
-                this.createTypefaceLink(typeface);
-            }
-        } else if (e.origin === e.data.origin && typeof e.data.theme === 'string') {
-            this.document.body.classList.remove(this.theme);
-            this.document.body.classList.add(e.data.theme);
-            this.theme = e.data.theme;
-        }
-    }
-
-    private createTypefaceLink(typeface: string) {
-        const typefaceElem = this.document.createElement('link');
-        typefaceElem.rel = 'stylesheet';
-        typefaceElem.id = 'ignteui-theme-typeface';
-        typefaceElem.href = this.typefaceUrl + typeface.split(' ').join('+');
-        document.head.insertBefore(typefaceElem, this.document.head.lastElementChild);
-    }
-
-    private createThemeStyle() {
-        if (this.isIE) {
-            this.document.body.classList.add(this.theme);
-        } else {
-            this.styleElem = document.createElement('style');
-            this.styleElem.id = 'igniteui-theme';
-            document.head.insertBefore(this.styleElem, this.document.head.lastElementChild);
-            this.document.body.classList.add('custom-body');
-        }
-    }
 }