Add 'tracking' property to ol.DeviceOrientation

examples/device-orientation.html

@@ -37,9 +37,12 @@
 
         <div class="span4">
           <h4 id="title">Device orientation example</h4>
-          <p>&alpha; : <code id="alpha"></code> rad</p>
+          <label class="checkbox" for="track">
-          <p>&beta; : <code id="beta"></code> rad</p>
+            <input id="track" type="checkbox"/>track changes
-          <p>&gamma; : <code id="gamma"></code> rad</p>
+          </label>
+          <p>&alpha; : <code id="alpha"></code></p>
+          <p>&beta; : <code id="beta"></code></p>
+          <p>&gamma; : <code id="gamma"></code></p>
           <p id="shortdesc">Listen to DeviceOrientation events</p>
           <div id="docs">
             <p>See the <a href="device-orientation.js" target="_blank">device-orientation.js source</a> to see how this is done.</p>

examples/device-orientation.js

@@ -2,6 +2,7 @@ goog.require('ol.DeviceOrientation');
 goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
+goog.require('ol.dom.Input');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.OSM');
 
@@ -21,6 +22,8 @@ var map = new ol.Map({
 });
 
 var deviceOrientation = new ol.DeviceOrientation();
+var track = new ol.dom.Input(document.getElementById('track'));
+track.bindTo('checked', deviceOrientation, 'tracking');
 
 deviceOrientation.on('changed', function() {
   document.getElementById('alpha').innerHTML = deviceOrientation.getAlpha();

src/ol/deviceorientation.js

@@ -1,4 +1,3 @@
-// FIXME: tracking property (same as ol.Geolocation)
 // FIXME: event.absolute
 goog.provide('ol.DeviceOrientation');
 goog.provide('ol.DeviceOrientationProperty');
@@ -14,7 +13,8 @@ goog.require('ol.Object');
 ol.DeviceOrientationProperty = {
   ALPHA: 'alpha',
   BETA: 'beta',
-  GAMMA: 'gamma'
+  GAMMA: 'gamma',
+  TRACKING: 'tracking'
 };
 
 
@@ -27,14 +27,30 @@ ol.DeviceOrientation = function() {
 
   goog.base(this);
 
-  if (ol.DeviceOrientation.SUPPORTED) {
+  /**
-    goog.events.listen(window, 'deviceorientation',
+   * @private
-        this.orientationChange_, false, this);
+   * @type {?number}
-  }
+   */
+  this.listenerKey_ = null;
+
+  this.setTracking(false);
+
+  goog.events.listen(this,
+      ol.Object.getChangedEventType(ol.DeviceOrientationProperty.TRACKING),
+      this.handleTrackingChanged_, false, this);
 };
 goog.inherits(ol.DeviceOrientation, ol.Object);
 
 
+/**
+ * @inheritDoc
+ */
+ol.DeviceOrientation.prototype.disposeInternal = function() {
+  this.setTracking(false);
+  goog.base(this, 'disposeInternal');
+};
+
+
 /**
  * Is supported.
  * @const
@@ -102,3 +118,45 @@ goog.exportProperty(
     ol.DeviceOrientation.prototype,
     'getGamma',
     ol.DeviceOrientation.prototype.getGamma);
+
+
+/**
+ * @return {boolean|undefined} tracking.
+ */
+ol.DeviceOrientation.prototype.getTracking = function() {
+  return /** @type {boolean} */ (
+      this.get(ol.DeviceOrientationProperty.TRACKING));
+};
+goog.exportProperty(
+    ol.DeviceOrientation.prototype,
+    'getTracking',
+    ol.DeviceOrientation.prototype.getTracking);
+
+
+/**
+ * @private
+ */
+ol.DeviceOrientation.prototype.handleTrackingChanged_ = function() {
+  if (ol.DeviceOrientation.SUPPORTED) {
+    var tracking = this.getTracking();
+    if (tracking && goog.isNull(this.listenerKey_)) {
+      this.listenerKey_ = goog.events.listen(window, 'deviceorientation',
+          this.orientationChange_, false, this);
+    } else if (!tracking && !goog.isNull(this.listenerKey_)) {
+      goog.events.unlistenByKey(this.listenerKey_);
+      this.listenerKey_ = null;
+    }
+  }
+};
+
+
+/**
+ * @param {boolean} tracking Enable or disable tracking.
+ */
+ol.DeviceOrientation.prototype.setTracking = function(tracking) {
+  this.set(ol.DeviceOrientationProperty.TRACKING, tracking);
+};
+goog.exportProperty(
+    ol.DeviceOrientation.prototype,
+    'setTracking',
+    ol.DeviceOrientation.prototype.setTracking);