Finish translation system. #191

js/loader.js

@@ -34,8 +34,8 @@ var Loader = (function() {
 				// All modules loaded. Load custom.css
 				// This is done after all the moduels so we can
 				// overwrite all the defined styls.
-				
-				loadFile('css/custom.css', function() {
+
+				loadFile("css/custom.css", function() {
 					// custom.css loaded. Start all modules.
 					startModules();
 				});

js/main.js

@@ -331,6 +331,7 @@ var MM = (function() {
 		init: function() {
 			Log.info("Initializing MagicMirror.");
 			loadConfig();
+			Translator.loadCoreTranslations(config.language);
 			Loader.loadModules();
 		},
 

js/module.js

@@ -58,7 +58,7 @@ var Module = Class.extend({
 	 * return Map<String, String> - A map with langKeys and filenames.
 	 */
 	getTranslations: function() {
-		return {};
+		return false;
 	},
 
 	/* getDom()
@@ -221,9 +221,25 @@ var Module = Class.extend({
 	loadTranslations: function(callback) {
 		var self = this;
 		var translations = this.getTranslations();
-		var translationFile = translations && (translations[config.language.toLowerCase()] || translations.en) || undefined;
-		if(translationFile) {
-			Translator.load(this, translationFile, callback);
+		var lang = config.language.toLowerCase();
+
+		// The variable `first` will contain the first
+		// defined translation after the following line.
+		for (var first in translations) {break;}
+
+		if (translations) {
+			var translationFile = translations[lang] || undefined;
+			var translationsFallbackFile = translations[first];
+
+			// If a translation file is set, load it and then also load the fallback translation file.
+			// Otherwise only load the fallback translation file.
+			if (translationFile !== undefined) {
+				Translator.load(self, translationFile, false, function() {
+					Translator.load(self, translationsFallbackFile, true, callback);
+				});
+			} else {
+				Translator.load(self, translationsFallbackFile, true, callback);
+			}
 		} else {
 			callback();
 		}

js/server.js

@@ -21,6 +21,7 @@ var Server = function(config, callback) {
 	app.use("/fonts", express.static(path.resolve(__dirname + "/../fonts")));
 	app.use("/modules", express.static(path.resolve(__dirname + "/../modules")));
 	app.use("/vendor", express.static(path.resolve(__dirname + "/../vendor")));
+	app.use("/translations", express.static(path.resolve(__dirname + "/../translations")));
 
 	app.get("/", function(req, res) {
 		res.sendFile(path.resolve(__dirname + "/../index.html"));

js/translator.js

@@ -6,8 +6,111 @@
  * MIT Licensed.
  */
 var Translator = (function() {
+
+	/* loadJSON(file, callback)
+	 * Load a JSON file via XHR.
+	 *
+	 * argument file string - Path of the file we want to load.
+	 * argument callback function - Function called when done.
+	 */
+	function loadJSON(file, callback) {
+		var xhr = new XMLHttpRequest();
+		xhr.overrideMimeType("application/json");
+		xhr.open("GET", file, true);
+		xhr.onreadystatechange = function () {
+			if (xhr.readyState == 4 && xhr.status == "200") {
+				callback(JSON.parse(stripComments(xhr.responseText)));
+			}
+		};
+		xhr.send(null);
+	}
+
+	/* loadJSON(str, options)
+	 * Remove any commenting from a json file so it can be parsed.
+	 *
+	 * argument str string - The string that contains json with comments.
+	 * argument opts function - Strip options.
+	 *
+	 * return the stripped string.
+	 */
+	function stripComments(str, opts) {
+		// strip comments copied from: https://github.com/sindresorhus/strip-json-comments
+
+		var singleComment = 1;
+		var multiComment = 2;
+
+		function stripWithoutWhitespace() {
+			return "";
+		}
+
+		function stripWithWhitespace(str, start, end) {
+			return str.slice(start, end).replace(/\S/g, " ");
+		}
+
+		opts = opts || {};
+
+		var currentChar;
+		var nextChar;
+		var insideString = false;
+		var insideComment = false;
+		var offset = 0;
+		var ret = "";
+		var strip = opts.whitespace === false ? stripWithoutWhitespace : stripWithWhitespace;
+
+		for (var i = 0; i < str.length; i++) {
+			currentChar = str[i];
+			nextChar = str[i + 1];
+
+			if (!insideComment && currentChar === "\"") {
+				var escaped = str[i - 1] === "\\" && str[i - 2] !== "\\";
+				if (!escaped) {
+					insideString = !insideString;
+				}
+			}
+
+			if (insideString) {
+				continue;
+			}
+
+			if (!insideComment && currentChar + nextChar === "//") {
+				ret += str.slice(offset, i);
+				offset = i;
+				insideComment = singleComment;
+				i++;
+			} else if (insideComment === singleComment && currentChar + nextChar === "\r\n") {
+				i++;
+				insideComment = false;
+				ret += strip(str, offset, i);
+				offset = i;
+				continue;
+			} else if (insideComment === singleComment && currentChar === "\n") {
+				insideComment = false;
+				ret += strip(str, offset, i);
+				offset = i;
+			} else if (!insideComment && currentChar + nextChar === "/*") {
+				ret += str.slice(offset, i);
+				offset = i;
+				insideComment = multiComment;
+				i++;
+				continue;
+			} else if (insideComment === multiComment && currentChar + nextChar === "*/") {
+				i++;
+				insideComment = false;
+				ret += strip(str, offset, i + 1);
+				offset = i + 1;
+				continue;
+			}
+		}
+
+		return ret + (insideComment ? strip(str.substr(offset)) : str.substr(offset));
+	}
+
 	return {
+		coreTranslations: {},
+		coreTranslationsFallback: {},
 		translations: {},
+		translationsFallback: {},
+
 		/* translate(module, key)
 		 * Load a translation for a given key for a given module.
 		 *
@@ -15,10 +118,28 @@ var Translator = (function() {
 		 * argument key string - The key of the text to translate.
 		 */
 		translate: function(module, key) {
-			if(this.translations[module.name]) {
+
+			if(this.translations[module.name] && key in this.translations[module.name]) {
+				// Log.log("Got translation for " + key + " from module translation: ");
 				return this.translations[module.name][key];
 			}
-			return undefined;
+
+			if (key in this.coreTranslations) {
+				// Log.log("Got translation for " + key + " from core translation.");
+				return this.coreTranslations[key];
+			}
+
+			if (this.translationsFallback[module.name] && key in this.translationsFallback[module.name]) {
+				// Log.log("Got translation for " + key + " from module translation fallback.");
+				return this.translationsFallback[module.name][key];
+			}
+
+			if (key in this.coreTranslationsFallback) {
+				// Log.log("Got translation for " + key + " from core translation fallback.");
+				return this.coreTranslationsFallback[key];
+			}
+
+			return key;
 		},
 		/* load(module, file, callback)
 		 * Load a translation file (json) and remember the data.
@@ -27,33 +148,63 @@ var Translator = (function() {
 		 * argument file string - Path of the file we want to load.
 		 * argument callback function - Function called when done.
 		 */
-		load: function(module, file, callback) {
+		load: function(module, file, isFallback, callback) {
+			if (!isFallback) {
+				Log.log(module.name + " - Load translation: " + file);
+			} else {
+				Log.log(module.name + " - Load translation fallback: " + file);
+			}
+
 			var self = this;
-			if(!this.translations[module.name]) {
-				this._loadJSON(module.file(file), function(json) {
-					self.translations[module.name] = json;
+			if(!this.translationsFallback[module.name]) {
+				loadJSON(module.file(file), function(json) {
+					if (!isFallback) {
+						self.translations[module.name] = json;
+					} else {
+						self.translationsFallback[module.name] = json;
+					}
 					callback();
 				});
 			} else {
 				callback();
 			}
 		},
-		/* _loadJSON(file, callback)
-		 * Load a JSON file via XHR.
+
+		/* loadCoreTranslations(lang)
+		 * Load the core translations.
 		 *
-		 * argument file string - Path of the file we want to load.
-		 * argument callback function - Function called when done.
+		 * argument lang String - The language identifier of the core language.
 		 */
-		_loadJSON: function(file, callback) {
-			var xhr = new XMLHttpRequest();
-			xhr.overrideMimeType("application/json");
-			xhr.open("GET", file, true);
-			xhr.onreadystatechange = function () {
-				if (xhr.readyState == 4 && xhr.status == "200") {
-					callback(JSON.parse(xhr.responseText));
-				}
-			};
-			xhr.send(null);
-		}
+		loadCoreTranslations: function(lang) {
+			var self = this;
+
+			if (lang in translations) {
+				Log.log("Loading core translation file: " + translations[lang]);
+				loadJSON(translations[lang], function(translations) {
+					self.coreTranslations = translations;
+				});
+			} else {
+				Log.log("Configured language not found in core translations.");
+			}
+
+			self.loadCoreTranslationsFallback();
+		},
+
+		/* loadCoreTranslationsFallback()
+		 * Load the core translations fallback.
+		 * The first language defined in translations.js will be used.
+		 */
+		loadCoreTranslationsFallback: function() {
+			var self = this;
+
+			// The variable `first` will contain the first
+			// defined translation after the following line.
+			for (var first in translations) {break;}
+
+			Log.log("Loading core translation fallback file: " + translations[first]);
+			loadJSON(translations[first], function(translations) {
+				self.coreTranslationsFallback = translations;
+			});
+		},
 	};
 })();