MODI 1.1.0

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 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.
  • 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 or modal 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.