@@ -72,6 +73,10 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy, AfterViewInit
@Input() public hideDelay: number = 500;
@Input() public autostart: boolean = false;
@Input() public target: string = '';
+
+ @Input() public draggable: boolean = false;
+ @Input() public draggableEdges: boolean = false;
+
@Input() public ariaLabel: string | null = null;
@Input() public ariaLabelledBy: string | null = null;
@Input() public ariaDescribedBy: string | null = null;
@@ -98,6 +103,10 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy, AfterViewInit
private _data: any;
+ private positionX = 0;
+ private positionY = 0;
+ private dragging = false;
+
@ViewChildren('nsmContent') private nsmContent: QueryList;
@ViewChildren('nsmDialog') public nsmDialog: QueryList;
@ViewChildren('nsmOverlay') private nsmOverlay: QueryList;
@@ -133,6 +142,84 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy, AfterViewInit
this._sendEvent('delete');
}
+ /**
+ * Set positionX and positionY to save last position of dragged modal
+ * @param posX position X
+ * @param posY position Y
+ */
+ 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
+ * @param offsetX modal's left offset
+ * @param offsetY modal's top 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
+ * @param e MouseEvent
+ */
+ @HostListener('document:mousedown', ['$event'])
+ private startDrag(e: MouseEvent) {
+ if (!this.nsmContent.length || !this.draggable) {
+ return false;
+ }
+
+ const 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
+ * @param e MouseEvent
+ */
+ @HostListener('document:mousemove', ['$event'])
+ private 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'])
+ private stopDrag() {
+ this.dragging = false;
+ }
+
/**
* Open the modal instance
*
diff --git a/src/ngx-smart-modal/src/ngx-smart-modal.scss b/src/ngx-smart-modal/src/ngx-smart-modal.scss
index 0f3fad5d..58c01fe2 100644
--- a/src/ngx-smart-modal/src/ngx-smart-modal.scss
+++ b/src/ngx-smart-modal/src/ngx-smart-modal.scss
@@ -42,6 +42,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;
@@ -165,3 +167,11 @@ body.dialog-open {
transform: translate3d(0, 50%, 0);
}
}
+
+.draggable {
+ cursor: move;
+
+ div {
+ cursor: default;
+ }
+}
diff --git a/src/ngx-smart-modal/tests/components/ngx-smart-modal.component.spec.ts b/src/ngx-smart-modal/tests/components/ngx-smart-modal.component.spec.ts
index 61966900..ca5b01f3 100644
--- a/src/ngx-smart-modal/tests/components/ngx-smart-modal.component.spec.ts
+++ b/src/ngx-smart-modal/tests/components/ngx-smart-modal.component.spec.ts
@@ -244,9 +244,141 @@ 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;
+
+ 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 };
+
+ 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 };
+
+ 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 };
+
+ 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 };
+
+ 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: () => { } };
+
+ 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, last: { nativeElement: { offsetTop: 0, offsetLeft: 0, style: {} } } };
+ 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;
+
+ 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();
+ }));
+
it('should targetPlacement ( no browser )', async(() => {
spyOnProperty(component as any, 'isBrowser', 'get').and.returnValue(false);
expect((component as any)._sendEvent('test')).toBeFalsy();
}));
+
});