First Nunchucks Implementation.

fonts/package.json

@@ -10,6 +10,6 @@
     "url": "https://github.com/MichMich/MagicMirror/issues"
   },
   "dependencies": {
-	"roboto-fontface": "^0.8.0"
+    "roboto-fontface": "^0.8.0"
   }
 }

index.html

@@ -38,6 +38,7 @@
 	</div>
 	<div class="region fullscreen above"><div class="container"></div></div>
 	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
+	<script type="text/javascript" src="vendor/node_modules/nunjucks/browser/nunjucks.min.js"></script>
 	<script type="text/javascript" src="js/defaults.js"></script>
 	<script type="text/javascript" src="#CONFIG_FILE#"></script>
 	<script type="text/javascript" src="vendor/vendor.js"></script>

js/module.js

@@ -27,6 +27,11 @@ var Module = Class.extend({
 	// visibility when hiding and showing module.
 	lockStrings: [],
 
+	// Storage of the nunjuck Environment, 
+	// This should not be referenced directly.
+	// Use the nunjucksEnvironment() to get it.
+	_nunjucksEnvironment: null,
+
 	/* init()
 	 * Is called when the module is instantiated.
 	 */
@@ -70,23 +75,28 @@ var Module = Class.extend({
 
 	/* getDom()
 	 * This method generates the dom which needs to be displayed. This method is called by the Magic Mirror core.
-	 * This method needs to be subclassed if the module wants to display info on the mirror.
+	 * This method can to be subclassed if the module wants to display info on the mirror.
+	 * Alternatively, the getTemplete method could be subclassed.
 	 *
 	 * return domobject - The dom to display.
 	 */
 	getDom: function () {
-		var nameWrapper = document.createElement("div");
-		var name = document.createTextNode(this.name);
-		nameWrapper.appendChild(name);
-
-		var identifierWrapper = document.createElement("div");
-		var identifier = document.createTextNode(this.identifier);
-		identifierWrapper.appendChild(identifier);
-		identifierWrapper.className = "small dimmed";
+		var template = this.getTemplate();
+		var templateData = this.getTemplateData();
+
+		// Check to see if we need to render a template string or a file.
+		if (/^.*(\.html)$/.test(template)) {
+			// the template is a filename
+			var filename = this.file(template);
+			var content = this.nunjucksEnvironment().render(filename, templateData);
+		} else {
+			// the template is a template string.
+			var content = this.nunjucksEnvironment().renderString(template, templateData);
+		}
 
 		var div = document.createElement("div");
-		div.appendChild(nameWrapper);
-		div.appendChild(identifierWrapper);
+
+		div.innerHTML = content;
 
 		return div;
 	},
@@ -102,6 +112,28 @@ var Module = Class.extend({
 		return this.data.header;
 	},
 
+	/* getTemplate()
+	 * This method returns the template for the module which is used by the default getDom implementation.
+	 * This method needs to be subclassed if the module wants to use a tempate.
+	 * It can either return a template sting, or a template filename.
+	 * If the string ends with '.html' it's considered a file from within the module's folder.
+	 *
+	 * return string - The template string of filename.
+	 */
+	getTemplate: function () {
+		return "<div class=\"normal\">" + this.name + "</div><div class=\"small dimmed\">" + this.identifier + "</div>";
+	},
+
+	/* getTemplateData()
+	 * This method returns the data to be used in the template.
+	 * This method needs to be subclassed if the module wants to use a custom data.
+	 *
+	 * return Object
+	 */
+	getTemplateData: function () {
+		return {}
+	},
+
 	/* notificationReceived(notification, payload, sender)
 	 * This method is called when a notification arrives.
 	 * This method is called by the Magic Mirror core.
@@ -118,6 +150,27 @@ var Module = Class.extend({
 		}
 	},
 
+	/** nunjucksEnvironment()
+	 * Returns the nunchuck environment for the current module.
+	 * The environment is checked in the _nunjucksEnvironment instance variable.
+	 * 
+	 * @returns Nunjuck Enviroment
+	 */
+	nunjucksEnvironment: function() {
+		if (this._nunjucksEnvironment != null) {
+			return this._nunjucksEnvironment;
+		}
+
+		var self = this;
+
+		this._nunjucksEnvironment = new nunjucks.Environment(new nunjucks.WebLoader());
+		this._nunjucksEnvironment.addFilter("translate", function(str) {
+			return self.translate(str)
+		});
+
+		return this._nunjucksEnvironment;
+	},
+
 	/* socketNotificationReceived(notification, payload)
 	 * This method is called when a socket notification arrives.
 	 *
@@ -276,8 +329,8 @@ var Module = Class.extend({
 	 * Request the translation for a given key with optional variables and default value.
 	 *
 	 * argument key string - The key of the string to translate
-   * argument defaultValueOrVariables string/object - The default value or variables for translating. (Optional)
-   * argument defaultValue string - The default value with variables. (Optional)
+     * argument defaultValueOrVariables string/object - The default value or variables for translating. (Optional)
+     * argument defaultValue string - The default value with variables. (Optional)
 	 */
 	translate: function (key, defaultValueOrVariables, defaultValue) {
 		if(typeof defaultValueOrVariables === "object") {

modules/default/helloworld/helloworld.html

@@ -0,0 +1,2 @@
+<div class="small dimmed">HelloWorld module says:</div>
+<div class="normal">{{text}}</div>

modules/default/helloworld/helloworld.js

@@ -14,10 +14,11 @@ Module.register("helloworld",{
 		text: "Hello World!"
 	},
 
-	// Override dom generator.
-	getDom: function() {
-		var wrapper = document.createElement("div");
-		wrapper.innerHTML = this.config.text;
-		return wrapper;
+	getTemplate: function () {
+		return "helloworld.html"
+	},
+
+	getTemplateData: function () {
+		return this.config
 	}
 });