|
165 | 165 | --> |
166 | 166 | <link rel="import" href="../polymer/polymer.html"> |
167 | 167 | <link rel="import" href="../core-selection/core-selection.html"> |
| 168 | +<link rel="import" href="../core-resizable/core-resizable.html"> |
168 | 169 |
|
169 | | -<polymer-element name="core-list" on-tap="{{tapHandler}}" tabindex="-1"> |
| 170 | +<polymer-element name="core-list" tabindex="-1"> |
170 | 171 | <template> |
171 | 172 | <core-selection id="selection" multi="{{multi}}" on-core-select="{{selectedHandler}}"></core-selection> |
172 | 173 | <link rel="stylesheet" href="core-list.css"> |
|
178 | 179 | var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/); |
179 | 180 | var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8; |
180 | 181 |
|
181 | | - Polymer('core-list', { |
| 182 | + Polymer(Polymer.mixin({ |
182 | 183 |
|
183 | 184 | publish: { |
184 | 185 | /** |
|
328 | 329 |
|
329 | 330 | }, |
330 | 331 |
|
| 332 | + eventDelegates: { |
| 333 | + tap: 'tapHandler', |
| 334 | + 'core-resize': 'updateSize' |
| 335 | + }, |
| 336 | + |
331 | 337 | // Local cache of scrollTop |
332 | 338 | _scrollTop: 0, |
333 | 339 |
|
334 | 340 | observe: { |
335 | | - 'data grid width template scrollTarget': 'initialize', |
| 341 | + 'isAttached data grid width template scrollTarget': 'initialize', |
336 | 342 | 'multi selectionEnabled': '_resetSelection' |
337 | 343 | }, |
338 | 344 |
|
|
357 | 363 | this._nestedGroups = false; |
358 | 364 | this._groupStart = 0; |
359 | 365 | this._groupStartIndex = 0; |
360 | | - |
361 | | - this._boundResizeHandler = this.updateSize.bind(this); |
362 | | - window.addEventListener('resize', this._boundResizeHandler); |
363 | 366 | }, |
364 | 367 |
|
365 | 368 | attached: function() { |
| 369 | + this.isAttached = true; |
366 | 370 | this.template = this.querySelector('template'); |
367 | 371 | if (!this.template.bindingDelegate) { |
368 | 372 | this.template.bindingDelegate = this.element.syntax; |
369 | 373 | } |
| 374 | + this.resizeableAttachedHandler(); |
370 | 375 | }, |
371 | 376 |
|
372 | 377 | detached: function() { |
| 378 | + this.isAttached = false; |
373 | 379 | this.removeEventListener(this._boundScrollHandler); |
374 | | - this.removeEventListener(this._boundResizeHandler); |
| 380 | + this.resizeableDetachedHandler(); |
375 | 381 | }, |
376 | 382 |
|
377 | 383 | /** |
378 | | - * To be called by the user when the list is resized or shown |
379 | | - * after being hidden. Note, `core-list` calls this automatically |
380 | | - * when the window is resized. |
| 384 | + * To be called by the user when the list is manually resized |
| 385 | + * or shown after being hidden. |
381 | 386 | * |
382 | 387 | * @method updateSize |
383 | 388 | */ |
384 | 389 | updateSize: function() { |
385 | | - if (this.grid) { |
| 390 | + if (!this._positionPending && !this._needItemInit) { |
386 | 391 | this._resetIndex(this._getFirstVisibleIndex() || 0); |
| 392 | + this.initialize(); |
387 | 393 | } |
388 | | - this.initializeData(); |
389 | 394 | }, |
390 | 395 |
|
391 | 396 | _resetSelection: function() { |
|
438 | 443 | } |
439 | 444 | // Adjust offset/scroll position based on total number of items changed |
440 | 445 | if (this._virtualStart < this._physicalCount) { |
441 | | - this._resetIndex(this._getFirstVisibleIndex()); |
| 446 | + this._resetIndex(this._getFirstVisibleIndex() || 0); |
442 | 447 | } else { |
443 | 448 | totalDelta = Math.max((totalDelta / this._rowFactor) * this._physicalAverage, -this._physicalOffset); |
444 | 449 | this._physicalOffset += totalDelta; |
|
458 | 463 |
|
459 | 464 | groupsChanged: function() { |
460 | 465 | if (!!this.groups != this._grouped) { |
461 | | - this.initialize(); |
462 | | - this._resetIndex(this._getFirstVisibleIndex() || this._virtualStart); |
| 466 | + this.updateSize(); |
463 | 467 | } |
464 | 468 | }, |
465 | 469 |
|
466 | 470 | initialize: function() { |
467 | | - if (!this.template) { |
| 471 | + if (!this.template || !this.isAttached) { |
468 | 472 | return; |
469 | 473 | } |
470 | 474 |
|
|
601 | 605 | throw 'Grid requires the `width` property to be set'; |
602 | 606 | } |
603 | 607 | this._rowFactor = Math.floor(this._target.offsetWidth / this.width) || 1; |
604 | | - this._rowMargin = (this._target.offsetWidth - (this._rowFactor * this.width)) / 2; |
| 608 | + var cs = getComputedStyle(this._target); |
| 609 | + var padding = parseInt(cs.paddingLeft || 0) + parseInt(cs.paddingRight || 0); |
| 610 | + this._rowMargin = (this._target.offsetWidth - (this._rowFactor * this.width) - padding) / 2; |
605 | 611 | } else { |
606 | 612 | this._rowFactor = 1; |
607 | 613 | this._rowMargin = 0; |
|
649 | 655 |
|
650 | 656 | // Add physical items up to a max based on data length, viewport size, and extra item overhang |
651 | 657 | var currentCount = this._physicalCount || 0; |
652 | | - this._physicalCount = Math.min(Math.ceil(this._target.offsetHeight / (this._physicalAverage || this.height)) * this.runwayFactor * this._rowFactor, this._virtualCount); |
| 658 | + var height = this._target.offsetHeight; |
| 659 | + if (!height && this._target.offsetParent) { |
| 660 | + console.warn('core-list must either be sized or be inside an overflow:auto div that is sized'); |
| 661 | + } |
| 662 | + this._physicalCount = Math.min(Math.ceil(height / (this._physicalAverage || this.height)) * this.runwayFactor * this._rowFactor, this._virtualCount); |
653 | 663 | this._physicalCount = Math.max(currentCount, this._physicalCount); |
654 | 664 | this._physicalData = this._physicalData || new Array(this._physicalCount); |
655 | 665 | var needItemInit = false; |
|
781 | 791 |
|
782 | 792 | // Measure content in scroller before virtualized items |
783 | 793 | if (this._target != this) { |
784 | | - var el1 = this.previousElementSibling; |
785 | | - this._aboveSize = el1 ? el1.offsetTop + el1.offsetHeight : 0; |
| 794 | + this._aboveSize = this.offsetTop; |
786 | 795 | } else { |
787 | | - this._aboveSize = 0; |
| 796 | + this._aboveSize = parseInt(getComputedStyle(this._target).paddingTop); |
788 | 797 | } |
789 | 798 |
|
790 | 799 | // Calculate average height |
|
1234 | 1243 | var virtualIndex = this._virtualStart + i; |
1235 | 1244 | var physicalIndex = this._virtualToPhysical(virtualIndex); |
1236 | 1245 | var item = this._physicalItems[physicalIndex]; |
1237 | | - if (item._translateY >= this._scrollTop) { |
| 1246 | + if (!item.hidden && item._translateY >= this._scrollTop - this._aboveSize) { |
1238 | 1247 | return virtualIndex; |
1239 | 1248 | } |
1240 | 1249 | } |
|
1244 | 1253 | index = Math.min(index, this._virtualCount-1); |
1245 | 1254 | index = Math.max(index, 0); |
1246 | 1255 | this.changeStartIndex(index - this._virtualStart); |
1247 | | - this._scrollTop = this.setScrollTop((index / this._rowFactor) * this._physicalAverage); |
1248 | | - this._physicalOffset = this._scrollTop; |
| 1256 | + this._scrollTop = this.setScrollTop(this._aboveSize + (index / this._rowFactor) * this._physicalAverage); |
| 1257 | + this._physicalOffset = this._scrollTop - this._aboveSize; |
1249 | 1258 | this._dir = 0; |
1250 | 1259 | }, |
1251 | 1260 |
|
|
1288 | 1297 | this.refresh(); |
1289 | 1298 | } |
1290 | 1299 |
|
1291 | | - }); |
| 1300 | + }, Polymer.CoreResizable)); |
1292 | 1301 |
|
1293 | 1302 | })(); |
1294 | 1303 | </script> |
|
0 commit comments