Permalink
Browse files

Use the editor properly with IE.

By placing CodeMirror within div instead of p, it won't throw a warning
(exception). This way we don't fall back to plain textarea anymore.

http://code.google.com/p/esprima/issues/detail?id=300
  • Loading branch information...
1 parent 0f130eb commit f57724b28000646f91c09dbcb0908df95cad0055 @ariya committed Oct 3, 2012
Showing with 22 additions and 21 deletions.
  1. +3 −3 demo/collector.html
  2. +3 −3 demo/functiontrace.html
  3. +3 −3 demo/highlight.html
  4. +3 −3 demo/minify.html
  5. +4 −3 demo/parse.html
  6. +3 −3 demo/rewrite.html
  7. +3 −3 demo/validate.html
View
@@ -28,7 +28,7 @@ <h1>Regular Expression Collector <small>uncovers all your secrets</small></h1>
<p><strong>Note</strong>: Only regular expression literals and objects created with <code>RegExp</code> are considered.</p>
<p>Type ECMAScript code:</p>
- <p><textarea id="code" autofocus="autofocus" cols="70" rows="15" spellcheck="false">
+<div><textarea id="code" autofocus="autofocus" cols="70" rows="15" spellcheck="false">
var letterRE = new RegExp('[a-zA-Z]', 'g'),
digitRE = RegExp('[0-9]');
@@ -39,7 +39,7 @@ <h1>Regular Expression Collector <small>uncovers all your secrets</small></h1>
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
.replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
}
-</textarea></p>
+</textarea></div>
<p id="codemirror" align="right"><small>The above code editor is based on <a href="http://codemirror.net" target="_blank">CodeMirror</a>.</small></p>
<p>Using Esprima version <span id="version"></span>.</p>
@@ -51,7 +51,7 @@ <h1>Regular Expression Collector <small>uncovers all your secrets</small></h1>
<a href="http://ariya.ofilabs.com/about" target="_blank">Ariya Hidayat</a>. Follow <a href="http://twitter.com/ariyahidayat">@ariyahidayat</a> on Twitter.
</div>
-<p id="testbox" style="visibility: hidden;"><textarea id="test"></textarea></p>
+<div id="testbox" style="visibility: hidden;"><textarea id="test"></textarea></div>
</div>
<script>
/*jslint sloppy:true browser:true */
View
@@ -33,7 +33,7 @@
<h1>Function Trace <small>reveals what is being called</small></h1>
<p>Type ECMAScript code:</p>
- <p><textarea id="code" autofocus="autofocus" cols="70" rows="25" spellcheck="false">
+<div><textarea id="code" autofocus="autofocus" cols="70" rows="25" spellcheck="false">
Array.prototype.swap = function (i, j) {
var k = this[i]; this[i] = this[j]; this[j] = k;
}
@@ -55,7 +55,7 @@ <h1>Function Trace <small>reveals what is being called</small></h1>
var N = 100, data = []; while (N &gt; 0) data.push(N--);
bubbleSort(data);
-</textarea></p>
+</textarea></div>
<p id="codemirror" align="right"><small>The above code editor is based on <a href="http://codemirror.net" target="_blank">CodeMirror</a>.</small></p>
<p><input type="button" value="Insert tracing" id="instrument">
@@ -71,7 +71,7 @@ <h1>Function Trace <small>reveals what is being called</small></h1>
<a href="http://ariya.ofilabs.com/about" target="_blank">Ariya Hidayat</a>. Follow <a href="http://twitter.com/ariyahidayat">@ariyahidayat</a> on Twitter.
</div>
-<p id="testbox" style="visibility: hidden;"><textarea id="test"></textarea></p>
+<div id="testbox" style="visibility: hidden;"><textarea id="test"></textarea></div>
</div>
<script>
/*jslint sloppy:true browser:true */
View
@@ -43,7 +43,7 @@ <h1>Identifier Highlight <small>to spot everything</small></h1>
<p>Type ECMAScript code and place the cursor in an identifier.<br>
<strong>Note</strong>: Scope is not handled properly yet, see <a href="http://code.google.com/p/esprima/issues/detail?id=98">issue 98</a>.</p>
-<p><textarea id="code" autofocus="autofocus" cols="70" rows="25" spellcheck="false">
+<div><textarea id="code" autofocus="autofocus" cols="70" rows="25" spellcheck="false">
// Array shuffling code from Underscore.js.
_.shuffle = function(obj) {
@@ -55,7 +55,7 @@ <h1>Identifier Highlight <small>to spot everything</small></h1>
});
return shuffled;
};
-</textarea></p>
+</textarea></div>
<p id="codemirror" align="right"><small>The above code editor is based on <a href="http://codemirror.net" target="_blank">CodeMirror</a>.</small></p>
@@ -67,7 +67,7 @@ <h1>Identifier Highlight <small>to spot everything</small></h1>
<a href="http://ariya.ofilabs.com/about" target="_blank">Ariya Hidayat</a>. Follow <a href="http://twitter.com/ariyahidayat">@ariyahidayat</a> on Twitter.
</div>
-<p id="testbox" style="visibility: hidden;"><textarea id="test"></textarea></p>
+<div id="testbox" style="visibility: hidden;"><textarea id="test"></textarea></div>
</div>
<script>
/*jslint sloppy:true browser:true */
View
@@ -35,7 +35,7 @@ <h1>Minify <small>compacts everything</small></h1>
<p>Type ECMAScript code in the editor. Press <b>Minify</b> button to shorten the code
using <a href="https://github.com/Constellation/escodegen">Escodegen project</a>.</p>
-<p><textarea id="code" autofocus="autofocus" cols="70" rows="25" spellcheck="false">
+<div><textarea id="code" autofocus="autofocus" cols="70" rows="25" spellcheck="false">
function bubbleSort (list) {
var items = list.slice(0), swapped =false,
p, q;
@@ -52,7 +52,7 @@ <h1>Minify <small>compacts everything</small></h1>
}
return items;
}
-</textarea></p>
+</textarea></div>
<p><input type="button" value="Minify" id="minify"></p>
@@ -66,7 +66,7 @@ <h1>Minify <small>compacts everything</small></h1>
<a href="http://ariya.ofilabs.com/about" target="_blank">Ariya Hidayat</a>. Follow <a href="http://twitter.com/ariyahidayat">@ariyahidayat</a> on Twitter.
</div>
-<p id="testbox" style="visibility: hidden;"><textarea id="test"></textarea></p>
+<div id="testbox" style="visibility: hidden;"><textarea id="test"></textarea></div>
</div>
</body>
</html>
View
@@ -260,9 +260,10 @@ <h1>Parser <small>produces syntax tree</small></h1>
<p>Esprima version <span id="version"></span>.</p>
<p>Type ECMAScript code:</p>
- <p><textarea id="code" autofocus="autofocus" cols="70" rows="15" spellcheck="false">
+<div><textarea id="code" autofocus="autofocus" cols="70" rows="15" spellcheck="false">
// Life, Universe, and Everything
-var answer = 6 * 7;</textarea></p>
+var answer = 6 * 7;
+</textarea></div>
<p id="codemirror" align="right"><small>The above code editor is based on <a href="http://codemirror.net" target="_blank">CodeMirror</a>.</small></p>
<p><label><input type="checkbox" id="raw"> Preserve raw value of literals</label>
<label><input type="checkbox" id="comment"> Include comments</label></p>
@@ -302,7 +303,7 @@ <h3><a id="show_tree">Tree</a></h3>
</div>
-->
-<p id="testbox"><textarea id="test"></textarea></p>
+<div id="testbox"><textarea id="test"></textarea></div>
</div>
<script>
window.onload = function () {
View
@@ -35,7 +35,7 @@ <h1>Source Rewrite <small>cleans up and reformats everything</small></h1>
<p>Type ECMAScript code in the editor. Press <b>Rewrite</b> button to get the code
rewritten using <a href="https://github.com/Constellation/escodegen">Escodegen project</a>.</p>
-<p><textarea id="code" autofocus="autofocus" cols="70" rows="25" spellcheck="false">
+<div><textarea id="code" autofocus="autofocus" cols="70" rows="25" spellcheck="false">
// Example of messy code with confusing and inconsistent indentations
function bubbleSort (list) {
@@ -54,7 +54,7 @@ <h1>Source Rewrite <small>cleans up and reformats everything</small></h1>
}
return items; alert("Finish");
}
-</textarea></p>
+</textarea></div>
<p>Indent with:
<label><input type="radio" name="indent" id="onetab" value="onetab"> tab</label>
@@ -86,7 +86,7 @@ <h1>Source Rewrite <small>cleans up and reformats everything</small></h1>
<a href="http://ariya.ofilabs.com/about" target="_blank">Ariya Hidayat</a>. Follow <a href="http://twitter.com/ariyahidayat">@ariyahidayat</a> on Twitter.
</div>
-<p id="testbox" style="visibility: hidden;"><textarea id="test"></textarea></p>
+<div id="testbox" style="visibility: hidden;"><textarea id="test"></textarea></div>
</div>
</body>
</html>
View
@@ -42,7 +42,7 @@ <h1>Syntax Validator <small>checks for mistakes and errors</small></h1>
<p>Esprima version <span id="version"></span>.</p>
<p>Type ECMAScript code:</p>
-<p><textarea id="code" autofocus="autofocus" cols="70" rows="15" spellcheck="false">
+<div><textarea id="code" autofocus="autofocus" cols="70" rows="15" spellcheck="false">
return 42; // Return statement not inside a function
function f() {
@@ -58,7 +58,7 @@ <h1>Syntax Validator <small>checks for mistakes and errors</small></h1>
with (z) {}
}
-</textarea></p>
+</textarea></div>
<p id="codemirror" align="right"><small>The above code editor is based on <a href="http://codemirror.net" target="_blank">CodeMirror</a>.</small></p>
<div id="result"><p>No result yet.</p></div>
@@ -67,7 +67,7 @@ <h1>Syntax Validator <small>checks for mistakes and errors</small></h1>
<a href="http://ariya.ofilabs.com/about" target="_blank">Ariya Hidayat</a>. Follow <a href="http://twitter.com/ariyahidayat">@ariyahidayat</a> on Twitter.
</div>
-<p id="testbox"><textarea id="test"></textarea></p>
+<div id="testbox"><textarea id="test"></textarea></div>
</div>
<script src="validate.js"></script>
</body>

0 comments on commit f57724b

Please sign in to comment.