Skip to content

Commit 2cf0bfc

Browse files
jeff-phillips-18jeff-phillips-18
committed
Update directives to be non-jquery dependent where possible
1 parent d30ea84 commit 2cf0bfc

File tree

10 files changed

+396
-387
lines changed

10 files changed

+396
-387
lines changed

‎src/filters/filter-fields.html‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,30 @@
11
<div class="filter-pf filter-fields">
2-
<form>
3-
<div class="form-group toolbar-pf-filter">
4-
<div class="input-group">
5-
<div uib-dropdown class="input-group-btn">
6-
<button uib-dropdown-toggle type="button" class="btn btn-default filter-fields" uib-tooltip="Filter by" tooltip-placement="top">
7-
{{currentField.title}}
8-
<span class="caret"></span>
9-
</button>
10-
<ul uib-dropdown-menu>
11-
<li ng-repeat="item in config.fields">
12-
<a class="filter-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
13-
{{item.title}}
14-
</a>
15-
</li>
16-
</ul>
17-
</div>
18-
<div ng-if="currentField.filterType !== 'select'">
19-
<input class="form-control" type="{{currentField.filterType}}" ng-model="config.currentValue"
20-
placeholder="{{currentField.placeholder}}"
21-
ng-keypress="onValueKeyPress($event)"/>
22-
</div>
23-
<div ng-if="currentField.filterType === 'select'">
24-
<select pf-select class="form-control filter-select" id="currentValue"
25-
ng-model="config.currentValue"
26-
ng-options="filterValue for filterValue in currentField.filterValues"
27-
ng-change="selectValue(config.currentValue)">
28-
<option value="">{{currentField.placeholder}}</option>
29-
</select>
30-
</div>
31-
</div>
2+
<div class="input-group form-group">
3+
<div uib-dropdown class="input-group-btn">
4+
<button uib-dropdown-toggle type="button" class="btn btn-default filter-fields" uib-tooltip="Filter by" tooltip-placement="top">
5+
{{currentField.title}}
6+
<span class="caret"></span>
7+
</button>
8+
<ul uib-dropdown-menu>
9+
<li ng-repeat="item in config.fields">
10+
<a class="filter-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
11+
{{item.title}}
12+
</a>
13+
</li>
14+
</ul>
3215
</div>
33-
</form>
16+
<div ng-if="currentField.filterType !== 'select'">
17+
<input class="form-control" type="{{currentField.filterType}}" ng-model="config.currentValue"
18+
placeholder="{{currentField.placeholder}}"
19+
ng-keypress="onValueKeyPress($event)"/>
20+
</div>
21+
<div ng-if="currentField.filterType === 'select'">
22+
<select pf-select class="form-control filter-select" id="currentValue"
23+
ng-model="config.currentValue"
24+
ng-options="filterValue for filterValue in currentField.filterValues"
25+
ng-change="selectValue(config.currentValue)">
26+
<option value="">{{currentField.placeholder}}</option>
27+
</select>
28+
</div>
29+
</div>
3430
</div>

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

Lines changed: 248 additions & 250 deletions
Large diffs are not rendered by default.

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
* @example
3333
<example module="myApp" deps="patternfly.utils, patternfly.filters, patternfly.sort, patternfly.views">
3434
<file name="index.html">
35-
<div>
36-
<button class="btn btn-primary" id="showVerticalNavWithRouter" onclick="showVerticalNavWithRouter">Show Vertical Navigation with UIRouter</button>
35+
<div ng-controller="showDemoController">
36+
<button class="btn btn-primary" id="showVerticalNavWithRouter" ng-click="showVerticalNav()">Show Vertical Navigation with UIRouter</button>
3737
<label class="example-info-text">This will display the vertical nav bar and some mock content over the content of this page.</label>
3838
<label class="example-info-text">Exit the demo to return back to this page.</label>
3939
</div>
@@ -43,7 +43,7 @@
4343
navigate-callback="handleNavigateClickRouter">
4444
<div>
4545
<ul class="nav navbar-nav">
46-
<li><button id="hideVerticalNavWithRouter" class="hide-vertical-nav">Exit Vertical Navigation Demo</button></li>
46+
<li><button id="hideVerticalNavWithRouter" class="hide-vertical-nav" ng-click="hideVerticalNav()">Exit Vertical Navigation Demo</button></li>
4747
</ul>
4848
<ul class="nav navbar-nav navbar-right navbar-iconic">
4949
<li class="dropdown">
@@ -78,6 +78,15 @@
7878
</div>
7979
</div>
8080
</file>
81+
<file name="demo.js">
82+
angular.module('patternfly.navigation').controller('showDemoController', ['$scope',
83+
function ($scope) {
84+
$scope.showVerticalNav = function () {
85+
angular.element(document.querySelector("#verticalNavWithRouterLayout")).removeClass("hidden");
86+
};
87+
}
88+
]);
89+
</file>
8190
<file name="script.js">
8291
angular.module('myApp',['patternfly.navigation', 'ui.router'])
8392
.config(function($stateProvider, $urlRouterProvider) {
@@ -137,23 +146,16 @@
137146
title: "Exit Demo"
138147
}
139148
];
149+
$scope.hideVerticalNav = function() {
150+
angular.element(document.querySelector("#verticalNavWithRouterLayout")).addClass("hidden");
151+
};
140152
$scope.handleNavigateClickRouter = function (item) {
141153
if (item.title === "Exit Demo") {
142-
angular.element(document.querySelector("#verticalNavWithRouterLayout")).addClass("hidden");
154+
$scope.hideVerticalNav();
143155
}
144156
};
145157
}
146158
]);
147159
</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>
158160
</example>
159161
*/

‎src/navigation/vertical-navigation-directive.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,6 @@ angular.module('patternfly.navigation').directive('pfVerticalNavigation', ['$loc
9090
}
9191
},
9292
link: function ($scope) {
93-
var breakpoints = {
94-
'tablet': 768,
95-
'desktop': 1200
96-
};
97-
9893
var getBodyContentElement = function () {
9994
return angular.element(document.querySelector('.container-pf-nav-pf-vertical'));
10095
};
@@ -147,7 +142,7 @@ angular.module('patternfly.navigation').directive('pfVerticalNavigation', ['$loc
147142
var bodyContentElement = getBodyContentElement();
148143

149144
// Check to see if we need to enter/exit the mobile state
150-
if (!$scope.ignoreMobile && width < breakpoints.tablet) {
145+
if (!$scope.ignoreMobile && width < patternfly.pfBreakpoints.tablet) {
151146
if (!$scope.inMobileState) {
152147
$scope.inMobileState = true;
153148

‎src/notification/notification-drawer.directive.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@
7676
</file>
7777
<file name="notification-body.html">
7878
<div ng-if="!drawerExpanded">
79-
<div class="dropdown pull-right dropdown-kebab-pf" ng-if="notification.actions && notification.actions.length > 0">
80-
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
79+
<div dropdown class="dropdown pull-right dropdown-kebab-pf" ng-if="notification.actions && notification.actions.length > 0">
80+
<button dropdown-toggle class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
8181
<span class="fa fa-ellipsis-v"></span>
8282
</button>
8383
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">

‎src/sort/sort.html‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
<div class="sort-pf">
2-
<form>
3-
<div class="form-group">
4-
<div uib-dropdown class="btn-group">
5-
<button uib-dropdown-toggle type="button" class="btn btn-default">
6-
{{config.currentField.title}}
7-
<span class="caret"></span>
8-
</button>
9-
<ul uib-dropdown-menu>
10-
<li ng-repeat="item in config.fields" ng-class="{'selected': item === config.currentField}">
11-
<a href="javascript:void(0);" class="sort-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
12-
{{item.title}}
13-
</a>
14-
</li>
15-
</ul>
16-
</div>
17-
<button class="btn btn-link" type="button" ng-click="changeDirection()">
18-
<span class="sort-direction" ng-class="getSortIconClass()"></span>
19-
</button>
20-
</div>
21-
</form>
22-
</div>
2+
<div uib-dropdown class="btn-group">
3+
<button uib-dropdown-toggle type="button" class="btn btn-default">
4+
{{config.currentField.title}}
5+
<span class="caret"></span>
6+
</button>
7+
<ul uib-dropdown-menu>
8+
<li ng-repeat="item in config.fields" ng-class="{'selected': item === config.currentField}">
9+
<a href="javascript:void(0);" class="sort-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
10+
{{item.title}}
11+
</a>
12+
</li>
13+
</ul>
14+
</div>
15+
<button class="btn btn-link" type="button" ng-click="changeDirection()">
16+
<span class="sort-direction" ng-class="getSortIconClass()"></span>
17+
</button>
18+
</div>

‎src/toolbars/toolbar.html‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@
22
<div class="row toolbar-pf">
33
<div class="col-sm-12">
44
<form class="toolbar-pf-actions" ng-class="{'no-filter-results': !config.filterConfig}">
5-
<div pf-filter-fields id="{{filterDomId}}_fields" config="config.filterConfig" ng-if="config.filterConfig" add-filter-fn="addFilter"></div>
6-
<div pf-sort id="{{sortDomId}}" config="config.sortConfig" ng-if="config.sortConfig"></div>
5+
<div class="form-group toolbar-pf-filter">
6+
<div pf-filter-fields id="{{filterDomId}}_fields" config="config.filterConfig" ng-if="config.filterConfig" add-filter-fn="addFilter"></div>
7+
</div>
8+
<div class="form-group">
9+
<div pf-sort id="{{sortDomId}}" config="config.sortConfig" ng-if="config.sortConfig"></div>
10+
</div>
711
<div class="form-group toolbar-actions"
812
ng-if="config.actionsConfig &&
913
((config.actionsConfig.primaryActions && config.actionsConfig.primaryActions.length > 0) ||
@@ -34,16 +38,14 @@
3438
</ul>
3539
</div>
3640
</div>
37-
<div class="toolbar-pf-view-selector pull-right" ng-if="config.viewsConfig && config.viewsConfig.views">
38-
<ul class="list-inline">
39-
<li ng-repeat="view in config.viewsConfig.viewsList"
40-
ng-class="{'active': isViewSelected(view.id), 'disabled': checkViewDisabled(view)}"
41-
title={{view.title}}>
42-
<a>
43-
<i class="view-selector {{view.iconClass}}" ng-click="viewSelected(view.id)"></i>
44-
</a>
45-
</li>
46-
</ul>
41+
<div class="toolbar-pf-action-right">
42+
<div class="form-group toolbar-pf-view-selector" ng-if="config.viewsConfig && config.viewsConfig.views">
43+
<button ng-repeat="view in config.viewsConfig.viewsList" class="btn btn-link"
44+
ng-class="{'active': isViewSelected(view.id), 'disabled': checkViewDisabled(view)}"
45+
title={{view.title}} ng-click="viewSelected(view.id)">
46+
<i class="{{view.iconClass}}"></i>
47+
</button>
48+
</div>
4749
</div>
4850
</form>
4951
<div pf-filter-results id="{{filterDomId}_results}" config="config.filterConfig" ng-if="config.filterConfig"></div>

‎src/utils/fixed-accordion.directive.js‎

Lines changed: 61 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -61,24 +61,67 @@ angular.module('patternfly.utils').directive('pfFixedAccordion', function ($wind
6161
groupClass: '@'
6262
},
6363
link: function ($scope, $element, $attrs) {
64+
var setBodyScrollHeight = function (parentElement, bodyHeight) {
65+
// Set the max-height for the fixed height components
66+
var collapsePanels = parentElement[0].querySelectorAll('.panel-collapse');
67+
var collapsePanel;
68+
var scrollElement;
69+
var panelContents;
70+
var nextContent;
71+
var innerHeight;
72+
var scroller;
73+
74+
angular.forEach(collapsePanels, function (collapseElement) {
75+
collapsePanel = angular.element(collapseElement);
76+
scrollElement = collapsePanel;
77+
innerHeight = 0;
78+
79+
if (angular.isDefined($scope.scrollSelector)) {
80+
scroller = angular.element(collapsePanel[0].querySelector($scope.scrollSelector));
81+
if (scroller.length === 1) {
82+
scrollElement = angular.element(scroller[0]);
83+
panelContents = collapsePanel.children();
84+
angular.forEach(panelContents, function (contentElement) {
85+
nextContent = angular.element(contentElement);
86+
87+
// Get the height of all the non-scroll element contents
88+
if (nextContent[0] !== scrollElement[0]) {
89+
innerHeight += nextContent[0].offsetHeight;
90+
innerHeight += parseInt(getComputedStyle(nextContent[0]).marginTop);
91+
innerHeight += parseInt(getComputedStyle(nextContent[0]).marginBottom);
92+
}
93+
});
94+
}
95+
}
96+
97+
// set the max-height
98+
angular.element(scrollElement).css('max-height', (bodyHeight - innerHeight) + 'px');
99+
angular.element(scrollElement).css('overflow-y', 'auto');
100+
});
101+
};
102+
64103
var setCollapseHeights = function () {
65-
var componentSelector, height, openPanel, contentHeight, bodyHeight, overflowY = 'hidden', parentElement = $element.find('.panel-group');
104+
var height, openPanel, contentHeight, bodyHeight, overflowY = 'hidden';
105+
var parentElement = angular.element($element[0].querySelector('.panel-group'));
106+
var headings = angular.element(parentElement).children();
107+
var headingElement;
66108

67-
height = parentElement.height();
109+
height = parentElement[0].clientHeight;
68110

69111
// Close any open panel
70-
openPanel = parentElement.find('.collapse.in');
112+
openPanel = parentElement[0].querySelectorAll('.collapse.in');
71113
if (openPanel && openPanel.length > 0) {
72-
openPanel.removeClass('in');
114+
angular.element(openPanel).removeClass('in');
73115
}
74116

75117
// Determine the necessary height for the closed content
76118
contentHeight = 0;
77-
parentElement.children().each(function (index, groupHeading) {
78-
var headingElement = angular.element(groupHeading);
119+
120+
angular.forEach(headings, function (heading) {
121+
headingElement = angular.element(heading);
79122
contentHeight += headingElement.prop('offsetHeight');
80-
contentHeight += parseInt(headingElement.css('margin-top'));
81-
contentHeight += parseInt(headingElement.css('margin-bottom'));
123+
contentHeight += parseInt(getComputedStyle(headingElement[0]).marginTop);
124+
contentHeight += parseInt(getComputedStyle(headingElement[0]).marginBottom);
82125
});
83126

84127
// Determine the height remaining for opened collapse panels
@@ -94,54 +137,32 @@ angular.module('patternfly.utils').directive('pfFixedAccordion', function ($wind
94137

95138
// Reopen the initially opened panel
96139
if (openPanel && openPanel.length > 0) {
97-
openPanel.addClass("in");
140+
angular.element(openPanel).addClass("in");
98141
}
99142

100-
$timeout(function () {
101-
// Set the max-height for the fixed height components
102-
parentElement.find('.panel-collapse').each(function (index, collapsePanel) {
103-
var $panel = angular.element(collapsePanel);
104-
var scrollElement = $panel;
105-
var innerHeight = 0;
106-
var selected;
107-
var $sibling;
108-
109-
if (angular.isDefined($scope.scrollSelector)) {
110-
selected = angular.element($panel.find($scope.scrollSelector));
111-
if (selected.length === 1) {
112-
scrollElement = angular.element(selected[0]);
113-
$panel.children().each(function (j, sibling) {
114-
if (sibling !== scrollElement[0]) {
115-
$sibling = angular.element(sibling);
116-
innerHeight += $sibling.prop('offsetHeight');
117-
innerHeight += parseInt($sibling.css('margin-top'));
118-
innerHeight += parseInt($sibling.css('margin-bottom'));
119-
}
120-
});
121-
}
122-
}
143+
angular.element(parentElement).css('overflow-y', overflowY);
123144

124-
// set the max-height
125-
angular.element(scrollElement).css('max-height', (bodyHeight - innerHeight) + 'px');
126-
angular.element(scrollElement).css('overflow-y', 'auto');
127-
});
145+
// Update body scroll element's height after allowing these changes to set in
146+
$timeout(function () {
147+
setBodyScrollHeight (parentElement, bodyHeight);
128148
});
129-
130-
angular.element(parentElement).css('overflow-y', overflowY);
131149
};
132150

133151
if ($scope.groupHeight) {
134-
$element.find('.panel-group').css("height", $scope.groupHeight);
152+
angular.element($element[0].querySelector('.panel-group')).css('height', $scope.groupHeight);
135153
}
136154
if ($scope.groupClass) {
137-
$element.find('.panel-group').addClass($scope.groupClass);
155+
angular.element($element[0].querySelector(".panel-group")).addClass($scope.groupClass);
138156
}
139157

140158
$timeout(function () {
141159
setCollapseHeights();
142160
}, 100);
143161

144162
// Update on window resizing
163+
$element.bind('resize', function () {
164+
setCollapseHeights();
165+
});
145166
angular.element($window).bind('resize', function () {
146167
setCollapseHeights();
147168
});

‎styles/angular-patternfly.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -307,15 +307,15 @@
307307
color: #999999;
308308
}
309309

310-
.sort-pf .form-group .btn-link {
311-
color: #222;
310+
.sort-pf .btn-link {
311+
color: #252525;
312312
font-size: 16px;
313313
line-height: 1;
314314
padding: 4px 0;
315315
margin-left: 10px;
316316
}
317317

318-
.sort-pf .form-group .btn-link:hover {
318+
.sort-pf .btn-link:hover {
319319
color: #0099d3;
320320
}
321321

0 commit comments

Comments
 (0)