Your IP : 18.117.174.43


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

/***
 * Toolbar grouping buttons
 *  @param {object} window  global object
 *  @param {function} $ jQuery library
 *  @param {object} EventMgr EventMgr library
 *  @param {object} App Application
 */
App.Toolbar = function(window, $, EventMgr, App) {
  'use strict';
  var init = function() {
    EventMgr.bind('appendList', initToolbar);
    EventMgr.bind('menuPositionChanged', windowResize);
    EventMgr.obind($(window), 'resize', windowResize);
    EventMgr.on('#main-wrapper', toolgrpSelector, 'mouseover', setPosition);
  },

      toolgrpSelector = '.toolgrp.collapsed',

      timeId,

      appDom = App.Dom,
      /**
       * set marginLeft for centring expanded toolbuttons
       * @this {Node}
       */
      setPosition = function() {
        var width = this.offsetWidth,
            id = this.getAttribute('data-id'),
            bag = appDom.byId('tb-' + id),
            bWidth = bag.offsetWidth,
            diff;
        diff = (width - bWidth) / 2;
        bag.style.marginLeft = diff + 'px';
      },
      /**
       * check for overflow
       * @param {Node} elem
       * @return {boolean}
       */
      checkOverWidth = function(elem) {
        if ((elem.offsetWidth + 3) < elem.scrollWidth) {
          return true;
        }
        return false;
      },
      /**
       * collapse toolbuttons
       * @param {HTML array} tGroups
       * @param {Node} toolbar
       * @param {String} tabId
       * @return {boolean}
       */
      collapseToolBtn = function(tGroups, toolbar, tabId) {
        var overwidth = true,
            collapsed = false,
            name, tl, toolbag, bagElems,
            l = tGroups.length;
        while (overwidth && l--) {
          name = tGroups[l].getAttribute('data-name');
          toolbag = appDom.byId('tb-' + tabId + '-' + name);
          bagElems = toolbag.childNodes;
          tl = bagElems.length;
          if (tl > 0) {
            collapsed = true;
            appDom.addClass(tGroups[l], 'collapsed');
          }
          collapsed = true;
          overwidth = checkOverWidth(toolbar);
        }
        return collapsed;
      },
      /**
       * Expand toolbuttons
       * @param {HTML array} tGroups
       * @param {Node} toolbar
       * @param {string} tabId
       * @return {boolean}
       */
      expandToolBtn = function(tGroups, toolbar, tabId) {
        var l = tGroups.length,
            collapsed = false,
            overwidth, i, name, tl, toolbag, bagElems;
        for (i = 0; i < l; i++) {
          name = tGroups[i].getAttribute('data-name');
          toolbag = appDom.byId('tb-' + tabId + '-' + name);
          toolbag.style.marginLeft = 0;
          bagElems = toolbag.childNodes;
          tl = bagElems.length;
          appDom.removeClass(tGroups[i], 'collapsed');
          overwidth = checkOverWidth(toolbar);
          if (overwidth) {
            if (tl > 0) {
              appDom.addClass(tGroups[i], 'collapsed');
            }
            collapsed = true;
            break;
          }
        }
        return collapsed;
      },
      /**
       * check size when append tab
       * @param {object} e
       * @param {object} data
       */
      initToolbar = function(e, data) {
        var tabId = data.tabId,
            toolbar = appDom.byId('toolbar-' + tabId),
            tGroups = $('#toolbar-' + tabId + ' .toolgrp'),
            overwidth,
            collapsed = false;
        if (!toolbar) { return; }
        overwidth = checkOverWidth(toolbar);

        if (overwidth) {
          collapsed = collapseToolBtn(tGroups, toolbar, tabId);
        }

        if (collapsed) {
          appDom.addClass(toolbar, 'collapsed');
        }
      },
      /**
       * check size when resize window
       * @param {string} tabId
       */
      checkToolbar = function(tabId) {
        var toolbar = appDom.byId('toolbar-' + tabId),
            collapsed = appDom.hasClass(toolbar, 'collapsed'),
            tGroups = $('#toolbar-' + tabId + ' .toolgrp'),
            overwidth;
        if (!toolbar) { return; }
        overwidth = checkOverWidth(toolbar);
        if (collapsed && !overwidth) {
          collapsed = expandToolBtn(tGroups, toolbar, tabId);
        } else if (overwidth) {
          collapsed = collapseToolBtn(tGroups, toolbar, tabId);
        }
        if (collapsed) {
          appDom.addClass(toolbar, 'collapsed');
        } else {
          appDom.removeClass(toolbar, 'collapsed');
        }
      },

      resizeHandler = function(e, data) {
        var tabId,
            tabElem;
        if (!data) {
          tabElem = $('.tab-content_st_active');
          tabId = tabElem.attr('data-tabid');
        } else {
          tabId = data.tabId;
          tabElem = $('#cont-' + tabId);
        }
        if (tabElem.attr('data-tab-type') === 'list') {
          checkToolbar(tabId);
        }
      },

      windowResize = function() {
        clearTimeout(timeId);
        timeId = setTimeout(function() {
          resizeHandler();
        }, 100);
      };

  return {
    init: init
  };

}(window, $, EventMgr, App);