Skip to content

Commit 5ac0ac1

Browse files
dgutridedgutride
committed
Converted notification drawer directive to component
1 parent 2b4bb80 commit 5ac0ac1

File tree

6 files changed

+90
-98
lines changed

6 files changed

+90
-98
lines changed

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

Lines changed: 67 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
/**
22
* @ngdoc directive
3-
* @name patternfly.notification.directive:pfNotificationDrawer
3+
* @name patternfly.notification.component:pfNotificationDrawer
4+
* @restrict E
45
*
56
* @description
6-
* Directive for rendering a notification drawer. This provides a common mechanism to handle how the notification
7+
* Component for rendering a notification drawer. This provides a common mechanism to handle how the notification
78
* drawer should look and behave without mandating the look of the notification group heading or notification body.
89
* <br><br>
910
* An array of notification groups must be passed to create each group in the drawer. Each notification
@@ -47,11 +48,11 @@
4748
</div>
4849
<div class="layout-pf-fixed">
4950
<div class="navbar-pf-vertical">
50-
<div pf-notification-drawer drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" allow-expand="true"
51+
<pf-notification-drawer drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" allow-expand="true"
5152
action-button-title="Mark All Read" action-button-callback="actionButtonCB" notification-groups="groups"
5253
heading-include="heading.html" subheading-include="subheading.html" notification-body-include="notification-body.html"
5354
notification-footer-include="notification-footer.html" custom-scope="customScope">
54-
</div>
55+
</pf-notification-drawer>
5556
</div>
5657
</div>
5758
<div class="col-md-12">
@@ -69,7 +70,7 @@
6970
{{notificationGroup.subHeading}}
7071
</file>
7172
<file name="notification-footer.html">
72-
<a class="btn btn-link btn-block" role="button" ng-click="customScope.clearAll(notificationGroup)">
73+
<a class="btn btn-link btn-block" role="button" ng-click="$ctrl.customScope.clearAll(notificationGroup)">
7374
<span class="pficon pficon-close"></span>
7475
<span> Clear All</span>
7576
</a>
@@ -84,23 +85,23 @@
8485
<li ng-repeat="action in notification.actions"
8586
role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
8687
ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
87-
<a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="customScope.handleAction(notification, action)">
88+
<a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="$ctrl.customScope.handleAction(notification, action)">
8889
{{action.name}}
8990
</a>
9091
</li>
9192
</ul>
9293
</div>
93-
<span ng-if="notification.status" class="{{'pull-left ' + customScope.getNotficationStatusIconClass(notification)}}" ng-click="customScope.markRead(notification)"></span>
94-
<span class="drawer-pf-notification-message" ng-click="customScope.markRead(notification)">{{notification.message}}</span>
95-
<div class="drawer-pf-notification-info" ng-click="customScope.markRead(notification)">
94+
<span ng-if="notification.status" class="{{'pull-left ' + $ctrl.customScope.getNotficationStatusIconClass(notification)}}" ng-click="$ctrl.customScope.markRead(notification)"></span>
95+
<span class="drawer-pf-notification-message" ng-click="$ctrl.customScope.markRead(notification)">{{notification.message}}</span>
96+
<div class="drawer-pf-notification-info" ng-click="$ctrl.customScope.markRead(notification)">
9697
<span class="date">{{notification.timeStamp | date:'MM/dd/yyyy'}}</span>
9798
<span class="time">{{notification.timeStamp | date:'h:mm:ss a'}}</span>
9899
</div>
99100
</div>
100101
<div ng-if="drawerExpanded" class="container-fluid">
101102
<div class="row">
102103
<div class="col-sm-6">
103-
<span class="pull-left {{customScope.getNotficationStatusIconClass(notification)}}"></span>
104+
<span class="pull-left {{$ctrl.customScope.getNotficationStatusIconClass(notification)}}"></span>
104105
<span class="drawer-pf-notification-message notification-message"
105106
tooltip-append-to-body="true" tooltip-popup-delay="500" tooltip-placement="bottom" tooltip="{{notification.message}}">
106107
{{notification.message}}
@@ -119,7 +120,7 @@
119120
<li ng-repeat="action in notification.actions"
120121
role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
121122
ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
122-
<a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="customScope.handleAction(notification, action)">
123+
<a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="$ctrl.customScope.handleAction(notification, action)">
123124
{{action.name}}
124125
</a>
125126
</li>
@@ -471,36 +472,52 @@
471472
</file>
472473
</example>
473474
*/
474-
angular.module('patternfly.notification').directive('pfNotificationDrawer', function ($window, $timeout) {
475-
'use strict';
476-
return {
477-
restrict: 'A',
478-
scope: {
479-
drawerHidden: '=?',
480-
allowExpand: '=?',
481-
drawerExpanded: '=?',
482-
drawerTitle: '@',
483-
notificationGroups: '=',
484-
actionButtonTitle: '@',
485-
actionButtonCallback: '=?',
486-
titleInclude: '@',
487-
headingInclude: '@',
488-
subheadingInclude: '@',
489-
notificationBodyInclude: '@',
490-
notificationFooterInclude: '@',
491-
customScope: '=?'
492-
},
493-
templateUrl: 'notification/notification-drawer.html',
494-
controller: function ($scope) {
495-
if (!$scope.allowExpand || angular.isUndefined($scope.drawerExpanded)) {
496-
$scope.drawerExpanded = false;
475+
angular.module('patternfly.notification').component('pfNotificationDrawer', {
476+
bindings: {
477+
drawerHidden: '<?',
478+
allowExpand: '=?',
479+
drawerExpanded: '=?',
480+
drawerTitle: '@',
481+
notificationGroups: '<',
482+
actionButtonTitle: '@',
483+
actionButtonCallback: '=?',
484+
titleInclude: '@',
485+
headingInclude: '@',
486+
subheadingInclude: '@',
487+
notificationBodyInclude: '@',
488+
notificationFooterInclude: '@',
489+
customScope: '=?'
490+
},
491+
templateUrl: 'notification/notification-drawer.html',
492+
controller: function ($window, $timeout, $element) {
493+
'use strict';
494+
var ctrl = this;
495+
496+
ctrl.toggleCollapse = function (selectedGroup) {
497+
if (selectedGroup.open) {
498+
selectedGroup.open = false;
499+
} else {
500+
ctrl.notificationGroups.forEach(function (group) {
501+
group.open = false;
502+
});
503+
selectedGroup.open = true;
504+
}
505+
};
506+
507+
ctrl.toggleExpandDrawer = function () {
508+
ctrl.drawerExpanded = !ctrl.drawerExpanded;
509+
};
510+
511+
ctrl.$onInit = function () {
512+
if (!ctrl.allowExpand || angular.isUndefined(ctrl.drawerExpanded)) {
513+
ctrl.drawerExpanded = false;
497514
}
498-
},
499-
link: function (scope, element) {
515+
};
500516

501-
scope.$watch('notificationGroups', function () {
502-
var openFound = false;
503-
scope.notificationGroups.forEach(function (group) {
517+
ctrl.$onChanges = function (changesObj) {
518+
var openFound = false;
519+
if (changesObj.notificationGroups) {
520+
changesObj.notificationGroups.currentValue.forEach(function (group) {
504521
if (group.open) {
505522
if (openFound) {
506523
group.open = false;
@@ -509,35 +526,22 @@ angular.module('patternfly.notification').directive('pfNotificationDrawer', func
509526
}
510527
}
511528
});
512-
});
529+
}
513530

514-
scope.$watch('drawerHidden', function () {
531+
if (changesObj.drawerHidden) {
515532
$timeout(function () {
516533
angular.element($window).triggerHandler('resize');
517534
}, 100);
518-
});
519-
520-
scope.toggleCollapse = function (selectedGroup) {
521-
if (selectedGroup.open) {
522-
selectedGroup.open = false;
523-
} else {
524-
scope.notificationGroups.forEach(function (group) {
525-
group.open = false;
526-
});
527-
selectedGroup.open = true;
528-
}
529-
};
530-
531-
scope.toggleExpandDrawer = function () {
532-
scope.drawerExpanded = !scope.drawerExpanded;
533-
};
535+
}
536+
};
534537

535-
if (scope.groupHeight) {
536-
element.find('.panel-group').css("height", scope.groupHeight);
538+
ctrl.$postLink = function () {
539+
if (ctrl.groupHeight) {
540+
$element.find('.panel-group').css("height", ctrl.groupHeight);
537541
}
538-
if (scope.groupClass) {
539-
element.find('.panel-group').addClass(scope.groupClass);
542+
if (ctrl.groupClass) {
543+
$element.find('.panel-group').addClass(ctrl.groupClass);
540544
}
541-
}
542-
};
545+
};
546+
}
543547
});

‎src/notification/notification-drawer.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
<div class="drawer-pf" ng-class="{'hide': drawerHidden, 'drawer-pf-expanded': drawerExpanded}">
2-
<div ng-if="drawerTitle" class="drawer-pf-title">
3-
<a ng-if="allowExpand" class="drawer-pf-toggle-expand" ng-click="toggleExpandDrawer()"></a>
4-
<h3 class="text-center">{{drawerTitle}}</h3>
1+
<div class="drawer-pf" ng-class="{'hide': $ctrl.drawerHidden, 'drawer-pf-expanded': $ctrl.drawerExpanded}">
2+
<div ng-if="$ctrl.drawerTitle" class="drawer-pf-title">
3+
<a ng-if="$ctrl.allowExpand" class="drawer-pf-toggle-expand" ng-click="$ctrl.toggleExpandDrawer()"></a>
4+
<h3 class="text-center">{{$ctrl.drawerTitle}}</h3>
55
</div>
6-
<div ng-if="titleInclude" class="drawer-pf-title" ng-include src="titleInclude"></div>
6+
<div ng-if="$ctrl.titleInclude" class="drawer-pf-title" ng-include src="$ctrl.titleInclude"></div>
77
<div pf-fixed-accordion scroll-selector=".panel-body">
88
<div class="panel-group">
9-
<div class="panel panel-default" ng-repeat="notificationGroup in notificationGroups track by $index">
9+
<div class="panel panel-default" ng-repeat="notificationGroup in $ctrl.notificationGroups track by $index">
1010
<div class="panel-heading">
1111
<h4 class="panel-title">
12-
<a ng-click="toggleCollapse(notificationGroup)" ng-class="{collapsed: !notificationGroup.open}" ng-include src="headingInclude"></a>
12+
<a ng-click="$ctrl.toggleCollapse(notificationGroup)" ng-class="{collapsed: !notificationGroup.open}" ng-include src="$ctrl.headingInclude"></a>
1313
</h4>
14-
<span class="panel-counter" ng-include src="subheadingInclude"></span>
14+
<span class="panel-counter" ng-include src="$ctrl.subheadingInclude"></span>
1515
</div>
1616
<div class="panel-collapse collapse" ng-class="{in: notificationGroup.open}">
1717
<div class="panel-body">
18-
<div class="drawer-pf-notification" ng-class="{unread: notification.unread, 'expanded-notification': drawerExpanded}"
19-
ng-repeat="notification in notificationGroup.notifications" ng-include src="notificationBodyInclude">
18+
<div class="drawer-pf-notification" ng-class="{unread: notification.unread, 'expanded-notification': $ctrl.drawerExpanded}"
19+
ng-repeat="notification in notificationGroup.notifications" ng-include src="$ctrl.notificationBodyInclude">
2020
</div>
2121
<div ng-if="notificationGroup.isLoading" class="drawer-pf-loading text-center">
2222
<span class="spinner spinner-xs spinner-inline"></span> Loading More
2323
</div>
2424
</div>
25-
<div class="drawer-pf-action" ng-if="actionButtonTitle">
26-
<a class="btn btn-link btn-block" ng-click="actionButtonCallback(notificationGroup)">{{actionButtonTitle}}</a>
25+
<div class="drawer-pf-action" ng-if="$ctrl.actionButtonTitle">
26+
<a class="btn btn-link btn-block" ng-click="$ctrl.actionButtonCallback(notificationGroup)">{{$ctrl.actionButtonTitle}}</a>
2727
</div>
28-
<div ng-if="notificationFooterInclude" ng-include src="notificationFooterInclude">
28+
<div ng-if="$ctrl.notificationFooterInclude" ng-include src="$ctrl.notificationFooterInclude">
2929
</div>
3030
</div>
3131
</div>

‎src/notification/notification.html

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎test/notification/notification-body.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
<li ng-repeat="action in notification.actions"
77
role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
88
ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
9-
<a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="customScope.handleAction(notification, action)">
9+
<a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="$ctrl.customScope.handleAction(notification, action)">
1010
{{action.name}}
1111
</a>
1212
</li>
1313
</ul>
1414
</div>
15-
<span ng-if="notification.status" class="{{'pull-left ' + customScope.getNotficationStatusIconClass(notification)}}"></span>
15+
<span ng-if="notification.status" class="{{'pull-left ' + $ctrl.customScope.getNotficationStatusIconClass(notification)}}"></span>
1616
<span class="drawer-pf-notification-message">{{notification.message}}</span>
1717
<div class="drawer-pf-notification-info">
1818
<span class="date">{{notification.timeStamp | date:'MM/dd/yyyy'}}</span>

‎test/notification/notification-drawer.spec.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
describe('Directive: pfNotificationDrawer', function () {
1+
describe('Component: pfNotificationDrawer', function () {
22
var $scope;
33
var $compile;
44
var element;
@@ -314,11 +314,11 @@ describe('Directive: pfNotificationDrawer', function () {
314314
$scope.actionPerformed = action;
315315
};
316316

317-
var htmlTmp = '<div pf-notification-drawer drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" title-include="test/notification/title.html" ' +
317+
var htmlTmp = '<pf-notification-drawer drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" title-include="test/notification/title.html" ' +
318318
' action-button-title="Mark All Read" action-button-callback="actionButtonCB" notification-groups="groups"' +
319319
' heading-include="test/notification/heading.html" subheading-include="test/notification/subheading.html" notification-body-include="test/notification/notification-body.html"' +
320320
' notification-footer-include="test/notification/notification-footer.html" custom-scope="customScope">' +
321-
'</div>';
321+
'</pf-notification-drawer>';
322322

323323
compileHTML(htmlTmp, $scope);
324324
});
@@ -447,11 +447,11 @@ describe('Directive: pfNotificationDrawer', function () {
447447
var expandToggle = element.find('.drawer-pf-toggle-expand');
448448
expect(expandToggle.length).toBe(0);
449449

450-
var htmlTmp = '<div pf-notification-drawer allow-expand="true" drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" title-include="test/notification/title.html" ' +
450+
var htmlTmp = '<pf-notification-drawer allow-expand="true" drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" title-include="test/notification/title.html" ' +
451451
' action-button-title="Mark All Read" action-button-callback="actionButtonCB" notification-groups="groups"' +
452452
' heading-include="test/notification/heading.html" subheading-include="test/notification/subheading.html" notification-body-include="test/notification/notification-body.html"' +
453453
' notification-footer-include="test/notification/notification-footer.html" custom-scope="customScope">' +
454-
'</div>';
454+
'</pf-notification-drawer>';
455455

456456
compileHTML(htmlTmp, $scope);
457457

@@ -463,11 +463,11 @@ describe('Directive: pfNotificationDrawer', function () {
463463
var expandedDrawer = element.find('.drawer-pf.drawer-pf-expanded');
464464
expect(expandedDrawer.length).toBe(0);
465465

466-
var htmlTmp = '<div pf-notification-drawer allow-expand="true" drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" title-include="test/notification/title.html" ' +
466+
var htmlTmp = '<pf-notification-drawer allow-expand="true" drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" title-include="test/notification/title.html" ' +
467467
' action-button-title="Mark All Read" action-button-callback="actionButtonCB" notification-groups="groups"' +
468468
' heading-include="test/notification/heading.html" subheading-include="test/notification/subheading.html" notification-body-include="test/notification/notification-body.html"' +
469469
' notification-footer-include="test/notification/notification-footer.html" custom-scope="customScope">' +
470-
'</div>';
470+
'</pf-notification-drawer>';
471471

472472
compileHTML(htmlTmp, $scope);
473473

‎test/notification/notification-footer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<a class="btn btn-link btn-block footer-class" role="button" ng-click="customScope.handleAction(notificationGroup, 'Clear All')">
1+
<a class="btn btn-link btn-block footer-class" role="button" ng-click="$ctrl.customScope.handleAction(notificationGroup, 'Clear All')">
22
<span class="pficon pficon-close"></span>
33
<span> Clear All</span>
44
</a>

0 commit comments

Comments
 (0)