First Nunchucks Implementation.

fonts/package-lock.json

@@ -0,0 +1,12 @@
+{
+  "name": "magicmirror-fonts",
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "roboto-fontface": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.8.0.tgz",
+      "integrity": "sha512-ZYzRkETgBrdEGzL5JSKimvjI2CX7ioyZCkX2BpcfyjqI+079W0wHAyj5W4rIZMcDSOHgLZtgz1IdDi/vU77KEQ=="
+    }
+  }
+}

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 template = this.getTemplate();
-		var name = document.createTextNode(this.name);
+		var templateData = this.getTemplateData();
-		nameWrapper.appendChild(name);
 
-		var identifierWrapper = document.createElement("div");
+		// Check to see if we need to render a template string or a file.
-		var identifier = document.createTextNode(this.identifier);
+		if (/^.*(\.html)$/.test(template)) {
-		identifierWrapper.appendChild(identifier);
+			// the template is a filename
-		identifierWrapper.className = "small dimmed";
+			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.
 	 *

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.
+	getTemplate: function () {
-	getDom: function() {
+		return "helloworld.html"
-		var wrapper = document.createElement("div");
+	},
-		wrapper.innerHTML = this.config.text;
+
-		return wrapper;
+	getTemplateData: function () {
+		return this.config
 	}
 });

vendor/package.json

@@ -13,6 +13,7 @@
     "font-awesome": "^4.7.0",
     "moment": "^2.17.1",
     "moment-timezone": "^0.5.11",
+    "nunjucks": "^3.0.1",
     "weathericons": "^2.1.0"
   }
 }

vendor/vendor.js

@@ -12,7 +12,8 @@ var vendor = {
 	"moment-timezone.js" : "node_modules/moment-timezone/builds/moment-timezone-with-data.js",
 	"weather-icons.css": "node_modules/weathericons/css/weather-icons.css",
 	"weather-icons-wind.css": "node_modules/weathericons/css/weather-icons-wind.css",
-	"font-awesome.css": "node_modules/font-awesome/css/font-awesome.min.css"
+	"font-awesome.css": "node_modules/font-awesome/css/font-awesome.min.css",
+	"nunjucks.js": "node_modules/nunjucks/browser/nunjucks.min.js"
 };
 
 if (typeof module !== "undefined"){module.exports = vendor;}