inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

node-click and node-dblclick DOM events (#1863)

Browse Source 
Extra DOM events with bubbling support for DocumentList:
- node-click
- node-dblclick
This commit is contained in:
Denys Vuika
2017-05-10 11:12:05 +01:00
committed by Eugenio Romano
parent 5c7d53230d
commit 07d898b2aa
9 changed files with 91 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ng2-components/ng2-alfresco-documentlist/README.md
View File

@@ -206,6 +206,42 @@ _For a complete example source code please refer to
[DocumentList Demo](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-documentlist/demo)
repository._
### DOM Events
Below are the DOM events the DocumentList component emits.
All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
| Name | Description |
| --- | --- |
| node-click | Raised when user clicks the node |
| node-dblclick | Raised when user double-clicks the node |
Every event is represented by a [CustomEvent](https://developer.mozilla.org/en/docs/Web/API/CustomEvent) instance, having at least the following properties as part of the `Event.detail` property value:
```ts
{
sender: DocumentListComponent,
node: MinimalNodeEntity
}
```
#### Handling DOM events
Here's a basic example on handling DOM events in the parent elements:
```html
<div (node-click)="onNodeClicked($event)"
(node-dblclick)="onNodeDblClicked($event)">
<div>
<alfresco-upload-drag-area ...>
<alfresco-document-list ...>
...
</alfresco-document-list>
</alfresco-upload-drag-area>
</div>
</div>
```
### Setting default folder
You can set current folder path by assigning a value for `currentFolderId` property.

2
ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts
View File

@@ -50,7 +50,7 @@ describe('DocumentListBreadcrumb', () => {
});
it('should update document list on click', (done) => {
let documentList = new DocumentListComponent(null, null, null);
let documentList = new DocumentListComponent(null, null, null, null);
spyOn(documentList, 'loadFolderByNodeId').and.stub();
let node = <PathElementEntity> { id: '-id-', name: 'name' };

2
ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts
View File

@@ -27,7 +27,7 @@ describe('ContentColumnList', () => {
beforeEach(() => {
let documentListService = new DocumentListServiceMock();
documentList = new DocumentListComponent(documentListService, null, null);
documentList = new DocumentListComponent(documentListService, null, null, null);
actionList = new ContentActionListComponent(documentList);
});

2
ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts
View File

@@ -38,7 +38,7 @@ describe('ContentAction', () => {
documentActions = new DocumentActionsService(null, null);
folderActions = new FolderActionsService(null);
documentList = new DocumentListComponent(documentServiceMock, null, null);
documentList = new DocumentListComponent(documentServiceMock, null, null, null);
actionList = new ContentActionListComponent(documentList);
});

2
ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts
View File

@@ -28,7 +28,7 @@ describe('ContentColumnList', () => {
beforeEach(() => {
let service = new DocumentListServiceMock();
documentList = new DocumentListComponent(service, null, null);
documentList = new DocumentListComponent(service, null, null, null);
columnList = new ContentColumnListComponent(documentList);
});

2
ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts
View File

@@ -27,7 +27,7 @@ describe('ContentColumn', () => {
beforeEach(() => {
let service = new DocumentListServiceMock();
documentList = new DocumentListComponent(service, null, null);
documentList = new DocumentListComponent(service, null, null, null);
columnList = new ContentColumnListComponent(documentList);
});

26
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
View File

@@ -513,6 +513,19 @@ describe('DocumentList', () => {
expect(documentList.onNodeClick).toHaveBeenCalledWith(node);
});
it('should emit node-click DOM event', (done) => {
let node = new NodeMinimalEntry();
let row = new ShareDataRow(node);
let event = new DataRowEvent(row, null);
const htmlElement = fixture.debugElement.nativeElement as HTMLElement;
htmlElement.addEventListener('node-click', (e: CustomEvent) => {
done();
});
documentList.onRowClick(event);
});
it('should emit [nodeDblClick] event on row double-click', () => {
let node = new NodeMinimalEntry();
let row = new ShareDataRow(node);
@@ -523,6 +536,19 @@ describe('DocumentList', () => {
expect(documentList.onNodeDblClick).toHaveBeenCalledWith(node);
});
it('should emit node-dblclick DOM event', (done) => {
let node = new NodeMinimalEntry();
let row = new ShareDataRow(node);
let event = new DataRowEvent(row, null);
const htmlElement = fixture.debugElement.nativeElement as HTMLElement;
htmlElement.addEventListener('node-dblclick', (e: CustomEvent) => {
done();
});
documentList.onRowDblClick(event);
});
it('should load folder by ID on init', () => {
documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
spyOn(documentList, 'loadFolderNodesByFolderNodeId').and.returnValue(Promise.resolve());

27
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
View File

@@ -16,7 +16,7 @@
*/
import {
Component, OnInit, Input, OnChanges, Output, SimpleChanges, EventEmitter,
Component, OnInit, Input, OnChanges, Output, SimpleChanges, EventEmitter, ElementRef,
AfterContentInit, TemplateRef, NgZone, ViewChild, HostListener, ContentChild
} from '@angular/core';
import { Subject } from 'rxjs/Rx';
@@ -150,7 +150,8 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
constructor(private documentListService: DocumentListService,
private ngZone: NgZone,
private translateService: AlfrescoTranslationService) {
private translateService: AlfrescoTranslationService,
private el: ElementRef) {
this.data = new ShareDataTableAdapter(this.documentListService);
@@ -396,7 +397,16 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
}
onNodeClick(node: MinimalNodeEntity) {
let event = new NodeEntityEvent(node);
const domEvent = new CustomEvent('node-click', {
detail: {
sender: this,
node: node
},
bubbles: true
});
this.el.nativeElement.dispatchEvent(domEvent);
const event = new NodeEntityEvent(node);
this.nodeClick.emit(event);
if (!event.defaultPrevented) {
@@ -420,7 +430,16 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
}
onNodeDblClick(node: MinimalNodeEntity) {
let event = new NodeEntityEvent(node);
const domEvent = new CustomEvent('node-dblclick', {
detail: {
sender: this,
node: node
},
bubbles: true
});
this.el.nativeElement.dispatchEvent(domEvent);
const event = new NodeEntityEvent(node);
this.nodeDblClick.emit(event);
if (!event.defaultPrevented) {

2
ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts
View File

@@ -28,7 +28,7 @@ describe('EmptyFolderContent', () => {
beforeEach(() => {
let documentListService = new DocumentListServiceMock();
documentList = new DocumentListComponent(documentListService, null, null);
documentList = new DocumentListComponent(documentListService, null, null, null);
documentList.dataTable = new DataTableComponent(null);
emptyFolderContent = new EmptyFolderContentComponent(documentList);
});