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>
data-action
parameter
Buttons will work too, but they need a <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
.