Add multiple notifications and notification types

Summary:
  - Allow more than one notification to be shown.
  - Allow notifications to be customized with extra classes.

Test Plan: {F12776}

Reviewers: allenjohnashton, ddfisher, keebuhm, jungejason

Reviewed By: jungejason

CC: aran

Maniphest Tasks: T944

Differential Revision: https://secure.phabricator.com/D2758

src/__celerity_resource_map__.php

@@ -1355,13 +1355,14 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-phabricator-notification-example' =>
   array(
-    'uri' => '/res/0b8fadf5/rsrc/js/application/uiexample/notification-example.js',
+    'uri' => '/res/df97e4b3/rsrc/js/application/uiexample/notification-example.js',
     'type' => 'js',
     'requires' =>
     array(
       0 => 'phabricator-notification',
       1 => 'javelin-stratcom',
       2 => 'javelin-behavior',
+      3 => 'javelin-uri',
     ),
     'disk' => '/rsrc/js/application/uiexample/notification-example.js',
   ),
@@ -2181,19 +2182,20 @@ celerity_register_resource_map(array(
   ),
   'phabricator-notification' =>
   array(
-    'uri' => '/res/253b3262/rsrc/js/application/core/Notification.js',
+    'uri' => '/res/cacd79f1/rsrc/js/application/core/Notification.js',
     'type' => 'js',
     'requires' =>
     array(
       0 => 'javelin-install',
       1 => 'javelin-dom',
       2 => 'javelin-stratcom',
+      3 => 'javelin-util',
     ),
     'disk' => '/rsrc/js/application/core/Notification.js',
   ),
   'phabricator-notification-css' =>
   array(
-    'uri' => '/res/423a14d1/rsrc/css/aphront/notification.css',
+    'uri' => '/res/7452322a/rsrc/css/aphront/notification.css',
     'type' => 'css',
     'requires' =>
     array(

webroot/rsrc/css/aphront/notification.css

@@ -7,6 +7,9 @@
 
   bottom: 24px;
   left: 24px;
+}
+
+.jx-notification {
   width: 240px;
   padding: 8px 16px;
 
@@ -21,4 +24,10 @@
 
   border-radius: 3px;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  margin-top: 4px;
+}
+
+.jx-notification-alert {
+  background: #ffffa0;
+  border: 1px solid #aaaa60;
 }

webroot/rsrc/js/application/core/Notification.js

@@ -2,6 +2,7 @@
  * @requires javelin-install
  *           javelin-dom
  *           javelin-stratcom
+ *           javelin-util
  * @provides phabricator-notification
  * @javelin
  */
@@ -22,29 +23,37 @@ JX.install('Notification', {
   members : {
     show : function() {
       var self = JX.Notification;
+      self._show(this);
 
-      self.close();
-      self._installListener();
-      self._active = this;
-
-      var container = JX.$N(
+      if (this.getDuration()) {
+        setTimeout(JX.bind(self, self._hide, this), this.getDuration());
+      }
+    },
+    _render : function() {
+      return JX.$N(
         'div',
         {
-          className: 'jx-notification-container',
+          className: 'jx-notification ' + this.getClassName(),
           sigil: 'jx-notification'
         },
         this.getContent());
-      document.body.appendChild(container);
-
-      self._container = container;
-
-      if (this.getDuration()) {
-        self._timeout = setTimeout(self.close, this.getDuration());
-      }
     }
   },
 
   properties : {
+
+    /**
+     * Optional class name(s) to add to the rendered notification.
+     *
+     * @param string Class name(s).
+     */
+    className : null,
+
+    /**
+     * Notification content.
+     *
+     * @param mixed Content.
+     */
     content : null,
 
     /**
@@ -54,12 +63,42 @@ JX.install('Notification', {
      * @param int Notification duration, in milliseconds.
      */
     duration : 12000
+
   },
 
   statics : {
     _container : null,
     _listening : false,
-    _active : null,
+    _active : [],
+    _show : function(notification) {
+      var self = JX.Notification;
+
+      self._installListener();
+      self._active.push({
+        object: notification,
+        render: notification._render()
+      });
+
+      // Don't show more than a few notifications at once because it's silly.
+      while (self._active.length > 5) {
+        self._hide(self._active[0].object);
+      }
+
+      self._redraw();
+    },
+    _hide : function(notification) {
+      var self = JX.Notification;
+
+      for (var ii = 0; ii < self._active.length; ii++) {
+        if (self._active[ii].object === notification) {
+          notification.invoke('close');
+          self._active.splice(ii, 1);
+          break;
+        }
+      }
+
+      self._redraw();
+    },
     _installListener : function() {
       var self = JX.Notification;
 
@@ -78,27 +117,46 @@ JX.install('Notification', {
           // the activate event for the active notification and dismiss it if it
           // isn't handled.
 
-          var activation = self._active.invoke('activate');
-          if (activation.getPrevented()) {
-            return;
+          var target = e.getNode('jx-notification');
+          for (var ii = 0; ii < self._active.length; ii++) {
+            var n = self._active[ii];
+            if (n.render === target) {
+              var activation = n.object.invoke('activate');
+              if (!activation.getPrevented()) {
+                self._hide(n.object);
+              }
+              return;
+            }
           }
 
-          self.close();
         });
     },
-    close : function() {
+    _redraw : function() {
       var self = JX.Notification;
 
-      if (self._container) {
-        JX.DOM.remove(self._container);
-        self._container = null;
-
-        self._active.invoke('close');
-        self._active = null;
+      if (!self._active.length) {
+        if (self._container) {
+          JX.DOM.remove(self._container);
+          self._container = null;
+        }
+        return;
       }
 
-      self._timeout && clearTimeout(self._timeout);
-      self._timeout = null;
+      if (!self._container) {
+        self._container = JX.$N(
+          'div',
+          {
+            className: 'jx-notification-container'
+          });
+        document.body.appendChild(self._container);
+      }
+
+      var notifications = [];
+      for (var ii = 0; ii < self._active.length; ii++) {
+        notifications.push(self._active[ii].render);
+      }
+
+      JX.DOM.setContent(self._container, notifications);
     }
   }
 

webroot/rsrc/js/application/uiexample/notification-example.js

@@ -2,6 +2,7 @@
  * @requires phabricator-notification
  *           javelin-stratcom
  *           javelin-behavior
+ *           javelin-uri
  * @provides javelin-behavior-phabricator-notification-example
  */
 
@@ -12,17 +13,29 @@ JX.behavior('phabricator-notification-example', function(config) {
     function(e) {
       e.kill();
 
-      var notification = new JX.Notification()
-        .setContent('It is ' + new Date().toString());
+      var notification = new JX.Notification();
+      if (Math.random() > 0.1) {
+        notification.setContent('It is ' + new Date().toString());
 
-      notification.listen(
-        'activate',
-        function(e) {
-          if (!confirm("Close notification?")) {
-            e.kill();
-          }
-        });
+        notification.listen(
+          'activate',
+          function(e) {
+            if (!confirm("Close notification?")) {
+              e.kill();
+            }
+          });
+      } else {
+        notification
+          .setContent('Alert! Click to reload!')
+          .setDuration(0)
+          .setClassName('jx-notification-alert');
 
+        notification.listen(
+          'activate',
+          function(e) {
+            new JX.$U().go();
+          });
+      }
       notification.show()
     });