Blame view

bower_components/iron-list/iron-list.html 36.9 KB
73bcce88   luigser   COMPONENTS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
  <!--

  @license

  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt

  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt

  Code distributed by Google as part of the polymer project is also

  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt

  -->

  

  <link rel="import" href="../polymer/polymer.html">

  <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">

  

  <!--

  

  `iron-list` displays a virtual, 'infinite' list. The template inside

  the iron-list element represents the DOM to create for each list item.

  The `items` property specifies an array of list item data.

  

  For performance reasons, not every item in the list is rendered at once;

  instead a small subset of actual template elements *(enough to fill the viewport)*

  are rendered and reused as the user scrolls. As such, it is important that all

  state of the list template be bound to the model driving it, since the view may

  be reused with a new model at any time. Particularly, any state that may change

  as the result of a user interaction with the list item must be bound to the model

  to avoid view state inconsistency.

  

  __Important:__ `iron-list` must ether be explicitly sized, or delegate scrolling to an

  explicitly sized parent. By "explicitly sized", we mean it either has an explicit

  CSS `height` property set via a class or inline style, or else is sized by other

  layout means (e.g. the `flex` or `fit` classes).

  

  ### Template model

  

  List item templates should bind to template models of the following structure:

  

      {

        index: 0,     // data index for this item

        item: {       // user data corresponding to items[index]

          /* user item data  */

        }

      }

  

  Alternatively, you can change the property name used as data index by changing the

  `indexAs` property. The `as` property defines the name of the variable to add to the binding

  scope for the array.

  

  For example, given the following `data` array:

  

  ##### data.json

  

      [

        {"name": "Bob"},

        {"name": "Tim"},

        {"name": "Mike"}

      ]

  

  The following code would render the list (note the name and checked properties are

  bound from the model object provided to the template scope):

  

      <template is="dom-bind">

        <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>

        <iron-list items="[[data]]" as="item">

          <template>

            <div>

              Name: <span>[[item.name]]</span>

            </div>

          </template>

        </iron-list>

      </template>

  

e619a3b0   Luigi Serra   Controllet cross ...
72
73
74
75
76
77
78
79
80
81
82
83
  ### Resizing

  

  `iron-list` lays out the items when it recives a notification via the `resize` event.

  This event is fired by any element that implements `IronResizableBehavior`.

  

  By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will trigger

  this event automatically. If you hide the list manually (e.g. you use `display: none`)

  you might want to implement `IronResizableBehavior` or fire this event manually right

  after the list became visible again. e.g.

  

      document.querySelector('iron-list').fire('resize');

  

73bcce88   luigser   COMPONENTS
84
85
86
87
88
89
90
91
92
93
94
  

  @group Iron Element

  @element iron-list

  @demo demo/index.html

  -->

  

  <dom-module id="iron-list">

    <style>

  

      :host {

        display: block;

73bcce88   luigser   COMPONENTS
95
96
97
98
99
100
      }

  

      :host(.has-scroller) {

        overflow: auto;

      }

  

e619a3b0   Luigi Serra   Controllet cross ...
101
102
103
104
      :host(:not(.has-scroller)) {

        position: relative;

      }

  

73bcce88   luigser   COMPONENTS
105
106
107
108
109
110
111
112
113
      #items {

        position: relative;

      }

  

      #items > ::content > * {

        width: 100%;

        box-sizing: border-box;

        position: absolute;

        top: 0;

e619a3b0   Luigi Serra   Controllet cross ...
114
        will-change: transform;

73bcce88   luigser   COMPONENTS
115
116
117
118
      }

  

    </style>

    <template>

e619a3b0   Luigi Serra   Controllet cross ...
119
120
121
122
123
  

      <array-selector id="selector" items="{{items}}"

          selected="{{selectedItems}}" selected-item="{{selectedItem}}">

      </array-selector>

  

73bcce88   luigser   COMPONENTS
124
125
126
      <div id="items">

        <content></content>

      </div>

e619a3b0   Luigi Serra   Controllet cross ...
127
  

73bcce88   luigser   COMPONENTS
128
129
130
131
132
133
134
135
136
137
    </template>

  </dom-module>

  

  <script>

  

  (function() {

  

    var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);

    var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;

    var DEFAULT_PHYSICAL_COUNT = 20;

e619a3b0   Luigi Serra   Controllet cross ...
138
    var MAX_PHYSICAL_COUNT = 500;

73bcce88   luigser   COMPONENTS
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
  

    Polymer({

  

      is: 'iron-list',

  

      properties: {

  

        /**

         * An array containing items determining how many instances of the template

         * to stamp and that that each template instance should bind to.

         */

        items: {

          type: Array

        },

  

        /**

         * The name of the variable to add to the binding scope for the array

         * element associated with a given template instance.

         */

        as: {

          type: String,

          value: 'item'

        },

  

        /**

         * The name of the variable to add to the binding scope with the index

         * for the row.  If `sort` is provided, the index will reflect the

         * sorted order (rather than the original array order).

         */

        indexAs: {

          type: String,

          value: 'index'

e619a3b0   Luigi Serra   Controllet cross ...
171
        },

73bcce88   luigser   COMPONENTS
172
  

e619a3b0   Luigi Serra   Controllet cross ...
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
        /**

         * The name of the variable to add to the binding scope to indicate

         * if the row is selected.

         */

        selectedAs: {

          type: String,

          value: 'selected'

        },

  

        /**

         * When true, tapping a row will select the item, placing its data model

         * in the set of selected items retrievable via the selection property.

         *

         * Note that tapping focusable elements within the list item will not

         * result in selection, since they are presumed to have their * own action.

         */

        selectionEnabled: {

          type: Boolean,

          value: false

        },

  

        /**

         * When `multiSelection` is false, this is the currently selected item, or `null`

         * if no item is selected.

         */

        selectedItem: {

          type: Object,

          notify: true

        },

  

        /**

         * When `multiSelection` is true, this is an array that contains the selected items.

         */

        selectedItems: {

          type: Object,

          notify: true

        },

  

        /**

         * When `true`, multiple items may be selected at once (in this case,

         * `selected` is an array of currently selected items).  When `false`,

         * only one item may be selected at a time.

         */

        multiSelection: {

          type: Boolean,

          value: false

        }

73bcce88   luigser   COMPONENTS
220
221
222
      },

  

      observers: [

e619a3b0   Luigi Serra   Controllet cross ...
223
224
225
        '_itemsChanged(items.*)',

        '_selectionEnabledChanged(selectionEnabled)',

        '_multiSelectionChanged(multiSelection)'

73bcce88   luigser   COMPONENTS
226
227
228
229
230
231
232
233
234
235
236
237
238
      ],

  

      behaviors: [

        Polymer.Templatizer,

        Polymer.IronResizableBehavior

      ],

  

      listeners: {

        'iron-resize': '_resizeHandler'

      },

  

      /**

       * The ratio of hidden tiles that should remain in the scroll direction.

e619a3b0   Luigi Serra   Controllet cross ...
239
       * Recommended value ~0.5, so it will distribute tiles evely in both directions.

73bcce88   luigser   COMPONENTS
240
241
242
243
244
       */

      _ratio: 0.5,

  

      /**

       * The element that controls the scroll

e619a3b0   Luigi Serra   Controllet cross ...
245
       * @type {?Element}

73bcce88   luigser   COMPONENTS
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
       */

      _scroller: null,

  

      /**

       * The padding-top value of the `scroller` element

       */

      _scrollerPaddingTop: 0,

  

      /**

       * This value is the same as `scrollTop`.

       */

      _scrollPosition: 0,

  

      /**

       * The number of tiles in the DOM.

       */

e619a3b0   Luigi Serra   Controllet cross ...
262
      _physicalCount: 0,

73bcce88   luigser   COMPONENTS
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
  

      /**

       * The k-th tile that is at the top of the scrolling list.

       */

      _physicalStart: 0,

  

      /**

       * The k-th tile that is at the bottom of the scrolling list.

       */

      _physicalEnd: 0,

  

      /**

       * The sum of the heights of all the tiles in the DOM.

       */

      _physicalSize: 0,

  

      /**

       * The average `offsetHeight` of the tiles observed till now.

       */

      _physicalAverage: 0,

  

      /**

       * The number of tiles which `offsetHeight` > 0 observed until now.

       */

      _physicalAverageCount: 0,

  

      /**

       * The Y position of the item rendered in the `_physicalStart`

       * tile relative to the scrolling list.

       */

      _physicalTop: 0,

  

      /**

       * The number of items in the list.

       */

      _virtualCount: 0,

  

      /**

       * The n-th item rendered in the `_physicalStart` tile.

       */

      _virtualStartVal: 0,

  

      /**

       * A map between an item key and its physical item index

       */

e619a3b0   Luigi Serra   Controllet cross ...
308
309
310
311
312
313
      _physicalIndexForKey: null,

  

      /**

       * The estimated scroll height based on `_physicalAverage`

       */

      _estScrollHeight: 0,

73bcce88   luigser   COMPONENTS
314
315
  

      /**

e619a3b0   Luigi Serra   Controllet cross ...
316
       * The scroll height of the dom node

73bcce88   luigser   COMPONENTS
317
       */

e619a3b0   Luigi Serra   Controllet cross ...
318
      _scrollHeight: 0,

73bcce88   luigser   COMPONENTS
319
320
321
322
323
324
325
326
  

      /**

       * The size of the viewport

       */

      _viewportSize: 0,

  

      /**

       * An array of DOM nodes that are currently in the tree

e619a3b0   Luigi Serra   Controllet cross ...
327
       * @type {?Array<!TemplatizerNode>}

73bcce88   luigser   COMPONENTS
328
329
330
331
332
       */

      _physicalItems: null,

  

      /**

       * An array of heights for each item in `_physicalItems`

e619a3b0   Luigi Serra   Controllet cross ...
333
       * @type {?Array<number>}

73bcce88   luigser   COMPONENTS
334
335
336
337
338
339
       */

      _physicalSizes: null,

  

      /**

       * A cached value for the visible index.

       * See `firstVisibleIndex`

e619a3b0   Luigi Serra   Controllet cross ...
340
       * @type {?number}

73bcce88   luigser   COMPONENTS
341
342
343
344
345
       */

      _firstVisibleIndexVal: null,

  

      /**

       * A Polymer collection for the items.

e619a3b0   Luigi Serra   Controllet cross ...
346
       * @type {?Polymer.Collection}

73bcce88   luigser   COMPONENTS
347
348
349
       */

      _collection: null,

  

e619a3b0   Luigi Serra   Controllet cross ...
350
351
352
353
354
355
356
357
358
      /**

       * True if the current item list was rendered for the first time

       * after attached.

       */

      _itemsRendered: false,

  

      /**

       * The bottom of the physical content.

       */

73bcce88   luigser   COMPONENTS
359
360
361
362
      get _physicalBottom() {

        return this._physicalTop + this._physicalSize;

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
363
364
365
      /**

       * The n-th item rendered in the last physical item.

       */

73bcce88   luigser   COMPONENTS
366
367
368
369
      get _virtualEnd() {

        return this._virtualStartVal + this._physicalCount - 1;

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
370
371
372
373
374
375
376
377
      /**

       * The lowest n-th value for an item such that it can be rendered in `_physicalStart`.

       */

      _minVirtualStart: 0,

  

      /**

       * The largest n-th value for an item such that it can be rendered in `_physicalStart`.

       */

73bcce88   luigser   COMPONENTS
378
379
380
381
382
      get _maxVirtualStart() {

        return this._virtualCount < this._physicalCount ?

            this._virtualCount : this._virtualCount - this._physicalCount;

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
383
384
385
      /**

       * The height of the physical content that isn't on the screen.

       */

73bcce88   luigser   COMPONENTS
386
387
388
389
      get _hiddenContentSize() {

        return this._physicalSize - this._viewportSize;

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
390
391
392
      /**

       * The maximum scroll top value.

       */

73bcce88   luigser   COMPONENTS
393
      get _maxScrollTop() {

e619a3b0   Luigi Serra   Controllet cross ...
394
        return this._estScrollHeight - this._viewportSize;

73bcce88   luigser   COMPONENTS
395
396
      },

  

e619a3b0   Luigi Serra   Controllet cross ...
397
398
399
      /**

       * Sets the n-th item rendered in `_physicalStart`

       */

73bcce88   luigser   COMPONENTS
400
      set _virtualStart(val) {

e619a3b0   Luigi Serra   Controllet cross ...
401
        // clamp the value so that _minVirtualStart <= val <= _maxVirtualStart

73bcce88   luigser   COMPONENTS
402
403
404
405
406
        this._virtualStartVal = Math.min(this._maxVirtualStart, Math.max(this._minVirtualStart, val));

        this._physicalStart = this._virtualStartVal % this._physicalCount;

        this._physicalEnd = (this._physicalStart + this._physicalCount - 1) % this._physicalCount;

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
407
408
409
      /**

       * Gets the n-th item rendered in `_physicalStart`

       */

73bcce88   luigser   COMPONENTS
410
411
412
413
414
      get _virtualStart() {

        return this._virtualStartVal;

      },

  

      /**

e619a3b0   Luigi Serra   Controllet cross ...
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
       * An optimal physical size such that we will have enough physical items

       * to fill up the viewport and recycle when the user scrolls.

       *

       * This default value assumes that we will at least have the equivalent

       * to a viewport of physical items above and below the user's viewport.

       */

      get _optPhysicalSize() {

        return this._viewportSize * 3;

      },

  

     /**

      * True if the current list is visible.

      */

      get _isVisible() {

        return this._scroller && Boolean(this._scroller.offsetWidth || this._scroller.offsetHeight);

      },

  

      /**

73bcce88   luigser   COMPONENTS
433
434
435
436
437
438
439
       * Gets the first visible item in the viewport.

       *

       * @property firstVisibleIndex

       */

      get firstVisibleIndex() {

        var physicalOffset;

  

e619a3b0   Luigi Serra   Controllet cross ...
440
        if (this._firstVisibleIndexVal === null) {

73bcce88   luigser   COMPONENTS
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
          physicalOffset = this._physicalTop;

  

          this._firstVisibleIndexVal = this._iterateItems(

            function(pidx, vidx) {

              physicalOffset += this._physicalSizes[pidx];

  

              if (physicalOffset > this._scrollPosition) {

                return vidx;

              }

            }) || 0;

        }

  

        return this._firstVisibleIndexVal;

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
456
457
458
459
460
461
462
463
464
465
466
467
468
      ready: function() {

        if (IOS_TOUCH_SCROLLING) {

          this._scrollListener = function() {

            requestAnimationFrame(this._scrollHandler.bind(this));

          }.bind(this);

        } else {

          this._scrollListener = this._scrollHandler.bind(this);

        }

      },

  

      /**

       * When the element has been attached to the DOM tree.

       */

73bcce88   luigser   COMPONENTS
469
470
471
472
473
      attached: function() {

        // delegate to the parent's scroller

        // e.g. paper-scroll-header-panel

        var el = Polymer.dom(this);

  

e619a3b0   Luigi Serra   Controllet cross ...
474
475
476
        var parentNode = /** @type {?{scroller: ?Element}} */ (el.parentNode);

        if (parentNode && parentNode.scroller) {

          this._scroller = parentNode.scroller;

73bcce88   luigser   COMPONENTS
477
478
479
480
481
482
483
        } else {

          this._scroller = this;

          this.classList.add('has-scroller');

        }

  

        if (IOS_TOUCH_SCROLLING) {

          this._scroller.style.webkitOverflowScrolling = 'touch';

e619a3b0   Luigi Serra   Controllet cross ...
484
        }

73bcce88   luigser   COMPONENTS
485
  

e619a3b0   Luigi Serra   Controllet cross ...
486
487
488
489
490
491
492
493
494
495
496
497
498
        this._scroller.addEventListener('scroll', this._scrollListener);

  

        this.updateViewportBoundaries();

        this._render();

      },

  

      /**

       * When the element has been removed from the DOM tree.

       */

      detached: function() {

        this._itemsRendered = false;

        if (this._scroller) {

          this._scroller.removeEventListener('scroll', this._scrollListener);

73bcce88   luigser   COMPONENTS
499
500
501
502
503
504
505
506
507
508
509
        }

      },

  

      /**

       * Invoke this method if you dynamically update the viewport's

       * size or CSS padding.

       *

       * @method updateViewportBoundaries

       */

      updateViewportBoundaries: function() {

        var scrollerStyle = window.getComputedStyle(this._scroller);

e619a3b0   Luigi Serra   Controllet cross ...
510
        this._scrollerPaddingTop = parseInt(scrollerStyle['padding-top'], 10);

73bcce88   luigser   COMPONENTS
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
        this._viewportSize = this._scroller.offsetHeight;

      },

  

      /**

       * Update the models, the position of the

       * items in the viewport and recycle tiles as needed.

       */

      _refresh: function() {

        var SCROLL_DIRECTION_UP = -1;

        var SCROLL_DIRECTION_DOWN = 1;

        var SCROLL_DIRECTION_NONE = 0;

  

        // clamp the `scrollTop` value

        // IE 10|11 scrollTop may go above `_maxScrollTop`

        // iOS `scrollTop` may go below 0 and above `_maxScrollTop`

        var scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scroller.scrollTop));

  

        var tileHeight, kth, recycledTileSet;

        var ratio = this._ratio;

        var delta = scrollTop - this._scrollPosition;

        var direction = SCROLL_DIRECTION_NONE;

        var recycledTiles = 0;

        var hiddenContentSize = this._hiddenContentSize;

        var currentRatio = ratio;

        var movingUp = [];

  

        // track the last `scrollTop`

        this._scrollPosition = scrollTop;

  

        // clear cached visible index

        this._firstVisibleIndexVal = null;

  

        // random access

e619a3b0   Luigi Serra   Controllet cross ...
544
        if (Math.abs(delta) > this._physicalSize) {

73bcce88   luigser   COMPONENTS
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
          this._physicalTop += delta;

          direction = SCROLL_DIRECTION_NONE;

          recycledTiles =  Math.round(delta / this._physicalAverage);

        }

        // scroll up

        else if (delta < 0) {

          var topSpace = scrollTop - this._physicalTop;

          var virtualStart = this._virtualStart;

  

          direction = SCROLL_DIRECTION_UP;

          recycledTileSet = [];

  

          kth = this._physicalEnd;

          currentRatio = topSpace / hiddenContentSize;

  

          // move tiles from bottom to top

          while (

              // approximate `currentRatio` to `ratio`

              currentRatio < ratio &&

              // recycle less physical items than the total

              recycledTiles < this._physicalCount &&

              // ensure that these recycled tiles are needed

              virtualStart - recycledTiles > 0

          ) {

  

            tileHeight = this._physicalSizes[kth] || this._physicalAverage;

            currentRatio += tileHeight / hiddenContentSize;

  

            recycledTileSet.push(kth);

            recycledTiles++;

            kth = (kth === 0) ? this._physicalCount - 1 : kth - 1;

          }

  

          movingUp = recycledTileSet;

          recycledTiles = -recycledTiles;

  

        }

        // scroll down

        else if (delta > 0) {

          var bottomSpace = this._physicalBottom - (scrollTop + this._viewportSize);

          var virtualEnd = this._virtualEnd;

          var lastVirtualItemIndex = this._virtualCount-1;

  

          direction = SCROLL_DIRECTION_DOWN;

          recycledTileSet = [];

  

          kth = this._physicalStart;

          currentRatio = bottomSpace / hiddenContentSize;

  

          // move tiles from top to bottom

          while (

              // approximate `currentRatio` to `ratio`

              currentRatio < ratio &&

              // recycle less physical items than the total

              recycledTiles < this._physicalCount &&

              // ensure that these recycled tiles are needed

              virtualEnd + recycledTiles < lastVirtualItemIndex

            ) {

  

            tileHeight = this._physicalSizes[kth] || this._physicalAverage;

            currentRatio += tileHeight / hiddenContentSize;

  

            this._physicalTop += tileHeight;

            recycledTileSet.push(kth);

            recycledTiles++;

            kth = (kth + 1) % this._physicalCount;

          }

        }

  

        if (recycledTiles !== 0) {

          this._virtualStart = this._virtualStart + recycledTiles;

          this._update(recycledTileSet, movingUp);

        }

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
620
621
622
623
624
625
      /**

       * Update the list of items, starting from the `_virtualStartVal` item.

       * @param {!Array<number>=} itemSet

       * @param {!Array<number>=} movingUp

       */

      _update: function(itemSet, movingUp) {

73bcce88   luigser   COMPONENTS
626
        // update models

e619a3b0   Luigi Serra   Controllet cross ...
627
        this._assignModels(itemSet);

73bcce88   luigser   COMPONENTS
628
629
630
631
632
633
634
635
636
637
638
639
  

        // measure heights

        // TODO(blasten) pass `recycledTileSet`

        this._updateMetrics();

  

        // adjust offset after measuring

        if (movingUp) {

          while (movingUp.length) {

            this._physicalTop -= this._physicalSizes[movingUp.pop()];

          }

        }

  

e619a3b0   Luigi Serra   Controllet cross ...
640
        // update the position of the items

73bcce88   luigser   COMPONENTS
641
642
643
644
        this._positionItems();

  

        // set the scroller size

        this._updateScrollerSize();

e619a3b0   Luigi Serra   Controllet cross ...
645
646
647
648
649
650
  

        // increase the pool of physical items if needed

        if (this._increasePoolIfNeeded()) {

          // set models to the new items

          this.async(this._update);

        }

73bcce88   luigser   COMPONENTS
651
652
      },

  

e619a3b0   Luigi Serra   Controllet cross ...
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
      /**

       * Creates a pool of DOM elements and attaches them to the local dom.

       */

      _createPool: function(size) {

        var physicalItems = new Array(size);

  

        this._ensureTemplatized();

  

        for (var i = 0; i < size; i++) {

          var inst = this.stamp(null);

  

          // First element child is item; Safari doesn't support children[0]

          // on a doc fragment

          physicalItems[i] = inst.root.querySelector('*');

          Polymer.dom(this).appendChild(inst.root);

        }

  

        return physicalItems;

      },

  

      /**

       * Increases the pool size. That is, the physical items in the DOM.

       * This function will allocate additional physical items

       * (limited by `MAX_PHYSICAL_COUNT`) if the content size is shorter than

       * `_optPhysicalSize`

       *

       * @return boolean

       */

      _increasePoolIfNeeded: function() {

        if (this._physicalSize >= this._optPhysicalSize || this._physicalAverage === 0) {

          return false;

        }

  

        // the estimated number of physical items that we will need to reach

        // the cap established by `_optPhysicalSize`.

        var missingItems = Math.round(

            (this._optPhysicalSize - this._physicalSize) * 1.2 / this._physicalAverage

          );

  

        // limit the size

        var nextPhysicalCount = Math.min(

            this._physicalCount + missingItems,

            this._virtualCount,

            MAX_PHYSICAL_COUNT

          );

  

        var prevPhysicalCount = this._physicalCount;

        var delta = nextPhysicalCount - prevPhysicalCount;

  

        if (delta <= 0) {

          return false;

        }

  

        var newPhysicalItems = this._createPool(delta);

        var emptyArray = new Array(delta);

  

        [].push.apply(this._physicalItems, newPhysicalItems);

        [].push.apply(this._physicalSizes, emptyArray);

  

        this._physicalCount = prevPhysicalCount + delta;

   

        return true;

73bcce88   luigser   COMPONENTS
715
716
      },

  

e619a3b0   Luigi Serra   Controllet cross ...
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
      /**

       * Render a new list of items. This method does exactly the same as `update`,

       * but it also ensures that only one `update` cycle is created.

       */

      _render: function() {

        var requiresUpdate = this._virtualCount > 0 || this._physicalCount > 0;

  

        if (this.isAttached && !this._itemsRendered && this._isVisible && requiresUpdate)  {

          this._update();

          this._itemsRendered = true;

        }

      },

  

      /**

       * Templetizes the user template.

       */

73bcce88   luigser   COMPONENTS
733
734
735
      _ensureTemplatized: function() {

        if (!this.ctor) {

          // Template instance props that should be excluded from forwarding

e619a3b0   Luigi Serra   Controllet cross ...
736
737
738
739
740
741
742
743
          var props = {};

  

          props.__key__ = true;

          props[this.as] = true;

          props[this.indexAs] = true;

          props[this.selectedAs] = true;

  

          this._instanceProps = props;

73bcce88   luigser   COMPONENTS
744
          this._userTemplate = Polymer.dom(this).querySelector('template');

e619a3b0   Luigi Serra   Controllet cross ...
745
  

73bcce88   luigser   COMPONENTS
746
747
748
          if (this._userTemplate) {

            this.templatize(this._userTemplate);

          } else {

e619a3b0   Luigi Serra   Controllet cross ...
749
            console.warn('iron-list requires a template to be provided in light-dom');

73bcce88   luigser   COMPONENTS
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
          }

        }

      },

  

      /**

       * Implements extension point from Templatizer mixin.

       */

      _getStampedChildren: function() {

        return this._physicalItems;

      },

  

      /**

       * Implements extension point from Templatizer

       * Called as a side effect of a template instance path change, responsible

       * for notifying items.<key-for-instance>.<path> change up to host.

       */

      _forwardInstancePath: function(inst, path, value) {

        if (path.indexOf(this.as + '.') === 0) {

          this.notifyPath('items.' + inst.__key__ + '.' +

            path.slice(this.as.length + 1), value);

        }

      },

  

      /**

       * Implements extension point from Templatizer mixin

       * Called as side-effect of a host property change, responsible for

       * notifying parent path change on each row.

       */

      _forwardParentProp: function(prop, value) {

        if (this._physicalItems) {

          this._physicalItems.forEach(function(item) {

            item._templateInstance[prop] = value;

          }, this);

        }

      },

  

      /**

       * Implements extension point from Templatizer

       * Called as side-effect of a host path change, responsible for

       * notifying parent.<path> path change on each row.

       */

      _forwardParentPath: function(path, value) {

        if (this._physicalItems) {

          this._physicalItems.forEach(function(item) {

            item._templateInstance.notifyPath(path, value, true);

          }, this);

        }

      },

  

      /**

       * Called as a side effect of a host items.<key>.<path> path change,

       * responsible for notifying item.<path> changes to row for key.

       */

      _forwardItemPath: function(path, value) {

        if (this._physicalIndexForKey) {

          var dot = path.indexOf('.');

          var key = path.substring(0, dot < 0 ? path.length : dot);

          var idx = this._physicalIndexForKey[key];

          var row = this._physicalItems[idx];

          if (row) {

            var inst = row._templateInstance;

            if (dot >= 0) {

              path = this.as + '.' + path.substring(dot+1);

              inst.notifyPath(path, value, true);

            } else {

              inst[this.as] = value;

            }

          }

        }

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
821
822
823
824
      /**

       * Called when the items have changed. That is, ressignments

       * to `items`, splices or updates to a single item.

       */

73bcce88   luigser   COMPONENTS
825
826
      _itemsChanged: function(change) {

        if (change.path === 'items') {

e619a3b0   Luigi Serra   Controllet cross ...
827
828
829
          // render the new set

          this._itemsRendered = false;

  

73bcce88   luigser   COMPONENTS
830
831
832
833
          // update the whole set

          this._virtualStartVal = 0;

          this._physicalTop = 0;

          this._virtualCount = this.items ? this.items.length : 0;

e619a3b0   Luigi Serra   Controllet cross ...
834
835
          this._collection = this.items ? Polymer.Collection.get(this.items) : null;

          this._physicalIndexForKey = {};

73bcce88   luigser   COMPONENTS
836
  

e619a3b0   Luigi Serra   Controllet cross ...
837
838
          // scroll to the top

          this._resetScrollPosition(0);

73bcce88   luigser   COMPONENTS
839
  

e619a3b0   Luigi Serra   Controllet cross ...
840
841
842
843
844
          // create the initial physical items

          if (!this._physicalItems) {

            this._physicalCount = Math.max(1, Math.min(DEFAULT_PHYSICAL_COUNT, this._virtualCount));

            this._physicalItems = this._createPool(this._physicalCount);

            this._physicalSizes = new Array(this._physicalCount);

73bcce88   luigser   COMPONENTS
845
846
          }

  

e619a3b0   Luigi Serra   Controllet cross ...
847
          this.debounce('refresh', this._render);

73bcce88   luigser   COMPONENTS
848
849
  

        } else if (change.path === 'items.splices') {

e619a3b0   Luigi Serra   Controllet cross ...
850
851
          // render the new set

          this._itemsRendered = false;

73bcce88   luigser   COMPONENTS
852
853
854
855
  

          this._adjustVirtualIndex(change.value.indexSplices);

          this._virtualCount = this.items ? this.items.length : 0;

  

e619a3b0   Luigi Serra   Controllet cross ...
856
          this.debounce('refresh', this._render);

73bcce88   luigser   COMPONENTS
857
858
859
860
861
862
863
  

        } else {

          // update a single item

          this._forwardItemPath(change.path.split('.').slice(1).join('.'), change.value);

        }

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
864
865
866
      /**

       * @param {!Array<!PolymerSplice>} splices

       */

73bcce88   luigser   COMPONENTS
867
      _adjustVirtualIndex: function(splices) {

e619a3b0   Luigi Serra   Controllet cross ...
868
869
870
871
872
873
874
875
876
        var i, splice, idx;

  

        for (i = 0; i < splices.length; i++) {

          splice = splices[i];

  

          // deselect removed items

          splice.removed.forEach(this.$.selector.deselect, this.$.selector);

  

          idx = splice.index;

73bcce88   luigser   COMPONENTS
877
878
879
880
881
882
883
884
885
886
887
888
889
890
          // We only need to care about changes happening above the current position

          if (idx >= this._virtualStartVal) {

            break;

          }

  

          this._virtualStart = this._virtualStart +

              Math.max(splice.addedCount - splice.removed.length, idx - this._virtualStartVal);

        }

      },

  

      _scrollHandler: function() {

        this._refresh();

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
891
892
893
894
895
896
897
      /**

       * Executes a provided function per every physical index in `itemSet`

       * `itemSet` default value is equivalent to the entire set of physical indexes.

       * 

       * @param {!function(number, number)} fn

       * @param {!Array<number>=} itemSet

       */

73bcce88   luigser   COMPONENTS
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
      _iterateItems: function(fn, itemSet) {

        var pidx, vidx, rtn, i;

  

        if (arguments.length === 2 && itemSet) {

          for (i = 0; i < itemSet.length; i++) {

            pidx = itemSet[i];

            if (pidx >= this._physicalStart) {

              vidx = this._virtualStartVal + (pidx - this._physicalStart);

            } else {

              vidx = this._virtualStartVal + (this._physicalCount - this._physicalStart) + pidx;

            }

            if ((rtn = fn.call(this, pidx, vidx)) != null) {

              return rtn;

            }

          }

        } else {

          pidx = this._physicalStart;

          vidx = this._virtualStartVal;

  

          for (; pidx < this._physicalCount; pidx++, vidx++) {

            if ((rtn = fn.call(this, pidx, vidx)) != null) {

              return rtn;

            }

          }

  

          pidx = 0;

  

          for (; pidx < this._physicalStart; pidx++, vidx++) {

            if ((rtn = fn.call(this, pidx, vidx)) != null) {

              return rtn;

            }

          }

        }

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
933
934
935
936
      /**

       * Assigns the data models to a given set of items.

       * @param {!Array<number>=} itemSet

       */

73bcce88   luigser   COMPONENTS
937
938
939
940
941
942
943
944
945
      _assignModels: function(itemSet) {

        this._iterateItems(function(pidx, vidx) {

          var el = this._physicalItems[pidx];

          var inst = el._templateInstance;

          var item = this.items && this.items[vidx];

  

          if (item) {

            inst[this.as] = item;

            inst.__key__ = this._collection.getKey(item);

e619a3b0   Luigi Serra   Controllet cross ...
946
947
            inst[this.selectedAs] =

              /** @type {!ArraySelectorElement} */ (this.$.selector).isSelected(item);

73bcce88   luigser   COMPONENTS
948
949
950
951
952
953
954
955
956
957
958
            inst[this.indexAs] = vidx;

            el.removeAttribute('hidden');

            this._physicalIndexForKey[inst.__key__] = pidx;

          } else {

            inst.__key__ = null;

            el.setAttribute('hidden', '');

          }

  

        }, itemSet);

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
959
960
961
      /**

       * Updates the height for a given set of items.

       */

73bcce88   luigser   COMPONENTS
962
963
964
965
966
      _updateMetrics: function() {

        var total = 0;

        var prevAvgCount = this._physicalAverageCount;

        var prevPhysicalAvg = this._physicalAverage;

  

e619a3b0   Luigi Serra   Controllet cross ...
967
968
969
970
        // Make sure we distributed all the physical items

        // so we can measure them

        Polymer.dom.flush();

  

73bcce88   luigser   COMPONENTS
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
        for (var i = 0; i < this._physicalCount; i++) {

          this._physicalSizes[i] = this._physicalItems[i].offsetHeight;

          total += this._physicalSizes[i];

          this._physicalAverageCount += this._physicalSizes[i] ? 1 : 0;

        }

  

        this._physicalSize = total;

        this._viewportSize = this._scroller.offsetHeight;

  

        if (this._physicalAverageCount !== prevAvgCount) {

          this._physicalAverage = Math.round(

              ((prevPhysicalAvg * prevAvgCount) + total) /

              this._physicalAverageCount);

        }

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
987
988
989
990
      /**

       * Updates the position of the physical items.

       */

      _positionItems: function() {

73bcce88   luigser   COMPONENTS
991
992
993
994
995
996
997
998
999
        this._adjustScrollPosition();

  

        var y = this._physicalTop;

  

        this._iterateItems(function(pidx) {

  

          this.transform('translate3d(0, ' + y + 'px, 0)', this._physicalItems[pidx]);

          y += this._physicalSizes[pidx];

  

e619a3b0   Luigi Serra   Controllet cross ...
1000
        });

73bcce88   luigser   COMPONENTS
1001
1002
      },

  

e619a3b0   Luigi Serra   Controllet cross ...
1003
1004
1005
      /**

       * Adjusts the scroll position when it was overestimated.

       */

73bcce88   luigser   COMPONENTS
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
      _adjustScrollPosition: function() {

        var deltaHeight = this._virtualStartVal === 0 ? this._physicalTop :

            Math.min(this._scrollPosition + this._physicalTop, 0);

  

        if (deltaHeight) {

          this._physicalTop = this._physicalTop - deltaHeight;

  

          // juking scroll position during interial scrolling on iOS is no bueno

          if (!IOS_TOUCH_SCROLLING) {

            this._resetScrollPosition(this._scroller.scrollTop - deltaHeight);

          }

        }

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
1020
1021
1022
      /**

       * Sets the position of the scroll.

       */

73bcce88   luigser   COMPONENTS
1023
      _resetScrollPosition: function(pos) {

e619a3b0   Luigi Serra   Controllet cross ...
1024
1025
1026
1027
        if (this._scroller) {

          this._scroller.scrollTop = pos;

          this._scrollPosition = this._scroller.scrollTop;

        }

73bcce88   luigser   COMPONENTS
1028
1029
      },

  

e619a3b0   Luigi Serra   Controllet cross ...
1030
1031
1032
1033
1034
      /**

       * Sets the scroll height, that's the height of the content,

       */

      _updateScrollerSize: function(forceUpdate) {

        this._estScrollHeight = (this._physicalBottom +

73bcce88   luigser   COMPONENTS
1035
1036
            Math.max(this._virtualCount - this._physicalCount - this._virtualStartVal, 0) * this._physicalAverage);

  

e619a3b0   Luigi Serra   Controllet cross ...
1037
1038
1039
1040
1041
1042
1043
1044
        forceUpdate = forceUpdate || this._scrollHeight === 0;

        forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;

  

        // amortize height adjustment, so it won't trigger repaints very often

        if (forceUpdate || Math.abs(this._estScrollHeight - this._scrollHeight) >= this._optPhysicalSize) {

          this.$.items.style.height = this._estScrollHeight + 'px';

          this._scrollHeight = this._estScrollHeight;

        }

73bcce88   luigser   COMPONENTS
1045
1046
1047
1048
1049
1050
1051
      },

  

      /**

       * Scroll to a specific item in the virtual list regardless

       * of the physical items in the DOM tree.

       *

       * @method scrollToIndex

e619a3b0   Luigi Serra   Controllet cross ...
1052
       * @param {number} idx The index of the item

73bcce88   luigser   COMPONENTS
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
       */

      scrollToIndex: function(idx) {

        if (typeof idx !== 'number') {

          return;

        }

  

        var firstVisible = this.firstVisibleIndex;

  

        idx = Math.min(Math.max(idx, 0), this._virtualCount-1);

  

        // start at the previous virtual item

        // so we have a item above the first visible item

        this._virtualStart = idx - 1;

  

        // assign new models

        this._assignModels();

  

        // measure the new sizes

        this._updateMetrics();

  

        // estimate new physical offset

        this._physicalTop = this._virtualStart * this._physicalAverage;

  

        var currentTopItem = this._physicalStart;

        var currentVirtualItem = this._virtualStart;

        var targetOffsetTop = 0;

        var hiddenContentSize = this._hiddenContentSize;

  

        // scroll to the item as much as we can

        while (currentVirtualItem !== idx && targetOffsetTop < hiddenContentSize) {

          targetOffsetTop = targetOffsetTop + this._physicalSizes[currentTopItem];

          currentTopItem = (currentTopItem + 1) % this._physicalCount;

          currentVirtualItem++;

        }

  

        // update the scroller size

e619a3b0   Luigi Serra   Controllet cross ...
1089
        this._updateScrollerSize(true);

73bcce88   luigser   COMPONENTS
1090
1091
1092
1093
1094
1095
1096
  

        // update the position of the items

        this._positionItems();

  

        // set the new scroll position

        this._resetScrollPosition(this._physicalTop + targetOffsetTop + 1);

  

e619a3b0   Luigi Serra   Controllet cross ...
1097
1098
1099
1100
1101
1102
        // increase the pool of physical items if needed

        if (this._increasePoolIfNeeded()) {

          // set models to the new items

          this.async(this._update);

        }

  

73bcce88   luigser   COMPONENTS
1103
1104
1105
1106
        // clear cached visible index

        this._firstVisibleIndexVal = null;

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
1107
1108
1109
      /**

       * Reset the physical average and the average count.

       */

73bcce88   luigser   COMPONENTS
1110
1111
1112
1113
1114
      _resetAverage: function() {

        this._physicalAverage = 0;

        this._physicalAverageCount = 0;

      },

  

e619a3b0   Luigi Serra   Controllet cross ...
1115
1116
1117
1118
      /**

       * A handler for the `resize` event triggered by `IronResizableBehavior`

       * when the element is resized.

       */

73bcce88   luigser   COMPONENTS
1119
      _resizeHandler: function() {

e619a3b0   Luigi Serra   Controllet cross ...
1120
1121
1122
        this.debounce('resize', function() {

          this._render();

          if (this._itemsRendered && this._physicalItems && this._isVisible) {

73bcce88   luigser   COMPONENTS
1123
1124
1125
            this._resetAverage();

            this.updateViewportBoundaries();

            this.scrollToIndex(this.firstVisibleIndex);

e619a3b0   Luigi Serra   Controllet cross ...
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
          }

        });

      },

  

      _getModelFromItem: function(item) {

        var key = this._collection.getKey(item);

        var pidx = this._physicalIndexForKey[key];

  

        if (pidx !== undefined) {

          return this._physicalItems[pidx]._templateInstance;

73bcce88   luigser   COMPONENTS
1136
        }

e619a3b0   Luigi Serra   Controllet cross ...
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
        return null;

      },

  

      /**

       * Select the list item at the given index.

       *

       * @method selectItem

       * @param {(Object|number)} item the item object or its index

       */

      selectItem: function(item) {

        if (typeof item === 'number') {

          item = this.items[item];

          if (!item) {

            throw new RangeError('<item> not found');

          }

        } else {

          if (this._collection.getKey(item) === undefined) {

            throw new TypeError('<item> should be a valid item');

          }

        }

  

        var model = this._getModelFromItem(item);

  

        if (!this.multiSelection && this.selectedItem) {

          this.deselectItem(this.selectedItem);

        }

        if (model) {

          model[this.selectedAs] = true;

        }

        this.$.selector.select(item);

      },

  

      /**

       * Deselects the given item list if it is already selected.

       *

       * @method deselect

       * @param {(Object|number)} item the item object or its index

       */

      deselectItem: function(item) {

        if (typeof item === 'number') {

          item = this.items[item];

          if (!item) {

            throw new RangeError('<item> not found');

          }

        } else {

          if (this._collection.getKey(item) === undefined) {

            throw new TypeError('<item> should be a valid item');

          }

        }

  

        var model = this._getModelFromItem(item);

  

        if (model) {

          model[this.selectedAs] = false;

        }

        this.$.selector.deselect(item);

      },

  

      /**

       * Select or deselect a given item depending on whether the item

       * has already been selected.

       *

       * @method toggleSelectionForItem

       * @param {(Object|number)} item the item object or its index

       */

      toggleSelectionForItem: function(item) {

        item = typeof item === 'number' ? this.items[item] : item;

        if (/** @type {!ArraySelectorElement} */ (this.$.selector).isSelected(item)) {

          this.deselectItem(item);

        } else {

          this.selectItem(item);

        }

      },

  

      /**

       * Clears the current selection state of the list.

       *

       * @method clearSelection

       */

      clearSelection: function() {

        function unselect(item) {

          var model = this._getModelFromItem(item);

          if (model) {

            model[this.selectedAs] = false;

          }

        }

  

        if (Array.isArray(this.selectedItems)) {

          this.selectedItems.forEach(unselect, this);

        } else if (this.selectedItem) {

          unselect.call(this, this.selectedItem);

        }

  

        /** @type {!ArraySelectorElement} */ (this.$.selector).clearSelection();

      },

  

      /**

       * Add an event listener to `tap` if `selectionEnabled` is true,

       * it will remove the listener otherwise.

       */

      _selectionEnabledChanged: function(selectionEnabled) {

        if (selectionEnabled) {

          this.listen(this, 'tap', '_selectionHandler');

          this.listen(this, 'keypress', '_selectionHandler');

        } else {

          this.unlisten(this, 'tap', '_selectionHandler');

          this.unlisten(this, 'keypress', '_selectionHandler');

        }

      },

  

      /**

       * Select an item from an event object.

       */

      _selectionHandler: function(e) {

        var ENTER_KEY = 13, model;

        if (e.type !== 'keypress' || e.keyCode === ENTER_KEY) {

          model = this.modelForElement(e.target);

          if (model) {

            this.toggleSelectionForItem(model[this.as]);

          }

        }

      },

  

      _multiSelectionChanged: function(multiSelection) {

        this.clearSelection();

        this.$.selector.multi = multiSelection;

73bcce88   luigser   COMPONENTS
1263
1264
1265
1266
1267
1268
      }

    });

  

  })();

  

  </script>