$.sync to sync localStorage values across tabs.

4chan_x.user.js

@@ -317,6 +317,11 @@
       };
       return $.on(d, 'DOMContentLoaded', cb);
     },
+    sync: function(key, cb) {
+      return $.on(window, 'storage', function(e) {
+        if (e.key === ("" + NAMESPACE + key)) return cb(JSON.parse(e.newValue));
+      });
+    },
     id: function(id) {
       return d.getElementById(id);
     },
@@ -1294,12 +1299,7 @@
       init: function() {
         if (!conf['Cooldown']) return;
         qr.cooldown.start($.get("/" + g.BOARD + "/cooldown", 0));
-        return $.on(window, 'storage', function(e) {
+        return $.sync("/" + g.BOARD + "/cooldown", qr.cooldown.start);
-          var timeout;
-          if (e.key === ("" + NAMESPACE + "/" + g.BOARD + "/cooldown") && (timeout = JSON.parse(e.newValue))) {
-            return qr.cooldown.start(timeout);
-          }
-        });
       },
       start: function(timeout) {
         var seconds;
@@ -1495,10 +1495,8 @@
         $.on(this.challenge, 'DOMNodeInserted', function() {
           return _this.load();
         });
-        $.on(window, 'storage', function(e) {
+        $.sync('captchas', function(arr) {
-          if (e.key === ("" + NAMESPACE + "captchas")) {
+          return _this.count(arr.length);
-            return _this.count(JSON.parse(e.newValue).length);
-          }
         });
         this.count($.get('captchas', []).length);
         return this.load();
@@ -1602,18 +1600,16 @@
           return qr.selected[this.name] = this.value;
         });
       }
-      $.on(window, 'storage', function(e) {
+      $.sync('qr.persona', function(persona) {
-        var key, val, _ref3, _results;
+        var key, val, _results;
-        if (e.key === ("" + NAMESPACE + "qr.persona") && qr.replies.length === 1) {
+        if (qr.replies.length !== 1) return;
-          _ref3 = JSON.parse(e.newValue);
+        _results = [];
-          _results = [];
+        for (key in persona) {
-          for (key in _ref3) {
+          val = persona[key];
-            val = _ref3[key];
+          qr.selected[key] = val;
-            qr.selected[key] = val;
+          _results.push($("[name=" + key + "]", qr.el).value = val);
-            _results.push($("[name=" + key + "]", qr.el).value = val);
-          }
-          return _results;
         }
+        return _results;
       });
       qr.status.input = $('[type=submit]', qr.el);
       qr.status();
@@ -2395,13 +2391,11 @@
       } else {
         watcher.refresh();
       }
-      return $.on(window, 'storage', function(e) {
+      return $.sync('watched', watcher.refresh);
-        if (e.key === ("" + NAMESPACE + "watched")) return watcher.refresh();
-      });
     },
-    refresh: function() {
+    refresh: function(watched) {
-      var board, div, favicon, frag, id, link, props, watched, watchedBoard, x, _i, _j, _len, _len2, _ref, _ref2, _ref3, _results;
+      var board, div, favicon, frag, id, link, props, watchedBoard, x, _i, _j, _len, _len2, _ref, _ref2, _ref3, _results;
-      watched = $.get('watched', {});
+      watched || (watched = $.get('watched', {}));
       frag = d.createDocumentFragment();
       for (board in watched) {
         _ref = watched[board];

script.coffee

@@ -227,6 +227,9 @@ $.extend $,
       $.off d, 'DOMContentLoaded', cb
       fc()
     $.on d, 'DOMContentLoaded', cb
+  sync: (key, cb) ->
+    $.on window, 'storage', (e) ->
+      cb JSON.parse e.newValue if e.key is "#{NAMESPACE}#{key}"
   id: (id) ->
     d.getElementById id
   ajax: (url, callbacks, opts={}) ->
@@ -939,9 +942,7 @@ qr =
     init: ->
       return unless conf['Cooldown']
       qr.cooldown.start $.get "/#{g.BOARD}/cooldown", 0
-      $.on window, 'storage', (e) ->
+      $.sync "/#{g.BOARD}/cooldown", qr.cooldown.start
-        if e.key is "#{NAMESPACE}/#{g.BOARD}/cooldown" and timeout = JSON.parse e.newValue
-          qr.cooldown.start timeout
     start: (timeout) ->
       seconds = Math.floor (timeout - Date.now()) / 1000
       qr.cooldown.count seconds
@@ -1095,7 +1096,7 @@ qr =
       $.on @img.parentNode, 'click',              @reload
       $.on @input,          'keydown',            @keydown
       $.on @challenge,      'DOMNodeInserted', => @load()
-      $.on window,          'storage',     (e) => @count JSON.parse(e.newValue).length if e.key is "#{NAMESPACE}captchas"
+      $.sync 'captchas', (arr) => @count arr.length
       @count $.get('captchas', []).length
       @load()
     save: ->
@@ -1182,11 +1183,11 @@ qr =
     for input in ['name', 'email', 'sub', 'com']
       $.on $("[name=#{input}]", qr.el), 'change', -> qr.selected[@name] = @value
     # sync between tabs
-    $.on window, 'storage', (e) ->
+    $.sync 'qr.persona', (persona) ->
-      if e.key is "#{NAMESPACE}qr.persona" and qr.replies.length is 1
+      return if qr.replies.length isnt 1
-        for key, val of JSON.parse e.newValue
+      for key, val of persona
-          qr.selected[key] = val
+        qr.selected[key] = val
-          $("[name=#{key}]", qr.el).value = val
+        $("[name=#{key}]", qr.el).value = val
 
     qr.status.input = $ '[type=submit]', qr.el
     qr.status()
@@ -1880,10 +1881,10 @@ watcher =
       #populate watcher, display watch buttons
       watcher.refresh()
 
-    $.on window, 'storage', (e) -> watcher.refresh() if e.key is "#{NAMESPACE}watched"
+    $.sync 'watched', watcher.refresh
 
-  refresh: ->
+  refresh: (watched) ->
-    watched = $.get 'watched', {}
+    watched or= $.get 'watched', {}
     frag = d.createDocumentFragment()
     for board of watched
       for id, props of watched[board]