Merge branch 'develop' into master

CHANGELOG.md

@@ -2,9 +2,21 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2.2.0] - Unreleased
+
+**Note:** This update uses new dependencies. Please update using the following command: `git pull && npm install`
+
 ### Changed
 - calender week is now handled with a variable translation in order to move number language specific
 
+### Added
+- Add option to use [Nunjucks](https://mozilla.github.io/nunjucks/) templates in modules. (See `helloworld` module as an example.)
+
+### Updated
+
+### Fixed
+- Fixed issue with calendar module showing more than `maximumEntries` allows
+
 ## [2.1.3] - 2017-10-01
 
 **Note:** This update uses new dependencies. Please update using the following command: `git pull && npm install`

README.md

@@ -122,7 +122,7 @@ The following properties can be configured:
 | **Option** | **Description** |
 | --- | --- |
 | `port` | The port on which the MagicMirror² server will run on. The default value is `8080`. |
-| `address` | The ip address the accept connections. The  default open bind `::` is IPv6 is available or `0.0.0.0` IPv4 run on.  Example config: `192.168.10.100`. |
+| `address` | The ip address the accept connections. The  default open bind `localhost`.  Example config: `192.168.10.100`. |
 | `ipWhitelist` | The list of IPs from which you are allowed to access the MagicMirror². The default value is `["127.0.0.1", "::ffff:127.0.0.1", "::1"]`. It is possible to specify IPs with subnet masks (`["127.0.0.1", "127.0.0.1/24"]`) or define ip ranges (`["127.0.0.1", ["192.168.0.1", "192.168.0.100"]]`). Set `[]` to allow all IP addresses. For more information about how configure this directive see the [follow post ipWhitelist HowTo](https://forum.magicmirror.builders/topic/1326/ipwhitelist-howto) |
 | `zoom` | This allows to scale the mirror contents with a given zoom factor. The default value is `1.0`|
 | `language` | The language of the interface. (Note: Not all elements will be localized.) Possible values are `en`, `nl`, `ru`, `fr`, etc., but the default value is `en`. |

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/calendar/calendar.js

@@ -356,7 +356,7 @@ Module.register("calendar", {
 			return a.startDate - b.startDate;
 		});
 
-		return events;
+		return events.slice(0, this.config.maximumEntries);
 	},
 
 	/* createEventList(url)

modules/default/helloworld/helloworld.html

@@ -0,0 +1,5 @@
+<!--
+	Use ` | safe` to allow html tages within the text string.
+	https://mozilla.github.io/nunjucks/templating.html#autoescaping
+-->
+<div>{{text | safe}}</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
 	}
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "magicmirror",
-  "version": "2.1.3",
+  "version": "2.2.0-dev",
   "description": "The open source modular smart mirror platform.",
   "main": "js/electron.js",
   "scripts": {

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;}