[FEAT] Enforce maximum height (by percentage) for sticky footers and he… (#753)

bantic · web-flow · commit 44a7ae0237e3 · 2019-08-15T16:41:10.000-04:00
When the footer or header will take up more than 50% of the height
of the table, the sticky polyfill will now position some of the
cells so that they must be scrolled to in order to be seen.
Otherwise, all of the body cells are covered by the sticky header/footer
cells.
diff --git a/addon/-private/sticky/table-sticky-polyfill.js b/addon/-private/sticky/table-sticky-polyfill.js
@@ -6,6 +6,7 @@ const TABLE_POLYFILL_MAP = new WeakMap();
 class TableStickyPolyfill {
   constructor(element) {
     this.element = element;
+    this.maxStickyProportion = 0.5;
 
     this.element.style.position = 'static';
     this.side = element.tagName === 'THEAD' ? 'top' : 'bottom';
@@ -70,19 +71,123 @@ class TableStickyPolyfill {
     this.resizeSensors.forEach(([cell, sensor]) => sensor.detach(cell));
   };
 
+  /**
+     Repositions all the `td`|`th` inside each `tr` of the `tfoot`|`thead`.
+     The `td` and `th` cells must be sticky due to existing Chrome and Edge bugs
+     that don't apply the sticky to the footer/header:
+       * Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=702927
+       * Edge bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16765952/
+       * More details at: https://caniuse.com/#search=fixed
+
+     Calculates the table's scale and scrollable height and, working top-down for header or bottom-up for footer,
+     sets the cells for each row to be `position:sticky` with a calculated `top` or `bottom` offset so that they
+     appear correctly fixed in the table.
+     The calculation takes into account the height of each row as it goes, adjusting the next row's top|bottom offset
+     accordingly.
+
+     For example, assuming the following table with 2 thead and 2 tfoot rows:
+       * There will be 2 TableStickyPolyfills created, one for the thead, one for the tfoot
+       * For the thead TableStickyPolifyill, its `repositionStickyElements` will
+         start at row 0, setting each of its `th` cells' `top` value to `0px`, then
+         add row 0's height (25px) to its current offset and move on to row 1,
+         where it will set each of that row's `th` cells' `top` to the current
+         offset of `25px`.
+       * For the tfoot TableStickyPolyfill, its `respositionStickyElements` will
+         start at the bottom-most row, row 1, and set each of its `td` cells'
+         `bottom` value to `0px`, then add row 1's height (20px) to its current
+         offset and move on to the next row, row 0, where it will set each of that
+         row's `td` cells' `bottom` to the current offset of `20px`.
+
+   +--------------------------------------------+
+   |+------------------------------------------+|
+   ||thead                                     ||
+   ||+----------------------------------------+||
+   |||row 0 (height: 25px)  top: 0px          |||
+   ||+----------------------------------------+||
+   ||+----------------------------------------+||
+   |||row 1                 top: 25px         |||
+   ||+----------------------------------------+||
+   |+------------------------------------------+|
+   |                                            |
+   |           ....   tbody  ....               |
+   |                                            |
+   |+------------------------------------------+|
+   ||tfoot                                     ||
+   ||+----------------------------------------+||
+   |||row 0                     bottom: 20px  |||
+   ||+----------------------------------------+||
+   ||+----------------------------------------+||
+   |||row 1  (height: 20px)     bottom: 0px   |||
+   ||+----------------------------------------+||
+   |+------------------------------------------+|
+   +--------------------------------------------+
+
+   If a table has enough header|footer rows, they cumulatively add up to greater than the
+   table's height. In this case, the standard calculation of `stick`ing each
+   row to its calculated offset from the top|bottom will cause the
+   header|footer rows to stick over *all* of the scrollable body rows,
+   preventing them (as well as possibly some header|footer rows) from being
+   seen.
+
+   To account for this potential situation, the repositioning sets a maximum percentage height
+   for the header|footer of 50%. If the rows take up greater than that percentage of the table's
+   height, all of the overflowing rows are positioned using a negative offset so that they
+   will be visible when scrolling to the top|bottom of the table for thead|tfoot overflow rows, respectively.
+
+   For example, the following table has footer rows totaling 75px, but the table's height
+   is only 120px. The footer rows take up more than 50% of the table, so the bottom-most
+   footer row (2) is positioned at (tableHeight - footerHeight = 75 - 120) -45px, the next
+   footer row (1) is positioned at (-45 + 30) -15px, and the top-most footer row (0)
+   is at (-15 + 20) 5px.
+
+   The effect is that the top row (0) will be fully visible, row 1 will be partially visible,
+   and row 2 will be hidden until the table is scrolled all the way to the bottom.
+
+  +-----------------------------------+          ------------^---
+  |table                              |                      |Table height: 120px
+  |                                   |                      |
+  |                                   |                      |
+  |                                   |                      |
+  |                                   |                      |
+  |                                   |                      |
+  |+--------------------------------+ | ^---                 |
+  ||tfoot                           | | |                    |
+  ||+------------------------------+| | |tfoot height        |
+  |||row 0 (20px)     bottom:   5px|| | |20+25+30 = 75px     |
+  |||                              || | |                    |
+  |||                              || | |                    |
+  ||+------------------------------+| | |                    |
+  ||+------------------------------+| | |                    |
+  |||row 1 (25px)     bottom: -15px|| | |                    |
+  |||                              || | |                    |
+  +-----------------------------------+ |        ------------v---
+   |+                              +|   |
+   |+------------------------------+|   |
+   ||row 2 (30px)     bottom: -45px||   |
+   ||                              ||   |
+   |+------------------------------+|   |
+   |                                |   |
+   +--------------------------------+   v---
+   */
   repositionStickyElements = () => {
     let table = this.element.parentNode;
     let scale = table.offsetHeight / table.getBoundingClientRect().height;
+    let containerHeight = table.parentNode.offsetHeight;
 
     let rows = Array.from(this.element.children);
-    let orderedRows = this.side === 'top' ? rows : rows.reverse();
-
     let offset = 0;
+    let heights = rows.map(r => r.getBoundingClientRect().height * scale);
 
-    let heights = orderedRows.map(r => r.getBoundingClientRect().height * scale);
+    let totalHeight = heights.reduce((sum, h) => (sum += h), 0);
+    let maxHeight = containerHeight * this.maxStickyProportion;
+    if (totalHeight > maxHeight) {
+      offset = maxHeight - totalHeight;
+    }
 
-    for (let i = 0; i < orderedRows.length; i++) {
-      let row = orderedRows[i];
+    for (let i = 0; i < rows.length; i++) {
+      // Work top-down (index order) for 'top', bottom-up (reverse index
+      // order) for 'bottom' rows
+      let row = rows[this.side === 'top' ? i : rows.length - 1 - i];
       let height = heights[i];
 
       for (let child of row.children) {
diff --git a/tests/unit/-private/table-sticky-polyfill-test.js b/tests/unit/-private/table-sticky-polyfill-test.js
@@ -9,6 +9,13 @@ import wait from 'ember-test-helpers/wait';
 
 import { setupTableStickyPolyfill } from 'ember-table/-private/sticky/table-sticky-polyfill';
 
+const HEADER_PIXEL_EPSILON = 10;
+const FOOTER_PIXEL_EPSILON = 10;
+
+function isNearTo(value, expected, epsilon = 0.01) {
+  return Math.abs(value - expected) <= epsilon;
+}
+
 const standardTemplate = hbs`
   <div style="height: 500px;">
     <div class="ember-table">
@@ -45,14 +52,14 @@ const standardTemplate = hbs`
   </div>
 `;
 
-function constructMatrix(n, m) {
+function constructMatrix(n, m, prefix = '') {
   let rows = emberA();
 
   for (let i = 0; i < n; i++) {
     let cols = emberA();
 
     for (let j = 0; j < m; j++) {
-      cols.pushObject(m);
+      cols.pushObject(`${m}${prefix}`);
     }
 
     rows.pushObject(cols);
@@ -70,7 +77,7 @@ function verifyHeader(assert) {
       let cellRect = cell.getBoundingClientRect();
       let containerRect = find('.ember-table').getBoundingClientRect();
 
-      assert.ok(Math.abs(cellRect.top - containerRect.top - expectedOffset) < 10);
+      assert.ok(Math.abs(cellRect.top - containerRect.top - expectedOffset) < HEADER_PIXEL_EPSILON);
     }
   });
 }
@@ -86,16 +93,18 @@ function verifyFooter(assert) {
         let cellRect = cell.getBoundingClientRect();
         let containerRect = find('.ember-table').getBoundingClientRect();
 
-        assert.ok(Math.abs(containerRect.bottom - cellRect.bottom - expectedOffset) < 10);
+        assert.ok(
+          Math.abs(containerRect.bottom - cellRect.bottom - expectedOffset) < FOOTER_PIXEL_EPSILON
+        );
       }
     });
 }
 
 componentModule('Unit | Private | TableStickyPolyfill', function() {
   test('it works', async function(assert) {
-    this.set('headerRows', constructMatrix(3, 3));
-    this.set('bodyRows', constructMatrix(20, 3));
-    this.set('footerRows', constructMatrix(3, 3));
+    this.set('headerRows', constructMatrix(3, 3, 'thead'));
+    this.set('bodyRows', constructMatrix(20, 3, 'tbody'));
+    this.set('footerRows', constructMatrix(3, 3, 'tfoot'));
 
     await this.render(standardTemplate);
 
@@ -175,4 +184,113 @@ componentModule('Unit | Private | TableStickyPolyfill', function() {
     verifyHeader(assert);
     verifyFooter(assert);
   });
+
+  test('maxStickyProportion: when the footer is > 50% of the height', async function(assert) {
+    let maxStickyProportion = 0.5;
+    this.set('headerRows', constructMatrix(3, 3, 'header'));
+    this.set('bodyRows', constructMatrix(30, 3, 'body'));
+    this.set('footerRows', constructMatrix(30, 3, 'footer'));
+
+    await this.render(standardTemplate);
+
+    setupTableStickyPolyfill(find('thead'));
+    setupTableStickyPolyfill(find('tfoot'));
+
+    await wait();
+
+    let firstCell = find('tfoot tr:first-child td:first-child');
+    let lastCell = find('tfoot tr:last-child td:first-child');
+    let container = find('.ember-table');
+
+    let firstCellRect = firstCell.getBoundingClientRect();
+    let lastCellRect = lastCell.getBoundingClientRect();
+    let containerRect = container.getBoundingClientRect();
+
+    assert.ok(
+      find('tfoot').getBoundingClientRect().height > maxStickyProportion * containerRect.height,
+      'precond - footer is > 50% of the table height'
+    );
+
+    assert.ok(
+      isNearTo((firstCellRect.top - containerRect.top) / containerRect.height, maxStickyProportion),
+      'the top of the first footer cell is close to 50% of the way up the table'
+    );
+
+    assert.ok(
+      isNearTo(
+        (containerRect.bottom - firstCellRect.top) / containerRect.height,
+        maxStickyProportion
+      ),
+      'the top of the first footer cell is close to 50% of the way down the table'
+    );
+
+    assert.ok(lastCellRect.top > containerRect.bottom, 'last footer cell is out of view');
+
+    await scrollTo('.ember-table', 0, container.scrollHeight);
+
+    // Recompute dimensions
+    lastCellRect = lastCell.getBoundingClientRect();
+    containerRect = container.getBoundingClientRect();
+
+    assert.equal(
+      lastCellRect.bottom,
+      containerRect.bottom,
+      'after scroll, last footer cell is at bottom of table'
+    );
+  });
+
+  test('maxStickyProportion: when the header > 50% of the height', async function(assert) {
+    let maxStickyProportion = 0.5;
+    this.set('headerRows', constructMatrix(30, 3, 'header'));
+    this.set('bodyRows', constructMatrix(30, 3, 'body'));
+    this.set('footerRows', constructMatrix(3, 3, 'footer'));
+
+    await this.render(standardTemplate);
+
+    setupTableStickyPolyfill(find('thead'));
+    setupTableStickyPolyfill(find('tfoot'));
+
+    await wait();
+
+    let firstCell = find('thead tr:first-child th:first-child');
+    let lastCell = find('thead tr:last-child th:first-child');
+    let container = find('.ember-table');
+
+    let firstCellRect = firstCell.getBoundingClientRect();
+    let lastCellRect = lastCell.getBoundingClientRect();
+    let containerRect = container.getBoundingClientRect();
+
+    assert.ok(
+      find('thead').getBoundingClientRect().height > maxStickyProportion * containerRect.height,
+      'precond - header is > 50% of the table height'
+    );
+
+    assert.equal(
+      firstCellRect.top,
+      containerRect.top,
+      'top of first header cell is at top of table'
+    );
+    assert.ok(lastCellRect.top > containerRect.bottom, 'last header cell is out of view');
+
+    await scrollTo('.ember-table', 0, container.scrollHeight);
+
+    // recompute dimensions
+    lastCellRect = lastCell.getBoundingClientRect();
+    containerRect = container.getBoundingClientRect();
+
+    assert.ok(
+      isNearTo(
+        (lastCellRect.bottom - containerRect.top) / containerRect.height,
+        maxStickyProportion
+      ),
+      'the bottom of the last header cell is close to 50% of the way up the table'
+    );
+    assert.ok(
+      isNearTo(
+        (containerRect.bottom - lastCellRect.bottom) / containerRect.height,
+        maxStickyProportion
+      ),
+      'the bottom of the last header cell is close to 50% of the way down the table'
+    );
+  });
 });
