diff --git a/CHANGELOG.md b/CHANGELOG.md index 089a178c..30998cf6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,24 @@ +# 1.1.0 (2016-12-02) +### Features +* **toast.component:** When rendering BodyOutputType.Component, the toast instance itself is +applied to the rendered component. This allows the component to interact with the toast as +needed, as well as expose access to the toast id. +Addresses [#84](https://github.com/Stabzs/Angular2-Toaster/issues/84). + +### Bug Fix +* **toaster-container.component:** ResetTimer on mouseout was not being properly called. It is +now called appropriately when mouseoverTimerStop is set to true. Thanks to @kb3eua. + +### Documentation +* **README:** Documented the mouseoverTimerStop config option and documented the addition of the +toast instance to components when using BodyOutputType.Component. Closes +[#83](https://github.com/Stabzs/Angular2-Toaster/issues/83). + + # 1.0.2 (2016-10-12) +### Features +* **Angular 2.0.2 Support:** The library has been tested through to Angular 2.0.2. + ### Bug Fixes * **toast.component:** Dynamic template data would break `bodyOutputType.Component` rendering. A forced `detectChanges()` call has been added after the component is created and loaded to enable @@ -8,9 +28,6 @@ this functionality. Additional test cases were added for the gap. Closes the `Toast` file is an interface-only file, there is nothing to load. Closes [#70](https://github.com/Stabzs/Angular2-Toaster/issues/70). -### Features -* **Angular 2.0.2 Support:** The library has been tested through to Angular 2.0.2. - # 1.0.1 (2016-09-16) ### Bug Fix diff --git a/README.md b/README.md index 1b491800..a36c9a8f 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,9 @@ largely based off of [AngularJS-Toaster](https://github.com/jirikavi/AngularJS-Toaster). [![Build Status](https://travis-ci.org/Stabzs/Angular2-Toaster.svg?branch=master)](https://travis-ci.org/Stabzs/Angular2-Toaster) -[![Coverage Status](https://coveralls.io/repos/github/Stabzs/Angular2-Toaster/badge.svg?branch=master&b=1.0.2)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master) +[![Coverage Status](https://coveralls.io/repos/github/Stabzs/Angular2-Toaster/badge.svg?branch=master&b=1.1.0)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master) -### Current Version 1.0.2 +### Current Version 1.1.0 ## Installation: @@ -335,7 +335,7 @@ The timeout can be configured at three different levels: By passing the timeout config option as an object instead of a number, you can specify the global behavior an info-class type should have. - ```typescript + ``` template: `` @@ -353,10 +353,23 @@ If a type is not defined and specified, a timeout will not be applied, making th showCloseButton: true, closeHtml: '' }; - + this.toasterService.pop(toast); ``` +### Prevent Timeout on Mouseover +By default, all toasts are dismissed when their timer expires, even if you mouse over the toast. +This can be overriden via the container's config. + +```typescript +template: + `` + +public toasterconfig : ToasterConfig = + new ToasterConfig({mouseoverTimerStop: false}); +``` + + ### Body Output Type There are three different types of body renderings that can be passed via the `toast.bodyOutputType` argument: 'Default', 'TrustedHtml', and 'Component'. If a `bodyOutputType` @@ -399,6 +412,11 @@ of the toast. this.toasterService.pop(toast); ``` + The Component BodyOutputType offers the additional flexibilty of attaching the toast instance to + your component. It is recommended that you expose a public property on your component for type + safe access to the toast instance if you need to consume it inside of your component. + Mutation of the toast instance is not recommended. + ### On Show Callback An onShow callback function can be attached to each toast instance. The callback will be invoked upon toast add. diff --git a/package.json b/package.json index d89203b2..f2e03aa8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular2-toaster", - "version": "1.0.2", + "version": "1.1.0", "description": "An Angular 2 Toaster Notification library based on AngularJS-Toaster", "main": "angular2-toaster.js", "scripts": { diff --git a/src/toast.component.ts b/src/toast.component.ts index dd1d8d31..9c9c24b3 100644 --- a/src/toast.component.ts +++ b/src/toast.component.ts @@ -50,7 +50,8 @@ export class ToastComponent { ngAfterViewInit() { if (this.toast.bodyOutputType === this.bodyOutputType.Component) { let component = this.componentFactoryResolver.resolveComponentFactory(this.toast.body); - this.componentBody.createComponent(component, null, this.componentBody.injector); + let componentInstance : any = this.componentBody.createComponent(component, null, this.componentBody.injector); + componentInstance.instance.toast = this.toast; this.changeDetectorRef.detectChanges(); } } @@ -61,4 +62,4 @@ export class ToastComponent { value : { toast: toast, isCloseButton: true} }); } -} +} \ No newline at end of file diff --git a/src/toaster-container.component.spec.ts b/src/toaster-container.component.spec.ts index 02b4d380..d5db0b43 100644 --- a/src/toaster-container.component.spec.ts +++ b/src/toaster-container.component.spec.ts @@ -46,10 +46,15 @@ export class TestDynamicComponentModule { } @Component({ selector: 'bound-dynamic-component', - template: `
{{someValue}} loaded via component
` + template: '
{{someValue}} loaded via component
' }) export class TestBoundDynamicComponent { someValue: string = 'Some value'; + public toast : Toast = null; + + clickHandler() { + this.toast.title = 'updated title'; + } } @NgModule({ bootstrap: [TestBoundDynamicComponent], @@ -979,7 +984,7 @@ describe('ToasterContainerComponent when included as a component with bindings', }); - it('should redner the dynamic bound content', () => { + it('should render the dynamic bound content', () => { fixture.detectChanges(); var container = fixture.debugElement.children[0].componentInstance; var toast: Toast = { @@ -994,6 +999,30 @@ describe('ToasterContainerComponent when included as a component with bindings', expect(container.toasts.length).toBe(1); var renderedToast = fixture.nativeElement.querySelector('bound-dynamic-component'); - expect(renderedToast.innerHTML).toBe('
Some value loaded via component
'); + expect(renderedToast.innerHTML).toBe('
Some value loaded via component
'); + }); + + it('should propagate the toast instance to the component', () => { + fixture.detectChanges(); + var container = fixture.debugElement.children[0].componentInstance; + var toast: Toast = { + type: 'success', + title: 'test', + body: TestBoundDynamicComponent, + bodyOutputType: BodyOutputType.Component + }; + + var toastInstance = fixture.componentInstance.toasterService.pop(toast); + fixture.detectChanges(); + + expect(container.toasts.length).toBe(1); + expect(toastInstance.title).toBe('test'); + + var clickButton = fixture.nativeElement.querySelector('#click'); + clickButton.click(); + + fixture.detectChanges(); + + expect(toastInstance.title).toBe('updated title'); }); }); \ No newline at end of file