derby-ui-modal

Derby ui component library / modal

derby-ui-modal

Derby ui component: modal dialog.

git clone

In app.js:

var app;
app = require('derby').createApp(module)
    .use(require('derby-ui-modal'));
 
<ui2:modal>
    <p>Content</p>
</ui2:modal>
<ui2:modal inverse>
    <p>Content</p>
</ui2:modal>
<ui2:modal keydown>
    <p>Content</p>
</ui2:modal>

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.

As the functions are created, you can bind a Close button to the closing function:

<ui2:modal name="my_dialog">
    <p>Content</p>
    <button x-bind="click:modal.my_dialog.close">Close</button>
</ui2:modal>

You can of course combine these parameters.

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

  model.on 'change''_page.modal.modal-2'(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 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>

The namespace ui2 will be changed later to ui.