OLD | NEW |
1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file | 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 | 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. | 3 // BSD-style license that can be found in the LICENSE file. |
4 | 4 |
5 part of view; | 5 part of view; |
6 | 6 |
7 typedef void SelectHandler(String menuText); | 7 typedef void SelectHandler(String menuText); |
8 | 8 |
9 /** | 9 /** |
10 * This implements a horizontal menu bar with a sliding triangle arrow | 10 * This implements a horizontal menu bar with a sliding triangle arrow |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
53 </div> | 53 </div> |
54 '''); | 54 '''); |
55 } | 55 } |
56 | 56 |
57 void enterDocument() { | 57 void enterDocument() { |
58 // select the first item | 58 // select the first item |
59 // todo(jacobr): too much actual work is performed in enterDocument. | 59 // todo(jacobr): too much actual work is performed in enterDocument. |
60 // Ideally, enterDocument should do nothing more than redecorate a view | 60 // Ideally, enterDocument should do nothing more than redecorate a view |
61 // and perhaps calculating the correct child sizes for edge cases that | 61 // and perhaps calculating the correct child sizes for edge cases that |
62 // cannot be handled by the browser layout engine. | 62 // cannot be handled by the browser layout engine. |
63 selectItem(node.query('.sm-item'), false); | 63 selectItem(node.querySelector('.sm-item'), false); |
64 | 64 |
65 // TODO(mattsh), abstract this somehow into a touch click mixin | 65 // TODO(mattsh), abstract this somehow into a touch click mixin |
66 if (Device.supportsTouch) { | 66 if (Device.supportsTouch) { |
67 node.onTouchStart.listen((event) { | 67 node.onTouchStart.listen((event) { |
68 touchItem = itemOfTouchEvent(event); | 68 touchItem = itemOfTouchEvent(event); |
69 if (touchItem != null) { | 69 if (touchItem != null) { |
70 selectItemText(touchItem); | 70 selectItemText(touchItem); |
71 } | 71 } |
72 event.preventDefault(); | 72 event.preventDefault(); |
73 }); | 73 }); |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
111 return element; | 111 return element; |
112 } | 112 } |
113 } | 113 } |
114 node = node.parent; | 114 node = node.parent; |
115 } | 115 } |
116 return null; | 116 return null; |
117 } | 117 } |
118 | 118 |
119 void selectItemText(Element item) { | 119 void selectItemText(Element item) { |
120 // unselect all menu items | 120 // unselect all menu items |
121 for (final sliderItem in node.queryAll('.sm-item')) { | 121 for (final sliderItem in node.querySelectorAll('.sm-item')) { |
122 sliderItem.classes.remove('sel'); | 122 sliderItem.classes.remove('sel'); |
123 } | 123 } |
124 | 124 |
125 // select the item the user clicked on | 125 // select the item the user clicked on |
126 item.classes.add('sel'); | 126 item.classes.add('sel'); |
127 } | 127 } |
128 | 128 |
129 void selectItem(Element item, bool animate) { | 129 void selectItem(Element item, bool animate) { |
130 if (!item.classes.contains('sm-item')) { | 130 if (!item.classes.contains('sm-item')) { |
131 return; | 131 return; |
132 } | 132 } |
133 | 133 |
134 selectedItem = item; | 134 selectedItem = item; |
135 selectItemText(item); | 135 selectItemText(item); |
136 updateIndicator(animate); | 136 updateIndicator(animate); |
137 onSelect(item.text); | 137 onSelect(item.text); |
138 } | 138 } |
139 | 139 |
140 void selectNext(bool animate) { | 140 void selectNext(bool animate) { |
141 final result = node.query('.sm-item.sel').nextElementSibling; | 141 final result = node.querySelector('.sm-item.sel').nextElementSibling; |
142 if (result != null) { | 142 if (result != null) { |
143 selectItem(result, animate); | 143 selectItem(result, animate); |
144 } | 144 } |
145 } | 145 } |
146 | 146 |
147 void selectPrevious(bool animate) { | 147 void selectPrevious(bool animate) { |
148 final result = node.query('.sm-item.sel').previousElementSibling; | 148 final result = node.querySelector('.sm-item.sel').previousElementSibling; |
149 if (result != null) { | 149 if (result != null) { |
150 selectItem(result, animate); | 150 selectItem(result, animate); |
151 } | 151 } |
152 } | 152 } |
153 | 153 |
154 /** | 154 /** |
155 * animate - if true, then animate the movement of the triangle slider | 155 * animate - if true, then animate the movement of the triangle slider |
156 */ | 156 */ |
157 void updateIndicator(bool animate) { | 157 void updateIndicator(bool animate) { |
158 if (selectedItem != null) { | 158 if (selectedItem != null) { |
159 // calculate where we want to put the triangle | 159 // calculate where we want to put the triangle |
160 scheduleMicrotask(() { | 160 scheduleMicrotask(() { |
161 num x = selectedItem.offset.left + | 161 num x = selectedItem.offset.left + |
162 selectedItem.offset.width / 2 - TRIANGLE_WIDTH / 2; | 162 selectedItem.offset.width / 2 - TRIANGLE_WIDTH / 2; |
163 _moveIndicator(x, animate); | 163 _moveIndicator(x, animate); |
164 }); | 164 }); |
165 } else { | 165 } else { |
166 _moveIndicator(0, animate); | 166 _moveIndicator(0, animate); |
167 } | 167 } |
168 } | 168 } |
169 | 169 |
170 void _moveIndicator(num x, bool animate) { | 170 void _moveIndicator(num x, bool animate) { |
171 // find the slider filler (the div element to the left of the | 171 // find the slider filler (the div element to the left of the |
172 // triangle) set its width the push the triangle to where we want it. | 172 // triangle) set its width the push the triangle to where we want it. |
173 String duration = animate ? '.3s' : '0s'; | 173 String duration = animate ? '.3s' : '0s'; |
174 final triangle = node.query('.sm-triangle'); | 174 final triangle = node.querySelector('.sm-triangle'); |
175 triangle.style.transitionDuration = duration; | 175 triangle.style.transitionDuration = duration; |
176 FxUtil.setWebkitTransform(triangle, x, 0); | 176 FxUtil.setWebkitTransform(triangle, x, 0); |
177 } | 177 } |
178 } | 178 } |
OLD | NEW |