feat: Added support for chip events

#178
InfomediaLtd · Nov 29, 2016 · 5b64ae7 · 5b64ae7
1 parent f6010cd
commit 5b64ae7
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/app/components/chips.ts b/app/components/chips.ts
@@ -6,7 +6,7 @@ import {Component} from "@angular/core"
         <div class="chip">Tag1<i class="close material-icons">close</i></div>
         <div class="chip">Tag2<i class="close material-icons">close</i></div>
         <br/><hr/>
-        <div class="chips" materialize="material_chip"></div>
+        <div class="chips" materialize="material_chip" (chip.add)="add($event.detail)" (chip.delete)="delete($event.detail)"></div>
         <div class="chips chips-initial" materialize="material_chip" [materializeParams]="[chipsInit]"></div>
         <div class="chips chips-placeholder" materialize="material_chip" [materializeParams]="[chipsPlaceholder]"></div>
         <br/><hr/>
@@ -29,4 +29,11 @@ export class Chips {
     secondaryPlaceholder: 'Enter a tag',
   };
 
+  add(chip) {
+    console.log("Chip added: " + chip.tag);
+  }
+
+  delete(chip) {
+    console.log("Chip deleted: " + chip.tag);
+  }
 }
diff --git a/src/custom-event-polyfill.ts b/src/custom-event-polyfill.ts
@@ -1,6 +1,6 @@
-export function CustomEvent ( type, params = { bubbles: false, cancelable: false, detail: undefined } ) {
+export function CustomEvent ( type, detail = undefined, params = { bubbles: false, cancelable: false } ) {
     var event = document.createEvent( 'CustomEvent' );
-    event.initCustomEvent( type, params.bubbles, params.cancelable, params.detail );
+    event.initCustomEvent( type, params.bubbles, params.cancelable, detail );
     return event;
 }
 if ("Event" in window) {

diff --git a/src/materialize-directive.ts b/src/materialize-directive.ts
@@ -148,6 +148,14 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
               picker.set('select', jQueryElement.val(), ...this._params));
       }
 
+      if (this.isChips()) {
+        const nativeElement = this._el.nativeElement;
+        const jQueryElement = $(nativeElement);
+        jQueryElement.on("chip.add", (e,chip) => nativeElement.dispatchEvent((<any>CustomEvent("chip.add",chip))));
+        jQueryElement.on("chip.delete", (e,chip) => nativeElement.dispatchEvent((<any>CustomEvent("chip.delete",chip))));
+        jQueryElement.on("chip.select", (e,chip) => nativeElement.dispatchEvent((<any>CustomEvent("chip.select",chip))));
+      }
+
       if (this.isTextarea()) {
           this._el.nativeElement.dispatchEvent((<any>CustomEvent("autoresize", {bubbles: true, cancelable: false, detail: undefined})));
       }
@@ -209,6 +217,10 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
       return (this._functionName && this._functionName === "pickadate");
     }
 
+    private isChips() {
+      return (this._functionName && this._functionName === "material_chip");
+    }
+
     private isAutocomplete() {
       return (this._functionName && this._functionName === "autocomplete");
     }