src/MessageDisplay.js

import '../less/notify.less'
import 'notifyjs-browser'
import $ from 'jquery'
import { html2Text } from './utilities'

/**
 * @typedef {object} MessageReducedDisplayOptions
 * @property {boolean} [autoHide] - whether to auto-hide the notification
 * @property {number} [autoHideDelay] - milliseconds before hide (if autoHide is set)
 * @property {string} [position] - notification position relative to element
 */

/**
 * @typedef {MessageReducedDisplayOptions} MessageDisplayOptions
 * @property {(string|string[])} [className] - default class
 */

/**
 * @typedef {MessageDisplayOptions} MessageConstructorOptions
 * @property {boolean} [arrowShow=true] - whether to show an arrow pointing at the element
 * @property {number} [arrowSize=5] - Arrow size in pixels
 * @property {boolean} [autoHide=true] - whether to auto-hide the notification
 * @property {number} [autoHideDelay=15000] - milliseconds before hide (if autoHide is set)
 * @property {(string|string[])} [className='error'] - default class
 * @property {string} [position=bottom left] - notification position relative to element
 * @property {number} [gap=2] - padding between element and notification
 * @property {string} [hideAnimation=slideUp] - hide animation type
 * @property {number} [hideDuration=200] - hide animation duration in milliseconds
 * @property {string} [showAnimation=slideDown] - show animation type
 * @property {number} [showDuration=400] - show animation duration in miliseconds
 * @property {string} [style=bootstrap] - default style
 */

/**
 * Displays Messages
 */
export class MessageDisplay {
  /**
   * @param {jQuery} $element
   * @param {MessageConstructorOptions} options
   */

  constructor ($element, options = {}) {
    if ($element) {
      /**
       * @type {jQuery}
       * @private
       */
      this.$element_ = $element

      if (!$.notify.getStyle('benndorf')) {
        $.notify.addStyle('benndorf', {
          html: '<div>' +
          '<div class="text" data-notify-text></div>' +
          '</div>' +
          '</div>',
          classes: {
            error: {
              color: '#b94a48',
              'background-color': '#f2dede',
              'border-color': '#b94a48'
            },
            success: {
              color: '#468847',
              'background-color': '#dff0d8',
              'border-color': '#468847'
            },
            info: {
              color: '#3a87a',
              'background-color': '#d9edf7',
              'border-color': '#3a87ad'
            },
            warn: {
              color: '#c09853',
              'background-color': '#fcf8e3',
              'border-color': '#c09853'
            }
          }
        })
      }
    } else {
      throw new Error('MessageDisplay needs an object to be associated to!')
    }

    /**
     * @type {MessageOptions}
     * @private
     */
    this.defaults_ = options

    /**
     * @type {?number}
     * @private
     */
    this.autoHideTimer_ = null

    if (!options.hasOwnProperty('arrowShow')) { this.defaults_.arrowShow = true }
    if (!options.hasOwnProperty('arrowSize')) { this.defaults_.arrowSize = 5 }
    if (!options.hasOwnProperty('autoHide')) { this.defaults_.autoHide = true }
    if (!options.hasOwnProperty('autoHideDelay')) { this.defaults_.autoHideDelay = 15000 }
    if (!options.hasOwnProperty('className')) { this.defaults_.className = 'error' }
    if (!options.hasOwnProperty('position')) { this.defaults_.position = 'bottom left' }
    if (!options.hasOwnProperty('gap')) { this.defaults_.gap = 2 }
    if (!options.hasOwnProperty('hideAnimation')) { this.defaults_.hideAnimation = 'slideUp' }
    if (!options.hasOwnProperty('hideDuration')) { this.defaults_.hideDuration = 200 }
    if (!options.hasOwnProperty('showAnimation')) { this.defaults_.showAnimation = 'slideDown' }
    if (!options.hasOwnProperty('showDuration')) { this.defaults_.showDuration = 400 }
    if (!options.hasOwnProperty('style')) { this.defaults_.style = 'benndorf' }
  }

  /**
   * Displays a generic message
   * @param {string} message
   * @param {MessageDisplayOptions} options
   */
  message (message, options = {}) {
    const msgOptions = this.defaults_
    if (options.hasOwnProperty('autoHide')) { msgOptions.autoHide = options.autoHide }
    if (options.hasOwnProperty('autoHideDelay')) { msgOptions.autoHideDelay = options.autoHideDelay }
    if (options.hasOwnProperty('className')) { msgOptions.className = options.className }
    if (options.hasOwnProperty('position')) { msgOptions.position = options.position }

    this.$element_.notify(html2Text(message), msgOptions)

    // HOTFIX for notifyjs issue
    $('.notifyjs-wrapper').click(() => {
      this.hide()
    })
  }

  /**
   * Displays an error message
   * @param {string} message
   * @param {MessageReducedDisplayOptions} options
   */
  error (message, options = {}) {
    options.className = 'error'
    this.message(message, options)
  }

  /**
   * Displays an info message
   * @param {string} message
   * @param {MessageReducedDisplayOptions} options
   */
  info (message, options = {}) {
    options.className = 'info'
    this.message(message, options)
  }

  /**
   * Displays a success message
   * @param {string} message
   * @param {MessageReducedDisplayOptions} options
   */
  success (message, options = {}) {
    options.className = 'success'
    this.message(message, options)
  }

  /**
   * Displays a warning message
   * @param {string} message
   * @param {MessageReducedDisplayOptions} options
   */
  warn (message, options = {}) {
    options.className = 'warn'
    this.message(message, options)
  }

  /**
   * Hides all messages
   */
  hide () {
    $('.notifyjs-wrapper').trigger('notify-hide')
    window.clearTimeout(this.autoHideTimer_)
  }
}