Merge pull request #12 from NextFaze/i18n

Internationalisation Support
NextFaze · Mar 17, 2017 · f091f65 · f091f65
2 parents fb16a8b + e7985fd
commit f091f65
Show file tree

Hide file tree

Showing 13 changed files with 207 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -124,6 +124,73 @@ export class MyApp {
 }
 ```
 
+## Internationalisation Support
+
+The service uses [ng2-translate](https://www.npmjs.com/package/ng2-translate) to support languages other than English. This package is the way [recommended](https://ionicframework.com/docs/v2/resources/ng2-translate/) by the Ionic developers.
+
+### With Built in translations
+
+To make life easy for app developers, the service includes its own translation strings. All you need to do is add `ng2-translate` to your Ionic app and set the active language.
+
+Languages supported are currently limited to English and a Google Translated Spanish. We would love pull requests for new languages.
+
+#### Boostrap ng2-translate with your app!
+
+```ts
+    import { ManUpModule } from 'ionic-manup';
+    import { TranslateModule } from 'ng2-translate';
+
+    // in your module's import array
+    TranslateModule.forRoot(),
+    ManUpModule.forRoot({url: 'https://example.com/manup.json'})
+```
+
+Note: This is an absolute bare minimum example of loading the module. Follow the instructions linked to above for how to use `ng2-translate` in your app.
+
+### With your own strings
+
+If you want to further customise the messages, you can provide your own translations for the ManUp strings. _This is the only way we will be supporting customisation of the messages_.
+
+#### Setup your language files
+
+Follow the instructions for setting up `ng2-translate` with your Ionic 2 app, and add the following tree to your language files:
+
+
+```json
+ {
+   ...
+
+    "manup": {
+        "mandatory": {
+            "title": "Update Required",
+            "text": "An update to {{app}} is required to continue."
+        },
+        "optional": {
+            "title": "Update Available",
+            "text": "An update to {{app}} is available. Would you like to update?"
+        },
+        "maintenance": {
+            "title": "{app}} Unavailable",
+            "text": "{{app}} is currently unavailable, please check back again later."
+        },
+        "buttons": {
+            "update": "Update",
+            "later": "Not Now"
+        }
+    }
+ }
+```
+
+#### Tell ManUp to use external translations
+
+You need to tell ManUp to use external translations. Modify your Bootstrap like this:
+
+```ts
+    import { ManUpModule } from 'ionic-manup';
+
+    // in your module's import array
+    ManUpModule.forRoot({url: 'https://example.com/manup.json', externalTranslations: true})
+```
 
 ## Demonstration App
 

diff --git a/manup-demo/package.json b/manup-demo/package.json
@@ -24,6 +24,7 @@
     "ionic-manup": "^0.0.5",
     "ionic-native": "2.4.1",
     "ionicons": "3.0.0",
+    "ng2-translate": "^5.0.0",
     "rxjs": "5.0.0-beta.12",
     "sw-toolbox": "3.4.0",
     "zone.js": "0.6.26"

diff --git a/manup-demo/src/app/app.component.ts b/manup-demo/src/app/app.component.ts
@@ -5,14 +5,16 @@ import { StatusBar, Splashscreen } from 'ionic-native';
 import { TabsPage } from '../pages/tabs/tabs';
 
 import { ManUpService } from 'ionic-manup';
+import { TranslateService } from 'ng2-translate'
 
 @Component({
   templateUrl: 'app.html'
 })
 export class MyApp {
   rootPage = TabsPage;
 
-  constructor(platform: Platform, private manup: ManUpService) {
+  constructor(platform: Platform, private manup: ManUpService, private translate: TranslateService) {
+    translate.setDefaultLang('es');
     platform.ready().then(() => {
       // Okay, so the platform is ready and our plugins are available.
       // Here you can do any higher level native things you might need.

diff --git a/manup-demo/src/app/app.module.ts b/manup-demo/src/app/app.module.ts
@@ -1,11 +1,18 @@
 import { NgModule, ErrorHandler } from '@angular/core';
+import { Http } from '@angular/http';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { MyApp } from './app.component';
 import { AboutPage } from '../pages/about/about';
 import { ContactPage } from '../pages/contact/contact';
 import { HomePage } from '../pages/home/home';
 import { TabsPage } from '../pages/tabs/tabs';
 import { ManUpModule, ManUpService } from 'ionic-manup';
+import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';
+
+
+export function translateLoader(http: Http) {
+  return new TranslateStaticLoader(http, 'assets/i18n', '.json');
+}
 
 @NgModule({
   declarations: [
@@ -17,7 +24,12 @@ import { ManUpModule, ManUpService } from 'ionic-manup';
   ],
   imports: [
     IonicModule.forRoot(MyApp),
-    ManUpModule.forRoot({url: 'https://raw.githubusercontent.com/NextFaze/ionic-manup/master/manup-demo/manup.json'})
+    ManUpModule.forRoot({url: 'https://raw.githubusercontent.com/NextFaze/ionic-manup/master/manup-demo/manup.json', externalTranslations: true}),
+    TranslateModule.forRoot({
+      provide: TranslateLoader,
+      useFactory: (translateLoader),
+      deps: [Http]
+    })
   ],
   bootstrap: [IonicApp],
   entryComponents: [

diff --git a/manup-demo/src/assets/i18n/en.json b/manup-demo/src/assets/i18n/en.json
@@ -0,0 +1,20 @@
+{
+    "manup": {
+        "mandatory": {
+            "title": "i18n Update Required",
+            "text": "An update to {{app}} is required to continue."
+        },
+        "optional": {
+            "title": "i18n Update Available",
+            "text": "An update to {{app}} is available. Would you like to update?"
+        },
+        "maintenance": {
+            "title": "i18n {{app}} Unavailable",
+            "text": "{{app}} is currently unavailable, please check back again later."
+        },
+        "buttons": {
+            "update": "Update",
+            "later": "Not Now"
+        }
+    }
+}
diff --git a/manup-demo/src/assets/i18n/es.json b/manup-demo/src/assets/i18n/es.json
@@ -0,0 +1,20 @@
+{
+    "manup": {
+        "mandatory": {
+            "title": "Actualización Requerida",
+            "text": "Se requiere una actualización para continuar"
+        },
+        "optional": {
+            "title": "Actualización disponible",
+            "text": "Hay disponible una actualización para {{app}}. ¿Te gustaría actualizar?"
+        },
+        "maintenance": {
+            "title": "Sistema no disponible",
+            "text": "{{app}} no está disponible actualmente. Por favor, vuelva más tarde."
+        },
+        "buttons": {
+            "update": "Actualizar",
+            "later": "Ahora No"
+        }
+    }
+}
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-remap-istanbul": "^0.6.0",
     "mocha": "^3.2.0",
+    "ng2-translate": "^5.0.0",
     "rxjs": "^5.0.0-beta.12",
     "ts-node": "^2.1.0",
     "tslint": "^4.4.2",

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -0,0 +1,24 @@
+
+export var en = {
+    lang: 'en',
+    translations: {
+        manup: {
+            mandatory: {
+                title: "Update Required",
+                text: "An update to {{app}} is required to continue.",
+            },
+            optional: {
+                title: "Update Available",
+                text: "An update to {{app}} is available. Would you like to update?"
+            },
+            maintenance: {
+                title: "{{app}} Unavailable",
+                text: "{{app}} is currently unavailable, please check back again later."
+            },
+            buttons: {
+                update: "Update",
+                later: "Not Now"
+            }
+        }
+    }
+}
diff --git a/src/i18n/es.ts b/src/i18n/es.ts
@@ -0,0 +1,24 @@
+
+export var es = {
+    lang: 'es',
+    translations: {
+        manup: {
+            mandatory: {
+                title: "Actualización Requerida",
+                text: "Se requiere una actualización para continuar"
+            },
+            optional: {
+                title: "Actualización disponible",
+                text: "Hay disponible una actualización para {{app}}. ¿Te gustaría actualizar?"
+            },
+            maintenance: {
+                title: "Sistema no disponible",
+                text: "{{app}} no está disponible actualmente. Por favor, vuelva más tarde."
+            },
+            buttons: {
+                update: "Actualizar",
+                later: "Ahora No"
+            }
+        }
+    }
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -0,0 +1,6 @@
+import { en } from './en';
+import { es } from './es';
+
+export var i18n = [
+    en, es
+];
diff --git a/src/manup.config.ts b/src/manup.config.ts
@@ -3,4 +3,5 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class ManUpConfig {
     url: string
+    externalTranslations?: boolean;
 }
diff --git a/src/manup.service.ts b/src/manup.service.ts
@@ -1,9 +1,11 @@
+import { TranslateService } from 'ng2-translate';
 import { ManUpConfig } from './manup.config';
 import { AlertController, Platform } from 'ionic-angular';
 import { Http } from '@angular/http';
 import { Injectable, Optional } from '@angular/core';
 import { AppVersion, InAppBrowser } from 'ionic-native';
 import { Observable } from 'rxjs';
+import { i18n } from './i18n';
 
 import 'rxjs/add/operator/map';
 
@@ -54,7 +56,14 @@ export interface ManUpData {
 export class ManUpService {
     public AppVersion: any = AppVersion;
 
-    public constructor(private http: Http, private alert: AlertController, private platform: Platform, private config: ManUpConfig) {}
+    public constructor(private http: Http, private alert: AlertController, private platform: Platform, private config: ManUpConfig, @Optional() private translate: TranslateService ) {
+        // load the translations unless we've been told not to
+        if (this.translate && !this.config.externalTranslations) {
+            for (let lang of i18n) {
+                this.translate.setTranslation(lang.lang, lang.translations, true);
+            }
+        }
+    }
 
     /**
      * True if there is an alert already displayed. Used to prevent multiple alerts 
@@ -176,8 +185,8 @@ export class ManUpService {
             return new Promise((resolve, reject) => {
                 let alert = this.alert.create({
                     enableBackdropDismiss: false,
-                    title: "App Unavailable",
-                    subTitle: `${name} is currently unavailable, please check back again later.`,
+                    title: (this.translate) ? this.translate.instant('manup.maintenance.title', {app: name}) : `${name} Unavailable`,
+                    subTitle: (this.translate) ? this.translate.instant('manup.maintenance.text', {app: name}) : `${name} is currently unavailable. Please check back later`,
                 })
                 alert.present();
             });
@@ -194,11 +203,11 @@ export class ManUpService {
             return new Promise((resolve, reject) => {
                 let alert = this.alert.create({
                     enableBackdropDismiss: false,
-                    title: "Update Required",
-                    subTitle: `An update to ${name} is required to continue.`,
+                    title: (this.translate) ? this.translate.instant('manup.mandatory.title', {app: name}) : "Update Required",
+                    subTitle: (this.translate) ? this.translate.instant('manup.mandatory.text', {app: name}) : `An update to ${name} is required to continue.`,
                     buttons: [
                         {
-                            text: 'Update',
+                            text: (this.translate) ? this.translate.instant('manup.buttons.update') : 'Update',
                             handler: () => {
                                 new InAppBrowser(platformData.url, '_system');
                                 return false;
@@ -221,17 +230,17 @@ export class ManUpService {
             return new Promise((resolve, reject) => {
                 let alert = this.alert.create({
                     enableBackdropDismiss: false,
-                    title: "Update Available",
-                    subTitle: `An update to ${name} is available. Would you like to update?`,
+                    title: (this.translate) ? this.translate.instant('manup.optional.title', {app: name}) : "Update Available",
+                    subTitle: (this.translate) ? this.translate.instant('manup.optional.text', {app: name}) : `An update to ${name} is available. Would you like to update?`,
                     buttons: [
                         {
-                            text: 'Not Now',
+                            text: (this.translate) ? this.translate.instant('manup.buttons.later') : 'Not Now',
                             handler: () => {
                                 resolve();
                             }
                         },
                         {
-                            text: 'Update',
+                            text: (this.translate) ? this.translate.instant('manup.buttons.update') : 'Update',
                             handler: () => {
                                 new InAppBrowser(platformData.url, '_system');
                                 return false;

diff --git a/src/manup.spec.ts b/src/manup.spec.ts
@@ -17,7 +17,7 @@ describe('Manup Spec', function() {
                 enabled: false
             };
 
-            let manup = new ManUpService(null, null, null, null);
+            let manup = new ManUpService(null, null, null, null, null);
             manup.AppVersion = MockAppVersion;
 
             manup.evaluate(json).then(function(alert) {
@@ -33,7 +33,7 @@ describe('Manup Spec', function() {
                 enabled: true 
             };
 
-            let manup = new ManUpService(null, null, null, null);
+            let manup = new ManUpService(null, null, null, null, null);
             manup.AppVersion = MockAppVersion;
 
             manup.evaluate(json).then(function(alert) {
@@ -49,7 +49,7 @@ describe('Manup Spec', function() {
                 enabled: true 
             };
 
-            let manup = new ManUpService(null, null, null, null);
+            let manup = new ManUpService(null, null, null, null, null);
             manup.AppVersion = MockAppVersion;
 
             manup.evaluate(json).then(function(alert) {
@@ -65,7 +65,7 @@ describe('Manup Spec', function() {
                 enabled: true 
             };
 
-            let manup = new ManUpService(null, null, null, null);
+            let manup = new ManUpService(null, null, null, null, null);
             manup.AppVersion = MockAppVersion;
 
             manup.evaluate(json).then(function(alert) {
@@ -103,7 +103,7 @@ describe('Manup Spec', function() {
                     return v === 'ios'
                 }
             };
-            let manup = new ManUpService(null, null, <any> mockPlatform, null);
+            let manup = new ManUpService(null, null, <any> mockPlatform, null, null);
 
             let result = manup.getPlatformData(json);
             expect(result).toEqual(json.ios);
@@ -115,7 +115,7 @@ describe('Manup Spec', function() {
                     return v === 'android'
                 }
             };
-            let manup = new ManUpService(null, null, <any> mockPlatform, null);
+            let manup = new ManUpService(null, null, <any> mockPlatform, null, null);
 
             let result = manup.getPlatformData(json);
             expect(result).toEqual(json.android);
@@ -127,7 +127,7 @@ describe('Manup Spec', function() {
                     return v === 'windows'
                 }
             };
-            let manup = new ManUpService(null, null, <any> mockPlatform, null);
+            let manup = new ManUpService(null, null, <any> mockPlatform, null, null);
 
             let result = manup.getPlatformData(json);
             expect(result).toEqual(json.windows);
@@ -139,7 +139,7 @@ describe('Manup Spec', function() {
                     return false;
                 }
             };
-            let manup = new ManUpService(null, null, <any> mockPlatform, null);
+            let manup = new ManUpService(null, null, <any> mockPlatform, null, null);
 
             expect( () => {manup.getPlatformData(json)}).toThrow();
         })