apply language to blockly iframe

src/app/app.component.ts

@@ -27,12 +27,10 @@ export class openSenseApp {
     statusBar: StatusBar,
     splashScreen: SplashScreen,
   ) {
+    this.translate.setDefaultLang(DEFAULT_LANG)
+    this.translate.use(this.translate.getBrowserLang()) // @TODO: check if this works on all platforms!
     platform.ready()
       .then(() => {
-        this.translate.setDefaultLang(DEFAULT_LANG)
-        this.translate.use(this.translate.getBrowserLang()) // @TODO: check if this works on all platforms!
-        // @TODO: also pass language to blockly (if possible?)
-
         if ((<any>window).cordova) {
           statusBar.overlaysWebView(false)
           statusBar.backgroundColorByHexString(COLORS.PRIMARY)

src/assets/blockly

@@ -1 +1 @@
-Subproject commit 171d2d909fde5b95c3b1b6af490d872d1b03fe52
+Subproject commit c43a8244e72996457ce832317bb463787645caae

src/pages/blockly/blockly.html

@@ -18,7 +18,7 @@
     <button
       ion-fab
       large
-      color ="light"
+      color="light"
       [title]="'BLOCKLY.BTN_OTA' | translate"
       (click)="launchOtaWizard();"
     >
@@ -30,7 +30,7 @@
     <button
       ion-fab
       mini
-      color ="light"
+      color="light"
       [title]="'BLOCKLY.BTN_CODE' | translate"
       (click)="toggleView();"
     >
@@ -38,5 +38,5 @@
     </button>
   </ion-fab>
 
-  <iframe #blocklyFrame scrolling="no" src='assets/blockly.html'></iframe>
+  <iframe #blocklyFrame scrolling="no" [src]="blocklyUrl"></iframe>
 </ion-content>

src/pages/blockly/blockly.ts

@@ -1,5 +1,8 @@
 import { Component, ViewChild, ElementRef } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { TranslateService } from '@ngx-translate/core';
+
 import { OtaWizardPage } from '../ota-wizard/ota-wizard';
 
 @IonicPage()
@@ -9,13 +12,18 @@ import { OtaWizardPage } from '../ota-wizard/ota-wizard';
 })
 export class BlocklyPage {
   @ViewChild('blocklyFrame') blocklyFrame: ElementRef
+  blocklyUrl: SafeResourceUrl
 
-  messageHandler: (ev: IframePostMessageEvent) => void
+  private messageHandler: (ev: IframePostMessageEvent) => void
 
   constructor(
     public navCtrl: NavController,
     public navParams: NavParams,
+    private sanitizer: DomSanitizer,
+    translate: TranslateService,
   ) {
+    this.blocklyUrl = this.buildBlocklyUrl(translate.currentLang)
+
     // need to assign it here to keep the function reference for unsubscribing again
     // and to maintain the this scope properly
     this.messageHandler = (ev: IframePostMessageEvent) => {
@@ -42,6 +50,12 @@ export class BlocklyPage {
   toggleView () {
     this.blocklyFrame.nativeElement.contentWindow.postMessage('toggleView', '*')
   }
+
+  buildBlocklyUrl (lang: string): SafeResourceUrl {
+    if (!lang) this.log.error('building url with empty language!')
+    const url = `./assets/blockly.html?lang=${lang}`
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url)
+  }
 }
 
 interface IframePostMessageEvent extends MessageEvent {