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 class PageState { | 5 class PageState { |
6 final ObservableValue<int> current; | 6 final ObservableValue<int> current; |
7 final ObservableValue<int> target; | 7 final ObservableValue<int> target; |
8 final ObservableValue<int> length; | 8 final ObservableValue<int> length; |
9 PageState() : | 9 PageState() : |
10 current = new ObservableValue<int>(0), | 10 current = new ObservableValue<int>(0), |
(...skipping 98 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
109 // work reasonably well for both clicking and throwing. So for now, leave | 109 // work reasonably well for both clicking and throwing. So for now, leave |
110 // the scroller configured the default way. | 110 // the scroller configured the default way. |
111 | 111 |
112 // TODO(jacobr): use named arguments when available. | 112 // TODO(jacobr): use named arguments when available. |
113 scroller = new Scroller( | 113 scroller = new Scroller( |
114 _container, | 114 _container, |
115 false /* verticalScrollEnabled */, | 115 false /* verticalScrollEnabled */, |
116 true /* horizontalScrollEnabled */, | 116 true /* horizontalScrollEnabled */, |
117 true /* momementumEnabled */, | 117 true /* momementumEnabled */, |
118 () { | 118 () { |
119 final completer = new Completer<Size>(); | 119 return new Size(_getViewLength(_container), 1); |
120 _container.rect.then((ElementRect rect) { | |
121 // Only view width matters. | |
122 completer.complete(new Size(_getViewLength(rect), 1)); | |
123 }); | |
124 return completer.future; | |
125 }, | 120 }, |
126 Scroller.FAST_SNAP_DECELERATION_FACTOR); | 121 Scroller.FAST_SNAP_DECELERATION_FACTOR); |
127 | 122 |
128 scroller.onDecelStart.add(_snapToPage); | 123 scroller.onDecelStart.add(_snapToPage); |
129 scroller.onScrollerDragEnd.add(_snapToPage); | 124 scroller.onScrollerDragEnd.add(_snapToPage); |
130 scroller.onContentMoved.add(_onContentMoved); | 125 scroller.onContentMoved.add(_onContentMoved); |
131 return node; | 126 return node; |
132 } | 127 } |
133 | 128 |
134 int _getViewLength(ElementRect rect) { | 129 int _getViewLength(Element element) { |
135 return _computePageSize(rect) * pages.length.value; | 130 return _computePageSize(element) * pages.length.value; |
136 } | 131 } |
137 | 132 |
138 // TODO(jmesserly): would be better to not have this code in enterDocument. | 133 // TODO(jmesserly): would be better to not have this code in enterDocument. |
139 // But we need computedStyle to read our CSS properties. | 134 // But we need computedStyle to read our CSS properties. |
140 void enterDocument() { | 135 void enterDocument() { |
141 contentView.node.computedStyle.then((CSSStyleDeclaration style) { | 136 contentView.node.computedStyle.then((CSSStyleDeclaration style) { |
142 _computeColumnGap(style); | 137 _computeColumnGap(style); |
143 | 138 |
144 // Trigger a fake resize event so we measure our height. | 139 // Trigger a fake resize event so we measure our height. |
145 windowResized(); | 140 windowResized(); |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
178 return double.parse(value).round().toInt(); | 173 return double.parse(value).round().toInt(); |
179 } | 174 } |
180 | 175 |
181 /** Watch for resize and update page count. */ | 176 /** Watch for resize and update page count. */ |
182 void windowResized() { | 177 void windowResized() { |
183 // TODO(jmesserly): verify we aren't triggering unnecessary layouts. | 178 // TODO(jmesserly): verify we aren't triggering unnecessary layouts. |
184 | 179 |
185 // The content needs to have its height explicitly set, or columns don't | 180 // The content needs to have its height explicitly set, or columns don't |
186 // flow to the right correctly. So we copy our own height and set the height | 181 // flow to the right correctly. So we copy our own height and set the height |
187 // of the content. | 182 // of the content. |
188 node.rect.then((ElementRect rect) { | 183 window.requestLayoutFrame(() { |
189 contentView.node.style.height = '${rect.offset.height}px'; | 184 contentView.node.style.height = '${node.offsetHeight}px'; |
190 }); | 185 }); |
191 _updatePageCount(null); | 186 _updatePageCount(null); |
192 } | 187 } |
193 | 188 |
194 bool _updatePageCount(Callback callback) { | 189 bool _updatePageCount(Callback callback) { |
195 int pageLength = 1; | 190 int pageLength = 1; |
196 _container.rect.then((ElementRect rect) { | 191 window.requestLayoutFrame(() { |
197 if (rect.scroll.width > rect.offset.width) { | 192 if (_container.scrollWidth > _container.offsetWidth) { |
198 pageLength = (rect.scroll.width / _computePageSize(rect)) | 193 pageLength = (_container.scrollWidth / _computePageSize(_container)) |
199 .ceil().toInt(); | 194 .ceil().toInt(); |
200 } | 195 } |
201 pageLength = Math.max(pageLength, 1); | 196 pageLength = Math.max(pageLength, 1); |
202 | 197 |
203 int oldPage = pages.target.value; | 198 int oldPage = pages.target.value; |
204 int newPage = Math.min(oldPage, pageLength - 1); | 199 int newPage = Math.min(oldPage, pageLength - 1); |
205 | 200 |
206 // Hacky: make sure a change event always fires. | 201 // Hacky: make sure a change event always fires. |
207 // This is so we adjust the 3d transform after resize. | 202 // This is so we adjust the 3d transform after resize. |
208 if (oldPage == newPage) { | 203 if (oldPage == newPage) { |
209 pages.target.value = 0; | 204 pages.target.value = 0; |
210 } | 205 } |
211 assert(newPage < pageLength); | 206 assert(newPage < pageLength); |
212 pages.target.value = newPage; | 207 pages.target.value = newPage; |
213 pages.length.value = pageLength; | 208 pages.length.value = pageLength; |
214 if (callback != null) { | 209 if (callback != null) { |
215 callback(); | 210 callback(); |
216 } | 211 } |
217 }); | 212 }); |
218 } | 213 } |
219 | 214 |
220 void _onContentMoved(Event e) { | 215 void _onContentMoved(Event e) { |
221 _container.rect.then((ElementRect rect) { | 216 window.requestLayoutFrame(() { |
222 num current = scroller.contentOffset.x; | 217 num current = scroller.contentOffset.x; |
223 int pageSize = _computePageSize(rect); | 218 int pageSize = _computePageSize(_container); |
224 pages.current.value = -(current / pageSize).round().toInt(); | 219 pages.current.value = -(current / pageSize).round().toInt(); |
225 }); | 220 }); |
226 } | 221 } |
227 | 222 |
228 void _snapToPage(Event e) { | 223 void _snapToPage(Event e) { |
229 num current = scroller.contentOffset.x; | 224 num current = scroller.contentOffset.x; |
230 num currentTarget = scroller.currentTarget.x; | 225 num currentTarget = scroller.currentTarget.x; |
231 _container.rect.then((ElementRect rect) { | 226 window.requestLayoutFrame(() { |
232 int pageSize = _computePageSize(rect); | 227 int pageSize = _computePageSize(_container); |
233 int destination; | 228 int destination; |
234 num currentPageNumber = -(current / pageSize).round(); | 229 num currentPageNumber = -(current / pageSize).round(); |
235 num pageNumber = -currentTarget / pageSize; | 230 num pageNumber = -currentTarget / pageSize; |
236 if (current == currentTarget) { | 231 if (current == currentTarget) { |
237 // User was just static dragging so round to the nearest page. | 232 // User was just static dragging so round to the nearest page. |
238 pageNumber = pageNumber.round(); | 233 pageNumber = pageNumber.round(); |
239 } else { | 234 } else { |
240 if (currentPageNumber == pageNumber.round() && | 235 if (currentPageNumber == pageNumber.round() && |
241 (pageNumber - currentPageNumber).abs() > MIN_THROW_PAGE_FRACTION && | 236 (pageNumber - currentPageNumber).abs() > MIN_THROW_PAGE_FRACTION && |
242 -current + _viewportSize < _getViewLength(rect) && current < 0) { | 237 -current + _viewportSize < _getViewLength(_container) && |
| 238 current < 0) { |
243 // The user is trying to throw so we want to round up to the | 239 // The user is trying to throw so we want to round up to the |
244 // nearest page in the direction they are throwing. | 240 // nearest page in the direction they are throwing. |
245 pageNumber = currentTarget < current | 241 pageNumber = currentTarget < current |
246 ? currentPageNumber + 1 : currentPageNumber - 1; | 242 ? currentPageNumber + 1 : currentPageNumber - 1; |
247 } else { | 243 } else { |
248 pageNumber = pageNumber.round(); | 244 pageNumber = pageNumber.round(); |
249 } | 245 } |
250 } | 246 } |
251 pageNumber = pageNumber.toInt(); | 247 pageNumber = pageNumber.toInt(); |
252 num translate = -pageNumber * pageSize; | 248 num translate = -pageNumber * pageSize; |
253 pages.current.value = pageNumber; | 249 pages.current.value = pageNumber; |
254 if (currentTarget != translate) { | 250 if (currentTarget != translate) { |
255 scroller.throwTo(translate, 0); | 251 scroller.throwTo(translate, 0); |
256 } else { | 252 } else { |
257 // Update the target page number when we are done animating. | 253 // Update the target page number when we are done animating. |
258 pages.target.value = pageNumber; | 254 pages.target.value = pageNumber; |
259 } | 255 } |
260 }); | 256 }); |
261 } | 257 } |
262 | 258 |
263 int _computePageSize(ElementRect rect) { | 259 int _computePageSize(Element element) { |
264 // Hacky: we need to duplicate the way the columns are being computed, | 260 // Hacky: we need to duplicate the way the columns are being computed, |
265 // including rounding, to figure out how far to translate the div. | 261 // including rounding, to figure out how far to translate the div. |
266 // See http://www.w3.org/TR/css3-multicol/#column-width | 262 // See http://www.w3.org/TR/css3-multicol/#column-width |
267 _viewportSize = rect.offset.width; | 263 _viewportSize = element.offsetWidth; |
268 | 264 |
269 // Figure out how many columns we're rendering. | 265 // Figure out how many columns we're rendering. |
270 // The algorithm ensures we're bigger than the specified min size. | 266 // The algorithm ensures we're bigger than the specified min size. |
271 int perPage = Math.max(1, | 267 int perPage = Math.max(1, |
272 (_viewportSize + _columnGap) ~/ (_columnWidth + _columnGap)); | 268 (_viewportSize + _columnGap) ~/ (_columnWidth + _columnGap)); |
273 | 269 |
274 // Divide up the viewport between the columns. | 270 // Divide up the viewport between the columns. |
275 int columnSize = (_viewportSize - (perPage - 1) * _columnGap) ~/ perPage; | 271 int columnSize = (_viewportSize - (perPage - 1) * _columnGap) ~/ perPage; |
276 | 272 |
277 // Finally, compute how big each page is, and how far to translate. | 273 // Finally, compute how big each page is, and how far to translate. |
278 return perPage * (columnSize + _columnGap); | 274 return perPage * (columnSize + _columnGap); |
279 } | 275 } |
280 | 276 |
281 void _onPageSelected() { | 277 void _onPageSelected() { |
282 _container.rect.then((ElementRect rect) { | 278 window.requestLayoutFrame(() { |
283 int translate = -pages.target.value * _computePageSize(rect); | 279 int translate = -pages.target.value * _computePageSize(_container); |
284 scroller.throwTo(translate, 0); | 280 scroller.throwTo(translate, 0); |
285 }); | 281 }); |
286 } | 282 } |
287 } | 283 } |
OLD | NEW |