From 1b9f8c23d219f0986fc3b670d4b9baebf17788f9 Mon Sep 17 00:00:00 2001 From: Felix Wiedenbach Date: Fri, 15 Oct 2021 06:03:51 +0200 Subject: [PATCH 01/11] shorthand camelcase functions --- modules/default/alert/alert.js | 44 ++++++++++++++++++++-------------- 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index 2e471ac15a..1d8bcbd97d 100644 --- a/modules/default/alert/alert.js +++ b/modules/default/alert/alert.js @@ -19,21 +19,24 @@ Module.register("alert", { //shown at startup welcome_message: false }, - getScripts: function () { + + getScripts() { return ["notificationFx.js"]; }, - getStyles: function () { + + getStyles() { return ["notificationFx.css", "font-awesome.css"]; }, - // Define required translations. - getTranslations: function () { + + getTranslations() { return { en: "translations/en.json", de: "translations/de.json", nl: "translations/nl.json" }; }, - show_notification: function (message) { + + showNotification(message) { if (this.config.effect === "slide") { this.config.effect = this.config.effect + "-" + this.config.position; } @@ -55,7 +58,8 @@ Module.register("alert", { ttl: message.timer !== undefined ? message.timer : this.config.display_time }).show(); }, - show_alert: function (params, sender) { + + showAlert(params, sender) { let image = ""; //Set standard params if not provided by module if (typeof params.timer === "undefined") { @@ -79,7 +83,7 @@ Module.register("alert", { //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 @@ -100,7 +104,7 @@ Module.register("alert", { message: image + message, effect: this.config.alert_effect, ttl: params.timer, - onClose: () => this.hide_alert(sender), + onClose: () => this.hideAlert(sender), al_no: "ns-alert" }); @@ -110,11 +114,12 @@ Module.register("alert", { //Add timer to dismiss alert and overlay if (params.timer) { setTimeout(() => { - this.hide_alert(sender); + this.hideAlert(sender); }, params.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); @@ -124,7 +129,8 @@ Module.register("alert", { overlay.parentNode.removeChild(overlay); } }, - setPosition: function (pos) { + + setPosition(pos) { //Add css to body depending on the set position for notifications const sheet = document.createElement("style"); if (pos === "center") { @@ -138,28 +144,30 @@ Module.register("alert", { } document.body.appendChild(sheet); }, - notificationReceived: function (notification, payload, sender) { + + notificationReceived(notification, payload, sender) { if (notification === "SHOW_ALERT") { if (typeof payload.type === "undefined") { payload.type = "alert"; } if (payload.type === "alert") { - this.show_alert(payload, sender); + this.showAlert(payload, sender); } else if (payload.type === "notification") { - this.show_notification(payload); + this.showNotification(payload); } } else if (notification === "HIDE_ALERT") { - this.hide_alert(sender); + this.hideAlert(sender); } }, - start: function () { + + start() { 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") }); + this.showNotification({ title: this.translate("sysTitle"), message: this.translate("welcome") }); } else { - this.show_notification({ title: this.translate("sysTitle"), message: this.config.welcome_message }); + this.showNotification({ title: this.translate("sysTitle"), message: this.config.welcome_message }); } } Log.info("Starting module: " + this.name); From b3bb829e4d505e7a0b78d130dc122b5a53e1c3b3 Mon Sep 17 00:00:00 2001 From: Felix Wiedenbach Date: Fri, 15 Oct 2021 06:05:06 +0200 Subject: [PATCH 02/11] fix missing translation files --- modules/default/alert/alert.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index 1d8bcbd97d..32aca16e37 100644 --- a/modules/default/alert/alert.js +++ b/modules/default/alert/alert.js @@ -30,9 +30,15 @@ Module.register("alert", { 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" }; }, From 3695e64ce9ceb2b81de575d94611590c7c2d146f Mon Sep 17 00:00:00 2001 From: Felix Wiedenbach Date: Fri, 15 Oct 2021 06:11:24 +0200 Subject: [PATCH 03/11] migrate set position DOM manipulation to css --- modules/default/alert/alert.js | 18 +----------------- modules/default/alert/styles/center.css | 5 +++++ modules/default/alert/styles/left.css | 4 ++++ modules/default/alert/styles/right.css | 4 ++++ 4 files changed, 14 insertions(+), 17 deletions(-) create mode 100644 modules/default/alert/styles/center.css create mode 100644 modules/default/alert/styles/left.css create mode 100644 modules/default/alert/styles/right.css diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index 32aca16e37..f3cb574f06 100644 --- a/modules/default/alert/alert.js +++ b/modules/default/alert/alert.js @@ -25,7 +25,7 @@ Module.register("alert", { }, getStyles() { - return ["notificationFx.css", "font-awesome.css"]; + return ["notificationFx.css", "font-awesome.css", this.file(`./styles/${this.config.position}.css`)]; }, getTranslations() { @@ -136,21 +136,6 @@ Module.register("alert", { } }, - setPosition(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(notification, payload, sender) { if (notification === "SHOW_ALERT") { if (typeof payload.type === "undefined") { @@ -168,7 +153,6 @@ Module.register("alert", { start() { this.alerts = {}; - this.setPosition(this.config.position); if (this.config.welcome_message) { if (this.config.welcome_message === true) { this.showNotification({ title: this.translate("sysTitle"), message: this.translate("welcome") }); 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/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; +} From 460a9fc5f7b15293a9fb30995b2ad330c13e19fb Mon Sep 17 00:00:00 2001 From: Felix Wiedenbach Date: Fri, 15 Oct 2021 06:14:45 +0200 Subject: [PATCH 04/11] move notification effect override into start function --- modules/default/alert/alert.js | 41 +++++++++++++++------------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index f3cb574f06..cb4eba6ce3 100644 --- a/modules/default/alert/alert.js +++ b/modules/default/alert/alert.js @@ -7,17 +7,14 @@ * 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() { @@ -42,10 +39,20 @@ Module.register("alert", { }; }, - showNotification(message) { + 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}`; } + + 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 }); + } + }, + + showNotification(message) { let msg = ""; if (message.title) { msg += "" + message.title + ""; @@ -149,17 +156,5 @@ Module.register("alert", { } else if (notification === "HIDE_ALERT") { this.hideAlert(sender); } - }, - - start() { - this.alerts = {}; - if (this.config.welcome_message) { - if (this.config.welcome_message === true) { - this.showNotification({ title: this.translate("sysTitle"), message: this.translate("welcome") }); - } else { - this.showNotification({ title: this.translate("sysTitle"), message: this.config.welcome_message }); - } - } - Log.info("Starting module: " + this.name); } }); From 026e624e2371473586dd8b0b78225c3a7de3970b Mon Sep 17 00:00:00 2001 From: Felix Wiedenbach Date: Fri, 15 Oct 2021 06:17:03 +0200 Subject: [PATCH 05/11] use alert as default in notificationReceived --- modules/default/alert/alert.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index cb4eba6ce3..703c8034c5 100644 --- a/modules/default/alert/alert.js +++ b/modules/default/alert/alert.js @@ -145,13 +145,10 @@ Module.register("alert", { notificationReceived(notification, payload, sender) { if (notification === "SHOW_ALERT") { - if (typeof payload.type === "undefined") { - payload.type = "alert"; - } - if (payload.type === "alert") { - this.showAlert(payload, sender); - } else if (payload.type === "notification") { + if (payload.type === "notification") { this.showNotification(payload); + } else { + this.showAlert(payload, sender); } } else if (notification === "HIDE_ALERT") { this.hideAlert(sender); From 467720f1c45f50ff70395309bb58a62d8368fc16 Mon Sep 17 00:00:00 2001 From: Felix Wiedenbach Date: Fri, 15 Oct 2021 06:23:50 +0200 Subject: [PATCH 06/11] migrate manual DOM creation for notifications to nunjuck template --- modules/default/alert/alert.js | 33 +++++++++++-------- .../default/alert/templates/notification.njk | 9 +++++ 2 files changed, 29 insertions(+), 13 deletions(-) create mode 100644 modules/default/alert/templates/notification.njk diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index 703c8034c5..395857e0a9 100644 --- a/modules/default/alert/alert.js +++ b/modules/default/alert/alert.js @@ -39,6 +39,10 @@ Module.register("alert", { }; }, + getTemplate(type) { + return `templates/${type}.njk`; + }, + start() { Log.info(`Starting module: ${this.name}`); @@ -52,23 +56,14 @@ Module.register("alert", { } }, - showNotification(message) { - let msg = ""; - if (message.title) { - msg += "" + message.title + ""; - } - if (message.message) { - if (msg !== "") { - msg += "
"; - } - msg += "" + message.message + ""; - } + 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(); }, @@ -143,6 +138,18 @@ Module.register("alert", { } }, + 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); + }); + }); + }, + notificationReceived(notification, payload, sender) { if (notification === "SHOW_ALERT") { if (payload.type === "notification") { 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 %} From 8f5ee9466a985d1a7b4536776f83632b60ec814f Mon Sep 17 00:00:00 2001 From: Felix Wiedenbach Date: Fri, 15 Oct 2021 06:26:23 +0200 Subject: [PATCH 07/11] move notificationFx styles into styles directory --- modules/default/alert/alert.js | 2 +- modules/default/alert/{ => styles}/notificationFx.css | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename modules/default/alert/{ => styles}/notificationFx.css (100%) diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index 395857e0a9..5baacc7e56 100644 --- a/modules/default/alert/alert.js +++ b/modules/default/alert/alert.js @@ -22,7 +22,7 @@ Module.register("alert", { }, getStyles() { - return ["notificationFx.css", "font-awesome.css", this.file(`./styles/${this.config.position}.css`)]; + return ["font-awesome.css", this.file(`./styles/notificationFx.css`), this.file(`./styles/${this.config.position}.css`)]; }, getTranslations() { diff --git a/modules/default/alert/notificationFx.css b/modules/default/alert/styles/notificationFx.css similarity index 100% rename from modules/default/alert/notificationFx.css rename to modules/default/alert/styles/notificationFx.css From 75cf1d610e7e408189e1be03d927a594ad670dc0 Mon Sep 17 00:00:00 2001 From: Felix Wiedenbach Date: Fri, 15 Oct 2021 06:31:07 +0200 Subject: [PATCH 08/11] migrate manual DOM creation for alerts to nunjuck template --- modules/default/alert/alert.js | 38 ++++------------------- modules/default/alert/templates/alert.njk | 18 +++++++++++ 2 files changed, 24 insertions(+), 32 deletions(-) create mode 100644 modules/default/alert/templates/alert.njk diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index 5baacc7e56..3628f03497 100644 --- a/modules/default/alert/alert.js +++ b/modules/default/alert/alert.js @@ -67,22 +67,7 @@ Module.register("alert", { }).show(); }, - showAlert(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 = "
"; - } + async showAlert(alert, sender) { //Create overlay const overlay = document.createElement("div"); overlay.id = "overlay"; @@ -94,24 +79,13 @@ Module.register("alert", { this.hideAlert(sender, false); } - //Display title and message only if they are provided in notification parameters - let message = ""; - if (params.title) { - message += "" + params.title + ""; - } - if (params.message) { - if (message !== "") { - message += "
"; - } - - message += "" + params.message + ""; - } + 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.hideAlert(sender), al_no: "ns-alert" }); @@ -120,10 +94,10 @@ Module.register("alert", { this.alerts[sender.name].show(); //Add timer to dismiss alert and overlay - if (params.timer) { + if (alert.timer) { setTimeout(() => { this.hideAlert(sender); - }, params.timer); + }, alert.timer); } }, 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 %} From 15fd2021bb04b357e979c98dc849695a3947331e Mon Sep 17 00:00:00 2001 From: Felix Wiedenbach Date: Fri, 15 Oct 2021 06:43:53 +0200 Subject: [PATCH 09/11] blur modules instead of black overlay --- modules/default/alert/alert.js | 38 +++++++++++-------- .../default/alert/styles/notificationFx.css | 8 +--- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index 3628f03497..5fd22c1211 100644 --- a/modules/default/alert/alert.js +++ b/modules/default/alert/alert.js @@ -68,20 +68,19 @@ Module.register("alert", { }, async showAlert(alert, sender) { - //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 + // If module already has an open alert close it if (this.alerts[sender.name]) { this.hideAlert(sender, false); } + // Add overlay + if (!Object.keys(this.alerts).length) { + this.toggleBlur(true); + } + const message = await this.renderMessage("alert", alert); - //Store alert in this.alerts + // Store alert in this.alerts this.alerts[sender.name] = new NotificationFx({ message, effect: this.config.alert_effect, @@ -90,10 +89,10 @@ Module.register("alert", { al_no: "ns-alert" }); - //Show alert + // Show alert this.alerts[sender.name].show(); - //Add timer to dismiss alert and overlay + // Add timer to dismiss alert and overlay if (alert.timer) { setTimeout(() => { this.hideAlert(sender); @@ -102,13 +101,14 @@ Module.register("alert", { }, hideAlert(sender, close = true) { - //Dismiss alert and remove from this.alerts + // 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); + delete this.alerts[sender.name]; + // Remove overlay + if (!Object.keys(this.alerts).length) { + this.toggleBlur(false); + } } }, @@ -124,6 +124,14 @@ Module.register("alert", { }); }, + toggleBlur(add = false) { + const method = add ? "add" : "remove"; + const modules = document.querySelectorAll(".module"); + for (const module of modules) { + module.classList[method]("alert-blur"); + } + }, + notificationReceived(notification, payload, sender) { if (notification === "SHOW_ALERT") { if (payload.type === "notification") { diff --git a/modules/default/alert/styles/notificationFx.css b/modules/default/alert/styles/notificationFx.css index 39faacf7dd..8e033e0d61 100644 --- a/modules/default/alert/styles/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, From f9c4a3a9c0586602392a91206400faeeb3b56b32 Mon Sep 17 00:00:00 2001 From: Felix Wiedenbach Date: Fri, 15 Oct 2021 06:44:58 +0200 Subject: [PATCH 10/11] updated CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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 From d0cc0a4034bfcaed8c0b98d51c23f1891345e488 Mon Sep 17 00:00:00 2001 From: Felix Wiedenbach Date: Fri, 15 Oct 2021 06:50:54 +0200 Subject: [PATCH 11/11] move notificationReceived --- modules/default/alert/alert.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index 5fd22c1211..0ed34fb0dc 100644 --- a/modules/default/alert/alert.js +++ b/modules/default/alert/alert.js @@ -56,6 +56,18 @@ Module.register("alert", { } }, + notificationReceived(notification, payload, sender) { + if (notification === "SHOW_ALERT") { + if (payload.type === "notification") { + this.showNotification(payload); + } else { + this.showAlert(payload, sender); + } + } else if (notification === "HIDE_ALERT") { + this.hideAlert(sender); + } + }, + async showNotification(notification) { const message = await this.renderMessage("notification", notification); @@ -130,17 +142,5 @@ Module.register("alert", { for (const module of modules) { module.classList[method]("alert-blur"); } - }, - - notificationReceived(notification, payload, sender) { - if (notification === "SHOW_ALERT") { - if (payload.type === "notification") { - this.showNotification(payload); - } else { - this.showAlert(payload, sender); - } - } else if (notification === "HIDE_ALERT") { - this.hideAlert(sender); - } } });