Amaran Notifications // Aurelia (RequireJS/CLI)

_README.md

1. run npm install github:hakanersu/AmaranJS --save

2. add the entry to app-bundle in aurelia.json

  "jquery",
  {
    "name": "AmaranJS",
    "path": "../node_modules/AmaranJS/dist/js/",
    "main": "jquery.amaran"
  },

3. setup /src/resources/notifications.js

4. import the class and call it.

index-view.js

import {inject} from 'aurelia-dependency-injection';
import {Notification} from 'resources/notification';

/**
 * Decorators
 */
@inject(Notification)

/**
 * IndexView Class
 * @class
 */
export class IndexView {

  /**
   * Constructs an instance
   * @param _notification {Notification} - notification instance
   * @constructor
   */
  constructor(notification) {
    this._notification = notification;
  }

  attached() {
    this._notificaiton.showSuccess("Yay!")
  }
}

notification.js

import {amaran} from 'AmaranJS';
import $ from 'jquery';

/**
 * Notification Class
 * @class
 */
export class Notification {

  showMsg(msg, type = 'default') {

    /** Set some defaults */
    let delay = 7500;

    /** Longer delay for errors */
    if (type === 'error') {
      delay = 12500;
    }

    /** Create the amaran jquery object */
    $.amaran({
      message: msg,
      position: 'bottom left',
      content: ' ',
      delay: delay,
      sticky: false,
      stickyButton: false,
      inEffect: 'slideLeft',
      outEffect: 'slideLeft',
      theme: type,
      themeTemplate: null,
      closeOnClick: true,
      closeButton: true,
      clearAll: false,
      cssanimationIn: false,
      cssanimationOut: false,
      resetTimeout: false,
      overlay: false,
      beforeStart: function() {},
      afterEnd: function() {},
      onClick: function() {}
    });
  }

  /**
   * Shows an error notification
   * @param msg {String} - message to be displayed
   */
  showError(msg) {
    this.showMsg(msg, 'error');
  }

  /**
   * Shows a success notification
   * @param msg {String} - message to be displayed
   */
  showSuccess(msg) {
    this.showMsg(msg, 'success');
  }

  /**
   * Shows a warning notification
   * @param msg {String} - message to be displayed
   */
  showWarning(msg) {
    this.showMsg(msg, 'warning');
  }

  /**
   * Shows an info notification
   * @param msg {String} - message to be displayed
   */
  showInfo(msg) {
    this.showMsg(msg, 'info');
  }

  /**
   * Handles showing any messages coming back form the server payload.
   * This is specific to my JSON payload structure
   * @param messages {object} - object with message arrays
   */
  handleServerMessages(messages) {
    for (let message of messages.successes) {
      this.showSuccess(message);
    }
    for (let message of messages.errors) {
      this.showError(message);
    }
    for (let message of messages.infos) {
      this.showInfo(message);
    }
    for (let message of messages.warnings) {
      this.showWarning(message);
    }
  }

}