Convert notification module

CHANGELOG.md

@@ -10,3 +10,7 @@ Enhancements
 
 Bug Fixes
 - Update layout for sort, filter, and toolbar to match patternfly markup
+
+
+Breaking Changes
+- pfInlineNotification - pfNotificationRemove function added which ties the click event of the close button to a user specified function.  Previously, this used to be hardcoded to use the Notifications service, this is now optional.

src/notification/inline-notification.directive.js → src/notification/inline-notification.component.js

@@ -1,13 +1,14 @@
 /**
  * @ngdoc directive
- * @name patternfly.notification.directive:pfInlineNotification
+ * @name patternfly.notification.component:pfInlineNotification
  * @restrict E
  * @scope
  *
  * @param {expression=} pfNotificationType The type of the notification message. Allowed value is one of these: 'success','info','danger', 'warning'.
  * @param {expression=} pfNotificationMessage The main text message of the notification.
  * @param {expression=} pfNotificationHeader The header text of the notification.
  * @param {expression=} pfNotificationPersistent The notification won't disappear after delay timeout, but has to be closed manually with the close button.
+ * @param {expression=} pfNotificationRemove The function to remove the notification (called by the close button when clicked).
  *
  * @description
  * The main visual element of the notification message.
@@ -18,35 +19,36 @@
    <file name="index.html">
      <div ng-controller="NotificationDemoCtrl">
 
-       <pf-inline-notification pf-notification-type="type"
-                        pf-notification-header="header"
-                        pf-notification-message="message"
-                        pf-notification-persistent="isPersistent">
+       <pf-inline-notification pf-notification-type="notification.type"
+                        pf-notification-header="notification.header"
+                        pf-notification-message="notification.message"
+                        pf-notification-persistent="notification.isPersistent"
+                        pf-notification-remove="removeNotification()">
        </pf-inline-notification>
 
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label" for="header">Header:</label>
            <div class="col-sm-10">
-            <input type="text" class="form-control" ng-model="header" id="header"/>
+            <input type="text" class="form-control" ng-model="notification.header" id="header"/>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="message">Message:</label>
            <div class="col-sm-10">
-            <input type="text" class="form-control" ng-model="message" id="message"/>
+            <input type="text" class="form-control" ng-model="notification.message" id="message"/>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="type">Type:</label>
            <div class="col-sm-10">
              <div class="btn-group" uib-dropdown>
                <button type="button" uib-dropdown-toggle class="btn btn-default">
-                 {{type}}
+                 {{notification.type}}
                  <span class="caret"></span>
                </button>
                <ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
-                 <li ng-repeat="item in types" ng-class="{'selected': item === type}">
+                 <li ng-repeat="item in types" ng-class="{'selected': item === notification.type}">
                  <a role="menuitem" tabindex="-1" ng-click="updateType(item)">
                    {{item}}
                  </a>
@@ -58,41 +60,51 @@
          <div class="form-group">
            <label class="col-sm-2 control-label" for="type">Persistent:</label>
            <div class="col-sm-10">
-            <input type="checkbox" ng-model="isPersistent"></input>
+            <input type="checkbox" ng-model="notification.isPersistent"></input>
            </div>
          </div>
        </form>
      </div>
    </file>
 
    <file name="script.js">
-     angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, Notifications ) {
+     angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, $timeout ) {
        $scope.types = ['success','info','danger', 'warning'];
-       $scope.type = $scope.types[0];
-       $scope.isPersistent = false;
 
        $scope.updateType = function(item) {
-         $scope.type = item;
+         $scope.notification.type = item;
        };
-       $scope.header = 'Default Header.';
-       $scope.message = 'Default Message.';
+
+       $scope.removeNotification = function () {
+         $scope.notification = undefined;
+         // Add notification back for demo purposes
+         $timeout(function() {
+           createNotification();
+         }, 1000);
+       };
+
+       var createNotification = function () {
+         $scope.notification = {
+           type: $scope.types[0],
+           isPersistent: false,
+           header: 'Default Header.',
+           message: 'Default Message.'
+         };
+       };
+       createNotification();
      });
    </file>
 
  </example>
  */
-angular.module( 'patternfly.notification' ).directive('pfInlineNotification', function () {
-  'use strict';
-
-  return {
-    scope: {
-      'pfNotificationType': '=',
-      'pfNotificationMessage': '=',
-      'pfNotificationHeader': '=',
-      'pfNotificationPersistent': '=',
-      'pfNotificationIndex': '='
-    },
-    restrict: 'E',
-    templateUrl: 'notification/inline-notification.html'
-  };
+angular.module( 'patternfly.notification' ).component('pfInlineNotification', {
+  bindings: {
+    'pfNotificationType': '=',
+    'pfNotificationMessage': '=',
+    'pfNotificationHeader': '=',
+    'pfNotificationPersistent': '=',
+    'pfNotificationIndex': '=',
+    'pfNotificationRemove': '&?'
+  },
+  templateUrl: 'notification/inline-notification.html'
 });

src/notification/inline-notification.html

@@ -1,14 +1,14 @@
-<div class="alert alert-{{pfNotificationType}}"
-     ng-class="{'alert-dismissable': pfNotificationPersistent === true}">
-  <button ng-show="pfNotificationPersistent"
-          ng-click="$parent.notifications.remove($index)"
+<div class="alert alert-{{$ctrl.pfNotificationType}}"
+     ng-class="{'alert-dismissable': $ctrl.pfNotificationPersistent === true}">
+  <button ng-show="$ctrl.pfNotificationPersistent"
+          ng-click="$ctrl.pfNotificationRemove()"
           type="button" class="close" data-dismiss="alert" aria-hidden="true">
     <span class="pficon pficon-close"></span>
   </button>
-  <span class="pficon pficon-ok" ng-show="pfNotificationType === 'success'"></span>
-  <span class="pficon pficon-info" ng-show="pfNotificationType === 'info'"></span>
-  <span class="pficon pficon-error-circle-o" ng-show="pfNotificationType === 'danger'"></span>
-  <span class="pficon pficon-warning-triangle-o" ng-show="pfNotificationType === 'warning'"></span>
+  <span class="pficon pficon-ok" ng-show="$ctrl.pfNotificationType === 'success'"></span>
+  <span class="pficon pficon-info" ng-show="$ctrl.pfNotificationType === 'info'"></span>
+  <span class="pficon pficon-error-circle-o" ng-show="$ctrl.pfNotificationType === 'danger'"></span>
+  <span class="pficon pficon-warning-triangle-o" ng-show="$ctrl.pfNotificationType === 'warning'"></span>
 
-  <strong>{{pfNotificationHeader}}</strong> {{pfNotificationMessage}}
+  <strong>{{$ctrl.pfNotificationHeader}}</strong> {{$ctrl.pfNotificationMessage}}
 </div>

src/notification/notification-drawer.directive.js → src/notification/notification-drawer.component.js

@@ -1,9 +1,10 @@
 /**
  * @ngdoc directive
- * @name patternfly.notification.directive:pfNotificationDrawer
+ * @name patternfly.notification.component:pfNotificationDrawer
+ * @restrict E
  *
  * @description
- *   Directive for rendering a notification drawer. This provides a common mechanism to handle how the notification
+ *   Component for rendering a notification drawer. This provides a common mechanism to handle how the notification
  *   drawer should look and behave without mandating the look of the notification group heading or notification body.
  *   <br><br>
  *   An array of notification groups must be passed to create each group in the drawer. Each notification
@@ -47,11 +48,11 @@
      </div>
      <div class="layout-pf-fixed">
        <div class="navbar-pf-vertical">
-         <div pf-notification-drawer drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" allow-expand="true"
+         <pf-notification-drawer drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" allow-expand="true"
               action-button-title="Mark All Read" action-button-callback="actionButtonCB" notification-groups="groups"
               heading-include="heading.html" subheading-include="subheading.html" notification-body-include="notification-body.html"
               notification-footer-include="notification-footer.html" custom-scope="customScope">
-         </div>
+         </pf-notification-drawer>
        </div>
      </div>
      <div class="col-md-12">
@@ -69,7 +70,7 @@
    {{notificationGroup.subHeading}}
  </file>
  <file name="notification-footer.html">
-   <a class="btn btn-link btn-block" role="button" ng-click="customScope.clearAll(notificationGroup)">
+   <a class="btn btn-link btn-block" role="button" ng-click="$ctrl.customScope.clearAll(notificationGroup)">
      <span class="pficon pficon-close"></span>
      <span> Clear All</span>
    </a>
@@ -84,23 +85,23 @@
          <li ng-repeat="action in notification.actions"
              role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
              ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
-           <a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="customScope.handleAction(notification, action)">
+           <a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="$ctrl.customScope.handleAction(notification, action)">
              {{action.name}}
            </a>
          </li>
        </ul>
      </div>
-     <span ng-if="notification.status" class="{{'pull-left ' + customScope.getNotficationStatusIconClass(notification)}}" ng-click="customScope.markRead(notification)"></span>
-     <span class="drawer-pf-notification-message" ng-click="customScope.markRead(notification)">{{notification.message}}</span>
-     <div class="drawer-pf-notification-info" ng-click="customScope.markRead(notification)">
+     <span ng-if="notification.status" class="{{'pull-left ' + $ctrl.customScope.getNotficationStatusIconClass(notification)}}" ng-click="$ctrl.customScope.markRead(notification)"></span>
+     <span class="drawer-pf-notification-message" ng-click="$ctrl.customScope.markRead(notification)">{{notification.message}}</span>
+     <div class="drawer-pf-notification-info" ng-click="$ctrl.customScope.markRead(notification)">
        <span class="date">{{notification.timeStamp | date:'MM/dd/yyyy'}}</span>
        <span class="time">{{notification.timeStamp | date:'h:mm:ss a'}}</span>
      </div>
    </div>
    <div ng-if="drawerExpanded" class="container-fluid">
      <div class="row">
        <div class="col-sm-6">
-         <span class="pull-left {{customScope.getNotficationStatusIconClass(notification)}}"></span>
+         <span class="pull-left {{$ctrl.customScope.getNotficationStatusIconClass(notification)}}"></span>
          <span class="drawer-pf-notification-message notification-message"
                tooltip-append-to-body="true" tooltip-popup-delay="500" tooltip-placement="bottom" tooltip="{{notification.message}}">
                {{notification.message}}
@@ -119,7 +120,7 @@
              <li ng-repeat="action in notification.actions"
                  role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
                  ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
-               <a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="customScope.handleAction(notification, action)">
+               <a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="$ctrl.customScope.handleAction(notification, action)">
                  {{action.name}}
                </a>
              </li>
@@ -471,36 +472,52 @@
  </file>
 </example>
 */
-angular.module('patternfly.notification').directive('pfNotificationDrawer', function ($window, $timeout) {
-  'use strict';
-  return {
-    restrict: 'A',
-    scope: {
-      drawerHidden: '=?',
-      allowExpand: '=?',
-      drawerExpanded: '=?',
-      drawerTitle: '@',
-      notificationGroups: '=',
-      actionButtonTitle: '@',
-      actionButtonCallback: '=?',
-      titleInclude: '@',
-      headingInclude: '@',
-      subheadingInclude: '@',
-      notificationBodyInclude: '@',
-      notificationFooterInclude: '@',
-      customScope: '=?'
-    },
-    templateUrl: 'notification/notification-drawer.html',
-    controller: function ($scope) {
-      if (!$scope.allowExpand || angular.isUndefined($scope.drawerExpanded)) {
-        $scope.drawerExpanded = false;
+angular.module('patternfly.notification').component('pfNotificationDrawer', {
+  bindings: {
+    drawerHidden: '<?',
+    allowExpand: '=?',
+    drawerExpanded: '=?',
+    drawerTitle: '@',
+    notificationGroups: '<',
+    actionButtonTitle: '@',
+    actionButtonCallback: '=?',
+    titleInclude: '@',
+    headingInclude: '@',
+    subheadingInclude: '@',
+    notificationBodyInclude: '@',
+    notificationFooterInclude: '@',
+    customScope: '=?'
+  },
+  templateUrl: 'notification/notification-drawer.html',
+  controller: function ($window, $timeout, $element) {
+    'use strict';
+    var ctrl = this;
+
+    ctrl.toggleCollapse = function (selectedGroup) {
+      if (selectedGroup.open) {
+        selectedGroup.open = false;
+      } else {
+        ctrl.notificationGroups.forEach(function (group) {
+          group.open = false;
+        });
+        selectedGroup.open = true;
+      }
+    };
+
+    ctrl.toggleExpandDrawer = function () {
+      ctrl.drawerExpanded = !ctrl.drawerExpanded;
+    };
+
+    ctrl.$onInit = function () {
+      if (!ctrl.allowExpand || angular.isUndefined(ctrl.drawerExpanded)) {
+        ctrl.drawerExpanded = false;
       }
-    },
-    link: function (scope, element) {
+    };
 
-      scope.$watch('notificationGroups', function () {
-        var openFound = false;
-        scope.notificationGroups.forEach(function (group) {
+    ctrl.$onChanges = function (changesObj) {
+      var openFound = false;
+      if (changesObj.notificationGroups) {
+        changesObj.notificationGroups.currentValue.forEach(function (group) {
           if (group.open) {
             if (openFound) {
               group.open = false;
@@ -509,35 +526,22 @@ angular.module('patternfly.notification').directive('pfNotificationDrawer', func
             }
           }
         });
-      });
+      }
 
-      scope.$watch('drawerHidden', function () {
+      if (changesObj.drawerHidden) {
         $timeout(function () {
           angular.element($window).triggerHandler('resize');
         }, 100);
-      });
-
-      scope.toggleCollapse = function (selectedGroup) {
-        if (selectedGroup.open) {
-          selectedGroup.open = false;
-        } else {
-          scope.notificationGroups.forEach(function (group) {
-            group.open = false;
-          });
-          selectedGroup.open = true;
-        }
-      };
-
-      scope.toggleExpandDrawer = function () {
-        scope.drawerExpanded = !scope.drawerExpanded;
-      };
+      }
+    };
 
-      if (scope.groupHeight) {
-        element.find('.panel-group').css("height", scope.groupHeight);
+    ctrl.$postLink = function () {
+      if (ctrl.groupHeight) {
+        $element.find('.panel-group').css("height", ctrl.groupHeight);
       }
-      if (scope.groupClass) {
-        element.find('.panel-group').addClass(scope.groupClass);
+      if (ctrl.groupClass) {
+        $element.find('.panel-group').addClass(ctrl.groupClass);
       }
-    }
-  };
+    };
+  }
 });