From 07d898b2aa78f1daad40ed7c30162d244d0bb773 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Wed, 10 May 2017 11:12:05 +0100 Subject: [PATCH] node-click and node-dblclick DOM events (#1863) Extra DOM events with bubbling support for DocumentList: - node-click - node-dblclick --- .../ng2-alfresco-documentlist/README.md | 36 +++++++++++++++++++ .../breadcrumb/breadcrumb.component.spec.ts | 2 +- .../content-action-list.component.spec.ts | 2 +- .../content-action.component.spec.ts | 2 +- .../content-column-list.component.spec.ts | 2 +- .../content-column.component.spec.ts | 2 +- .../document-list.component.spec.ts | 26 ++++++++++++++ .../src/components/document-list.component.ts | 27 +++++++++++--- .../empty-folder-content.component.spec.ts | 2 +- 9 files changed, 91 insertions(+), 10 deletions(-) diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index 08e8ad7034..654cbf5875 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/ng2-components/ng2-alfresco-documentlist/README.md @@ -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 +
+
+ + + ... + + +
+
+``` + ### Setting default folder You can set current folder path by assigning a value for `currentFolderId` property. diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts index 56744a769f..1365facf18 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.spec.ts @@ -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 = { id: '-id-', name: 'name' }; diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts index ffcaaa044e..493d10c542 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action-list.component.spec.ts @@ -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); }); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts index bd8b614b26..40f24becc2 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-action/content-action.component.spec.ts @@ -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); }); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts index 8fd4daad64..3cccfcebc2 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column-list.component.spec.ts @@ -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); }); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts index eec2eb9202..e06c860619 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-column/content-column.component.spec.ts @@ -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); }); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts index 1506e14dc5..ae18bd9bd5 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts @@ -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()); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts index f82be39c34..5c773fc4c3 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts @@ -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) { diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts index 546deb3fca..aae664a984 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts @@ -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); });