#124 double click navigation, 'preview' event

This commit is contained in:
Denys Vuika
2016-06-08 14:49:47 +01:00
parent 7d1911b189
commit 4dd1073f70
7 changed files with 105 additions and 37 deletions

View File

@@ -52,6 +52,9 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
@Input()
navigate: boolean = true;
@Input('navigation-mode')
navigationMode: string = 'dblclick'; // click|dblclick
@Input()
breadcrumb: boolean = false;
@@ -64,9 +67,15 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
@Output()
itemClick: EventEmitter<any> = new EventEmitter();
@Output()
itemDblClick: EventEmitter<any> = new EventEmitter();
@Output()
folderChange: EventEmitter<any> = new EventEmitter();
@Output()
preview: EventEmitter<any> = new EventEmitter();
rootFolder = {
name: '',
path: ''
@@ -169,17 +178,23 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
* Invoked when 'parent folder' element is clicked.
* @param e DOM event
*/
onNavigateParentClick(e) {
onNavigateParentClick(e?: Event) {
if (e) {
e.preventDefault();
}
if (this.navigate) {
this.route.pop();
let parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
if (parent) {
this.displayFolderContent(parent.path);
}
if (this.navigate && this.navigationMode === 'click') {
this.navigateToParent();
}
}
onNavigateParentDblClick(e?: Event) {
if (e) {
e.preventDefault();
}
if (this.navigate && this.navigationMode === 'dblclick') {
this.navigateToParent();
}
}
@@ -188,7 +203,7 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
* @param item Underlying node item
* @param e DOM event (optional)
*/
onItemClick(item: MinimalNodeEntity, e = null) {
onItemClick(item: MinimalNodeEntity, e?: Event) {
if (e) {
e.preventDefault();
}
@@ -197,18 +212,64 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit,
value: item
});
if (this.navigate && item && item.entry) {
if (item.entry.isFolder) {
let path = this.getNodePath(item);
this.route.push({
name: item.entry.name,
path: path
});
this.displayFolderContent(path);
if (this.navigate && this.navigationMode === 'click') {
if (item && item.entry) {
if (item.entry.isFile) {
this.preview.emit({
value: item
});
}
if (item.entry.isFolder) {
this.performNavigation(item);
}
}
}
}
onItemDblClick(item: MinimalNodeEntity, e?: Event) {
if (e) {
e.preventDefault();
}
this.itemDblClick.emit({
value: item
});
if (this.navigate && this.navigationMode === 'dblclick') {
if (item && item.entry) {
if (item.entry.isFile) {
this.preview.emit({
value: item
});
}
if (item.entry.isFolder) {
this.performNavigation(item);
}
}
}
}
private performNavigation(node: MinimalNodeEntity) {
if (node && node.entry && node.entry.isFolder) {
let path = this.getNodePath(node);
this.route.push({
name: node.entry.name,
path: path
});
this.displayFolderContent(path);
}
}
navigateToParent() {
this.route.pop();
let parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
if (parent) {
this.displayFolderContent(parent.path);
}
}
/**
* Invoked when a breadcrumb route is clicked.
* @param r Route to navigate to