172 lines
4.0 KiB
JavaScript
172 lines
4.0 KiB
JavaScript
goog.provide('ol.dom.Input');
|
|
goog.provide('ol.dom.InputProperty');
|
|
|
|
goog.require('goog.events');
|
|
goog.require('goog.events.EventType');
|
|
goog.require('ol.Object');
|
|
|
|
|
|
/**
|
|
* @enum {string}
|
|
*/
|
|
ol.dom.InputProperty = {
|
|
VALUE: 'value',
|
|
VALUE_AS_NUMBER: 'valueAsNumber',
|
|
CHECKED: 'checked'
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
* Helper class for binding HTML input to an {@link ol.Object}.
|
|
*
|
|
* Example:
|
|
*
|
|
* // bind a checkbox with id 'visible' to a layer's visibility
|
|
* var visible = new ol.dom.Input(document.getElementById('visible'));
|
|
* visible.bindTo('checked', layer, 'visible');
|
|
*
|
|
* @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.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);
|
|
};
|
|
goog.inherits(ol.dom.Input, ol.Object);
|
|
|
|
|
|
/**
|
|
* If the input is a checkbox, return whether or not the checbox is checked.
|
|
* @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);
|
|
|
|
|
|
/**
|
|
* Get the value of the input.
|
|
* @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);
|
|
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
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);
|
|
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
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);
|
|
this.setValueAsNumber(this.target_.valueAsNumber);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* @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();
|
|
};
|
|
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ol.dom.Input.prototype.handleValueAsNumberChanged_ = function() {
|
|
// firefox raises an exception if this.target_.valueAsNumber is set instead
|
|
this.target_.value = this.getValueAsNumber();
|
|
};
|