Merge pull request #898 from bbinet/input-valueasnumber

Add support for binding input value as number

build.py

@@ -316,6 +316,7 @@ def examples_star_json(name, match):
                 '../externs/oli.js',
                 '../externs/proj4js.js',
                 '../externs/tilejson.js',
+                '../externs/html5.js',
             ],
         })
         with open(t.name, 'w') as f:

buildcfg/base.json

@@ -45,7 +45,8 @@
     "../externs/topojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/html5.js"
   ],
 
   "level": "VERBOSE",

buildcfg/ol-all.json

@@ -10,7 +10,8 @@
     "../externs/topojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/html5.js"
   ],
 
   "inherits": "base.json",

buildcfg/ol-simple.json

@@ -19,7 +19,8 @@
     "../externs/topojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/html5.js"
   ],
 
   "inherits": "ol.json",

buildcfg/ol-whitespace.json

@@ -20,7 +20,8 @@
     "../externs/topojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/html5.js"
   ],
 
   "inherits": "ol.json",

buildcfg/ol.json

@@ -20,7 +20,8 @@
     "../externs/topojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/html5.js"
   ],
 
   "inherits": "base.json",

examples/bind-input.js

@@ -22,23 +22,23 @@ var visible = new ol.dom.Input(document.getElementById('visible'));
 visible.bindTo('checked', layer, 'visible');
 
 var opacity = new ol.dom.Input(document.getElementById('opacity'));
-opacity.bindTo('value', layer, 'opacity');
+opacity.bindTo('valueAsNumber', layer, 'opacity');
 
 var hue = new ol.dom.Input(document.getElementById('hue'));
-hue.bindTo('value', layer, 'hue');
+hue.bindTo('valueAsNumber', layer, 'hue');
 
 var saturation = new ol.dom.Input(document.getElementById('saturation'));
-saturation.bindTo('value', layer, 'saturation');
+saturation.bindTo('valueAsNumber', layer, 'saturation');
 
 var contrast = new ol.dom.Input(document.getElementById('contrast'));
-contrast.bindTo('value', layer, 'contrast');
+contrast.bindTo('valueAsNumber', layer, 'contrast');
 
 var brightness = new ol.dom.Input(document.getElementById('brightness'));
-brightness.bindTo('value', layer, 'brightness');
+brightness.bindTo('valueAsNumber', layer, 'brightness');
 
 
 var rotation = new ol.dom.Input(document.getElementById('rotation'));
-rotation.bindTo('value', map.getView(), 'rotation');
+rotation.bindTo('valueAsNumber', map.getView(), 'rotation');
 
 var resolution = new ol.dom.Input(document.getElementById('resolution'));
-resolution.bindTo('value', map.getView(), 'resolution');
+resolution.bindTo('valueAsNumber', map.getView(), 'resolution');

externs/html5.js

@@ -0,0 +1,17 @@
+/**
+ * @fileoverview Definitions for extensions over the W3C's DOM3 specification
+ * in HTML5 which are not yet available with the current release version of
+ * the closure compiler we use.
+ * @see http://dev.w3.org/html5/spec/Overview.html
+ * @externs
+ */
+
+// See issue https://code.google.com/p/closure-compiler/issues/detail?id=1060
+// FIXME: this should be remove when the next closure compiler release is out
+//        with valueAsDate and valueAsNumber externs.
+
+/** @type {Date} */
+HTMLInputElement.prototype.valueAsDate;
+
+/** @type {number} */
+HTMLInputElement.prototype.valueAsNumber;

src/ol/dom/input.js

@@ -11,6 +11,7 @@ goog.require('ol.Object');
  */
 ol.dom.InputProperty = {
   VALUE: 'value',
+  VALUE_AS_NUMBER: 'valueAsNumber',
   CHECKED: 'checked'
 };
 
@@ -44,6 +45,9 @@ 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);
@@ -77,6 +81,19 @@ goog.exportProperty(
     ol.dom.Input.prototype.getValue);
 
 
+/**
+ * Get the value of the input as a number.
+ * @return {number|null|undefined} input value as number.
+ */
+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.
@@ -90,6 +107,19 @@ goog.exportProperty(
     ol.dom.Input.prototype.setValue);
 
 
+/**
+ * Sets the number value of the input.
+ * @param {number} value Number value.
+ */
+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.
@@ -111,6 +141,7 @@ ol.dom.Input.prototype.handleInputChanged_ = function() {
     this.setChecked(this.target_.checked);
   } else {
     this.setValue(this.target_.value);
+    this.setValueAsNumber(this.target_.valueAsNumber);
   }
 };
 
@@ -129,3 +160,12 @@ 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();
+};