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

Extra DOM events with bubbling support for DocumentList:
- node-click
- node-dblclick

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
+<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. 

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 = <PathElementEntity> { id: '-id-', name: 'name' };

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);
     });
 

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);
     });
 

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);
     });
 

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);
     });
 

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());

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) {

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);
     });