Meteor-Materialize-Modal

A pattern to display application modal dialogs via Materialize, written in coffeescript.

Demo Site

Warning: Only tested on Meteor 1.2+

Note

Before submitting an issue please make sure that the issue is not a problem in materializecss. All the CSS except for the full screen modal is pulled from the materializecss framework and we try not to fix issues with that framework in this package.

Version 1.0 Changes

• The callbacks have changed form in version 1.0 to reflect the 'node way'. So you need to change your callback from callback(yesNo, ...) to callback(error, rtn). yesNo is now at rtn.submit! If you don't have time to make the change lock your package at the 0.4.0 version meteor add pfafman:materialize-modal@=0.4.0

• There is now a very good example site done by @msolters, who also did the refractoring work for version 1.0. and added new modals!

Install

meteor add meteorstuff:materialize-modal

or for the old callback version

meteor add meteorstuff:materialize-modal@=0.4.0

You are required to get Materialize on your own, either from a package or inserting it manually into your meteor app. This allows you to either use a CSS or SASS version for more customization.

Usage

	MaterializeModal.[message|alert|error|confirm|prompt|form|loading|progress](options={})

Options

• title - modal title. Can have HTML markup
• label - Strong label in front of body
• message - message body. Can have HTML markup
• placeholder - If prompt then the placehoder for the text field
• callback(error, rtn) - callback function with
  • rtn.submit - bool true if the user hit the OK/Submit button
  • rtn.value - applicable data object key:value
• dismissible - (bool) If false, modal will not close when the user clicks the background.
• bodyTemplate - Name of the template to use as the body for the modal.
• icon - Markup for the icon to display
• closeLabel - Text for close/dismiss button
• submitLabel - Text for ok/submit button
• fixedFooter - (bool) true if you want to use a fixed footer
• bottomSheet - (bool) true if you want a bottom sheet modal
• fullscreen - (bool) Modal takes up all the full screen
• opacity - (int) Opacity of modal background default 0.5
• inDuration - (int) Transition in duration default 200
• outDuration - (int) Transition out duration default 0 for fullscreen 300 otherwise
• ready - function() Callback for Modal open

UI

You can change the UI by overwriting the CSS.

.materialize-modal {
  // See source for all the css vars
}

Examples

To display a modal

1
2MaterializeModal.message
3    title: 'Title'
4    message: 'some message'
5    
6MaterializeModal.alert
7    message: 'some message'
8
9MaterializeModal.error
10    message: 'some message'
11
12MaterializeModal.confirm
13    title: 'title'
14    message: 'You feeling groovy?'
15    callback: (error, rtn) ->
16    	if rtn?.submit
17    	    Materialize.toast("Glad to here it!", 3000, 'green')
18    	else
19    		Materialize.toast("Too bad")
20
21MaterializeModal.prompt
22	message: 'Enter something'
23	callback: (error, rtn) ->
24		if rtn?.submit
25			Materialize.toast("You entered #{rtn.value}", 3000, 'green')
26
27MaterializeModal.form
28	bodyTemplate: 'testForm'
29	callback: (error, rtn ->
30		if rtn.submit
31			console.log("Form data", rtn.value)         

Notes

There might be are more undocumented options that need to be documented. See code.

License

MIT