diff --git a/build.py b/build.py index 2852f83432..49f8b3791f 100755 --- a/build.py +++ b/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: diff --git a/buildcfg/base.json b/buildcfg/base.json index 4e3cb3da5a..6b645e49e7 100644 --- a/buildcfg/base.json +++ b/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", diff --git a/buildcfg/ol-all.json b/buildcfg/ol-all.json index 4d0e0b71b6..a808f0f797 100644 --- a/buildcfg/ol-all.json +++ b/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", diff --git a/buildcfg/ol-simple.json b/buildcfg/ol-simple.json index 94f409c4f0..d7e50b1552 100644 --- a/buildcfg/ol-simple.json +++ b/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", diff --git a/buildcfg/ol-whitespace.json b/buildcfg/ol-whitespace.json index 54cdbac634..4364a2769d 100644 --- a/buildcfg/ol-whitespace.json +++ b/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", diff --git a/buildcfg/ol.json b/buildcfg/ol.json index 7cf458f1d7..c64d3fbf0d 100644 --- a/buildcfg/ol.json +++ b/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", diff --git a/examples/bind-input.js b/examples/bind-input.js index 586773a04b..416acbda66 100644 --- a/examples/bind-input.js +++ b/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'); diff --git a/externs/html5.js b/externs/html5.js new file mode 100644 index 0000000000..bc8a63ad2f --- /dev/null +++ b/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; diff --git a/src/ol/dom/input.js b/src/ol/dom/input.js index 6e697d877d..6cf01740f2 100644 --- a/src/ol/dom/input.js +++ b/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(); +};