improve translation system:

- detect language
- configure moment
- use dedicated language service
- add example to welcome view

Author: dweber019

package.json

@@ -91,6 +91,7 @@
     "aurelia-templating-router": "^1.0.0",
     "bootstrap-sass": "^3.3.7",
     "font-awesome": "^4.7.0",
+    "i18next-browser-languagedetector": "^1.0.1",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^3.1.1",
     "moment": "^2.16.0"

src/app/app.vm.ts

@@ -1,17 +1,22 @@
 import { Lazy, inject } from 'aurelia-framework';
 import { Router, RouterConfiguration } from 'aurelia-router';
 import { I18N } from 'aurelia-i18n';
+
 import { AppConfigService } from './services/app-config.service';
 import { CordovaService } from './services/cordova.service';
+import { EventBusService, EventBusEvents } from './services/event-bus.service';
+import { LanguageService } from './services/language.service';
 
-@inject(I18N, AppConfigService, Lazy.of(CordovaService))
+@inject(I18N, AppConfigService, Lazy.of(CordovaService), EventBusService, LanguageService)
 export class AppViewModel {
   public router: Router;
 
   constructor(
     private i18n: I18N,
     private appConfigService: AppConfigService,
-    private cordovaServiceFn: () => CordovaService
+    private cordovaServiceFn: () => CordovaService,
+    private eventBusService: EventBusService,
+    private languageService: LanguageService,
   ) { }
 
   public configureRouter(config: RouterConfiguration, router: Router): void {
@@ -45,7 +50,14 @@ export class AppViewModel {
         title: 'Child Router'
       }
     ]);
+    config.mapUnknownRoutes({ route: '', redirect: '' });
 
     this.router = router;
   }
+
+  private configureMoment(): void {
+    const locale = this.languageService.getCurrentLocale();
+    moment.locale(locale);
+    this.eventBusService.addSubscription(EventBusEvents.IDS.i18n.locale.changed, (a) => moment.locale(a.newValue));
+  }
 }

src/app/main.ts

@@ -18,12 +18,14 @@ import { ConsoleAppender } from 'aurelia-logging-console';
 /**
  * Locals i18n imports
  */
-import i18nEnglish from './../locales/en.json';
+import en_USTranslation from './../locales/en_US.json';
+import de_CHTranslation from './../locales/de_CH.json';
 
 /**
- * Polyfill fetch
+ * Third Party Libraries and polyfill
  */
 import 'isomorphic-fetch';
+import LanguageDetector from 'i18next-browser-languagedetector';
 
 /**
  * Aurelia configruation
@@ -42,16 +44,30 @@ export async function configure(aurelia: Aurelia): Promise<void> {
      * See: https://github.com/aurelia/i18n
      */
     .plugin('aurelia-i18n', (instance) => {
+      instance.i18next.use(LanguageDetector);
       // adapt options to your needs (see http://i18next.com/docs/options/)
       // make sure to return the promise of the setup method, in order to guarantee proper loading
       return instance.setup({
         resources: {
-          en: {
-            translation:  i18nEnglish
+          'en-US': {
+            translation: en_USTranslation
+          },
+          'de-CH': {
+            translation: de_CHTranslation
           }
         },
-        lng: 'en',
-        fallbackLng: 'en'
+        fallbackLng: {
+          'de': ['de-CH', 'en-US'],
+          'de-DE': ['de-CH', 'en-US'],
+          'default': ['en-US']
+        },
+        debug: false,
+        detection: {
+          order: ['localStorage', 'navigator'],
+          lookupCookie: 'i18next',
+          lookupLocalStorage: 'i18nextLng',
+          caches: ['localStorage']
+        }
       });
     })
     // Uncomment the line below to enable animation.

src/app/modules/welcome/welcome.vm.html

@@ -25,5 +25,11 @@ <h3>Custom global attribute</h3>
 
     <h3>Global value converter</h3>
     <p>${currentDate | dateFormat}</p>
+
+    <h3>Switch Language</h3>
+    <button click.delegate="switchLanguage()" class="btn btn-primary">Click me!</button>
+    <br/><br/>
+    <p>Everything is: <span t="TR_ATTR"></span></p>
+    <p>Signalr example: ${ 'TR_SIGNALER' | t & signal:'locale:changed' }</p>
   </section>
 </template>

src/app/modules/welcome/welcome.vm.ts

@@ -1,6 +1,8 @@
 import { autoinject } from 'aurelia-framework';
+
 import { LogManager, Logger} from './../../services/logger.service';
 import { AppConfigService } from './../../services/app-config.service';
+import { LanguageService } from './../../services/language.service';
 
 @autoinject
 export class Welcome {
@@ -13,7 +15,8 @@ export class Welcome {
   public currentDate: Date = new Date();
 
 	constructor(
-    private appConfigService: AppConfigService
+    private appConfigService: AppConfigService,
+    private languageService: LanguageService
   ) {
 		this.logger = LogManager.getLogger('Welcome VM');
 		this.logger.info('appConfig => name:', appConfigService.getName());
@@ -43,6 +46,15 @@ export class Welcome {
 		}
     return true;
 	}
+
+  public switchLanguage(): void {
+    const lang = this.languageService.getCurrentLang();
+    if (lang === this.languageService.getSupportedLanguages()[0]) {
+      this.languageService.setLocale(this.languageService.getSupportedLanguages()[1]);
+    } else {
+      this.languageService.setLocale(this.languageService.getSupportedLanguages()[0]);
+    }
+  }
 }
 
 export class UpperValueConverter {

src/app/services/language.service.ts

@@ -0,0 +1,64 @@
+import { autoinject } from 'aurelia-framework';
+import { I18N } from 'aurelia-i18n';
+import { BindingSignaler } from 'aurelia-templating-resources';
+import * as moment from 'moment/moment';
+
+import { Logger, LogManager} from './logger.service';
+
+export const LocaleChangedSignal: string = 'locale:changed';
+
+@autoinject
+export class LanguageService {
+
+    private logger: Logger;
+
+    constructor(
+        private i18n: I18N,
+        private bindingSignaler: BindingSignaler
+    ) {
+        this.logger = LogManager.getLogger('LanguageService');
+        this.logger.debug('initialized');
+        this.logger.debug(`current locale: ${this.getCurrentLocale()}`);
+    }
+
+    /**
+     * Return the language: en, de, fr, it
+     */
+    public getCurrentLang(): string {
+        return this.getCurrentLocale().split('-')[0];
+    }
+
+    /**
+     * Get the list of all supported locales from our translations,
+     * then get the current browser locale, if we have a translation
+     * returns the language or fallback to default -> en
+     */
+    public getCurrentUILanguage(): string {
+        const supported = this.getSupportedLanguages();
+        const currentLanguage = this.getCurrentLang();
+        return supported.indexOf(currentLanguage) > -1 ? currentLanguage : 'en';
+    }
+
+    /**
+     * Get a list of current configured languages which has a translation.
+     */
+    public getSupportedLanguages(): string[] {
+        const languages = Object.keys(this.i18n.i18next.options.fallbackLng)
+            .map(key => this.i18n.i18next.options.fallbackLng[key][0].split('-')[0])
+            .filter((value, index, array) => {
+                return array.indexOf (value) === index;
+            });
+        return languages;
+    }
+
+    public getCurrentLocale(): string {
+        return this.i18n.getLocale();
+    }
+
+    public setLocale(locale: string): void {
+        moment.locale(locale);
+        this.i18n.setLocale(locale);
+        this.bindingSignaler.signal(LocaleChangedSignal);
+        this.logger.debug(`changed locale to: ${locale}`);
+    }
+}

src/locales/de_CH.json

@@ -0,0 +1,5 @@
+{
+  "TITLE": "Übersetztungs Titel",
+  "TR_ATTR": "...in Deutsch",
+  "TR_SIGNALER": "Signaler Beispiel funktioniert..."
+}

src/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "TITLE": "Transaltion Title",
+  "TR_ATTR": "...in English",
+  "TR_SIGNALER": "Signaler Example works..."
+}

src/locales/en_US.json

@@ -3,7 +3,7 @@ import { AppViewModel } from '../../src/app/app.vm';
 import { I18N } from 'aurelia-i18n';
 import { BindingSignaler } from 'aurelia-templating-resources';
 import { EventAggregator } from 'aurelia-event-aggregator';
-import EnglishTranslation from '../../src/locales/en.json';
+import EnglishTranslation from '../../src/locales/en_US.json';
 import { AppConfigService } from '../../src/app/services/app-config.service';
 
 class RouterStub {
@@ -19,6 +19,10 @@ class RouterStub {
 	public map(routes): void {
 		this.routes = routes;
 	}
+
+  public mapUnknownRoutes(config): void {
+    this.routes.push(config);
+  }
 }
 
 describe('the App module', () => {
@@ -29,6 +33,8 @@ describe('the App module', () => {
 	beforeEach(() => {
 		mockedRouter = new RouterStub();
 
+    const AnyMock: any = undefined;
+
 		// Translation setup
     sut = new I18N(new EventAggregator(), new BindingSignaler());
     sut.setup({
@@ -44,7 +50,7 @@ describe('the App module', () => {
 
     appConfigSub = new AppConfigService();
 
-    sut = new AppViewModel(sut, appConfigSub, (<any>undefined));
+    sut = new AppViewModel(sut, appConfigSub, AnyMock, AnyMock, AnyMock);
 		sut.configureRouter(mockedRouter, mockedRouter);
 	});