[WIP] feat(i18n): integrate internationalization and russian language support

package.json

@@ -39,6 +39,8 @@
     "@angular/platform-browser": "4.4.4",
     "@angular/platform-browser-dynamic": "4.4.4",
     "@angular/router": "4.4.4",
+    "@ngx-translate/core": "8.0.0",
+    "@ngx-translate/http-loader": "2.0.0",
     "@types/hammerjs": "2.0.35",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",

src/app/app.component.html

@@ -7,7 +7,7 @@
       <mat-sidenav #sidenav role="navigation">
         <mat-nav-list (click)="sidenav.toggle()">
           <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
-            {{menu.title}}
+            {{menu.title | translate}}
           </a>
         </mat-nav-list>
       </mat-sidenav>

src/app/app.component.ts

@@ -1,4 +1,5 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
+import { LanguageService } from './services/language.service';
 
 interface Menu {
   title: string;
@@ -7,31 +8,37 @@ interface Menu {
 }
 
 @Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   menus: Menu[] = [
     {
-      title: "Home",
-      link: "/",
+      title: 'MENU.HOME',
+      link: '/',
       options: { exact: true }
     },
     {
-      title: "Operators",
-      link: "/operators",
+      title: 'MENU.OPERATORS',
+      link: '/operators',
       options: { exact: false }
     },
     {
-      title: "Companies",
-      link: "/companies",
+      title: 'MENU.COMPANIES',
+      link: '/companies',
       options: { exact: false }
     },
     {
-      title: "Team",
-      link: "/team",
+      title: 'MENU.TEAM',
+      link: '/team',
       options: { exact: false }
     }
   ];
+
+  constructor(private languageService: LanguageService) {}
+
+  ngOnInit() {
+    this.languageService.init(['en', 'ru']);
+  }
 }

src/app/app.module.ts

@@ -1,12 +1,25 @@
-import { BrowserModule } from "@angular/platform-browser";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { NgModule } from "@angular/core";
-import { RouterModule, PreloadAllModules } from "@angular/router";
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+import { RouterModule, PreloadAllModules } from '@angular/router';
 
-import { AppComponent } from "./app.component";
-import { RXJS_DOC_ROUTES } from "./app.routing";
-import { ToolbarModule } from "./toolbar/toolbar.module";
-import { MatSidenavModule, MatListModule } from "@angular/material";
+import { AppComponent } from './app.component';
+import { RXJS_DOC_ROUTES } from './app.routing';
+import { ToolbarModule } from './toolbar/toolbar.module';
+import { MatSidenavModule, MatListModule } from '@angular/material';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import {
+  TranslateModule,
+  TranslatePipe,
+  TranslateService,
+  TranslateLoader
+} from '@ngx-translate/core';
+import { LanguageService } from './services/language.service';
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
 
 @NgModule({
   declarations: [AppComponent],
@@ -16,11 +29,19 @@ import { MatSidenavModule, MatListModule } from "@angular/material";
     ToolbarModule,
     MatListModule,
     MatSidenavModule,
+    HttpClientModule,
     RouterModule.forRoot(RXJS_DOC_ROUTES, {
       preloadingStrategy: PreloadAllModules
+    }),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
     })
   ],
-  providers: [],
+  providers: [TranslateService, LanguageService, TranslatePipe],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/operators/components/additional-resources/additional-resources.component.html

@@ -1,4 +1,4 @@
-<h2> Additional Resources </h2>
+<h2> {{ 'OPERATOR.ADDITIONAL_RESOURCES' | translate }} </h2>
 <ul class="section-list">
   <li>
     <a [href]="sourceUrl" target="_blank"> Source Code </a>

src/app/operators/components/operator-examples/operator-examples.component.html

@@ -1,11 +1,11 @@
-<h2> Examples </h2>
+<h2> {{ 'OPERATOR.EXAMPLES' | translate }} </h2>
 <div
   class="code-example"
   *ngFor="let example of operatorExamples"
   appHighlightJs>
   <div class="code-block mat-elevation-z2">
     <div class="example-header">
-      <div class="header-title" [innerHTML]="example.name"></div>
+      <div class="header-title" [innerHTML]="example.name[currentLang]"></div>
       <button
         mat-icon-button
         ngxClipboard

src/app/operators/components/operator-examples/operator-examples.component.ts

@@ -8,4 +8,5 @@ import { OperatorExample } from '../../../../operator-docs';
 })
 export class OperatorExamplesComponent {
   @Input() operatorExamples: OperatorExample[];
+  @Input() currentLang = 'en';
 }

src/app/operators/components/operator-parameters/operator-parameters.component.html

@@ -1,19 +1,19 @@
-<h2> Parameters </h2>
+<h2> {{ 'OPERATOR.PARAMETERS.TITLE' | translate }} </h2>
 <table class="parameter-table mat-elevation-z2">
   <thead>
     <tr>
-      <th>Name</th>
-      <th>Type</th>
-      <th>Attribute</th>
-      <th>Description</th>
+      <th>{{'OPERATOR.PARAMETERS.NAME' | translate}}</th>
+      <th>{{'OPERATOR.PARAMETERS.TYPE' | translate}}</th>
+      <th>{{'OPERATOR.PARAMETERS.ATTRIBUTE' | translate}}</th>
+      <th>{{'OPERATOR.PARAMETERS.DESCRIPTION' | translate}}</th>
     </tr>
   </thead>
   <tbody>
     <tr *ngFor="let parameter of operatorParameters">
       <td> {{parameter.name}} </td>
       <td> {{parameter.type}} </td>
       <td> {{parameter.attribute}} </td>
-      <td> {{parameter.description}} </td>
+      <td> {{parameter.description[currentLang]}} </td>
     </tr>
   </tbody>
 </table>

src/app/operators/components/operator-parameters/operator-parameters.component.ts

@@ -1,11 +1,12 @@
-import { Component, Input } from '@angular/core';
-import { OperatorParameters } from '../../../../operator-docs';
+import { Component, Input } from "@angular/core";
+import { OperatorParameters } from "../../../../operator-docs";
 
 @Component({
-  selector: 'app-operator-parameters',
-  templateUrl: './operator-parameters.component.html',
-  styleUrls: ['./operator-parameters.component.scss']
+  selector: "app-operator-parameters",
+  templateUrl: "./operator-parameters.component.html",
+  styleUrls: ["./operator-parameters.component.scss"]
 })
 export class OperatorParametersComponent {
   @Input() operatorParameters: OperatorParameters[];
+  @Input() currentLang = "en";
 }

src/app/operators/components/operator/operator.component.html

@@ -5,7 +5,7 @@
   class="operator-header">
 </app-operator-header>
 <section class="main-operator-container mat-typography">
-  <h3 class="short-description" [innerHTML]="shortDescription"></h3>
+  <h3 class="short-description" [innerHTML]="shortDescription[currentLang]"></h3>
   <app-operator-extras
     class="margin-bottom-16"
     *ngIf="shortDescriptionExtras"
@@ -18,13 +18,17 @@ <h3 class="short-description" [innerHTML]="shortDescription"></h3>
     [url]="marbleUrl">
   </app-marble-diagram>
   <app-operator-examples
-    [operatorExamples]="examples" class="margin-bottom-16">
+    [operatorExamples]="examples"
+    [currentLang]="currentLang" 
+    class="margin-bottom-16">
   </app-operator-examples>
   <app-operator-parameters
-    [operatorParameters]="parameters">
+    [operatorParameters]="parameters"
+    [currentLang]="currentLang">
   </app-operator-parameters>
   <app-operator-walkthrough
     class="margin-bottom-16"
+    [currentLang]="currentLang"
     [operatorWalkthrough]="walkthrough" >
   </app-operator-walkthrough>
   <app-related-operators

src/app/operators/components/operator/operator.component.ts

@@ -1,4 +1,9 @@
-import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import {
+  Component,
+  Input,
+  OnInit,
+  ChangeDetectionStrategy
+} from '@angular/core';
 import { OperatorDoc } from '../../../../operator-docs/operator.model';
 
 @Component({
@@ -9,6 +14,7 @@ import { OperatorDoc } from '../../../../operator-docs/operator.model';
 })
 export class OperatorComponent {
   @Input() operator: OperatorDoc;
+  @Input() currentLang = 'en';
 
   private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
   private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
@@ -38,7 +44,7 @@ export class OperatorComponent {
   }
 
   get walkthrough() {
-    return this.operator.walkthrough && this.operator.walkthrough.description;
+    return this.operator.walkthrough && this.operator.walkthrough.description[this.currentLang];
   }
 
   get parameters() {

src/app/operators/components/related-operators/related-operators.component.html

@@ -1,4 +1,4 @@
-<h2 class="related-operators"> Related Operators </h2>
+<h2 class="related-operators"> {{ 'OPERATOR.RELATED' | translate }} </h2>
 <ul class="section-list">
   <li *ngFor="let related of relatedOperators">
     <a [href]="'/operators#' + related"> {{ related }} </a>

src/app/operators/components/walkthrough/walkthrough.component.html

@@ -1,4 +1,4 @@
-<h2> Walkthrough </h2>
+<h2> {{ 'OPERATOR.WALKTHROGH' | translate }} </h2>
 <div class="walkthrough-container" [innerHTML]="operatorWalkthrough">
 
 </div>

src/app/operators/components/walkthrough/walkthrough.component.ts

@@ -8,4 +8,5 @@ import { OperatorExample } from '../../../../operator-docs';
 })
 export class WalkthroughComponent {
   @Input() operatorWalkthrough: string;
+  @Input() currentLang = 'en';
 }

src/app/operators/operators.component.html

@@ -1,5 +1,4 @@
-<mat-sidenav-container
-  class="operator-container">
+<mat-sidenav-container class="operator-container">
   <mat-sidenav
     [mode]="sidenavMode"
     [opened]="!smallScreen"
@@ -18,6 +17,7 @@ <h3 mat-subheader class="category-subheader">{{ category }}</h3>
   </mat-sidenav>
   <app-operator
     *ngFor="let operator of operators"
+    [currentLang]="currentLang"
     [operator]="operator">
   </app-operator>
 </mat-sidenav-container>