feat: add version and version picker

Author: tinayuangao

package.json

@@ -20,14 +20,14 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^5.2.1",
-    "@angular/cdk": "^5.2.1",
+    "@angular/cdk": "^5.2.4",
     "@angular/common": "^5.2.1",
     "@angular/compiler": "^5.2.1",
     "@angular/core": "^5.2.1",
     "@angular/forms": "^5.2.1",
     "@angular/http": "^5.2.1",
-    "@angular/material": "^5.2.1",
-    "@angular/material-moment-adapter": "^5.2.1",
+    "@angular/material": "^5.2.4",
+    "@angular/material-moment-adapter": "^5.2.4",
     "@angular/platform-browser": "^5.2.1",
     "@angular/platform-browser-dynamic": "^5.2.1",
     "@angular/router": "^5.2.1",

src/app/shared/footer/footer.ts

@@ -1,19 +1,13 @@
 import {Component, NgModule} from '@angular/core';
-import {VERSION} from '@angular/material';
+import {materialVersion} from '../version/version'
 
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.html',
   styleUrls: ['./footer.scss']
 })
 export class Footer {
-  get version() {
-    const version = VERSION.full.match(/\d+\.\d+\.\d+/);
-    if (version) {
-      return version[0];
-    }
-    return '';
-  }
+  version = materialVersion;
 }
 
 

src/app/shared/navbar/navbar.html

@@ -11,6 +11,9 @@
      [routerLink]="key">{{sections[key]}}</a>
   <a mat-button class="docs-navbar-hide-small docs-button" routerLink="guides">Guides</a>
   <div class="flex-spacer"></div>
+  <!-- TODO(tinayuangao): Uncomment this when we are ready for v6
+    <version-picker></version-picker>
+  -->
   <theme-picker></theme-picker>
   <a mat-button class="docs-button docs-navbar-hide-small" href="https://github.com/angular/material2"
      aria-label="GitHub Repository">

src/app/shared/navbar/navbar.ts

@@ -3,6 +3,7 @@ import {CommonModule} from '@angular/common';
 import {MatButtonModule, MatMenuModule} from '@angular/material';
 import {RouterModule} from '@angular/router';
 import {ThemePickerModule} from '../theme-picker/theme-picker';
+import {VersionPickerModule} from '../version-picker';
 import {SECTIONS} from '../documentation-items/documentation-items';
 
 const SECTIONS_KEYS = Object.keys(SECTIONS);
@@ -23,7 +24,7 @@ export class NavBar {
 }
 
 @NgModule({
-  imports: [MatButtonModule, MatMenuModule, RouterModule, ThemePickerModule, CommonModule],
+  imports: [MatButtonModule, MatMenuModule, RouterModule, ThemePickerModule, VersionPickerModule, CommonModule],
   exports: [NavBar],
   declarations: [NavBar],
 })

src/app/shared/stackblitz/stackblitz-writer.ts

@@ -3,6 +3,8 @@ import {Http} from '@angular/http';
 import {ExampleData} from '@angular/material-examples';
 import {VERSION} from '@angular/material';
 
+import {materialVersion} from '../version/version';
+
 const STACKBLITZ_URL = 'https://run.stackblitz.com/api/angular/v1';
 
 const COPYRIGHT =
@@ -21,7 +23,6 @@ const TEMPLATE_FILES = [
 
 const TAGS: string[] = ['angular', 'material', 'example'];
 const angularVersion = '^5.0.0';
-const materialVersion = '5.2.1';
 
 const dependencies = {
   '@angular/cdk': materialVersion,

src/app/shared/version-picker/index.ts

@@ -0,0 +1 @@
+export * from './version-picker';

src/app/shared/version-picker/version-picker.html

@@ -0,0 +1,9 @@
+<button mat-button [matMenuTriggerFor]="versionPicker">
+  {{materialVersion}}
+</button>
+<mat-menu #versionPicker="matMenu">
+  <button mat-menu-item *ngFor="let version of docVersions"
+          (click)="onVersionChanged(version)">
+    {{version.title}}
+  </button>
+</mat-menu>

src/app/shared/version-picker/version-picker.ts

@@ -0,0 +1,29 @@
+import {Component, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatButtonModule, MatMenuModule} from '@angular/material';
+import {docVersions, materialVersion, VersionInfo} from '../version/version'
+
+@Component({
+  selector: 'version-picker',
+  templateUrl: './version-picker.html'
+})
+export class VersionPicker {
+  docVersions = docVersions;
+
+  materialVersion = materialVersion;
+
+  displayVersion = materialVersion.match(/\d+.\d+.\d+/)[0];
+
+  onVersionChanged(version: VersionInfo) {
+    if (version.title.match(/\d+.\d+.\d+/)[0] !== this.displayVersion) {
+      window.location.assign(version.url);
+    }
+  }
+}
+
+@NgModule({
+  imports: [MatButtonModule, MatMenuModule, CommonModule],
+  exports: [VersionPicker],
+  declarations: [VersionPicker]
+})
+export class VersionPickerModule {}

src/app/shared/version/version.ts

@@ -0,0 +1,23 @@
+import {VERSION} from '@angular/material';
+
+/** This material version will be used in footer and stackblitz. */
+export const materialVersion = VERSION.full;
+
+/** Version information with title and redirect url */
+export interface VersionInfo {
+  url: string;
+  title: string;
+}
+
+/** Doc site versions. We update the urls and titles manually */
+// TODO(tinayuangao): Update the url with material.angular.io domain
+export const docVersions: VersionInfo[] = [
+  {
+    url: 'https://material2-docs-5.firebaseapp.com/',
+    title: '5.2.4'
+  },
+  {
+    url: `http://material2-docs-dev.firebaseapp.com`,
+    title: '6.0.0-beta.4'
+  }
+];