Nearly there with IE7 - just need to fix keeping the right splitter p…

…osition
jsbin · Jun 16, 2011 · 1527da4 · 1527da4
1 parent 2edf8c4
commit 1527da4
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 63 deletions.
diff --git a/css/style.css b/css/style.css
@@ -117,8 +117,9 @@ a:hover {
 #bin {
   top: 52px;
   width: 100%;
-  opacity: 0;
-}
+/*  opacity: 0;
+  filter:alpha(opacity=0);
+*/}
 
 div.html {
   left: 50%;
@@ -153,6 +154,16 @@ div.code, #live, .resize {
 }
 
 .block {
+  border: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99999;
+  width: 100%; 
+  height: 100%;
+  background: transparent;
   cursor: ew-resize;
 }
 
@@ -480,10 +491,10 @@ body.preview #source select {
 }
 
 textarea {
-  opacity: 0;
+/*  opacity: 0;
   -moz-opacity: 0;
   filter:alpha(opacity=0);
-  margin: 0.4em;
+*/  margin: 0.4em;
   border: 0;
   padding: 0;
   font-family: Menlo, Monaco, consolas, monospace;
@@ -1021,21 +1032,14 @@ details li, .details li {
   margin: .6em;
 }
 
-.javascript .CodeMirror > div {
+.javascript .CodeMirror-scroll {
   margin-top: 25px;
 }
 
-.html .CodeMirror > div {
+.html .CodeMirror-scroll {
   margin-top: 60px;
 }
 
-.ie .html .CodeMirror > div {
-  margin-top: 30px;
-}
-
-.CodeMirror pre {
-/*  white-space: pre-wrap !important;*/
-}
 
 .editor .CodeMirror {
   height: 100%;
@@ -1046,14 +1050,20 @@ details li, .details li {
 .CodeMirror {
   overflow: auto;
   height: 300px;
-/*  top: 0;*/
-/*  bottom: 0;*/
-/*  line-height: 1em;*/
   font-size: 12px;
   font-family: MenschRegular, Menlo, Monaco, consolas, monospace;
   _position: relative; /* IE6 hack */
 }
 
+.ie7 .CodeMirror {
+  background: #fff;
+}
+
+.CodeMirror div {
+  position: relative;
+  zoom: 1;
+}
+
 .CodeMirror-gutter {
   position: absolute; left: 0; top: 0;
   background-color: #f7f7f7;
@@ -1184,4 +1194,5 @@ span.CodeMirror-selected {
 
 #bin.ready {
   opacity: 1;
+/*  filter:alpha(opacity=1);*/
 }
diff --git a/index.php b/index.php
@@ -8,6 +8,22 @@
 if ($code_id) {
   $code_id_path = '/' . $code_id;
 }
+
+if (@$_POST['inject'] && @$_POST['html']) {
+  $jsonReplaces = array(array("\\", "/", "\n", "\t", "\r", "\b", "\f", '"'), array('\\\\', '\\/', '\\n', '\\t', '\\r', '\\b', '\\f', '\"'));
+  $html = '"' . str_replace($jsonReplaces[0], $jsonReplaces[1], $_POST['html']) . '"';
+} else {
+/* <script src="<?=$code_id_path ?>/source/<?=$qs?>"></script>  */
+  list($code_id, $revision) = getCodeIdParams($request);
+
+  $edit_mode = false;
+
+  if ($code_id) {
+    list($latest_revision, $html, $javascript) = getCode($code_id, $revision);
+  } else {
+    list($html, $javascript) = defaultCode();
+  } 
+}
 ?>
 <!DOCTYPE html>
 <html lang="en">
@@ -17,7 +33,8 @@
 <link rel="stylesheet" href="/css/style.css?<?=VERSION?>" type="text/css" />
 </head>
 <!--[if lt IE 7 ]><body class="source ie ie6"><![endif]--> 
-<!--[if gte IE 7 ]><body class="source ie"><![endif]--> 
+<!--[if lt IE 8 ]><body class="source ie ie7"><![endif]--> 
+<!--[if gte IE 8 ]><body class="source ie"><![endif]--> 
 <!--[if !IE]><!--><body class="source"><!--<![endif]-->  
 <div id="control">
   <div class="control">
@@ -46,12 +63,12 @@
     </ul>
   </div>
 </div>
-<div id="bin" class="stretch" style="opacity: 0">
+<div id="bin" class="stretch" style="opacity: 0; filter:alpha(opacity=0);">
   <div id="source" class="binview stretch">
     <div class="code stretch javascript">
       <div class="label"><p><strong id="jslabel">JavaScript</strong><!-- <span> (<span class="hide">hide</span><span class="show">show</span> HTML)</span> --></p></div>
       <div class="editbox">
-        <textarea id="javascript"></textarea>        
+        <textarea id="javascript"></textarea>
       </div>
     </div>
     <div class="code stretch html">
@@ -75,7 +92,7 @@
       </div>
     </div>
   </div>
-  <div id="live" class="stretch livepreview"><span class="close"></span></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">
     <input type="hidden" name="method" />
@@ -105,31 +122,14 @@
 }
 */
 
-if (@$_POST['inject'] && @$_POST['html']) :
-  $jsonReplaces = array(array("\\", "/", "\n", "\t", "\r", "\b", "\f", '"'), array('\\\\', '\\/', '\\n', '\\t', '\\r', '\\b', '\\f', '\"'));
-  $html = '"' . str_replace($jsonReplaces[0], $jsonReplaces[1], $_POST['html']) . '"';
-?>
-var template = { html : <?=$html?>, javascript: '' };
-<?php else :
-/* <script src="<?=$code_id_path ?>/source/<?=$qs?>"></script>  */
-  list($code_id, $revision) = getCodeIdParams($request);
-
-  $edit_mode = false;
-
-  if ($code_id) {
-    list($latest_revision, $html, $javascript) = getCode($code_id, $revision);
-  } else {
-    list($html, $javascript) = defaultCode();
-  }
-
   $url = HOST . $code_id . ($revision == 1 ? '' : '/' . $revision);
   if (!$ajax) {
     echo 'var template = ';
   }
   // doubles as JSON
   echo '{"url":"' . $url . '","html" : ' . encode($html) . ',"javascript":' . encode($javascript) . '}';
 
-endif ?>
+?>
 </script>
 <script>jsbin = { version: "<?=VERSION?>" };</script>
 <script src="/js/<?=VERSION?>/jsbin.js"></script>

diff --git a/js/chrome/app.js b/js/chrome/app.js
@@ -30,7 +30,6 @@ var debug = jsbin.settings.debug === undefined ? false : jsbin.settings.debug,
     };
 
 //= require "storage"
-//= require "events"
 //= require "navigation"
 //= require "save"
 //= require "file-drop"

diff --git a/js/chrome/errors.js b/js/chrome/errors.js
@@ -1,5 +1,7 @@
+// (function () {
+  // return
+
 //= require "../vendor/jshint/jshint"
-//= require "../vendor/jquery.tipsy"
 var jshint = function () {
   var source = editors.javascript.getCode();
   var ok = JSHINT(source);
@@ -107,3 +109,5 @@ var checkForErrors = function () {
 
 $(document).bind('codeChange', throttle(checkForErrors, 1000));
 $(document).bind('jsbinReady', checkForErrors);
+
+// })();
diff --git a/js/chrome/file-drop.js b/js/chrome/file-drop.js
@@ -22,8 +22,10 @@ function allowDrop(holder) {
   };
 }
 
-if (typeof window.FileReader !== 'undefined') {
-  allowDrop(editors.html.win);
-  allowDrop(editors.javascript.win);
-  allowDrop(window);
-}
+$document.one('jsbinReady', function () {
+  if (typeof window.FileReader !== 'undefined') {
+    allowDrop(editors.html.win);
+    allowDrop(editors.javascript.win);
+    allowDrop(window);
+  }
+});
diff --git a/js/chrome/splitter.js b/js/chrome/splitter.js
@@ -1,18 +1,22 @@
 $.fn.splitter = function () {
-  var $document = $(document);
+  var $document = $(document),
+      $blocker = $('<div class="block"></div>');
+      // blockiframe = $blocker.find('iframe')[0];
+
   var splitterSettings = JSON.parse(localStorage.getItem('splitterSettings') || '[]');
   return this.each(function () {
     var $el = $(this), 
         guid = $.fn.splitter.guid++,
         $parent = $el.parent(),
         $prev = $el.prev(),
         $handle = $('<div class="resize"></div>'),
-        $blocker = $('<div class="block" />').css({ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, 'z-index': 99999, width: '100%', height: '100%' }),
         dragging = false,
         width = $parent.width(),
         left = $parent.offset().left,
         settings = splitterSettings[guid] || {};
 
+
+
     function moveSplitter(posX) {
       var x = posX - left,
           split = 100 / width * x;
@@ -25,7 +29,7 @@ $.fn.splitter = function () {
         });
         settings.x = posX;
         splitterSettings[guid] = settings;
-        console.log('set: ', JSON.stringify(splitterSettings));
+        // console.log('set: ', JSON.stringify(splitterSettings));
         localStorage.setItem('splitterSettings', JSON.stringify(splitterSettings));
       }
     }
@@ -40,13 +44,22 @@ $.fn.splitter = function () {
       }
     });
 
+    $blocker.mousemove(function (event) {
+      if (dragging) {
+        moveSplitter(event.pageX);
+      }
+    });
+
     $document.mousemove(function () {
       if (dragging) return false;
     });
 
     $handle.mousedown(function (e) {
       dragging = true;
       $('body').append($blocker);
+
+      // blockiframe.contentDocument.write('<title></title><p></p>');
+
       // TODO layer on div to block iframes from stealing focus
       width = $parent.width();
       left = $parent.offset().left;

diff --git a/js/chrome/stream.js b/js/chrome/stream.js
@@ -4,17 +4,18 @@ var context = this;
 
 var script = document.createElement('script');
 script.src = 'http://forbind.net/js/';
-document.body.appendChild(script);
-
-setTimeout(function forbindReady() {
-  if (typeof window.forbind !== 'undefined') {
-    forbind.apikey = '2796bc83070164231a3ab8c90227dbca';
-    console.log('forbind ready');
-    initForbind(context);
-  } else {
-    setTimeout(forbindReady, 20);
-  }
-}, 20);
+if (!($.browser.msie && $.browser.version < 8)) {
+  document.body.appendChild(script);
+  setTimeout(function forbindReady() {
+    if (typeof window.forbind !== 'undefined') {
+      forbind.apikey = '2796bc83070164231a3ab8c90227dbca';
+      typeof window.console !== 'undefined' && console.log('forbind ready');
+      initForbind(context);
+    } else {
+      setTimeout(forbindReady, 20);
+    }
+  }, 20);
+}
 
 function initForbind(global) {
   var $stream = $('<div id="streaming"><span class="msg"></span><span class="n"></span><span class="listen"> (click here to <span class="resume">resume</span><span class="pause">pause</span>)</span></div>').prependTo('body'),

diff --git a/js/editors/editors.js b/js/editors/editors.js
@@ -95,8 +95,8 @@ function setupEditor(panel) {
 
   var $label = $('.code.' + panel + ' > .label');
   if (document.body.className.indexOf('ie6') === -1) {
-    e.setOption('onScroll', function (event) {
-      if (e.win.scrollTop > 10) {
+    $(e.getWrapperElement()).scroll(function (event) {
+      if (this.scrollTop > 10) {
         $label.stop().animate({ opacity: 0 }, 50, function () {
           $(this).hide();
         });

diff --git a/js/jsbin.js b/js/jsbin.js
@@ -1,7 +1,9 @@
 //= require <jquery>
 if (window.console === undefined) (function () {
   window.console = {
-    log: function () {}
+    log: function () {
+      // alert([].slice.call(arguments).join('\n'));
+    }
   };
 })();
 

diff --git a/js/render/render.js b/js/render/render.js
@@ -1,7 +1,7 @@
 var consoleTest = /(^.|\b)console\./;
 
 var useCustomConsole = !(function () {
-  var ok = window.console !== undefined;
+  var ok = typeof window.console !== 'undefined';
   try {
     window.console.log('jsbin init test');
   } catch (e) {