Merge branch 'templates' into develop

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=="
+    }
+  }
+}

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,31 @@ 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 div = document.createElement("div");
-		div.appendChild(nameWrapper);
+		var template = this.getTemplate();
-		div.appendChild(identifierWrapper);
+		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
+			this.nunjucksEnvironment().render(template, templateData, function (err, res) {
+				// The inner content of the div will be set after the template is received.
+				// This isn't the most optimal way, but since it's near instant
+				// it probably won't be an issue.
+				// If it gives problems, we can always add a way to pre fetch the templates.
+				// Let's not over optimise this ... KISS! :)
+				div.innerHTML = res;
+			});
+		} else {
+			// the template is a template string.
+			div.innerHTML = this.nunjucksEnvironment().renderString(template, templateData);
+		}
 
 		return div;
 	},
@@ -102,6 +115,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 +153,27 @@ var Module = Class.extend({
 		}
 	},
 
+	/** nunjucksEnvironment()
+	 * Returns the nunjucks environment for the current module.
+	 * The environment is checked in the _nunjucksEnvironment instance variable.
+	 * 
+	 * @returns Nunjucks Environment
+	 */
+	nunjucksEnvironment: function() {
+		if (this._nunjucksEnvironment != null) {
+			return this._nunjucksEnvironment;
+		}
+
+		var self = this;
+
+		this._nunjucksEnvironment = new nunjucks.Environment(new nunjucks.WebLoader(this.file(""), {async: true}));
+		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 +332,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 defaultValueOrVariables string/object - The default value or variables for translating. (Optional)
-   * argument defaultValue string - The default value with variables. (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,5 @@
+<!--
+	Use | striptags(true) for HTML rendering
+	https://mozilla.github.io/nunjucks/templating.html#striptags-value-preserve_linebreaks
+-->
+<div class="normal">{{text | striptags(true)}}</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;}