Lightweight message system for jquery

informer.jquery.js

'use strict';
/**
 * Informer
 * Lightweight message system
 *
 * @options
 *
 * type -
 * life -
 * speed -
 * width -
 * wrapperClass -
 * messageClass -
 *
 * 2018 (c) colorwebdesigner.ru
 */
(function($) {

  // Plugin definition.
  $.fn.informer = function(options) {

    // Default settings
    var opt = $.extend({
      type: 'default top right',
      life: 4300,
      speed: 370,
      width: '320px',
      animate: false,
      wrapperClass: 'informer',
      messageClass: 'informer__msg'
    }, options);


    return this.each(function() {

      // Set and filter vars
      var parent = $(this);
      let msgType = ' ' + opt.type;
      let msgLife = parseInt(opt.life);
      let msgSpeed = parseInt(opt.speed);
      let messageId = $.now();

      // Set templates
      let wrapperTpl = '<div class="' + opt.wrapperClass + '" style="width: ' + opt.width + '"></div>';
      let messageTplBtn = '<span class="' + opt.messageClass + '_btn"></span>';

      // Check head and body for template
      let messageTplHead = (opt.head) ? '<h4 class="' + opt.messageClass + '_head">' + opt.head + '</h4>' : '';
      let messageTplBody = (opt.body) ? '<div class="' + opt.messageClass + '_body">' + opt.body + '</div>' : '';

      // Build general template
      let messageTpl = '<div class="' + opt.messageClass + msgType + '" data-id="' + messageId + '">';
      messageTpl += messageTplHead;
      messageTpl += messageTplBody;
      messageTpl += messageTplBtn;
      messageTpl += '</div>';

      // Check if message wrapper already in parent
      let msgWrapCount = parent.children('.' + opt.wrapperClass).length;

      if (msgWrapCount == 0) {
        $(wrapperTpl).appendTo(parent);
      }

      /*
       * Append message to wrapper
       */
      $(messageTpl).appendTo(parent.children('.' + opt.wrapperClass)).fadeIn(opt.speed);

      // if (!$.isEmptyObject(opt.animate)) {
      //   animateMsg($('[data-id="' + messageId + '"]'),opt.animate,opt.width);
      // }
      /*
       * Delay action
       */
      if (opt.life > 0) {
        closeMsg($('[data-id="' + messageId + '"]'),opt.life,opt.speed);
      }

      /**
       * Close btn action
       */
      let msgBtn = $('[data-id="' + messageId + '"] > .' + opt.messageClass + '_btn');
      msgBtn.on('click', function() {
        console.log('Cliked on: '+ messageId);
        closeMsg(msgBtn.parent(),'',opt.speed);
      });
    });
  };

  function closeMsg(target, life, speed) {

    let msgBoxClass = target.attr('class').substring(0, target.attr('class').indexOf(' '));
    let msgBoxWrap = target.parent();
    let msgBoxCount = msgBoxWrap.children('.' + msgBoxClass).length;

    console.log('life is: '+ life);

    if (msgBoxCount == 1) {
      if (life != '') {
        msgBoxWrap.delay(life).fadeOut(speed, function() {
          $(this).detach();
          return;
        });
      }
      msgBoxWrap.fadeOut(speed, function() {
        $(this).detach();
        return;
      });
    }

    if (life != '') {
      target.delay(life).fadeOut(speed, function() {
        $(this).detach();
        return;
      });
    }

    target.fadeOut(speed, function() {
      $(this).detach();
      return;
    });
  }

  function animateMsg(obj,steps,width) {

    let parent = obj.parent();
    let parClass = parent.attr('class');
    let objBody = obj.children('[class*="_body"]');
    width = parseInt(width);

    $.each(steps, function(key,val){

        key = parseInt(key);
        console.log(key);

        setTimeout(function(){

          parent
            .attr('class', parClass)
            .addClass(val.name);
          objBody
            .html(val.txt);

          console.log(key +' is done');
        }, val.life*key);
    });
  }

})(jQuery);