aggregation-platform/plugins/navigation/ts/navigationPlugin.ts

/// <reference path="../../includes.ts"/>
module Navigation {

  export var pluginName = 'hawtio-navigation';
  export var log = Logger.get(pluginName);
  export var _module = angular.module(pluginName, []);

  _module.run(() =>{    
  });

  _module.service('HawtioBreadcrumbs', () => {
    var _config = [];
    var self = {
      apply: (config) => {
        _config.length = 0;
        _.forEach(config, (crumb) => {
          _config.push(crumb);
        });
      },
      get: () => {
        return _config;
      }
    };
    return self;
  });

  _module.service('HawtioSubTabs', () => {
    var _config = [];
    var self = {
      apply: (config) => {
        _config.length = 0;
        _.forEach(config, (crumb) => {
          _config.push(crumb);
        });
      },
      get: () => {
        return _config;
      } 
    } 
    return self;
  });

  _module.directive('hawtioRelativeHref', ['$location', ($location) => {
    return {
      restrict: 'A',
      link: (scope, element, attr) => {
        var targetPath = attr['hawtioRelativeHref'];
        var targetHref = new URI($location.url());
        targetHref.segment(targetPath);
        element.attr('href', targetHref.toString());
      }
    }
  }]);

  _module.directive('viewportHeight', ['$window', '$document', ($window, $document) => {
    return {
      restrict: 'A',
      link: (scope, element, attr) => {
        // log.debug("Window: ", $window);
        // log.debug("element: ", element);
        var win = $($window);
        var resizeFunc = () => {
          var viewportHeight = win.innerHeight();
          // log.debug("Viewport height: ", viewportHeight);
          var elTop = element.offset().top;
          // log.debug("Element top: ", elTop);
          var height = viewportHeight - elTop;
          element.css('height', height);
        };
        win.on('resize', resizeFunc);
        element.on('$destroy', () => {
          win.off('resize', resizeFunc);
        });
        setTimeout(resizeFunc, 50);
      }
    }
  }]);

  _module.directive('hawtioMainOutlet', ['HawtioSubTabs', (HawtioSubTabs) => {
    return {
      restrict: 'A',
      link: (scope, element, attrs) => {
        scope.tabs = HawtioSubTabs;
        scope.$watchCollection('tabs.get()', (tabs) => {
          // log.debug("subTabConfig: ", subTabConfig);
          if (tabs && tabs.length > 0) {
            element.removeClass('hidden-nav');
            element.css({ 'margin-left': '' });
          } else {
            element.addClass('hidden-nav');
            element.css({ 'margin-left': 'auto' });
          }
        });
      }
    };

  }]);

  _module.directive('hawtioTabsOutlet', ['HawtioSubTabs', (HawtioSubTabs) => {
    var initialized = false;
    return {
      restrict: 'AE',
      replace: true,
      template: `
        <div class="nav-pf-vertical nav-pf-vertical-with-secondary-nav" ng-controller="Developer.NavBarController" ng-class="getClass()">
          <div class="list-group">
            <div ng-repeat="subTab in subTabConfig" ng-show="true"
                class="list-group-item {{subTab.active ? 'active' : ''}}" >
                <a ng-hide="subTab.template" href="{{subTab.href}}">
                  <span ng-show="subTab.class" ng-class="subTab.class"></span>
                  <img ng-show="subTab.icon" ng-src="{{subTab.icon}}">
                  {{subTab.label}}
                </a>
                <div ng-show="subTab.template" compile="subTab.template"></div>
            </div>
          </>
        </div>
      `,
      link: (scope, element, attrs) => {
        if (!initialized) {
          try {
            //(<any>$)().setupVerticalNavigation(false);
          } catch (err) {
            // ignore if we haven't loaded patternfly
          }
          initialized = true;
        }
        scope.HawtioSubTabs = HawtioSubTabs;

        var collapsed = false;
        scope.getClass = () => {
          //log.debug("My class: ", element.attr('class'));
          if (!scope.subTabConfig || !scope.subTabConfig.length) {
            return 'hidden';
          }
          if (collapsed) {
            return 'collapsed';
          }
          return '';
        }
        scope.$on('hawtioCollapseNav', () => {
          collapsed = !collapsed;
        });
        scope.$watch('HawtioSubTabs.get()', (subTabConfig) => {
          scope.subTabConfig = subTabConfig;

        });
      }
    };
  }]);

  _module.directive('hawtioBreadcrumbsOutlet', ['HawtioBreadcrumbs', 'HawtioSubTabs', (HawtioBreadcrumbs, HawtioSubTabs) => {
    return {
      restrict: 'E',
      scope: {},
      template: `
        <div class="nav navbar-nav nav-breadcrumb nav-breadcrumbs" ng-show="breadcrumbConfig" ng-controller="Developer.NavBarController">
          <ol class="breadcrumb">
            <li ng-repeat="breadcrumb in breadcrumbConfig" ng-show="isValid(breadcrumb) && label(breadcrumb)"
                class="{{breadcrumb.active ? 'active' : ''}}"
                ng-class="$last ? 'dropdown' : ''"
                >
              <a ng-show="false" href="{{breadcrumb.href}}"></a>
              <span ng-hide="true">{{label(breadcrumb)}}</span>
            </li>
            <li ng-show="false">
              <span ng-bind="pageTitle"></span>
            </li>
          </ol>
        </div>
      `,
      link: (scope, element, attrs) =>  {
        scope.breadcrumbs = HawtioBreadcrumbs;
        scope.tabs = HawtioSubTabs;
        scope.$watchCollection('breadcrumbs.get()', (breadcrumbConfig) => {
          scope.breadcrumbConfig = breadcrumbConfig;          
        });
        scope.$watchCollection('tabs.get()', (tabs) => {        
          var active = _.find(tabs, (tab:any) => tab.active);
          if (active) {
            scope.pageTitle = active.label;
          } else {
            scope.pageTitle = undefined;
          }
        });
      }
    };
  }]);

  _module.directive('platformSubTabsOutlet', ['HawtioSubTabs', (HawtioSubTabs) => {
    var initialized = false;
    return {
      restrict: 'AE',
      replace: true,
      template: `
        <div class="nav-pf-vertical nav-pf-vertical-with-secondary-nav sj_menu"  ng-controller="Developer.NavBarController" ng-class="getClass()">
          <ul class="navbar-lf-menu "  >
            <li ng-repeat="subTab in subTabConfig " >
              <div class="expandable closed "  ng-show="subTab.items.length" style=" padding:0;">
                <div class="title sj_menu_nav" >
                  <i class=" sj_menu_01" >{{subTab.label}}</i> 
                </div>
                <ul class="expandable-body  sj_menu_ul" >
                  <li ng-repeat="item in subTab.items" >
                    <a href="{{item.href}}" >{{item.label}}</a>
                  </li>
                </ul>
              </div>
              <div ng-hide="subTab.items.length" class="title sj_menu_nav" >
                <i class=" sj_menu_02" ></i><a href="{{subTab.href}}">{{subTab.label}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>               
              </div>
            </li>  
          </ul>
        </div> 
      `,
      link: (scope, element, attrs) => {
        if (!initialized) {
          try {
            //(<any>$)().setupVerticalNavigation(false);
          } catch (err) {
            // ignore if we haven't loaded patternfly
          }
          initialized = true;
        }
        scope.HawtioSubTabs = HawtioSubTabs;

        var collapsed = false;
        scope.getClass = () => {
          //log.debug("My class: ", element.attr('class'));
          if (!scope.subTabConfig || !scope.subTabConfig.length) {
            return 'hidden';
          }
          if (collapsed) {
            return 'collapsed';
          }
          return '';
        }
        scope.$on('hawtioCollapseNav', () => {
          collapsed = !collapsed;
        });
        scope.$watch('HawtioSubTabs.get()', (subTabConfig) => {
          scope.subTabConfig = subTabConfig;

        });
      }
    };
  }]);

  //hawtioPluginLoader.addModule('patternfly');

  hawtioPluginLoader.addModule(pluginName);

}