[Summary view] [Print] [Text view]

   1  /**
   2   * @requires javelin-install
   3   *           javelin-dom
   4   *           javelin-stratcom
   5   *           javelin-util
   6   *           phabricator-notification-css
   7   * @provides phabricator-notification
   8   * @javelin
   9   */
  10  
  11  /**
  12   * Show a notification popup on screen. Usage:
  13   *
  14   *   var n = new JX.Notification()
  15   *     .setContent('click me!');
  16   *   n.listen('activate', function(e) { alert('you clicked!'); });
  17   *   n.show();
  18   *
  19   */
  20  JX.install('Notification', {
  21  
  22    events : ['activate', 'close'],
  23  
  24    members : {
  25      _container : null,
  26      _visible : false,
  27      _hideTimer : null,
  28      _duration : 12000,
  29  
  30      show : function() {
  31        if (!this._visible) {
  32          this._visible = true;
  33  
  34          var self = JX.Notification;
  35          self._show(this);
  36          this._updateTimer();
  37        }
  38        return this;
  39      },
  40  
  41      hide : function() {
  42        if (this._visible) {
  43          this._visible = false;
  44  
  45          var self = JX.Notification;
  46          self._hide(this);
  47          this._updateTimer();
  48        }
  49        return this;
  50      },
  51  
  52      alterClassName : function(name, enable) {
  53        JX.DOM.alterClass(this._getContainer(), name, enable);
  54        return this;
  55      },
  56  
  57      setContent : function(content) {
  58        JX.DOM.setContent(this._getContainer(), content);
  59        return this;
  60      },
  61  
  62      /**
  63       * Set duration before the notification fades away, in milliseconds. If set
  64       * to 0, the notification persists until dismissed.
  65       *
  66       * @param int Notification duration, in milliseconds.
  67       * @return this
  68       */
  69      setDuration : function(milliseconds) {
  70        this._duration = milliseconds;
  71        this._updateTimer(false);
  72        return this;
  73      },
  74  
  75      _updateTimer : function() {
  76        if (this._hideTimer) {
  77          clearTimeout(this._hideTimer);
  78          this._hideTimer = null;
  79        }
  80  
  81        if (this._visible && this._duration) {
  82          this._hideTimer = setTimeout(JX.bind(this, this.hide), this._duration);
  83        }
  84      },
  85  
  86      _getContainer : function() {
  87        if (!this._container) {
  88          this._container = JX.$N(
  89            'div',
  90            {
  91              className: 'jx-notification',
  92              sigil: 'jx-notification'
  93            });
  94        }
  95        return this._container;
  96      }
  97    },
  98  
  99    statics : {
 100      _container : null,
 101      _listening : false,
 102      _active : [],
 103      _show : function(notification) {
 104        var self = JX.Notification;
 105  
 106        self._installListener();
 107        self._active.push(notification);
 108        self._redraw();
 109      },
 110      _hide : function(notification) {
 111        var self = JX.Notification;
 112  
 113        for (var ii = 0; ii < self._active.length; ii++) {
 114          if (self._active[ii] === notification) {
 115            notification.invoke('close');
 116            self._active.splice(ii, 1);
 117            break;
 118          }
 119        }
 120  
 121        self._redraw();
 122      },
 123      _installListener : function() {
 124        var self = JX.Notification;
 125  
 126        if (self._listening) {
 127          return;
 128        } else {
 129          self._listening = true;
 130        }
 131  
 132        JX.Stratcom.listen(
 133          'click',
 134          'jx-notification',
 135          function(e) {
 136            // NOTE: Don't kill the event since the user might have clicked a
 137            // link, and we want to follow the link if they did. Instead, invoke
 138            // the activate event for the active notification and dismiss it if it
 139            // isn't handled.
 140  
 141            var target = e.getNode('jx-notification');
 142            for (var ii = 0; ii < self._active.length; ii++) {
 143              var n = self._active[ii];
 144              if (n._getContainer() === target) {
 145                var activation = n.invoke('activate');
 146                if (!activation.getPrevented()) {
 147                  n.hide();
 148                }
 149                return;
 150              }
 151            }
 152  
 153          });
 154      },
 155      _redraw : function() {
 156        var self = JX.Notification;
 157  
 158        if (!self._active.length) {
 159          if (self._container) {
 160            JX.DOM.remove(self._container);
 161            self._container = null;
 162          }
 163          return;
 164        }
 165  
 166        if (!self._container) {
 167          self._container = JX.$N(
 168            'div',
 169            {
 170              className: 'jx-notification-container'
 171            });
 172          document.body.appendChild(self._container);
 173        }
 174  
 175        // Show only a limited number of notifications at once.
 176        var limit = 5;
 177  
 178        var notifications = [];
 179        for (var ii = 0; ii < self._active.length; ii++) {
 180          notifications.push(self._active[ii]._getContainer());
 181          if (!(--limit)) {
 182            break;
 183          }
 184        }
 185  
 186        JX.DOM.setContent(self._container, notifications);
 187      }
 188    }
 189  
 190  });