mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
@@ -0,0 +1,122 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ElementRef } from '@angular/core';
|
||||
import { FileDraggableDirective } from '../directives/file-draggable.directive';
|
||||
|
||||
describe('FileDraggableDirective', () => {
|
||||
|
||||
let component: FileDraggableDirective;
|
||||
|
||||
beforeEach( () => {
|
||||
let el = new ElementRef(null);
|
||||
component = new FileDraggableDirective(el, null);
|
||||
});
|
||||
|
||||
it('should always be enabled by default', () => {
|
||||
expect(component.enabled).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should not allow drad and drop when disabled', () => {
|
||||
component.enabled = false;
|
||||
let event = new CustomEvent('custom-event');
|
||||
spyOn(event, 'preventDefault').and.stub();
|
||||
component.onDropFiles(event);
|
||||
component.onDragEnter(event);
|
||||
component.onDragLeave(event);
|
||||
expect(event.preventDefault).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
/*
|
||||
it('should emit onFolderEntityDropped event when a folder is dragged with Chrome' , (done) => {
|
||||
|
||||
let itemEntity = {
|
||||
fullPath: '/folder-fake',
|
||||
isDirectory: true,
|
||||
isFile: false,
|
||||
name: 'folder-fake'
|
||||
};
|
||||
let fakeEvent = {
|
||||
dataTransfer: {
|
||||
items: [{
|
||||
webkitGetAsEntry: () => {
|
||||
return itemEntity;
|
||||
}
|
||||
}]
|
||||
},
|
||||
stopPropagation: jasmine.createSpy('stopPropagation'),
|
||||
preventDefault: jasmine.createSpy('preventDefault')
|
||||
};
|
||||
|
||||
component.onFolderEntityDropped.subscribe(files => {
|
||||
expect(files).toEqual(itemEntity);
|
||||
expect(component.getInputFocus()).toBe(false);
|
||||
done();
|
||||
});
|
||||
|
||||
component.onDropFiles(fakeEvent);
|
||||
});
|
||||
|
||||
it('should emit onFilesDropped event when a file is dragged not with Chrome' , (done) => {
|
||||
let file = {name: 'fake-name-1', size: 10, webkitRelativePath: 'fake-folder1/fake-name-1.json'};
|
||||
let fakeEvent = {
|
||||
dataTransfer: {
|
||||
files: [file]
|
||||
},
|
||||
stopPropagation: jasmine.createSpy('stopPropagation'),
|
||||
preventDefault: jasmine.createSpy('preventDefault')
|
||||
};
|
||||
|
||||
component.onFilesDropped.subscribe(files => {
|
||||
expect(files).toEqual([file]);
|
||||
expect(component.getInputFocus()).toBe(false);
|
||||
done();
|
||||
});
|
||||
|
||||
component.onDropFiles(fakeEvent);
|
||||
});
|
||||
|
||||
it('should emit onFilesDropped event when a file is dragged with Chrome', (done) => {
|
||||
let file = {name: 'fake-name-2', size: 10, webkitRelativePath: 'fake-folder1/fake-name-2.json'};
|
||||
let fakeEvent = {
|
||||
dataTransfer: {
|
||||
items: [''],
|
||||
files: [file]
|
||||
},
|
||||
stopPropagation: jasmine.createSpy('stopPropagation'),
|
||||
preventDefault: jasmine.createSpy('preventDefault')
|
||||
};
|
||||
|
||||
component.onFilesDropped.subscribe(files => {
|
||||
expect(files).toEqual([file]);
|
||||
expect(component.getInputFocus()).toBe(false);
|
||||
done();
|
||||
});
|
||||
|
||||
component.onDropFiles(fakeEvent);
|
||||
});
|
||||
|
||||
it('should take the focus when the drag enter is called', () => {
|
||||
let mockEvent = new Event('dragstart');
|
||||
spyOn(mockEvent, 'preventDefault');
|
||||
|
||||
expect(component.getInputFocus()).toBe(false);
|
||||
component.onDragEnter(mockEvent);
|
||||
expect(component.getInputFocus()).toBe(true);
|
||||
});
|
||||
*/
|
||||
});
|
@@ -0,0 +1,143 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { FileUtils } from '@alfresco/core';
|
||||
import { Directive, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[file-draggable]'
|
||||
})
|
||||
export class FileDraggableDirective implements OnInit, OnDestroy {
|
||||
|
||||
files: File [];
|
||||
|
||||
@Input('file-draggable')
|
||||
enabled: boolean = true;
|
||||
|
||||
@Output()
|
||||
filesDropped: EventEmitter<File[]> = new EventEmitter<File[]>();
|
||||
|
||||
@Output()
|
||||
filesEntityDropped: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
folderEntityDropped: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
private cssClassName: string = 'file-draggable__input-focus';
|
||||
private element: HTMLElement;
|
||||
|
||||
constructor(el: ElementRef, private ngZone: NgZone) {
|
||||
this.element = el.nativeElement;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.ngZone.runOutsideAngular(() => {
|
||||
this.element.addEventListener('dragenter', this.onDragEnter.bind(this));
|
||||
this.element.addEventListener('dragover', this.onDragOver.bind(this));
|
||||
this.element.addEventListener('dragleave', this.onDragLeave.bind(this));
|
||||
this.element.addEventListener('drop', this.onDropFiles.bind(this));
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.element.removeEventListener('dragenter', this.onDragEnter);
|
||||
this.element.removeEventListener('dragover', this.onDragOver);
|
||||
this.element.removeEventListener('dragleave', this.onDragLeave);
|
||||
this.element.removeEventListener('drop', this.onDropFiles);
|
||||
}
|
||||
|
||||
/**
|
||||
* Method called when files is dropped in the drag and drop area.
|
||||
* @param event DOM event.
|
||||
*/
|
||||
onDropFiles(event: any): void {
|
||||
if (this.enabled && !event.defaultPrevented) {
|
||||
this.preventDefault(event);
|
||||
|
||||
let items = event.dataTransfer.items;
|
||||
if (items) {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (typeof items[i].webkitGetAsEntry !== 'undefined') {
|
||||
let item = items[i].webkitGetAsEntry();
|
||||
if (item) {
|
||||
if (item.isFile) {
|
||||
this.filesEntityDropped.emit(item);
|
||||
} else if (item.isDirectory) {
|
||||
this.folderEntityDropped.emit(item);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let files = FileUtils.toFileArray(event.dataTransfer.files);
|
||||
this.filesDropped.emit(files);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// safari or FF
|
||||
let files = FileUtils.toFileArray(event.dataTransfer.files);
|
||||
this.filesDropped.emit(files);
|
||||
}
|
||||
|
||||
this.element.classList.remove(this.cssClassName);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the style of the drag area when a file drag in.
|
||||
*
|
||||
* @param {event} event - DOM event.
|
||||
*/
|
||||
onDragEnter(event: Event): void {
|
||||
if (this.enabled && !event.defaultPrevented) {
|
||||
this.preventDefault(event);
|
||||
this.element.classList.add(this.cssClassName);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the style of the drag area when a file drag out.
|
||||
*
|
||||
* @param {event} event - DOM event.
|
||||
*/
|
||||
onDragLeave(event: Event): void {
|
||||
if (this.enabled && !event.defaultPrevented) {
|
||||
this.preventDefault(event);
|
||||
this.element.classList.remove(this.cssClassName);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the style of the drag area when a file is over the drag area.
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
onDragOver(event: Event): void {
|
||||
if (this.enabled && !event.defaultPrevented) {
|
||||
this.preventDefault(event);
|
||||
this.element.classList.add(this.cssClassName);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent default and stop propagation of the DOM event.
|
||||
*
|
||||
* @param {event} $event - DOM event.
|
||||
*/
|
||||
preventDefault(event: Event): void {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user