OLD | NEW |
| (Empty) |
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 | |
5 /** | |
6 * An app for testing the grid layout system. | |
7 */ | |
8 | |
9 /** Creates a grid view structure given the CSS styles. */ | |
10 View createGrid(Map<String, Map<String, String>> styles) { | |
11 final gridStyle = styles['#grid']; | |
12 | |
13 final children = new List<MockView>(); | |
14 for (final String id in styles.getKeys()) { | |
15 // All selectors in this test are id selectors string the # prefix. | |
16 assert(id.startsWith('#')); | |
17 String elemId = id.substring(1); | |
18 if (elemId != 'grid') { | |
19 children.add(new MockView(elemId, styles[id])); | |
20 } | |
21 } | |
22 | |
23 return new MockCompositeView('grid', gridStyle, children); | |
24 } | |
25 | |
26 void _onLoad() { | |
27 var query = Uri.parseQuery(window.location.search)['q']; | |
28 if (query != null && query.length == 1) { | |
29 query = Uri.decodeComponent(query[0]); | |
30 addGridStyles('100%', '100%', 'margin:0px;'); | |
31 final view = createGrid(GridExamples.styles[query]); | |
32 view.addToDocument(document.body); | |
33 _addColorStyles(); | |
34 printMetrics(query); | |
35 } else { | |
36 final html = new StringBuffer(); | |
37 for (String ex in GridExamples.styles.getKeys()) { | |
38 html.add('<div><a href="?q=$ex">Grid Example $ex</a></div>'); | |
39 } | |
40 document.body.innerHTML = html.toString(); | |
41 } | |
42 } | |
43 | |
44 void addGridStyles(String width, String height, [String margin = '']) { | |
45 // Use monospace font and fixed line-height so the text size is predictable. | |
46 // TODO(jmesserly): only tested on Chromium Mac/Linux | |
47 Dom.addStyle(''' | |
48 body { $margin } | |
49 #grid { | |
50 position: absolute; | |
51 width: $width; | |
52 height: $height; | |
53 border-color: black; | |
54 } | |
55 .grid-item { | |
56 border: solid 2px; | |
57 border-radius: 8px; | |
58 font-family:monospace; | |
59 font-size:16px; | |
60 line-height:20px; | |
61 } | |
62 '''); | |
63 } | |
64 | |
65 void _addColorStyles() { | |
66 final grid = document.body.query('#grid'); | |
67 final colors = const [ 'darkred', 'darkorange', 'darkgoldenrod', | |
68 'darkgreen', 'darkblue', 'darkviolet']; | |
69 int c = 0; | |
70 var node = grid.elements[0]; | |
71 while (node != null) { | |
72 if (node.id != '') { | |
73 node.style.cssText += "color:" + colors[c++]; | |
74 } | |
75 node = node.nextElementSibling; | |
76 } | |
77 } | |
78 | |
79 class MockCompositeView extends CompositeView { | |
80 MockCompositeView(String id, Map styles, List childViews) | |
81 : super('') { | |
82 node.id = id; | |
83 CollectionUtils.copyMap(customStyle, styles); | |
84 | |
85 for (final v in childViews) { | |
86 addChild(v); | |
87 } | |
88 } | |
89 } | |
90 | |
91 class MockView extends View { | |
92 MockView(String id, Map styles) | |
93 : super.fromNode(new Element.html( | |
94 '<div class="grid-item">MockView-$id</div>')) { | |
95 node.id = id; | |
96 CollectionUtils.copyMap(customStyle, styles); | |
97 // TODO(jmesserly): this is needed to get horizontal content-sizing to work | |
98 node.style.display = 'inline-block'; | |
99 } | |
100 } | |
101 | |
102 | |
103 void printMetrics(String example) { | |
104 final node = document.body.query('#grid'); | |
105 String exampleId = example.split(' ')[0]; | |
106 final sb = new StringBuffer(); | |
107 sb.add("test('Spec Example $exampleId', () {\n"); | |
108 sb.add(" verifyExample('$example', {\n"); | |
109 final rects = new List(); | |
110 final elements = node.elements; | |
111 for (Element child in elements) { | |
112 rects.add(child.rect); | |
113 } | |
114 | |
115 window.requestLayoutFrame(() { | |
116 for (int i = 0; i < elements.length; i++) { | |
117 _appendMetrics(sb, elements[i], rects[i].value, ' '); | |
118 } | |
119 sb.add(' });\n'); | |
120 sb.add('});\n\n'); | |
121 window.console.log(sb.toString()); | |
122 }); | |
123 } | |
124 | |
125 void _appendMetrics(StringBuffer sb, Element node, ElementRect rect, | |
126 [String indent = '']) { | |
127 String id = node.id; | |
128 final offset = rect.offset; | |
129 num left = offset.left, top = offset.top; | |
130 num width = offset.width, height = offset.height; | |
131 sb.add("${indent}'$id': [$left, $top, $width, $height],\n"); | |
132 } | |
OLD | NEW |