Add true module dom creation events

js/main.js

@@ -96,17 +96,44 @@ var MM = (function() {
 	 * argument speed Number - The number of microseconds for the animation. (optional)
 	 */
 	var updateDom = function(module, speed) {
-		var newContent = module.getDom();
+		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(() => {
+				// dom has been updated
+				sendNotification("MODULE_DOM_CREATED", { module: module.name });
+			}).catch((err) => {
+				Log.error(err);
+			});
+		}).catch((err) => {
+			Log.error(err);
+		});
+	};
+
+	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,10 +142,9 @@ var MM = (function() {
 				if (!module.hidden) {
 					showModule(module, speed / 2);
 				}
+				resolve();
+			});
 		});
-		} else {
-			updateModuleContent(module, newHeader, newContent);
-		}
 	};
 
 	/* moduleNeedsUpdate(module, newContent)

js/module.js

@@ -81,6 +81,7 @@ var Module = Class.extend({
 	 * return domobject - 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()