From ff826da700d822f05203e7c63efcdd44d39442b1 Mon Sep 17 00:00:00 2001 From: Sergey Akopkokhyants Date: Tue, 14 Feb 2017 21:14:20 +0200 Subject: [PATCH] feat(): Migrated to Angular 2.4.7 --- package.json | 18 ++++++------ src/toasty.component.ts | 57 +++++++++++++++++++++--------------- src/toasty.service.ts | 50 +++++++++++++++++++++++-------- tests/toasty.service.spec.ts | 36 +++++++++++++++-------- 4 files changed, 102 insertions(+), 59 deletions(-) diff --git a/package.json b/package.json index 7128826..512cf04 100644 --- a/package.json +++ b/package.json @@ -30,16 +30,16 @@ "typings": "index.d.ts", "homepage": "https://github.com/akserg/ng2-toasty", "peerDependencies": { - "@angular/core": "^2.4.4" + "@angular/core": "^2.4.7" }, "devDependencies": { - "@angular/common": "^2.4.4", - "@angular/compiler": "^2.4.4", - "@angular/compiler-cli": "^2.4.4", - "@angular/core": "^2.4.4", - "@angular/platform-browser": "^2.4.4", - "@angular/platform-browser-dynamic": "^2.4.4", - "@angular/platform-server": "^2.4.4", + "@angular/common": "^2.4.7", + "@angular/compiler": "^2.4.7", + "@angular/compiler-cli": "^2.4.7", + "@angular/core": "^2.4.7", + "@angular/platform-browser": "^2.4.7", + "@angular/platform-browser-dynamic": "^2.4.7", + "@angular/platform-server": "^2.4.7", "@types/hammerjs": "2.0.33", "@types/jasmine": "2.5.37", "@types/node": "6.0.46", @@ -61,7 +61,7 @@ "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^2.0.1", "loader-utils": "~0.2.16", - "reflect-metadata": "0.1.8", + "reflect-metadata": "^0.1.8", "rxjs": "^5.0.3", "semantic-release": "4.3.5", "source-map-loader": "0.1.5", diff --git a/src/toasty.component.ts b/src/toasty.component.ts index 418aba3..44cc5b5 100644 --- a/src/toasty.component.ts +++ b/src/toasty.component.ts @@ -5,7 +5,7 @@ import { Component, Input, OnInit } from '@angular/core'; import { isFunction } from './toasty.utils'; -import { ToastyService, ToastData, ToastyConfig } from './toasty.service'; +import { ToastyService, ToastData, ToastyConfig, ToastyEvent, ToastyEventType } from './toasty.service'; /** * Toasty is container for Toast components @@ -69,30 +69,20 @@ export class ToastyComponent implements OnInit { * directive is instantiated. */ ngOnInit(): any { - // We listen our service to recieve new toasts from it - this.toastyService.getToasts().subscribe((toast: ToastData) => { - // If we've gone over our limit, remove the earliest - // one from the array - if (this.toasts.length >= this.config.limit) { - this.toasts.shift(); + // We listen events from our service + this.toastyService.events.subscribe((event: ToastyEvent) => { + if (event.type === ToastyEventType.ADD) { + // Add the new one + let toast: ToastData = event.value; + this.add(toast); + } else if (event.type === ToastyEventType.CLEAR) { + // Clear the one by number + let id: number = event.value; + this.clear(id); + } else if (event.type === ToastyEventType.CLEAR_ALL) { + // Lets clear all toasts + this.clearAll(); } - // Add toasty to array - this.toasts.push(toast); - // - // If there's a timeout individually or globally, - // set the toast to timeout - if (toast.timeout) { - this._setTimeout(toast); - } - }); - // We listen clear all comes from service here. - this.toastyService.getClear().subscribe((id: number) => { - if (id) { - this.clear(id); - } else { - // Lets clear all toasts - this.clearAll(); - } }); } @@ -104,6 +94,25 @@ export class ToastyComponent implements OnInit { this.clear(toast.id); } + /** + * Add new Toast + */ + add(toast: ToastData) { + // If we've gone over our limit, remove the earliest + // one from the array + if (this.toasts.length >= this.config.limit) { + this.toasts.shift(); + } + // Add toasty to array + this.toasts.push(toast); + // + // If there's a timeout individually or globally, + // set the toast to timeout + if (toast.timeout) { + this._setTimeout(toast); + } + } + /** * Clear individual toast by id * @param id is unique identifier of Toast diff --git a/src/toasty.service.ts b/src/toasty.service.ts index e420c2f..f744f03 100644 --- a/src/toasty.service.ts +++ b/src/toasty.service.ts @@ -2,10 +2,11 @@ // This project is licensed under the terms of the MIT license. // https://github.com/akserg/ng2-toasty -import { Injectable, EventEmitter } from '@angular/core'; +import { Injectable } from '@angular/core'; import { isString, isNumber, isFunction } from './toasty.utils'; -import { Observable } from 'rxjs/Observable'; +import {Subject} from 'rxjs/Subject'; +import {Observable} from 'rxjs/Observable'; /** * Options to configure specific Toast @@ -60,6 +61,16 @@ export class ToastyConfig { theme: 'default' | 'material' | 'bootstrap' = 'default'; } +export enum ToastyEventType { + ADD, + CLEAR, + CLEAR_ALL +} + +export class ToastyEvent { + constructor(public type:ToastyEventType, public value?:any) {} +} + export function toastyServiceFactory(config: ToastyConfig): ToastyService { return new ToastyService(config); } @@ -74,22 +85,25 @@ export class ToastyService { // Init the counter uniqueCounter: number = 0; // ToastData event emitter - private toastsEmitter: EventEmitter = new EventEmitter(); + // private toastsEmitter: EventEmitter = new EventEmitter(); // Clear event emitter - private clearEmitter: EventEmitter = new EventEmitter(); + // private clearEmitter: EventEmitter = new EventEmitter(); + + private eventSource: Subject = new Subject(); + public events: Observable = this.eventSource.asObservable(); constructor(private config: ToastyConfig) {} /** * Get list of toats */ - getToasts(): Observable { - return this.toastsEmitter.asObservable(); - } + // getToasts(): Observable { + // return this.toastsEmitter.asObservable(); + // } - getClear(): Observable { - return this.clearEmitter.asObservable(); - } + // getClear(): Observable { + // return this.clearEmitter.asObservable(); + // } /** * Create Toast of a default type @@ -188,7 +202,8 @@ export class ToastyService { // Push up a new toast item // this.toastsSubscriber.next(toast); - this.toastsEmitter.next(toast); + // this.toastsEmitter.next(toast); + this.emitEvent(new ToastyEvent(ToastyEventType.ADD, toast)); // If we have a onAdd function, call it here if (toastyOptions.onAdd && isFunction(toastyOptions.onAdd)) { toastyOptions.onAdd.call(this, toast); @@ -197,12 +212,14 @@ export class ToastyService { // Clear all toasts clearAll() { - this.clearEmitter.next(null); + // this.clearEmitter.next(null); + this.emitEvent(new ToastyEvent(ToastyEventType.CLEAR_ALL)); } // Clear the specific one clear(id: number) { - this.clearEmitter.next(id); + // this.clearEmitter.next(id); + this.emitEvent(new ToastyEvent(ToastyEventType.CLEAR, id)); } // Checks whether the local option is set, if not, @@ -216,4 +233,11 @@ export class ToastyService { return true; } } + + private emitEvent(event: ToastyEvent) { + if (this.eventSource) { + // Push up a new event + this.eventSource.next(event); + } + } } diff --git a/tests/toasty.service.spec.ts b/tests/toasty.service.spec.ts index 998524b..446e72d 100644 --- a/tests/toasty.service.spec.ts +++ b/tests/toasty.service.spec.ts @@ -3,7 +3,7 @@ import { inject, TestBed } import {Observable} from 'rxjs/Observable'; -import {ToastyService, ToastData, ToastOptions, ToastyConfig} from '../src/toasty.service'; +import {ToastyService, ToastData, ToastOptions, ToastyConfig, ToastyEvent} from '../src/toasty.service'; describe('ToastyService', () => { @@ -22,7 +22,7 @@ describe('ToastyService', () => { it('should return Observable from getToasts method', inject([ToastyService], (service:ToastyService) => { - expect(service.getToasts instanceof Observable); + expect(service.events instanceof Observable); }) ); @@ -31,7 +31,8 @@ describe('ToastyService', () => { it('with string title', inject([ToastyService], (service:ToastyService) => { // We listen our service to recieve new toasts from it - service.getToasts().subscribe((toast:ToastData) => { + service.events.subscribe((event: ToastyEvent) => { + let toast:ToastData = event.value; expect(toast).not.toBeNull(); expect(toast.id).not.toBeNull(); expect(toast.title).toBe('Hi'); @@ -49,7 +50,8 @@ describe('ToastyService', () => { it('with number title', inject([ToastyService], (service:ToastyService) => { // We listen our service to recieve new toasts from it - service.getToasts().subscribe((toast:ToastData) => { + service.events.subscribe((event: ToastyEvent) => { + let toast:ToastData = event.value; expect(toast).not.toBeNull(); expect(toast.id).not.toBeNull(); expect(toast.title).toBe('1000'); @@ -72,7 +74,8 @@ describe('ToastyService', () => { msg: 'message', }; // We listen our service to recieve new toasts from it - service.getToasts().subscribe((toast:ToastData) => { + service.events.subscribe((event: ToastyEvent) => { + let toast:ToastData = event.value; expect(toast).not.toBeNull(); expect(toast.id).not.toBeNull(); expect(toast.title).toBe(options.title); @@ -106,7 +109,7 @@ describe('ToastyService', () => { } }; // We listen our service to recieve new toasts from it - service.getToasts().subscribe((toast:ToastData) => {}); + service.events.subscribe((event: ToastyEvent) => {}); service.default(options); }) ); @@ -117,7 +120,8 @@ describe('ToastyService', () => { it('of info type', inject([ToastyService], (service:ToastyService) => { // We listen our service to recieve new toasts from it - service.getToasts().subscribe((toast:ToastData) => { + service.events.subscribe((event: ToastyEvent) => { + let toast:ToastData = event.value; expect(toast).not.toBeNull(); expect(toast.id).not.toBeNull(); expect(toast.title).toBe('Hi'); @@ -135,7 +139,8 @@ describe('ToastyService', () => { it('of success type', inject([ToastyService], (service:ToastyService) => { // We listen our service to recieve new toasts from it - service.getToasts().subscribe((toast:ToastData) => { + service.events.subscribe((event: ToastyEvent) => { + let toast:ToastData = event.value; expect(toast).not.toBeNull(); expect(toast.id).not.toBeNull(); expect(toast.title).toBe('Hi'); @@ -153,7 +158,8 @@ describe('ToastyService', () => { it('of wait type', inject([ToastyService], (service:ToastyService) => { // We listen our service to recieve new toasts from it - service.getToasts().subscribe((toast:ToastData) => { + service.events.subscribe((event: ToastyEvent) => { + let toast:ToastData = event.value; expect(toast).not.toBeNull(); expect(toast.id).not.toBeNull(); expect(toast.title).toBe('Hi'); @@ -171,7 +177,8 @@ describe('ToastyService', () => { it('of error type', inject([ToastyService], (service:ToastyService) => { // We listen our service to recieve new toasts from it - service.getToasts().subscribe((toast:ToastData) => { + service.events.subscribe((event: ToastyEvent) => { + let toast:ToastData = event.value; expect(toast).not.toBeNull(); expect(toast.id).not.toBeNull(); expect(toast.title).toBe('Hi'); @@ -189,7 +196,8 @@ describe('ToastyService', () => { it('of warning type', inject([ToastyService], (service:ToastyService) => { // We listen our service to recieve new toasts from it - service.getToasts().subscribe((toast:ToastData) => { + service.events.subscribe((event: ToastyEvent) => { + let toast:ToastData = event.value; expect(toast).not.toBeNull(); expect(toast.id).not.toBeNull(); expect(toast.title).toBe('Hi'); @@ -214,7 +222,8 @@ describe('ToastyService', () => { theme: 'material' }; // We listen our service to recieve new toasts from it - service.getToasts().subscribe((toast:ToastData) => { + service.events.subscribe((event: ToastyEvent) => { + let toast:ToastData = event.value; expect(toast).not.toBeNull(); expect(toast.id).not.toBeNull(); expect(toast.title).toBe(options.title); @@ -237,7 +246,8 @@ describe('ToastyService', () => { theme: 'bootstrap' }; // We listen our service to recieve new toasts from it - service.getToasts().subscribe((toast:ToastData) => { + service.events.subscribe((event: ToastyEvent) => { + let toast:ToastData = event.value; expect(toast).not.toBeNull(); expect(toast.id).not.toBeNull(); expect(toast.title).toBe(options.title);