Configuration
Config structure:
cnf = {
container: {Element},
content: {String},
template: {
html: {String},
data: {
class: {String},
outsideClose: {Boolean}
},
events: {Array},
listeners: {Object},
methods: {Object}
}
}
container
Element where the modal will be inserted. Default: document.body
.
content
Modal’s content. Can be established after creation. Default: ""
.
template
Defines the structure and default behaviour. Some examples can be found under templates section: default, actions, notification.
html
Default content:
<div class="{class}" data-element="overlay" data-visible="false" data-outside-close="{outsideClose}">
<div data-element="modal" data-small-width="500">
<span data-element="close">×</span>
<div data-element="content"></div>
</div>
</div>
Modi is aware of the following elements:
- overlay: optional. When inserted manually in the same
container
and contains thedata-element
definition, Modi will be aware of the element, allowing you to have a shared overlay between modals. - modal: required. Modal container.
small-width
: optional. Defines the break point wheresmall-width-flag
data attribute turnstrue
orfalse
.
- close: optional. When present, an event handler will be attached to the element and will trigger the hide method.
- content: required if you plan to alter the content through Modi. Otherwise, it can be ignored.
The following boolean flags will be present as data attributes:
modal-visible
: modal visible? Present oncontainer
element.visible
: modal visible? Present onoverlay
andmodal
elemens.small-height-flag
: window’s height smaller than the modal’s height? Present onoverlay
andmodal
elemens.small-width-flag
: window’s width smaller than thesmall-width
attribute present onmodal
element? Present onoverlay
andmodal
elements.
data
Template replacements. Any placeholder present inside template as {placeholder}
will be replaced with the corresponding data property. Allows the customization of a modal during instantiation. Defaults:
data: {
class: 'modi',
outsideClose: true
}
events
Custom events. Definition:
- name: required. Name of the event.
- type: required. Type of the event.
- selector: required. Selector that points to the dispatcher element. The element must be inside the
container
. - dispatcher: optional. It’s possible to set the
overlay
ormodal
element as the dispatcher.
For example, actions template have an “accept” button that dispatches a modal:accept
event on click.
{
events: [
{
name: 'modal:accept',
type: 'click',
selector: '[data-element="actions"] [data-action="accept"]',
dispatcher: 'modal'
}
]
}
listeners
Any of the events can be captured by the template. This includes the default events and the custom ones.
For example:
listeners: {
'modal:hide': (detail) => {
console.log('modal:hide dispatched!');
},
'modal:accept': (detail) => {
console.log('modal:accept dispatched!');
}
}
The notification template contains an example.
methods
The show
and hide
methods can be overriden inside template. Template’s methods run first, and it’s possible to call the default method from the custom one.
For example:
methods: {
show: (contents, instance) => {
// Pritty stuff
// ...
// Call default method
instance.show(contents, true);
}
}
The notification template contains an example.