Fixed the /list url and defer getting the user's history in an onready ajax request. Fixes #212

lib/handlers/bin.js

@@ -127,6 +127,7 @@ module.exports = Observable.extend({
   },
   // FIXME @aron - is this actually used anywhere - the `this.renderHistory` looks like it'll fail
   getUserBins: function (req, res, next) {
+    var _this = this;
     if (!req.session.user) {
       return res.send('');
     }
@@ -136,7 +137,7 @@ module.exports = Observable.extend({
         return next(err);
       }
 
-      this.renderHistory(req, res, bins);
+      _this.renderHistory(req, res, bins);
     });
   },
   getLatestForUser: function (req, res, next) {
@@ -425,17 +426,17 @@ module.exports = Observable.extend({
       });
     }
 
-    if (req.session.user && !req.embed) {
-      this.models.user.getBins(req.session.user.name, function (err, bins) {
-        if (err) {
-          return onComplete(err);
-        }
+    // if (req.session.user && !req.embed) {
+    //   this.models.user.getBins(req.session.user.name, function (err, bins) {
+    //     if (err) {
+    //       return onComplete(err);
+    //     }
 
-        _this.formatHistory(bins, onComplete);
-      });
-    } else {
+    //     _this.formatHistory(bins, onComplete);
+    //   });
+    // } else {
       onComplete();
-    }
+    // }
   },
   renderFiles: function (req, res, files, url) {
     var _this = this;
@@ -476,7 +477,7 @@ module.exports = Observable.extend({
     }
   },
   renderHistory: function (req, res, bins) {
-    this.formatHistory(bins, function (err, history) {
+    this.formatHistory(bins, (req.headers.accept||'').indexOf('application/json') !== -1 ? 'json' : 'html', function (err, history) {
       res.send(history);
     });
   },
@@ -615,13 +616,18 @@ module.exports = Observable.extend({
       fn(null, formatted);
     }
   },
-  formatHistory: function (bins, fn) {
+  formatHistory: function (bins, format, fn) {
     // reorder the bins based latest edited, and group by bin.url
     var helpers = this.helpers,
         order = {},
         urls = {},
         orderedBins, loopOrder, i, length;
 
+    if (typeof format === 'function') {
+      fn = format;
+      format = 'html';
+    }
+
     bins.forEach(function (bin) {
       var time = new Date(bin.created).getTime();
 
@@ -676,7 +682,11 @@ module.exports = Observable.extend({
         });
       });
 
-      helpers.render('history', {bins: data}, fn);
+      if (format === 'json') {
+        fn(null, data);
+      } else { //if (format === 'html') {
+        helpers.render('history', {bins: data}, fn);
+      }
     });
   }
 });

public/js/render/saved-history-preview.js

@@ -1,71 +1,81 @@
 // inside a ready call because history DOM is rendered *after* our JS to improve load times.
-$(function ()  {
+if (!jsbin.embed) $(function ()  {
 
-//= require "../vendor/pretty-date"
+$.ajax({
+  dataType: 'html',
+  url: '/list',
+  success: function (html) {
+    $body.append(html);
+    hookUserHistory();
+  }
+});
 
-if ($('#history').length) (function () {
-  function render(url) {
-    if (url.lastIndexOf('/') !== url.length - 1) {
-      url += '/';
+
+function hookUserHistory() {
+  if ($('#history').length) (function () {
+    function render(url) {
+      if (url.lastIndexOf('/') !== url.length - 1) {
+        url += '/';
+      }
+      iframe.src = url + 'quiet';
+      iframe.removeAttribute('hidden');
+      viewing.innerHTML = url;
     }
-    iframe.src = url + 'quiet';
-    iframe.removeAttribute('hidden');
-    viewing.innerHTML = url;
-  }
 
-  function matchNode(el, nodeName) {
-    if (el.nodeName == nodeName) {
-      return el;
-    } else if (el.nodeName == 'BODY') {
-      return false;
-    } else {
-      return matchNode(el.parentNode, nodeName);
-    }
-  }
-
-  function visit() {
-    window.location = this.getAttribute('data-edit-url');
-  }
-
-  var preview = $('#history .preview'),
-      iframe = $('#history iframe')[0],
-      bins = $('#history'),
-      trs = $('#history tr'),
-      current = null,
-      viewing = $('#history #viewing')[0],
-      hoverTimer = null;
-
-  // stop iframe load removing focus from our main window
-  bins.delegate('tr', 'click', visit);
-  // this is some nasty code - just because I couldn't be
-  // bothered to bring jQuery to the party.
-  bins.mouseover(function (event) {
-    clearTimeout(hoverTimer);
-    var url, target = event.target;
-    if (target = matchNode(event.target, 'TR')) {
-      if (target.getAttribute('data-type') !== 'spacer') {
-        // target.className = 'hover';
-        // target.onclick = visit;
-        url = target.getAttribute('data-url');
-        if (current !== url) {
-          hoverTimer = setTimeout(function () {
-            bins.find('tr').removeClass('selected').filter(target).addClass('selected');
-            current = url;
-            render(url);
-          }, 400);
-        }
+    function matchNode(el, nodeName) {
+      if (el.nodeName == nodeName) {
+        return el;
+      } else if (el.nodeName == 'BODY') {
+        return false;
+      } else {
+        return matchNode(el.parentNode, nodeName);
       }
     }
-    return false;
-  });
 
-  // Need to replace Z in ISO8601 timestamp with +0000 so prettyDate() doesn't
-  // completely remove it (and parse the date using the local timezone).
-  $('#history a[pubdate]').attr('pubdate', function (i, val) {
-    return val.replace('Z', '+0000');
-  }).prettyDate();
-  setInterval(function(){ $('#history td.created a').prettyDate(); }, 30 * 1000);
+    function visit() {
+      window.location = this.getAttribute('data-edit-url');
+    }
 
-})();
+    var preview = $('#history .preview'),
+        iframe = $('#history iframe')[0],
+        bins = $('#history'),
+        trs = $('#history tr'),
+        current = null,
+        viewing = $('#history #viewing')[0],
+        hoverTimer = null;
+
+    // stop iframe load removing focus from our main window
+    bins.delegate('tr', 'click', visit);
+    // this is some nasty code - just because I couldn't be
+    // bothered to bring jQuery to the party.
+    bins.mouseover(function (event) {
+      clearTimeout(hoverTimer);
+      var url, target = event.target;
+      if (target = matchNode(event.target, 'TR')) {
+        if (target.getAttribute('data-type') !== 'spacer') {
+          // target.className = 'hover';
+          // target.onclick = visit;
+          url = target.getAttribute('data-url');
+          if (current !== url) {
+            hoverTimer = setTimeout(function () {
+              bins.find('tr').removeClass('selected').filter(target).addClass('selected');
+              current = url;
+              render(url);
+            }, 400);
+          }
+        }
+      }
+      return false;
+    });
+
+    // Need to replace Z in ISO8601 timestamp with +0000 so prettyDate() doesn't
+    // completely remove it (and parse the date using the local timezone).
+    $('#history a[pubdate]').attr('pubdate', function (i, val) {
+      return val.replace('Z', '+0000');
+    }).prettyDate();
+    setInterval(function(){ $('#history td.created a').prettyDate(); }, 30 * 1000);
+
+  })();
+}
 
 });