From 2d4b4f446908bf74b69ac02cff36ce3e70880ca7 Mon Sep 17 00:00:00 2001
From: Ruby Boyarski <rboyarski@infomedia.com.au>
Date: Wed, 24 Aug 2016 15:26:57 +0300
Subject: [PATCH] feat: Added materializeActions, to allow triggering
 Materialize actions on a component or globally

---
 README.md                    | 19 ++++++++++++++++++
 app/components/dialogs.ts    | 22 +++++++++++++++++----
 app/components/dropdown.ts   |  6 +++---
 src/materialize-directive.ts | 38 ++++++++++++++++++++++++------------
 4 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 6258f96..35b36c5 100644
--- a/README.md
+++ b/README.md
@@ -99,6 +99,25 @@ The [Materialize](https://github.com/InfomediaLtd/angular2-materialize/blob/mast
 </div>
 ```
 
+Another useful option is amitting actions on an element. You may want to do that for calling Materialize functions, like closing a modal dialog or triggering a toast. You can do that by setting the **materializeActions** attribute, which accepts an [EventEmitter](https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html) :
+```html
+<div id="modal1" class="modal" materialize [materializeActions]="actions">
+  <div class="modal-content">
+    <h4>Modal Header</h4>
+    <p>A bunch of text</p>
+  </div>
+  <div class="modal-footer">
+    <a class="waves-effect waves-green btn-flat" (click)="closeModel()">Close</a>
+  </div>
+</div>
+```
+```js
+  actions = new EventEmitter<string>();
+  closeModel() {
+    this.actions.emit("closeModal");
+  }
+```
+
 For dynamic select elements apply the **materializeSelectOptions** directive to trigger element updates when the options list changes:
 ```html
 <select materialize="material_select" [materializeSelectOptions]="selectOptions">
diff --git a/app/components/dialogs.ts b/app/components/dialogs.ts
index c19207b..0e07dac 100644
--- a/app/components/dialogs.ts
+++ b/app/components/dialogs.ts
@@ -1,5 +1,5 @@
 import {MaterializeDirective} from "../../src/index";
-import {Component} from "@angular/core"
+import {Component,EventEmitter} from "@angular/core"
 
 @Component({
     selector: "dialogs",
@@ -9,13 +9,15 @@ import {Component} from "@angular/core"
       <a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
 
       <!-- Modal Structure -->
-      <div id="modal1" class="modal">
+      <!--<div id="modal1" class="modal" materialize="closeModal" [materializeParams]="params">-->
+      <div id="modal1" class="modal" materialize [materializeActions]="modalActions">
         <div class="modal-content">
           <h4>Modal Header</h4>
           <p>A bunch of text</p>
         </div>
         <div class="modal-footer">
-          <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
+          <a class="waves-effect waves-green btn-flat" (click)="closeModel()">Close</a>
+          <a class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
         </div>
       </div>
 
@@ -23,12 +25,24 @@ import {Component} from "@angular/core"
       <!-- data-delay controls delay before tooltip shows (in milliseconds)-->
       <a materialize="tooltip" (click)="printSomething()" class="btn tooltipped" data-position="bottom" data-delay="10" data-tooltip="I am tooltip">Hover me!</a>
 
+      <br/><br/>
+
       <!-- toast -->
-      <a class="btn" onclick="Materialize.toast('I am a toast', 4000)">Toast!</a>
+      <a class="btn" onclick="Materialize.toast('I am a toast', 4000)">Toast 1!</a>
+      <a class="btn" (click)="triggerToast()" materialize [materializeParams]="['I am also a toast',4000]" [materializeActions]="globalActions">Toast 2!</a>
     `
 })
 export class Dialogs {
+  modalActions = new EventEmitter<string>();
+  globalActions = new EventEmitter<string>();
+  params = []
   printSomething() {
     console.log("tooltip button clicked!");
   }
+  triggerToast() {
+    this.globalActions.emit('toast')
+  }
+  closeModel() {
+    this.modalActions.emit("closeModal");
+  }
 }
diff --git a/app/components/dropdown.ts b/app/components/dropdown.ts
index b341389..98ab73a 100644
--- a/app/components/dropdown.ts
+++ b/app/components/dropdown.ts
@@ -9,10 +9,10 @@ import {Component} from "@angular/core"
      <a materialize="dropdown" class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
      <!-- Dropdown Structure -->
      <ul id='dropdown1' class='dropdown-content'>
-       <li><a href="#!">one</a></li>
-       <li><a href="#!">two</a></li>
+       <li><a>one</a></li>
+       <li><a>two</a></li>
        <li class="divider"></li>
-       <li><a href="#!">three</a></li>
+       <li><a>three</a></li>
      </ul>
     `
 })
diff --git a/src/materialize-directive.ts b/src/materialize-directive.ts
index 43a1041..e35dbed 100644
--- a/src/materialize-directive.ts
+++ b/src/materialize-directive.ts
@@ -5,7 +5,8 @@ import {
   DoCheck,
   OnChanges,
   OnDestroy,
-  AfterViewInit
+  AfterViewInit,
+  EventEmitter
 } from '@angular/core';
 import {CustomEvent} from "./custom-event-polyfill"
 
@@ -30,18 +31,22 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
 
     private _params:[any] = null;
     private _functionName:string = null;
-
     private previousValue = null;
 
     private changeListenerShouldBeAdded = true;
 
     constructor(private _el: ElementRef) { }
 
-    @Input() set materializeParams(params:any){
+    @Input() set materializeParams(params:any) {
       this._params = params;
       this.performElementUpdates();
     }
-    @Input() set materialize(functionName:string){
+    @Input() set materializeActions(actions:EventEmitter<string>) {
+      actions.subscribe(action => {
+        this.performLocalElementUpdates(action);
+      })
+    }
+    @Input() set materialize(functionName:string) {
       this._functionName = functionName;
     }
 
@@ -151,25 +156,34 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
 
       this.performLocalElementUpdates();
     }
-    private performLocalElementUpdates() {
-      if (this._functionName) {
+    
+    private performLocalElementUpdates(functionName=this._functionName) {
+      if (functionName) {
         const jQueryElement = $(this._el.nativeElement);
-        if (jQueryElement[this._functionName]) {
+        if (jQueryElement[functionName]) {
           if (this._params) {
             if (this._params instanceof Array) {
-              jQueryElement[this._functionName](...this._params);
+              jQueryElement[functionName](...this._params);
             } else {
               throw new Error("Params has to be an array.")
             }
           } else {
-            jQueryElement[this._functionName]();
+            jQueryElement[functionName]();
           }
         } else {
           // fallback to running this function on the global Materialize object
-          if (Materialize[this._functionName]) {
-            Materialize[this._functionName]();
+          if (Materialize[functionName]) {
+            if (this._params) {
+              if (this._params instanceof Array) {
+                Materialize[functionName](...this._params);
+              } else {
+                throw new Error("Params has to be an array.")
+              }
+            } else {
+              Materialize[functionName]();
+            }
           } else {
-            throw new Error("Couldn't find materialize function ''" + this._functionName + "' on element or the global Materialize object.");
+            throw new Error("Couldn't find materialize function ''" + functionName + "' on element or the global Materialize object.");
           }
         }
       }