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