Merge branch '8.1.x' into fix-for-5432-master

Lipata · web-flow · commit 0cce956f6abd · 2019-08-05T11:31:29.000+03:00
diff --git a/projects/igniteui-angular/src/lib/core/touch.ts b/projects/igniteui-angular/src/lib/core/touch.ts
@@ -20,11 +20,11 @@ export class HammerGesturesManager {
         inputClass: Hammer.TouchInput,
         recognizers: [
             [ Hammer.Pan, { threshold: 0 } ],
-            [ Hammer.Pinch, { enable: true } ],
-            [ Hammer.Rotate, { enable: true } ],
             [ Hammer.Swipe, {
                 direction: Hammer.DIRECTION_HORIZONTAL
-            }]
+            }],
+            [Hammer.Tap],
+            [Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']]
         ]
     };
 
@@ -44,14 +44,14 @@ export class HammerGesturesManager {
     public addEventListener(element: HTMLElement,
                             eventName: string,
                             eventHandler: (eventObj) => void,
-                            options: object = null): () => void {
+                            options: HammerOptions = null): () => void {
 
         // Creating the manager bind events, must be done outside of angular
         return this._zone.runOutsideAngular(() => {
             let mc: HammerManager = this.getManagerForElement(element);
             if (mc === null) {
                 // new Hammer is a shortcut for Manager with defaults
-                mc = new Hammer(element, this.hammerOptions);
+                mc = new Hammer(element, Object.assign(this.hammerOptions, options));
                 this.addManagerForElement(element, mc);
             }
             const handler = (eventObj) => { this._zone.run(() => { eventHandler(eventObj); }); };
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -23,6 +23,7 @@ import { State } from '../services/index';
 import { IgxGridBaseComponent, IGridEditEventArgs, IGridDataBindable } from './grid-base.component';
 import { IgxGridSelectionService, ISelectionNode, IgxGridCRUDService } from '../core/grid-selection';
 import { DeprecateProperty } from '../core/deprecateDecorators';
+import { HammerGesturesManager } from '../core/touch';
 
 /**
  * Providing reference to `IgxGridCellComponent`:
@@ -40,7 +41,8 @@ import { DeprecateProperty } from '../core/deprecateDecorators';
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-grid-cell',
-    templateUrl: './cell.component.html'
+    templateUrl: './cell.component.html',
+    providers: [HammerGesturesManager]
 })
 export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     private _vIndex = -1;
@@ -530,7 +532,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         public selection: IgxSelectionAPIService,
         public cdr: ChangeDetectorRef,
         private element: ElementRef,
-        protected zone: NgZone) { }
+        protected zone: NgZone,
+        private touchManager: HammerGesturesManager) { }
 
 
     /**
@@ -552,6 +555,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
                 this.nativeElement.addEventListener('compositionend', this.compositionEndHandler);
             }
         });
+        this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, {
+            cssProps: { } /* don't disable user-select, etc */
+        } as HammerOptions);
     }
 
     /**
@@ -569,6 +575,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
                 this.nativeElement.removeEventListener('compositionend', this.compositionEndHandler);
             }
         });
+        this.touchManager.destroy();
     }
 
     /**
@@ -716,7 +723,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * @internal
      */
     @HostListener('dblclick', ['$event'])
-    public onDoubleClick(event: MouseEvent) {
+    public onDoubleClick = (event: MouseEvent| HammerInput) => {
+        if (event.type === 'doubletap') {
+            // prevent double-tap to zoom on iOS
+            event.preventDefault();
+        }
         if (this.editable && !this.editMode && !this.row.deleted) {
             this.crudService.begin(this);
         }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts
@@ -8,6 +8,7 @@ import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
+import { HammerGesturesManager } from '../../core/touch';
 
 const DEBOUNCETIME = 30;
 
@@ -171,6 +172,7 @@ describe('IgxGrid - Cell component', () => {
 
         spyOn(grid.onDoubleClick, 'emit').and.callThrough();
         const event = new Event('dblclick');
+        spyOn(event, 'preventDefault');
         cellElem.nativeElement.dispatchEvent(event);
         const args: IGridCellEventArgs = {
             cell: firstCell,
@@ -179,6 +181,38 @@ describe('IgxGrid - Cell component', () => {
 
         fix.detectChanges();
 
+        expect(event.preventDefault).not.toHaveBeenCalled();
+        expect(grid.onDoubleClick.emit).toHaveBeenCalledWith(args);
+        expect(firstCell).toBe(fix.componentInstance.clickedCell);
+    });
+
+    it('Should handle doubletap, trigger onDoubleClick event', () => {
+        const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener');
+        const fix = TestBed.createComponent(DefaultGridComponent);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.instance;
+        const cellElem = fix.debugElement.query(By.css(CELL_CSS_CLASS));
+        const firstCell = grid.getCellByColumn(0, 'index');
+
+        // should attach 'doubletap'
+        expect(addListenerSpy.calls.count()).toBeGreaterThan(1);
+        expect(addListenerSpy).toHaveBeenCalledWith(firstCell.nativeElement, 'doubletap', firstCell.onDoubleClick, { cssProps: { } });
+
+        spyOn(grid.onDoubleClick, 'emit').and.callThrough();
+
+        const event = {
+            type: 'doubletap',
+            preventDefault: jasmine.createSpy('preventDefault')
+        };
+        firstCell.onDoubleClick(event as any);
+        const args: IGridCellEventArgs = {
+            cell: firstCell,
+            event
+        } as any;
+
+        fix.detectChanges();
+        expect(event.preventDefault).toHaveBeenCalled();
         expect(grid.onDoubleClick.emit).toHaveBeenCalledWith(args);
         expect(firstCell).toBe(fix.componentInstance.clickedCell);
     });
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts
@@ -5,12 +5,14 @@ import { ChangeDetectorRef, ElementRef, ChangeDetectionStrategy, Component,
 import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
 import { IgxHierarchicalSelectionAPIService } from './selection';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-selection';
+import { HammerGesturesManager } from '../../core/touch';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     preserveWhitespaces: false,
     selector: 'igx-hierarchical-grid-cell',
-    templateUrl: './../cell.component.html'
+    templateUrl: './../cell.component.html',
+    providers: [HammerGesturesManager]
 })
 export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent implements OnInit {
 
@@ -25,8 +27,9 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple
         public cdr: ChangeDetectorRef,
         private helement: ElementRef,
         protected zone: NgZone,
+        touchManager: HammerGesturesManager
         ) {
-            super(selectionService, crudService, gridAPI, selection, cdr, helement, zone);
+            super(selectionService, crudService, gridAPI, selection, cdr, helement, zone, touchManager);
             this.hSelection = <IgxHierarchicalSelectionAPIService>selection;
          }
 
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts
@@ -292,35 +292,41 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
                 } else {
                     this.focusNextChildDOMElem(currentRowEl, this.grid);
                 }
+            } else if (this.grid.parent && this.grid.parent.summariesRowList.length > 0) {
+               this._navigateToNextParentRow(currentRowEl);
             } else {
                 this.navigateDown(currentRowEl, { row: rowIndex, column: 0 });
             }
         } else if (isLastSummaryRow && isLastColumn && this.grid.parent) {
-            // navigating in child summary, next is parent summary or next parent row
-            const parent = this.grid.parent;
-            const parentHasSummary = parent.summariesRowList.toArray().length > 0;
-            const parentRowIndex = parseInt(
-                this.getClosestElemByTag(currentRowEl, 'igx-child-grid-row').parentNode.getAttribute('data-rowindex'), 10);
-            const isLastRowInParent = parent.verticalScrollContainer.igxForOf.length - 1 === parentRowIndex;
-            // check if next is sibling
-            const childRowContainer = this.getChildGridRowContainer(this.grid);
-            const nextIsSiblingChild = !!childRowContainer.nextElementSibling;
-            if (isLastRowInParent && parentHasSummary && !nextIsSiblingChild) {
-                // next is parent summary
-                const parentSummary = parent.summariesRowList.toArray()[0].nativeElement;
-                parent.navigation.focusNextRow(parentSummary, 0, this.grid.rootGrid, true);
-            } else {
-                // next is sibling or parent
-                this.focusNext(0);
-            }
-        } else if (isLastDataRow && hasSummaries && isLastColumn && this.grid.parent) {
+            this._navigateToNextParentRow(currentRowEl);
+        } else  if (isLastDataRow && hasSummaries && isLastColumn && this.grid.parent) {
             // navigating in child rows, next is child grid's summary row
-            this.focusNextRow(summaryRows[0].nativeElement, 0, this.grid.parent, true);
+           this.focusNextRow(summaryRows[0].nativeElement, 0, this.grid.parent, true);
         } else {
             super.performTab(currentRowEl, selectedNode);
         }
     }
 
+    private _navigateToNextParentRow(currentRowEl: any): void {
+         // next is parent summary or next parent row
+         const parent = this.grid.parent;
+         const parentHasSummary = parent.summariesRowList.length > 0;
+         const parentRowIndex = parseInt(
+            this.getClosestElemByTag(currentRowEl, 'igx-child-grid-row').parentNode.getAttribute('data-rowindex'), 10);
+         const isLastRowInParent = parent.verticalScrollContainer.igxForOf.length - 1 === parentRowIndex;
+         // check if next is sibling
+         const childRowContainer = this.getChildGridRowContainer(this.grid);
+         const nextIsSiblingChild = !!childRowContainer.nextElementSibling;
+         if (isLastRowInParent && parentHasSummary && !nextIsSiblingChild) {
+             // next is parent summary
+             const parentSummary = parent.summariesRowList.first.nativeElement;
+             parent.navigation.focusNextRow(parentSummary, 0, parent, true);
+         } else {
+             // next is sibling or parent
+             this.focusNext(0);
+         }
+    }
+
     private focusNextChildDOMElem(currentRowEl, grid) {
         const gridElem = currentRowEl.nextElementSibling.querySelector('igx-hierarchical-grid');
         const childGridID = gridElem.getAttribute('id');
@@ -443,21 +449,41 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
 
     private performShiftTabIntoChild(gridElem, currentRowEl, rowIndex) {
         const childGridID = gridElem.getAttribute('id');
-        const childGrid = this.getChildGrid(childGridID, this.grid) || this.getChildGrid(childGridID, this.grid.parent);
-        const lastIndex = childGrid.unpinnedColumns[childGrid.unpinnedColumns.length - 1].visibleIndex;
-        const summaryRows = childGrid.summariesRowList.toArray();
-        if (summaryRows.length > 0 && summaryRows[0].summaryCells.length > 0) {
-            // move focus to last summary row cell
-            const summaryRow = summaryRows[0].nativeElement;
-            this.focusPrevRow(summaryRow, lastIndex, childGrid, true, true);
-        } else if (childGrid.rowList.toArray().length === 0 &&
-            childGrid.allowFiltering && childGrid.filterMode === FilterMode.quickFilter) {
-            // move to filter cell
-            childGrid.navigation.moveFocusToFilterCell();
-        } else {
-            // move to next cell
-            this.navigateUp(currentRowEl, { row: rowIndex, column: lastIndex });
+            const childGrid = this.getChildGrid(childGridID, this.grid) || this.getChildGrid(childGridID, this.grid.parent);
+            const lastIndex = childGrid.unpinnedColumns[childGrid.unpinnedColumns.length - 1].visibleIndex;
+            const summaryRows = childGrid.summariesRowList.toArray();
+            if (summaryRows.length > 0 && summaryRows[0].summaryCells.length > 0) {
+                // move focus to last summary row cell
+                const summaryRow = summaryRows[0].nativeElement;
+                this.focusPrevRow(summaryRow, lastIndex, childGrid, true, true);
+            } else if (childGrid.rowList.toArray().length === 0 &&
+             childGrid.allowFiltering && childGrid.filterMode === FilterMode.quickFilter) {
+                 // move to filter cell
+                childGrid.navigation.moveFocusToFilterCell();
+            } else if (childGrid.rowList.length === 0) {
+                // move to prev child or parent row
+                const prevChild = this.getSibling(childGrid);
+                if (prevChild) {
+                    this.performShiftTabIntoChild(prevChild, currentRowEl, rowIndex);
+                } else {
+                    const selNode = {
+                        row:  rowIndex,
+                        column: this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex
+                    };
+                    this.navigateUp(currentRowEl, selNode);
+                }
+            } else {
+                // move to prev cell
+                childGrid.navigation.goToLastCell();
+            }
+    }
+
+    private getSibling(childGrid) {
+        const prevChildRow = childGrid.childRow.nativeElement.previousElementSibling;
+        if (prevChildRow) {
+            return prevChildRow.children[0].children[0];
         }
+        return null;
     }
 
     private focusNextChild(elem, visibleColumnIndex, grid) {
@@ -711,7 +737,12 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
         grid.parentVirtDir.onChunkLoad
             .pipe(first())
             .subscribe(callBackFunc);
-        grid.dataRowList.toArray()[0].virtDirRow.scrollTo(unpinnedIndex);
+        if (grid.dataRowList.length > 0) {
+            grid.dataRowList.first.virtDirRow.scrollTo(unpinnedIndex);
+        } else {
+            grid.headerContainer.scrollTo(unpinnedIndex);
+        }
+
     }
     private scrollGrid(grid, target, callBackFunc) {
         this.getFocusableGrid().nativeElement.focus({preventScroll: true});
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts
@@ -7,11 +7,13 @@ import { getNodeSizeViaRange } from '../../core/utils';
 import { DOCUMENT } from '@angular/common';
 import { IgxGridBaseComponent, IGridDataBindable } from '../grid';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-selection';
+import { HammerGesturesManager } from '../../core/touch';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-tree-grid-cell',
-    templateUrl: 'tree-cell.component.html'
+    templateUrl: 'tree-cell.component.html',
+    providers: [HammerGesturesManager]
 })
 export class IgxTreeGridCellComponent extends IgxGridCellComponent implements OnInit {
     private treeGridAPI: IgxTreeGridAPIService;
@@ -24,8 +26,9 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent implements On
                 cdr: ChangeDetectorRef,
                 element: ElementRef,
                 protected zone: NgZone,
+                touchManager: HammerGesturesManager,
                 @Inject(DOCUMENT) public document) {
-        super(selectionService, crudService, gridAPI, selection, cdr, element, zone);
+        super(selectionService, crudService, gridAPI, selection, cdr, element, zone, touchManager);
         this.treeGridAPI = <IgxTreeGridAPIService>gridAPI;
     }
 
diff --git a/src/app/virtual-for-directive/virtual-for.sample.ts b/src/app/virtual-for-directive/virtual-for.sample.ts
@@ -196,7 +196,7 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
         if (this.itemSize === '50px') {
             this.itemSize = '100px';
         } else {
-            this.itemSize = "50px";
+            this.itemSize = '50px';
         }
 
     }

Original file line number	Diff line number	Diff line change
`@@ -196,7 +196,7 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {`
`196`	`196`	`if (this.itemSize === '50px') {`
`197`	`197`	`this.itemSize = '100px';`
`198`	`198`	`} else {`
`199`		`- this.itemSize = "50px";`
	`199`	`+ this.itemSize = '50px';`
`200`	`200`	`}`
`201`	`201`
`202`	`202`	`}`