inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

drag and drop improvements (copy effect) (#6019)

Browse Source 
* drag and drop fixes (copy effect)

* fix tests

* update tests

* test fixes
This commit is contained in:
Denys Vuika 2020-08-18 10:57:09 +01:00 committed by GitHub
parent 16d9d9e356
commit d355f76499
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
lib/core/datatable/directives/drop-zone.directive.ts
View File

@ -40,40 +40,52 @@ export class DropZoneDirective implements OnInit, OnDestroy {
ngOnInit() {
this.ngZone.runOutsideAngular(() => {
this.element.addEventListener('dragenter', this.onDragEnter.bind(this));
this.element.addEventListener('dragover', this.onDragOver.bind(this));
this.element.addEventListener('drop', this.onDrop.bind(this));
});
}
ngOnDestroy() {
this.element.removeEventListener('dragenter', this.onDragEnter);
this.element.removeEventListener('dragover', this.onDragOver);
this.element.removeEventListener('drop', this.onDrop);
}
onDragOver(event: Event) {
const domEvent = new CustomEvent(`${this.dropTarget}-dragover`, {
detail: {
target: this.dropTarget,
event,
column: this.dropColumn,
row: this.dropRow
},
bubbles: true
});
this.element.dispatchEvent(domEvent);
onDragEnter(event: DragEvent) {
const domEvent = this.dispatchDomEvent(event, 'dragenter');
if (domEvent.defaultPrevented) {
event.dataTransfer.dropEffect = 'copy';
event.preventDefault();
event.stopPropagation();
}
}
onDragOver(event: DragEvent) {
const domEvent = this.dispatchDomEvent(event, 'dragover');
if (domEvent.defaultPrevented) {
event.dataTransfer.dropEffect = 'copy';
event.preventDefault();
event.stopPropagation();
}
}
onDrop(event: Event) {
const domEvent = new CustomEvent(`${this.dropTarget}-drop`, {
const domEvent = this.dispatchDomEvent(event, 'drop');
if (domEvent.defaultPrevented) {
event.preventDefault();
event.stopPropagation();
}
}
private dispatchDomEvent(originalEvent: Event, eventName: string): CustomEvent {
const domEvent = new CustomEvent(`${this.dropTarget}-${eventName}`, {
detail: {
target: this.dropTarget,
event,
event: originalEvent,
column: this.dropColumn,
row: this.dropRow
},
@ -81,10 +93,6 @@ export class DropZoneDirective implements OnInit, OnDestroy {
});
this.element.dispatchEvent(domEvent);
if (domEvent.defaultPrevented) {
event.preventDefault();
event.stopPropagation();
}
return domEvent;
}
}

10
lib/core/directives/upload.directive.spec.ts
View File

@ -39,26 +39,26 @@ describe('UploadDirective', () => {
it('should update drag status on dragenter', () => {
expect(directive.isDragging).toBeFalsy();
directive.enabled = true;
directive.onDragEnter();
directive.onDragEnter(new DragEvent('dragenter', { dataTransfer: new DataTransfer() }));
expect(directive.isDragging).toBeTruthy();
});
it('should not update drag status on dragenter when disabled', () => {
expect(directive.isDragging).toBeFalsy();
directive.enabled = false;
directive.onDragEnter();
directive.onDragEnter(new DragEvent('dragenter'));
expect(directive.isDragging).toBeFalsy();
});
it('should update drag status on dragover', () => {
expect(directive.isDragging).toBeFalsy();
directive.enabled = true;
directive.onDragOver(new CustomEvent('dragover'));
directive.onDragOver(new DragEvent('dragover', { dataTransfer: new DataTransfer() }));
expect(directive.isDragging).toBeTruthy();
});
it('should prevent default event on dragover', () => {
const event = new Event('dom-event');
const event = new DragEvent('dragover', { dataTransfer: new DataTransfer() });
spyOn(event, 'preventDefault').and.stub();
directive.enabled = true;
directive.onDragOver(event);
@ -69,7 +69,7 @@ describe('UploadDirective', () => {
it('should not update drag status on dragover when disabled', () => {
expect(directive.isDragging).toBeFalsy();
directive.enabled = false;
directive.onDragOver(new CustomEvent('dragover'));
directive.onDragOver(new DragEvent('dragover'));
});
it('should update drag status on dragleave', () => {

6
lib/core/directives/upload.directive.ts
View File

@ -108,16 +108,18 @@ export class UploadDirective implements OnInit, OnDestroy {
}
}
onDragEnter() {
onDragEnter(event: DragEvent) {
if (this.isDropMode()) {
event.dataTransfer.dropEffect = 'copy';
this.element.classList.add(this.cssClassName);
this.isDragging = true;
}
}
onDragOver(event: Event) {
onDragOver(event: DragEvent) {
event.preventDefault();
if (this.isDropMode()) {
event.dataTransfer.dropEffect = 'copy';
this.element.classList.add(this.cssClassName);
this.isDragging = true;
}