terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 1 | // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file |
| 2 | // for details. All rights reserved. Use of this source code is governed by a |
| 3 | // BSD-style license that can be found in the LICENSE file. |
| 4 | |
gram@google.com | 58a0166 | 2012-11-08 17:42:40 +0000 | [diff] [blame] | 5 | import 'dart:html'; |
| 6 | import 'css.dart'; |
| 7 | import '../lib/file_system_memory.dart'; |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 8 | |
| 9 | void runCss([bool debug = false, bool parseOnly = false]) { |
terry@google.com | 007ac93 | 2012-01-12 22:17:33 +0000 | [diff] [blame] | 10 | final Document doc = window.document; |
| 11 | final TextAreaElement classes = doc.query("#classes"); |
| 12 | final TextAreaElement expression = doc.query('#expression'); |
| 13 | final TableCellElement validity = doc.query('#validity'); |
| 14 | final TableCellElement result = doc.query('#result'); |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 15 | |
| 16 | List<String> knownWorld = classes.value.split("\n"); |
| 17 | List<String> knownClasses = []; |
| 18 | List<String> knownIds = []; |
terry@google.com | 9a40e87 | 2012-01-10 15:28:53 +0000 | [diff] [blame] | 19 | for (final name in knownWorld) { |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 20 | if (name.startsWith('.')) { |
| 21 | knownClasses.add(name.substring(1)); |
| 22 | } else if (name.startsWith('#')) { |
| 23 | knownIds.add(name.substring(1)); |
| 24 | } |
| 25 | } |
| 26 | |
| 27 | CssWorld cssWorld = new CssWorld(knownClasses, knownIds); |
| 28 | bool templateValid = true; |
| 29 | String dumpTree = ""; |
| 30 | |
| 31 | String cssExpr = expression.value; |
| 32 | if (!debug) { |
| 33 | try { |
| 34 | cssParseAndValidate(cssExpr, cssWorld); |
kasperl@google.com | 72e66859 | 2012-08-29 11:58:58 +0000 | [diff] [blame] | 35 | } catch (cssException) { |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 36 | templateValid = false; |
| 37 | dumpTree = cssException.toString(); |
| 38 | } |
| 39 | } else if (parseOnly) { |
| 40 | try { |
terry@google.com | 91dd628 | 2012-03-15 21:19:54 +0000 | [diff] [blame] | 41 | Parser parser = new Parser(new SourceFile( |
| 42 | SourceFile.IN_MEMORY_FILE, cssExpr)); |
terry@google.com | 59a6cf9 | 2011-12-20 22:51:16 +0000 | [diff] [blame] | 43 | Stylesheet stylesheet = parser.parse(); |
| 44 | StringBuffer stylesheetTree = new StringBuffer(); |
| 45 | String prettyStylesheet = stylesheet.toString(); |
floitsch@google.com | dd48256f | 2013-03-08 13:07:18 +0000 | [diff] [blame] | 46 | stylesheetTree.write("${prettyStylesheet}\n"); |
| 47 | stylesheetTree.write("\n============>Tree Dump<============\n"); |
| 48 | stylesheetTree.write(stylesheet.toDebugString()); |
terry@google.com | 59a6cf9 | 2011-12-20 22:51:16 +0000 | [diff] [blame] | 49 | dumpTree = stylesheetTree.toString(); |
kasperl@google.com | 72e66859 | 2012-08-29 11:58:58 +0000 | [diff] [blame] | 50 | } catch (cssParseException) { |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 51 | templateValid = false; |
| 52 | dumpTree = cssParseException.toString(); |
| 53 | } |
| 54 | } else { |
| 55 | try { |
| 56 | dumpTree = cssParseAndValidateDebug(cssExpr, cssWorld); |
kasperl@google.com | 72e66859 | 2012-08-29 11:58:58 +0000 | [diff] [blame] | 57 | } catch (cssException) { |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 58 | templateValid = false; |
| 59 | dumpTree = cssException.toString(); |
| 60 | } |
| 61 | } |
| 62 | |
terry@google.com | 007ac93 | 2012-01-12 22:17:33 +0000 | [diff] [blame] | 63 | final bgcolor = templateValid ? "white" : "red"; |
| 64 | final color = templateValid ? "black" : "white"; |
| 65 | final valid = templateValid ? "VALID" : "NOT VALID"; |
terry@google.com | 91dd628 | 2012-03-15 21:19:54 +0000 | [diff] [blame] | 66 | String resultStyle = "resize:none; margin:0; height:100%; width:100%;" |
| 67 | "padding:5px 7px;"; |
| 68 | String validityStyle = "font-weight:bold; background-color:$bgcolor;" |
| 69 | "color:$color; border:1px solid black; border-bottom:0px solid white;"; |
terry@google.com | 007ac93 | 2012-01-12 22:17:33 +0000 | [diff] [blame] | 70 | validity.innerHTML = ''' |
| 71 | <div style="$validityStyle"> |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 72 | Expression: $cssExpr is $valid |
| 73 | </div> |
terry@google.com | 007ac93 | 2012-01-12 22:17:33 +0000 | [diff] [blame] | 74 | '''; |
terry@google.com | 91dd628 | 2012-03-15 21:19:54 +0000 | [diff] [blame] | 75 | result.innerHTML = "<textarea style=\"$resultStyle\">$dumpTree</textarea>"; |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 76 | } |
| 77 | |
| 78 | void main() { |
terry@google.com | 007ac93 | 2012-01-12 22:17:33 +0000 | [diff] [blame] | 79 | final element = new Element.tag('div'); |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 80 | element.innerHTML = ''' |
terry@google.com | 007ac93 | 2012-01-12 22:17:33 +0000 | [diff] [blame] | 81 | <table style="width: 100%; height: 100%;"> |
| 82 | <tbody> |
| 83 | <tr> |
| 84 | <td style="vertical-align: top; width: 200px;"> |
| 85 | <table style="height: 100%;"> |
| 86 | <tbody> |
| 87 | <tr style="vertical-align: top; height: 1em;"> |
| 88 | <td> |
| 89 | <span style="font-weight:bold;">Classes</span> |
| 90 | </td> |
| 91 | </tr> |
| 92 | <tr style="vertical-align: top;"> |
| 93 | <td> |
| 94 | <textarea id="classes" style="resize: none; width: 200px; height: 100%; padding: 5px 7px;">.foobar\n.xyzzy\n.test\n.dummy\n#myId\n#myStory</textarea> |
| 95 | </td> |
| 96 | </tr> |
| 97 | </tbody> |
| 98 | </table> |
| 99 | </td> |
| 100 | <td> |
| 101 | <table style="width: 100%; height: 100%;" cellspacing=0 cellpadding=0 border=0> |
| 102 | <tbody> |
| 103 | <tr style="vertical-align: top; height: 100px;"> |
| 104 | <td> |
| 105 | <table style="width: 100%;"> |
| 106 | <tbody> |
| 107 | <tr> |
| 108 | <td> |
| 109 | <span style="font-weight:bold;">Selector Expression</span> |
| 110 | </td> |
| 111 | </tr> |
| 112 | <tr> |
| 113 | <td> |
| 114 | <textarea id="expression" style="resize: none; width: 100%; height: 100px; padding: 5px 7px;"></textarea> |
| 115 | </td> |
| 116 | </tr> |
| 117 | </tbody> |
| 118 | </table> |
| 119 | </td> |
| 120 | </tr> |
| 121 | |
| 122 | <tr style="vertical-align: top; height: 50px;"> |
| 123 | <td> |
| 124 | <table> |
| 125 | <tbody> |
| 126 | <tr> |
| 127 | <td> |
terry@google.com | 91dd628 | 2012-03-15 21:19:54 +0000 | [diff] [blame] | 128 | <button id=parse>Parse</button> |
terry@google.com | 007ac93 | 2012-01-12 22:17:33 +0000 | [diff] [blame] | 129 | </td> |
| 130 | <td> |
terry@google.com | 91dd628 | 2012-03-15 21:19:54 +0000 | [diff] [blame] | 131 | <button id=check>Check</button> |
terry@google.com | 007ac93 | 2012-01-12 22:17:33 +0000 | [diff] [blame] | 132 | </td> |
| 133 | <td> |
terry@google.com | 91dd628 | 2012-03-15 21:19:54 +0000 | [diff] [blame] | 134 | <button id=debug>Debug</button> |
terry@google.com | 007ac93 | 2012-01-12 22:17:33 +0000 | [diff] [blame] | 135 | </td> |
| 136 | </tr> |
| 137 | </tbody> |
| 138 | </table> |
| 139 | </td> |
| 140 | </tr> |
| 141 | |
| 142 | <tr style="vertical-align: top;"> |
| 143 | <td> |
| 144 | <table style="width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0"> |
| 145 | <tbody> |
| 146 | <tr style="vertical-align: top; height: 1em;"> |
| 147 | <td> |
| 148 | <span style="font-weight:bold;">Result</span> |
| 149 | </td> |
| 150 | </tr> |
| 151 | <tr style="vertical-align: top; height: 1em;"> |
| 152 | <td id="validity"> |
| 153 | </td> |
| 154 | </tr> |
| 155 | <tr style="vertical-align: top;"> |
| 156 | <td id="result"> |
| 157 | <textarea style="resize: none; width: 100%; height: 100%; border: black solid 1px; padding: 5px 7px;"></textarea> |
| 158 | </td> |
| 159 | </tr> |
| 160 | </tbody> |
| 161 | </table> |
| 162 | </td> |
| 163 | </tr> |
| 164 | </tbody> |
| 165 | </table> |
| 166 | </td> |
| 167 | </tr> |
| 168 | </tbody> |
| 169 | </table> |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 170 | '''; |
| 171 | |
terry@google.com | 007ac93 | 2012-01-12 22:17:33 +0000 | [diff] [blame] | 172 | document.body.style.setProperty("background-color", "lightgray"); |
| 173 | document.body.elements.add(element); |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 174 | |
terry@google.com | 91dd628 | 2012-03-15 21:19:54 +0000 | [diff] [blame] | 175 | ButtonElement parseButton = window.document.query('#parse'); |
| 176 | parseButton.on.click.add((MouseEvent e) { |
| 177 | runCss(true, true); |
| 178 | }); |
| 179 | |
| 180 | ButtonElement checkButton = window.document.query('#check'); |
| 181 | checkButton.on.click.add((MouseEvent e) { |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 182 | runCss(); |
terry@google.com | 91dd628 | 2012-03-15 21:19:54 +0000 | [diff] [blame] | 183 | }); |
| 184 | |
| 185 | ButtonElement debugButton = window.document.query('#debug'); |
| 186 | debugButton.on.click.add((MouseEvent e) { |
| 187 | runCss(true); |
| 188 | }); |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 189 | |
terry@google.com | 59a6cf9 | 2011-12-20 22:51:16 +0000 | [diff] [blame] | 190 | initCssWorld(false); |
terry@google.com | 64784aa1 | 2011-11-22 17:30:20 +0000 | [diff] [blame] | 191 | } |