feat(igxSplitter): Make whole splitter bar draggable. Utilize new igxDrag properties - igxDragIgnore, dragDirection.

Author: MKirova

projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html

@@ -2,10 +2,11 @@
     [class.igx-splitter-bar--vertical]='type === 0'
     igxDrag
     [ghost]="false"
+    [dragDirection]='dragDir'
     (dragStart)='onDragStart($event)'
     (dragMove)="onDragMove($event)"
 >
-    <div class="igx-splitter-bar__expander--start" (click)='onCollapsing(false)' [hidden]='prevButtonHidden'></div>
-    <div class="igx-splitter-bar__handle" igxDragHandle></div>
-    <div class="igx-splitter-bar__expander--end" (click)='onCollapsing(true)' [hidden]='nextButtonHidden'></div>
+    <div class="igx-splitter-bar__expander--start" igxDragIgnore (click)='onCollapsing(false)' [hidden]='prevButtonHidden'></div>
+    <div class="igx-splitter-bar__handle" ></div>
+    <div class="igx-splitter-bar__expander--end" igxDragIgnore (click)='onCollapsing(true)' [hidden]='nextButtonHidden'></div>
 </div>

projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, HostBinding, EventEmitter, Output } from '@angular/core';
 import { SplitterType } from '../splitter.component';
 import { IgxSplitterPaneComponent } from '../splitter-pane/splitter-pane.component';
-import { IDragMoveEventArgs, IDragStartEventArgs } from '../../directives/drag-drop/drag-drop.directive';
+import { IDragMoveEventArgs, IDragStartEventArgs, DragDirection } from '../../directives/drag-drop/drag-drop.directive';
 
 /**
  * Provides reference to `SplitBarComponent` component.
@@ -77,6 +77,13 @@ export class IgxSplitBarComponent {
         return this.siblings[0].hidden && !this.siblings[1].hidden;
     }
 
+    /**
+     * @hidden @internal
+     */
+    public get dragDir() {
+        return this.type === SplitterType.Horizontal ? DragDirection.VERTICAL : DragDirection.HORIZONTAL;
+    }
+
     /**
      * @hidden @internal
      */
@@ -95,13 +102,8 @@ export class IgxSplitBarComponent {
     public onDragMove(event: IDragMoveEventArgs) {
         const isHorizontal = this.type === SplitterType.Horizontal;
         const curr =  isHorizontal ? event.pageX : event.pageY;
-        if (isHorizontal) {
-            event.nextPageY = event.pageY;
-        } else {
-            event.nextPageX = event.pageX;
-        }
         const delta = this.startPoint - curr;
-        if (delta !== 0 ) {
+        if (delta !== 0) {
             this.moving.emit(delta);
             event.cancel = true;
             event.owner.element.nativeElement.style.transform = '';