Sneaking in the live preview - only hacked it together in a few minut…

…es, so it's not very sexy, but it kinda works the way I want to. To give it a whirl, open the console and hit: jsbin.livePreview(); (it's sticky after that)

css/style.css

@@ -263,7 +263,8 @@ a.right {
   z-index: 11; /* gets over the labels in IE */
 }
 
-#preview iframe {
+#preview iframe,
+#live iframe {
   height: 100%;
   width: 100%;
   border: 0;
@@ -760,4 +761,52 @@ ie6, li {
   padding: 0;
   margin: 10px 0;
   list-style: none
+}
+
+/* attempt to get a live render preview in */
+#live {
+  display: none;
+  top: 60%;
+  border-top: 1px solid #ccc;
+}
+
+#live .close {
+  background: url(/images/close.png) no-repeat center;
+  height: 25px;
+  width: 25px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  opacity: 0.1;
+  z-index: 99999;
+  -webkit-transition: opacity ease-in 100ms;
+  -moz-transition: opacity ease-in 100ms;
+  -o-transition: opacity ease-in 100ms;
+  -ms-transition: opacity ease-in 100ms;
+  transition: opacity ease-in 100ms;
+}
+
+#live .close:hover {
+  opacity: 1;
+}
+
+#bin.live #live {
+  display: block;
+}
+
+#bin.live #source {
+	bottom: 40%;
+}
+
+@media screen and (min-width: 1200px) { 
+  #live { 
+    top: 0;
+    left: 67%;
+  }
+
+  #bin.live #source {
+    bottom: 0;
+    right: 33%;
+  }
 }

index.php

@@ -68,6 +68,7 @@
       <textarea id="html"></textarea>
     </div>
   </div>
+  <div id="live" class="stretch livepreview"><span class="close"></span></div>
   <div id="preview" class="binview stretch"></div>
   <form method="post" action="<?=$code_id_path?>/save"></form>
 </div>

js/chrome/app.js

@@ -7,6 +7,7 @@
 var debug = false,
     $bin = $('#bin'),
     loadGist,
+    $document = $(document),
     unload = function () {
       sessionStorage.setItem('javascript', editors.javascript.getCode());
       sessionStorage.setItem('html', editors.html.getCode());
@@ -42,11 +43,17 @@ if (({ '#html':1, '#javascript':1 })[window.location.hash]) {
 if (window.location.hash == '#preview') {
   $('body').removeClass('source').addClass('preview');
   window.scrollTo(0, 0);
-  $(document).bind('jsbinReady', function () {
+  $document.bind('jsbinReady', function () {
     $('#control .preview').click();
   });
 }
 
+$document.one('jsbinReady', function () {
+  if (localStorage && localStorage.getItem('livepreview') == 'true') { // damn string coersion
+    $('#live').trigger('show');
+  }
+});
+
 // if a gist has been requested, lazy load the gist library and plug it in
 if (/gist\/\d+/.test(window.location.pathname) && (!sessionStorage.getItem('javascript') && !sessionStorage.getItem('html'))) {
   window.editors = editors; // needs to be global when the callback triggers to set the content

js/chrome/beta.js

@@ -7,6 +7,10 @@ window.jsbin = {};
   // expose...for now
   window.stream = jsbin.stream;
 
+  //= require "../render/live"
+  jsbin.livePreview = function () {
+    $('#live').trigger('toggle');
+  };
 
   //= require "../vendor/jshint/jshint"
   //= require "../vendor/jquery.tipsy"

js/jsbin.js

@@ -5,9 +5,9 @@ jQuery.expr[':'].host = function(obj, index, meta, stack) {
   return obj.host == meta[3];
 };
 
-(function () {
+(function (window, document, undefined) {
 //= require "editors/editors"
 //= require "render/render"
-//= require "chrome/app"
 //= require "chrome/beta"
-})();
+//= require "chrome/app"
+})(this, document);

js/render/live.js

@@ -0,0 +1,56 @@
+var $live = $('#live'),
+    $bin = $('#bin'),
+    throttledPreview = throttle(renderLivePreview, 250);
+
+// could chain - but it's more readable like this
+$live.bind('show', function () {
+  $bin.addClass('live');
+  localStorage && localStorage.setItem('livepreview', true);
+
+
+  // start timer
+  $(document).bind('codeChange.live', throttledPreview);
+  renderLivePreview();
+}).bind('hide', function () {
+  $(document).unbind('codeChange.live');
+  localStorage && localStorage.removeItem('livepreview');
+  $bin.removeClass('live');
+}).bind('toggle', function () {
+  $live.trigger($bin.is('.live') ? 'hide' : 'show');
+});
+
+function two(s) {
+  return (s+'').length < 2 ? '0' + s : s;
+}
+
+function renderLivePreview() {
+  $live.find('iframe').remove();
+  var frame = $live.append('<iframe class="stretch"></iframe>').find('iframe')[0],
+      document = frame.contentDocument || frame.contentWindow.document,
+      source = getPreparedCode(),
+      window = document.defaultView || document.parentWindow,
+      d = new Date();
+
+  // nullify the blocking functions
+  window.alert = function () {};
+  window.prompt = function () {};
+  window.confirm = function () {};
+
+  if (!useCustomConsole) console.log('--- refreshing live preview @ ' + [two(d.getHours()),two(d.getMinutes()),two(d.getSeconds())].join(':') + ' ---');
+  document.open();
+
+  if (debug) {
+    document.write('<pre>' + source.replace(/[<>&]/g, function (m) {
+      if (m == '<') return '&lt;';
+      if (m == '>') return '&gt;';
+      if (m == '"') return '&quot;';
+    }) + '</pre>');
+  } else {
+    document.write(source);
+  }
+  document.close();  
+}
+
+$live.find('.close').click(function () {
+  $live.trigger('hide');
+});

js/render/render.js

@@ -10,12 +10,19 @@ var useCustomConsole = !(function () {
   return ok;
 })();
 
-function renderPreview() {
-  var doc = $('#preview iframe')[0], 
-      win = doc.contentDocument || doc.contentWindow.document,
-      source = editors.html.getCode(),
-      parts = [],
-      js = editors.javascript.getCode();
+function getPreparedCode() {
+  var parts = [],
+      source = '',
+      js = '';
+
+  try {
+    source = editors.html.getCode();
+  } catch (e) {}
+
+  try {
+    js = editors.javascript.getCode();
+  } catch (e) {}
+
 
   // redirect JS console logged to our custom log while debugging
   if (consoleTest.test(js)) {
@@ -43,6 +50,14 @@ function renderPreview() {
   if (/\$\(document\)\.ready/.test(source)) {
     source = source.replace(/\$\(document\)\.ready/, 'window.onload = ');
   } 
+
+  return source;
+}
+
+function renderPreview() {
+  var doc = $('#preview iframe')[0], 
+      win = doc.contentDocument || doc.contentWindow.document,
+      source = getPreparedCode();
 
   win.open();