saas-platform/frontend/saas-web/app/view/main/MainController.js

/**
 * This class is the controller for the main view for the application. It is specified as
 * the "controller" of the Main view class.
 */
Ext.define('saas.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.main',

    init: function() {
        this.setCompanyMenu();
    },

    setCompanyMenu: function() {
        var me = this, view = me.getView(), viewModel = me.getViewModel(),
            account = viewModel.get('account'), companies = account && account.companies,
            companyMenu = view.lookup('mainprofile').getMenu(), items = [];
        if (companies) {
            items = companies.map(function(c){
                return {
                    text: c.name,
                    value: c.id,
                    handler: 'selectCompany',
                    iconCls: c.id == account.companyId ? 'x-fa fa-check' : ''
                }
            });
        }
        companyMenu.insert(0, items);
    },

    onToggleNavigationSize: function () {
        var me = this,
        viewModel = me.getViewModel(),
        refs = me.getReferences(),
        navigationList = refs.navigationTreeList,
        navCollapsed = !navigationList.navCollapsed,
        new_width = navCollapsed ? viewModel.get('smallNavWidth') : viewModel.get('navWidth'),
        newLogoImgStyle = navCollapsed ? {
            width: 50,
            top: 7,
            left: 6
        } : {
            width: 64,
            top: 0,
            left: 20
        },
        newLogoTextStyle = navCollapsed ? {
            10: {
                opacity: 0.7
            },
            30: {
                opacity: 0
            },
            100: {
                opacity: 0
            }
        } : {
            25: {
                opacity: 0 
            },
            50: {
                opacity: 1
            }
        },
        newNavIconStyle = navCollapsed ? {
            marginLeft: 6,
            fontSize: 28
        } : {
            marginLeft: 40,
            fontSize: 24
        },
        newNavTextStyle = navCollapsed ? {
            opacity: 0
        } : {
            opacity: 1
        },
        ope = navCollapsed ? 'addCls' : 'removeCls';
        
        var mainLogo = refs.mainLogo;
        var logoImg = mainLogo.el.dom.getElementsByTagName('img')[0];
        var logoText = mainLogo.el.dom.getElementsByClassName('logo-text')[0];
        var navItems = navigationList.el.dom.getElementsByClassName('x-navitem');

        mainLogo.animate({dynamic: true, duration: 500, to: {width: new_width}});
        Ext.fly(logoImg).animate({dynamic: true, duration: 500, to: newLogoImgStyle});
        Ext.fly(logoText).animate({dynamic: true, duration: 500, keyframes: newLogoTextStyle});
        navigationList.body.animate({dynamic: true, duration: 500, to: {width: new_width}});
        navigationList.animate({dynamic: true, duration: 500, to: {width: new_width}});

        for(var i = 0; i < navItems.length; i++) {
            var item = navItems[i];
            var icon = item.getElementsByClassName('nav-inner-icon')[0];
            var text = item.getElementsByClassName('nav-inner-text')[0];

            Ext.fly(icon).animate({dynamic: true, duration: 500, to: newNavIconStyle});
            Ext.fly(text).animate({dynamic: true, duration: 500, to: newNavTextStyle});
        }

        navigationList.el[ope]('nav-collapsed');

        navigationList.navCollapsed = navCollapsed;

    },

    selectCompany: function(item) {
        this.fireEvent('selectCompany', item.value);
    },

    onLogout: function() {
        this.fireEvent('logout');
    }
});