| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <title>Dartboard</title> | |
| 5 <script src="codemirror/lib/codemirror.js"></script> | |
| 6 <link rel="stylesheet" href="codemirror/lib/codemirror.css"> | |
| 7 | |
| 8 <script src="codemirror/mode/css/css.js"></script> | |
| 9 <script src="codemirror/mode/dart/dart.js"></script> | |
| 10 <script src="codemirror/mode/htmlmixed/htmlmixed.js"></script> | |
| 11 <script src="codemirror/mode/javascript/javascript.js"></script> | |
| 12 <script src="codemirror/mode/xml/xml.js"></script> | |
| 13 | |
| 14 <script type="text/javascript" src="dartboard.dart.js"></script> | |
| 15 | |
| 16 <style type="text/css"> | |
| 17 .CodeMirror { | |
| 18 border: 1px solid black; margin: 2px | |
| 19 } | |
| 20 body, | |
| 21 html { | |
| 22 margin:0; | |
| 23 padding:0; | |
| 24 } | |
| 25 | |
| 26 #wrap { | |
| 27 width: 100%; | |
| 28 margin:0 auto; | |
| 29 } | |
| 30 | |
| 31 #dartEditor { | |
| 32 float:left; | |
| 33 width:50%; | |
| 34 } | |
| 35 #htmlEditor { | |
| 36 float:left; | |
| 37 width:50%; | |
| 38 } | |
| 39 #jsEditor { | |
| 40 float:left; | |
| 41 width:50%; | |
| 42 height:300px; | |
| 43 } | |
| 44 #result { | |
| 45 float:left; | |
| 46 width:48%; | |
| 47 height:300px; | |
| 48 border: 3px solid blue; | |
| 49 } | |
| 50 #warningEditor { | |
| 51 float:left; | |
| 52 width:50%; | |
| 53 } | |
| 54 #resultFrame { | |
| 55 width:100%; | |
| 56 } | |
| 57 | |
| 58 .compile_error { | |
| 59 background: red; | |
| 60 } | |
| 61 .compile_warning { | |
| 62 background: orange; | |
| 63 } | |
| 64 | |
| 65 </style> | |
| 66 <script> | |
| 67 if (document.readyState == "loaded") { | |
| 68 jsReady(); | |
| 69 } else { | |
| 70 window.addEventListener("load", function(e) { jsReady(); }, false); | |
| 71 } | |
| 72 function jsReady() { | |
| 73 var dartEditor = CodeMirror(document.getElementById("dartEditor"), { | |
| 74 mode: "dart", | |
| 75 matchBrackets: true, | |
| 76 tabSize: 2, | |
| 77 lineNumbers: true, | |
| 78 gutter: false | |
| 79 }); | |
| 80 var htmlEditor = CodeMirror(document.getElementById("htmlEditor"), { | |
| 81 mode: "htmlmixed", | |
| 82 tabSize: 2, | |
| 83 lineNumbers: true, | |
| 84 gutter: true | |
| 85 }); | |
| 86 var jsEditor = CodeMirror(document.getElementById("jsEditor"), { | |
| 87 mode: "javascript", | |
| 88 tabSize: 2, | |
| 89 lineNumbers: true, | |
| 90 gutter: true | |
| 91 }); | |
| 92 var warningEditor = CodeMirror(document.getElementById("warningEditor"),
{ | |
| 93 tabSize: 2, | |
| 94 lineNumbers: true, | |
| 95 gutter: true | |
| 96 }); | |
| 97 | |
| 98 document.getElementById("testButton").addEventListener("click", function
() { | |
| 99 }, false); | |
| 100 | |
| 101 function toDataURL(text) { | |
| 102 var preamble = "data:text/html;charset=utf-8,"; | |
| 103 var escaped = encodeURIComponent(text); | |
| 104 return preamble + escaped; | |
| 105 } | |
| 106 | |
| 107 function getSourceText(id) { | |
| 108 var s = document.getElementById(id).text; | |
| 109 s = s.replace(/^\s+|\s+$/g,""); | |
| 110 return s + "\n"; | |
| 111 } | |
| 112 window.getEditorText = function(id) { | |
| 113 if (id == "dartEditor") { | |
| 114 return dartEditor.getValue(); | |
| 115 } | |
| 116 } | |
| 117 window.markText = function(startLine, startCol, endLine, endCol, className
) { | |
| 118 return dartEditor.markText({line:startLine, ch:startCol}, {line:endLine,
ch:endCol}, className); | |
| 119 } | |
| 120 | |
| 121 window.setEditorText = function(id, text) { | |
| 122 var editor | |
| 123 if (id == "jsEditor") { | |
| 124 editor = jsEditor; | |
| 125 } else if (id == "dartEditor") { | |
| 126 editor = dartEditor; | |
| 127 } else if (id == "htmlEditor") { | |
| 128 editor = htmlEditor; | |
| 129 } else if (id == "warningEditor") { | |
| 130 editor = warningEditor; | |
| 131 } else { | |
| 132 throw "can't find editor for id " + id; | |
| 133 } | |
| 134 editor.setValue(text); | |
| 135 if (editor === jsEditor) { | |
| 136 var html = htmlEditor.getValue(); | |
| 137 var start = html.indexOf("{{DART}}"); | |
| 138 html = html.substr(0, start) + text + html.substr(start + "{{DART}}".l
ength); | |
| 139 html = html.replace("application/dart", "text/javascript"); | |
| 140 document.getElementById("resultFrame").setAttribute("src", toDataURL(h
tml)); | |
| 141 } else if (id == "htmlEditor") { | |
| 142 htmlEditor.setValue(text); | |
| 143 } | |
| 144 } | |
| 145 dartboardMain(); | |
| 146 dartEditor.focus(); | |
| 147 } | |
| 148 </script> | |
| 149 | |
| 150 </head> | |
| 151 <body> | |
| 152 <div id="wrap"> | |
| 153 <div> | |
| 154 <span>Dartboard</span> | |
| 155 <input type="button" value="run" id="runButton"> | |
| 156 <input type="button" value="clear output" id="clearButton"> | |
| 157 <input type="button" value="test" id="testButton" style="display:none;"> | |
| 158 <input type="checkbox" id="warningCheckbox"> | |
| 159 <label>treat warnings as errors</label> | |
| 160 </div> | |
| 161 <div id="dartEditor"></div> | |
| 162 <div id="htmlEditor"></div> | |
| 163 <div id="jsEditor"></div> | |
| 164 <div id="result"><iframe id="resultFrame" ></iframe></div> | |
| 165 <div id="warningEditor"></div> | |
| 166 </div> | |
| 167 <iframe src="dartlib.html" id="dartlibFrame" style="display:none;"></iframe> | |
| 168 </body> | |
| 169 </html> | |
| OLD | NEW |