OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 // require: array_data_model.js | 5 // require: array_data_model.js |
6 // require: list_selection_model.js | 6 // require: list_selection_model.js |
7 // require: list_selection_controller.js | 7 // require: list_selection_controller.js |
8 // require: list_item.js | 8 // require: list_item.js |
9 | 9 |
10 /** | 10 /** |
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
87 * Function used to create grid items. | 87 * Function used to create grid items. |
88 * @type {function(new:cr.ui.ListItem, *)} | 88 * @type {function(new:cr.ui.ListItem, *)} |
89 * @private | 89 * @private |
90 */ | 90 */ |
91 itemConstructor_: cr.ui.ListItem, | 91 itemConstructor_: cr.ui.ListItem, |
92 | 92 |
93 /** | 93 /** |
94 * Function used to create grid items. | 94 * Function used to create grid items. |
95 * @return {function(new:cr.ui.ListItem, *)} | 95 * @return {function(new:cr.ui.ListItem, *)} |
96 */ | 96 */ |
97 get itemConstructor() { return this.itemConstructor_; }, | 97 get itemConstructor() { |
| 98 return this.itemConstructor_; |
| 99 }, |
98 set itemConstructor(func) { | 100 set itemConstructor(func) { |
99 if (func != this.itemConstructor_) { | 101 if (func != this.itemConstructor_) { |
100 this.itemConstructor_ = func; | 102 this.itemConstructor_ = func; |
101 this.cachedItems_ = {}; | 103 this.cachedItems_ = {}; |
102 this.redraw(); | 104 this.redraw(); |
103 } | 105 } |
104 }, | 106 }, |
105 | 107 |
106 dataModel_: null, | 108 dataModel_: null, |
107 | 109 |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
139 this.dataModel_.addEventListener( | 141 this.dataModel_.addEventListener( |
140 'permuted', this.boundHandleDataModelPermuted_); | 142 'permuted', this.boundHandleDataModelPermuted_); |
141 this.dataModel_.addEventListener( | 143 this.dataModel_.addEventListener( |
142 'change', this.boundHandleDataModelChange_); | 144 'change', this.boundHandleDataModelChange_); |
143 } | 145 } |
144 | 146 |
145 this.redraw(); | 147 this.redraw(); |
146 this.onSetDataModelComplete(); | 148 this.onSetDataModelComplete(); |
147 }, | 149 }, |
148 | 150 |
149 get dataModel() { return this.dataModel_; }, | 151 get dataModel() { |
| 152 return this.dataModel_; |
| 153 }, |
150 | 154 |
151 /** | 155 /** |
152 * Override to be notified when |this.dataModel| is set. | 156 * Override to be notified when |this.dataModel| is set. |
153 * @protected | 157 * @protected |
154 */ | 158 */ |
155 onSetDataModelComplete: function() {}, | 159 onSetDataModelComplete: function() {}, |
156 | 160 |
157 /** | 161 /** |
158 * Cached item for measuring the default item size by measureItem(). | 162 * Cached item for measuring the default item size by measureItem(). |
159 * @type {cr.ui.ListItem} | 163 * @type {cr.ui.ListItem} |
160 */ | 164 */ |
161 cachedMeasuredItem_: null, | 165 cachedMeasuredItem_: null, |
162 | 166 |
163 /** | 167 /** |
164 * The selection model to use. | 168 * The selection model to use. |
165 * @type {cr.ui.ListSelectionModel} | 169 * @type {cr.ui.ListSelectionModel} |
166 */ | 170 */ |
167 get selectionModel() { return this.selectionModel_; }, | 171 get selectionModel() { |
| 172 return this.selectionModel_; |
| 173 }, |
168 set selectionModel(sm) { | 174 set selectionModel(sm) { |
169 var oldSm = this.selectionModel_; | 175 var oldSm = this.selectionModel_; |
170 if (oldSm == sm) | 176 if (oldSm == sm) |
171 return; | 177 return; |
172 | 178 |
173 if (!this.boundHandleOnChange_) { | 179 if (!this.boundHandleOnChange_) { |
174 this.boundHandleOnChange_ = this.handleOnChange_.bind(this); | 180 this.boundHandleOnChange_ = this.handleOnChange_.bind(this); |
175 this.boundHandleLeadChange_ = this.handleLeadChange.bind(this); | 181 this.boundHandleLeadChange_ = this.handleLeadChange.bind(this); |
176 } | 182 } |
177 | 183 |
178 if (oldSm) { | 184 if (oldSm) { |
179 oldSm.removeEventListener('change', this.boundHandleOnChange_); | 185 oldSm.removeEventListener('change', this.boundHandleOnChange_); |
180 oldSm.removeEventListener( | 186 oldSm.removeEventListener( |
181 'leadIndexChange', this.boundHandleLeadChange_); | 187 'leadIndexChange', this.boundHandleLeadChange_); |
182 } | 188 } |
183 | 189 |
184 this.selectionModel_ = sm; | 190 this.selectionModel_ = sm; |
185 this.selectionController_ = this.createSelectionController(sm); | 191 this.selectionController_ = this.createSelectionController(sm); |
186 | 192 |
187 if (sm) { | 193 if (sm) { |
188 sm.addEventListener('change', this.boundHandleOnChange_); | 194 sm.addEventListener('change', this.boundHandleOnChange_); |
189 sm.addEventListener('leadIndexChange', this.boundHandleLeadChange_); | 195 sm.addEventListener('leadIndexChange', this.boundHandleLeadChange_); |
190 } | 196 } |
191 }, | 197 }, |
192 | 198 |
193 /** | 199 /** |
194 * Whether or not the list auto-expands. | 200 * Whether or not the list auto-expands. |
195 * @type {boolean} | 201 * @type {boolean} |
196 */ | 202 */ |
197 get autoExpands() { return this.autoExpands_; }, | 203 get autoExpands() { |
| 204 return this.autoExpands_; |
| 205 }, |
198 set autoExpands(autoExpands) { | 206 set autoExpands(autoExpands) { |
199 if (this.autoExpands_ == autoExpands) | 207 if (this.autoExpands_ == autoExpands) |
200 return; | 208 return; |
201 this.autoExpands_ = autoExpands; | 209 this.autoExpands_ = autoExpands; |
202 this.redraw(); | 210 this.redraw(); |
203 }, | 211 }, |
204 | 212 |
205 /** | 213 /** |
206 * Whether or not the rows on list have various heights. | 214 * Whether or not the rows on list have various heights. |
207 * @type {boolean} | 215 * @type {boolean} |
208 */ | 216 */ |
209 get fixedHeight() { return this.fixedHeight_; }, | 217 get fixedHeight() { |
| 218 return this.fixedHeight_; |
| 219 }, |
210 set fixedHeight(fixedHeight) { | 220 set fixedHeight(fixedHeight) { |
211 if (this.fixedHeight_ == fixedHeight) | 221 if (this.fixedHeight_ == fixedHeight) |
212 return; | 222 return; |
213 this.fixedHeight_ = fixedHeight; | 223 this.fixedHeight_ = fixedHeight; |
214 this.redraw(); | 224 this.redraw(); |
215 }, | 225 }, |
216 | 226 |
217 /** | 227 /** |
218 * Convenience alias for selectionModel.selectedItem | 228 * Convenience alias for selectionModel.selectedItem |
219 * @type {*} | 229 * @type {*} |
(...skipping 16 matching lines...) Expand all Loading... |
236 }, | 246 }, |
237 | 247 |
238 /** | 248 /** |
239 * Convenience alias for selectionModel.selectedItems | 249 * Convenience alias for selectionModel.selectedItems |
240 * @type {!Array<*>} | 250 * @type {!Array<*>} |
241 */ | 251 */ |
242 get selectedItems() { | 252 get selectedItems() { |
243 var indexes = this.selectionModel.selectedIndexes; | 253 var indexes = this.selectionModel.selectedIndexes; |
244 var dataModel = this.dataModel; | 254 var dataModel = this.dataModel; |
245 if (dataModel) { | 255 if (dataModel) { |
246 return indexes.map(function(i) { return dataModel.item(i); }); | 256 return indexes.map(function(i) { |
| 257 return dataModel.item(i); |
| 258 }); |
247 } | 259 } |
248 return []; | 260 return []; |
249 }, | 261 }, |
250 | 262 |
251 /** | 263 /** |
252 * The HTML elements representing the items. | 264 * The HTML elements representing the items. |
253 * @type {HTMLCollection} | 265 * @type {HTMLCollection} |
254 */ | 266 */ |
255 get items() { | 267 get items() { |
256 return Array.prototype.filter.call(this.children, this.isItem, this); | 268 return Array.prototype.filter.call(this.children, this.isItem, this); |
(...skipping 11 matching lines...) Expand all Loading... |
268 }, | 280 }, |
269 | 281 |
270 batchCount_: 0, | 282 batchCount_: 0, |
271 | 283 |
272 /** | 284 /** |
273 * When making a lot of updates to the list, the code could be wrapped in | 285 * When making a lot of updates to the list, the code could be wrapped in |
274 * the startBatchUpdates and finishBatchUpdates to increase performance. Be | 286 * the startBatchUpdates and finishBatchUpdates to increase performance. Be |
275 * sure that the code will not return without calling endBatchUpdates or the | 287 * sure that the code will not return without calling endBatchUpdates or the |
276 * list will not be correctly updated. | 288 * list will not be correctly updated. |
277 */ | 289 */ |
278 startBatchUpdates: function() { this.batchCount_++; }, | 290 startBatchUpdates: function() { |
| 291 this.batchCount_++; |
| 292 }, |
279 | 293 |
280 /** | 294 /** |
281 * See startBatchUpdates. | 295 * See startBatchUpdates. |
282 */ | 296 */ |
283 endBatchUpdates: function() { | 297 endBatchUpdates: function() { |
284 this.batchCount_--; | 298 this.batchCount_--; |
285 if (this.batchCount_ == 0) | 299 if (this.batchCount_ == 0) |
286 this.redraw(); | 300 this.redraw(); |
287 }, | 301 }, |
288 | 302 |
(...skipping 388 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
677 } | 691 } |
678 return top; | 692 return top; |
679 } | 693 } |
680 }, | 694 }, |
681 | 695 |
682 /** | 696 /** |
683 * @param {number} index The index of the item. | 697 * @param {number} index The index of the item. |
684 * @return {number} The row of the item. May vary in the case | 698 * @return {number} The row of the item. May vary in the case |
685 * of multiple columns. | 699 * of multiple columns. |
686 */ | 700 */ |
687 getItemRow: function(index) { return index; }, | 701 getItemRow: function(index) { |
| 702 return index; |
| 703 }, |
688 | 704 |
689 /** | 705 /** |
690 * @param {number} row The row. | 706 * @param {number} row The row. |
691 * @return {number} The index of the first item in the row. | 707 * @return {number} The index of the first item in the row. |
692 */ | 708 */ |
693 getFirstItemInRow: function(row) { return row; }, | 709 getFirstItemInRow: function(row) { |
| 710 return row; |
| 711 }, |
694 | 712 |
695 /** | 713 /** |
696 * Ensures that a given index is inside the viewport. | 714 * Ensures that a given index is inside the viewport. |
697 * @param {number} index The index of the item to scroll into view. | 715 * @param {number} index The index of the item to scroll into view. |
698 */ | 716 */ |
699 scrollIndexIntoView: function(index) { | 717 scrollIndexIntoView: function(index) { |
700 var dataModel = this.dataModel; | 718 var dataModel = this.dataModel; |
701 if (!dataModel || index < 0 || index >= dataModel.length) | 719 if (!dataModel || index < 0 || index >= dataModel.length) |
702 return; | 720 return; |
703 | 721 |
704 var itemHeight = this.getItemHeightByIndex_(index); | 722 var itemHeight = this.getItemHeightByIndex_(index); |
705 var scrollTop = this.scrollTop; | 723 var scrollTop = this.scrollTop; |
706 var top = this.getItemTop(index); | 724 var top = this.getItemTop(index); |
707 var clientHeight = this.clientHeight; | 725 var clientHeight = this.clientHeight; |
708 | 726 |
709 var cs = getComputedStyle(this); | 727 var cs = getComputedStyle(this); |
710 var paddingY = | 728 var paddingY = |
711 parseInt(cs.paddingTop, 10) + parseInt(cs.paddingBottom, 10); | 729 parseInt(cs.paddingTop, 10) + parseInt(cs.paddingBottom, 10); |
712 var availableHeight = clientHeight - paddingY; | 730 var availableHeight = clientHeight - paddingY; |
713 | 731 |
714 var self = this; | 732 var self = this; |
715 // Function to adjust the tops of viewport and row. | 733 // Function to adjust the tops of viewport and row. |
716 function scrollToAdjustTop() { self.scrollTop = top; } | 734 function scrollToAdjustTop() { |
| 735 self.scrollTop = top; |
| 736 } |
717 // Function to adjust the bottoms of viewport and row. | 737 // Function to adjust the bottoms of viewport and row. |
718 function scrollToAdjustBottom() { | 738 function scrollToAdjustBottom() { |
719 self.scrollTop = top + itemHeight - availableHeight; | 739 self.scrollTop = top + itemHeight - availableHeight; |
720 } | 740 } |
721 | 741 |
722 // Check if the entire of given indexed row can be shown in the viewport. | 742 // Check if the entire of given indexed row can be shown in the viewport. |
723 if (itemHeight <= availableHeight) { | 743 if (itemHeight <= availableHeight) { |
724 if (top < scrollTop) | 744 if (top < scrollTop) |
725 scrollToAdjustTop(); | 745 scrollToAdjustTop(); |
726 else if (scrollTop + availableHeight < top + itemHeight) | 746 else if (scrollTop + availableHeight < top + itemHeight) |
(...skipping 598 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1325 for (var element = start; element && element != root; | 1345 for (var element = start; element && element != root; |
1326 element = element.parentElement) { | 1346 element = element.parentElement) { |
1327 if (element.tabIndex >= 0 && !element.disabled) | 1347 if (element.tabIndex >= 0 && !element.disabled) |
1328 return true; | 1348 return true; |
1329 } | 1349 } |
1330 return false; | 1350 return false; |
1331 } | 1351 } |
1332 | 1352 |
1333 return {List: List}; | 1353 return {List: List}; |
1334 }); | 1354 }); |
OLD | NEW |