Merge pull request #79 from Alessy/drag-handle

feat: (draghandle) drag handle implementation

Author: nivekcode

projects/ng-sortgrid-demo/src/app/introduction/examples/drag-handle/drag-handle.component.css

@@ -0,0 +1,30 @@
+.example-box {
+  width: 200px;
+  height: 200px;
+  padding: 10px;
+  box-sizing: border-box;
+  border: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: #fff;
+  border-radius: 4px;
+  position: relative;
+  z-index: 1;
+  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+              0 2px 2px 0 rgba(0, 0, 0, 0.14),
+              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+.example-handle {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: #ccc;
+  cursor: move;
+  width: 24px;
+  height: 24px;
+}

projects/ng-sortgrid-demo/src/app/introduction/examples/drag-handle/drag-handle.component.html

@@ -0,0 +1,19 @@
+<h5 style="margin-bottom: 20px">1. Drag the items around using handle</h5>
+
+<div class="example-container">
+  <div *ngFor="let item of items"
+    ngSortgridItem
+    [ngSortGridItems]="items"
+    class="example-box">
+
+    <h1 style="color: darkslategray">
+      {{ item }}
+    </h1>
+
+    <div class="example-handle" ngSortgridDragHandle>
+      <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
+        <path d="M0 0h24v24H0z" fill="none"></path>
+      </svg>
+    </div>
+</div>

projects/ng-sortgrid-demo/src/app/introduction/examples/drag-handle/drag-handle.component.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngsg-demo-drag-handle',
+  templateUrl: 'drag-handle.component.html',
+  styleUrls: ['./drag-handle.component.css']
+})
+export class DragHandleComponent {
+
+  public items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+}
+

projects/ng-sortgrid-demo/src/app/introduction/introduction.component.html

@@ -36,4 +36,10 @@ <h1>5. Scrolling</h1>
 
   <button routerLink="scrolling" class="btn btn-primary" style="margin-bottom: 50px">Check out the demo...</button>
 
+  <hr class="chaptor-separator"/>
+
+  <h1>6. Customizing the drag area using a handle</h1>
+  <ngsg-demo-step title="Apply the ngSortgridDragHandle directive" image="gs7.png"></ngsg-demo-step>
+  <ngsg-demo-drag-handle></ngsg-demo-drag-handle>
+
 </div>

projects/ng-sortgrid-demo/src/app/introduction/introduction.module.ts

@@ -5,6 +5,7 @@ import {NgsgModule} from '../../../../ng-sortgrid/src/lib/ngsg.module';
 import {SharedModule} from '../shared/shared.module';
 
 import {AsyncPipeMemoryComponent} from './examples/async-pipe/async-pipe-memory.component';
+import { DragHandleComponent } from './examples/drag-handle/drag-handle.component';
 import {GettingStartedMemoryComponent} from './examples/getting-started/getting-started-memory.component';
 import {GroupsMemoryComponent} from './examples/groups/groups-memory.component';
 import {ReactOnChangesMemoryComponent} from './examples/react-on-changes/react-on-changes-memory.component';
@@ -17,7 +18,8 @@ import {IntroductionRoutingModule} from './introduction.routing.module';
     GettingStartedMemoryComponent,
     ReactOnChangesMemoryComponent,
     GroupsMemoryComponent,
-    AsyncPipeMemoryComponent
+    AsyncPipeMemoryComponent,
+    DragHandleComponent
   ],
   imports: [
     CommonModule,

projects/ng-sortgrid-demo/src/assets/gs7.png

@@ -0,0 +1,17 @@
+import { NgsgDragHandleDirective } from './ngsg-drag-handle.directive';
+
+describe('NgsgDragHandleDirective', () => {
+  let sut: NgsgDragHandleDirective;
+
+  const elementRef = { nativeElement: {} } as any;
+
+  beforeEach(() => {
+    sut = new NgsgDragHandleDirective(
+      elementRef
+    );
+  });
+
+  it('should create an instance', () => {
+    expect(sut).toBeTruthy();
+  });
+});

projects/ng-sortgrid/src/lib/ngsg-drag-handle.directive.spec.ts

@@ -0,0 +1,9 @@
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[ngSortgridDragHandle]'
+})
+export class NgsgDragHandleDirective {
+
+  constructor(public el: ElementRef){}
+}

projects/ng-sortgrid/src/lib/ngsg-drag-handle.directive.ts

@@ -48,9 +48,9 @@ describe('NgsgItemDirective', () => {
     );
   });
 
-  it('should set the draggable attribute on the elment', () => {
+  it('should not set the draggable attribute on the elment', () => {
     sut.ngAfterViewInit();
-    expect((elementRef.nativeElement as any).draggable).toBeTruthy();
+    expect((elementRef.nativeElement as any).draggable).toBeFalsy();
   });
 
   it('should not set selectedElements if the event did not occur on the host', () => {

projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit,
+  ContentChild,
   Directive,
   ElementRef,
   EventEmitter,
@@ -23,6 +24,7 @@ import {NgsgReflectService} from './sort/reflection/ngsg-reflect.service';
 import {NgsgSortService} from './sort/sort/ngsg-sort.service';
 import {NgsgStoreService} from './store/ngsg-store.service';
 import { NgsgClassService } from './helpers/class/ngsg-class.service';
+import { NgsgDragHandleDirective } from './ngsg-drag-handle.directive';
 
 const selector = '[ngSortgridItem]';
 
@@ -37,6 +39,9 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe
 
   @Output() sorted = new EventEmitter<NgsgOrderChange<any>>();
 
+  @ContentChild(NgsgDragHandleDirective) handle: NgsgDragHandleDirective;
+
+  private handleElement: HTMLElement;
   private selected = false;
   private destroy$ = new Subject();
 
@@ -82,7 +87,14 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe
   }
 
   ngAfterViewInit(): void {
-    this.el.nativeElement.draggable = true;
+    this.handleElement = this.handle?.el?.nativeElement || this.el.nativeElement;
+
+    fromEvent<DragEvent>(this.handleElement, 'mousedown').pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
+      this.el.nativeElement.draggable = true;
+    }
+    );
   }
 
   ngOnDestroy(): void {
@@ -119,6 +131,7 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe
 
   @HostListener('dragend')
   drop(): void {
+    this.el.nativeElement.draggable = false;
     if (!this.ngsgStore.hasSelectedItems(this.ngSortGridGroup)) {
       return;
     }

projects/ng-sortgrid/src/lib/ngsg-item.directive.ts

@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
 
 import { NgsgItemDirective } from './ngsg-item.directive';
+import { NgsgDragHandleDirective } from './ngsg-drag-handle.directive';
 
 @NgModule({
-  declarations: [NgsgItemDirective],
-  exports: [NgsgItemDirective]
+  declarations: [NgsgItemDirective, NgsgDragHandleDirective],
+  exports: [NgsgItemDirective, NgsgDragHandleDirective]
 })
 export class NgsgModule {}