OLD | NEW |
1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2012, 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), |
11 target = new ObservableValue<int>(0), | 11 target = new ObservableValue<int>(0), |
(...skipping 97 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 assert(window.inMeasurementFrame); |
120 _container.rect.then((ElementRect rect) { | 120 return new Size(_getViewLength(), 1); |
121 // Only view width matters. | |
122 completer.complete(new Size(_getViewLength(rect), 1)); | |
123 }); | |
124 return completer.future; | |
125 }, | 121 }, |
126 Scroller.FAST_SNAP_DECELERATION_FACTOR); | 122 Scroller.FAST_SNAP_DECELERATION_FACTOR); |
127 | 123 |
128 scroller.onDecelStart.add(_snapToPage); | 124 scroller.onDecelStart.add(_snapToPage); |
129 scroller.onScrollerDragEnd.add(_snapToPage); | 125 scroller.onScrollerDragEnd.add(_snapToPage); |
130 scroller.onContentMoved.add(_onContentMoved); | 126 scroller.onContentMoved.add(_onContentMoved); |
131 return node; | 127 return node; |
132 } | 128 } |
133 | 129 |
134 int _getViewLength(ElementRect rect) { | 130 int _getViewLength() { |
135 return _computePageSize(rect) * pages.length.value; | 131 assert(window.inMeasurementFrame); |
| 132 return _computePageSize() * pages.length.value; |
136 } | 133 } |
137 | 134 |
138 // TODO(jmesserly): would be better to not have this code in enterDocument. | 135 // TODO(jmesserly): would be better to not have this code in enterDocument. |
139 // But we need computedStyle to read our CSS properties. | 136 // But we need computedStyle to read our CSS properties. |
140 void enterDocument() { | 137 void enterDocument() { |
141 contentView.node.computedStyle.then((CSSStyleDeclaration style) { | 138 window.requestMeasurementFrame(() { |
142 _computeColumnGap(style); | 139 _computeColumnGap(); |
143 | 140 |
144 // Trigger a fake resize event so we measure our height. | 141 // Trigger a fake resize event so we measure our height. |
145 windowResized(); | 142 windowResized(); |
| 143 }); |
146 | 144 |
147 // Hook img onload events, so we find out about changes in content size | 145 // If the selected page changes, animate to it. |
148 for (ImageElement img in contentView.node.queryAll("img")) { | 146 watch(pages.target, (s) => _onPageSelected()); |
149 if (!img.complete) { | 147 watch(pages.length, (s) => _onPageSelected()); |
150 img.on.load.add((e) { | 148 |
151 _updatePageCount(null); | 149 // Hook img onload events, so we find out about changes in content size |
152 }); | 150 for (ImageElement img in contentView.node.queryAll("img")) { |
153 } | 151 if (!img.complete) { |
| 152 img.on.load.add((e) { |
| 153 _updatePageCount(); |
| 154 }); |
154 } | 155 } |
155 | 156 } |
156 // If the selected page changes, animate to it. | |
157 watch(pages.target, (s) => _onPageSelected()); | |
158 watch(pages.length, (s) => _onPageSelected()); | |
159 }); | |
160 } | 157 } |
161 | 158 |
162 /** Read the column-gap setting so we know how far to translate the child. */ | 159 /** Read the column-gap setting so we know how far to translate the child. */ |
163 void _computeColumnGap(CSSStyleDeclaration style) { | 160 void _computeColumnGap() { |
| 161 assert(window.inMeasurementFrame); |
| 162 final style = contentView.node.computedStyle; |
164 String gap = style.columnGap; | 163 String gap = style.columnGap; |
165 if (gap == 'normal') { | 164 if (gap == 'normal') { |
166 gap = style.fontSize; | 165 gap = style.fontSize; |
167 } | 166 } |
168 _columnGap = _toPixels(gap, 'column-gap or font-size'); | 167 _columnGap = _toPixels(gap, 'column-gap or font-size'); |
169 _columnWidth = _toPixels(style.columnWidth, 'column-width'); | 168 _columnWidth = _toPixels(style.columnWidth, 'column-width'); |
170 } | 169 } |
171 | 170 |
172 static int _toPixels(String value, String message) { | 171 static int _toPixels(String value, String message) { |
173 // TODO(jmesserly): Safari 4 has a bug where this property does not end | 172 // TODO(jmesserly): Safari 4 has a bug where this property does not end |
174 // in "px" like it should, but the value is correct. Handle that gracefully. | 173 // in "px" like it should, but the value is correct. Handle that gracefully. |
175 if (value.endsWith('px')) { | 174 if (value.endsWith('px')) { |
176 value = value.substring(0, value.length - 2); | 175 value = value.substring(0, value.length - 2); |
177 } | 176 } |
178 return Math.parseDouble(value).round().toInt(); | 177 return Math.parseDouble(value).round().toInt(); |
179 } | 178 } |
180 | 179 |
181 /** Watch for resize and update page count. */ | 180 /** Watch for resize and update page count. */ |
182 void windowResized() { | 181 LayoutCallback windowResized() { |
183 // TODO(jmesserly): verify we aren't triggering unnecessary layouts. | 182 assert(window.inMeasurementFrame); |
184 | |
185 // The content needs to have its height explicitly set, or columns don't | 183 // 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 | 184 // flow to the right correctly. So we copy our own height and set the |
187 // of the content. | 185 // height of the content. |
188 node.rect.then((ElementRect rect) { | 186 int offsetHeight = node.rect.offset.height; |
189 contentView.node.style.height = '${rect.offset.height}px'; | 187 return () { |
190 }); | 188 contentView.node.style.height = '${offsetHeight}px'; |
191 _updatePageCount(null); | 189 _updatePageCount(); |
| 190 }; |
192 } | 191 } |
193 | 192 |
194 bool _updatePageCount(Callback callback) { | 193 void _updatePageCount() { |
195 int pageLength = 1; | 194 int pageLength = 1; |
196 _container.rect.then((ElementRect rect) { | 195 window.requestMeasurementFrame(() { |
| 196 final rect = _container.rect; |
197 if (rect.scroll.width > rect.offset.width) { | 197 if (rect.scroll.width > rect.offset.width) { |
198 pageLength = (rect.scroll.width / _computePageSize(rect)) | 198 pageLength = (rect.scroll.width / _computePageSize( )) |
199 .ceil().toInt(); | 199 .ceil().toInt(); |
200 } | 200 } |
201 pageLength = Math.max(pageLength, 1); | 201 pageLength = Math.max(pageLength, 1); |
202 | 202 |
203 int oldPage = pages.target.value; | 203 int oldPage = pages.target.value; |
204 int newPage = Math.min(oldPage, pageLength - 1); | 204 int newPage = Math.min(oldPage, pageLength - 1); |
205 | 205 |
206 // Hacky: make sure a change event always fires. | 206 return () { |
207 // This is so we adjust the 3d transform after resize. | 207 // Hacky: make sure a change event always fires. |
208 if (oldPage == newPage) { | 208 // This is so we adjust the 3d transform after resize. |
209 pages.target.value = 0; | 209 if (oldPage == newPage) { |
210 } | 210 pages.target.value = 0; |
211 assert(newPage < pageLength); | 211 } |
212 pages.target.value = newPage; | 212 assert(newPage < pageLength); |
213 pages.length.value = pageLength; | 213 pages.target.value = newPage; |
214 if (callback != null) { | 214 pages.length.value = pageLength; |
215 callback(); | 215 }; |
216 } | |
217 }); | 216 }); |
218 } | 217 } |
219 | 218 |
220 void _onContentMoved(Event e) { | 219 void _onContentMoved(Event e) { |
221 _container.rect.then((ElementRect rect) { | 220 window.requestMeasurementFrame(() { |
222 num current = scroller.contentOffset.x; | 221 num current = scroller.contentOffset.x; |
223 int pageSize = _computePageSize(rect); | 222 int pageSize = _computePageSize(); |
224 pages.current.value = -(current / pageSize).round().toInt(); | 223 return () { |
| 224 pages.current.value = -(current / pageSize).round().toInt(); |
| 225 }; |
225 }); | 226 }); |
226 } | 227 } |
227 | 228 |
228 void _snapToPage(Event e) { | 229 void _snapToPage(Event e) { |
229 num current = scroller.contentOffset.x; | 230 num current = scroller.contentOffset.x; |
230 num currentTarget = scroller.currentTarget.x; | 231 num currentTarget = scroller.currentTarget.x; |
231 _container.rect.then((ElementRect rect) { | 232 window.requestMeasurementFrame(() { |
232 int pageSize = _computePageSize(rect); | 233 int pageSize = _computePageSize(); |
233 int destination; | 234 int destination; |
234 num currentPageNumber = -(current / pageSize).round(); | 235 num currentPageNumber = -(current / pageSize).round(); |
235 num pageNumber = -currentTarget / pageSize; | 236 num pageNumber = -currentTarget / pageSize; |
236 if (current == currentTarget) { | 237 if (current == currentTarget) { |
237 // User was just static dragging so round to the nearest page. | 238 // User was just static dragging so round to the nearest page. |
238 pageNumber = pageNumber.round(); | 239 pageNumber = pageNumber.round(); |
239 } else { | 240 } else { |
240 if (currentPageNumber == pageNumber.round() && | 241 if (currentPageNumber == pageNumber.round() && |
241 (pageNumber - currentPageNumber).abs() > MIN_THROW_PAGE_FRACTION && | 242 (pageNumber - currentPageNumber).abs() > MIN_THROW_PAGE_FRACTION && |
242 -current + _viewportSize < _getViewLength(rect) && current < 0) { | 243 -current + _viewportSize < _getViewLength() && current < 0) { |
243 // The user is trying to throw so we want to round up to the | 244 // The user is trying to throw so we want to round up to the |
244 // nearest page in the direction they are throwing. | 245 // nearest page in the direction they are throwing. |
245 pageNumber = currentTarget < current | 246 pageNumber = currentTarget < current |
246 ? currentPageNumber + 1 : currentPageNumber - 1; | 247 ? currentPageNumber + 1 : currentPageNumber - 1; |
247 } else { | 248 } else { |
248 pageNumber = pageNumber.round(); | 249 pageNumber = pageNumber.round(); |
249 } | 250 } |
250 } | 251 } |
251 pageNumber = pageNumber.toInt(); | 252 pageNumber = pageNumber.toInt(); |
252 num translate = -pageNumber * pageSize; | 253 num translate = -pageNumber * pageSize; |
253 pages.current.value = pageNumber; | 254 return () { |
254 if (currentTarget != translate) { | 255 pages.current.value = pageNumber; |
255 scroller.throwTo(translate, 0); | 256 if (currentTarget != translate) { |
256 } else { | 257 scroller.throwTo(translate, 0); |
257 // Update the target page number when we are done animating. | 258 } else { |
258 pages.target.value = pageNumber; | 259 // Update the target page number when we are done animating. |
259 } | 260 pages.target.value = pageNumber; |
| 261 } |
| 262 }; |
260 }); | 263 }); |
261 } | 264 } |
262 | 265 |
263 int _computePageSize(ElementRect rect) { | 266 int _computePageSize() { |
| 267 assert(window.inMeasurementFrame); |
| 268 final rect = _container.rect; |
| 269 |
264 // Hacky: we need to duplicate the way the columns are being computed, | 270 // Hacky: we need to duplicate the way the columns are being computed, |
265 // including rounding, to figure out how far to translate the div. | 271 // including rounding, to figure out how far to translate the div. |
266 // See http://www.w3.org/TR/css3-multicol/#column-width | 272 // See http://www.w3.org/TR/css3-multicol/#column-width |
267 _viewportSize = rect.offset.width; | 273 _viewportSize = rect.offset.width; |
268 | 274 |
269 // Figure out how many columns we're rendering. | 275 // Figure out how many columns we're rendering. |
270 // The algorithm ensures we're bigger than the specified min size. | 276 // The algorithm ensures we're bigger than the specified min size. |
271 int perPage = Math.max(1, | 277 int perPage = Math.max(1, |
272 (_viewportSize + _columnGap) ~/ (_columnWidth + _columnGap)); | 278 (_viewportSize + _columnGap) ~/ (_columnWidth + _columnGap)); |
273 | 279 |
274 // Divide up the viewport between the columns. | 280 // Divide up the viewport between the columns. |
275 int columnSize = (_viewportSize - (perPage - 1) * _columnGap) ~/ perPage; | 281 int columnSize = (_viewportSize - (perPage - 1) * _columnGap) ~/ perPage; |
276 | 282 |
277 // Finally, compute how big each page is, and how far to translate. | 283 // Finally, compute how big each page is, and how far to translate. |
278 return perPage * (columnSize + _columnGap); | 284 return perPage * (columnSize + _columnGap); |
279 } | 285 } |
280 | 286 |
281 void _onPageSelected() { | 287 void _onPageSelected() { |
282 _container.rect.then((ElementRect rect) { | 288 window.requestMeasurementFrame(() { |
283 int translate = -pages.target.value * _computePageSize(rect); | 289 int translate = -pages.target.value * _computePageSize(); |
284 scroller.throwTo(translate, 0); | 290 return () { |
| 291 scroller.throwTo(translate, 0); |
| 292 }; |
285 }); | 293 }); |
286 } | 294 } |
287 } | 295 } |
OLD | NEW |