MODI

Actions template

Modal with action buttons and events.

  • Config
  • Styles
var modiActionsTplConfig = {

  html: `
  <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 data-element="actions">
        <button type="button" data-action="accept">{acceptText}</button>
        <button type="button" data-action="cancel">{cancelText}</button>
      </div>
    </div>
  </div>
  `,

  data: {
    class: 'modi',
    outsideClose: true,
    acceptText: 'Accept',
    cancelText: 'Cancel'
  },

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

$overlay-bg: rgba(0, 0, 0, .6);
$white: #fff;
$gray: #ccc;
$gray-light: #eee;
$gray-dark: #999;

body {
  &[data-modal-visible='true'] {
    overflow: hidden;
  }
}

.modi {
  &[data-element='overlay'] {
    align-items: center;
    background: $overlay-bg;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;

    [data-element='modal'] {
      background-color: $white;
      box-sizing: border-box;
      margin: 20px auto;
      position: relative;
      width: 400px;
      z-index: 9999;

      [data-element='close'] {
        background-color: $gray;
        cursor: pointer;
        display: block;
        height: 20px;
        line-height: 20px;
        position: absolute;
        right: 10px;
        text-align: center;
        top: 10px;
        vertical-align: middle;
        width: 20px;
      }

      [data-element='content'] {
        padding: 20px 30px;
      }

      [data-element='actions'] {
        border-top: 1px solid $gray-light;
        text-align: right;

        [data-action] {
          background-color: transparent;
          border: 0;
          color: $gray-dark;
          cursor: pointer;
          float: left;
          padding: 10px;
          text-transform: uppercase;
          width: 50%;

          &:hover,
          &:active,
          &:focus {
            background-color: $gray-light;
          }
        }
      }

      &[data-small-width-flag='true'] {
        width: 100%;
      }
    }

    &[data-small-height-flag='true'] {
      display: block;

      [data-element='modal'] {
        margin: 20px auto;
        overflow: hidden;
        position: relative;
      }
    }

    &[data-visible='false'] {
      display: none;
    }
  }
}

Let’s try it.

var modal = new Modi({
  template: modiActionsTplConfig,
  content: "Buttons added. Now it is necessary to capture the dispatched events."
});

Capturing the events.

var question = new Modi({
  template: modiActionsTplConfig,
  content: "Are you sure?",
  data: {
    acceptText: 'Yep!',
    cancelText: 'Maybe later'
  }
});
var answer = new Modi();

// The dispatcher for the "accept" event is "instance", so we can use
// the "addListener" method to attach our listener.
question.addListener('modal:accept', (e) => {
  question.hide();
  answer.show('Oops.. something went wrong. Please, try again.');
});

// The "cancel" event is configured to use the "modal" element as the target.
question.element('modal').addEventListener('modal:cancel', (e) => {
  question.hide();
});
// It's also possible to use "addListener" specifying the desired element.
// question.addListener.('modal:cancel', (e) => {
//   question.hide();
// }, question.element('modal'));