Your IP : 18.219.40.177


Current Path : /usr/local/mgr5/skins/orion/src/
Upload File :
Current File : //usr/local/mgr5/skins/orion/src/App.Notify.js

/**
 * Notify module
 *
 * provide notification block on the top page
 *
 */
App.Notify = (function(window, $, EventMgr) {
  'use strict';

  var pageInfo = window.pageInfo,
      timeoutId;

  var template = '<div class="b-notif">' +
      '{{~it.items :value:index}}' +
        '<div class="b-notif__elem hint {{?value.type !== "bannerlist"}} b-menu-item newtab i-menu-link {{??}} i-bannerlist-open{{?}}" data-url="?func={{=value.action}}" data-hint="{{=value.hint}}">' +
          '<div class="b-notif__img s-icon s16x16 props {{=value.img}}"></div>' +
          '{{ var nums = String(value.value).split(""); }}' +
            '<div class="b-notif__text">' +
          '{{~nums :v:i}}' +
            '<span class="b-number b-number_value_{{=v}}"></span>' +
          '{{~}}' +
          '</div>' +
        '</div>' +
      '{{~}}' +
      '</div>';

  var templBanner = '<div class="b-notify-banner b-notify-banner_status_{{=it.status}} {{?it.isNew}} b-notify-banner_is_new {{?}}" data-elid="{{=it.elid}}" id="{{=it.id}}"><div class="b-notify-banner__close i-notify-banner__close b-tab-close"></div>{{=it.msg}}</div>';

  var templCloseAll = '<div class="b-notify-banner__close-all {{?it.hasNew}}b-notify-banner_is_new{{?}}" data-elid="{{=it.elids}}"><div class="b-notify-banner__close-all-inner i-notify-banner__close-all">' + pageInfo.messages.closeall + '<div class="b-notify-banner__close b-tab-close"></div></div></div>';

  var tempFunc = window.doT.template(template);
  var templBannerFunc = window.doT.template(templBanner);
  var templCloseAll = window.doT.template(templCloseAll);

  function notificationGet() {
    var url = pageInfo.url,
        param = { func: 'notify' };
    EventMgr.trigger('ajaxRequest', {
      url: url,
      param: param,
      type: 'get',
      outtype: 'json',
      ignore503: true,
      failFunc: notifyFail,
      trfunc: 'notificationResponse',
      queue: 'notification' });
  }

  function notifyBannerDeleteRequest(id) {
    var url = pageInfo.url,
        param = { func: 'notificationbar.delete', elid: id };
    EventMgr.trigger('ajaxRequest', {
       url: url,
       param: param,
       type: 'get',
       outtype: 'json',
       ignore503: true,
       trfunc: 'notifyBannerDeleteResponse',
       queue: 'notification'
    });
  }

  function notifyBannnerDeleteAllRequest() {
    var url = pageInfo.url,
        param = { func: 'notificationbar.deleteall' };
    EventMgr.trigger('ajaxRequest', {
       url: url,
       param: param,
       type: 'get',
       outtype: 'json',
       ignore503: true,
       trfunc: 'notifyBannerDeleteResponse',
       queue: 'notification'
    });

  }

  function notifyBannerDeleteResponse(resp) {
    notificationGet();
  }

  function notifyFail(e, dataSource) {
    var dataSource = dataSource;
    setTimeout(function() {
      EventMgr.trigger('ajaxRequest', dataSource);
    }, 5000);
  }

  function notificationRender(notifElems) {
    var html = tempFunc(notifElems);
    var elem = window.document.getElementById('notify');
    elem.innerHTML = html;

    if (elem.style.display === 'none') {
      $(elem).slideDown(1000);
    }
  }

  function notificationHide() {
    var elem = window.document.getElementById('notify');
    $(elem).slideUp(1000);
  }


  function notifyBannerRender(notifElems) {
    var html = '',
        htmlList = '',
        items = notifElems.items,
        hasNew = false,
        elids;
    if (items && items.length) {
      for (var i = 0, l = items.length; i < l; i++) {
        if (items[i].type === 'bannerlist' &&
            items[i].bitems &&
            items[i].bitems.length) {
          var bannerlist = items[i].bitems;
          for (var j = 0, ll = bannerlist.length; j < ll; j++) {
            if (!elids) {
              elids = bannerlist[j].id;
            } else {
              elids += ',' + bannerlist[j].id;
            }
            if (bannerlist[j].isNew) {
              hasNew = true;
            }
            htmlList += templBannerFunc({
                 id: '__' + bannerlist[j].id,
                 elid: bannerlist[j].id,
                 isNew: bannerlist[j].isNew,
                 status: bannerlist[j].status,
                 msg: bannerlist[j].msg });
          }
        }
      }
      setTimeout(function() {
        removeNotifyBanner(bannerlist);
      }, 7000);

      if (htmlList) {
         htmlList = templCloseAll({ elids: elids, hasNew: hasNew }) + htmlList;
      }
      addNotifyBannerList(htmlList);
      setTimeout(function() {
        setPositionToList();
      }, 50);
    }
  }

  function setPositionToList() {
    var $notifyList = $(bannerOpenSel),
        offsetLeft = $notifyList[0] ? $notifyList[0].offsetLeft : 0,
        $bannerList = $('#notify-banner-list');

    $bannerList.css('left', offsetLeft + 'px');
  }

  function removeNotifyBanner(items) {
    items = items || [];

    for (var i = 0, l = items.length; i < l; i++) {
      var $notifyBanner = $('#__' + items[i].id);
      if ($notifyBanner.length && $notifyBanner.hasClass('b-notify-banner_is_new')) {
        $notifyBanner.slideUp(function() {
          $(this).removeClass('b-notify-banner_is_new').css('display', '');
        });
      }
    }
    $('.b-notify-banner__close-all').removeClass('b-notify-banner_is_new');
  }

  function closeNotifyBanner(e) {
    e.preventDefault();
    var $parent = $(this.parentNode),
        id = $parent.attr('id'),
        elid = $parent.attr('data-elid');
    //@todo make banner as closed
    //@todo remove banner from bannerlist
    if (id) {
      notifyBannerDeleteRequest(elid);
      $parent.fadeOut('fast', function() {
         $(this).remove();
       });
      //remove from banner list
      $('#__' + id).remove();
      //check for noone banner
      checkAndRemoveCloseAllBtn();
    //close all banners
    } else {
      notifyBannnerDeleteAllRequest();
      $('.b-notify-banner').fadeOut('fast', function() {
        $parent.remove();
        $('.b-notify-banner').remove();
      });
    }
  }

  function closeNotifyFromListBanner(e) {
    e.preventDefault();
    var $parent = $(this.parentNode),
        id = $parent.attr('id'),
        elid = $parent.attr('data-elid');
    id = String(id).slice(0, 2);
    notifyBannerDeleteRequest(elid);
    //@todo make banner as closed
    //@todo remove banner from bannerlist
    $parent.fadeOut('fast', function() {
       $(this).remove();
     });
    //remove from banner list
    $('#' + id).remove();
    checkAndRemoveCloseAllBtn();
  }

  function checkAndRemoveCloseAllBtn() {
    if ($('.b-notify-banner').length === 0) {
      $('.b-notify-banner__close-all').remove();
    } else if ($('.b-notify-banner__list_is_open').length === 0 && $('.b-notify-banner_is_new').length === 1) {
      $('.b-notify-banner_is_new').removeClass('b-notify-banner_is_new');
    }
  }

  function addNotifyBanner(html) {
    var $targetElem = $('#notify-banner-wrapper'),
        $html = $(html);
    if ($targetElem) {
      $html.hide();
      $html.appendTo($targetElem).slideDown('slow');
    }
  }

  function addNotifyBannerList(html) {
    var $targetElem = $('#notify-banner-list');
    if ($targetElem) {
      $targetElem.html(html);
    }
  }

  function bannerListToggle() {
    var $bannerList = $('#notify-banner-list'),
        offsetLeft = this.offsetLeft;
    if ($bannerList.hasClass('b-notify-banner__list_is_open')) {
      $bannerList.removeClass('b-notify-banner__list_is_open');
    } else {
      $('.b-notify-banner_is_new').removeClass('b-notify-banner_is_new');
      $bannerList.addClass('b-notify-banner__list_is_open');
      $bannerList.css('left', offsetLeft + 'px');
    }
  }
  //change title
  function notifyTitle(data) {
    if (data && data.title) {
      window.document.title = data.title;
    } else {
      window.document.title = pageInfo.title;
    }
  }

  function notifySound(data) {
    if (data && data.sound) {
      var audio = window.document.getElementById('audio-beep');
      if (!audio) {
        audio = window.document.createElement('audio');
        audio.style.display = 'none';
        audio.setAttribute('id', 'audio-beep');
        document.body.appendChild(audio);
      }
      audio.setAttribute('src', data.sound);

      audio.play();
    }
  }

  function notifyBalance(data) {
    if (data && data.balance) {
      var balance_box = $('#balance-show-box');
      if (balance_box) {
        balance_box.text(data.balance)
      }
    }
  }

  function notificationCheck(e, data) {
    if (!data.items) {
      return;
    }
    if (data.items.length > 0) {
      notificationRender(data);
      notifyBannerRender(data);
      notifyTitle(data);
      notifySound(data);
      notifyBalance(data);
    } else {
      notificationHide();
      if (data && data.balance) {
        notifyBalance(data);
      }
    }

    if (data.timeout) {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(function() {
        notificationGet();
      }, parseInt(data.timeout * 1000, 10));
    }
  }

  function notificationLoad() {
    notificationGet();
  }

  function checkForNotify(e, data) {
    if (pageInfo.notify &&
        data.notify &&
        pageInfo.notify !== data.notify) {
      pageInfo.notify = data.notify;
      notificationGet();
    }
  }

  var closeBtnSel = '.i-notify-banner__close',
      bannerOpenSel = '.i-bannerlist-open',
      closeBtnAllSel = '.i-notify-banner__close-all';

  function init() {
    EventMgr.bind('loadPage', notificationLoad);
    EventMgr.bind('notificationResponse', notificationCheck);
    EventMgr.bind('forceCheckNotify', notificationGet);
    EventMgr.bind('ajaxResponse,ajaxFormResponse', checkForNotify);
    EventMgr.bind('notifyBannerDeleteResponse', notifyBannerDeleteResponse);
    EventMgr.on('#notify-banner-wrapper', closeBtnSel, 'click', closeNotifyBanner);
    EventMgr.on('#notify-banner-list', closeBtnSel, 'click', closeNotifyFromListBanner);
    EventMgr.on('#notify', bannerOpenSel, 'click', bannerListToggle);
    EventMgr.on('#notify-banner-list', closeBtnAllSel, 'click', closeNotifyBanner);
  }

  var api = {
    init: init
  };

  return api;

}(window, $, EventMgr));