diff --git a/examples/bind-input.html b/examples/bind-input.html new file mode 100644 index 0000000000..e2d46ea516 --- /dev/null +++ b/examples/bind-input.html @@ -0,0 +1,84 @@ + + + + + + + + + + Bind HTML input example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Bind HTML input example

+

Bind an HTML input to an ol object.

+
+

See the bind-input.js source to see how this is done.

+
+
input, bind, openstreetmap
+
+ +
+
+
+ Layer + + + + + + + + + + + +
+
+
+ +
+
+
+ View + + +
+ +
+
+ +
+ +
+ + + + + diff --git a/examples/bind-input.js b/examples/bind-input.js new file mode 100644 index 0000000000..682cfa5e22 --- /dev/null +++ b/examples/bind-input.js @@ -0,0 +1,42 @@ +goog.require('ol.Coordinate'); +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.OpenStreetMap'); + +var layer = new ol.layer.TileLayer({ + source: new ol.source.OpenStreetMap() +}); +var map = new ol.Map({ + layers: [layer], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: new ol.Coordinate(0, 0), + zoom: 2 + }) +}); + +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'); + +var hue = new ol.dom.Input(document.getElementById('hue')); +hue.bindTo('value', layer, 'hue'); + +var saturation = new ol.dom.Input(document.getElementById('saturation')); +saturation.bindTo('value', layer, 'saturation'); + +var contrast = new ol.dom.Input(document.getElementById('contrast')); +contrast.bindTo('value', layer, 'contrast'); + +var brightness = new ol.dom.Input(document.getElementById('brightness')); +brightness.bindTo('value', layer, 'brightness'); + + +var rotation = new ol.dom.Input(document.getElementById('rotation')); +rotation.bindTo('value', map.getView(), 'rotation'); diff --git a/src/ol/dom/input.exports b/src/ol/dom/input.exports new file mode 100644 index 0000000000..0b6e668625 --- /dev/null +++ b/src/ol/dom/input.exports @@ -0,0 +1 @@ +@exportSymbol ol.dom.Input diff --git a/src/ol/dom/input.js b/src/ol/dom/input.js new file mode 100644 index 0000000000..150c7f75ec --- /dev/null +++ b/src/ol/dom/input.js @@ -0,0 +1,118 @@ +goog.provide('ol.dom.Input'); +goog.provide('ol.dom.InputProperty'); + +goog.require('ol.Object'); + + +/** + * @enum {string} + */ +ol.dom.InputProperty = { + VALUE: 'value', + CHECKED: 'checked' +}; + + + +/** + * @constructor + * @extends {ol.Object} + * @param {Element} target Target element. + */ +ol.dom.Input = function(target) { + goog.base(this); + + /** + * @private + * @type {Element} + */ + this.target_ = target; + + goog.events.listen(this.target_, goog.events.EventType.CHANGE, + this.handleInputChanged_, false, this); + + goog.events.listen(this, + ol.Object.getChangedEventType(ol.dom.InputProperty.VALUE), + this.handleValueChanged_, false, this); + goog.events.listen(this, + ol.Object.getChangedEventType(ol.dom.InputProperty.CHECKED), + this.handleCheckedChanged_, false, this); +}; +goog.inherits(ol.dom.Input, ol.Object); + + +/** + * @return {boolean|undefined} checked. + */ +ol.dom.Input.prototype.getChecked = function() { + return /** @type {boolean} */ (this.get(ol.dom.InputProperty.CHECKED)); +}; +goog.exportProperty( + ol.dom.Input.prototype, + 'getChecked', + ol.dom.Input.prototype.getChecked); + + +/** + * @return {string|undefined} input value. + */ +ol.dom.Input.prototype.getValue = function() { + return /** @type {string} */ (this.get(ol.dom.InputProperty.VALUE)); +}; +goog.exportProperty( + ol.dom.Input.prototype, + 'getValue', + ol.dom.Input.prototype.getValue); + + +/** + * @param {string} value Value. + */ +ol.dom.Input.prototype.setValue = function(value) { + this.set(ol.dom.InputProperty.VALUE, value); +}; +goog.exportProperty( + ol.dom.Input.prototype, + 'setValue', + ol.dom.Input.prototype.setValue); + + +/** + * @param {boolean} checked Checked. + */ +ol.dom.Input.prototype.setChecked = function(checked) { + this.set(ol.dom.InputProperty.CHECKED, checked); +}; +goog.exportProperty( + ol.dom.Input.prototype, + 'setChecked', + ol.dom.Input.prototype.setChecked); + + +/** + * @private + */ +ol.dom.Input.prototype.handleInputChanged_ = function() { + if (this.target_.type === 'checkbox' || this.target_.type === 'radio') { + this.setChecked(this.target_.checked); + } else { + this.setValue(this.target_.value); + } +}; + + +/** + * @private + */ +ol.dom.Input.prototype.handleCheckedChanged_ = function() { + this.target_.checked = this.getChecked() ? 'checked' : undefined; +}; + + +/** + * @private + */ +ol.dom.Input.prototype.handleValueChanged_ = function() { + this.target_.value = this.getValue(); +}; +