Module: AppBar

Author:

• Vincent Romanus <vincent.romanus (at) kiwigrid.com>

Copyright:

• Kiwigrid GmbH 2014-2015

Source:

• directives/app-bar.js, line 3

Examples

<div data-keta-app-bar
    data-event-bus-id="eventBusId"
    data-locales="locales"
    data-current-locale="currentLocale"
    data-fallback-locale="fallbackLocale"
    data-labels="labels"
    data-links="links"
    data-worlds="worlds"
    data-display-modes="displayModes"
    data-root-app="rootApp">
    <a data-ng-href="{{rootApp.link}}" title="{{rootApp.name[currentLocale]}}">
        <img src="img/logo.svg">
    </a>
</div>

<div data-keta-app-bar
    data-event-bus-id="eventBusId"
    data-locales="locales"
    data-current-locale="currentLocale"
    data-fallback-locale="fallbackLocale"
    data-labels="labels"
    data-links="links"
    data-worlds="worlds"
    data-display-modes="displayModes">
    <a data-ng-href="/" title="My App root">
        <img src="img/logo.svg">
    </a>
</div>

angular.module('exampleApp', ['keta.directives.AppBar'])
    .controller('ExampleController', function($scope, ketaAppBarMessageKeys) {

        // id of eventBus instance to use to retrieve data
        $scope.eventBusId = 'kiwibus';

        // array of locales to use for language menu
        $scope.locales = [{
            name: 'Deutsch',
            nameShort: 'DE',
            code: 'de_DE'
        }, {
            name: 'English',
            nameShort: 'EN',
            code: 'en_GB'
        }];

        // current locale
        $scope.currentLocale = 'de_DE';

        // fallback if locale from user profile is not
        // found in the $scope.locales array.
        $scope.fallbackLocale = 'en_GB';

        // override default-labels if necessary
        // get default labels
        $scope.labels = ketaAppBarMessageKeys;

        // use case 1: overwrite specific key
        $scope.labels.de_DE['__keta.directives.AppBar_app_title'] = 'Meine App';

        // use case 2: add locale
        $scope.labels.fr_FR = {
            '__keta.directives.AppBar_app_title': 'Applications',
            '__keta.directives.AppBar_all_apps': 'Toutes les applications',
            '__keta.directives.AppBar_all_energy_managers': 'toutes les Energy-Managers',
            '__keta.directives.AppBar_energy_manager': 'Energy-Manager',
            '__keta.directives.AppBar_user_logout': 'Se Déconnecter',
            '__keta.directives.AppBar_user_profile': 'Profil de l'utilisateur'
        };

        // object of link to use in template
        // the directive sets default links that can be overwritten by the keys of this object
        $scope.links = {
            ALL_APPS: '/#/applications/',
            ALL_ENERGY_MANAGERS: '?deviceClass=com.kiwigrid.devices.EnergyManager/#/devices',
            APP_ROOT: '/#/landing-page',
            USER_PROFILE: '/#/users/profile',
            USER_LOGOUT: '/#/users/logout'
        };

        // array of worlds to display in world switcher
        // the first world ('Desktop') is automatically prepended as first menu-entry
        $scope.worlds = [{
            name: 'Market',
            link: 'https://market.mycompany.com'
        }, {
            name: 'Service',
            link: 'https://service.mycompany.com'
        }];

        // object to configure display modes at size xxs, xs, sm, md, and lg
        $scope.displayModes = {
            worldSwitcher: {
                xxs: 'hidden',
                xs: 'hidden',
                sm: 'hidden',
                md: 'hidden',
                lg: 'hidden'
            },
            menuBarToggle: {
                xxs: 'hidden',
                xs: 'compact',
                sm: 'full',
                md: 'full',
                lg: 'full'
            },
            notificationBarToggle: {
                xxs: 'hidden',
                xs: 'hidden',
                sm: 'hidden',
                md: 'hidden',
                lg: 'hidden'
            },
            appTitle: {
                xxs: 'hidden',
                xs: 'hidden',
                sm: 'full',
                md: 'full',
                lg: 'full'
            },
            userMenu: {
                xxs: 'hidden',
                xs: 'compact',
                sm: 'full',
                md: 'full',
                lg: 'full'
            },
            languageMenu: {
                xxs: 'hidden',
                xs: 'compact',
                sm: 'full',
                md: 'full',
                lg: 'full'
            },
            energyManagerMenu: {
                xxs: 'hidden',
                xs: 'compact',
                sm: 'full',
                md: 'full',
                lg: 'full'
            },
            compactMenu: {
                xxs: 'full',
                xs: 'full',
                sm: 'hidden',
                md: 'hidden',
                lg: 'hidden'
            }
        };

        // object of root app to use in transclusion template
        // will be filled automatically by directive
        $scope.rootApp = {};

    });