From c91b21ac1e785470543592dc5b7ce69969a0f260 Mon Sep 17 00:00:00 2001 From: bdjones2410 Date: Thu, 28 Sep 2017 16:15:59 -0400 Subject: [PATCH 01/12] added the header icon to the modal --- src/locales/resources_en_US.json | 4 ++++ src/modules/modal/modal-configuration.ts | 1 + src/modules/modal/modal-host.component.ts | 4 ++++ src/modules/modal/modal-host.service.ts | 5 +++++ src/modules/modal/modal-instance.ts | 5 +++++ src/modules/modal/modal.component.html | 4 +++- src/modules/modal/modal.component.ts | 8 ++++++++ src/modules/modal/modal.interface.ts | 1 + 8 files changed, 31 insertions(+), 1 deletion(-) diff --git a/src/locales/resources_en_US.json b/src/locales/resources_en_US.json index e58a06cc5..9fe0a3072 100644 --- a/src/locales/resources_en_US.json +++ b/src/locales/resources_en_US.json @@ -599,6 +599,10 @@ "_description": "Text for modal close button", "message": "Close modal" }, + "open_help": { + "_description": "Text for modal header Open Help button", + "message": "Open Help" + }, "modal_footer_cancel_button": { "_description": "Default lable text for modal cancel button", "message": "Cancel" diff --git a/src/modules/modal/modal-configuration.ts b/src/modules/modal/modal-configuration.ts index c5a60ef48..3b6b7c917 100644 --- a/src/modules/modal/modal-configuration.ts +++ b/src/modules/modal/modal-configuration.ts @@ -8,6 +8,7 @@ export class SkyModalConfiguration { public ariaDescribedBy?: string; public ariaLabelledBy?: string; public tiledBody?: boolean; + public helpKey?: string; constructor() { this.fullPage = this.fullPage; diff --git a/src/modules/modal/modal-host.component.ts b/src/modules/modal/modal-host.component.ts index d2bfd4f71..9fe239a74 100644 --- a/src/modules/modal/modal-host.component.ts +++ b/src/modules/modal/modal-host.component.ts @@ -74,6 +74,10 @@ export class SkyModalHostComponent { modalComponentRef.destroy(); } + hostService.openHelp.subscribe((helpKey?: string) => { + modalInstance.openHelp(helpKey); + }); + hostService.close.subscribe(() => { modalInstance.close(); }); diff --git a/src/modules/modal/modal-host.service.ts b/src/modules/modal/modal-host.service.ts index a90470b93..4c6cee388 100644 --- a/src/modules/modal/modal-host.service.ts +++ b/src/modules/modal/modal-host.service.ts @@ -24,6 +24,7 @@ export class SkyModalHostService { private static modalHosts: SkyModalHostService[] = []; public close = new EventEmitter(); + public openHelp = new EventEmitter(); public constructor() { SkyModalHostService.modalHosts.push(this); @@ -39,6 +40,10 @@ export class SkyModalHostService { this.close.emit(); } + public onOpenHelp(helpKey?: string) { + this.openHelp.emit(helpKey); + } + public destroy(): void { SkyModalHostService.modalHosts.splice(SkyModalHostService.modalHosts.indexOf(this)); } diff --git a/src/modules/modal/modal-instance.ts b/src/modules/modal/modal-instance.ts index 6bd695b44..617624ff8 100644 --- a/src/modules/modal/modal-instance.ts +++ b/src/modules/modal/modal-instance.ts @@ -10,6 +10,7 @@ export class SkyModalInstance { public componentInstance: any; public closed = new EventEmitter(); + public openBBHelp = new EventEmitter(); public close(result?: any, reason?: string) { if (reason === undefined) { @@ -27,6 +28,10 @@ export class SkyModalInstance { this.closeModal('save', result); } + public openHelp(helpKey?: string) { + this.openBBHelp.emit(helpKey); + } + private closeModal(type: string, result?: any) { const args = new SkyModalCloseArgs(); diff --git a/src/modules/modal/modal.component.html b/src/modules/modal/modal.component.html index 7a15400e3..9037556d1 100644 --- a/src/modules/modal/modal.component.html +++ b/src/modules/modal/modal.component.html @@ -29,7 +29,9 @@
- +
- + \ No newline at end of file + + + diff --git a/src/app/components/modal/modal-demo.component.ts b/src/app/components/modal/modal-demo.component.ts index 29f89c601..f78123c3e 100644 --- a/src/app/components/modal/modal-demo.component.ts +++ b/src/app/components/modal/modal-demo.component.ts @@ -37,6 +37,9 @@ export class SkyModalDemoComponent { case 'tiledModal': modalInstanceType = SkyModalDemoTiledFormComponent; break; + case 'withHelpHeader': + options.helpKey = 'demo-key.html'; + break; default: break; } @@ -46,5 +49,9 @@ export class SkyModalDemoComponent { modalInstance.closed.first().subscribe((result: SkyModalCloseArgs) => { console.log(`Modal closed with reason: ${result.reason} and data: ${result.data}`); }); + + modalInstance.helpInvoked.subscribe((helpKey: string) => { + console.log(`Modal header help was invoked with the following help key: ${helpKey}`); + }); } } diff --git a/src/modules/modal/modal-instance.ts b/src/modules/modal/modal-instance.ts index 617624ff8..274e860b3 100644 --- a/src/modules/modal/modal-instance.ts +++ b/src/modules/modal/modal-instance.ts @@ -10,7 +10,7 @@ export class SkyModalInstance { public componentInstance: any; public closed = new EventEmitter(); - public openBBHelp = new EventEmitter(); + public helpInvoked = new EventEmitter(); public close(result?: any, reason?: string) { if (reason === undefined) { @@ -29,7 +29,7 @@ export class SkyModalInstance { } public openHelp(helpKey?: string) { - this.openBBHelp.emit(helpKey); + this.helpInvoked.emit(helpKey); } private closeModal(type: string, result?: any) { From 0e0dca068d244118a3837a6faf0d7d6418cabd3e Mon Sep 17 00:00:00 2001 From: bdjones2410 Date: Fri, 29 Sep 2017 14:03:06 -0400 Subject: [PATCH 05/12] visual tests for help header --- .../src/app/modal/modal-visual.component.html | 8 +++++ .../src/app/modal/modal-visual.component.ts | 6 +++- .../src/app/modal/modal.visual-spec.ts | 33 +++++++++++++++++++ 3 files changed, 46 insertions(+), 1 deletion(-) diff --git a/skyux-spa-visual-tests/src/app/modal/modal-visual.component.html b/skyux-spa-visual-tests/src/app/modal/modal-visual.component.html index f2cd52b5c..79b463cd9 100644 --- a/skyux-spa-visual-tests/src/app/modal/modal-visual.component.html +++ b/skyux-spa-visual-tests/src/app/modal/modal-visual.component.html @@ -6,6 +6,14 @@ > Open modal + + +
- From 93217cef2bdfda6dd84814a06104ff0cf2f8ee06 Mon Sep 17 00:00:00 2001 From: bdjones2410 Date: Wed, 4 Oct 2017 14:11:52 -0400 Subject: [PATCH 10/12] unsubscribing --- src/modules/modal/modal-host.component.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/modules/modal/modal-host.component.ts b/src/modules/modal/modal-host.component.ts index 2ba8b8ef9..d03d2ffaa 100644 --- a/src/modules/modal/modal-host.component.ts +++ b/src/modules/modal/modal-host.component.ts @@ -34,7 +34,9 @@ export class SkyModalHostComponent implements OnDestroy { @ViewChild('target', { read: ViewContainerRef }) public target: ViewContainerRef; - private helpSubscription: Subscription; + private openHelpSubscription: Subscription; + private hostCloseSubscription: Subscription; + private modalClosedSubscription: Subscription; constructor( private resolver: ComponentFactoryResolver, @@ -78,20 +80,22 @@ export class SkyModalHostComponent implements OnDestroy { modalComponentRef.destroy(); } - this.helpSubscription = hostService.openHelp.subscribe((helpKey?: string) => { + this.openHelpSubscription = hostService.openHelp.subscribe((helpKey?: string) => { modalInstance.openHelp(helpKey); }); - hostService.close.first().subscribe(() => { + this.hostCloseSubscription = hostService.close.subscribe(() => { modalInstance.close(); }); - modalInstance.closed.first().subscribe(() => { + this.modalClosedSubscription = modalInstance.closed.subscribe(() => { closeModal(); }); } public ngOnDestroy() { - this.helpSubscription.unsubscribe(); + this.openHelpSubscription.unsubscribe(); + this.hostCloseSubscription.unsubscribe(); + this.modalClosedSubscription.unsubscribe(); } } From 81b3870dc961f1b6bf1f7c852fda3612f2eb8683 Mon Sep 17 00:00:00 2001 From: bdjones2410 Date: Wed, 4 Oct 2017 14:37:17 -0400 Subject: [PATCH 11/12] unsubbing --- src/modules/modal/modal-host.component.ts | 30 +++++++++++------------ 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/modules/modal/modal-host.component.ts b/src/modules/modal/modal-host.component.ts index d03d2ffaa..4868d4150 100644 --- a/src/modules/modal/modal-host.component.ts +++ b/src/modules/modal/modal-host.component.ts @@ -4,8 +4,7 @@ import { Injector, ReflectiveInjector, ViewChild, - ViewContainerRef, - OnDestroy + ViewContainerRef } from '@angular/core'; import { SkyModalAdapterService } from './modal-adapter.service'; @@ -22,7 +21,7 @@ import { Subscription } from 'rxjs/Subscription'; styleUrls: ['./modal-host.component.scss'], viewProviders: [SkyModalAdapterService] }) -export class SkyModalHostComponent implements OnDestroy { +export class SkyModalHostComponent { public get modalOpen() { return SkyModalHostService.openModalCount > 0; } @@ -34,10 +33,6 @@ export class SkyModalHostComponent implements OnDestroy { @ViewChild('target', { read: ViewContainerRef }) public target: ViewContainerRef; - private openHelpSubscription: Subscription; - private hostCloseSubscription: Subscription; - private modalClosedSubscription: Subscription; - constructor( private resolver: ComponentFactoryResolver, private adapter: SkyModalAdapterService, @@ -51,6 +46,10 @@ export class SkyModalHostComponent implements OnDestroy { let adapter = this.adapter; let modalOpener: HTMLElement = adapter.getModalOpener(); + let openHelpSubscription: Subscription; + let hostCloseSubscription: Subscription; + let modalClosedSubscription: Subscription; + params.providers.push({ provide: SkyModalHostService, useValue: hostService @@ -77,25 +76,24 @@ export class SkyModalHostComponent implements OnDestroy { if (modalOpener && modalOpener.focus) { modalOpener.focus(); } + + openHelpSubscription.unsubscribe(); + hostCloseSubscription.unsubscribe(); + modalClosedSubscription.unsubscribe(); + modalComponentRef.destroy(); } - this.openHelpSubscription = hostService.openHelp.subscribe((helpKey?: string) => { + openHelpSubscription = hostService.openHelp.subscribe((helpKey?: string) => { modalInstance.openHelp(helpKey); }); - this.hostCloseSubscription = hostService.close.subscribe(() => { + hostCloseSubscription = hostService.close.subscribe(() => { modalInstance.close(); }); - this.modalClosedSubscription = modalInstance.closed.subscribe(() => { + modalClosedSubscription = modalInstance.closed.subscribe(() => { closeModal(); }); } - - public ngOnDestroy() { - this.openHelpSubscription.unsubscribe(); - this.hostCloseSubscription.unsubscribe(); - this.modalClosedSubscription.unsubscribe(); - } } From 1ac1dfa6548ef8af3653f9e64164fdce809e22c8 Mon Sep 17 00:00:00 2001 From: bdjones2410 Date: Wed, 4 Oct 2017 15:27:11 -0400 Subject: [PATCH 12/12] removed unsub stuff --- src/modules/modal/modal-host.component.ts | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/src/modules/modal/modal-host.component.ts b/src/modules/modal/modal-host.component.ts index 4868d4150..9fe239a74 100644 --- a/src/modules/modal/modal-host.component.ts +++ b/src/modules/modal/modal-host.component.ts @@ -13,14 +13,13 @@ import { SkyModalHostService } from './modal-host.service'; import { SkyModalConfigurationInterface as IConfig } from './modal.interface'; import { SkyModalConfiguration } from './modal-configuration'; -import { Subscription } from 'rxjs/Subscription'; - @Component({ selector: 'sky-modal-host', templateUrl: './modal-host.component.html', styleUrls: ['./modal-host.component.scss'], viewProviders: [SkyModalAdapterService] }) + export class SkyModalHostComponent { public get modalOpen() { return SkyModalHostService.openModalCount > 0; @@ -46,10 +45,6 @@ export class SkyModalHostComponent { let adapter = this.adapter; let modalOpener: HTMLElement = adapter.getModalOpener(); - let openHelpSubscription: Subscription; - let hostCloseSubscription: Subscription; - let modalClosedSubscription: Subscription; - params.providers.push({ provide: SkyModalHostService, useValue: hostService @@ -76,23 +71,18 @@ export class SkyModalHostComponent { if (modalOpener && modalOpener.focus) { modalOpener.focus(); } - - openHelpSubscription.unsubscribe(); - hostCloseSubscription.unsubscribe(); - modalClosedSubscription.unsubscribe(); - modalComponentRef.destroy(); } - openHelpSubscription = hostService.openHelp.subscribe((helpKey?: string) => { + hostService.openHelp.subscribe((helpKey?: string) => { modalInstance.openHelp(helpKey); }); - hostCloseSubscription = hostService.close.subscribe(() => { + hostService.close.subscribe(() => { modalInstance.close(); }); - modalClosedSubscription = modalInstance.closed.subscribe(() => { + modalInstance.closed.subscribe(() => { closeModal(); }); }