Skip to content
This repository was archived by the owner on Oct 1, 2018. It is now read-only.

Commit 67f1b0c

Browse files
musienkoyuriymusienkoyuriy
committed
feat(i18n): integrate internationalization and russian language support
1 parent 1b46319 commit 67f1b0c

28 files changed

+12927
-158
lines changed

‎package-lock.json

+12,523
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@
3939
"@angular/platform-browser": "4.4.4",
4040
"@angular/platform-browser-dynamic": "4.4.4",
4141
"@angular/router": "4.4.4",
42+
"@ngx-translate/core": "8.0.0",
43+
"@ngx-translate/http-loader": "2.0.0",
4244
"@types/hammerjs": "2.0.35",
4345
"core-js": "2.4.1",
4446
"hammerjs": "2.0.8",

‎src/app/app.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<mat-sidenav #sidenav role="navigation">
88
<mat-nav-list (click)="sidenav.toggle()">
99
<a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
10-
{{menu.title}}
10+
{{menu.title | translate}}
1111
</a>
1212
</mat-nav-list>
1313
</mat-sidenav>

‎src/app/app.component.ts

+20-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Component } from "@angular/core";
1+
import { Component, OnInit } from '@angular/core';
2+
import { LanguageService } from './services/language.service';
23

34
interface Menu {
45
title: string;
@@ -7,31 +8,37 @@ interface Menu {
78
}
89

910
@Component({
10-
selector: "app-root",
11-
templateUrl: "./app.component.html",
12-
styleUrls: ["./app.component.scss"]
11+
selector: 'app-root',
12+
templateUrl: './app.component.html',
13+
styleUrls: ['./app.component.scss']
1314
})
14-
export class AppComponent {
15+
export class AppComponent implements OnInit {
1516
menus: Menu[] = [
1617
{
17-
title: "Home",
18-
link: "/",
18+
title: 'MENU.HOME',
19+
link: '/',
1920
options: { exact: true }
2021
},
2122
{
22-
title: "Operators",
23-
link: "/operators",
23+
title: 'MENU.OPERATORS',
24+
link: '/operators',
2425
options: { exact: false }
2526
},
2627
{
27-
title: "Companies",
28-
link: "/companies",
28+
title: 'MENU.COMPANIES',
29+
link: '/companies',
2930
options: { exact: false }
3031
},
3132
{
32-
title: "Team",
33-
link: "/team",
33+
title: 'MENU.TEAM',
34+
link: '/team',
3435
options: { exact: false }
3536
}
3637
];
38+
39+
constructor(private languageService: LanguageService) {}
40+
41+
ngOnInit() {
42+
this.languageService.init(['en', 'ru']);
43+
}
3744
}

‎src/app/app.module.ts

+30-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
1-
import { BrowserModule } from "@angular/platform-browser";
2-
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
3-
import { NgModule } from "@angular/core";
4-
import { RouterModule, PreloadAllModules } from "@angular/router";
1+
import { BrowserModule } from '@angular/platform-browser';
2+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
3+
import { NgModule } from '@angular/core';
4+
import { RouterModule, PreloadAllModules } from '@angular/router';
55

6-
import { AppComponent } from "./app.component";
7-
import { RXJS_DOC_ROUTES } from "./app.routing";
8-
import { ToolbarModule } from "./toolbar/toolbar.module";
9-
import { MatSidenavModule, MatListModule } from "@angular/material";
6+
import { AppComponent } from './app.component';
7+
import { RXJS_DOC_ROUTES } from './app.routing';
8+
import { ToolbarModule } from './toolbar/toolbar.module';
9+
import { MatSidenavModule, MatListModule } from '@angular/material';
10+
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
11+
import { HttpClient, HttpClientModule } from '@angular/common/http';
12+
import {
13+
TranslateModule,
14+
TranslatePipe,
15+
TranslateService,
16+
TranslateLoader
17+
} from '@ngx-translate/core';
18+
import { LanguageService } from './services/language.service';
19+
20+
export function HttpLoaderFactory(http: HttpClient) {
21+
return new TranslateHttpLoader(http);
22+
}
1023

1124
@NgModule({
1225
declarations: [AppComponent],
@@ -16,11 +29,19 @@ import { MatSidenavModule, MatListModule } from "@angular/material";
1629
ToolbarModule,
1730
MatListModule,
1831
MatSidenavModule,
32+
HttpClientModule,
1933
RouterModule.forRoot(RXJS_DOC_ROUTES, {
2034
preloadingStrategy: PreloadAllModules
35+
}),
36+
TranslateModule.forRoot({
37+
loader: {
38+
provide: TranslateLoader,
39+
useFactory: HttpLoaderFactory,
40+
deps: [HttpClient]
41+
}
2142
})
2243
],
23-
providers: [],
44+
providers: [TranslateService, LanguageService, TranslatePipe],
2445
bootstrap: [AppComponent]
2546
})
2647
export class AppModule {}

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

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

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<h2> Examples </h2>
1+
<h2> {{ 'OPERATOR.EXAMPLES' | translate }} </h2>
22
<div
33
class="code-example"
44
*ngFor="let example of operatorExamples"
55
appHighlightJs>
66
<div class="code-block mat-elevation-z2">
77
<div class="example-header">
8-
<div class="header-title" [innerHTML]="example.name"></div>
8+
<div class="header-title" [innerHTML]="example.name[currentLang]"></div>
99
<button
1010
mat-icon-button
1111
ngxClipboard

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

+1
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ import { OperatorExample } from '../../../../operator-docs';
88
})
99
export class OperatorExamplesComponent {
1010
@Input() operatorExamples: OperatorExample[];
11+
@Input() currentLang = 'en';
1112
}

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
<h2> Parameters </h2>
1+
<h2> {{ 'OPERATOR.PARAMETERS.TITLE' | translate }} </h2>
22
<table class="parameter-table mat-elevation-z2">
33
<thead>
44
<tr>
5-
<th>Name</th>
6-
<th>Type</th>
7-
<th>Attribute</th>
8-
<th>Description</th>
5+
<th>{{'OPERATOR.PARAMETERS.NAME' | translate}}</th>
6+
<th>{{'OPERATOR.PARAMETERS.TYPE' | translate}}</th>
7+
<th>{{'OPERATOR.PARAMETERS.ATTRIBUTE' | translate}}</th>
8+
<th>{{'OPERATOR.PARAMETERS.DESCRIPTION' | translate}}</th>
99
</tr>
1010
</thead>
1111
<tbody>
1212
<tr *ngFor="let parameter of operatorParameters">
1313
<td> {{parameter.name}} </td>
1414
<td> {{parameter.type}} </td>
1515
<td> {{parameter.attribute}} </td>
16-
<td> {{parameter.description}} </td>
16+
<td> {{parameter.description[currentLang]}} </td>
1717
</tr>
1818
</tbody>
1919
</table>

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { Component, Input } from '@angular/core';
2-
import { OperatorParameters } from '../../../../operator-docs';
1+
import { Component, Input } from "@angular/core";
2+
import { OperatorParameters } from "../../../../operator-docs";
33

44
@Component({
5-
selector: 'app-operator-parameters',
6-
templateUrl: './operator-parameters.component.html',
7-
styleUrls: ['./operator-parameters.component.scss']
5+
selector: "app-operator-parameters",
6+
templateUrl: "./operator-parameters.component.html",
7+
styleUrls: ["./operator-parameters.component.scss"]
88
})
99
export class OperatorParametersComponent {
1010
@Input() operatorParameters: OperatorParameters[];
11+
@Input() currentLang = "en";
1112
}

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

+7-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
class="operator-header">
66
</app-operator-header>
77
<section class="main-operator-container mat-typography">
8-
<h3 class="short-description" [innerHTML]="shortDescription"></h3>
8+
<h3 class="short-description" [innerHTML]="shortDescription[currentLang]"></h3>
99
<app-operator-extras
1010
class="margin-bottom-16"
1111
*ngIf="shortDescriptionExtras"
@@ -18,13 +18,17 @@ <h3 class="short-description" [innerHTML]="shortDescription"></h3>
1818
[url]="marbleUrl">
1919
</app-marble-diagram>
2020
<app-operator-examples
21-
[operatorExamples]="examples" class="margin-bottom-16">
21+
[operatorExamples]="examples"
22+
[currentLang]="currentLang"
23+
class="margin-bottom-16">
2224
</app-operator-examples>
2325
<app-operator-parameters
24-
[operatorParameters]="parameters">
26+
[operatorParameters]="parameters"
27+
[currentLang]="currentLang">
2528
</app-operator-parameters>
2629
<app-operator-walkthrough
2730
class="margin-bottom-16"
31+
[currentLang]="currentLang"
2832
[operatorWalkthrough]="walkthrough" >
2933
</app-operator-walkthrough>
3034
<app-related-operators

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

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
1+
import {
2+
Component,
3+
Input,
4+
OnInit,
5+
ChangeDetectionStrategy
6+
} from '@angular/core';
27
import { OperatorDoc } from '../../../../operator-docs/operator.model';
38

49
@Component({
@@ -9,6 +14,7 @@ import { OperatorDoc } from '../../../../operator-docs/operator.model';
914
})
1015
export class OperatorComponent {
1116
@Input() operator: OperatorDoc;
17+
@Input() currentLang = 'en';
1218

1319
private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
1420
private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
@@ -38,7 +44,7 @@ export class OperatorComponent {
3844
}
3945

4046
get walkthrough() {
41-
return this.operator.walkthrough && this.operator.walkthrough.description;
47+
return this.operator.walkthrough && this.operator.walkthrough.description[this.currentLang];
4248
}
4349

4450
get parameters() {

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

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

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

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

44
</div>

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

+1
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ import { OperatorExample } from '../../../../operator-docs';
88
})
99
export class WalkthroughComponent {
1010
@Input() operatorWalkthrough: string;
11+
@Input() currentLang = 'en';
1112
}

‎src/app/operators/operators.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
<mat-sidenav-container
2-
class="operator-container">
1+
<mat-sidenav-container class="operator-container">
32
<mat-sidenav
43
[mode]="sidenavMode"
54
[opened]="!smallScreen"
@@ -18,6 +17,7 @@ <h3 mat-subheader class="category-subheader">{{ category }}</h3>
1817
</mat-sidenav>
1918
<app-operator
2019
*ngFor="let operator of operators"
20+
[currentLang]="currentLang"
2121
[operator]="operator">
2222
</app-operator>
2323
</mat-sidenav-container>

0 commit comments

Comments
 (0)