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.Menu.js

/**
 *  Menu module
 *
 *  find in menu, show/hide menu items,
 * @param {object} window global object
 * @param {object|function} $ jQuery
 * @param {object} EventMgr Event manager
 * @param {object} App Application
 */
App.Menu = (function(window, $, EventMgr, App) {
  'use strict';
  var groups = [],

      menuType = '',

      init = function() {
        EventMgr.bind('loadPage', buildGroups);
        EventMgr.bind('loadPage', utilGroups);
        //EventMgr.bind('loadPage', checkWidthItems);
        EventMgr.bind('loadPage', indexMenu);
        EventMgr.bind('readCookie', MenuSetUp);
        EventMgr.obind(headerGroupSel, 'click', toggleShowGroup);
        EventMgr.obind(groupControlsSel, 'click', groupsControlHandler);
        EventMgr.obind(menuPosControlSel, 'click', setMenuPosition);
        EventMgr.obind(menuPosBtnSel, 'click', lockMenuPosition);
        EventMgr.obind($searchField(), 'keyup', searchHandler);
        EventMgr.obind(searchCloseBtnSel, 'click', searchItemsClear);
        EventMgr.bind('changeTabStatus', activateMenuItem);
        EventMgr.bind('closeTab', deactivateMenuItems);
        EventMgr.bind('comboCtrlShiftMKeyUp', focusSearchInput);
        EventMgr.obind($left(), 'mouseenter', showMenu);
        EventMgr.obind($left(), 'mouseleave', hideMenu);
        EventMgr.obind($topMenu(), 'change', topMenuHandler);
        EventMgr.bind('favoriteMenuUpdateDone', getFavoriteMenu);
        EventMgr.bind('menuObjectGot', updateFavoriteMenu);
      },
      /**
       * make popular and favorite menu
       */
      utilGroups = function() {
        //@TODO looks some messy
        //@TODO move it to xslt
        //add classes popular and favorite to parent
        $('.group .popular').parents('.group').addClass('popular');
        $('.group .favorite').parents('.group').addClass('favorite');
        // add classes unfavorite and unpopular for hidding it
        var self;
        $('.group').each(function() {
          self = $(this);
          if (!self.hasClass('favorite')) {
            self.addClass('unfavorite');
          }
          if (!self.hasClass('popular')) {
            self.addClass('unpopular');
          }
        });
      },

      $topMenu = function() {
        return $('#_select-tab0-val');
      },

      $left = function() {
        return $('#left');
      },

      $cbutton = function() {
        return $('#cbutton');
      },

      $menuItems = function() {
        return $('#menu-items a.textlink');
      },

      //wrapper for group
      $group = function() {
        return $('.group');
      },
      //wrapper for group's header
      headerGroupSel = '.h-group',
      //wrapper for elemetns which has class menev; menuType and plus/minus
      groupControlsSel = '.menev',
      // menu open/close button
      menuPosControlSel = '#mainmenu #cbutton, #mainmenu #mfb',

      menuPosBtnSel = '#menu-items-wr',

      $searchField = function() {
        return $('#m-search');
      },

      searchCloseBtnSel = '#close-search a',

      checkWidthItems = function() {
        var width,
            scrollWidth;
        $menuItems().each(function() {
          width = this.offsetWidth;
          scrollWidth = this.scrollWidth - 1;
          if (width < scrollWidth) {
            if (!this.className.match('overwidth')) {
              this.className += ' overwidth';
            }
          }
        });
      },

      menuScrollId = 'menu-items-wr',

      setMenuType = function(type) {
        var $menu = $('#menu-items');
        $menu.removeClass('favorite popular all').addClass(type);
        $('.menev').removeClass('active');
        $('#' + type).addClass('active');
        menuType = type;
      },

      lockMenuPosition = function(e) {
        if (!e.target.className.match('listened-elem')) {
          var body = $('body');
          if (body.hasClass('active-menu')) {
            return false;
          } else {
            // body.addClass('active-menu');
            setMenuPosition.apply(window, [{type: 'click'}]);
          }
        }
      },
      // first menu set up
      setMenuPosition = function(e, data) {
        var body = $('body'),
            left = $('#left'),
            content = $('#content'),
            cbutton = $cbutton(),
            menupos,
            tabId,
            elemTab;
        if (e.type === 'click') {
          //lol code! must think about!
          menupos = body.hasClass('active-menu') ? 'closed' : 'open';
          tabId = $('.tab-content_st_active').attr('data-tabid');
          elemTab = $('#cont-' + tabId);
          $('#sort_table-' + tabId).css('width', '100%');
          $('.block-table .sort_table').css('width', '100%');
          elemTab.addClass('table-manip');
          if (menupos === 'closed') {
            left.stop().animate({
              left: '-203'
            }, 300, function() {
              EventMgr.trigger('hideHint');
            });
            content.stop().animate({
              marginLeft: '0'
            }, 300);
            cbutton.stop().fadeIn(300);
          } else {
            content.stop().animate({
              marginLeft: '205'
            }, 300);
            cbutton.stop().fadeOut(300);
          }
          body.toggleClass('active-menu');
          setTimeout(function() {
            EventMgr.trigger('menuPositionChanged', {
              menupos: menupos,
              tabId: tabId
            });
            elemTab.removeClass('table-manip');
            menupos = null;
            tabId = null;
          }, 350);

        } else if (e.type === 'begin') {
          //console.log(data);
          menupos = data;
          if (menupos === 'closed') {
            body.toggleClass('active-menu');
          } else {
            content.css('marginLeft', '205px');
          }
        }
        $('#mfb').attr('data-state', menupos);
      },

      showMenu = function() {
        var self = $(this),
            body = $('body'),
            cbutton = $cbutton();
        if (!body.hasClass('active-menu')) {
          self.stop().animate({
            left: '0'
          }, 350);
          cbutton.stop().fadeOut(300);
        }
      },

      hideMenu = function() {
        var self = $(this),
            body = $('body'),
            cbutton = $cbutton();
        if (!body.hasClass('active-menu')) {
          self.stop().animate({
            left: '-203'
          }, 350);
          cbutton.stop().fadeIn(300);
        }
      },

      MenuSetUp = function(e, data) {
        var cookie = data,
            ee, curMenuPos, re, content, curMbar, keyVar;
        //set menu position
        ee = {};
        ee.type = 'begin';
        if (cookie.menupos) {
          re = new RegExp(pageInfo.product +
              '-' + pageInfo.level + '-' + '(open|closed)');
          curMenuPos = cookie.menupos.match(re);
          if (curMenuPos !== null) {
            setMenuPosition(ee, curMenuPos['1']);
          } else {
            content = $('#content');
            content.css('marginLeft', '205px');
          }
        } else {
          content = $('#content');
          content.css('marginLeft', '205px');
          setMenuPosition(ee, 'open');
        }
        //set menu type
        if (cookie.mbar) {
          re = new RegExp(pageInfo.product +
              '-' + pageInfo.level + '-' + '(all|popular|favorite)');
          if (cookie.mbar.match(re)) {
            curMbar = cookie.mbar.match(re);
            setMenuType(curMbar['1']);
          }
        } else {
          setMenuType('all');
        }
        //set menu items status
        if (cookie.menupane && cookie.menupane !== '') {
          /* jslint forin:true */
          for (keyVar in groups) {
            //check only collapsed
            re = new RegExp(groups[keyVar].level +
                '_' + groups[keyVar].id + '-0');
            if (cookie.menupane.match(re)) {
              groups[keyVar].disactivate();
            } else {
              re = new RegExp(groups[keyVar].level +
                '_' + groups[keyVar].id + '-1');
              if (cookie.menupane.match(re)) {
                groups[keyVar].activate();
              }
            }
          }
        }
        //check width for hint
        checkWidthItems();
      },
      // buildGroups
      buildGroups = function() {
        var group = $group(),
            pLength = group.length;
        for (var i = 0; i < pLength; i++) {
          groups[group[i].id] = new MenuGroup(pageInfo.level,
              group[i].id, '0', $(group[i]));
        }
      },
      // Handler for menu manipulation
      groupsControlHandler = function(e) {
        var controller = this.getAttribute('id');
        switch (controller) {
          case 'minus':
            collapseGroups('minus');
            break;
          case 'plus':
            collapseGroups('plus');
            break;
          case 'all':
            switchTypeMenu('all');
            break;
          case 'favorite':
            switchTypeMenu('favorite');
            break;
          case 'popular':
            switchTypeMenu('popular');
            break;
        }
        e.preventDefault();
      },
      // @method collapseGroups
      // @param {String} type Type of event; minus or plus
      collapseGroups = function(type) {
        var keyVar;
        if (type === 'minus') {
          /* jslint forin:true */
          for (keyVar in groups) {
            groups[keyVar].disactivate();
          }
        } else if (type === 'plus') {
          /* jslint forin:true */
          for (keyVar in groups) {
            groups[keyVar].activate();
          }
        }
        EventMgr.trigger('groupChanged', { groups: groups });
        EventMgr.trigger('updateScroll', { id: menuScrollId });
      },
      //@method switchTypeMenu
      //@param {String} type Type of Menu ; all, popular, favorite
      switchTypeMenu = function(type) {
        menuType = type;
        setMenuType(type);
        EventMgr.trigger('menuTypeChanged', type);
      },
      //show/hide groups
      toggleShowGroup = function(e) {
        var groupId = this.getAttribute('data-group');
        groups[groupId].toggle();
        EventMgr.trigger('groupChanged', { groups: groups });
        EventMgr.trigger('updateScroll', { id: menuScrollId });
        //check width for hint
        checkWidthItems();
        e.preventDefault();
      },

      lastTimeSearch = 0,

      indexMenuArray = [],

      REPLACEMENT = { 'q': 'й',
        'w': 'ц',
        'e': 'у',
        'r': 'к',
        't': 'е',
        'y': 'н',
        'u': 'г',
        'i': 'ш',
        'o': 'щ',
        'p': 'з',
        '[': 'х',
        ']': 'ъ',
        'a': 'ф',
        's': 'ы',
        'd': 'в',
        'f': 'а',
        'g': 'п',
        'h': 'р',
        'j': 'о',
        'k': 'л',
        'l': 'д',
        ';': 'ж',
        "'": 'э',
        'z': 'я',
        'x': 'ч',
        'c': 'с',
        'v': 'м',
        'b': 'и',
        'n': 'т',
        'm': 'ь',
        ',': 'б',
        '/': 'ю',
        'й': 'q',
        'ц': 'w',
        'у': 'e',
        'к': 'r',
        'е': 't',
        'н': 'y',
        'г': 'u',
        'ш': 'i',
        'щ': 'o',
        'з': 'p',
        'х': '[',
        'ъ': ']',
        'ф': 'a',
        'ы': 's',
        'в': 'd',
        'а': 'f',
        'п': 'g',
        'р': 'h',
        'о': 'j',
        'л': 'k',
        'д': 'l',
        'ж': ';',
        'э': "'",
        'я': 'z',
        'ч': 'x',
        'с': 'c',
        'м': 'v',
        'и': 'b',
        'т': 'n',
        'ь': 'm',
        'б': ',',
        'ю': '/',
        ' ': ' '
      },

      transformToMistakeLayout = function(string) {
        if (typeof string === 'string') {
          var stringArr = string.split(''),
              l = stringArr.length,
              mistakeString = new Array(l);
          while (l--) {
            if (REPLACEMENT[stringArr[l]]) {
              mistakeString[l] = REPLACEMENT[stringArr[l]];
            } else {
              mistakeString[l] = stringArr[l];
            }
          }
          return mistakeString.join('');
        }
      },

      indexMenu = function() {
        var item,
            self;
        $('#menu-items a.textlink').each(function() {
          item = {};
          self = $(this);
          item.parent = self.parent();
          item.text = self.text().toLowerCase();
          item.mistakeText = transformToMistakeLayout(item.text);
          item.parentGroup = self.parents('.group');
          indexMenuArray.push(item);
        });
      },
      //search for menu
      searchHandler = function(e) {
        var time = new Date().getTime(),
            value,
            valLen,
            $CloseBtn = $('#close-search');
        if ((time - lastTimeSearch) < 100) {
          lastTimeSearch = time;
          return;
        }
        lastTimeSearch = time;
        $CloseBtn.removeClass('not_active');
        value = this.value;
        valLen = value.length;
        if (valLen === 0) {
          searchItemsClear();
          $CloseBtn.addClass('not_active');
        } else if (valLen === 1) {
          searchItemsClear();
        } else if (valLen > 1) {
          //show close button
          searchItemsClear();
          searchItems(value);
        }
        EventMgr.trigger('updateScroll', { id: 'menu-items-wr' });
      },
      // close search
      searchItemsClear = function(e) {
        $('.cont').removeClass('cont');
        $('#mainmenu').removeClass('search');
        $('.s-hidden').removeClass('s-hidden');
        $('#m-search').removeClass('not_found');
        //if it from close button
        if (e) {
          $('#close-search').addClass('not_active');
          $searchField().val('');
          EventMgr.trigger('updateScroll', { id: 'menu-items-wr' });
        }
        scrollToActPosition();
      },
      scrollToActPosition = function() {
        var actMenu = $('.m-item.active'),
            TOPMARGIN = 67;
        if (actMenu.length) {
          EventMgr.trigger('scrollTo', {
            'raw': false,
            id: 'menu-items-wr',
            offsetTop: actMenu[0].offsetTop - TOPMARGIN });
        }
      },
      // Search function
      searchItems = function(term) {
        var count = 0,
            l = indexMenuArray.length,
            misTerm = transformToMistakeLayout(term);
        $('#mainmenu').addClass('search');
        while (l--) {
          if (indexMenuArray[l].text.indexOf(term.toLowerCase()) + 1 ||
              indexMenuArray[l].mistakeText.indexOf(term.toLowerCase()) + 1 ||
              indexMenuArray[l].text.indexOf(misTerm.toLowerCase()) + 1 ||
              indexMenuArray[l].mistakeText.indexOf(misTerm.toLowerCase()) + 1)
          {
            indexMenuArray[l].parent.removeClass('s-hidden');
            indexMenuArray[l].parentGroup.addClass('cont');
            count++;
          } else {
            indexMenuArray[l].parent.addClass('s-hidden');
          }
        }
        if (count === 0) {
          $('#m-search').addClass('not_found');
        } else {
          $('#m-search').removeClass('not_found');
        }
      },
      focusSearchInput = function(e, data) {
        $left().trigger('mouseenter');
        $searchField().focus();
      },
      //activate menu item
      activateMenuItem = function(e, data) {
        $('.m-item').removeClass('active');
        if (data.func) {
          var elem = App.Dom.byId('l-' + String(data.func).replace (/\./g, '_'));
          if (elem !== null) {
            elem.className += ' active';
          }
        }
      },

      deactivateMenuItems = function() {
        $('.m-item').removeClass('active');
      },

      topMenuHandler = function(e) {
        var action = this.value,
            elid = this.getAttribute('data-handler-val');
        EventMgr.trigger('ajaxRequest', {
          url: pageInfo.url,
          param: { func: action, elid: elid },
          invar: { },
          type: 'get',
          outtype: 'json',
          trfunc: 'ajaxResponse',
          failfunc: 'failCommonAjaxResponse',
          queue: 'noqueue' });

      },

      getFavoriteMenu = function(e, data) {
        EventMgr.trigger('ajaxRequest', {
          param: {
            func: 'desktop',
            out: 'sjson'
          },
          outtype: 'json',
          trfunc: 'menuObjectGot'
        });
      },

      getMessage = function(name, doc) {
        const messages = (doc && doc.messages && doc.messages.msg) || {} ;
        return messages[`menu_${name}`];
      },

      updateMenuItemText = function(name, $menuItem, doc) {
        const newMessage = getMessage(name, doc);
        if (newMessage && $menuItem) {
          $menuItem.children('a.textlink').text(newMessage);
        }
      }

      updateFavoriteMenu = function(e, data) {
          if (!data.doc.mainmenu) {
            return;
          }
        var mainmenu = data.doc.mainmenu,
            groups = mainmenu.node,
            groupLen = groups.length,
            groupItems, $menuItem, $groupItem,
            groupItem,
            groupItemLens,
            favoriteParent = false,
            menuItem;
        while (groupLen--) {
          groupItems = groups[groupLen].node;
          groupItem = groups[groupLen];
          groupItemLens = groupItems.length;
          favoriteParent = false;
          while (groupItemLens--) {
            menuItem = groupItems[groupItemLens];
            $menuItem = $('#l-' + String(menuItem.$name).replace(/\./g, '_'));

            if (menuItem.$favorite) {
              favoriteParent = true;
              if ($menuItem.hasClass('unfavorite')) {
                $menuItem.switchClass('favorite', 'unfavorite');
              }
            } else {
              if ($menuItem.hasClass('favorite')) {
                $menuItem.switchClass('unfavorite', 'favorite');
              }
            }

            updateMenuItemText(menuItem.$name, $menuItem, data.doc);

          }
          $groupItem = $('#' + String(groupItem.$name).replace(/\./g, '_'));
          if (favoriteParent) {
            if ($groupItem.hasClass('unfavorite')) {
              $groupItem.switchClass('favorite', 'unfavorite');
            }
          } else {
            if ($groupItem.hasClass('favorite')) {
              $groupItem.switchClass('unfavorite', 'favorite');
            }
          }
        }
      };

  return {
    init: init
  };

}(window, $, EventMgr, App));