Skip to content

Commit 3fb9252

Browse files
cdcabreracdcabrera
committed
Feature Application Launcher
Application launcher component
1 parent 4c63276 commit 3fb9252

File tree

3 files changed

+199
-0
lines changed

3 files changed

+199
-0
lines changed

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

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

‎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': !$ctrl.isList}"
3+
uib-dropdown
4+
uib-keyboard-nav="true">
5+
<a id="domain-switcher-{{$ctrl.$id}}" class="dropdown-toggle drawer-pf-trigger-icon" uib-dropdown-toggle ng-class="{'disabled': $ctrl.isDisabled || !$ctrl.items.length}" href>
6+
<i class="fa fa-th applauncher-pf-icon" aria-hidden="true"></i>
7+
<span class="applauncher-pf-title">
8+
{{$ctrl.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-{{$ctrl.$id}}">
16+
<li class="applauncher-pf-item" role="menuitem" ng-repeat="item in $ctrl.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="!$ctrl.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('Component: 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 = '<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 = '<pf-application-launcher items="sites" label="Product Launcher" is-disabled="false" 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 = '<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 = '<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 = '<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)