From d20d7f0a31fc2b7b77dafc8be4a955887aa531ef Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Tue, 20 Mar 2012 23:26:49 +0000 Subject: [PATCH 1/3] prop was leaking. fixes #115 --- js/render/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/render/edit.js b/js/render/edit.js index 43a4176140..ea3b7912f3 100644 --- a/js/render/edit.js +++ b/js/render/edit.js @@ -4,7 +4,7 @@ var ie = (!+"\v1"); function set(el, props, hover) { - for (prop in props) { + for (var prop in props) { el.style[prop] = props[prop]; } } From 906b0ce47165c4e0212e0c764bcd5680338ffc70 Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Tue, 20 Mar 2012 23:37:17 +0000 Subject: [PATCH 2/3] Fixed innerHeight & Width being zero The iframe code was being inserted before the iframe is rendered in the DOM, so the innerWidth & innerHeight were always zero onload. So I've wrapped up in a setTimeout(10) to allow the browser to "tick" and now the values are back. Wooo! --- VERSION | 2 +- js/render/live.js | 39 ++++++++++++++++++-------------- js/render/render.js | 55 ++++++++++++++++++++++++++------------------- 3 files changed, 55 insertions(+), 41 deletions(-) diff --git a/VERSION b/VERSION index dd9ac7fe82..d9d3601284 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -2.9.11 +2.9.12 diff --git a/js/render/live.js b/js/render/live.js index e295e65751..8f201330b6 100644 --- a/js/render/live.js +++ b/js/render/live.js @@ -54,27 +54,32 @@ function renderLivePreview() { document = frame.contentDocument || frame.contentWindow.document, window = document.defaultView || document.parentWindow, d = new Date(); - + if (!useCustomConsole) console.log('--- refreshing live preview @ ' + [two(d.getHours()),two(d.getMinutes()),two(d.getSeconds())].join(':') + ' ---'); - + // strip autofocus from the markup - prevents the focus switching out of the editable area source = source.replace(/(<.*?\s)(autofocus)/g, '$1'); - - document.open(); - if (debug) { - document.write('
' + source.replace(/[<>&]/g, function (m) {
-      if (m == '<') return '<';
-      if (m == '>') return '>';
-      if (m == '"') return '"';
-    }) + '
'); - } else { - // nullify the blocking functions - // IE requires that this is done in the script, rather than off the window object outside of the doc.write - document.write(''); - document.write(source); - } - document.close(); + // this setTimeout allows the iframe to be rendered before our code + // runs - thus allowing us access to the innerWidth, et al + setTimeout(function () { + document.open(); + + if (debug) { + document.write('
' + source.replace(/[<>&]/g, function (m) {
+        if (m == '<') return '<';
+        if (m == '>') return '>';
+        if (m == '"') return '"';
+      }) + '
'); + } else { + // nullify the blocking functions + // IE requires that this is done in the script, rather than off the window object outside of the doc.write + document.write(''); + document.write(source); + } + document.close(); + + }, 10); } $live.find('.close').click(function () { diff --git a/js/render/render.js b/js/render/render.js index 25c53a36a1..2a36ca9903 100644 --- a/js/render/render.js +++ b/js/render/render.js @@ -10,6 +10,15 @@ var useCustomConsole = !(function () { return ok; })(); +var re = { + docReady: /\$\(document\)\.ready/, + console: /(^.|\b)console\./g, + script: /<\/script/ig, + code: /%code%/, + title: /(.*)<\/title>/i, + winLoad: /window\.onload\s*=/ +} + function getPreparedCode() { var parts = [], source = '', @@ -22,26 +31,25 @@ function getPreparedCode() { try { js = editors.javascript.getCode(); } catch (e) {} - // redirect JS console logged to our custom log while debugging if (consoleTest.test(js)) { if (useCustomConsole) { - js = js.replace(/(^.|\b)console\./g, '_console.'); + js = js.replace(re.console, '_console.'); } else { - js = js.replace(/(^.|\b)console\./g, 'window.top.console.'); + js = js.replace(re.console, 'window.top.console.'); } } // escape any script tags in the JS code, because that'll break the mushing together - js = js.replace(/<\/script/ig, '<\\/script'); + js = js.replace(re.script, '<\\/script'); // note that I'm using split and reconcat instead of replace, because if the js var // contains '$$' it's replaced to '$' - thus breaking Prototype code. This method // gets around the problem. if (!$.trim(source)) { source = "<pre>\n" + js + "</pre>"; - } else if (/%code%/.test(source)) { + } else if (re.code.test(source)) { parts = source.split('%code%'); source = parts[0] + js + parts[1]; } else if (js) { @@ -51,9 +59,7 @@ function getPreparedCode() { parts.push(source.substring(source.lastIndexOf('</body>'))); source = parts[0]; - close = parts.length == 2 && parts[1] ? parts[1] : ''; - } if (useCustomConsole) { source += "<script src=\"http://jsbin.com/js/render/console.js\"></script>\n<script>\n"; @@ -63,12 +69,12 @@ function getPreparedCode() { } // specific change for rendering $(document).ready() because iframes doesn't trigger ready (TODO - really test in IE, may have been fixed...) - if (/\$\(document\)\.ready/.test(source)) { - source = source.replace(/\$\(document\)\.ready/, 'window.onload = '); + if (re.docReady.test(source)) { + source = source.replace(re.docReady, 'window.onload = '); } - + // read the element out of the source code and plug it in to our document.title - var newDocTitle = source.match(/<title>(.*)<\/title>/i); + var newDocTitle = source.match(re.title); if (newDocTitle !== null && newDocTitle[1] !== documentTitle) { documentTitle = newDocTitle[1]; updateTitle(!/ \[unsaved\]/.test(document.title)); @@ -81,17 +87,20 @@ function renderPreview() { var doc = $('#preview iframe')[0], win = doc.contentDocument || doc.contentWindow.document, source = getPreparedCode(); - - win.open(); - - if (debug) { - win.write('<pre>' + source.replace(/[<>&]/g, function (m) { - if (m == '<') return '<'; - if (m == '>') return '>'; - if (m == '"') return '"'; - }) + '</pre>'); - } else { - win.write(source); + + // this setTimeout allows the iframe to be rendered before our code + // runs - thus allowing us access to the innerWidth, et al + setTimeout(function () { + win.open(); + if (debug) { + win.write('<pre>' + source.replace(/[<>&]/g, function (m) { + if (m == '<') return '<'; + if (m == '>') return '>'; + if (m == '"') return '"'; + }) + '</pre>'); + } else { + win.write(source); + } + win.close(); } - win.close(); } From 2ab121ccab696b21ba866a0c37bbd4b0207e86d8 Mon Sep 17 00:00:00 2001 From: Remy Sharp <remy@remysharp.com> Date: Tue, 20 Mar 2012 23:38:38 +0000 Subject: [PATCH 3/3] sheeeeeeet! close that damn function! --- js/render/render.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/render/render.js b/js/render/render.js index 2a36ca9903..8d456d713d 100644 --- a/js/render/render.js +++ b/js/render/render.js @@ -102,5 +102,5 @@ function renderPreview() { win.write(source); } win.close(); - } + }, 10); }