From 195284c13aa2028f400f2cdd53862e0b5415a7ab Mon Sep 17 00:00:00 2001 From: pionnegru Date: Thu, 14 Nov 2019 08:15:34 +0200 Subject: [PATCH 1/6] trap focus on drawer when active --- src/app/components/info-drawer/info-drawer.component.html | 6 +++++- src/app/components/info-drawer/info.drawer.module.ts | 4 +++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/components/info-drawer/info-drawer.component.html b/src/app/components/info-drawer/info-drawer.component.html index 8cf1471d7..9a57ca301 100644 --- a/src/app/components/info-drawer/info-drawer.component.html +++ b/src/app/components/info-drawer/info-drawer.component.html @@ -2,7 +2,11 @@ - + Date: Thu, 14 Nov 2019 08:16:24 +0200 Subject: [PATCH 2/6] close panel on Esc keyboard event --- .../info-drawer/info-drawer.component.ts | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/app/components/info-drawer/info-drawer.component.ts b/src/app/components/info-drawer/info-drawer.component.ts index 55c3b80d2..aa22749f2 100644 --- a/src/app/components/info-drawer/info-drawer.component.ts +++ b/src/app/components/info-drawer/info-drawer.component.ts @@ -23,7 +23,14 @@ * along with Alfresco. If not, see . */ -import { Component, Input, OnChanges, OnInit, OnDestroy } from '@angular/core'; +import { + Component, + HostListener, + Input, + OnChanges, + OnInit, + OnDestroy +} from '@angular/core'; import { MinimalNodeEntity, MinimalNodeEntryEntity, @@ -33,7 +40,10 @@ import { ContentApiService } from '@alfresco/aca-shared'; import { AppExtensionService } from '../../extensions/extension.service'; import { SidebarTabRef } from '@alfresco/adf-extensions'; import { Store } from '@ngrx/store'; -import { SetInfoDrawerStateAction } from '@alfresco/aca-shared/store'; +import { + SetInfoDrawerStateAction, + ToggleInfoDrawerAction +} from '@alfresco/aca-shared/store'; @Component({ selector: 'aca-info-drawer', @@ -49,6 +59,10 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy { displayNode: MinimalNodeEntryEntity | SiteEntry; tabs: Array = []; + @HostListener('keydown.escape') onEscapeKeyboardEvent() { + this.close(); + } + constructor( private store: Store, private contentApi: ContentApiService, @@ -80,6 +94,10 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy { } } + private close() { + this.store.dispatch(new ToggleInfoDrawerAction()); + } + private loadNodeInfo(nodeId: string) { if (nodeId) { this.isLoading = true; From cdcc770e241a2c49e068ad2aa93e13a77c6397d3 Mon Sep 17 00:00:00 2001 From: pionnegru Date: Thu, 14 Nov 2019 08:16:40 +0200 Subject: [PATCH 3/6] tests --- .../info-drawer/info-drawer.component.spec.ts | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/app/components/info-drawer/info-drawer.component.spec.ts b/src/app/components/info-drawer/info-drawer.component.spec.ts index 57a442605..09ec936db 100644 --- a/src/app/components/info-drawer/info-drawer.component.spec.ts +++ b/src/app/components/info-drawer/info-drawer.component.spec.ts @@ -26,7 +26,10 @@ import { NO_ERRORS_SCHEMA } from '@angular/core'; import { InfoDrawerComponent } from './info-drawer.component'; import { TestBed, ComponentFixture, async } from '@angular/core/testing'; import { Store } from '@ngrx/store'; -import { SetInfoDrawerStateAction } from '@alfresco/aca-shared/store'; +import { + SetInfoDrawerStateAction, + ToggleInfoDrawerAction +} from '@alfresco/aca-shared/store'; import { AppTestingModule } from '../../testing/app-testing.module'; import { AppExtensionService } from '../../extensions/extension.service'; import { ContentApiService } from '@alfresco/aca-shared'; @@ -159,4 +162,23 @@ describe('InfoDrawerComponent', () => { expect(component.displayNode).toBe(response); expect(contentApiService.getNodeInfo).toHaveBeenCalled(); })); + + it('should dispatch close panel on Esc keyboard event', () => { + const nodeMock = { entry: { id: 'nodeId', aspectNames: [] } }; + component.node = nodeMock; + const event = new KeyboardEvent('keydown', { + code: 'Escape', + key: 'Escape', + keyCode: 27 + } as KeyboardEventInit); + + fixture.detectChanges(); + component.ngOnChanges(); + + fixture.debugElement.nativeElement.dispatchEvent(event); + + expect(storeMock.dispatch).toHaveBeenCalledWith( + new ToggleInfoDrawerAction() + ); + }); }); From 741bca5795967352c12fed596edca870b4f0ff0b Mon Sep 17 00:00:00 2001 From: pionnegru Date: Thu, 14 Nov 2019 10:40:40 +0200 Subject: [PATCH 4/6] trigger event when not input --- src/app/components/info-drawer/info-drawer.component.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/components/info-drawer/info-drawer.component.ts b/src/app/components/info-drawer/info-drawer.component.ts index aa22749f2..531797b0c 100644 --- a/src/app/components/info-drawer/info-drawer.component.ts +++ b/src/app/components/info-drawer/info-drawer.component.ts @@ -59,8 +59,11 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy { displayNode: MinimalNodeEntryEntity | SiteEntry; tabs: Array = []; - @HostListener('keydown.escape') onEscapeKeyboardEvent() { - this.close(); + @HostListener('keydown.escape', ['$event']) + onEscapeKeyboardEvent(event: KeyboardEvent): void { + if ((event.target as HTMLElement).tagName !== 'INPUT') { + this.close(); + } } constructor( From 4c840036beb554022770f8ff9f2634cfcd0446d0 Mon Sep 17 00:00:00 2001 From: pionnegru Date: Thu, 5 Dec 2019 13:35:24 +0200 Subject: [PATCH 5/6] remove tag name check --- src/app/components/info-drawer/info-drawer.component.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/components/info-drawer/info-drawer.component.ts b/src/app/components/info-drawer/info-drawer.component.ts index 5d409e1c2..9d514a943 100644 --- a/src/app/components/info-drawer/info-drawer.component.ts +++ b/src/app/components/info-drawer/info-drawer.component.ts @@ -61,9 +61,7 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy { @HostListener('keydown.escape', ['$event']) onEscapeKeyboardEvent(event: KeyboardEvent): void { - if ((event.target as HTMLElement).tagName !== 'INPUT') { - this.close(); - } + this.close(); } constructor( From ab527d7f231a7237846af6047b1c9821b5b10f25 Mon Sep 17 00:00:00 2001 From: pionnegru Date: Thu, 5 Dec 2019 14:14:12 +0200 Subject: [PATCH 6/6] fix test --- src/app/components/info-drawer/info-drawer.component.spec.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/components/info-drawer/info-drawer.component.spec.ts b/src/app/components/info-drawer/info-drawer.component.spec.ts index 2ec81d549..702e0b768 100644 --- a/src/app/components/info-drawer/info-drawer.component.spec.ts +++ b/src/app/components/info-drawer/info-drawer.component.spec.ts @@ -152,8 +152,6 @@ describe('InfoDrawerComponent', () => { })); it('should dispatch close panel on Esc keyboard event', () => { - const nodeMock = { entry: { id: 'nodeId', aspectNames: [] } }; - component.node = nodeMock; const event = new KeyboardEvent('keydown', { code: 'Escape', key: 'Escape', @@ -161,7 +159,6 @@ describe('InfoDrawerComponent', () => { } as KeyboardEventInit); fixture.detectChanges(); - component.ngOnChanges(); fixture.debugElement.nativeElement.dispatchEvent(event);