Merge pull request #1198 from fredj/bindTo_transform

ol.Object#bindTo: getter and setter

src/ol/dom/input.js

@@ -11,7 +11,6 @@ goog.require('ol.Object');
  */
 ol.dom.InputProperty = {
   VALUE: 'value',
-  VALUE_AS_NUMBER: 'valueAsNumber',
   CHECKED: 'checked'
 };
 
@@ -50,9 +49,6 @@ ol.dom.Input = function(target) {
   goog.events.listen(this,
       ol.Object.getChangeEventType(ol.dom.InputProperty.VALUE),
       this.handleValueChanged_, false, this);
-  goog.events.listen(this,
-      ol.Object.getChangeEventType(ol.dom.InputProperty.VALUE_AS_NUMBER),
-      this.handleValueAsNumberChanged_, false, this);
   goog.events.listen(this,
       ol.Object.getChangeEventType(ol.dom.InputProperty.CHECKED),
       this.handleCheckedChanged_, false, this);
@@ -88,20 +84,6 @@ goog.exportProperty(
     ol.dom.Input.prototype.getValue);
 
 
-/**
- * Get the value of the input as a number.
- * @return {number|null|undefined} input value as number.
- * @todo stability experimental
- */
-ol.dom.Input.prototype.getValueAsNumber = function() {
-  return /** @type {number} */ (this.get(ol.dom.InputProperty.VALUE_AS_NUMBER));
-};
-goog.exportProperty(
-    ol.dom.Input.prototype,
-    'getValueAsNumber',
-    ol.dom.Input.prototype.getValueAsNumber);
-
-
 /**
  * Sets the value of the input.
  * @param {string} value Value.
@@ -116,20 +98,6 @@ goog.exportProperty(
     ol.dom.Input.prototype.setValue);
 
 
-/**
- * Sets the number value of the input.
- * @param {number} value Number value.
- * @todo stability experimental
- */
-ol.dom.Input.prototype.setValueAsNumber = function(value) {
-  this.set(ol.dom.InputProperty.VALUE_AS_NUMBER, value);
-};
-goog.exportProperty(
-    ol.dom.Input.prototype,
-    'setValueAsNumber',
-    ol.dom.Input.prototype.setValueAsNumber);
-
-
 /**
  * Set whether or not a checkbox is checked.
  * @param {boolean} checked Checked.
@@ -152,10 +120,6 @@ ol.dom.Input.prototype.handleInputChanged_ = function() {
     this.setChecked(this.target_.checked);
   } else {
     this.setValue(this.target_.value);
-    var number = this.target_.valueAsNumber;
-    if (goog.isDef(number) && !isNaN(number)) {
-      this.setValueAsNumber(number);
-    }
   }
 };
 
@@ -174,12 +138,3 @@ ol.dom.Input.prototype.handleCheckedChanged_ = function() {
 ol.dom.Input.prototype.handleValueChanged_ = function() {
   this.target_.value = this.getValue();
 };
-
-
-/**
- * @private
- */
-ol.dom.Input.prototype.handleValueAsNumberChanged_ = function() {
-  // firefox raises an exception if this.target_.valueAsNumber is set instead
-  this.target_.value = this.getValueAsNumber();
-};

src/ol/object.js

@@ -11,6 +11,7 @@ goog.provide('ol.ObjectEventType');
 goog.require('goog.array');
 goog.require('goog.events');
 goog.require('goog.events.EventTarget');
+goog.require('goog.functions');
 goog.require('goog.object');
 
 
@@ -22,6 +23,51 @@ ol.ObjectEventType = {
 };
 
 
+
+/**
+ * @constructor
+ * @param {ol.Object} target
+ * @param {string} key
+ * @todo stability experimental
+ */
+ol.ObjectAccessor = function(target, key) {
+
+  /**
+   * @type {ol.Object}
+   */
+  this.target = target;
+
+  /**
+   * @type {string}
+   */
+  this.key = key;
+
+  /**
+   * @type {function(?): ?}
+   */
+  this.from = goog.functions.identity;
+
+  /**
+   * @type {function(?): ?}
+   */
+  this.to = goog.functions.identity;
+};
+
+
+/**
+ * @param {function(?): ?} from A function that transforms the source value
+ *     before it is set to the target.
+ * @param {function(?): ?} to A function that transforms the target value
+ *     before it is set to the source.
+ */
+ol.ObjectAccessor.prototype.transform = function(from, to) {
+  this.from = from;
+  this.to = to;
+
+  this.target.notify(this.key);
+};
+
+
 /**
  * @enum {string}
  */
@@ -87,7 +133,7 @@ ol.Object.capitalize = function(str) {
 
 /**
  * @param {ol.Object} obj Object.
- * @return {Object.<string, {target: ol.Object, key: string}>} Accessors.
+ * @return {Object.<string, ol.ObjectAccessor>} Accessors.
  */
 ol.Object.getAccessors = function(obj) {
   return obj[ol.ObjectProperty.ACCESSORS] ||
@@ -139,14 +185,35 @@ ol.Object.getSetterName = function(key) {
 
 
 /**
- * Binds a View to a Model.
+ * The bindTo method allows you to set up a two-way binding between a
+ * `source` and `target` object. The method returns an
+ * ol.ObjectAccessor with a transform method that lets you transform
+ * values on the way from the source to the target and on the way back.
+ *
+ * For example, if you had two map views (sourceView and targetView)
+ * and you wanted the target view to have double the resolution of the
+ * source view, you could transform the resolution on the way to and
+ * from the target with the following:
+ *
+ *     sourceView.bindTo('resolution', targetView)
+ *       .transform(
+ *         function(sourceResolution) {
+ *           // from sourceView.resolution to targetView.resolution
+ *           return 2 * sourceResolution;
+ *         },
+ *         function(targetResolution) {
+ *           // from targetView.resolution to sourceView.resolution
+ *           return targetResolution / 2;
+ *         }
+ *       );
+ *
  * @param {string} key Key.
  * @param {ol.Object} target Target.
  * @param {string=} opt_targetKey Target key.
+ * @return {ol.ObjectAccessor}
  * @todo stability experimental
  */
-ol.Object.prototype.bindTo =
-    function(key, target, opt_targetKey) {
+ol.Object.prototype.bindTo = function(key, target, opt_targetKey) {
   var targetKey = opt_targetKey || key;
   this.unbind(key);
   var eventType = ol.Object.getChangeEventType(targetKey);
@@ -154,9 +221,11 @@ ol.Object.prototype.bindTo =
   listeners[key] = goog.events.listen(target, eventType, function() {
     this.notifyInternal_(key);
   }, undefined, this);
+  var accessor = new ol.ObjectAccessor(target, targetKey);
   var accessors = ol.Object.getAccessors(this);
-  accessors[key] = {target: target, key: targetKey};
+  accessors[key] = accessor;
   this.notifyInternal_(key);
+  return accessor;
 };
 
 
@@ -179,6 +248,7 @@ ol.Object.prototype.get = function(key) {
     } else {
       value = target.get(targetKey);
     }
+    value = accessor.to(value);
   } else if (this.values_.hasOwnProperty(key)) {
     value = this.values_[key];
   }
@@ -289,6 +359,7 @@ ol.Object.prototype.set = function(key, value) {
     var target = accessor.target;
     var targetKey = accessor.key;
     var setterName = ol.Object.getSetterName(targetKey);
+    value = accessor.from(value);
     if (target[setterName]) {
       target[setterName](value);
     } else {