Orientation cleanup

ionic/components/app/test/native/index.ts

@@ -10,6 +10,7 @@ import {BatteryPage} from 'pages/battery';
 import {ContactsPage} from 'pages/contacts';
 import {DevicePage} from 'pages/device';
 import {DeviceMotionPage} from 'pages/device-motion';
+import {DeviceOrientationPage} from 'pages/device-orientation';
 import {GeolocationPage} from 'pages/geolocation';
 import {VibrationPage} from 'pages/vibration';
 
@@ -26,6 +27,7 @@ class MyApp {
       {title: 'Camera', page: CameraPage},
       {title: 'Device', page: DevicePage},
       {title: 'Device Motion', page: DeviceMotionPage},
+      {title: 'Device Orientation', page: DeviceOrientationPage},
       {title: 'Geolocation', page: GeolocationPage},
       {title: 'Contacts', page: ContactsPage},
       {title: 'Battery', page: BatteryPage},

ionic/components/app/test/native/pages/device-orientation.ts

@@ -1,5 +1,8 @@
 import {IonicView, DeviceOrientation} from 'ionic/ionic';
 
+import {CSS} from 'ionic/util/dom';
+
+import {NgStyle, forwardRef, Host, Component, View, ElementRef} from 'angular2/angular2';
 
 @IonicView({
   template: `
@@ -7,16 +10,22 @@ import {IonicView, DeviceOrientation} from 'ionic/ionic';
     <button aside-toggle>
       <icon menu></icon>
     </button>
-    <ion-title>Device Motion</ion-title>
+    <ion-title>Device Orientation</ion-title>
   </ion-navbar>
   <ion-content class="padding">
+    <div [ng-style]="imageStyle"><img src="http://ionic-io-assets.s3.amazonaws.com/ionitron-love.png" style="max-width: 100%"></div>
   </ion-content>
   `
 })
-export class DeviceMotionPage {
+export class DeviceOrientationPage {
   constructor() {
+    this.imageStyle = {
+    }
+  }
+  onInit() {
     let device = DeviceOrientation.watchHeading().source.subscribe((resp) => {
-      console.log('Device orientation', resp);
+      this.orientation = resp;
+      this.imageStyle['-webkit-transform'] = 'rotate(' + (resp.alpha || 100) + 'deg)';
     }, (err) => {
       console.log('Device err', err);
     });

ionic/config/annotations.ts

@@ -1,4 +1,4 @@
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, Component, Directive, View, forwardRef} from 'angular2/angular2'
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgStyle, Component, Directive, View, forwardRef} from 'angular2/angular2'
 
 import * as util from 'ionic/util';
 import {IonicConfig} from './config';
@@ -31,6 +31,8 @@ export const IonicDirectives = [
   CORE_DIRECTIVES,
   FORM_DIRECTIVES,
 
+  NgStyle
+
   // Content
   forwardRef(() => Aside),
   forwardRef(() => AsideToggle),

ionic/native/device-motion/device-motion.ts

@@ -64,7 +64,7 @@ export class DeviceMotion {
         source: source,
         watchID: watchID,
         clear: () => {
-          window.removeEventListener('devicemotion', cbFn);
+          window.removeEventListener('devicemotion', fnCb);
         }
       }
     } else if(navigator.accelerometer) {

ionic/native/device-orientation/device-orientation.ts

@@ -56,7 +56,7 @@ export class DeviceOrientation {
         source: source,
         watchID: watchID,
         clear: () => {
-          window.removeEventListener('deviceorientation', cbFn);
+          window.removeEventListener('deviceorientation', fnCb);
         }
       }
     } else if(navigator.accelerometer) {

ionic/native/plugins.ts

@@ -4,5 +4,6 @@ export * from './camera/camera'
 export * from './contacts/contacts'
 export * from './device/device'
 export * from './device-motion/device-motion'
+export * from './device-orientation/device-orientation'
 export * from './geolocation/geolocation'
 export * from './vibration/vibration'