Added a dragging feature

src/app/demo/main/main.component.html

@@ -36,6 +36,8 @@ <h1 class="title">ngx-smart-modal</h1>
                 style="position:absolute;top: 300px;left: 900px;">Custom target modal</button>
         <button class="button -regular"
                 (click)="goNewDynamic()">Create dynamic modal<span>new</span></button>
+        <button class="button -regular"
+                (click)="draggableModal.open()">Draggable modal<span>new</span></button>
     </div>
 
     <h3 class="title">Examples with CSS frameworks</h3>
@@ -331,3 +333,27 @@ <h1>Hey, I am a modal placed relatively to an element!</h1>
     <button class="button -dark"
             (click)="customTarget.close()">Close</button>
 </ngx-smart-modal>
+
+<ngx-smart-modal #draggableModal 
+                 [draggable]="true" 
+                 [draggableEdges]="true" 
+                 identifier="draggableModal">
+    <h1>Hey, you can drag me anywhere by holding my edges or handle!</h1>
+    <p>Add class ".draggable" to any element inside modal to make it a drag handle.</p><br>
+    <span class="draggable">Handle</span>
+    <span>Not handle</span>
+    <br><br>
+    <button class="button -regular" (click)="secondDraggableModal.open()">Second draggable
+        modal<span>new</span></button>
+
+</ngx-smart-modal>
+
+<ngx-smart-modal #secondDraggableModal 
+                 [draggable]="true" 
+                 identifier="secondDraggableModal">
+    <h1>Hey, I will move independently from my parent!</h1>
+    <p>I can only be moved by a handle.</p><br>
+    <span class="draggable">Handle</span>
+    <span>Not handle</span>
+    <br><br>
+</ngx-smart-modal>

src/app/demo/main/main.component.scss

@@ -29,3 +29,11 @@
     }
   }
 }
+
+span.draggable{
+  color:white;
+  padding: 5px;
+  text-align: center;
+  background-color:gray;
+  margin-right: 10px;
+}

src/ngx-smart-modal/src/components/ngx-smart-modal.component.ts

@@ -24,7 +24,7 @@ import { NgxSmartModalConfig } from '../config/ngx-smart-modal.config';
          (mousedown)="dismiss($event)" #nsmOverlay>
       <div [style.z-index]="visible ? layerPosition : -1"
            [ngClass]="['nsm-dialog', customClass, openedClass ? 'nsm-dialog-open': 'nsm-dialog-close']" #nsmDialog>
-        <div class="nsm-content" #nsmContent>
+        <div class="nsm-content" #nsmContent  [class.draggable]="draggable && draggableEdges">
           <div class="nsm-body">
             <ng-content></ng-content>
           </div>
@@ -49,6 +49,8 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
   @Input() public hideDelay: number = 500;
   @Input() public autostart: boolean = false;
   @Input() public target: string = '';
+  @Input() public draggable: boolean = false;
+  @Input() public draggableEdges: boolean = false;
 
   @Output() public visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output() public onClose: EventEmitter<any> = new EventEmitter();
@@ -92,6 +94,83 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
     this._sendEvent('delete');
   }
 
+  private positionX = 0;
+  private positionY = 0;
+  private dragging = false;
+
+  /**
+  * Set positionX and positionY to save last position of dragged modal
+  */
+  public setPosition(posX: number, posY: number) {
+    this.positionX = posX;
+    this.positionY = posY;
+  }
+
+  /**
+  * Moves dialog by changing top and left style of modal dialog by offset
+  */
+  public moveDialog(offsetX: number, offsetY: number) {
+    if (!this.nsmDialog.length) {
+      return false;
+    }
+    this.nsmDialog.last.nativeElement.style.top = (this.nsmDialog.last.nativeElement.offsetTop - offsetY) + "px";
+    this.nsmDialog.last.nativeElement.style.left = (this.nsmDialog.last.nativeElement.offsetLeft - offsetX) + "px";
+    return true;
+  }
+
+  /**
+  * Listens for mouse down event to initiate dragging of the modal
+  */
+  @HostListener('document:mousedown', ['$event'])
+  startDrag(e: MouseEvent) {
+    if (!this.nsmContent.length || !this.draggable) {
+      return false;
+    }
+
+    let src = e.srcElement as HTMLElement;
+    if (src && src.classList.contains('draggable')) {
+      if (this.nsmContent.last.nativeElement.contains(src) && !this.dragging) {
+        e.preventDefault();
+
+        this.dragging = true;
+        this.setPosition(e.clientX, e.clientY);
+
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+  * Listens for mouse move event and reflects the movement of the mouse to modal position
+  */
+  @HostListener('document:mousemove', ['$event'])
+  elementDrag(e: MouseEvent) {
+    if (!this.dragging || !this.nsmDialog.length) {
+      return false;
+    }
+    e.preventDefault();
+
+    const offsetX = this.positionX - e.clientX;
+    const offsetY = this.positionY - e.clientY;
+
+    this.moveDialog(offsetX, offsetY);
+
+    this.setPosition(e.clientX, e.clientY);
+
+    return true;
+  }
+
+
+  /**
+  * Listens for mouse up event to stop moving dragged modal
+  */
+  @HostListener('document:mouseup', ['$event'])
+  stopDrag() {
+    this.dragging = false;
+  }
+
   /**
    * Open the modal instance
    *

src/ngx-smart-modal/src/ngx-smart-modal.scss

@@ -43,6 +43,8 @@ body.dialog-open {
   bottom: 0;
   left: 0;
   right: 0;
+  display: flex;
+  justify-content: center;
   overflow-x: hidden;
   overflow-y: auto;
   transition: background-color $transition-duration;
@@ -60,7 +62,7 @@ body.dialog-open {
 
 // Dialog modal
 .nsm-dialog {
-  position: relative;
+  position: absolute;
   opacity: 1;
   visibility: visible;
   min-height: 200px;
@@ -165,3 +167,11 @@ body.dialog-open {
     transform: translate3d(0, 50%, 0);
   }
 }
+
+.draggable {
+  cursor: move;
+
+  div {
+    cursor: default;
+  }
+}

src/ngx-smart-modal/tests/components/ngx-smart-modal.component.spec.ts

@@ -243,4 +243,159 @@ describe('NgxSmartModalComponent', () => {
 
     component.targetPlacement();
   }));
+
+  it('should setPosition', async(() => {
+    component.setPosition(10, 20);
+    expect((component as any).positionX).toBe(10);
+    expect((component as any).positionY).toBe(20);
+  }));
+
+  it('should not moveDialog if there\'s no nsmDialog', async(() => {
+    (component as any).nsmDialog = { length: 0 };
+
+    const result = component.moveDialog(-30, -50);
+    expect(result).toBeFalsy();
+  }));
+
+  it('should moveDialog', async(() => {
+    (component as any).nsmDialog = { length: 1, last: { nativeElement: { offsetTop: 20, offsetLeft: 30, style: {} } } };
+
+    const result = component.moveDialog(-30, -50);
+    expect((component as any).nsmDialog.last.nativeElement.style.top).toBe('70px');
+    expect((component as any).nsmDialog.last.nativeElement.style.left).toBe('60px');
+    expect(result).toBeTruthy();
+  }));
+
+  it('should not startDrag if modal not draggable', async(() => {
+
+    component.draggable = false;
+
+    //spyOn((component), 'setPosition');
+
+    let result = component.startDrag({} as MouseEvent);
+    expect((component as any).dragging).toBeFalsy();
+    expect(result).toBe(false);
+  }));
+
+  it('should not startDrag if event there is no nsmContent', async(() => {
+    component.draggable = true;
+    (component as any).nsmContent = { length: 0 };
+
+    //spyOn((component), 'setPosition');
+
+    let result = component.startDrag({} as MouseEvent);
+    expect((component as any).dragging).toBeFalsy();
+    expect(result).toBe(false);
+  }));
+
+  it('should not startDrag if event srcElement is null', async(() => {
+    component.draggable = true;
+    (component as any).nsmContent = { length: 1 };
+    const fakeEvent = { srcElement: null };
+
+    //spyOn((component), 'setPosition');
+
+    let result = component.startDrag(fakeEvent as MouseEvent);
+    expect((component as any).dragging).toBeFalsy();
+    expect(result).toBe(false);
+  }));
+
+  it('should not startDrag if clicked element isn\'t .draggable', async(() => {
+    component.draggable = true;
+    (component as any).nsmContent = { length: 1 };
+    const fakeSrcElement = document.createElement('div') as any;
+    const fakeEvent = { srcElement: fakeSrcElement };
+
+    //spyOn((component), 'setPosition');
+
+    const result = component.startDrag(fakeEvent as MouseEvent);
+    expect((component as any).dragging).toBeFalsy();
+    expect(result).toBeFalsy();
+  }));
+
+  it('should not startDrag if content doesn\'t contain clicked element', async(() => {
+    component.draggable = true;
+    const fakeSrcElement1 = document.createElement('div') as any;
+    fakeSrcElement1.classList.add('draggable');
+    const fakeSrcElement2 = document.createElement('div') as any;
+    (component as any).nsmContent = { 'length': 1, 'last': { 'nativeElement': { 'contains': (el: any) => el == fakeSrcElement1 } } };
+    const fakeEvent = { clientX: 10, clientY: 30, srcElement: fakeSrcElement2 };
+
+    //spyOn((component), 'setPosition');
+
+    const result = component.startDrag(fakeEvent as MouseEvent);
+    expect((component as any).dragging).toBeFalsy();
+    expect(result).toBeFalsy();
+  }));
+
+  it('should startDrag', async(() => {
+    component.draggable = true;
+    const fakeSrcElement = document.createElement('div') as any;
+    (component as any).nsmContent = { 'length': 1, 'last': { 'nativeElement': { 'contains': (el: any) => el == fakeSrcElement } } };
+    fakeSrcElement.classList.add('draggable');
+    const fakeEvent = { clientX: 10, clientY: 30, srcElement: fakeSrcElement, preventDefault: () => { } };
+
+    (component as any).setPosition = (positionX: any, positionY: any) => {
+      //nothing
+    };
+
+    spyOn(component, 'setPosition');
+
+    const result = component.startDrag(fakeEvent as MouseEvent);
+    expect(result).toBeTruthy();
+    expect((component as any).dragging).toBeTruthy();
+    expect(component.setPosition).toHaveBeenCalledWith(fakeEvent.clientX, fakeEvent.clientY);
+  }));
+
+  it('should not elementDrag if not started dragging', async(() => {
+    (component as any).dragging = false;
+
+    const result = component.elementDrag({} as MouseEvent);
+    expect(result).toBeFalsy();
+  }));
+
+  it('should not elementDrag if event there is no nmsDialog', async(() => {
+    (component as any).dragging = true;
+    (component as any).nsmDialog = { length: 0 };
+
+    const result = component.elementDrag({} as MouseEvent);
+    expect(result).toBeFalsy();
+  }));
+
+  it('should elementDrag ', async(() => {
+    (component as any).dragging = true;
+    (component as any).nsmDialog = { 'length': 1 };
+    const positionX = 10;
+    (component as any).positionX = positionX;
+    const positionY = 30;
+    (component as any).positionY = positionY;
+    const fakeEvent = { clientX: 2, clientY: 5, preventDefault: () => { } };
+
+    const offsetX = component['positionX'] - fakeEvent.clientX;
+    const offsetY = component['positionY'] - fakeEvent.clientY;
+
+    (component as any).moveDialog = (positionX: any, positionY: any) => {
+      //nothing
+    };
+
+    (component as any).setPosition = (positionX: any, positionY: any) => {
+      //nothing
+    };
+
+    spyOn((component), 'moveDialog');
+    spyOn((component), 'setPosition');
+
+    const result = component.elementDrag(fakeEvent as MouseEvent);
+
+    expect(component.moveDialog).toHaveBeenCalledWith(offsetX, offsetY);
+    expect(component.setPosition).toHaveBeenCalledWith(fakeEvent.clientX, fakeEvent.clientY);
+
+    expect(result).toBeTruthy();
+  }));
+
+  it('should stopDrag', async(() => {
+    component.stopDrag();
+    expect((component as any).dragging).toBeFalsy();
+  }));
+
 });