Add ol.dom.Input
This commit is contained in:
Frederic Junod
84
examples/bind-input.html
Normal file
84
examples/bind-input.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Bind HTML input example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
|
||||
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">Bind HTML input example</h4>
|
||||
<p id="shortdesc">Bind an HTML input to an ol object.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">input, bind, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
<div class="span4">
|
||||
<form class="">
|
||||
<fieldset>
|
||||
<legend>Layer</legend>
|
||||
<label class="checkbox" for="visible">
|
||||
<input id="visible" type="checkbox"/>visibility
|
||||
</label>
|
||||
<label>opacity</label>
|
||||
<input id="opacity" type="range" min="0" max="1" step="0.01"/>
|
||||
<label>hue</label>
|
||||
<input id="hue" type="range" min="0.0" max="6.283185307179586" step="0.01"/>
|
||||
<label>saturation</label>
|
||||
<input id="saturation" type="range" min="0" max="5" step="0.01"/>
|
||||
<label>contrast</label>
|
||||
<input id="contrast" type="range" min="0" max="2" step="0.01"/>
|
||||
<label>brightness</label>
|
||||
<input id="brightness" type="range" min="-1" max="1" step="0.01"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="span4">
|
||||
<form class="">
|
||||
<fieldset>
|
||||
<legend>View</legend>
|
||||
<label>rotation</label>
|
||||
<input id="rotation" type="range" min="0.0" max="6.283185307179586" step="0.01"/>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=bind-input" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
42
examples/bind-input.js
Normal file
42
examples/bind-input.js
Normal file
@@ -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');
|
||||
1
src/ol/dom/input.exports
Normal file
1
src/ol/dom/input.exports
Normal file
@@ -0,0 +1 @@
|
||||
@exportSymbol ol.dom.Input
|
||||
118
src/ol/dom/input.js
Normal file
118
src/ol/dom/input.js
Normal file
@@ -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();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user