| 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 |