Resize column > touch support

src/app/public/modules/grid/grid.component.html

@@ -56,7 +56,9 @@
               role="separator"
               tabindex="-1"
               [attr.sky-cmp-index]="i"
-              (mousedown)="onMouseDownResizeCol($event)">
+              (mousedown)="onResizeColumnStart($event)"
+              (touchstart)="onResizeColumnStart($event)"
+            >
             </span>
             <input
               aria-label="Width of column"

src/app/public/modules/grid/grid.component.spec.ts

@@ -152,6 +152,29 @@ function resizeColumn(fixture: ComponentFixture<any>, deltaX: number, columnInde
   fixture.detectChanges();
 }
 
+function resizeColumnWithTouch(fixture: ComponentFixture<any>, deltaX: number, columnIndex: number) {
+  const resizeHandles = getColumnResizeHandles(fixture);
+  let axis = getElementCords(resizeHandles[columnIndex]);
+  let event = {
+    target: resizeHandles[columnIndex].nativeElement,
+    'pageX': axis.x,
+    'preventDefault': function () { },
+    'stopPropagation': function () { }
+  };
+
+  resizeHandles[columnIndex].triggerEventHandler('touchstart', event);
+  fixture.detectChanges();
+
+  let evt = document.createEvent('UIEvent');
+  evt.initUIEvent('touchmove', false, false, window, axis.x + deltaX);
+  document.dispatchEvent(evt);
+  fixture.detectChanges();
+  evt = document.createEvent('UIEvent');
+  evt.initUIEvent('touchend', false, false, window, axis.x + deltaX);
+  document.dispatchEvent(evt);
+  fixture.detectChanges();
+}
+
 function resizeColumnByRangeInput(fixture: ComponentFixture<any>, columnIndex: number, deltaX: number) {
   const resizeInputs = getColumnRangeInputs(fixture);
   SkyAppTestUtility.fireDomEvent(resizeInputs[columnIndex].nativeElement, 'keydown', {
@@ -929,7 +952,7 @@ describe('Grid Component', () => {
       }));
 
       it('should resize columns on mousemove', fakeAsync(() => {
-        const spy = spyOn(fixture.componentInstance.grid, 'onMouseMove').and.callThrough();
+        const spy = spyOn(fixture.componentInstance.grid, 'onResizeHandleMove').and.callThrough();
         // Get initial baseline for comparison.
         let initialTableWidth = getTableWidth(fixture);
         let initialColumnWidths = getColumnWidths(fixture);
@@ -955,7 +978,7 @@ describe('Grid Component', () => {
       }));
 
       it('should not resize on mousemove unless the resize handle was clicked', fakeAsync(() => {
-        const spy = spyOn(fixture.componentInstance.grid, 'onMouseMove').and.callThrough();
+        const spy = spyOn(fixture.componentInstance.grid, 'onResizeHandleMove').and.callThrough();
         // Get initial baseline for comparison.
         let initialTableWidth = getTableWidth(fixture);
         let initialColumnWidths = getColumnWidths(fixture);
@@ -988,6 +1011,20 @@ describe('Grid Component', () => {
         let expectedColumnInputs = getColumnResizeInputMaxValues(fixture);
         expect(initialMaxValues).not.toEqual(expectedColumnInputs);
       }));
+
+      it('should support touch events', fakeAsync(() => {
+        const startSpy = spyOn(fixture.componentInstance.grid, 'onResizeColumnStart').and.callThrough();
+        const moveSpy = spyOn(fixture.componentInstance.grid, 'onResizeHandleMove').and.callThrough();
+        const releaseSpy = spyOn(fixture.componentInstance.grid, 'onResizeHandleRelease').and.callThrough();
+
+        // Resize first column with touch event.
+        resizeColumnWithTouch(fixture, 50, 0);
+
+        // Assert spys were called.
+        expect(startSpy).toHaveBeenCalled();
+        expect(moveSpy).toHaveBeenCalled();
+        expect(releaseSpy).toHaveBeenCalled();
+      }));
     });
   });
 

src/app/public/modules/grid/grid.component.ts

@@ -41,6 +41,8 @@ import 'rxjs/add/operator/distinctUntilChanged';
 
 import 'rxjs/add/operator/map';
 
+import 'rxjs/add/observable/merge';
+
 import 'rxjs/add/operator/take';
 
 import 'rxjs/add/operator/takeWhile';
@@ -421,7 +423,7 @@ export class SkyGridComponent implements OnInit, AfterContentInit, OnChanges, On
     }
   }
 
-  public onMouseDownResizeCol(event: MouseEvent) {
+  public onResizeColumnStart(event: MouseEvent): void {
     // If this table hasn't been resized, initialize all the resize widths.
     if (!this.isResized) {
       this.initColumnWidths();
@@ -443,22 +445,26 @@ export class SkyGridComponent implements OnInit, AfterContentInit, OnChanges, On
     event.preventDefault();
     event.stopPropagation();
 
-    Observable
-      .fromEvent(document, 'mousemove')
+    const mouseMoveEvent = Observable.fromEvent(document, 'mousemove');
+    const touchMoveEvent = Observable.fromEvent(document, 'touchmove');
+
+    Observable.merge(mouseMoveEvent, touchMoveEvent)
       .takeWhile(() => {
         return this.isDraggingResizeHandle;
       })
       .subscribe((moveEvent: any) => {
-        this.onMouseMove(moveEvent);
+        this.onResizeHandleMove(moveEvent);
       });
 
-    Observable
-      .fromEvent(document, 'mouseup')
+    const mouseUpEvent = Observable.fromEvent(document, 'mouseup');
+    const touchEndEvent = Observable.fromEvent(document, 'touchend');
+
+    Observable.merge(mouseUpEvent, touchEndEvent)
       .takeWhile(() => {
         return this.isDraggingResizeHandle;
       })
-      .subscribe((mouseUpEvent: any) => {
-        this.onResizeHandleRelease(mouseUpEvent);
+      .subscribe((endEvent: any) => {
+        this.onResizeHandleRelease(endEvent);
       });
   }
 
@@ -479,7 +485,7 @@ export class SkyGridComponent implements OnInit, AfterContentInit, OnChanges, On
     this.resizeColumnByIndex(this.activeResizeColumnIndex, newValue, deltaX);
   }
 
-  public onMouseMove(event: MouseEvent) {
+  public onResizeHandleMove(event: MouseEvent) {
     let deltaX = event.pageX - this.xPosStart;
     let newColWidth = this.startColumnWidth + deltaX;