Add better modals to ethereum:elements

ethereum:elements gives you useful elements to make building a dapp more fun.

One element, which was there since a while has now got a better API.

Instead of realing on iron:router, it uses now a global object called EthElements.Modal to show and hide modals, read below to see how you can make use of them.

Note that when you use the modals in combination with the dapp-styles, they look even more awesome!

To start just place a modal placeholder before the closing body tag.

{{> dapp_modalPlaceholder}}

Render without route

To render the modal simply call:

EthElements.Modal.show('myContentTemplate');

// Or with data for the template

EthElements.Modal.show({
    template: 'myContentTemplate',
    data: {
        myData: 'some data'
    }
});

Additional options:

• closeable – Prevents the default behaviour, which closes the modal when the overlay is clicked.

• class – A class, which will be add to the modal section element

  EthElements.Modal.show('myContentTemplate', {
      closeable: false,
      class: 'my-modal-class'
  });
  

To navigate to a path on close do:
(This will only work when the iron:router package is installed)

EthElements.Modal.show('myContentTemplate', {closePath: '/dashboard'});

Close modal

EthElements.Modal.hide();

---

Modal Question

The question modal is a modal content template, which can be used to display a text and allow OK and Cancel options.

You basically just can pass a text, ok and/or cancel property as a data context to set callbacks, which will be fired when the button is pressed.

Additional you can:
– Set the ok or cancel property to true, it will just close the modal without any action.
– Pass false or leave the ok or cancel property empty and it won’t show that buttons.

EthElements.Modal.question({
    text: 'Do you want to ...',
    ok: function(){
        // do something on ok
    },
    cancel: true // simply show th cancel button and close the modal on click
});

Using a template

Instead of passing a text you can also pass a template, which will be shown above the ok/cancel buttons

EthElements.Modal.question({
    template: 'myTemplate',
    data: {
        my: 'template data'
    },
    ok: function(){
        // do something on ok
    },
    cancel: function(){
        // do something on cancel
    }
});

Close question modal

EthElements.Modal.hide();

Additional you can pass the same options as the modal as the second parameter:

EthElements.Modal.question({
    text: 'Alright?',
    ok: function(){
        // do something on ok
    }
}, {
    closeable: false
});

Localization

The modal question can use the tap:i18n package for the ok and cancel button texts.
If the TAPi18n helper is available it will use TAPi18n.__('buttons.ok') and TAPi18n.__('buttons.cancel') for the buttons.