feat(message): Added global service accessors

Author: edcarroll

components/message/message-container.ts

@@ -3,7 +3,7 @@ import { MessageConfig } from "./message-config";
 import { ActiveMessage, SuiActiveMessage } from "./active-message";
 import { SuiMessage } from "./message";
 import { SuiComponentFactory } from "../util/component-factory.service";
-import { MessageController } from "./message-controller";
+import { MessageController, IMessageController } from "./message-controller";
 
 @Component({
     selector: "sui-message-container",
@@ -33,12 +33,6 @@ export class SuiMessageContainer {
     private _messages:ActiveMessage[];
     private _queue:ActiveMessage[];
 
-    @Input()
-    public maxShown:number;
-
-    @Input()
-    public showNewestFirst:boolean;
-
     @Input()
     public set controller(controller:MessageController) {
         controller.registerContainer(this);
@@ -50,32 +44,29 @@ export class SuiMessageContainer {
     constructor(private _componentFactory:SuiComponentFactory, private _element:ElementRef) {
         this._messages = [];
         this._queue = [];
-
-        this.maxShown = 7;
-        this.showNewestFirst = true;
     }
 
-    public show(config:MessageConfig):SuiActiveMessage {
+    public show(config:MessageConfig, maxShown:number, showNewestFirst:boolean):SuiActiveMessage {
         const componentRef = this._componentFactory.createComponent(SuiMessage);
         componentRef.instance.loadConfig(config);
 
         const active = new ActiveMessage(config, componentRef)
-            .onDismiss(() => this.onMessageClose(active));
+            .onDismiss(() => this.onMessageClose(active, showNewestFirst));
 
-        if (this._messages.length < this.maxShown) {
-            this.open(active);
+        if (this._messages.length < maxShown) {
+            this.open(active, showNewestFirst);
         } else {
             this.queue(active);
         }
 
         return active;
     }
 
-    private open(message:ActiveMessage):void {
+    private open(message:ActiveMessage, showNewestFirst:boolean):void {
         this._messages.push(message);
 
         this._componentFactory.attachToView(message.componentRef, this.containerSibling);
-        if (!this.showNewestFirst) {
+        if (!showNewestFirst) {
             this._componentFactory.moveToElement(message.componentRef, this._element.nativeElement);
         }
 
@@ -91,13 +82,13 @@ export class SuiMessageContainer {
         this._messages.forEach(m => m.dismiss());
     }
 
-    private onMessageClose(message:ActiveMessage):void {
+    private onMessageClose(message:ActiveMessage, showNewestFirst:boolean):void {
         this._messages = this._messages.filter(m => m !== message);
 
         if (this._queue.length > 0) {
             const queued = this._queue.shift();
 
-            this.open(queued);
+            this.open(queued, showNewestFirst);
         }
     }
 }

components/message/message-controller.ts

@@ -3,21 +3,31 @@ import { SuiActiveMessage } from "./active-message";
 import { SuiMessageContainer } from "./message-container";
 
 export interface IMessageController {
+    maxShown:number;
+    isNewestOnTop:boolean;
     show(config:MessageConfig):SuiActiveMessage;
     dismissAll():void;
 }
 
 export class MessageController implements IMessageController {
     private _container:SuiMessageContainer;
 
+    public maxShown:number;
+    public isNewestOnTop:boolean;
+
+    constructor() {
+        this.maxShown = 7;
+        this.isNewestOnTop = true;
+    }
+
     public registerContainer(container:SuiMessageContainer):void {
         this._container = container;
     }
 
     public show(config:MessageConfig):SuiActiveMessage {
         this.throwContainerError();
 
-        return this._container.show(config);
+        return this._container.show(config, this.maxShown, this.isNewestOnTop);
     }
 
     public dismissAll():void {

components/message/message-global-container.ts

@@ -55,7 +55,6 @@ export class SuiMessageGlobalContainer {
     public controller:MessageController;
 
     public position:MessagePosition;
-
     public width:number;
 
     public get dynamicClasses():IDynamicClasslist {
@@ -82,11 +81,6 @@ export class SuiMessageGlobalContainer {
         return width;
     }
 
-    constructor() {
-        this.position = MessagePosition.Top;
-        this.width = 480;
-    }
-
     @HostListener("window:resize")
     public onDocumentResize():void {}
 }

components/message/message-service.ts

@@ -1,6 +1,6 @@
 import { Injectable, ComponentRef } from "@angular/core";
 import { SuiComponentFactory } from "../util/component-factory.service";
-import { SuiMessageGlobalContainer } from "./message-global-container";
+import { SuiMessageGlobalContainer, MessagePosition } from "./message-global-container";
 import { MessageController, IMessageController } from "./message-controller";
 import { MessageConfig } from "./message-config";
 import { SuiActiveMessage } from "./active-message";
@@ -14,6 +14,38 @@ export class SuiMessageService implements IMessageController {
         return this._containerRef.instance;
     }
 
+    public get position():MessagePosition {
+        return this._container.position;
+    }
+
+    public set position(position:MessagePosition) {
+        this._container.position = position;
+    }
+
+    public get width():number {
+        return this._container.width;
+    }
+
+    public set width(width:number) {
+        this._container.width = width;
+    }
+
+    public get maxShown():number {
+        return this._controller.maxShown;
+    }
+
+    public set maxShown(max:number) {
+        this._controller.maxShown = max;
+    }
+
+    public get isNewestOnTop():boolean {
+        return this._controller.isNewestOnTop;
+    }
+
+    public set isNewestOnTop(value:boolean) {
+        this._controller.isNewestOnTop = value;
+    }
+
     constructor(private _componentFactory:SuiComponentFactory) {
         this._controller = new MessageController();
 
@@ -22,6 +54,9 @@ export class SuiMessageService implements IMessageController {
 
         this._componentFactory.attachToApplication(this._containerRef);
         this._componentFactory.moveToDocumentBody(this._containerRef);
+
+        this.position = MessagePosition.TopRight;
+        this.width = 480;
     }
 
     public show(config:MessageConfig):SuiActiveMessage {

demo/src/app/pages/test/test.page.html

@@ -10,6 +10,6 @@ <h2 class="ui dividing header">Examples</h2>
         <button class="ui button" (click)="open()">open</button>
         <button class="ui button" (click)="controller.dismissAll()">dismiss all</button>
         <br>
-        <sui-message-container [controller]="controller" [showNewestFirst]="false"></sui-message-container>
+        <sui-message-container [controller]="controller"></sui-message-container>
     </div>
 </demo-page-content>

demo/src/app/pages/test/test.page.ts

@@ -3,6 +3,7 @@ import { SuiMessageContainer } from "../../../../../components/message/message-c
 import { MessageConfig, MessageState } from "../../../../../components/message/message-config";
 import { MessageController } from "../../../../../components/message/message-controller";
 import { SuiMessageService } from "../../../../../components/message/message-service";
+import { MessagePosition } from "../../../../../components/message/message-global-container";
 
 @Component({
     selector: "demo-page-test",
@@ -13,10 +14,12 @@ export class TestPage {
 
     constructor(private _messageService:SuiMessageService) {
         this.controller = new MessageController();
+        this._messageService.position = MessagePosition.BottomRight;
+        this._messageService.isNewestOnTop = true;
     }
 
     public open():void {
-        const message = new MessageConfig("hello, world!", MessageState.Default, "Header");
+        const message = new MessageConfig(Date.now().toString(), MessageState.Default, "Header");
 
         // this.controller.show(message);
         this._messageService.show(message);