Derby ui component: modal dialog
CSS CoffeeScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
modal
src
.gitignore
LICENSE
Makefile
README.md
index.coffee
index.js
index.styl
package.json

README.md

#Not maintained

This was made for an early (pre-0.5) version of derby and probably won't work anymore. If anyone wants to fork and improve, be my quest. You would probably be better of with some other solution though.

derby-ui-modal

Derby ui component: modal dialog.

Installation

npm install derby-ui-modal

In app.js:

var app;
app = require('derby').createApp(module)
	.use(require('derby-ui-modal'));

Usage

In templates

White dialog

<ui2:modal bind="create:modal.create">
	<p>Content</p>
</ui2:modal>

Black dialog

<ui2:modal bind="create:modal.create" inverse>
	<p>Content</p>
</ui2:modal>

ESC will close the dialog

<ui2:modal bind="create:modal.create" keydown>
	<p>Content</p>
</ui2:modal>

Buttons will work too, but they need a data-action parameter

<ui2:modal bind="create:modal.create" name="my_dialog">
	<p>Content</p>
	<button data-action="cancel">Close</button>
	<button data-action="save">Save</button>
</ui2:modal>

Naming it

Give it a name. This will create functions app.modal.my_dialog.show and app.modal.my_dialog.close which can be used in templates and in the code.

Listening to events

_page.modal.my_dialog will be set or deleted when a modal is created/destroyed:

  model.on 'change', '_page.modal.my_dialog', (value, previous, passed) ->
    if value
      console.log 'modal created'
    else
      console.log 'modal destroyed with action ' + passed.action

action.passed is a parameter that can be set in a template:

<ui2:modal bind="create:modal.create" name="my_dialog">
	<p>Content</p>
	<button x-bind="click:modal.my_dialog.close" data-action="ok">Ok</button>
	<button x-bind="click:modal.my_dialog.close" data-action="cancel">Close</button>
</ui2:modal>

Drawbacks/todo

Unfortunately you will have to provice the parameter bind="create:modal.create" to the modal as of now.

Beware

The namespace ui2 will be changed later to ui.