Skip to content

Commit d99a10b

Browse files
dtaylor113dtaylor113
authored
Merge pull request #345 from lorthirk/pfVerticalNavigation-uiSref-support
Pf vertical navigation ui sref support
2 parents 40f89b3 + e856119 commit d99a10b

File tree

8 files changed

+890
-578
lines changed

8 files changed

+890
-578
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,5 @@ node_modules
2727
npm-debug.log
2828
lib
2929
.bower
30+
31+
.vscode

‎Gruntfile.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,8 @@ module.exports = function (grunt) {
139139
'lib/angular-bootstrap/ui-bootstrap-tpls.js',
140140
'misc/angular-bootstrap-prettify.js',
141141
'lib/lodash/lodash.min.js',
142-
'dist/angular-patternfly.js'],
142+
'dist/angular-patternfly.js',
143+
'lib/angular-ui-router/release/angular-ui-router.min.js'],
143144
html5Mode: false,
144145
template: 'grunt-ngdocs-index.tmpl',
145146
styles: ['lib/patternfly/dist/css/patternfly.css', 'lib/patternfly/dist/css/patternfly-additions.css',

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"patternfly": "~3.14.0"
4646
},
4747
"devDependencies": {
48-
"angular-mocks": "1.3.0 - 1.5.*"
48+
"angular-mocks": "1.3.0 - 1.5.*",
49+
"angular-ui-router": "^0.3.2"
4950
}
5051
}

‎src/navigation/examples/vertical-navigation-basic.js‎

Lines changed: 567 additions & 0 deletions
Large diffs are not rendered by default.

‎src/navigation/examples/vertical-navigation-router.js‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.navigation.directive:pfVerticalNavigation - Router
4+
*
5+
* @description
6+
* This example shows how to use pfVerticalNavigation with angular-ui-router's $states and uiSrefs.
7+
*
8+
* @param {string} brandSrc src for brand image
9+
* @param {string} brandAlt Text for product name when brand image is not available
10+
* @param {boolean} showBadges Flag if badges are used on navigation items, default: false
11+
* @param {boolean} persistentSecondary Flag to use persistent secondary menus, default: false
12+
* @param {boolean} hiddenIcons Flag to not show icons on the primary menu, 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>.children - (array) Submenu items (same structure as top level items)
19+
* <li>.badges - (array) Badges to display for the item, badges with a zero count are not displayed.
20+
* <ul style='list-style-type: none'>
21+
* <li>.count - (number) Count to display in the badge
22+
* <li>.iconClass - (string) Class to use for showing an icon before the count
23+
* <li>.tooltip - (string) Tooltip to display for the badge
24+
* <li>.badgeClass: - (string) Additional class(es) to add to the badge container
25+
* </ul>
26+
* </ul>
27+
* @param {function} navigateCallback function(item) Callback method invoked on a navigation item click (one with no submenus)
28+
* @param {function} itemClickCallback function(item) Callback method invoked on an item click
29+
* @param {boolean} updateActiveItemsOnClick Flag if active items should be marked on click rather than on navigation change, default: false
30+
* @param {boolean} ignoreMobile Flag if mobile state should be ignored (use only if absolutely necessary) default: false
31+
*
32+
* @example
33+
<example module="myApp" deps="patternfly.utils, patternfly.filters, patternfly.sort, patternfly.views">
34+
<file name="index.html">
35+
<div>
36+
<button class="btn btn-primary" id="showVerticalNavWithRouter" onclick="showVerticalNavWithRouter">Show Vertical Navigation with UIRouter</button>
37+
<label class="example-info-text">This will display the vertical nav bar and some mock content over the content of this page.</label>
38+
<label class="example-info-text">Exit the demo to return back to this page.</label>
39+
</div>
40+
<div id="verticalNavWithRouterLayout" class="layout-pf layout-pf-fixed faux-layout hidden" ng-controller="vertNavWithRouterController">
41+
<div pf-vertical-navigation items="navigationItems" brand-alt="ANGULAR PATTERNFLY"
42+
show-badges="true" pinnable-menus="true" update-active-items-on-click="true"
43+
navigate-callback="handleNavigateClickRouter">
44+
<div>
45+
<ul class="nav navbar-nav">
46+
<li><button id="hideVerticalNavWithRouter" class="hide-vertical-nav">Exit Vertical Navigation Demo</button></li>
47+
</ul>
48+
<ul class="nav navbar-nav navbar-right navbar-iconic">
49+
<li class="dropdown">
50+
</li>
51+
<li class="dropdown">
52+
<a class="dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
53+
<span title="Help" class="fa pficon-help"></span>
54+
<span class="caret"></span>
55+
</a>
56+
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
57+
<li><a href="#">Help</a></li>
58+
<li><a href="#">About</a></li>
59+
</ul>
60+
</li>
61+
<li class="dropdown">
62+
<a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
63+
<span title="Username" class="fa pficon-user"></span>
64+
<span class="caret"></span>
65+
</a>
66+
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
67+
<li><a href="#">Preferences</a></li>
68+
<li><a href="#">Logout</a></li>
69+
</ul>
70+
</li>
71+
</ul>
72+
</div>
73+
</div>
74+
<div id="contentContainer" class="container-fluid container-cards-pf container-pf-nav-pf-vertical example-page-container">
75+
<ui-view>
76+
<!-- Content will be added here -->
77+
</ui-view>
78+
</div>
79+
</div>
80+
</file>
81+
<file name="script.js">
82+
angular.module('myApp',['patternfly.navigation', 'ui.router'])
83+
.config(function($stateProvider, $urlRouterProvider) {
84+
$urlRouterProvider.otherwise('dashboard');
85+
86+
$stateProvider
87+
.state('dashboard', {
88+
url: '/dashboard',
89+
template: '<div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
90+
<div class="card-pf-body" style="height: 50px;">\
91+
<p class="card-pf-aggregate-status-notifications">\
92+
State: Dashboard\
93+
</p>\
94+
</div>\
95+
</div>'
96+
})
97+
.state('dolor', {
98+
url: '/dolor',
99+
template: '<div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
100+
<div class="card-pf-body" style="height: 50px;">\
101+
<p class="card-pf-aggregate-status-notifications">\
102+
State: Dolor\
103+
</p>\
104+
</div>\
105+
</div>'
106+
})
107+
.state('ipsum', {
108+
url: '/ipsum',
109+
template: '<div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
110+
<div class="card-pf-body" style="height: 50px;">\
111+
<p class="card-pf-aggregate-status-notifications">\
112+
State: Ipsum\
113+
</p>\
114+
</div>\
115+
</div>'
116+
});
117+
})
118+
.controller('vertNavWithRouterController', ['$scope',
119+
function ($scope) {
120+
$scope.navigationItems = [
121+
{
122+
title: "Dashboard",
123+
iconClass: "fa fa-dashboard",
124+
uiSref: "dashboard"
125+
},
126+
{
127+
title: "Dolor",
128+
iconClass : "fa fa-shield",
129+
uiSref: "dolor"
130+
},
131+
{
132+
title: "Ipsum",
133+
iconClass : "fa fa-space-shuttle",
134+
uiSref: "ipsum"
135+
},
136+
{
137+
title: "Exit Demo"
138+
}
139+
];
140+
$scope.handleNavigateClickRouter = function (item) {
141+
if (item.title === "Exit Demo") {
142+
angular.element(document.querySelector("#verticalNavWithRouterLayout")).addClass("hidden");
143+
}
144+
};
145+
}
146+
]);
147+
</file>
148+
<file name="hide-show.js">
149+
$(document).ready(function() {
150+
$(document).on('click', '#showVerticalNavWithRouter', function() {
151+
$(document.getElementById("verticalNavWithRouterLayout")).removeClass("hidden");
152+
});
153+
$(document).on('click', '#hideVerticalNavWithRouter', function() {
154+
$(document.getElementById("verticalNavWithRouterLayout")).addClass("hidden");
155+
});
156+
});
157+
</file>
158+
</example>
159+
*/

0 commit comments

Comments
 (0)