Merge pull request #40 from PolymerElements/display-none

Fix #39

README.md

@@ -13,7 +13,7 @@ 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 
+__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).
@@ -31,7 +31,7 @@ List item templates should bind to template models of the following structure:
 }
 ```
 
-Alternatively, you can change the property name used as data index by changing the 
+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.
 
@@ -62,3 +62,17 @@ bound from the model object provided to the template scope):
   </iron-list>
 </template>
 ```
+
+### 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.
+
+```js
+document.querySelector('iron-list').fire('resize');
+```

iron-list.html

@@ -69,6 +69,18 @@
       </iron-list>
     </template>
 
+### 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');
+
 
 @group Iron Element
 @element iron-list
@@ -341,6 +353,13 @@
       return this._viewportSize * 3;
     },
 
+   /**
+    * True if the current list is visible.
+    */
+    get _isVisible() {
+      return !!(this.offsetWidth || this.offsetHeight);
+    },
+
     /**
      * Gets the first visible item in the viewport.
      *
@@ -581,7 +600,7 @@
      * @return Array
      */
     _increasePoolIfNeeded: function() {
-      if (this._physicalSize > this._optPhysicalSize) {
+      if (this._physicalSize >= this._optPhysicalSize || this._physicalAverage === 0) {
         return null;
       }
 
@@ -626,11 +645,7 @@
      * but it also ensures that only one `update` cycle is created.
      */
     _render: function() {
-      if (this.isAttached && !this._initRendered && this.items) {
-        // polymer/issues/2039
-        if (window.CustomElements) {
-          window.CustomElements.takeRecords();
-        }
+      if (this.isAttached && !this._initRendered && this._isVisible && this.items) {
         this._update();
         this._initRendered = true;
       }
@@ -746,6 +761,7 @@
 
         this.debounce('refresh', this._render);
 
+
       } else if (change.path === 'items.splices') {
         // render the new set
         this._initRendered = false;
@@ -839,6 +855,10 @@
       var prevAvgCount = this._physicalAverageCount;
       var prevPhysicalAvg = this._physicalAverage;
 
+      // Make sure we distributed all the physical items
+      // so we can measure them
+      Polymer.dom.flush();
+
       for (var i = 0; i < this._physicalCount; i++) {
         this._physicalSizes[i] = this._physicalItems[i].offsetHeight;
         total += this._physicalSizes[i];
@@ -949,19 +969,26 @@
       this._firstVisibleIndexVal = null;
     },
 
+    /**
+     * Reset the physical average and the average count.
+     */
     _resetAverage: function() {
       this._physicalAverage = 0;
       this._physicalAverageCount = 0;
     },
 
+    /**
+     * A handler for the `resize` event triggered by `IronResizableBehavior`
+     * when the element is resized.
+     */
     _resizeHandler: function() {
-      if (this._physicalItems) {
-        this.debounce('resize', function() {
+      this.debounce('resize', function() {
+        if (this._physicalItems && this._isVisible) {
           this._resetAverage();
           this.updateViewportBoundaries();
           this.scrollToIndex(this.firstVisibleIndex);
-        });
-      }
+        }
+      });
     }
   });
 

test/basic.html

@@ -18,57 +18,26 @@
   <script src="../../web-component-tester/browser.js"></script>
   <script src="../../test-fixture/test-fixture-mocha.js"></script>
 
-  <link rel="import" href="helpers.html">
   <link rel="import" href="../../test-fixture/test-fixture.html">
-  <link rel="import" href="../iron-list.html">
+  <link rel="import" href="helpers.html">
+  <link rel="import" href="x-list.html">
 </head>
 <body>
 
   <test-fixture id="trivialList">
     <template>
-      <template is="dom-bind">
-        <style>
-          :host {
-            @apply(--layout-fit);
-            @apply(--layout-vertical);
-
-            display: block;
-          }
-
-          iron-list {
-            height: 300px;
-          }
-
-          .item:nth-child(odd) {
-            height: 100px;
-            background-color: green;
-            color: white;
-          }
-
-          .item:nth-child(even) {
-            height: 100px;
-            background-color: red;
-            color: white;
-          }
-        </style>
-        <iron-list items="[[data]]" as="item">
-          <template>
-            <div class="item">[[item.index]]</div>
-          </template>
-        </iron-list>
-      </template>
+      <x-list></x-list>
     </template>
   </test-fixture>
 
-
 <script>
 
   suite('basic features', function() {
     var list, container;
 
     setup(function() {
       container = fixture('trivialList');
-      list = findElementInList(container, 'iron-list');
+      list = container.list;
     });
 
     test('defaults', function() {

test/helpers.html

@@ -13,6 +13,7 @@
     var i = 0;
     var children = container._children;
     var ms = Polymer.DomApi.matchesSelector;
+
     for (; i < children.length; i++) {
       if (children[i].nodeType === Node.ELEMENT_NODE && ms.call(children[i], selector)) {
         return children[i];
@@ -42,12 +43,17 @@
     var contribution = config.contribution || 10;
 
     function scroll(dir, prevVal) {
-      list.scrollTop = list.scrollTop + dir;
-      if (list.scrollTop !== target && prevVal !== list.scrollTop) {
-        setTimeout(scroll.bind(null, dir, list.scrollTop), delay);
-      } else {
+      if ((dir > 0 && list.scrollTop >= target) || 
+          (dir < 0 && list.scrollTop <= target) || 
+          list.scrollTop === prevVal
+        ){
+        list.scrollTop = target;
         setTimeout(fn.bind(null, list.scrollTop), 100);
+        return;
       }
+      prevVal = list.scrollTop;
+      list.scrollTop = list.scrollTop + dir;
+      setTimeout(scroll.bind(null, dir, prevVal), delay);
     }
 
     if (list.scrollTop < target) {

test/hidden-list.html

@@ -0,0 +1,80 @@
+<!doctype html>
+<!--
+@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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>iron-list test</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../../paper-styles/paper-styles.html">
+  <link rel="import" href="helpers.html">
+  <link rel="import" href="x-list.html">
+
+</head>
+<body>
+
+  <test-fixture id="trivialList">
+    <template>
+      <x-list hidden></x-list>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    suite('hidden list', function() {
+      var list, container;
+
+      setup(function() {
+        container = fixture('trivialList');
+        list = container.list;
+      });
+
+      test('list size', function(done) {
+        list.items = buildDataSet(100);
+        flush(function() {
+          assert.equal(list.offsetWidth, 0);
+          assert.equal(list.offsetHeight, 0);
+          done();
+        });
+      });
+
+      test('resize', function(done) {
+        list.items = buildDataSet(100);
+        list.fire('resize');
+        flush(function() {
+          assert.notEqual(getFirstItemFromList(list).textContent, '0');
+
+          container.removeAttribute('hidden');
+
+          flush(function() {
+            assert.notEqual(getFirstItemFromList(list).textContent, '0');
+
+            list.fire('resize');
+
+            flush(function() {
+              assert.equal(getFirstItemFromList(list).textContent, '0');
+              done();
+            });
+          });
+        });
+      });
+
+    });
+
+  </script>
+
+</body>
+</html>

test/index.html

@@ -20,7 +20,8 @@
     WCT.loadSuites([
       'basic.html',
       'mutations.html',
-      'physical-count.html'
+      'physical-count.html',
+      'hidden-list.html'
     ]);
   </script>
 </body>

test/mutations.html

@@ -18,45 +18,15 @@
   <script src="../../web-component-tester/browser.js"></script>
   <script src="../../test-fixture/test-fixture-mocha.js"></script>
 
-  <link rel="import" href="helpers.html">
   <link rel="import" href="../../test-fixture/test-fixture.html">
-  <link rel="import" href="../iron-list.html">
+  <link rel="import" href="helpers.html">
+  <link rel="import" href="x-list.html">
 </head>
 <body>
 
   <test-fixture id="trivialList">
     <template>
-      <template is="dom-bind">
-        <style>
-          :host {
-            @apply(--layout-fit);
-            @apply(--layout-vertical);
-
-            display: block;
-          }
-
-          iron-list {
-            height: 300px;
-          }
-
-          .item:nth-child(odd) {
-            height: 100px;
-            background-color: green;
-            color: white;
-          }
-
-          .item:nth-child(even) {
-            height: 100px;
-            background-color: red;
-            color: white;
-          }
-        </style>
-        <iron-list items="[[data]]" as="item">
-          <template>
-            <div class="item">[[item.index]]</div>
-          </template>
-        </iron-list>
-      </template>
+      <x-list></x-list>
     </template>
   </test-fixture>
 
@@ -67,7 +37,7 @@
 
       setup(function() {
         container = fixture('trivialList');
-        list = findElementInList(container, 'iron-list');
+        list = container.list;
       });
 
       test('update physical item', function(done) {