Skip to content

Commit 197402b

Browse files
bleathembleathem
authored
Merge pull request #446 from cdcabrera/FEATURE-launcher
Feature Application Launcher 3.x
2 parents 5cb97c8 + f2debd1 commit 197402b

File tree

3 files changed

+198
-0
lines changed

3 files changed

+198
-0
lines changed

‎src/navigation/application-launcher-directive.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.navigation.directive:pfApplicationLauncher
4+
*
5+
* @description
6+
* Directive for rendering application launcher dropdown.
7+
*
8+
* @param {string=} label Use a custom label for the launcher, default: Application Launcher
9+
* @param {boolean=} isDisabled Disable the application launcher button, default: false
10+
* @param {boolean=} isList Display items as a list instead of a grid, default: false
11+
* @param {boolean=} hiddenIcons Flag to not show icons on the launcher, default: false
12+
* @param {array} items List of navigation items
13+
* <ul style='list-style-type: none'>
14+
* <li>.title - (string) Name of item to be displayed on the menu
15+
* <li>.iconClass - (string) Classes for icon to be shown on the menu (ex. "fa fa-dashboard")
16+
* <li>.href - (string) href link to navigate to on click
17+
* <li>.tooltip - (string) Tooltip to display for the badge
18+
* </ul>
19+
* @example
20+
<example module="patternfly.navigation">
21+
<file name="index.html">
22+
<div ng-controller="applicationLauncherController" class="row">
23+
<div class="col-xs-12 pre-demo-text">
24+
<label>Click the launcher indicator to show the Application Launcher Dropdown:</label>
25+
</div>
26+
<nav class="navbar navbar-pf navbar-collapse">
27+
<ul class="nav navbar-left">
28+
<li>
29+
<div pf-application-launcher="" items="navigationItems" label="{{label}}" is-disabled="isDisabled" is-list="isList" hidden-icons="hiddenIcons"></div>
30+
</li>
31+
</ul>
32+
</nav>
33+
</div>
34+
</file>
35+
<file name="script.js">
36+
angular.module('patternfly.navigation').controller('applicationLauncherController', ['$scope',
37+
function ($scope) {
38+
$scope.navigationItems = [
39+
{
40+
title: "Recteque",
41+
href: "#/ipsum/intellegam/recteque",
42+
tooltip: "Launch the Function User Interface",
43+
iconClass: "pficon-storage-domain"
44+
},
45+
{
46+
title: "Suavitate",
47+
href: "#/ipsum/intellegam/suavitate",
48+
tooltip: "Launch the Function User Interface",
49+
iconClass: "pficon-build"
50+
},
51+
{
52+
title: "Lorem",
53+
href: "#/ipsum/intellegam/lorem",
54+
tooltip: "Launch the Function User Interface",
55+
iconClass: "pficon-domain"
56+
},
57+
{
58+
title: "Home",
59+
href: "#/ipsum/intellegam/home",
60+
tooltip: "Launch the Function User Interface",
61+
iconClass: "pficon-home"
62+
}
63+
];
64+
65+
$scope.label = 'Application Launcher';
66+
$scope.isDisabled = false;
67+
$scope.isList = false;
68+
$scope.hiddenIcons = false;
69+
}]);
70+
</file>
71+
</example>
72+
*/
73+
angular.module('patternfly.navigation').directive('pfApplicationLauncher', [
74+
function () {
75+
'use strict';
76+
77+
return {
78+
restrict: 'A',
79+
scope: {
80+
items: '&',
81+
label: '@?',
82+
isDisabled: '&?',
83+
isList: '&?',
84+
hiddenIcons: '&?'
85+
},
86+
templateUrl: 'navigation/application-launcher.html'
87+
};
88+
}]);
89+

‎src/navigation/application-launcher.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div>
2+
<div class="applauncher-pf dropdown dropdown-kebab-pf" ng-class="{'applauncher-pf-block-list': !isList()}"
3+
uib-dropdown
4+
uib-keyboard-nav="true">
5+
<a id="domain-switcher-{{$id}}" class="dropdown-toggle drawer-pf-trigger-icon" uib-dropdown-toggle ng-class="{'disabled': isDisabled() || !items().length}" href>
6+
<i class="fa fa-th applauncher-pf-icon" aria-hidden="true"></i>
7+
<span class="applauncher-pf-title">
8+
{{label || 'Application Launcher'}}
9+
<span class="caret" aria-hidden="true"></span>
10+
</span>
11+
</a>
12+
<ul class="dropdown-menu dropdown-menu-right"
13+
uib-dropdown-menu
14+
role="menu"
15+
aria-labelledby="domain-switcher-{{$id}}">
16+
<li class="applauncher-pf-item" role="menuitem" ng-repeat="item in items()">
17+
<a class="applauncher-pf-link" ng-href="{{item.href}}" target="{{item.target || '_blank'}}" title="{{item.tooltip}}">
18+
<i class="applauncher-pf-link-icon pficon" ng-class="item.iconClass" ng-if="!hiddenIcons()" aria-hidden="true"></i>
19+
<span class="applauncher-pf-link-title">{{item.title}}</span>
20+
</a>
21+
</li>
22+
</ul>
23+
</div>
24+
</div>
25+

‎test/navigation/application-launcher.spec.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
describe('Directive: pfApplicationLauncher', function () {
2+
3+
var $scope;
4+
var $compile;
5+
var element;
6+
var isolateScope;
7+
8+
// load the controller's module
9+
beforeEach(function () {
10+
module('patternfly.navigation', 'patternfly.utils', 'navigation/application-launcher.html');
11+
});
12+
13+
beforeEach(inject(function (_$compile_, _$rootScope_) {
14+
$compile = _$compile_;
15+
$scope = _$rootScope_;
16+
}));
17+
18+
var compileHTML = function (markup, scope) {
19+
element = angular.element(markup);
20+
$compile(element)(scope);
21+
22+
scope.$digest();
23+
isolateScope = element.isolateScope();
24+
};
25+
26+
beforeEach(function () {
27+
$scope.sites = [
28+
{
29+
title: "Recteque",
30+
href: "#/ipsum/intellegam/recteque",
31+
tooltip: "Total number of error items",
32+
iconClass: ""
33+
},
34+
{
35+
title: "Suavitate",
36+
href: "#/ipsum/intellegam/suavitate",
37+
tooltip: "Total number of items",
38+
iconClass: ""
39+
}
40+
];
41+
});
42+
43+
it('should have menu items', function () {
44+
var htmlTmp = '<div pf-application-launcher items="sites" label="" is-disabled="false" is-list="false"></div>';
45+
compileHTML(htmlTmp, $scope);
46+
47+
var content = element.find('[role="menuitem"]');
48+
expect(content.length).toBe(2);
49+
});
50+
51+
it('should have a custom label', function () {
52+
var htmlTmp = '<div pf-application-launcher items="sites" label="Product Launcher" is-disabled="true" is-list="false" hidden-icons="false"></div>';
53+
compileHTML(htmlTmp, $scope);
54+
55+
var content = element.find('[id*="domain-switcher"]').text();
56+
expect(content).toContain('Product Launcher');
57+
});
58+
59+
it('should be disabled', function () {
60+
var htmlTmp = '<div pf-application-launcher items="sites" label="" is-disabled="true" is-list="false" hidden-icons="false"></div>';
61+
compileHTML(htmlTmp, $scope);
62+
63+
var content = element.find('[id*="domain-switcher"].disabled');
64+
expect(content.length).toBe(1);
65+
});
66+
67+
it('should be displayed as a list', function () {
68+
var htmlTmp = '<div pf-application-launcher items="sites" label="" is-disabled="false" is-list="true" hidden-icons="false"></div>';
69+
compileHTML(htmlTmp, $scope);
70+
71+
var content = element.find('.applauncher-pf-block-list');
72+
expect(content.length).toBe(0);
73+
});
74+
75+
it('should have hidden application icons', function () {
76+
var htmlTmp = '<div pf-application-launcher items="sites" label="" is-disabled="false" is-list="true" hidden-icons="true"></div>';
77+
compileHTML(htmlTmp, $scope);
78+
79+
var content = element.find('.applauncher-pf-link-icon');
80+
expect(content.length).toBe(0);
81+
});
82+
83+
});
84+

0 commit comments

Comments
 (0)