Meteor-Materialize-Modal

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

Demo Site

Warning: Only tested on Meteor 1.2+

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

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

• 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

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