From cf759261ac899f8fbc181ee77866998c831dcfc0 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 4 Feb 2016 14:08:01 -0500
Subject: [PATCH] docs(demos): add events API demo

references driftyco/ionic-site#397
---
 demos/events/index.ts    | 68 ++++++++++++++++++++++++++++++++++++++++
 demos/events/login.html  | 31 ++++++++++++++++++
 demos/events/logout.html | 20 ++++++++++++
 demos/events/main.html   | 27 ++++++++++++++++
 ionic/util/events.ts     |  1 +
 5 files changed, 147 insertions(+)
 create mode 100644 demos/events/index.ts
 create mode 100644 demos/events/login.html
 create mode 100644 demos/events/logout.html
 create mode 100644 demos/events/main.html

diff --git a/demos/events/index.ts b/demos/events/index.ts
new file mode 100644
index 0000000000..e84d7d0a5d
--- /dev/null
+++ b/demos/events/index.ts
@@ -0,0 +1,68 @@
+import {App, IonicApp, Page, Events} from 'ionic/ionic';
+
+@Page({templateUrl: 'login.html'})
+class Login {
+  constructor(events: Events) {
+    this.events = events;
+
+    this.user = {
+      name: "Administrator",
+      username: "admin"
+    };
+  }
+
+  login() {
+    this.events.publish('user:login');
+  }
+
+
+}
+
+@Page({templateUrl: 'logout.html'})
+class Logout {
+  constructor(events: Events) {
+    this.events = events;
+  }
+
+  logout() {
+    this.events.publish('user:logout');
+  }
+}
+
+@App({
+  templateUrl: 'main.html'
+})
+class ApiDemoApp {
+  constructor(app: IonicApp, events: Events) {
+    this.app = app;
+    this.events = events;
+
+    this.rootView = Login;
+    this.loggedIn = false;
+
+    this.pages = [
+      { title: 'Logout', component: Logout, showLoggedIn: true },
+      { title: 'Login', component: Login, showLoggedIn: false },
+    ];
+
+    this.listenToLoginEvents();
+  }
+
+  openPage(menu, page) {
+    // find the nav component and set what the root page should be
+    // reset the nav to remove previous pages and only have this page
+    // we wouldn't want the back button to show in this scenario
+    let nav = this.app.getComponent('nav');
+    nav.setRoot(page.component);
+  }
+
+  listenToLoginEvents() {
+    this.events.subscribe('user:login', () => {
+      this.loggedIn = true;
+    });
+
+    this.events.subscribe('user:logout', () => {
+      this.loggedIn = false;
+    });
+  }
+}
diff --git a/demos/events/login.html b/demos/events/login.html
new file mode 100644
index 0000000000..515e289c15
--- /dev/null
+++ b/demos/events/login.html
@@ -0,0 +1,31 @@
+
+<ion-navbar *navbar>
+  <button menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+  <ion-title>
+    Events
+  </ion-title>
+</ion-navbar>
+
+<ion-content #content>
+  <h3 margin-left>Login</h3>
+  <p margin>Click the login button to use the credentials below. Then, toggle the menu to see the menu items change.</p>
+
+  <ion-list no-margin>
+    <ion-item>
+      <ion-label stacked primary>Name</ion-label>
+      <ion-input [(ngModel)]="user.name" disabled></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label stacked primary>Username</ion-label>
+      <ion-input [(ngModel)]="user.username" disabled></ion-input>
+    </ion-item>
+  </ion-list>
+
+  <div padding>
+    <button block (click)="login()">Login</button>
+    <button block secondary menuToggle>Toggle Menu</button>
+  </div>
+</ion-content>
diff --git a/demos/events/logout.html b/demos/events/logout.html
new file mode 100644
index 0000000000..0d5c4ac07d
--- /dev/null
+++ b/demos/events/logout.html
@@ -0,0 +1,20 @@
+
+<ion-navbar *navbar>
+  <button menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+
+  <ion-title>
+    Events
+  </ion-title>
+</ion-navbar>
+
+<ion-content #content>
+  <h3 margin-left>Logout</h3>
+  <p margin>Click the logout button to logout. Then, toggle the menu to see the menu items change.</p>
+
+  <div padding>
+    <button block (click)="logout()">Logout</button>
+    <button block secondary menuToggle>Toggle Menu</button>
+  </div>
+</ion-content>
diff --git a/demos/events/main.html b/demos/events/main.html
new file mode 100644
index 0000000000..3704fc995d
--- /dev/null
+++ b/demos/events/main.html
@@ -0,0 +1,27 @@
+<ion-menu #menu [content]="content">
+
+  <ion-toolbar secondary>
+    <ion-title>Left Menu</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <ion-list>
+      <ion-item *ngIf="loggedIn">
+        Welcome, Administrator!
+      </ion-item>
+      <button ion-item menuClose *ngFor="#p of pages" (click)="openPage(menu, p)" [hidden]="(loggedIn == true && p.showLoggedIn == false) || (loggedIn == false && p.showLoggedIn == true)">
+        <ion-label primary>{{p.title}}</ion-label>
+      </button>
+
+      <button ion-item menuToggle>
+        Close Menu
+      </button>
+
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
diff --git a/ionic/util/events.ts b/ionic/util/events.ts
index 3a8055b373..2f61ba55d1 100644
--- a/ionic/util/events.ts
+++ b/ionic/util/events.ts
@@ -17,6 +17,7 @@
  * });
  *
  * ```
+ * @demo /docs/v2/demos/events/
  */
 export class Events {
   private _channels: Array<any> = [];