node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



Derby ui component: modal dialog.


npm install derby-ui-modal

In app.js:

var app;
app = require('derby').createApp(module)


In templates

White dialog

<ui2:modal bind="create:modal.create">

Black dialog

<ui2:modal bind="create:modal.create" inverse>

ESC will close the dialog

<ui2:modal bind="create:modal.create" keydown>

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

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

Naming it

Give it a name. This will create functions 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'
      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">
    <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>


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


The namespace ui2 will be changed later to ui.