feat(navbar): Add themepicker component with lazy loaded themes

Author: mmalerba

angular-cli.json

@@ -19,7 +19,11 @@
       "mobile": false,
       "styles": [
         "main.scss",
-        "highlightjs/solarized-light.css"
+        "highlightjs/solarized-light.css",
+        {"input": "assets/pink-bluegrey.css", "lazy": true},
+        {"input": "assets/deeppurple-amber.css", "lazy": true},
+        {"input": "assets/indigo-pink.css", "lazy": true},
+        {"input": "assets/purple-green.css", "lazy": true}
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

karma.conf.js

@@ -6,20 +6,20 @@ const path = require('path');
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', 'angular-cli'],
+    frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-remap-istanbul'),
-      require('angular-cli/plugins/karma'),
+      require('@angular/cli/plugins/karma'),
       require('karma-browserstack-launcher'),
       require('karma-sauce-launcher'),
     ],
     files: [
       { pattern: './src/test.ts', watched: false }
     ],
     preprocessors: {
-      './src/test.ts': ['angular-cli']
+      './src/test.ts': ['@angular/cli']
     },
     mime: {
       'text/x-typescript': ['ts','tsx']
@@ -66,7 +66,7 @@ module.exports = function (config) {
       pollingTimeout: 20000
     },
   });
-  
+
   if (process.env['TRAVIS']) {
 
     let buildId = `TRAVIS #${process.env.TRAVIS_BUILD_NUMBER} (${process.env.TRAVIS_BUILD_ID})`;
@@ -87,5 +87,5 @@ module.exports = function (config) {
     }
 
     config.browsers = platformMap[platformType];
-  }  
+  }
 };

src/app/app-module.ts

@@ -1,3 +1,4 @@
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NgModule} from '@angular/core';
@@ -19,6 +20,7 @@ import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
 import {Footer} from './shared/footer/footer';
 import {ComponentPageTitle} from './pages/page-title/page-title';
 import {ComponentPageHeader} from './pages/component-page-header/component-page-header';
+import {StyleManager} from './shared/style-manager/style-manager';
 
 
 @NgModule({
@@ -32,7 +34,14 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
     GuideList,
     GuideViewer,
     Homepage,
-    Footer
+    Footer,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA,
+  ],
+  exports: [
+    MaterialDocsApp,
+    Homepage,
   ],
   imports: [
     BrowserModule,
@@ -47,6 +56,7 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
   providers: [
     Location,
     ComponentPageTitle,
+    StyleManager,
     {provide: LocationStrategy, useClass: PathLocationStrategy},
   ],
   bootstrap: [MaterialDocsApp],

src/app/shared/navbar/navbar.html

@@ -8,6 +8,8 @@
   </a>
   <a md-button class="docs-button" routerLink="components">Components</a>
   <a md-button class="docs-button" routerLink="guides">Guides</a>
+  <div class="flex-spacer"></div>
+  <theme-chooser></theme-chooser>
   <a md-button class="docs-button" href="https://github.com/angular/material2" aria-label="GitHub Repository">
     <img class="docs-github-logo"
          src="../../../assets/img/homepage/github-circle-white-transparent.svg"

src/app/shared/navbar/navbar.scss

@@ -1,6 +1,7 @@
 .docs-navbar {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   padding: 8px 16px;
 
   > .mat-button {
@@ -21,3 +22,7 @@
   margin: 0 7px 2px 0;
   vertical-align: middle;
 }
+
+.flex-spacer {
+  flex-grow: 1;
+}

src/app/shared/shared-module.ts

@@ -9,6 +9,7 @@ import {BrowserModule} from '@angular/platform-browser';
 import {RouterModule} from '@angular/router';
 import {PlunkerButton} from './plunker';
 import {GuideItems} from './guide-items/guide-items';
+import {ThemeChooser} from './theme-chooser/theme-chooser';
 
 
 @NgModule({
@@ -18,8 +19,8 @@ import {GuideItems} from './guide-items/guide-items';
     BrowserModule,
     MaterialModule,
   ],
-  declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
-  exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
+  declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser],
+  exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser],
   providers: [DocumentationItems, GuideItems],
   entryComponents: [
     ExampleViewer,

src/app/shared/style-manager/index.ts

@@ -0,0 +1 @@
+export * from './style-manager';

src/app/shared/style-manager/style-manager.spec.ts

@@ -0,0 +1,52 @@
+import {TestBed, inject} from '@angular/core/testing';
+import {StyleManager} from './style-manager';
+
+
+describe('StyleManager', () => {
+  let styleManager: StyleManager;
+
+  beforeEach(() => TestBed.configureTestingModule({
+    providers: [StyleManager]
+  }));
+
+  beforeEach(inject([StyleManager], (sm: StyleManager) => {
+    styleManager = sm;
+  }));
+
+  afterEach(() => {
+    let links = document.head.querySelectorAll('link');
+    for (let link of Array.prototype.slice.call(links)) {
+      if (link.className.includes('style-manager-')) {
+        document.head.removeChild(link);
+      }
+    }
+  });
+
+  it('should add stylesheet to head', () => {
+    styleManager.setStyle('test', 'test.css');
+    let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+    expect(styleEl).not.toBeNull();
+    expect(styleEl.href.endsWith('test.css')).toBe(true);
+  });
+
+  it('should change existing stylesheet', () => {
+    styleManager.setStyle('test', 'test.css');
+    let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+    expect(styleEl).not.toBeNull();
+    expect(styleEl.href.endsWith('test.css')).toBe(true);
+
+    styleManager.setStyle('test', 'new.css');
+    expect(styleEl.href.endsWith('new.css')).toBe(true);
+  });
+
+  it('should remove existing stylesheet', () => {
+    styleManager.setStyle('test', 'test.css');
+    let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+    expect(styleEl).not.toBeNull();
+    expect(styleEl.href.endsWith('test.css')).toBe(true);
+
+    styleManager.removeStyle('test');
+    styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+    expect(styleEl).toBeNull();
+  });
+});

src/app/shared/style-manager/style-manager.ts

@@ -0,0 +1,46 @@
+import {Injectable} from '@angular/core';
+
+
+/**
+ * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
+ * removed or changed later.
+ */
+@Injectable()
+export class StyleManager {
+  /**
+   * Set the stylesheet with the specified key.
+   */
+  setStyle(key: string, href: string) {
+    getLinkElementForKey(key).setAttribute('href', href);
+  }
+
+  /**
+   * Remove the stylesheet with the specified key.
+   */
+  removeStyle(key: string) {
+    const existingLinkElement = getExistingLinkElementByKey(key);
+    if (existingLinkElement) {
+      document.head.removeChild(existingLinkElement);
+    }
+  }
+}
+
+function getLinkElementForKey(key: string) {
+  return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
+}
+
+function getExistingLinkElementByKey(key: string) {
+  return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`);
+}
+
+function createLinkElementWithKey(key: string) {
+  const linkEl = document.createElement('link');
+  linkEl.setAttribute('rel', 'stylesheet');
+  linkEl.classList.add(getClassNameForKey(key));
+  document.head.appendChild(linkEl);
+  return linkEl;
+}
+
+function getClassNameForKey(key: string) {
+  return `style-manager-${key}`;
+}

src/app/shared/theme-chooser/index.ts

@@ -0,0 +1 @@
+export * from './theme-chooser';