MM Default Alert Module Overlay Does not Go Away When Clicked

contactmike1

Hello,

I use MM as a dashboard and not a mirror, so it’s a touch screen. I have a module that is submitting weather alerts to MM using the standard alert functionality. The weather alerts display great using the default module; however, when I click the alert using the touchscreen (to dismiss it), the alert and alert text go away, but the black overlay box does not. So, after I dismiss an alert, I am unable to interact with my touchscreen MM anymore because the black overlay box sits on top of everything, including my menus and page navigation, and so I cannot click on my menus or page navs anymore. I have to either kill the mirror and restart it in the console or wait until the alert timeout limit is reached.

My goal is to configure the alerts to stay up on the screen until they are manually dismissed (w/ a long multiple hour timeout so they don’t last forever), but this isn’t feasible if the overlay will prevent touchscreen access for the duration of the timeout when the alert is manually dismissed. I have looked at the actual JS code, and it appears to be coded so that the alert only goes away after the timeout.

When I touch the alert, the alert box and text do go away on the screen, but I can not locate the code which causes the alert box and text to go away upon touch/click. If I could find the right code section, it would be simple to duplicate the hide alert function to get rid of the overlay. But I can’t figure out what section of code is causing the “click the alert to dismiss” functionality to work. Has anyone done something like this before, or does anyone who actually knows JS code understand how it’s coded? I learned enough JS to install MM and make baby tweaks to things, but it is still difficult for me to understand any code larger than a couple lines.

ashishtank

Hi @contactmike1 I have checked the issue and reproduced it, I can confirm that it is a bug. I will create GitHub issue and will solve it as well.

The issue is because alert.js is not getting call back from Notificationfx.js when it is dismissed by user, In case of timer it is working fine.

Here in code below we are not assigning onClose call back handler (It should also set with right context).

this.alerts[sender.name] = new NotificationFx({
			message: image + message,
			effect: this.config.alert_effect,
			ttl: params.timer,
			al_no: "ns-alert"
		});

Below notification handler is calling the callback when user dismisses it or it is dismissed by code.

NotificationFx.prototype.dismiss = function () {
		this.active = false;
		clearTimeout(this.dismissttl);
		this.ntf.classList.remove("ns-show");
		setTimeout(() => {
			this.ntf.classList.add("ns-hide");

			// callback
			this.options.onClose(); //< -----------
		}, 25);

ashishtank

@contactmike1 Pull request at https://github.com/MichMich/MagicMirror/pull/2229

contactmike1

@ashishtank Hey this is great!

I figured if I was lucky, someone might toss me a snippet to add to my code, but I’m very impressed someone wants to update the Master.

I wasn’t sure if this really amounted to an issue/bug since touchscreen/nav isn’t really the intended use of MM. I’ll pull in the new code once it gets merged. Thanks!

ashishtank

@contactmike1 Sure, if there is a possibility to dismiss the alert by clicking on it then it should work correctly (should hide the overlay as well). More over people are also using MM with touch screen using IR frame so it should any ways work.

You can add below one line in your code in alert.js file if you do not want to wait for merge in master.

//Store alert in this.alerts
		this.alerts[sender.name] = new NotificationFx({
			message: image + message,
			effect: this.config.alert_effect,
			ttl: params.timer,
			onClose: () => this.hide_alert(sender),  //< - add this line, with out this comment
			al_no: "ns-alert"
		});

contactmike1

Thanks Man! I am on holiday, but I will do this when I get back. It will work beautifully now!