Merge branch 'vaadin-master'

.travis.yml

@@ -1,18 +1,19 @@
 sudo: false
-dist: trusty
+dist: xenial
 language: node_js
 node_js: 8.11
 
 before_install:
-  - "export DISPLAY=:99.0"
-  - "sh -e /etc/init.d/xvfb start"
   - "sudo apt-get -qq update"
   - "sudo apt-get install -y matchbox-window-manager"
 
 install:
   - matchbox-window-manager&
   - sleep 5
 
+services:
+  - xvfb
+
 cache:
   directories:
     - node_modules

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-grid",
-  "version": "5.4.6",
+  "version": "5.5.0",
   "description": "A free, flexible and high-quality Web Component for showing large amounts of tabular data",
   "main": "vaadin-grid.html",
   "author": "Vaadin Ltd",

src/vaadin-grid-column-group.html

@@ -127,7 +127,13 @@
         }
 
         _groupOrderChanged(order, rootColumns) {
-          if (order && rootColumns) {
+          if (rootColumns) {
+            const _rootColumns = rootColumns.slice(0);
+
+            if (!order) {
+              _rootColumns.forEach(column => column._order = 0);
+              return;
+            }
             // The parent column order number cascades downwards to it's children
             // so that the resulting order numbering constructs as follows:
             // [             1000              ]
@@ -144,7 +150,7 @@
             // Final scope for the child columns needs to mind both factors.
             const scope = Math.pow(10, trailingZeros - childCountDigits);
 
-            const _rootColumns = rootColumns.slice(0);
+
             if (_rootColumns[0] && _rootColumns[0]._order) {
               _rootColumns.sort((a, b) => a._order - b._order);
             }

src/vaadin-grid-column-reordering-mixin.html

@@ -254,6 +254,8 @@
         return;
       }
 
+      // Reset all column orders
+      columnTree[0].forEach((column, index) => column._order = 0);
       // Set order numbers to top-level columns
       columnTree[0].forEach((column, index) => column._order = (index + 1) * this._orderBaseScope);
     }
@@ -325,5 +327,12 @@
       }
     }
 
+    /**
+     * Fired when the columns in the grid are reordered.
+     *
+     * @event column-reorder
+     * @param {Object} detail
+     * @param {Object} detail.columns the columns in the new order
+     */
   };
 </script>

src/vaadin-grid-column-resizing-mixin.html

@@ -74,12 +74,22 @@
 
         if (e.detail.state === 'end') {
           this._toggleAttribute('column-resizing', false, this.$.scroller);
+          this.dispatchEvent(new CustomEvent('column-resize', {
+            detail: {resizedColumn: column}
+          }));
         }
 
         // Notify resize
         this._resizeHandler();
       }
     }
 
+    /**
+    * Fired when a column in the grid is resized by the user.
+    *
+    * @event column-resize
+    * @param {Object} detail
+    * @param {Object} detail.resizedColumn the column that was resized
+    */
   };
 </script>

src/vaadin-grid-scroll-mixin.html

@@ -64,10 +64,42 @@
 
     static get observers() {
       return [
-        '_scrollHeightUpdated(_estScrollHeight)'
+        '_scrollHeightUpdated(_estScrollHeight)',
+        '_scrollViewportHeightUpdated(_viewportHeight)'
       ];
     }
 
+    // Override (from iron-scroll-target-behavior) to avoid document scroll
+    set _scrollTop(top) {
+      this.$.table.scrollTop = top;
+    }
+
+    get _scrollTop() {
+      return this.$.table.scrollTop;
+    }
+
+    constructor() {
+      super();
+      this._scrollLineHeight = this._getScrollLineHeight();
+    }
+
+    /**
+     * @returns {Number|undefined} - The browser's default font-size in pixels
+     */
+    _getScrollLineHeight() {
+      const el = document.createElement('div');
+      el.style.fontSize = 'initial';
+      el.style.display = 'none';
+      document.body.appendChild(el);
+      const fontSize = window.getComputedStyle(el).fontSize;
+      document.body.removeChild(el);
+      return fontSize ? window.parseInt(fontSize) : undefined;
+    }
+
+    _scrollViewportHeightUpdated(_viewportHeight) {
+      this._scrollPageHeight = _viewportHeight - this.$.header.clientHeight - this.$.footer.clientHeight - this._scrollLineHeight;
+    }
+
     ready() {
       super.ready();
       this.scrollTarget = this.$.table;
@@ -95,17 +127,31 @@
       this.$.items.addEventListener('focusout', () => this._rowWithFocusedElement = undefined);
     }
 
+    /**
+     * Scroll to a specific row index in the virtual list. Note that the row index is
+     * not always the same for any particular item. For example, sorting/filtering/expanding
+     * or collapsing hierarchical items can affect the row index related to an item.
+     *
+     * @param {number} index Row index to scroll to
+     */
+    scrollToIndex(index) {
+      this._accessIronListAPI(() => super.scrollToIndex(index));
+    }
+
     _onWheel(e) {
       if (e.ctrlKey || this._hasScrolledAncestor(e.target, e.deltaX, e.deltaY)) {
         return;
       }
 
-      var table = this.$.table;
+      const table = this.$.table;
 
-      var deltaY = e.deltaY;
-      if (e.deltaMode === 1) {
-        // Mode 1 == scrolling by lines instead of pixels
-        deltaY *= this._physicalAverage;
+      let deltaY = e.deltaY;
+      if (e.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+        // Scrolling by "lines of text" instead of pixels
+        deltaY *= this._scrollLineHeight;
+      } else if (e.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+        // Scrolling by "pages" instead of pixels
+        deltaY *= this._scrollPageHeight;
       }
 
       if (this._wheelAnimationFrame) {

src/vaadin-grid-styles.html

@@ -328,6 +328,10 @@
       [ios][scrolling] #outerscroller {
         z-index: 0;
       }
+
+      [ios] [frozen] {
+        will-change: auto;
+      }
     `;
     VaadinGridStyles.querySelector('template').content.appendChild(scrollingStyles);
   }

src/vaadin-grid-styling-mixin.html

@@ -21,7 +21,7 @@
          * characters.
          *
          * Receives two arguments:
-         * - `column` The `<vaadin-grid-column>` element.
+         * - `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).
          * - `rowData` The object with the properties related with
          *   the rendered item, contains:
          *   - `rowData.index` The index of the item.

src/vaadin-grid.html

@@ -339,7 +339,7 @@
       }
 
       static get version() {
-        return '5.4.6';
+        return '5.5.0';
       }
 
       static get observers() {
@@ -365,7 +365,8 @@
 
           _ios: {
             type: Boolean,
-            value: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
+            value: (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)
+              || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
           },
 
           _edge: {

test/app-localize-behavior.html

@@ -72,7 +72,7 @@
           beforeEach(function(done) {
             container = fixture('grid');
             grid = container.$.grid;
-            container.addEventListener('app-localize-resources-loaded', () => done());
+            listenOnce(container, 'app-localize-resources-loaded', () => done());
           });
 
           it('should localize', () => {

test/array-data-provider.html

@@ -238,7 +238,7 @@
           const _warn = console.warn;
           const spy = console.warn = sinon.spy();
 
-          filter.addEventListener('filter-changed', e => {
+          listenOnce(filter, 'filter-changed', e => {
             setTimeout(() => {
               console.warn = _warn;
               expect(spy.called).to.be.true;
@@ -253,7 +253,7 @@
           const _warn = console.warn;
           const spy = console.warn = sinon.spy();
 
-          filter.addEventListener('filter-changed', e => {
+          listenOnce(filter, 'filter-changed', e => {
             setTimeout(() => {
               console.warn = _warn;
               expect(spy.called).to.be.false;
@@ -268,7 +268,7 @@
           const _warn = console.warn;
           const spy = console.warn = sinon.spy();
 
-          filter.addEventListener('filter-changed', e => {
+          listenOnce(filter, 'filter-changed', e => {
             setTimeout(() => {
               console.warn = _warn;
               expect(spy.called).to.be.false;

test/class-name-generator.html

@@ -73,6 +73,16 @@
         assertClassList(getContainerCell(grid.$.items, 10, 0), ['10', 'foo10', 'col0']);
       });
 
+      it('should be called for details cell with undefined column', done => {
+        grid.rowDetailsRenderer = (root, grid, rowData) => {};
+        grid.cellClassNameGenerator = (column, rowData) =>
+          rowData.index + ' ' + column;
+        requestAnimationFrame(() => {
+          assertClassList(getContainerCell(grid.$.items, 0, 2), ['0', 'undefined']);
+          done();
+        });
+      });
+
       it('should add classes when loading new items', function(done) {
         grid.cellClassNameGenerator = (column, rowData) => rowData.item.value;
         scrollToEnd(grid, () => {

test/column-reordering.html

@@ -431,7 +431,7 @@
         });
 
         it('should fire `column-reorder` event with columns', done => {
-          grid.addEventListener('column-reorder', e => {
+          listenOnce(grid, 'column-reorder', e => {
             expect(e.detail.columns.map(column => column.getAttribute('index'))).to.eql(['2', '1', '3', '4']);
             done();
           });
@@ -550,6 +550,46 @@
         expectVisualOrder(grid, [21, 22, 12, 11]);
       });
 
+      describe('physical reordering', () => {
+
+        let groups;
+
+        beforeEach(() => {
+          groups = Array.from(grid.querySelectorAll('vaadin-grid-column-group'));
+        });
+
+        it('should reflect the physically reordered columns order', () => {
+          grid.insertBefore(groups[1], groups[0]);
+          flushGrid(grid);
+          expectVisualOrder(grid, [21, 22, 11, 12]);
+        });
+
+        it('should reflect the physically reordered child columns order', done => {
+          const columns = groups[0].querySelectorAll('vaadin-grid-column');
+          groups[0].insertBefore(columns[1], columns[0]);
+          flush(() => {
+            expectVisualOrder(grid, [12, 11, 21, 22]);
+            done();
+          });
+        });
+
+        it('should reset drag orders on physical order', done => {
+          dragAndDropOver(
+            getVisualHeaderCellContent(grid, 1, 2),
+            getVisualHeaderCellContent(grid, 1, 3)
+          );
+          expectVisualOrder(grid, [11, 12, 22, 21]);
+          const columns = groups[0].querySelectorAll('vaadin-grid-column');
+
+          groups[0].insertBefore(columns[1], columns[0]);
+          flush(() => {
+            expectVisualOrder(grid, [12, 11, 21, 22]);
+            done();
+          });
+        });
+
+      });
+
     });
 
     describe('reordering grid with different column widths', () => {

test/column-resizing.html

@@ -210,6 +210,20 @@
         expect(spy.called).to.be.true;
       });
 
+      it('should fire column-resize event on column resize', done => {
+        listenOnce(grid, 'column-resize', (event) => {
+          expect(event.detail.resizedColumn).to.equal(grid._getColumns()[0]);
+          done();
+        });
+
+        const options = {node: handle};
+        const rect = headerCells[0].getBoundingClientRect();
+
+        fire('track', {state: 'start'}, options);
+        fire('track', {state: 'track', x: rect.left + 200, y: 0}, options);
+        fire('track', {state: 'end'}, options);
+      });
+
       it('should prevent default mousedown action on resize handle', () => {
         const event = new CustomEvent('mousedown', {bubbles: true, cancelable: true, composed: true});
         handle.dispatchEvent(event);

test/filtering.html

@@ -84,7 +84,7 @@
       });
 
       it('should fire `filter-changed` on value change', done => {
-        filter.addEventListener('filter-changed', e => done());
+        listenOnce(filter, 'filter-changed', e => done());
 
         filter.value = 'foo';
       });
@@ -93,12 +93,12 @@
         filter.value = 'foo';
         filter._debouncerFilterChanged.flush();
 
-        filter.addEventListener('filter-changed', e => done());
+        listenOnce(filter, 'filter-changed', e => done());
         filter.path = 'bar';
       });
 
       it('should update value', done => {
-        filter.addEventListener('filter-changed', e => {
+        listenOnce(filter, 'filter-changed', e => {
           expect(filter.value).to.eql('foo');
           done();
         });

test/iron-list.html

@@ -48,9 +48,8 @@
         const spy = console.warn = sinon.spy();
         grid.firstVisibleIndex;
         grid.lastVisibleIndex;
-        grid.scrollToIndex(2);
         console.warn = _warn;
-        expect(spy.callCount).to.be.above(2);
+        expect(spy.callCount).to.be.above(1);
       });
 
     });