Simplify controls by registering click events on own elements.
This makes sense for all controls that provide buttons or similar UI elements that don't interfer with map interaction.
This commit is contained in:
@@ -43,9 +43,7 @@ ol.control.Attribution.prototype.setMap = function(map) {
|
|||||||
var staticOverlay = map.getStaticOverlay();
|
var staticOverlay = map.getStaticOverlay();
|
||||||
if (goog.isNull(this.container_)) {
|
if (goog.isNull(this.container_)) {
|
||||||
this.container_ = goog.dom.createDom('div', this.CLS);
|
this.container_ = goog.dom.createDom('div', this.CLS);
|
||||||
// This is not registered as priority listener, so priority listeners
|
goog.events.listen(this.container_, 'click', ol.event.stopPropagation);
|
||||||
// can still get the click event.
|
|
||||||
map.getEvents().register('click', this.stopLinkClick, this);
|
|
||||||
}
|
}
|
||||||
if (!goog.isNull(staticOverlay)) {
|
if (!goog.isNull(staticOverlay)) {
|
||||||
goog.dom.append(staticOverlay, this.container_);
|
goog.dom.append(staticOverlay, this.container_);
|
||||||
@@ -53,16 +51,6 @@ ol.control.Attribution.prototype.setMap = function(map) {
|
|||||||
goog.base(this, 'setMap', map);
|
goog.base(this, 'setMap', map);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent clicks on links in the attribution from getting through to
|
|
||||||
* listeners.
|
|
||||||
*/
|
|
||||||
ol.control.Attribution.prototype.stopLinkClick = function(evt) {
|
|
||||||
var node = evt.target;
|
|
||||||
return node.nodeName !== 'A' ||
|
|
||||||
!goog.dom.getAncestorByClass(node, this.CLS);
|
|
||||||
};
|
|
||||||
|
|
||||||
/** @inheritDoc */
|
/** @inheritDoc */
|
||||||
ol.control.Attribution.prototype.activate = function() {
|
ol.control.Attribution.prototype.activate = function() {
|
||||||
var active = goog.base(this, 'activate');
|
var active = goog.base(this, 'activate');
|
||||||
@@ -96,6 +84,7 @@ ol.control.Attribution.prototype.update = function() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
ol.control.Attribution.prototype.destroy = function() {
|
ol.control.Attribution.prototype.destroy = function() {
|
||||||
|
goog.events.unlisten(this.container_, 'click', ol.event.stopPropagation);
|
||||||
goog.dom.removeNode(this.container_);
|
goog.dom.removeNode(this.container_);
|
||||||
goog.base(this, 'destroy');
|
goog.base(this, 'destroy');
|
||||||
};
|
};
|
||||||
|
|||||||
+34
-33
@@ -15,10 +15,20 @@ ol.control.Zoom = function(opt_autoActivate) {
|
|||||||
|
|
||||||
goog.base(this, opt_autoActivate);
|
goog.base(this, opt_autoActivate);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {Node}
|
||||||
|
*/
|
||||||
|
this.inButton_ = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {Node}
|
||||||
|
*/
|
||||||
|
this.outButton_ = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Activate this control when it is added to a map. Default is true.
|
* Activate this control when it is added to a map. Default is true.
|
||||||
*
|
*
|
||||||
* @type {boolean} autoActivate
|
* @type {boolean}
|
||||||
*/
|
*/
|
||||||
this.autoActivate_ =
|
this.autoActivate_ =
|
||||||
goog.isDef(opt_autoActivate) ? opt_autoActivate : true;
|
goog.isDef(opt_autoActivate) ? opt_autoActivate : true;
|
||||||
@@ -30,38 +40,38 @@ goog.inherits(ol.control.Zoom, ol.control.Control);
|
|||||||
* @param {ol.Map} map
|
* @param {ol.Map} map
|
||||||
*/
|
*/
|
||||||
ol.control.Zoom.prototype.setMap = function(map) {
|
ol.control.Zoom.prototype.setMap = function(map) {
|
||||||
goog.base(this, 'setMap', map);
|
|
||||||
var container = goog.dom.createDom('div', ol.control.Zoom.RES.CLS);
|
var container = goog.dom.createDom('div', ol.control.Zoom.RES.CLS);
|
||||||
var inButton = goog.dom.createDom(
|
this.inButton_ = goog.dom.createDom(
|
||||||
'div', ol.control.Zoom.RES.IN_CLS,
|
'div', ol.control.Zoom.RES.IN_CLS,
|
||||||
goog.dom.createDom('a', {'href': '#zoomIn'})
|
goog.dom.createDom('a', {'href': '#zoomIn'})
|
||||||
);
|
);
|
||||||
goog.dom.setTextContent(
|
goog.dom.setTextContent(
|
||||||
/** @type {Element} */ (inButton.firstChild),
|
/** @type {Element} */ (this.inButton_.firstChild),
|
||||||
ol.control.Zoom.RES.IN_TEXT
|
ol.control.Zoom.RES.IN_TEXT
|
||||||
);
|
);
|
||||||
var outButton = goog.dom.createDom(
|
this.outButton_ = goog.dom.createDom(
|
||||||
'div', ol.control.Zoom.RES.OUT_CLS,
|
'div', ol.control.Zoom.RES.OUT_CLS,
|
||||||
goog.dom.createDom('a', {'href': '#zoomOut'})
|
goog.dom.createDom('a', {'href': '#zoomOut'})
|
||||||
);
|
);
|
||||||
goog.dom.setTextContent(
|
goog.dom.setTextContent(
|
||||||
/** @type {Element} */ (outButton.firstChild),
|
/** @type {Element} */ (this.outButton_.firstChild),
|
||||||
ol.control.Zoom.RES.OUT_TEXT
|
ol.control.Zoom.RES.OUT_TEXT
|
||||||
);
|
);
|
||||||
goog.dom.append(container, inButton, outButton);
|
goog.dom.append(container, this.inButton_, this.outButton_);
|
||||||
|
|
||||||
var overlay = map.getStaticOverlay();
|
var overlay = map.getStaticOverlay();
|
||||||
if (goog.isDefAndNotNull(overlay)) {
|
if (goog.isDefAndNotNull(overlay)) {
|
||||||
goog.dom.append(overlay, container);
|
goog.dom.append(overlay, container);
|
||||||
}
|
}
|
||||||
|
goog.base(this, 'setMap', map);
|
||||||
};
|
};
|
||||||
|
|
||||||
/** @inheritDoc */
|
/** @inheritDoc */
|
||||||
ol.control.Zoom.prototype.activate = function() {
|
ol.control.Zoom.prototype.activate = function() {
|
||||||
var active = goog.base(this, 'activate');
|
var active = goog.base(this, 'activate');
|
||||||
if (active) {
|
if (active) {
|
||||||
this.map_.getEvents().register('click', this.handle, this);
|
goog.events.listen(this.inButton_, 'click', this.handleIn, false, this);
|
||||||
this.map_.getEvents().register('keypress', this.handle, this);
|
goog.events.listen(this.outButton_, 'click', this.handleOut, false, this);
|
||||||
}
|
}
|
||||||
return active;
|
return active;
|
||||||
};
|
};
|
||||||
@@ -70,37 +80,28 @@ ol.control.Zoom.prototype.activate = function() {
|
|||||||
ol.control.Zoom.prototype.deactivate = function() {
|
ol.control.Zoom.prototype.deactivate = function() {
|
||||||
var inactive = goog.base(this, 'deactivate');
|
var inactive = goog.base(this, 'deactivate');
|
||||||
if (inactive) {
|
if (inactive) {
|
||||||
this.map_.getEvents().unregister('click', this.handle, this);
|
goog.events.unlisten(this.inButton_, 'click', this.handleIn, false, this);
|
||||||
this.map_.getEvents().unregister('keypress', this.handle, this);
|
goog.events.unlisten(this.outButton_, 'click', this.handleOut, false, this);
|
||||||
}
|
}
|
||||||
return inactive;
|
return inactive;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {Event} evt
|
* @param {Event} evt
|
||||||
* @return {boolean}
|
|
||||||
*/
|
*/
|
||||||
ol.control.Zoom.prototype.handle = function(evt) {
|
ol.control.Zoom.prototype.handleIn = function(evt) {
|
||||||
var target = /** @type {Node} */ (evt.target),
|
this.map_.zoomIn();
|
||||||
handled = false;
|
evt.preventDefault();
|
||||||
if (evt.type === 'click' || ol.event.isEnterOrSpace(evt)) {
|
evt.stopPropagation();
|
||||||
if (goog.dom.getAncestorByClass(target, ol.control.Zoom.RES.IN_CLS)) {
|
};
|
||||||
this.map_.zoomIn();
|
|
||||||
handled = true;
|
/**
|
||||||
} else
|
* @param {Event} evt
|
||||||
if (goog.dom.getAncestorByClass(target, ol.control.Zoom.RES.OUT_CLS)) {
|
*/
|
||||||
this.map_.zoomOut();
|
ol.control.Zoom.prototype.handleOut = function(evt) {
|
||||||
handled = true;
|
this.map_.zoomOut();
|
||||||
}
|
evt.preventDefault();
|
||||||
if (handled) {
|
evt.stopPropagation();
|
||||||
// Stop default behavior (i.e. don't follow link to anchor)
|
|
||||||
evt.preventDefault();
|
|
||||||
// On Android 2.3, the above does not prevent the link from being
|
|
||||||
// followed, but stopPropagation does.
|
|
||||||
evt.stopPropagation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return !handled;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ol.control.Zoom.prototype.destroy = function() {
|
ol.control.Zoom.prototype.destroy = function() {
|
||||||
|
|||||||
Reference in New Issue
Block a user