| 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 |