MMM-Modal

strawberry 3.141

I tweaked my modal that I’m using in some of my modules. Instead of duplicating this all over the place I created a new module for a single source of truth and so it can also be used by other devs/users.

[card:fewieden/MMM-Modal]

Modal and dialog windows with touch, voice and non input support.

I just started building it so it might still have some bugs.

Developer Guide

cowboysdude

strawberry 3.141

[1.0.1]

Fixed

Modal positioning
Blur on render error

Added

List of depending modules
Callback option after render for developers

Changed

ESLint ruleset from airbnb to recommended
Moved nunjuck templates in separate directory
node versions for travis

Removed

doclet integration

https://github.com/fewieden/MMM-Modal

[card:fewieden/MMM-Modal]

skuethe

I really like this module, especially with touch screen usage.
The implementation is easy but still very powerful.

F.e. I added support for the following two modules:

In MMM-Spotify it is used to display account / device selection popups on screen. The available callback payload function makes this work in the first place, as we (of course) need to react on the made user selections :)

So again, great module, thanks!

strawberry 3.141

With MMM-ip another module has now integrated the modals. See the full list at https://github.com/fewieden/MMM-Modal/wiki/Depending-Modules

strawberry 3.141

With MMM-soccer another module has now integrated the modals.

Standings modal

See the full list at https://github.com/fewieden/MMM-Modal/wiki/Depending-Modules

A Former User

This post is deleted!

sdetweil

@hango said in MMM-Modal:

template: “templates/MyModal.njk”,

I think u need

template: "../modulename/templates/MyModal.njk",

to make it relative to your module
instead of the modal module

skuethe

@hango said in MMM-Modal:

I make my modal:

this.sendNotification("OPEN_MODAL", {
	template: "templates/MyModal.njk",
	data: {
		title: "Test modal",
		message: "Test message"
	},
	options: {
		isDialog: true
	}
});

in console I get this:

nunjucks.min.js:4 GET http://localhost:8081/modules//modal/templates/modal.njk?s=1634300311396 404 (Not Found)

templates/MyModal.njk doesn’t really fit with the error message templates/modal.njk?! Sure you have specified the correct path?
Referencing it to within your module path works just fine: template: "templates/MyModal.njk",

If this is possible…

That seems a bit rude. Just look at the linked modules in this thread which have this implemented successfully.

A Former User

This post is deleted!

A Former User

This post is deleted!

sdetweil

@hango is a bug, doesn’t use the template name

edit the MMM-Modal.js , add the one line below after line 236

            if (!sender) {
                modal = {
                    identifier: this.identifier,
                    senderName: this.name,
                    template: 'templates/HelpModal.njk',
                    data: this.voice,
                    options: {}
                }
            } else {
                modal.senderName = sender.name;
                modal.identifier = sender.identifier;
                modal.options = modal.options || {};
                modal.data = modal.data || {};
                modal.template:  modal.template || 'templates/HelpModal.njk',  // add this line
            }

strawberry 3.141

@hango I responded with an MVP of a custom module using the modal in the related Github issue https://github.com/fewieden/MMM-Modal/issues/17

strawberry 3.141

With MMM-NFL another module has now integrated the modals.

Statistic modal

See the full list at https://github.com/fewieden/MMM-Modal/wiki/Depending-Modules