MODI

Configuration

Config structure:

cnf = {
  container: {Element},
  eventsNamespace: {String},
  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.

eventsNamespace

Namespace to be applied when dispatching events. Default: modal. Listeners must be prefixed accordingly.

myModal.addListener('modal:show', (e) => {});

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 the data-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 where small-width-flag data attribute turns true or false.
  • 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 on container element.
  • visible: modal visible? Present on overlay and modal elemens.
  • small-height-flag: window’s height smaller than the modal’s height? Present on overlay and modal elemens.
  • small-width-flag: window’s width smaller than the small-width attribute present on modal element? Present on overlay and modal 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. Mustn’t be prefixed with the namespace, it will be automatically prefixed before event dispatch.
  • type: required. Type of the event.
  • selector: required. Selector that points to the dispatcher element. The element must be inside the container.
  • dispatcher: optional. Dispatcher element. Default: selector. It’s possible to set it to instance (the first template element) or any element name present in the template (data-element).

For example, actions template have an “accept” button that dispatches an accept event on click.

{
  events: [
    {
      name: 'accept',
      type: 'click',
      selector: '[data-element="actions"] [data-action="accept"]',
      dispatcher: 'instance'
    }
  ]
}

listeners

Any of the events can be captured by the template. This includes the default events and the custom ones.

The name of the events mustn’t be prefixed with the namespace. Modi won’t use it when interacting with the template in order to facilitate the reusability.

For example:

listeners: {
  // internal event
  hide: (detail) => {
    console.log('hide dispatched!');
  },
  // custom event defined in template
  accept: (detail) => {
    console.log('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.