feat(translate): add initial translate

package.json

@@ -58,6 +58,8 @@
     "@angular/pwa": "0.14.0-beta.0",
     "@angular/router": "^8.0.0-beta.4",
     "@angular/service-worker": "^8.0.0-beta.4",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
     "@ngxs/router-plugin": "^3.4.2",
     "@ngxs/store": "^3.4.1",
     "@stackblitz/sdk": "^1.3.0",

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Router, NavigationEnd } from '@angular/router';
 import { filter } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
 
 declare var gtag;
 
@@ -23,7 +24,8 @@ export class AppComponent {
   constructor(
     readonly iconRegistry: MatIconRegistry,
     readonly sanitizer: DomSanitizer,
-    readonly router: Router) {
+    readonly router: Router,
+    readonly translate: TranslateService) {
 
       iconRegistry.addSvgIcon('angular', sanitizer.bypassSecurityTrustResourceUrl('assets/codegen/angular.svg'));
       iconRegistry.addSvgIcon('react', sanitizer.bypassSecurityTrustResourceUrl('assets/codegen/react.svg'));
@@ -43,5 +45,11 @@ export class AppComponent {
         });
 
       });
+
+      translate.addLangs(['en', 'nl']);
+      translate.setDefaultLang('en');
+
+      const browserLang = translate.getBrowserLang();
+      translate.use(browserLang.match(/en|nl/) ? browserLang : 'en');
   }
 }

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -19,6 +19,9 @@ import { CoreModule } from './core/core.module';
 import { UiState } from './core/state';
 import { CodeGenState } from './core/state/page.state';
 import { EditorGuardService } from './editor-guard.service';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+
 
 export const routes: Route[] = [
   {
@@ -69,6 +72,12 @@ const StoreDebugModule = [
   NgxsRouterPluginModule.forRoot()
 ];
 
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
+
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
@@ -77,6 +86,11 @@ const StoreDebugModule = [
     BrowserAnimationsModule,
     StoreDebugModule,
     CoreModule,
+    TranslateModule.forRoot({ loader: {
+      provide: TranslateLoader,
+      useFactory: HttpLoaderFactory,
+      deps: [HttpClient]
+  }}),
     RouterModule.forRoot(routes, {
       useHash: true,
       enableTracing: !environment.production,

src/app/core/core.module.ts

@@ -3,6 +3,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
@@ -52,7 +53,7 @@ const ExtraModules = [FormsModule, ColorSketchModule];
 
 @NgModule({
   imports: [...MATERIAL, ...ExtraModules],
-  exports: [CommonModule, ...MATERIAL, ...ExtraModules],
+  exports: [CommonModule, ...MATERIAL, ...ExtraModules, TranslateModule],
   providers: [...PROVIDERS]
 })
-export class CoreModule {}
+export class CoreModule { }

src/app/core/preview-badge.service.ts

@@ -1,13 +1,14 @@
 import { Inject, Injectable } from '@angular/core';
 import { WINDOW } from '@app/core/window.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class PreviewBadgeService {
   badge = 'BETA';
 
-  constructor(@Inject(WINDOW) private readonly window: Window) {}
+  constructor(@Inject(WINDOW) private readonly window: Window, private readonly translateService: TranslateService) { }
 
   computeBadge() {
     try {
@@ -17,11 +18,11 @@ export class PreviewBadgeService {
         hostname === '127.0.0.1' ||
         hostname === '0.0.0.0'
       ) {
-        return 'LOCAL PREVIEW';
+        return this.translateService.instant('BADGE_SERVICE.LOCAL');
       } else if (hostname.startsWith('next.')) {
-        return 'MASTER PREVIEW';
+        return this.translateService.instant('BADGE_SERVICE.MASTER');
       } else if (hostname.includes('netlify')) {
-        return 'PR PREVIEW';
+        return this.translateService.instant('BADGE_SERVICE.PR');
       }
 
       return this.badge;

src/app/editor/editor.component.html

@@ -6,43 +6,43 @@
     </div>
     <div class="header-spacer">
       <div [hidden]="!enabled" class="row-settings" *ngIf="currentPage && !isCodeEditor">
-        <button matTooltip="Toggle Preview Mode" [color]="wireframe ? 'warn' : ''" mat-button
+        <button [matTooltip]="(editorTranslations | async)?.preview_mode" [color]="wireframe ? 'warn' : ''" mat-button
           (click)="toggleWireframe()">
           <mat-icon>layers</mat-icon>
         </button>
-        <button [disabled]="zoomLevel >= 3" matTooltip="Zoom In" mat-button [color]="zoomIn ? 'warn' : ''"
+        <button [disabled]="zoomLevel >= 3" [matTooltip]="(editorTranslations | async)?.zoom_in" mat-button [color]="zoomIn ? 'warn' : ''"
           (click)="ZoomIn()">
           <mat-icon>zoom_in</mat-icon>
         </button>
-        <button [disabled]="zoomLevel <= 0.1" matTooltip="Zoom Out" mat-button [color]="zoomOut ? 'warn' : ''"
+        <button [disabled]="zoomLevel <= 0.1" [matTooltip]="(editorTranslations | async)?.zoom_out" mat-button [color]="zoomOut ? 'warn' : ''"
           (click)="ZoomOut()">
           <mat-icon>zoom_out</mat-icon>
         </button>
-        <button matTooltip="Zoom Reset" mat-button [color]="resetZoom ? 'warn' : ''" (click)="ZoomReset()">
+        <button [matTooltip]="(editorTranslations | async)?.zoom_reset" mat-button [color]="resetZoom ? 'warn' : ''" (click)="ZoomReset()">
           <mat-icon>search</mat-icon>
         </button>
-        <button matTooltip="Toggle 3D – Hold SHIFT to rotate" mat-button [color]="is3dView ? 'warn' : ''" (click)="toggle3d()">
+        <button [matTooltip]="(editorTranslations | async)?.toggle_rotate" mat-button [color]="is3dView ? 'warn' : ''" (click)="toggle3d()">
           <mat-icon>3d_rotation</mat-icon>
         </button>
-        <button matTooltip="Code generation" mat-button (click)="toggleCodeEditor()">
+        <button [matTooltip]="(editorTranslations | async)?.codegeneration" mat-button (click)="toggleCodeEditor()">
           <mat-icon>code</mat-icon>
         </button>
       </div>
     </div>
     <div [hidden]="!enabled" class="row-settings" *ngIf="currentPage && isCodeEditor">
-      <button matTooltip="Go Back To Preview" mat-button (click)="togglePreview()">
+      <button [matTooltip]="(editorTranslations | async)?.back" mat-button (click)="togglePreview()">
         <mat-icon>arrow_back</mat-icon>
       </button>
-      <button [disabled]="!isStackblitzEnabled" (click)="openInStackblitz()" matTooltip="Open project in Stackblitz"
+      <button [disabled]="!isStackblitzEnabled" (click)="openInStackblitz()" [matTooltip]="(editorTranslations | async)?.stackblitz"
         mat-button>
         <mat-icon>offline_bolt</mat-icon>
       </button>
-      <button (click)="download()" matTooltip="Download as zip" mat-button>
+      <button (click)="download()" [matTooltip]="(editorTranslations | async)?.download_zip" mat-button>
         <mat-icon>archive</mat-icon>
       </button>
     </div>
     <div class="header-actions">
-      <button *ngIf="currentPage" (click)="close()" matTooltip="Close project" mat-icon-button>
+      <button *ngIf="currentPage" (click)="close()" [matTooltip]="(editorTranslations | async)?.close_project" mat-icon-button>
         <mat-icon>exit_to_app</mat-icon>
       </button>
     </div>
@@ -53,21 +53,21 @@
 
 <footer class="footer footer--full">
   <span>
-    <a matTooltip="Give us your feedback" target="__blank" href="https://github.com/xlayers/xlayers/issues/new">
-      Feedback
+    <a [matTooltip]="(editorTranslations | async)?.feedback" target="__blank" href="https://github.com/xlayers/xlayers/issues/new">
+      {{(editorTranslations | async)?.feedback}}
     </a>
     ●
-    <a matTooltip="Support us" target="__blank" href="https://opencollective.com/xlayers">
-      Support Us
-    </a>
+    <a [matTooltip]="(editorTranslations | async)?.support" target="__blank" href="https://opencollective.com/xlayers">
+    {{(editorTranslations | async)?.support  }}  
+  </a>
   </span>
   <span>
-    <a matTooltip="Follow us on Twitter" target="__blank" href="https://twitter.com/xlayers_">
-      <img src="/assets/twitter.png" alt="follow us on Twitter">
+    <a [matTooltip]="(editorTranslations | async)?.twitter" target="__blank" href="https://twitter.com/xlayers_">
+      <img src="/assets/twitter.png" [alt]="(editorTranslations | async)?.twitter">
     </a>
-    <a matTooltip="Find us on Github" target="__blank" href="https://github.com/xlayers/xlayers">
-      <img src="/assets/github-circle.png" alt="Find us on Twitter">
+    <a [matTooltip]="(editorTranslations | async)?.github" target="__blank" href="https://github.com/xlayers/xlayers">
+      <img src="/assets/github-circle.png" [alt]="(editorTranslations | async)?.github">
     </a>  
   </span>
-  <span>Build: {{ version }}</span>
+  <span>{{'APP.build' |translate}}: {{ version }}</span>
 </footer>

src/app/editor/editor.component.spec.ts

@@ -7,6 +7,7 @@ import { WINDOW_PROVIDERS } from '@app/core/window.service';
 import { NgxsModule } from '@ngxs/store';
 import { EditorComponent } from './editor.component';
 import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('EditorComponent', () => {
   let fixture: ComponentFixture<EditorComponent>;
@@ -15,7 +16,7 @@ describe('EditorComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
-      imports: [MatMenuModule, MatSnackBarModule, NgxsModule.forRoot([UiState]), RouterTestingModule.withRoutes([])],
+      imports: [MatMenuModule, MatSnackBarModule, NgxsModule.forRoot([UiState]), RouterTestingModule.withRoutes([]),  TranslateModule.forRoot()],
       declarations: [EditorComponent],
       providers: [WINDOW_PROVIDERS]
     }).compileComponents();

src/app/editor/editor.component.ts

@@ -7,6 +7,8 @@ import * as FileSaver from 'file-saver';
 import { PreviewBadgeService } from '../core/preview-badge.service';
 import { ExportStackblitzService } from './code/exports/stackblitz/stackblitz.service';
 import { Navigate } from '@ngxs/router-plugin';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
 
 
 @Component({
@@ -27,15 +29,20 @@ export class EditorComponent implements OnInit {
   wireframe = false;
   isCodeEditor = false;
   enabled = false;
+  editorTranslations: Observable<any>;
 
 
   version = environment.version;
   badge = '';
   constructor(
     private readonly store: Store,
     private readonly badgeService: PreviewBadgeService,
-    private readonly exporter: ExportStackblitzService
-  ) { }
+    private readonly exporter: ExportStackblitzService,
+    private readonly translateService: TranslateService
+  ) {
+    this.editorTranslations = this.translateService.get('EDITOR');
+
+  }
 
   ngOnInit() {
     this.badge = this.badgeService.computeBadge();

src/app/editor/preview-badge.service.spec.ts

@@ -1,10 +1,12 @@
 import { TestBed } from '@angular/core/testing';
 import { WINDOW } from '@app/core/window.service';
 import { PreviewBadgeService } from '@app/core/preview-badge.service';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('PreviewBadgeService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
       providers: [
         PreviewBadgeService,
         {
@@ -21,7 +23,7 @@ describe('PreviewBadgeService', () => {
     });
     const service: PreviewBadgeService = TestBed.get(PreviewBadgeService);
     const badge = service.computeBadge();
-    expect(badge).toBe('LOCAL PREVIEW');
+    expect(badge).toBe('BADGE_SERVICE.LOCAL');
   });
 
   it('should set badge to MASTER PREVIEW when running on next', () => {
@@ -30,7 +32,7 @@ describe('PreviewBadgeService', () => {
     });
     const service: PreviewBadgeService = TestBed.get(PreviewBadgeService);
     const badge = service.computeBadge();
-    expect(badge).toBe('MASTER PREVIEW');
+    expect(badge).toBe('BADGE_SERVICE.MASTER');
   });
 
   it('should set badge to PR PREVIEW when running on netlify', () => {
@@ -39,7 +41,7 @@ describe('PreviewBadgeService', () => {
     });
     const service: PreviewBadgeService = TestBed.get(PreviewBadgeService);
     const badge = service.computeBadge();
-    expect(badge).toBe('PR PREVIEW');
+    expect(badge).toBe('BADGE_SERVICE.PR');
   });
 
   it('should set badge to BETA when running on any other location', () => {

src/app/editor/preview/layer-settings/settings-layer-colors/settings-layer-colors.component.spec.ts

@@ -4,6 +4,7 @@ import { NgxsModule } from '@ngxs/store';
 import { MatMenuModule } from '@angular/material/menu';
 import { SettingsLayerColorsComponent } from './settings-layer-colors.component';
 import { XStore } from '@app/core/state/state.mock';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('SettingsLayerColorsComponent', () => {
   let component: SettingsLayerColorsComponent;
@@ -12,7 +13,7 @@ describe('SettingsLayerColorsComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
-      imports: [MatMenuModule, NgxsModule.forRoot([XStore])],
+      imports: [MatMenuModule, NgxsModule.forRoot([XStore]), TranslateModule.forRoot()],
       declarations: [ SettingsLayerColorsComponent ]
     })
     .compileComponents();

src/app/editor/preview/layer-settings/settings-layer-colors/settings-layer-colors.component.ts

@@ -8,7 +8,7 @@ import { UiState, LayerCSS } from '@app/core/state';
   <mat-expansion-panel expanded="false" [disabled]="!bgColor || gradients.length === 0">
     <mat-expansion-panel-header>
       <mat-panel-title>
-        Style & Colors
+      {{'SETTINGS_COLORS.title' | translate}}
       </mat-panel-title>
     </mat-expansion-panel-header>
 
@@ -60,7 +60,7 @@ export class SettingsLayerColorsComponent implements OnInit {
     stop: string;
   }>;
   bgColor: string;
-  constructor(private store: Store) {}
+  constructor(private store: Store) { }
 
   ngOnInit() {
     this.store.select(UiState.currentLayer).subscribe(currentLayer => {

src/app/editor/preview/layer-settings/settings-layer-position/settings-layer-position.component.spec.ts

@@ -4,6 +4,7 @@ import { SettingsLayerPositionComponent } from './settings-layer-position.compon
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { NgxsModule } from '@ngxs/store';
 import { XStore } from '@app/core/state/state.mock';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('SettingsLayerPositionComponent', () => {
   let component: SettingsLayerPositionComponent;
@@ -12,7 +13,7 @@ describe('SettingsLayerPositionComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
-      imports: [NgxsModule.forRoot([XStore])],
+      imports: [NgxsModule.forRoot([XStore]),TranslateModule.forRoot()],
       declarations: [ SettingsLayerPositionComponent ]
     })
     .compileComponents();