From 7ca620a47080966934c129d62b9a332fba9a6b06 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 9 Sep 2015 13:51:34 -0500
Subject: [PATCH] Orientation cleanup

---
 ionic/components/app/test/native/index.ts         |  2 ++
 .../app/test/native/pages/device-orientation.ts   | 15 ++++++++++++---
 ionic/config/annotations.ts                       |  4 +++-
 ionic/native/device-motion/device-motion.ts       |  2 +-
 .../device-orientation/device-orientation.ts      |  2 +-
 ionic/native/plugins.ts                           |  1 +
 6 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/ionic/components/app/test/native/index.ts b/ionic/components/app/test/native/index.ts
index 486d3d3826..83638e4188 100644
--- a/ionic/components/app/test/native/index.ts
+++ b/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},
diff --git a/ionic/components/app/test/native/pages/device-orientation.ts b/ionic/components/app/test/native/pages/device-orientation.ts
index 1a1d661bb8..78158798cd 100644
--- a/ionic/components/app/test/native/pages/device-orientation.ts
+++ b/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);
     });
diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts
index e2168bd114..dd23b87741 100644
--- a/ionic/config/annotations.ts
+++ b/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),
diff --git a/ionic/native/device-motion/device-motion.ts b/ionic/native/device-motion/device-motion.ts
index 7489bd164e..c954f6c4c2 100644
--- a/ionic/native/device-motion/device-motion.ts
+++ b/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) {
diff --git a/ionic/native/device-orientation/device-orientation.ts b/ionic/native/device-orientation/device-orientation.ts
index 750f84cec9..57e7c249e5 100644
--- a/ionic/native/device-orientation/device-orientation.ts
+++ b/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) {
diff --git a/ionic/native/plugins.ts b/ionic/native/plugins.ts
index f24fd63c1d..48accba1c4 100644
--- a/ionic/native/plugins.ts
+++ b/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'