Merge branch 'develop' into master

CHANGELOG.md

@@ -2,22 +2,28 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## [2.2.3] - 2018-01-06
+## [2.3.0] - Unreleased
 
 ### Added
 
+- Add system notification `MODULE_DOM_CREATED` for notifying each module when their Dom has been fully loaded.
 - Add types for module.
 
+*This release is scheduled to be released on 2018-04-01.*
+
 ## [2.2.2] - 2018-01-02
 
 ### Added
 
 - Add missing `package-lock.json`.
 
+### Changed
+
+- Changed Electron dependency to v1.7.10.
+
 ## [2.2.1] - 2018-01-01
 
 ### Fixed
-
 - Fixed linting errors.
 
 ## [2.2.0] - 2018-01-01

js/main.js

@@ -19,10 +19,10 @@ var MM = (function() {
 	 * are configured for a specific position.
 	 */
 	var createDomObjects = function() {
-		for (var m in modules) {
+		modules.forEach(module => {
-			var module = modules[m];
+			if (typeof module.data.position !== "string") {
-
+				return;
-			if (typeof module.data.position === "string") {
+			}
 
 			var wrapper = selectWrapper(module.data.position);
 
@@ -48,9 +48,10 @@ var MM = (function() {
 			moduleContent.className = "module-content";
 			dom.appendChild(moduleContent);
 
-				updateDom(module, 0);
+			updateDom(module, 0).then(() => {
-			}
+				sendNotification("MODULE_DOM_CREATED", null, null, module);
-		}
+			}).catch(Log.error);
+		});
 
 		updateWrapperStates();
 
@@ -79,11 +80,11 @@ var MM = (function() {
 	 * argument notification string - The identifier of the notification.
 	 * argument payload mixed - The payload of the notification.
 	 * argument sender Module - The module that sent the notification.
+	 * argument sendTo Module - The module to send the notification to. (optional)
 	 */
-	var sendNotification = function(notification, payload, sender) {
+	var sendNotification = function(notification, payload, sender, sendTo) {
-		for (var m in modules) {
+		for (var module of modules) {
-			var module = modules[m];
+			if (module !== sender && (!sendTo || module === sendTo)) {
-			if (module !== sender) {
 				module.notificationReceived(notification, payload, sender);
 			}
 		}
@@ -94,19 +95,53 @@ var MM = (function() {
 	 *
 	 * argument module Module - The module that needs an update.
 	 * argument speed Number - The number of microseconds for the animation. (optional)
+	 *
+	 * return Promise - Resolved when the dom is fully updated.
 	 */
 	var updateDom = function(module, speed) {
-		var newContent = module.getDom();
+		return new Promise((resolve) => {
+			var newContentPromise = module.getDom();
 			var newHeader = module.getHeader();
 
-		if (!module.hidden) {
+			if (!(newContentPromise instanceof Promise)) {
+				// convert to a promise if not already one to avoid if/else's everywhere
+				newContentPromise = Promise.resolve(newContentPromise);
+			}
+
+			newContentPromise.then((newContent) => {
+				var updatePromise = updateDomWithContent(module, speed, newHeader, newContent);
+
+				updatePromise.then(resolve).catch(Log.error);
+			}).catch(Log.error);
+		});
+	};
+
+	/* updateDomWithContent(module, speed, newHeader, newContent)
+	 * Update the dom with the specified content
+	 *
+	 * argument module Module - The module that needs an update.
+	 * argument speed Number - The number of microseconds for the animation. (optional)
+	 * argument newHeader String - The new header that is generated.
+	 * argument newContent Domobject - The new content that is generated.
+	 *
+	 * return Promise - Resolved when the module dom has been updated.
+	 */
+	var updateDomWithContent = function(module, speed, newHeader, newContent) {
+		return new Promise((resolve) => {
+			if (module.hidden || !speed) {
+				updateModuleContent(module, newHeader, newContent);
+				resolve();
+				return;
+			}
 
 			if (!moduleNeedsUpdate(module, newHeader, newContent)) {
+				resolve();
 				return;
 			}
 
 			if (!speed) {
 				updateModuleContent(module, newHeader, newContent);
+				resolve();
 				return;
 			}
 
@@ -115,16 +150,16 @@ var MM = (function() {
 				if (!module.hidden) {
 					showModule(module, speed / 2);
 				}
+				resolve();
+			});
 		});
-		} else {
-			updateModuleContent(module, newHeader, newContent);
-		}
 	};
 
 	/* moduleNeedsUpdate(module, newContent)
 	 * Check if the content has changed.
 	 *
 	 * argument module Module - The module to check.
+	 * argument newHeader String - The new header that is generated.
 	 * argument newContent Domobject - The new content that is generated.
 	 *
 	 * return bool - Does the module need an update?
@@ -152,6 +187,7 @@ var MM = (function() {
 	 * Update the content of a module on screen.
 	 *
 	 * argument module Module - The module to check.
+	 * argument newHeader String - The new header that is generated.
 	 * argument newContent Domobject - The new content that is generated.
 	 */
 	var updateModuleContent = function(module, newHeader, newContent) {

js/module.js

@@ -78,9 +78,10 @@ var Module = Class.extend({
 	 * 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.
+	 * return DomObject | Promise - The dom or a promise with the dom to display.
 	 */
 	getDom: function () {
+		return new Promise((resolve) => {
 			var div = document.createElement("div");
 			var template = this.getTemplate();
 			var templateData = this.getTemplateData();
@@ -93,19 +94,17 @@ var Module = Class.extend({
 						Log.error(err)
 					}
 
-				// 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;
+
+					resolve(div);
 				});
 			} else {
 				// the template is a template string.
 				div.innerHTML = this.nunjucksEnvironment().renderString(template, templateData);
-		}
 
-		return div;
+				resolve(div);
+			}
+		});
 	},
 
 	/* getHeader()

modules/README.md

@@ -230,11 +230,12 @@ notificationReceived: function(notification, payload, sender) {
 }
 ````
 
-**Note:** the system sends two notifications when starting up. These notifications could come in handy!
+**Note:** the system sends three notifications when starting up. These notifications could come in handy!
 
 
 - `ALL_MODULES_STARTED` - All modules are started. You can now send notifications to other modules.
 - `DOM_OBJECTS_CREATED` - All dom objects are created. The system is now ready to perform visual changes.
+- `MODULE_DOM_CREATED` - This module's dom has been fully loaded. You can now access your module's dom objects.
 
 
 #### `socketNotificationReceived: function(notification, payload)`

package-lock.json

@@ -1,9 +1,14 @@
 {
   "name": "magicmirror",
-  "version": "2.2.2",
+  "version": "2.3.0-dev",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@types/node": {
+      "version": "7.0.51",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.51.tgz",
+      "integrity": "sha512-h5u7FnEnG+Fn44HfknTTvu199FzFWVSo97ToSRWvXl1F11UfN6wGnE7exUy23pFfDn+CeluvEoCoe4l2eCVC3g=="
+    },
     "JSV": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/JSV/-/JSV-4.0.2.tgz",
@@ -1335,10 +1340,11 @@
       "dev": true
     },
     "electron": {
-      "version": "1.4.15",
+      "version": "1.7.10",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-1.4.15.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-1.7.10.tgz",
-      "integrity": "sha1-6syv4/Va3gKnRrcGrBS0PbbHzPg=",
+      "integrity": "sha1-Oj6D2WX9f6/kc76N349HJWG2JT0=",
       "requires": {
+        "@types/node": "7.0.51",
         "electron-download": "3.3.0",
         "extract-zip": "1.6.5"
       }
@@ -1456,9 +1462,9 @@
       }
     },
     "es6-promise": {
-      "version": "4.1.1",
+      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.2.tgz",
-      "integrity": "sha512-OaU1hHjgJf+b0NzsxCg7NdIYERD6Hy/PEmFLTjw+b65scuisG3Kt4QoTvJ66BBkPZ581gr0kpoVzKnxniM8nng=="
+      "integrity": "sha512-LSas5vsuA6Q4nEdf9wokY5/AJYXry98i0IzXsv49rYsgDGDNDPbqAYR1Pe23iFxygfbGZNR/5VrHXBCh2BhvUQ=="
     },
     "escape-html": {
       "version": "1.0.3",
@@ -5823,7 +5829,7 @@
       "integrity": "sha1-ebs7RFbdBPGOvbwNcDodHa7FEF0=",
       "requires": {
         "debug": "2.6.7",
-        "es6-promise": "4.1.1"
+        "es6-promise": "4.2.2"
       }
     },
     "supports-color": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "magicmirror",
-  "version": "2.2.2",
+  "version": "2.3.0-dev",
   "description": "The open source modular smart mirror platform.",
   "main": "js/electron.js",
   "scripts": {
@@ -54,7 +54,7 @@
   "dependencies": {
     "body-parser": "^1.18.2",
     "colors": "^1.1.2",
-    "electron": "1.4.15",
+    "electron": "^1.7.10",
     "express": "^4.16.2",
     "express-ipfilter": "0.3.1",
     "feedme": "latest",