Begin notification timeout spawned in non-visible page for when it becomes visible again. #932

4chan_x.user.js

@@ -1118,35 +1118,41 @@
   };
 
   Notification = (function() {
+    var add, close;
 
     function Notification(type, content, timeout) {
-      var el;
-      this.type = type;
+      this.timeout = timeout;
+      this.add = add.bind(this);
+      this.close = close.bind(this);
       this.el = $.el('div', {
-        className: "notification " + type,
         innerHTML: '<a href=javascript:; class=close title=Close>×</a><div class=message></div>'
       });
-      $.on(this.el.firstElementChild, 'click', this.close.bind(this));
+      this.setType(type);
+      $.on(this.el.firstElementChild, 'click', this.close);
       if (typeof content === 'string') {
         content = $.tn(content);
       }
       $.add(this.el.lastElementChild, content);
-      if (timeout) {
-        setTimeout(this.close.bind(this), timeout * $.SECOND);
-      }
-      el = this.el;
-      $.ready(function() {
-        return $.add($.id('notifications'), el);
-      });
+      $.ready(this.add);
     }
 
     Notification.prototype.setType = function(type) {
-      $.rmClass(this.el, this.type);
-      $.addClass(this.el, type);
-      return this.type = type;
+      return this.el.className = "notification " + type;
     };
 
-    Notification.prototype.close = function() {
+    add = function() {
+      if (d.hidden) {
+        $.on(d, 'visibilitychange', this.add);
+        return;
+      }
+      $.off(d, 'visibilitychange', this.add);
+      $.add($.id('notifications'), this.el);
+      if (this.timeout) {
+        return setTimeout(this.close, this.timeout * $.SECOND);
+      }
+    };
+
+    close = function() {
       if (this.el.parentNode) {
         return $.rm(this.el);
       }

src/features.coffee

@@ -90,28 +90,32 @@ Header =
     Header.menu.toggle e, @, g
 
 class Notification
-  constructor: (@type, content, timeout) ->
+  constructor: (type, content, @timeout) ->
+    @add   = add.bind @
+    @close = close.bind @
+
     @el = $.el 'div',
-      className: "notification #{type}"
       innerHTML: '<a href=javascript:; class=close title=Close>×</a><div class=message></div>'
-    $.on @el.firstElementChild, 'click', @close.bind @
+    @setType type
+    $.on @el.firstElementChild, 'click', @close
     if typeof content is 'string'
       content = $.tn content
     $.add @el.lastElementChild, content
 
-    if timeout
-      setTimeout @close.bind(@), timeout * $.SECOND
-
-    el = @el
-    $.ready ->
-      $.add $.id('notifications'), el
+    $.ready @add
 
   setType: (type) ->
-    $.rmClass  @el, @type
-    $.addClass @el,  type
-    @type = type
+    @el.className = "notification #{type}"
 
-  close: ->
+  add = ->
+    if d.hidden
+      $.on d, 'visibilitychange', @add
+      return
+    $.off d, 'visibilitychange', @add
+    $.add $.id('notifications'), @el
+    setTimeout @close, @timeout * $.SECOND if @timeout
+
+  close = ->
     $.rm @el if @el.parentNode
 
 Settings =