MODI

Notification template

  • Config
  • Styles
var modiNotificationTplConfig = {

  hideTimer: null,

  html: `
  <div class="{class}" data-element="modal" data-small-width="500" data-delay="{delay}">
    <span data-element="close">&Cross;</span>
    <div data-element="content"></div>
  </div>
  `,

  data: {
    class: 'modi-notification',
    delay: 2000
  },

  listeners: {

    show: (detail) => {
      clearTimeout(detail.instance.template.hideTimer);
      detail.instance.template.hideTimer = setTimeout(() => {
        detail.instance.hide();
      }, parseInt(detail.modal.dataset.delay, 10));
    }
  },

  methods: {

    show: (contents, instance) => {
      instance.hide();
      setTimeout(function() {
        instance.show(contents, true);
      }, 10);
    }
  }
};

$white: #fff;
$black: #333;
$black-alpha: rgba($black, .3);
$black-light: #666;
$gray: #ccc;

.modi-notification {
  background-color: $white;
  box-shadow: 0 0 3px $black-alpha;
  color: $black-light;
  display: none;
  font-size: .9em;
  margin: 20px;
  padding: 15px 30px;
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  z-index: 999;

  [data-element='close'] {
    color: $gray;
    cursor: pointer;
    height: 15px;
    line-height: 15px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 5px;
    width: 15px;

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

  &[data-small-width-flag='true'] {
    left: 0;
    margin: 10px auto;
    right: 0;
    width: 97%;
  }

  &[data-visible='true'] {
    animation-direction: alternate;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-name: test;
    display: block;
  }

  &[data-effect='trans'] {
    animation-direction: alternate;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-name: test;
  }
}

@keyframes test {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

Create and show notification:

var notification = new Modi({ template: modiNotificationTplConfig });

<button class="button" onclick="notification.show('Eh! I am not supposed to be a notification!')">
  Show notification
</button>
<button class="button" onclick="notification.show('But now you are some sort of a notification :)')">
  Replace notification
</button>

Changing the life time:

var notification = new Modi({
  template: modiNotificationTplConfig,
  data: { delay: 500 },
  content: 'Buuuu!'
});

Changing the color:

.modi-notification-color {
  background-color: #f0ffd6;
}

var notification = new Modi({
  template: modiNotificationTplConfig,
  data: { class: 'modi-notification modi-notification-color' },
  content: 'How do I look? :)'
});

On this page, as there are multiple notificatons and no stacking, only the current one is shown:

var notifications = document.body.querySelectorAll('.modi-notification');
notifications.forEach((notification) => {
  notification._Modi.addListener('modal:show', (e) => {
    notifications.forEach((sibling) => {
      if (!e.detail.modal.isEqualNode(sibling)) {
        sibling._Modi.hide();
      }
    });
  });
});