diff --git a/modules/default/alert/alert.js b/modules/default/alert/alert.js index 3628f034..5fd22c12 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 39faacf7..8e033e0d 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,