lang: Ensure missing translations still work in English.

microbit-carlos · microbit-carlos · commit 5f2008325f51 · 2020-11-23T19:26:15.000Z
diff --git a/editor.html b/editor.html
@@ -439,7 +439,7 @@ <h2 id="modal-msg-title"></h2>
         <script>
             // Call the web_editor function to start the editor running.
             var config = {
-                translate: language,
+                translate: LANGUAGE,
                 flags: {
                     blocks: false,
                     snippets: true,
diff --git a/js/python-main.js b/js/python-main.js
@@ -8,15 +8,18 @@ everything does.)
 /*
 Lazy load JS script files.
 */
-function script(url, id) {
+function script(url, id, onLoadCallback) {
     var s = document.createElement('script');
-    if(id){
+    if (id){
         s.id = id;
     }
     s.type = 'text/javascript';
     s.async = false;
     s.defer = true;
     s.src = url;
+    if (onLoadCallback) {
+        s.onload = onLoadCallback;
+    }
     var x = document.getElementsByTagName('head')[0];
     x.appendChild(s);
 }
@@ -283,40 +286,47 @@ function blocks() {
  * Allows the Python Editor to display in multiple languages by manipulating
  * strings with correct JS language objects.
  */
-function translations() {
+function translations(baseLanguage) {
     'use strict';
     // These values must be valid language codes
     // https://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes
     var validLangs = ['en', 'es', 'pl', 'hr', 'zh-HK', 'zh-CN', 'zh-TW'];
 
+    // This is the base language that will be extended with the translations.
+    // It is assumed this translation object (likely 'en') contains all the
+    // keys the editor needs. By extending this object instead of replacing it
+    // we ensure this will still contain any keys a translation might not have.
+    var _baseLanguage = baseLanguage;
+    var _extendedLang = baseLanguage;
+    translateEmbedStrings();
+
     /* Replaces DOM script element with the new language js file. */
-    function updateLang(newLang, callback) {
+    function updateLang(newLang, successCallback, errorCallback) {
         var elementId = 'lang';
         var newLangURL = 'lang/' + newLang + '.js';
         var endsWithURL = new RegExp(newLangURL + "$");
-        var runCallback = function() {
-            translateEmbedStrings(language);
-            callback(language);
-        };
         if (endsWithURL.test(document.getElementById(elementId).src)) {
             // The request newLang is the current one, don't reload js file
-            return runCallback(language);
+            return successCallback();
         }
         // Check for a valid language
         if (validLangs.indexOf(newLang) >- 1) {
+            LANGUAGE = null;
             document.getElementById(elementId).remove();
-            script(newLangURL, elementId);
-            document.getElementById(elementId).onload = runCallback;
+            script(newLangURL, elementId, function() {
+                _extendedLang = $.extend(true, {}, _baseLanguage, LANGUAGE);
+                translateEmbedStrings();
+                successCallback(_extendedLang);
+            });
         } else {
-            // Don't throw an error, but inform the console
-            runCallback();
             console.error('Requested language not available: ' + newLang);
+            errorCallback();
         }
     }
 
     /* Replaces the strings already loaded in the DOM, the rest are dynamically loaded. */
-    function translateEmbedStrings(language) {
-        var buttons = language['static-strings']['buttons'];
+    function translateEmbedStrings() {
+        var buttons = _extendedLang['static-strings']['buttons'];
         $('.roundbutton').each(function(object, value) {
             var button_id = $(value).attr('id');
             $(value).attr('title', buttons[button_id]['title']);
@@ -328,31 +338,34 @@ function translations() {
                 $(value).children(':last').text(buttons[button_id]['label-close']);
             }
         });
-        $('.ace_text-input').attr('aria-label',language['static-strings']['text-editor']['aria-label']);
-        $('#script-name-label').text(language['static-strings']['script-name']['label']);
-        $('#request-repl').text(language['webusb']['request-repl']);
-        $('#request-serial').text(language['webusb']['request-serial']);
-        var optionsStrings = language['static-strings']['options-dropdown'];
+        $('.ace_text-input').attr('aria-label', _extendedLang['static-strings']['text-editor']['aria-label']);
+        $('#script-name-label').text(_extendedLang['static-strings']['script-name']['label']);
+        $('#request-repl').text(_extendedLang['webusb']['request-repl']);
+        $('#request-serial').text(_extendedLang['webusb']['request-serial']);
+        var optionsStrings = _extendedLang['static-strings']['options-dropdown'];
         for (var object in optionsStrings) {
             $("#" + object).text(optionsStrings[object]);
         }
-        var helpStrings = language['help'];
+        var helpStrings = _extendedLang['help'];
         for (var object in helpStrings) {
             if (helpStrings.hasOwnProperty(object)) {
                 if (object.match(/ver/)) {
                     $('#' + object).text(helpStrings[object]);
                     continue;
                 }
                 $('#' + object).text(helpStrings[object]['label']);
-                $('#' + object).attr('title',helpStrings[object]['title']);
+                $('#' + object).attr('title', helpStrings[object]['title']);
             }
         }
-        var languages = language['languages'];
+        var languages = _extendedLang['languages'];
         for (var object in languages) {
             if (languages.hasOwnProperty(object)) {
                 $('#' + object).attr('title',languages[object]['title']);
             }
         }
+        // WebUSB flashing modal
+        $('#flashing-extra-msg').text(_extendedLang['webusb']['flashing-long-msg']);
+        $('#flashing-title').text(_extendedLang['webusb']['flashing-title']);
     }
 
     return {
@@ -373,7 +386,7 @@ function web_editor(config) {
     window.EDITOR = pythonEditor('editor', config.microPythonApi);
 
     var BLOCKS = blocks();
-    var TRANSLATIONS = translations();
+    var TRANSLATIONS = translations(config.translate);
 
     // Generating MicroPython hex with user code in the filesystem
     window.FS = microbitFsWrapper();
@@ -463,7 +476,11 @@ function web_editor(config) {
             config.translate = translations;
             document.getElementsByTagName('HTML')[0].setAttribute('lang', lang);
             $('ul.tree > li > span > a').removeClass('is-selected');
-            $('#'+lang).addClass('is-selected'); 
+            $('#' + lang).addClass('is-selected');
+        }, function() {
+            // At the moment we fail silently. If the language request came
+            // a URL parameter we ignore it, if it came from a menu it will
+            // be caught by the CI tests
         });
     }
 
@@ -710,7 +727,7 @@ function web_editor(config) {
                 return alert(config.translate.alerts.no_python + '\n\n' +
                              config.translate.alerts.error + '\n' +
                              hexImportError.message + '\n' + 
-                             config['translate']['alerts']['no_script']);
+                             config.translate.alerts.no_script);
             }
         }
         // Check if imported files includes a main.py file
@@ -1443,8 +1460,7 @@ function web_editor(config) {
             updateMain();
             var freeFsSpace = FS.getStorageRemaining();
             if (freeFsSpace < 0) {
-                // TODO: Create new string for translation
-                throw Error('There is no storage space left.')
+                throw Error(config.translate.alerts.module_out_of_space);
             }
         } catch(e) {
             return alert(config.translate.alerts.error + '\n' + e.message);
@@ -1456,17 +1472,14 @@ function web_editor(config) {
         $('#flashing-overlay-error').html("");
         $("#flashing-info").removeClass('hidden');
         $("#flashing-overlay-container").css("display", "flex");
-        // TODO: Translate these string
-        $('#flashing-title').text('Flashing code');
-        $('#flashing-extra-msg').text('Initial flash might longer, subsequent flashes will be quicker.').hide();
+        $('#flashing-extra-msg').hide();
 
         var updateProgress = function(progress, longFlash) {
-            // TODO: Translate these string
             if (!!longFlash) {
-                $('#flashing-title').text(language['webusb']['flashing-title']);
+                $('#flashing-title').text(config.translate.webusb['flashing-title']);
                 $('#flashing-extra-msg').show()
             } else {
-                $('#flashing-title').text('Flashing code');
+                $('#flashing-title').text(config.translate.webusb['flashing-title-code']);
                 $('#flashing-extra-msg').hide();
             }
             $('#webusb-flashing-progress').val(progress).css('display', 'inline-block');
diff --git a/lang/en.js b/lang/en.js
@@ -1,4 +1,4 @@
-var language = {
+var LANGUAGE = {
   'code_snippets': {
     'title': 'Code Snippets',
     'description': "Code snippets are short blocks of code to re-use in your own programs. There are snippets for most common things you'll want to do using MicroPython.",
@@ -97,6 +97,8 @@ var language = {
     'request-repl': 'Send CTRL-C for REPL',
     'request-serial': 'Send CTRL-D to reset',
     'flashing-title': 'Flashing MicroPython',
+    'flashing-title-code': 'Flashing code',
+    'flashing-long-msg': 'Initial flash might take longer, subsequent flashes will be quicker.',
     'download': 'Download Hex'
   },
   'load': {
diff --git a/lang/es.js b/lang/es.js
@@ -1,4 +1,4 @@
-var language = {
+var LANGUAGE = {
   "code_snippets": {
     "title": "Fragmentos de Codigo",
     "description": "Los fragmentos de código son bloques cortos de código para reutilizar en tus programas. Hay fragmentos de las cosas más comunes que querrás hacer con MicroPython.",
@@ -37,7 +37,7 @@ var language = {
     "load_code": "¡Uy! No se pudo añadir el código en el archivo hex.",
     "unrecognised_hex": "Lo sentimos, no pudimos reconocer este archivo",
     "snippets": "Los fragmentos están deshabilitados cuando blockly está habilitado.",
-    "error": "Error:\n",
+    "error": "Error:",
     "empty": "El archivo Python no tiene ningún contenido.",
     "no_python": "No se pudo encontrar código válido de Python en el archivo hex.",
     "no_script": "El archivo hex no contiene un script de Python.",
diff --git a/lang/hr.js b/lang/hr.js
@@ -1,4 +1,4 @@
-var language = {
+var LANGUAGE = {
   "code_snippets": {
     "title": "Ulomci kôda",
     "description": "Ulomci kôda su kratki blokovi koda koje možeš više puta koristiti u svojim programima. Postoje ulomci za najčešće stvari koje se izvode pomoću programa MicroPython.",
@@ -37,7 +37,7 @@ var language = {
     "load_code": "Uh! Kôd se ne može upisati u .hex datoteku.",
     "unrecognised_hex": "Nažalost ne prepoznajemo datoteku",
     "snippets": "Ulomci su isključeni kada je uključena \"blockly\" biblioteka.",
-    "error": "Greška:\n",
+    "error": "Greška:",
     "empty": "Pythonova datoteka je prazna.",
     "no_python": "U .hex datoteci nije pronađen važeći Pythonov kôd.",
     "no_script": "U hex datoteci nije pronađen Pythonov programski kôd.",
diff --git a/lang/pl.js b/lang/pl.js
@@ -1,4 +1,4 @@
-var language = {
+var LANGUAGE = {
   "code_snippets": {
     "title": "Fragmenty Kodu",
     "description": "Fragmenty kodu są krótkimi blokami kodu do użycia we własnych programach. Znajdują się fragmenty dla zwykłych rzeczy, które będziemy chcieli zrobić za pomocą MicroPython.",
@@ -37,7 +37,7 @@ var language = {
     "load_code": "Ups! Nie można załadować kodu do pliku hex.",
     "unrecognised_hex": "Przepraszamy, nie mogliśmy rozpoznać tego pliku ",
     "snippets": "Fragmenty są wyłączone, gdy blockly jest włączony.",
-    "error": "Błąd:\n",
+    "error": "Błąd:",
     "empty": "Plik Pythona nie zawiera żadnego kodu.",
     "no_python": "Nie znaleziono poprawnego kodu Pythona w pliku hex.",
     "no_script": "Plik hex nie zawiera skyrptu Pythona.",
diff --git a/lang/zh-CN.js b/lang/zh-CN.js
@@ -1,4 +1,4 @@
-var language = {
+var LANGUAGE = {
   "code_snippets": {
     "title": "代码段",
     "description": "代码片段是在您自己的程序中重复使用的短代码块，这是使用MicroPython时最常见的一些代码片段。",
diff --git a/lang/zh-HK.js b/lang/zh-HK.js
@@ -1,4 +1,4 @@
-var language = {
+var LANGUAGE = {
   "code_snippets": {
     "title": "代碼段",
     "description": "程式碼片段是在您自己的程序中重複使用的短代碼塊，這是使用MicroPython時最常見的一些程式碼片段。",
diff --git a/lang/zh-TW.js b/lang/zh-TW.js
@@ -1,4 +1,4 @@
-var language = {
+var LANGUAGE = {
   "code_snippets": {
     "title": "程式碼片段",
     "description": "程式碼片段（Code snippets）可以讓你在編程中快速使用代碼，這裡提供 MicroPython 裡最常見的一些。",
@@ -37,7 +37,7 @@ var language = {
     "load_code": "哎呀！無法將代碼載入到十六進位檔案中。",
     "unrecognised_hex": "抱歉，我們無法識別這個檔案",
     "snippets": "當 blockly 啟用時無法使用程式碼片段。",
-    "error": "錯誤：\n",
+    "error": "錯誤：",
     "empty": "這個 Python 檔案沒有任何內容。",
     "no_python": "在 hex 檔中找不到有效的 Python 程式碼。",
     "no_script": "Hex 檔的內容不包含 Python 腳本。",

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-var language = {`
	`1`	`+var LANGUAGE = {`
`2`	`2`	`"code_snippets": {`
`3`	`3`	`"title": "代码段",`
`4`	`4`	`"description": "代码片段是在您自己的程序中重复使用的短代码块，这是使用MicroPython时最常见的一些代码片段。",`