Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(237)

Side by Side Diff: dart/samples/swarm/swarm_ui_lib/view/SliderMenu.dart

Issue 66253002: Version 0.8.10.9 (Closed) Base URL: http://dart.googlecode.com/svn/trunk/
Patch Set: Created 7 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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
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
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 }
OLDNEW
« no previous file with comments | « dart/samples/swarm/swarm_ui_lib/view/PagedViews.dart ('k') | dart/samples/swarm/test/swarm_test.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698