Commit 9f5bf52d authored by Grand Francois's avatar Grand Francois
Browse files

début de prise en charge de l'internationalisation

Showing with 149 additions and 36 deletions
+149 -36
......@@ -36,3 +36,12 @@ and then :
### To flag suspicious language usage
`npm run lint`
### To generate translation file
`npm run i18n`
This creates a _src/messages.xlf_ file. Move it to _src/locale/messages.<locale>.xlf_
!!!! comment fait on pour mettre à jour un fichier messages.<locale>.xlf_ existant ? !!!!
......@@ -18,44 +18,47 @@
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
"lint": "tslint ./src/**/*.ts -t verbose",
"i18n": "ng-xi18n --i18nFormat=xlf -p src/tsconfig.json"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/animations": "^4.2.5",
"@angular/common": "^4.2.5",
"@angular/compiler": "^4.2.5",
"@angular/core": "^4.2.5",
"@angular/forms": "^4.2.5",
"@angular/http": "^4.2.5",
"@angular/material": "^2.0.0-beta.7",
"@angular/platform-browser": "^4.2.5",
"@angular/platform-browser-dynamic": "^4.2.5",
"@angular/router": "^4.2.5",
"@angular/animations": "4.2.5",
"@angular/common": "4.2.5",
"@angular/compiler": "4.2.5",
"@angular/compiler-cli": "4.2.5",
"@angular/core": "4.2.5",
"@angular/forms": "4.2.5",
"@angular/http": "4.2.5",
"@angular/material": "2.0.0-beta.7",
"@angular/platform-browser": "4.2.5",
"@angular/platform-browser-dynamic": "4.2.5",
"@angular/router": "4.2.5",
"@angular/platform-server": "4.2.5",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"core-js": "2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.8.4",
"jalhyd": "^1.0.0"
"zone.js": "0.8.4",
"jalhyd": "1.0.0"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.2.2",
"concurrently": "3.2.0",
"lite-server": "2.2.2",
"typescript": "2.2.2",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"@types/node": "^6.0.46",
"tslint": "3.15.1",
"lodash": "4.16.4",
"jasmine-core": "2.4.1",
"karma": "1.3.0",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.0.2",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "4.0.14",
"rimraf": "2.5.4",
"@types/node": "6.0.46",
"@types/jasmine": "2.5.36"
},
"repository": {}
......
import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID, MissingTranslationStrategy } from '@angular/core';
import { CompilerConfig } from '@angular/compiler';
export function getTranslationProviders(): Promise<Object[]> {
// Get the locale id from the global
const locale = document['locale'] as string;
// return no providers if fail to get translation file for locale
const noProviders: Object[] = [];
// No locale or French: no translation providers
if (!locale || locale === 'fr-FR') {
return Promise.resolve(noProviders);
}
// Ex: 'locale/messages.es.xlf`
const translationFile = `./locale/messages.${locale}.xlf`;
return getTranslationsWithSystemJs(translationFile)
.then((translations: string) => [
{ provide: TRANSLATIONS, useValue: translations },
{ provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
{ provide: LOCALE_ID, useValue: locale },
{ provide: CompilerConfig, useValue: new CompilerConfig({ missingTranslation: MissingTranslationStrategy.Error }) }
])
.catch(() => noProviders); // ignore if file not found
}
declare var System: any;
function getTranslationsWithSystemJs(file: string) {
return System.import(file + '!text'); // relies on text plugin
}
<!--
format de l'attribut i18n :
i18n="<meaning>|<description>@@<custom id>"
<p i18n="titre saisie|Titre du contrôle de saisie de paramètre@@titre_saisie_param">Saisie de paramètre</p>
-->
<p i18n="@@titre_saisie_param">Saisie de paramètre</p>
<md-input-container>
<input mdInput placeholder="{{_paramDef.symbol}}" [ngModel]="_uiValue.uncheckValueString" (ngModelChange)="setValue($event)"
<input mdInput placeholder="{{_paramDef.symbol}}" [ngModel]="_uiValue.uncheckedValueString" (ngModelChange)="setValue($event)"
/>
<md-hint>{{_message}}</md-hint>
</md-input-container>
......
......@@ -3,7 +3,7 @@
import { Component, Input, forwardRef, OnInit, DoCheck, ChangeDetectorRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl } from '@angular/forms';
import { ParamDefinition, NumericalString } from 'jalhyd';
import { ParamDefinition, NumericalString, Internationalisation, Language, ErrorMessage } from 'jalhyd';
import { ParamService } from '../param-service/param.service';
......@@ -55,7 +55,6 @@ export class ParamInputComponent implements ControlValueAccessor, OnInit, DoChec
/**
* valeur dans le contrôle (saisie par l'utilisateur)
*/
// private _uiValue: string;
private _uiValue: NumericalString;
constructor(private paramService: ParamService, private changeDetector: ChangeDetectorRef) {
......@@ -93,6 +92,10 @@ export class ParamInputComponent implements ControlValueAccessor, OnInit, DoChec
ngOnInit() {
// retrieve parameter from symbol
this._paramDef = this.paramService.getParameter(this._paramSymbol);
let docLocale: string = document['locale'] as string;
Internationalisation.getInstance().setLocale(docLocale);
console.log("doc locale " + docLocale);
}
// private getValue() {
......@@ -146,11 +149,22 @@ export class ParamInputComponent implements ControlValueAccessor, OnInit, DoChec
this._paramDef.checkValue(v.numericalValue);
}
catch (e) {
this._message = e;
if (e instanceof ErrorMessage)
this._message = Internationalisation.getInstance().localizeErrorMessage(e);
else
this._message = "invalid value";
}
}
else {
switch (Internationalisation.getInstance().lang) {
case Language.FRENCH:
this._message = "Veuillez entrer une valeur numérique";
break;
default:
this._message = "Please enter a numerical value";
}
}
else
this._message = "Please enter a numerical value";
this.log("updateMessage end :" + this.getSParam() + this.getSfromUI() + this.getSUIvalue(v) + " message=" + this._message);
}
......@@ -192,7 +206,7 @@ export class ParamInputComponent implements ControlValueAccessor, OnInit, DoChec
private log(m: string) {
let t: number = new Date().getTime() - ParamInputComponent._startTime;
console.log("ParamInputComponent(" + this._id + ") " + t + " : " + m);
// console.log("ParamInputComponent(" + this._id + ") " + t + " : " + m);
}
// ControlValueAccessor interface
......
......@@ -16,6 +16,18 @@
<script src="systemjs.config.js"></script>
<script>
// Get the locale id somehow
document.locale = 'fr-FR';
// document.locale = 'en';
// Map to the text plugin
System.config({
map: {
text: 'systemjs-text-plugin.js'
}
});
// Launch the app
System.import('main.js').catch(function (err) { console.error(err); });
</script>
......
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="titre_saisie_param" datatype="html">
<target>Parameter input</target>
</trans-unit>
</body>
</file>
</xliff>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { getTranslationProviders } from './app/i18n-providers';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
//platformBrowserDynamic().bootstrapModule(AppModule);
getTranslationProviders().then(providers => {
const options = { providers };
platformBrowserDynamic().bootstrapModule(AppModule, options);
});
/*
SystemJS Text plugin from
https://github.com/systemjs/plugin-text/blob/master/text.js
*/
exports.translate = function (load) {
if (this.builder && this.transpiler) {
load.metadata.format = 'esm';
return 'exp' + 'ort var __useDefault = true; exp' + 'ort default ' + JSON.stringify(load.source) + ';';
}
load.metadata.format = 'amd';
return 'def' + 'ine(function() {\nreturn ' + JSON.stringify(load.source) + ';\n});';
}
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment