StatusBar

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},
     ]
   }

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);
+  }
+}

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'

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);
+    });
+  }
+}