feat(package): theme switching upgraded

valor-software · valorkin · Sep 14, 2017 · Mar 30, 2017 · Mar 30, 2017 · Jan 26, 2017
commit 2297ab2a894dd6b75d5b244aa6cc6b45ed04de5d
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -19,7 +19,9 @@
       "mobile": false,
       "serviceWorker": true,
       "styles": [
-        "../../src/datepicker/bs-datepicker.scss"
+        "../../src/datepicker/bs-datepicker.scss",
+        "assets/css/style.css",
+        "assets/css/prettify-angulario.css"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

diff --git a/demo/src/app/api-docs/api-doc-class/api-doc-class.component.html b/demo/src/app/api-docs/api-doc-class/api-doc-class.component.html
@@ -2,7 +2,7 @@
   <h3>
     <a (click)="trackSourceClick()"
        href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{apiDocs.fileName}}"
-       target="_blank">{{apiDocs.className}}</a>
+       target="_blank" rel="noopener">{{apiDocs.className}}</a>
   </h3>
   <p [innerHtml]="apiDocs.description"></p>
 

diff --git a/demo/src/app/api-docs/api-doc-config/api-doc-config.component.html b/demo/src/app/api-docs/api-doc-config/api-doc-config.component.html
@@ -1,6 +1,7 @@
 <div (click)="trackSourceClick()" class="api-doc-component">
   <h3>
-    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{apiDocs.fileName}}" target="_blank">{{apiDocs.className}}</a>
+    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{apiDocs.fileName}}"
+       target="_blank" rel="noopener">{{apiDocs.className}}</a>
   </h3>
   <p [innerHtml]="apiDocs.description"></p>
 

diff --git a/demo/src/app/api-docs/api-doc/api-doc.component.html b/demo/src/app/api-docs/api-doc/api-doc.component.html
@@ -1,6 +1,6 @@
 <div class="api-doc-component">
   <h3>
-    <a (click)="trackSourceClick()" href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{apiDocs.fileName}}" target="_blank">{{apiDocs.className}}</a>
+    <a (click)="trackSourceClick()" href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{apiDocs.fileName}}" target="_blank" rel="noopener">{{apiDocs.className}}</a>
   </h3>
   <p [innerHtml]="apiDocs.description"></p>
     <table class="table table-sm table-hover">

diff --git a/demo/src/app/api-docs/index.ts b/demo/src/app/api-docs/index.ts
@@ -23,7 +23,8 @@ export { SampleBoxComponent } from './sample-box/sample-box.component';
   imports: [CommonModule, TabsModule],
   declarations: [NgApiDocComponent, NgApiDocClassComponent,
     NgApiDocConfigComponent, SampleBoxComponent],
-  exports: [NgApiDocComponent, NgApiDocClassComponent, NgApiDocConfigComponent, SampleBoxComponent],
+  exports: [NgApiDocComponent, NgApiDocClassComponent, NgApiDocConfigComponent,
+    SampleBoxComponent],
   providers: [Analytics]
 })
 export class NgApiDocModule {

diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -1,9 +1,15 @@
 import { AfterContentInit, Component, Inject } from '@angular/core';
-import { NavigationEnd, Router, ActivatedRoute } from '@angular/router';
+import {
+  ActivatedRoute, NavigationEnd, Router, UrlSerializer
+} from '@angular/router';
 import { isBs3 } from 'ngx-bootstrap/utils';
 
-import { PageScrollConfig, PageScrollService, PageScrollInstance } from 'ng2-page-scroll';
-import { DOCUMENT } from '@angular/platform-browser';
+import {
+  PageScrollConfig, PageScrollInstance, PageScrollService
+} from 'ng2-page-scroll';
+import { DOCUMENT } from '@angular/common';
+import { Analytics } from './api-docs/analytics/analytics';
+
 PageScrollConfig.defaultDuration = 11;
 PageScrollConfig.defaultScrollOffset = 70;
 
@@ -16,41 +22,36 @@ export class AppComponent implements AfterContentInit {
     return isBs3();
   }
 
-  private route: ActivatedRoute;
-  private router: Router;
-  private pageScrollService: PageScrollService;
-  private document: any;
-
-  public constructor(route: ActivatedRoute, router: Router, pageScrollService: PageScrollService, @Inject(DOCUMENT) document: any) {
-    this.route = route;
-    this.router = router;
-    this.pageScrollService = pageScrollService;
-    this.document = document;
+  public constructor(private route: ActivatedRoute,
+                     private router: Router,
+                     private pageScrollService: PageScrollService,
+                     private urlSerializer: UrlSerializer,
+                     private _analytics: Analytics,
+                     @Inject(DOCUMENT) private document: any) {
   }
 
   // almost same logic exists in top-menu component
   public ngAfterContentInit(): any {
+    this._analytics.trackPageViews();
     const getUrl = (router: Router) => router.routerState.snapshot.url.slice(0, router.routerState.snapshot.url.indexOf('#'));
     let _prev = getUrl(this.router);
     const justDoIt = (event: any): void => {
-      if (!(event instanceof NavigationEnd)) {
-        return;
-      }
-
-      let _cur = getUrl(this.router);
+      const _cur = getUrl(this.router);
       if (typeof PR !== 'undefined' && _prev !== _cur) {
         _prev = _cur;
         // google code-prettify
         PR.prettyPrint();
       }
 
-      let hash = this.route.snapshot.fragment;
+      const hash = this.route.snapshot.fragment;
       if (hash) {
-        let pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleDirectionInstance(this.document, `#${hash}`, true);
+        const pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleDirectionInstance(this.document, `#${hash}`, true);
         this.pageScrollService.start(pageScrollInstance);
       }
     };
 
-    this.router.events.subscribe((event: any) => setTimeout(() => justDoIt(event), 50));
+    this.router.events
+      .filter(event => event instanceof NavigationEnd)
+      .subscribe((event: any) => setTimeout(() => justDoIt(event), 50));
   }
 }
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -16,6 +16,8 @@ import { MainMenuComponent } from './common/main-menu/main-menu.component';
 import { SearchFilterPipe } from './common/main-menu/search-filter.pipe';
 import { TopMenuComponent } from './common/top-menu/top-menu.component';
 import { GettingStartedComponent } from './getting-started/getting-started.component';
+import { ThemeStorage } from './theme/theme-storage';
+import { StyleManager } from './theme/style-manager';
 
 @NgModule({
   declarations: [
@@ -36,6 +38,8 @@ import { GettingStartedComponent } from './getting-started/getting-started.compo
     BsDropdownModule.forRoot()
   ],
   providers: [
+    ThemeStorage,
+    StyleManager,
     {provide: NgApiDoc, useValue: ngdoc}
   ],
   bootstrap: [AppComponent]

diff --git a/demo/src/app/common/app-footer/app-footer.component.html b/demo/src/app/common/app-footer/app-footer.component.html
@@ -1,8 +1,8 @@
 <footer class="app-footer col-md-12">
   <div class="container">
-    <p>Designed and built by the <a href="https://github.com/orgs/valor-software/teams/ng-team" target="_blank">ng-team</a>
-      with the help of our <a href="https://github.com/valor-software/ngx-bootstrap/graphs/contributors" target="_blank">contributors.</a></p>
-    <p>Code licensed under <a href="https://github.com/valor-software/ngx-bootstrap/blob/development/LICENSE" target="_blank">MIT license conditions</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a></p>
-    <p>Design and content of the documentation site heavily inspired by the <a  target="_blank" href="http://v4-alpha.getbootstrap.com/">original bootstrap.</a> documentation</p>
+    <p>Designed and built by the <a href="https://github.com/orgs/valor-software/teams/ng-team" target="_blank" rel="noopener">ng-team</a>
+      with the help of our <a href="https://github.com/valor-software/ngx-bootstrap/graphs/contributors" target="_blank" rel="noopener">contributors.</a></p>
+    <p>Code licensed under <a href="https://github.com/valor-software/ngx-bootstrap/blob/development/LICENSE" target="_blank" rel="noopener">MIT license conditions</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noopener">CC BY 3.0</a></p>
+    <p>Design and content of the documentation site heavily inspired by the <a  target="_blank" rel="noopener" href="http://v4-alpha.getbootstrap.com/">original bootstrap.</a> documentation</p>
   </div>
 </footer>
diff --git a/demo/src/app/common/main-menu/main-menu.component.html b/demo/src/app/common/main-menu/main-menu.component.html
@@ -1,12 +1,13 @@
 <div id="main-menu">
   <div class="menu-search">
-    <input type="text" name="search" placeholder="Search..." [(ngModel)]="search.text"/>
+    <input type="text" aria-label="Search in docs" name="search"
+           placeholder="Search..." [(ngModel)]="search.text"/>
   </div>
   <div class="main-menu-container">
     <div class="menu-content" *ngIf="routes && routes.length">
       <div class="section">
-        <h3 *ngIf="isBs3"><a href="./index-bs4.html#{{hash}}">View in Bootstrap 4</a></h3>
-        <h3 *ngIf="!isBs3"><a href="./#{{hash}}">View in Bootstrap 3</a></h3>
+        <h3 *ngIf="isBs3"><a (click)="installTheme('bs4')">View in Bootstrap 4</a></h3>
+        <h3 *ngIf="!isBs3"><a (click)="installTheme('bs3')">View in Bootstrap 3</a></h3>
       </div>
       <div class="section"
            *ngFor="let route of routes | SearchFilter:search.text"

diff --git a/demo/src/app/common/main-menu/main-menu.component.ts b/demo/src/app/common/main-menu/main-menu.component.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { isBs3 } from 'ngx-bootstrap/utils';
+import { Router } from '@angular/router';
+import { isBs3, setTheme } from 'ngx-bootstrap/utils';
 import { routes } from '../../app.routing';
+import { StyleManager } from '../../theme/style-manager';
+import { ThemeStorage } from '../../theme/theme-storage';
+
+const _bs3Css = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
+const _bs4Css = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css';
 
 @Component({
   selector: 'main-menu',
@@ -14,17 +19,29 @@ export class MainMenuComponent {
 
   public routes: any = routes;
   public search: any = {};
-  public hash: string = '';
 
-  private router: Router;
+  currentTheme: 'bs3' | 'bs4';
+
+  public constructor(private router: Router,
+                     public styleManager: StyleManager,
+                     private _themeStorage: ThemeStorage) {
+    const currentTheme = this._themeStorage.getStoredTheme();
+    if (currentTheme) {
+      this.installTheme(currentTheme);
+    }
 
-  public constructor(router: Router) {
     this.router = router;
     this.routes = this.routes.filter((v: any) => v.path !== '**');
-    this.router.events.subscribe((event: any) => {
-      if (event instanceof NavigationEnd) {
-        this.hash = event.url;
-      }
-    });
   }
+
+  installTheme(theme: 'bs3' | 'bs4') {
+    setTheme(theme);
+    this.currentTheme = this.isBs3 ? 'bs3' : 'bs4';
+    this.styleManager.setStyle('theme', this.isBs3 ? _bs3Css : _bs4Css);
+
+    if (this.currentTheme) {
+      this._themeStorage.storeTheme(this.currentTheme);
+    }
+  }
+
 }
diff --git a/demo/src/app/common/top-menu/top-menu.component.html b/demo/src/app/common/top-menu/top-menu.component.html
@@ -14,12 +14,12 @@ <h2 [routerLink]="['']">ngx-bootstrap {{currentVersion ? 'v' + currentVersion :
   </div>
 
   <div id="mobile-main-menu" (click)="toggle()">
-    <img src="assets/images/menu-left.svg" alt="">
+    <img src="assets/images/menu-left.svg" alt="left menu">
   </div>
 
   <div class="logo">
-    <a target="_blank" href="https://github.com/valor-software/ngx-bootstrap">
-      <img src="assets/images/GitHub-Mark-Light-64px.png" alt="">
+    <a target="_blank" rel="noopener" href="https://github.com/valor-software/ngx-bootstrap">
+      <img src="assets/images/GitHub-Mark-Light-64px.png" alt="github stars">
     </a>
   </div>
 </div>
diff --git a/demo/src/app/components/+carousel/demos/dynamic/dynamic.html b/demo/src/app/components/+carousel/demos/dynamic/dynamic.html
@@ -1,6 +1,6 @@
 <carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex">
   <slide *ngFor="let slide of slides; let index=index">
-    <img [src]="slide.image">
+    <img [src]="slide.image" alt="image slide">
 
     <div class="carousel-caption">
       <h4>Slide {{index}}</h4>

diff --git a/demo/src/app/getting-started/getting-started.template.html b/demo/src/app/getting-started/getting-started.template.html
@@ -1,14 +1,8 @@
-<!--<div class="content-header">-->
-<!--<h1>{{name}}-->
-<!--<iframe frameborder="0" scrolling="0" style="height: 20px;"-->
-<!--src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ngx-bootstrap&type=star&count=true"></iframe>-->
-<!--</h1>-->
-<!--</div>-->
 <div id="content" class="content-box">
 
-  <div class="image-responsive image-fluid">
-    <img class="mx-auto center-block" src="https://angular.io/assets/images/logos/angular/angular.svg" width="250"
-         height="250">
+  <div class="image-responsive img-fluid">
+    <img class="mx-auto center-block d-block" src="assets/images/logos/angular.svg"
+         alt="angular logo" width="250" height="250">
   </div>
 
   <a href="https://github.com/valor-software/ngx-bootstrap">
@@ -23,17 +17,19 @@ <h1 align="center">ngx-bootstrap</h1>
   <p align="center">
     <span style="margin-top: 10px;display: inline-block;width: 120px;">
       <iframe frameborder="0" scrolling="0" style="height: 20px;width: 120px;"
+              title="github stars count"
               src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ngx-bootstrap&type=star&count=true"></iframe></span>
     <br/>
 
-    <a href="https://badge.fury.io/js/ngx-bootstrap"><img src="https://badge.fury.io/js/ngx-bootstrap.svg"
-                                                          alt="npm version"></a>
-    <a href="https://npmjs.org/ngx-bootstrap"><img src="https://img.shields.io/npm/dm/ngx-bootstrap.svg"
-                                                   alt="npm downloads"></a>
+    <a href="https://badge.fury.io/js/ngx-bootstrap"
+    ><img src="https://badge.fury.io/js/ngx-bootstrap.svg" alt="npm version"></a>
+
+    <a href="https://npmjs.org/ngx-bootstrap"
+    ><img src="https://img.shields.io/npm/dm/ngx-bootstrap.svg" alt="npm downloads"></a>
 
     <br/>
-    <a href="https://travis-ci.org/valor-software/ngx-bootstrap"><img alt=""
-                                                                      src="https://travis-ci.org/valor-software/ngx-bootstrap.svg?branch=development"></a>
+    <a href="https://travis-ci.org/valor-software/ngx-bootstrap"
+    ><img alt="build status" src="https://travis-ci.org/valor-software/ngx-bootstrap.svg?branch=development"></a>
     <a href="https://ngx-slack.herokuapp.com"><img src="https://ngx-slack.herokuapp.com/badge.svg" alt="slack"></a>
   </p>
 

diff --git a/demo/src/app/shared/demo-section/demo-section.component.html b/demo/src/app/shared/demo-section/demo-section.component.html
@@ -1,7 +1,7 @@
 <div class="content-header">
   <h1>{{name}}
-    <a [href]="src" target="_blank">
-      <img src="assets/images/link-doc.png" alt=""/>
+    <a [href]="src" target="_blank" rel="noopener">
+      <img src="assets/images/link-doc.png" alt="link to doc"/>
     </a>
   </h1>
 </div>

diff --git a/demo/src/app/theme/style-manager.ts b/demo/src/app/theme/style-manager.ts
@@ -0,0 +1,45 @@
+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}`;
+}
diff --git a/demo/src/app/theme/theme-storage.ts b/demo/src/app/theme/theme-storage.ts
@@ -0,0 +1,31 @@
+// Copyright (c) 2017 Google, Inc.
+
+import { EventEmitter, Injectable } from '@angular/core';
+
+@Injectable()
+export class ThemeStorage {
+  static storageKey = 'bs-theme-storage-current';
+
+  public onThemeUpdate: EventEmitter<string> = new EventEmitter<string>();
+
+  public storeTheme(theme: 'bs3' | 'bs4') {
+    try {
+      window.localStorage[ThemeStorage.storageKey] = theme;
+    } catch (e) {}
+    this.onThemeUpdate.emit(theme);
+  }
+
+  public getStoredTheme(): 'bs3' | 'bs4' {
+    try {
+      return window.localStorage[ThemeStorage.storageKey] || null;
+    } catch (e) {
+      return null;
+    }
+  }
+
+  public clearStorage() {
+    try {
+      window.localStorage.removeItem(ThemeStorage.storageKey);
+    } catch (e) { }
+  }
+}