Merge pull request #2686 from fewieden/clean-up-alert-module

Clean up alert module

CHANGELOG.md

@@ -17,6 +17,7 @@ _This release is scheduled to be released on 2022-01-01._
 - Cleaned up `updatenotification` module and switched to nunjuck template.
 - Move calendar tests from category `electron` to `e2e`.
 - Update missed translations for Korean language (ko.json)
+- Cleaned up `alert` module and switched to nunjuck template.
 
 ### Fixed
 

modules/default/alert/alert.js

@@ -7,100 +7,97 @@
  * MIT Licensed.
  */
 Module.register("alert", {
+	alerts: {},
+
 	defaults: {
-		// scale|slide|genie|jelly|flip|bouncyflip|exploader
+		effect: "slide", // scale|slide|genie|jelly|flip|bouncyflip|exploader
-		effect: "slide",
+		alert_effect: "jelly", // scale|slide|genie|jelly|flip|bouncyflip|exploader
-		// scale|slide|genie|jelly|flip|bouncyflip|exploader
+		display_time: 3500, // time a notification is displayed in seconds
-		alert_effect: "jelly",
-		//time a notification is displayed in seconds
-		display_time: 3500,
-		//Position
 		position: "center",
-		//shown at startup
+		welcome_message: false // shown at startup
-		welcome_message: false
 	},
-	getScripts: function () {
+
+	getScripts() {
 		return ["notificationFx.js"];
 	},
-	getStyles: function () {
+
-		return ["notificationFx.css", "font-awesome.css"];
+	getStyles() {
+		return ["font-awesome.css", this.file(`./styles/notificationFx.css`), this.file(`./styles/${this.config.position}.css`)];
 	},
-	// Define required translations.
+
-	getTranslations: function () {
+	getTranslations() {
 		return {
-			en: "translations/en.json",
+			bg: "translations/bg.json",
+			da: "translations/da.json",
 			de: "translations/de.json",
-			nl: "translations/nl.json"
+			en: "translations/en.json",
+			es: "translations/es.json",
+			fr: "translations/fr.json",
+			hu: "translations/hu.json",
+			nl: "translations/nl.json",
+			ru: "translations/ru.json"
 		};
 	},
-	show_notification: function (message) {
+
+	getTemplate(type) {
+		return `templates/${type}.njk`;
+	},
+
+	start() {
+		Log.info(`Starting module: ${this.name}`);
+
 		if (this.config.effect === "slide") {
-			this.config.effect = this.config.effect + "-" + this.config.position;
+			this.config.effect = `${this.config.effect}-${this.config.position}`;
 		}
-		let msg = "";
+
-		if (message.title) {
+		if (this.config.welcome_message) {
-			msg += "<span class='thin dimmed medium'>" + message.title + "</span>";
+			const message = this.config.welcome_message === true ? this.translate("welcome") : this.config.welcome_message;
+			this.showNotification({ title: this.translate("sysTitle"), message });
 		}
-		if (message.message) {
+	},
-			if (msg !== "") {
+
-				msg += "<br />";
+	notificationReceived(notification, payload, sender) {
+		if (notification === "SHOW_ALERT") {
+			if (payload.type === "notification") {
+				this.showNotification(payload);
+			} else {
+				this.showAlert(payload, sender);
 			}
-			msg += "<span class='light bright small'>" + message.message + "</span>";
+		} else if (notification === "HIDE_ALERT") {
+			this.hideAlert(sender);
 		}
+	},
+
+	async showNotification(notification) {
+		const message = await this.renderMessage("notification", notification);
 
 		new NotificationFx({
-			message: msg,
+			message,
 			layout: "growl",
 			effect: this.config.effect,
-			ttl: message.timer !== undefined ? message.timer : this.config.display_time
+			ttl: notification.timer || this.config.display_time
 		}).show();
 	},
-	show_alert: function (params, sender) {
-		let image = "";
-		//Set standard params if not provided by module
-		if (typeof params.timer === "undefined") {
-			params.timer = null;
-		}
-		if (typeof params.imageHeight === "undefined") {
-			params.imageHeight = "80px";
-		}
-		if (typeof params.imageUrl === "undefined" && typeof params.imageFA === "undefined") {
-			params.imageUrl = null;
-		} else if (typeof params.imageFA === "undefined") {
-			image = "<img src='" + params.imageUrl.toString() + "' height='" + params.imageHeight.toString() + "' style='margin-bottom: 10px;'/><br />";
-		} else if (typeof params.imageUrl === "undefined") {
-			image = "<span class='bright " + "fa fa-" + params.imageFA + "' style='margin-bottom: 10px;font-size:" + params.imageHeight.toString() + ";'/></span><br />";
-		}
-		//Create overlay
-		const overlay = document.createElement("div");
-		overlay.id = "overlay";
-		overlay.innerHTML += '<div class="black_overlay"></div>';
-		document.body.insertBefore(overlay, document.body.firstChild);
 
+	async showAlert(alert, sender) {
 		// If module already has an open alert close it
 		if (this.alerts[sender.name]) {
-			this.hide_alert(sender, false);
+			this.hideAlert(sender, false);
 		}
 
-		//Display title and message only if they are provided in notification parameters
+		// Add overlay
-		let message = "";
+		if (!Object.keys(this.alerts).length) {
-		if (params.title) {
+			this.toggleBlur(true);
-			message += "<span class='light dimmed medium'>" + params.title + "</span>";
-		}
-		if (params.message) {
-			if (message !== "") {
-				message += "<br />";
 		}
 
-			message += "<span class='thin bright small'>" + params.message + "</span>";
+		const message = await this.renderMessage("alert", alert);
-		}
 
 		// Store alert in this.alerts
 		this.alerts[sender.name] = new NotificationFx({
-			message: image + message,
+			message,
 			effect: this.config.alert_effect,
-			ttl: params.timer,
+			ttl: alert.timer,
-			onClose: () => this.hide_alert(sender),
+			onClose: () => this.hideAlert(sender),
 			al_no: "ns-alert"
 		});
 
@@ -108,60 +105,42 @@ Module.register("alert", {
 		this.alerts[sender.name].show();
 
 		// Add timer to dismiss alert and overlay
-		if (params.timer) {
+		if (alert.timer) {
 			setTimeout(() => {
-				this.hide_alert(sender);
+				this.hideAlert(sender);
-			}, params.timer);
+			}, alert.timer);
 		}
 	},
-	hide_alert: function (sender, close = true) {
+
+	hideAlert(sender, close = true) {
 		// Dismiss alert and remove from this.alerts
 		if (this.alerts[sender.name]) {
 			this.alerts[sender.name].dismiss(close);
-			this.alerts[sender.name] = null;
+			delete this.alerts[sender.name];
 			// Remove overlay
-			const overlay = document.getElementById("overlay");
+			if (!Object.keys(this.alerts).length) {
-			overlay.parentNode.removeChild(overlay);
+				this.toggleBlur(false);
+			}
 		}
 	},
-	setPosition: function (pos) {
+
-		//Add css to body depending on the set position for notifications
+	renderMessage(type, data) {
-		const sheet = document.createElement("style");
+		return new Promise((resolve) => {
-		if (pos === "center") {
+			this.nunjucksEnvironment().render(this.getTemplate(type), data, function (err, res) {
-			sheet.innerHTML = ".ns-box {margin-left: auto; margin-right: auto;text-align: center;}";
+				if (err) {
+					Log.error("Failed to render alert", err);
 				}
-		if (pos === "right") {
+
-			sheet.innerHTML = ".ns-box {margin-left: auto;text-align: right;}";
+				resolve(res);
-		}
+			});
-		if (pos === "left") {
+		});
-			sheet.innerHTML = ".ns-box {margin-right: auto;text-align: left;}";
-		}
-		document.body.appendChild(sheet);
 	},
-	notificationReceived: function (notification, payload, sender) {
+
-		if (notification === "SHOW_ALERT") {
+	toggleBlur(add = false) {
-			if (typeof payload.type === "undefined") {
+		const method = add ? "add" : "remove";
-				payload.type = "alert";
+		const modules = document.querySelectorAll(".module");
+		for (const module of modules) {
+			module.classList[method]("alert-blur");
 		}
-			if (payload.type === "alert") {
-				this.show_alert(payload, sender);
-			} else if (payload.type === "notification") {
-				this.show_notification(payload);
-			}
-		} else if (notification === "HIDE_ALERT") {
-			this.hide_alert(sender);
-		}
-	},
-	start: function () {
-		this.alerts = {};
-		this.setPosition(this.config.position);
-		if (this.config.welcome_message) {
-			if (this.config.welcome_message === true) {
-				this.show_notification({ title: this.translate("sysTitle"), message: this.translate("welcome") });
-			} else {
-				this.show_notification({ title: this.translate("sysTitle"), message: this.config.welcome_message });
-			}
-		}
-		Log.info("Starting module: " + this.name);
 	}
 });

modules/default/alert/styles/center.css

@@ -0,0 +1,5 @@
+.ns-box {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}

modules/default/alert/styles/left.css

@@ -0,0 +1,4 @@
+.ns-box {
+  margin-right: auto;
+  text-align: left;
+}

modules/default/alert/styles/notificationFx.css

@@ -39,12 +39,8 @@
   border-radius: 20px;
 }
 
-.black_overlay {
+.alert-blur {
-  position: fixed;
+  filter: blur(2px) brightness(50%);
-  z-index: 2;
-  background-color: rgba(0, 0, 0, 0.93);
-  width: 100%;
-  height: 100%;
 }
 
 [class^="ns-effect-"].ns-growl.ns-hide,

modules/default/alert/styles/right.css

@@ -0,0 +1,4 @@
+.ns-box {
+  margin-left: auto;
+  text-align: right;
+}

modules/default/alert/templates/alert.njk

@@ -0,0 +1,18 @@
+{% if imageUrl or imageFA %}
+  {% set imageHeight = imageHeight if imageHeight else "80px" %}
+  {% if imageUrl %}
+    <img src="{{ imageUrl }}" height="{{ imageHeight }}" style="margin-bottom: 10px;"/>
+  {% else %}
+    <span class="bright fa fa-{{ imageFA }}" style='margin-bottom: 10px; font-size: {{ imageHeight }};'/></span>
+  {% endif %}
+  <br/>
+{% endif %}
+{% if title %}
+  <span class="thin dimmed medium">{{ title }}</span>
+{% endif %}
+{% if message %}
+  {% if title %}
+    <br/>
+  {% endif %}
+  <span class="light bright small">{{ message }}</span>
+{% endif %}

modules/default/alert/templates/notification.njk

@@ -0,0 +1,9 @@
+{% if title %}
+  <span class="thin dimmed medium">{{ title }}</span>
+{% endif %}
+{% if message %}
+  {% if title %}
+    <br/>
+  {% endif %}
+  <span class="light bright small">{{ message }}</span>
+{% endif %}