Merge pull request #454 from Westbrook/grid-changed

Update layout correctly when changing the value of `grid`
PolymerElements · Jun 23, 2017 · 5c7637e · 5c7637e
2 parents 52c787d + 633c2d2
commit 5c7637e
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 1 deletion.
diff --git a/iron-list.html b/iron-list.html
@@ -359,7 +359,8 @@
       grid: {
         type: Boolean,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
+        observer: '_gridChanged'
       },
 
       /**
@@ -1069,6 +1070,13 @@
       this.templatize(this._userTemplate, this.mutableData);
     },
 
+    _gridChanged: function(newGrid, oldGrid) {
+      if (typeof oldGrid === 'undefined') return;
+      this.notifyResize();
+      Polymer.flush ? Polymer.flush() : Polymer.dom.flush();
+      this._updateGridMetrics();
+    },
+
     /**
      * Called when the items have changed. That is, ressignments
      * to `items`, splices or updates to a single item.
@@ -1269,7 +1277,9 @@
         this._updateGridMetrics();
         this._physicalSize = Math.ceil(this._physicalCount / this._itemsPerRow) * this._rowHeight;
       } else {
+        oldPhysicalSize = (this._itemsPerRow === 1) ? oldPhysicalSize :  Math.ceil(this._physicalCount / this._itemsPerRow) * this._rowHeight;
         this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;
+        this._itemsPerRow = 1;
       }
       // Update the average if it measured something.
       if (this._physicalAverageCount !== prevAvgCount) {

diff --git a/test/grid-changed.html b/test/grid-changed.html
@@ -0,0 +1,87 @@
+<!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="../../iron-test-helpers/mock-interactions.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+  <link rel="import" href="fixtures/helpers.html">
+  <link rel="import" href="fixtures/x-grid.html">
+
+</head>
+<body>
+  <!-- Issue: web-component-tester/issues/505 -->
+  <script>void(0)</script>
+
+  <test-fixture id="trivialList">
+    <template>
+      <x-grid></x-grid>
+    </template>
+  </test-fixture>
+
+<script>
+
+  suite('basic features', function() {
+    var list, container;
+
+    setup(function() {
+      container = fixture('trivialList');
+      list = container.list;
+    });
+
+    test('check from grid=true to grid=false and back', function() {
+      // Physical scroll bar causes there to be less columns than expected.
+      // Force list to be wide enough to allow for 3 columns and the scroller.
+      list.style.width = '320px';
+      container.data = buildDataSet(100);
+      PolymerFlush();
+      assert.equal(list.lastVisibleIndex, 8);
+      assert.equal(list._scrollHeight, 3400);
+      list.grid = false;
+      PolymerFlush();
+      assert.equal(list.lastVisibleIndex, 2);
+      assert.equal(list._scrollHeight, 10000);
+      list.grid = true;
+      PolymerFlush();
+      assert.equal(list.lastVisibleIndex, 8);
+      assert.equal(list._scrollHeight, 3400);
+    });
+
+    test('check from grid=false to grid=true and back', function() {
+      // Physical scroll bar causes there to be less columns than expected.
+      // Force list to be wide enough to allow for 3 columns and the scroller.
+      list.style.width = '320px';
+      list.grid = false;
+      container.data = buildDataSet(100);
+      PolymerFlush();
+      assert.equal(list.lastVisibleIndex, 2);
+      assert.equal(list._scrollHeight, 10000);
+      list.grid = true;
+      PolymerFlush();
+      assert.equal(list.lastVisibleIndex, 8, 'Grid should show more items.');
+      assert.equal(list._scrollHeight, 3400);
+      list.grid = false;
+      PolymerFlush();
+      assert.equal(list.lastVisibleIndex, 2);
+      assert.equal(list._scrollHeight, 10000);
+    });
+
+  });
+</script>
+
+</body>
+</html>
diff --git a/test/index.html b/test/index.html
@@ -29,6 +29,7 @@
       'different-heights.html?dom=shadow',
       'grid.html?dom=shadow',
       'grid-rtl.html?dom=shadow',
+      'grid-changed.html?dom=shadow',
       'bindings-host-to-item.html?dom=shadow',
       'template-overload.html?dom=shadow',
       'scroll-offset.html?dom=shadow',
@@ -43,6 +44,7 @@
       'different-heights.html?wc-shadydom=true&wc-ce=true',
       'grid.html?wc-shadydom=true&wc-ce=true',
       'grid-rtl.html?wc-shadydom=true&wc-ce=true',
+      'grid-changed.html?wc-shadydom=true&wc-ce=true',
       'bindings-host-to-item.html?wc-shadydom=true&wc-ce=true',
       'template-overload.html?wc-shadydom=true&wc-ce=true',
       'scroll-offset.html?wc-shadydom=true&wc-ce=true'