From c9686eb4184f85ba9be327f1baf3b8b53fe3bde0 Mon Sep 17 00:00:00 2001
From: Max Lynch <ihasmax@gmail.com>
Date: Tue, 15 Sep 2015 09:44:59 -0500
Subject: [PATCH] StatusBar

---
 demos/native/index.ts               |   2 +
 demos/native/pages/statusbar.ts     |  55 ++++++++++++++
 ionic/native/plugins.ts             |   1 +
 ionic/native/statusbar/statusbar.ts | 108 ++++++++++++++++++++++++++++
 4 files changed, 166 insertions(+)
 create mode 100644 demos/native/pages/statusbar.ts
 create mode 100644 ionic/native/statusbar/statusbar.ts

diff --git a/demos/native/index.ts b/demos/native/index.ts
index 6ede1ea4c5..f4e610c8d1 100644
--- a/demos/native/index.ts
+++ b/demos/native/index.ts
@@ -13,6 +13,7 @@ import {DeviceMotionPage} from 'pages/device-motion';
 import {DeviceOrientationPage} from 'pages/device-orientation';
 import {DialogsPage} from 'pages/dialogs';
 import {GeolocationPage} from 'pages/geolocation';
+import {StatusBarPage} from 'pages/statusbar';
 import {VibrationPage} from 'pages/vibration';
 
 @App({
@@ -33,6 +34,7 @@ class MyApp {
       {title: 'Geolocation', page: GeolocationPage},
       {title: 'Contacts', page: ContactsPage},
       {title: 'Battery', page: BatteryPage},
+      {title: 'StatusBar', page: StatusBarPage},
       {title: 'Vibration', page: VibrationPage},
     ]
   }
diff --git a/demos/native/pages/statusbar.ts b/demos/native/pages/statusbar.ts
new file mode 100644
index 0000000000..56a576b046
--- /dev/null
+++ b/demos/native/pages/statusbar.ts
@@ -0,0 +1,55 @@
+import {IonicView} from 'ionic/ionic';
+
+import {StatusBar} from 'ionic/ionic';
+
+@IonicView({
+  template: `
+  <ion-navbar *navbar>
+    <a menu-toggle>
+      <icon menu></icon>
+    </a>
+    <ion-title>StatusBar</ion-title>
+  </ion-navbar>
+  <ion-content class="padding">
+    <h2>StatusBar</h2>
+    <div>
+      <button primary outline (click)="hide()">Hide</button>
+      <button primary outline (click)="show()">Show</button>
+      <button primary outline (click)="toggleOverlays()">Toggle Overlays</button>
+      <button primary outline (click)="setStyle()">Cycle Style</button>
+    </div>
+    <div>
+      <div>
+        <input [(ng-model)]="colorHex">
+      </div>
+      <button primary outline (click)="setColor()">Set Color</button>
+    </div>
+  </ion-content>
+  `
+})
+export class StatusBarPage {
+  constructor() {
+    this.styles = [
+      StatusBar.DEFAULT,
+      StatusBar.LIGHT_CONTENT,
+      StatusBar.BLACK_TRANSLUCENT,
+      StatusBar.BLACK_OPAQUE
+    ];
+    this.currentStyle = 0;
+
+    this.colorHex = '#fff';
+  }
+  hide() { StatusBar.hide(); }
+  show() { StatusBar.show(); }
+  toggleOverlays() {
+    this.doesOverlay = !!!this.doesOverlay;
+    StatusBar.setOverlays(this.doesOverlay);
+  }
+  setStyle() {
+    StatusBar.setStyle(this.styles[++this.currentStyle]);
+  }
+  setColor() {
+    console.log('Setting color', this.colorHex);
+    StatusBar.setHexColor(this.colorHex);
+  }
+}
diff --git a/ionic/native/plugins.ts b/ionic/native/plugins.ts
index 7a3b3c79c8..cb126056a9 100644
--- a/ionic/native/plugins.ts
+++ b/ionic/native/plugins.ts
@@ -7,4 +7,5 @@ export * from './device/device'
 export * from './device-motion/device-motion'
 export * from './device-orientation/device-orientation'
 export * from './geolocation/geolocation'
+export * from './statusbar/statusbar'
 export * from './vibration/vibration'
diff --git a/ionic/native/statusbar/statusbar.ts b/ionic/native/statusbar/statusbar.ts
new file mode 100644
index 0000000000..76172bd54e
--- /dev/null
+++ b/ionic/native/statusbar/statusbar.ts
@@ -0,0 +1,108 @@
+import * as Rx from 'rx';
+
+import * as util from 'ionic/util';
+import {NativePlugin} from '../plugin';
+
+/**
+ * Manage the appearance of the native status bar.
+ */
+@NativePlugin({
+  name: 'StatusBar',
+  platforms: {
+    cordova: 'cordova-plugin-statusbar'
+  }
+})
+export class StatusBar {
+  static DEFAULT = 0
+  static LIGHT_CONTENT = 1
+  static BLACK_TRANSLUCENT = 2
+  static BLACK_OPAQUE = 3
+
+  /**
+   * Show the StatusBar
+   */
+  static show() {
+    this.ifPlugin(window.StatusBar, () => {
+      window.StatusBar.show();
+    })
+  }
+  
+  /**
+   * Hide the StatusBar
+   */
+  static hide() {
+    this.ifPlugin(window.StatusBar, () => {
+      window.StatusBar.hide();
+    })
+  }
+
+  /**
+   * Hide the StatusBar
+   *
+   * Options:
+   *
+   * StatusBar.DEFAULT
+   * StatusBar.LIGHT_CONTENT
+   * StatusBar.BLACK_TRANSLUCENT
+   * StatusBar.BLACK_OPAQUE
+   *
+   * @param style the style from above
+   */
+  static setStyle(style) {
+    this.ifPlugin(window.StatusBar, () => {
+      switch(style) {
+        case StatusBar.DEFAULT:
+          window.StatusBar.styleDefault();
+          break;
+        case StatusBar.LIGHT_CONTENT:
+          window.StatusBar.styleLightContent();
+          break;
+        case StatusBar.BLACK_TRANSLUCENT:
+          window.StatusBar.styleBlackTranslucent();
+          break;
+        case StatusBar.BLACK_OPAQUE:
+          window.StatusBar.styleBlackOpaque();
+          break;
+      }
+    })
+  }
+
+  /**
+   * Set the status bar to a specific hex color (CSS shorthand supported!).
+   *
+   * iOS note: you must call StatusBar.setOverlay(false) to enable color changing.
+   *
+   * @param hex the hex value of the color.
+   */
+  static setHexColor(hex) {
+    this.ifPlugin(window.StatusBar, () => {
+      window.StatusBar.backgroundColorByHexName(hex);
+    });
+  }
+
+  /**
+   * Set the status bar to a specific named color. Valid options:
+   * black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown.
+   *
+   * iOS note: you must call StatusBar.setOverlay(false) to enable color changing.
+   *
+   * @param name the name of the color (from above)
+   */
+  static setNamedColor(name) {
+    this.ifPlugin(window.StatusBar, () => {
+      window.StatusBar.backgroundColorByName(name);
+    });
+  }
+
+  /**
+   * Set whether the status bar overlays the main app view. The default
+   * is true.
+   *
+   * @param doesOverlay whether the status bar overlays the main app view.
+   */
+  static setOverlays(doesOverlay) {
+    this.ifPlugin(window.StatusBar, () => {
+      window.StatusBar.overlaysWebView(doesOverlay);
+    });
+  }
+}