diff --git a/CHANGELOG.md b/CHANGELOG.md index 195fd93ffa..b112cb2a45 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index 2e471ac15a..0ed34fb0dc 100644 --- a/modules/default/alert/alert.js +++ b/modules/default/alert/alert.js @@ -7,161 +7,140 @@ * MIT Licensed. */ Module.register("alert", { + alerts: {}, + defaults: { - // scale|slide|genie|jelly|flip|bouncyflip|exploader - effect: "slide", - // scale|slide|genie|jelly|flip|bouncyflip|exploader - alert_effect: "jelly", - //time a notification is displayed in seconds - display_time: 3500, - //Position + effect: "slide", // scale|slide|genie|jelly|flip|bouncyflip|exploader + alert_effect: "jelly", // scale|slide|genie|jelly|flip|bouncyflip|exploader + display_time: 3500, // time a notification is displayed in seconds position: "center", - //shown at startup - welcome_message: false + welcome_message: false // shown at startup }, - 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) { - msg += "" + message.title + ""; + + if (this.config.welcome_message) { + 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 += "
"; + }, + + notificationReceived(notification, payload, sender) { + if (notification === "SHOW_ALERT") { + if (payload.type === "notification") { + this.showNotification(payload); + } else { + this.showAlert(payload, sender); } - msg += "" + message.message + ""; + } 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 = "
"; - } else if (typeof params.imageUrl === "undefined") { - image = "
"; - } - //Create overlay - const overlay = document.createElement("div"); - overlay.id = "overlay"; - overlay.innerHTML += '
'; - document.body.insertBefore(overlay, document.body.firstChild); - //If module already has an open alert close it + 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 - let message = ""; - if (params.title) { - message += "" + params.title + ""; + // Add overlay + if (!Object.keys(this.alerts).length) { + this.toggleBlur(true); } - if (params.message) { - if (message !== "") { - message += "
"; - } - message += "" + params.message + ""; - } + const message = await this.renderMessage("alert", alert); - //Store alert in this.alerts + // Store alert in this.alerts this.alerts[sender.name] = new NotificationFx({ - message: image + message, + message, effect: this.config.alert_effect, - ttl: params.timer, - onClose: () => this.hide_alert(sender), + ttl: alert.timer, + onClose: () => this.hideAlert(sender), al_no: "ns-alert" }); - //Show alert + // Show alert this.alerts[sender.name].show(); - //Add timer to dismiss alert and overlay - if (params.timer) { + // Add timer to dismiss alert and overlay + if (alert.timer) { setTimeout(() => { - this.hide_alert(sender); - }, params.timer); + this.hideAlert(sender); + }, alert.timer); } }, - hide_alert: function (sender, close = true) { - //Dismiss alert and remove from this.alerts + + 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; - //Remove overlay - const overlay = document.getElementById("overlay"); - overlay.parentNode.removeChild(overlay); - } - }, - setPosition: function (pos) { - //Add css to body depending on the set position for notifications - const sheet = document.createElement("style"); - if (pos === "center") { - sheet.innerHTML = ".ns-box {margin-left: auto; margin-right: auto;text-align: center;}"; - } - if (pos === "right") { - sheet.innerHTML = ".ns-box {margin-left: auto;text-align: right;}"; - } - 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") { - if (typeof payload.type === "undefined") { - payload.type = "alert"; + delete this.alerts[sender.name]; + // Remove overlay + if (!Object.keys(this.alerts).length) { + this.toggleBlur(false); } - 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 }); - } + + renderMessage(type, data) { + return new Promise((resolve) => { + this.nunjucksEnvironment().render(this.getTemplate(type), data, function (err, res) { + if (err) { + Log.error("Failed to render alert", err); + } + + resolve(res); + }); + }); + }, + + toggleBlur(add = false) { + const method = add ? "add" : "remove"; + const modules = document.querySelectorAll(".module"); + for (const module of modules) { + module.classList[method]("alert-blur"); } - Log.info("Starting module: " + this.name); } }); diff --git a/modules/default/alert/styles/center.css b/modules/default/alert/styles/center.css new file mode 100644 index 0000000000..4e8f5e1d6b --- /dev/null +++ b/modules/default/alert/styles/center.css @@ -0,0 +1,5 @@ +.ns-box { + margin-left: auto; + margin-right: auto; + text-align: center; +} diff --git a/modules/default/alert/styles/left.css b/modules/default/alert/styles/left.css new file mode 100644 index 0000000000..86d2746c09 --- /dev/null +++ b/modules/default/alert/styles/left.css @@ -0,0 +1,4 @@ +.ns-box { + margin-right: auto; + text-align: left; +} diff --git a/modules/default/alert/notificationFx.css b/modules/default/alert/styles/notificationFx.css similarity index 99% rename from modules/default/alert/notificationFx.css rename to modules/default/alert/styles/notificationFx.css index 39faacf7dd..8e033e0d61 100644 --- a/modules/default/alert/notificationFx.css +++ b/modules/default/alert/styles/notificationFx.css @@ -39,12 +39,8 @@ border-radius: 20px; } -.black_overlay { - position: fixed; - z-index: 2; - background-color: rgba(0, 0, 0, 0.93); - width: 100%; - height: 100%; +.alert-blur { + filter: blur(2px) brightness(50%); } [class^="ns-effect-"].ns-growl.ns-hide, diff --git a/modules/default/alert/styles/right.css b/modules/default/alert/styles/right.css new file mode 100644 index 0000000000..add9b6f1f5 --- /dev/null +++ b/modules/default/alert/styles/right.css @@ -0,0 +1,4 @@ +.ns-box { + margin-left: auto; + text-align: right; +} diff --git a/modules/default/alert/templates/alert.njk b/modules/default/alert/templates/alert.njk new file mode 100644 index 0000000000..5592ea3562 --- /dev/null +++ b/modules/default/alert/templates/alert.njk @@ -0,0 +1,18 @@ +{% if imageUrl or imageFA %} + {% set imageHeight = imageHeight if imageHeight else "80px" %} + {% if imageUrl %} + + {% else %} + + {% endif %} +
+{% endif %} +{% if title %} + {{ title }} +{% endif %} +{% if message %} + {% if title %} +
+ {% endif %} + {{ message }} +{% endif %} diff --git a/modules/default/alert/templates/notification.njk b/modules/default/alert/templates/notification.njk new file mode 100644 index 0000000000..1d67bcda7d --- /dev/null +++ b/modules/default/alert/templates/notification.njk @@ -0,0 +1,9 @@ +{% if title %} + {{ title }} +{% endif %} +{% if message %} + {% if title %} +
+ {% endif %} + {{ message }} +{% endif %}