ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Don't let button controls interfer with handlers.

Browse Source 
This change involves removal of the map's eventsDiv and introduces an OpenLayers.Events.buttonclick component that adds a buttonclick event which makes sure that only events that are not related to clicking a button propagate. This allows button controls to be on the map's viewPortDiv again.
This commit is contained in:
ahocevar
2012-01-20 03:37:11 +01:00
parent e68acfe91a
commit 05de2b5109
22 changed files with 520 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/OpenLayers.js
View File

@@ -111,6 +111,7 @@
"Rico/Corner.js",
"Rico/Color.js",
"OpenLayers/Events.js",
"OpenLayers/Events/buttonclick.js",
"OpenLayers/Request.js",
"OpenLayers/Request/XMLHttpRequest.js",
"OpenLayers/Projection.js",

110
lib/OpenLayers/Control/LayerSwitcher.js
View File

@@ -7,6 +7,7 @@
* @requires OpenLayers/Control.js
* @requires OpenLayers/Lang.js
* @requires OpenLayers/Console.js
* @requires OpenLayers/Events/buttonclick.js
*/
/**
@@ -130,20 +131,16 @@ OpenLayers.Control.LayerSwitcher =
*/
destroy: function() {
OpenLayers.Event.stopObservingElement(this.div);
OpenLayers.Event.stopObservingElement(this.minimizeDiv);
OpenLayers.Event.stopObservingElement(this.maximizeDiv);
//clear out layers info and unregister their events
this.clearLayersArray("base");
this.clearLayersArray("data");
this.map.events.un({
"addlayer": this.redraw,
"changelayer": this.redraw,
"removelayer": this.redraw,
"changebaselayer": this.redraw,
buttonclick: this.onButtonClick,
addlayer: this.redraw,
changelayer: this.redraw,
removelayer: this.redraw,
changebaselayer: this.redraw,
scope: this
});
@@ -160,10 +157,11 @@ OpenLayers.Control.LayerSwitcher =
OpenLayers.Control.prototype.setMap.apply(this, arguments);
this.map.events.on({
"addlayer": this.redraw,
"changelayer": this.redraw,
"removelayer": this.redraw,
"changebaselayer": this.redraw,
buttonclick: this.onButtonClick,
addlayer: this.redraw,
changelayer: this.redraw,
removelayer: this.redraw,
changebaselayer: this.redraw,
scope: this
});
},
@@ -192,6 +190,20 @@ OpenLayers.Control.LayerSwitcher =
return this.div;
},
/**
* Method: onButtonClick
*
* Parameters:
* evt - {Event}
*/
onButtonClick: function(evt) {
if (evt.button === this.minimizeDiv) {
this.minimizeControl();
} else if (evt.button === this.maximizeDiv) {
this.maximizeControl();
};
},
/**
* Method: clearLayersArray
* User specifies either "base" or "data". we then clear all the
@@ -317,10 +329,11 @@ OpenLayers.Control.LayerSwitcher =
'layer': layer,
'layerSwitcher': this
};
OpenLayers.Event.observe(inputElem, "mouseup",
OpenLayers.Function.bindAsEventListener(this.onInputClick,
context)
var onInputClick = OpenLayers.Function.bindAsEventListener(
this.onInputClick, context
);
OpenLayers.Event.observe(inputElem, "mousedown", onInputClick);
OpenLayers.Event.observe(inputElem, "touchstart", onInputClick);
// create span
var labelSpan = document.createElement("span");
@@ -331,10 +344,8 @@ OpenLayers.Control.LayerSwitcher =
labelSpan.innerHTML = layer.name;
labelSpan.style.verticalAlign = (baseLayer) ? "bottom"
: "baseline";
OpenLayers.Event.observe(labelSpan, "click",
OpenLayers.Function.bindAsEventListener(this.onInputClick,
context)
);
OpenLayers.Event.observe(labelSpan, "click", onInputClick);
OpenLayers.Event.observe(labelSpan, "touchstart", onInputClick);
// create line break
var br = document.createElement("br");
@@ -500,16 +511,6 @@ OpenLayers.Control.LayerSwitcher =
*/
loadContents: function() {
//configure main div
OpenLayers.Event.observe(this.div, "mouseup",
OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
OpenLayers.Event.observe(this.div, "click",
this.ignoreEvent);
OpenLayers.Event.observe(this.div, "mousedown",
OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
OpenLayers.Event.observe(this.div, "dblclick", this.ignoreEvent);
// layers list div
this.layersDiv = document.createElement("div");
this.layersDiv.id = this.id + "_layersDiv";
@@ -561,11 +562,8 @@ OpenLayers.Control.LayerSwitcher =
null,
img,
"absolute");
OpenLayers.Element.addClass(this.maximizeDiv, "maximizeDiv");
OpenLayers.Element.addClass(this.maximizeDiv, "maximizeDiv olButton");
this.maximizeDiv.style.display = "none";
OpenLayers.Event.observe(this.maximizeDiv, "click",
OpenLayers.Function.bindAsEventListener(this.maximizeControl, this)
);
this.div.appendChild(this.maximizeDiv);
@@ -577,53 +575,11 @@ OpenLayers.Control.LayerSwitcher =
null,
img,
"absolute");
OpenLayers.Element.addClass(this.minimizeDiv, "minimizeDiv");
OpenLayers.Element.addClass(this.minimizeDiv, "minimizeDiv olButton");
this.minimizeDiv.style.display = "none";
OpenLayers.Event.observe(this.minimizeDiv, "click",
OpenLayers.Function.bindAsEventListener(this.minimizeControl, this)
);
this.div.appendChild(this.minimizeDiv);
},
/**
* Method: ignoreEvent
*
* Parameters:
* evt - {Event}
*/
ignoreEvent: function(evt) {
OpenLayers.Event.stop(evt);
},
/**
* Method: mouseDown
* Register a local 'mouseDown' flag so that we'll know whether or not
* to ignore a mouseUp event
*
* Parameters:
* evt - {Event}
*/
mouseDown: function(evt) {
this.isMouseDown = true;
this.ignoreEvent(evt);
},
/**
* Method: mouseUp
* If the 'isMouseDown' flag has been set, that means that the drag was
* started from within the LayerSwitcher control, and thus we can
* ignore the mouseup. Otherwise, let the Event continue.
*
* Parameters:
* evt - {Event}
*/
mouseUp: function(evt) {
if (this.isMouseDown) {
this.isMouseDown = false;
this.ignoreEvent(evt);
}
},
CLASS_NAME: "OpenLayers.Control.LayerSwitcher"
});

60
lib/OpenLayers/Control/OverviewMap.js
View File

@@ -6,7 +6,7 @@
/**
* @requires OpenLayers/Control.js
* @requires OpenLayers/BaseTypes.js
* @requires OpenLayers/Events.js
* @requires OpenLayers/Events/buttonclick.js
*/
/**
@@ -157,7 +157,7 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
this.handlers.drag.destroy();
}
this.ovmap && this.ovmap.eventsDiv.removeChild(this.extentRectangle);
this.ovmap && this.ovmap.viewPortDiv.removeChild(this.extentRectangle);
this.extentRectangle = null;
if (this.rectEvents) {
@@ -177,20 +177,19 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
this.element = null;
if (this.maximizeDiv) {
OpenLayers.Event.stopObservingElement(this.maximizeDiv);
this.div.removeChild(this.maximizeDiv);
this.maximizeDiv = null;
}
if (this.minimizeDiv) {
OpenLayers.Event.stopObservingElement(this.minimizeDiv);
this.div.removeChild(this.minimizeDiv);
this.minimizeDiv = null;
}
this.map.events.un({
"moveend": this.update,
"changebaselayer": this.baseLayerDraw,
buttonclick: this.onButtonClick,
moveend: this.update,
changebaselayer: this.baseLayerDraw,
scope: this
});
@@ -247,11 +246,7 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
img,
'absolute');
this.maximizeDiv.style.display = 'none';
this.maximizeDiv.className = this.displayClass + 'MaximizeButton';
OpenLayers.Event.observe(this.maximizeDiv, 'click',
OpenLayers.Function.bindAsEventListener(this.maximizeControl,
this)
);
this.maximizeDiv.className = this.displayClass + 'MaximizeButton olButton';
this.div.appendChild(this.maximizeDiv);
// minimize button div
@@ -263,26 +258,8 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
img,
'absolute');
this.minimizeDiv.style.display = 'none';
this.minimizeDiv.className = this.displayClass + 'MinimizeButton';
OpenLayers.Event.observe(this.minimizeDiv, 'click',
OpenLayers.Function.bindAsEventListener(this.minimizeControl,
this)
);
this.minimizeDiv.className = this.displayClass + 'MinimizeButton olButton';
this.div.appendChild(this.minimizeDiv);
var eventsToStop = ['dblclick','mousedown'];
for (var i=0, len=eventsToStop.length; i<len; i++) {
OpenLayers.Event.observe(this.maximizeDiv,
eventsToStop[i],
OpenLayers.Event.stop);
OpenLayers.Event.observe(this.minimizeDiv,
eventsToStop[i],
OpenLayers.Event.stop);
}
this.minimizeControl();
} else {
// show the overview map
@@ -292,7 +269,11 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
this.update();
}
this.map.events.register('moveend', this, this.update);
this.map.events.on({
buttonclick: this.onButtonClick,
moveend: this.update,
scope: this
});
if (this.maximized) {
this.maximizeControl();
@@ -364,6 +345,21 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
this.updateMapToRect();
},
/**
* Method: onButtonClick
*
* Parameters:
* evt - {Event}
*/
onButtonClick: function(evt) {
if (evt.button === this.minimizeDiv) {
this.minimizeControl();
propagate = false;
} else if (evt.button === this.maximizeDiv) {
this.maximizeControl();
};
},
/**
* Method: maximizeControl
* Unhide the control. Called when the control is in the map viewport.
@@ -488,7 +484,7 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
{controls: [], maxResolution: 'auto',
fallThrough: false}, this.mapOptions);
this.ovmap = new OpenLayers.Map(this.mapDiv, options);
this.ovmap.eventsDiv.appendChild(this.extentRectangle);
this.ovmap.viewPortDiv.appendChild(this.extentRectangle);
// prevent ovmap from being destroyed when the page unloads, because
// the OverviewMap control has to do this (and does it).

81
lib/OpenLayers/Control/PanZoom.js
View File

@@ -6,6 +6,7 @@
/**
* @requires OpenLayers/Control.js
* @requires OpenLayers/Events/buttonclick.js
*/
/**
@@ -64,12 +65,26 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
* APIMethod: destroy
*/
destroy: function() {
if (this.map) {
this.map.events.unregister("buttonclick", this, this.onButtonClick);
}
this.removeButtons();
this.buttons = null;
this.position = null;
OpenLayers.Control.prototype.destroy.apply(this, arguments);
},
/**
* Method: setMap
*
* Properties:
* map - {<OpenLayers.Map>}
*/
setMap: function(map) {
OpenLayers.Control.prototype.setMap.apply(this, arguments);
this.map.events.register("buttonclick", this, this.onButtonClick);
},
/**
* Method: draw
*
@@ -126,29 +141,8 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
btn.style.cursor = "pointer";
//we want to add the outer div
this.div.appendChild(btn);
OpenLayers.Event.observe(btn, "mousedown",
OpenLayers.Function.bindAsEventListener(this.buttonDown, btn));
OpenLayers.Event.observe(btn, "dblclick",
OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
OpenLayers.Event.observe(btn, "click",
OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
btn.action = id;
btn.map = this.map;
if(!this.slideRatio){
var slideFactorPixels = this.slideFactor;
var getSlideFactor = function() {
return slideFactorPixels;
};
} else {
var slideRatio = this.slideRatio;
var getSlideFactor = function(dim) {
return this.map.getSize()[dim] * slideRatio;
};
}
btn.getSlideFactor = getSlideFactor;
btn.className = "olButton";
//we want to remember/reference the outer div
this.buttons.push(btn);
@@ -162,9 +156,6 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
* btn - {Object}
*/
_removeButton: function(btn) {
OpenLayers.Event.stopObservingElement(btn);
btn.map = null;
btn.getSlideFactor = null;
this.div.removeChild(btn);
OpenLayers.Util.removeItem(this.buttons, btn);
},
@@ -179,31 +170,14 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
},
/**
* Method: doubleClick
*
* Parameters:
* evt - {Event}
*
* Returns:
* {Boolean}
*/
doubleClick: function (evt) {
OpenLayers.Event.stop(evt);
return false;
},
/**
* Method: buttonDown
* Method: onButtonClick
*
* Parameters:
* evt - {Event}
*/
buttonDown: function (evt) {
if (!OpenLayers.Event.isLeftClick(evt)) {
return;
}
switch (this.action) {
onButtonClick: function(evt) {
var btn = evt.button;
switch (btn.action) {
case "panup":
this.map.pan(0, -this.getSlideFactor("h"));
break;
@@ -226,8 +200,21 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
this.map.zoomToMaxExtent();
break;
}
},
OpenLayers.Event.stop(evt);
/**
* Method: getSlideFactor
*
* Parameters:
* dim - {String} "w" or "h" (for width or height).
*
* Returns:
* {Number} The slide factor for panning in the requested direction.
*/
getSlideFactor: function(dim) {
return this.slideRatio ?
this.map.getSize()[dim] * this.slideRatio :
this.slideFactor;
},
CLASS_NAME: "OpenLayers.Control.PanZoom"

43
lib/OpenLayers/Control/Panel.js
View File

@@ -5,6 +5,7 @@
/**
* @requires OpenLayers/Control.js
* @requires OpenLayers/Events/buttonclick.js
*/
/**
@@ -103,6 +104,9 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
* APIMethod: destroy
*/
destroy: function() {
if (this.map) {
this.map.events.unregister("buttonclick", this, this.onButtonClick);
}
OpenLayers.Control.prototype.destroy.apply(this, arguments);
for (var ctl, i = this.controls.length - 1; i >= 0; i--) {
ctl = this.controls[i];
@@ -112,7 +116,6 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
deactivate: this.iconOff
});
}
OpenLayers.Event.stopObservingElement(ctl.panel_div);
ctl.panel_div = null;
}
this.activeState = null;
@@ -166,6 +169,12 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
*/
draw: function() {
OpenLayers.Control.prototype.draw.apply(this, arguments);
if (this.div.parentNode === this.map.viewPortDiv) {
map.events.register("buttonclick", this, this.onButtonClick);
} else {
this.events.element = this.div;
this.events.register("buttonclick", this, this.onButtonClick);
}
this.addControlsToMap(this.controls);
return this.div;
},
@@ -244,17 +253,11 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
// since they need to pass through.
for (var i=0, len=controls.length; i<len; i++) {
var element = document.createElement("div");
element.className = controls[i].displayClass + "ItemInactive";
element.className = controls[i].displayClass + "ItemInactive olButton";
controls[i].panel_div = element;
if (controls[i].title != "") {
controls[i].panel_div.title = controls[i].title;
}
OpenLayers.Event.observe(controls[i].panel_div, "click",
OpenLayers.Function.bind(this.onClick, this, controls[i]));
OpenLayers.Event.observe(controls[i].panel_div, "dblclick",
OpenLayers.Function.bind(this.onDoubleClick, this, controls[i]));
OpenLayers.Event.observe(controls[i].panel_div, "mousedown",
OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop));
}
if (this.map) { // map.addControl() has already been called on the panel
@@ -312,18 +315,20 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
},
/**
* Method: onClick
* Method: onButtonClick
*
* Parameters:
* evt - {Event}
*/
onClick: function (ctrl, evt) {
OpenLayers.Event.stop(evt ? evt : window.event);
this.activateControl(ctrl);
},
/**
* Method: onDoubleClick
*/
onDoubleClick: function(ctrl, evt) {
OpenLayers.Event.stop(evt ? evt : window.event);
onButtonClick: function (evt) {
var controls = this.controls,
button = evt.button || OpenLayers.Event.element(evt);
for (var i=controls.length-1; i>=0; --i) {
if (controls[i].panel_div === button) {
this.activateControl(controls[i]);
break;
}
}
},
/**

86
lib/OpenLayers/Events.js
View File

@@ -155,13 +155,18 @@ OpenLayers.Event = {
* Parameters:
* event - {Event}
* allowDefault - {Boolean} If true, we stop the event chain but
* still allow the default browser
* behaviour (text selection, radio-button
* clicking, etc)
* Default false
* still allow the default browser behaviour (text selection,
* radio-button clicking, etc). Default is false.
* terminate - {Boolean} If true, no more listeners registered through an
* <OpenLayers.Events> instance on the same event on the same element
* will receive this event. Extensions that call <stop> should set
* this to true. Default is false.
*/
stop: function(event, allowDefault) {
stop: function(event, allowDefault, terminate) {
if (terminate) {
event._terminated = true;
}
if (!allowDefault) {
if (event.preventDefault) {
event.preventDefault();
@@ -451,6 +456,26 @@ OpenLayers.Events = OpenLayers.Class({
*/
includeXY: false,
/**
* Property: extensions
* {Object} Event extensions registered with this instance. Keys are
* event types, values are <OpenLayers.Events.*> extension instances.
*
* Extensions create an event in addition to browser events, which usually
* fires when a sequence of browser events is completed. Extensions are
* automatically instantiated when a listener is registered for an event
* provided by an extension.
*
* Extesions are created in the <OpenLayers.Events> namespace using
* <OpenLayers.Class>, and named after the event they provide.
* The constructor recieves the target <OpenLayers.Events> instance as
* argument. Extensions are expected to have an "observe" method, which is
* called to register its sequence events on the target's dom element,
* using <OpenLayers.Event.observe>. See <OpenLayers.Events.buttonclick>
* for a reference implementation.
*/
extensions: null,
/**
* Method: clearMouseListener
* A version of <clearMouseCache> that is bound to this instance so that
@@ -478,6 +503,7 @@ OpenLayers.Events = OpenLayers.Class({
this.object = object;
this.fallThrough = fallThrough;
this.listeners = {};
this.extensions = {};
// if a dom element is specified, add a listeners list
// for browser events on the element and register them
@@ -500,6 +526,12 @@ OpenLayers.Events = OpenLayers.Class({
* APIMethod: destroy
*/
destroy: function () {
for (var e in this.extensions) {
if (typeof this.extensions[e].destroy === "function") {
this.extensions[e].destroy();
}
}
this.extensions = null;
if (this.element) {
OpenLayers.Event.stopObservingElement(this.element);
if(this.element.hasScrollEvent) {
@@ -531,9 +563,15 @@ OpenLayers.Events = OpenLayers.Class({
*
* Parameters:
* element - {HTMLDOMElement} a DOM element to attach browser events to
* options - {Object} Additional options for his method.
*
* Valid options:
* keepElement - {Boolean} If set to true, the instance will not stop
* observing events on an element it was previously attached to.
*/
attachToElement: function (element) {
if(this.element) {
attachToElement: function (element, options) {
options = options || {};
if(this.element && !options.keepElement) {
OpenLayers.Event.stopObservingElement(this.element);
}
this.element = element;
@@ -547,6 +585,33 @@ OpenLayers.Events = OpenLayers.Class({
OpenLayers.Event.observe(element, "dragstart", OpenLayers.Event.stop);
},
/**
* Method: addExtension
* Adds an extension event to this instance.
*
* Parameters:
* type - {String} the name of the extension event type to add
*/
addExtension: function(type) {
if (this.element.attachEvent && !this.element.addEventListener) {
// old IE - last registered, first triggered. No need to
// re-register the events to get them in a working order
this.extensions[type] = new OpenLayers.Events[type](this);
} else {
// Other browsers - last registered, last triggered. We stop
// observing the element, let the extensions register their browser
// events, and then we attach this instance to the element again.
OpenLayers.Event.stopObservingElement(this.element);
for (var t in this.extensions) {
if (typeof this.extensions[t].observe === "function") {
this.extensions[t].observe();
}
}
this.extensions[type] = new OpenLayers.Events[type](this);
this.attachToElement(this.element, {keepElement: true});
}
},
/**
* APIMethod: on
* Convenience method for registering listeners with a common scope.
@@ -612,6 +677,9 @@ OpenLayers.Events = OpenLayers.Class({
* the events queue instead of to the end.
*/
register: function (type, obj, func, priority) {
if (type in OpenLayers.Events && !this.extensions[type]) {
this.addExtension(type);
}
if (func != null) {
if (obj == null) {
obj = this.object;
@@ -784,8 +852,8 @@ OpenLayers.Events = OpenLayers.Class({
*/
handleBrowserEvent: function (evt) {
var type = evt.type, listeners = this.listeners[type];
if(!listeners || listeners.length == 0) {
// noone's listening, bail out
if(!listeners || listeners.length == 0 || evt._terminated) {
// noone's listening or event was terminated through <stop>, bail out
return;
}
// add clientX & clientY to all events - corresponds to average x, y

150
lib/OpenLayers/Events/buttonclick.js Normal file
View File

@@ -0,0 +1,150 @@
/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for
* full list of contributors). Published under the Clear BSD license.
* See http://svn.openlayers.org/trunk/openlayers/license.txt for the
* full text of the license. */
/**
* @requires OpenLayers/Events.js
*/
/**
* Class: OpenLayers.Events.buttonclick
* Extension event type for handling buttons on top of a dom element. This
* event type fires "buttonclick" on its <target> when a button was
* clicked. Buttons are detected by the "olButton" class.
*
* This event type makes sure that button clicks do not interfer with other
* events that are registered on the same <element>.
*/
OpenLayers.Events.buttonclick = OpenLayers.Class({
/**
* APIProperty: target
* {<OpenLayers.Events>} The events instance that the buttonclick event will
* be triggered on.
*/
target: null,
/**
* Property: events
* {Array} Events to observe and conditionally stop from propagating when
* an element with the olButton (or its olAlphaImg child) is clicked.
*/
events: [
'mousedown', 'mouseup', 'click', 'dblclick',
'touchstart', 'touchmove', 'touchend'
],
/**
* Property: startRegEx
* {RegExp} Regular expression to test Event.type for events that start
* a buttonclick sequence.
*/
startRegEx: /^mousedown|touchstart$/,
/**
* Property: cancelRegEx
* {RegExp} Regular expression to test Event.type for events that cancel
* a buttonclick sequence.
*/
cancelRegEx: /^touchmove$/,
/**
* Property: completeRegEx
* {RegExp} Regular expression to test Event.type for events that complete
* a buttonclick sequence.
*/
completeRegEx: /^mouseup|touchend$/,
/**
* Constructor: OpenLayers.Events.buttonclick
* Construct a buttonclick event type. Applications are not supposed to
* create instances of this class - they are created on demand by
* <OpenLayers.Events> instances.
*
* Parameters:
* options - {<OpenLayers.Events>|Object} Target instance of
* <OpenLayers.Events> or configuration properties for this
* <OpenLayers.Events.buttonclick> instance.
*
* Required configuration properties:
* target - {<OpenLayers.Events>} The events instance that the buttonclick
* event will be triggered on.
*/
initialize: function(options) {
if (options instanceof OpenLayers.Events) {
options = {target: options};
}
OpenLayers.Util.extend(this, options);
this._buttonClick = OpenLayers.Function.bindAsEventListener(
this.buttonClick, this
);
this.observe();
},
/**
* Method: observe
*/
observe: function() {
for (var i=this.events.length-1; i>=0; --i) {
OpenLayers.Event.observe(
this.target.element, this.events[i], this._buttonClick
);
};
},
/**
* Method: stopObserving
*/
stopObserving: function() {
for (var i=this.events.length-1; i>=0; --i) {
OpenLayers.Event.stopObserving(
this.target.element, this.events[i], this._buttonClick
);
}
},
/**
* Method: destroy
*/
destroy: function() {
this.stopObserving()
},
/**
* Method: buttonClick
* Check if a button was clicked, and fire the buttonclick event
*
* Parameters:
* evt - {Event}
*/
buttonClick: function(evt) {
if (OpenLayers.Event.isLeftClick(evt) || !~evt.type.indexOf("mouse")) {
var element = OpenLayers.Event.element(evt);
if (OpenLayers.Element.hasClass(element, "olAlphaImg")) {
element = element.parentNode;
}
if (OpenLayers.Element.hasClass(element, "olButton")) {
if (this._buttonStarted) {
if (this.completeRegEx.test(evt.type)) {
this.target.triggerEvent("buttonclick", {
button: element
});
}
if (this.cancelRegEx.test(evt.type)) {
delete this._buttonStarted;
}
OpenLayers.Event.stop(evt, false, true);
}
if (this.startRegEx.test(evt.type)) {
this._buttonStarted = true;
OpenLayers.Event.stop(evt, false, true);
}
} else {
delete this._buttonStarted;
}
}
}
});

8
lib/OpenLayers/Handler/Box.js
View File

@@ -103,10 +103,10 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
this.zoomBox.className = this.boxDivClassName;
this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
this.map.eventsDiv.appendChild(this.zoomBox);
this.map.viewPortDiv.appendChild(this.zoomBox);
OpenLayers.Element.addClass(
this.map.eventsDiv, "olDrawBox"
this.map.viewPortDiv, "olDrawBox"
);
},
@@ -154,11 +154,11 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
* Remove the zoombox from the screen and nullify our reference to it.
*/
removeBox: function() {
this.map.eventsDiv.removeChild(this.zoomBox);
this.map.viewPortDiv.removeChild(this.zoomBox);
this.zoomBox = null;
this.boxOffsets = null;
OpenLayers.Element.removeClass(
this.map.eventsDiv, "olDrawBox"
this.map.viewPortDiv, "olDrawBox"
);
},

2
lib/OpenLayers/Handler/Drag.js
View File

@@ -442,7 +442,7 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
* {Boolean} Let the event propagate.
*/
mouseout: function (evt) {
if (this.started && OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
if (this.started && OpenLayers.Util.mouseLeft(evt, this.map.viewPortDiv)) {
if(this.documentDrag === true) {
this.addDocumentEvents();
} else {

2
lib/OpenLayers/Handler/Hover.js
View File

@@ -107,7 +107,7 @@ OpenLayers.Handler.Hover = OpenLayers.Class(OpenLayers.Handler, {
* {Boolean} Continue propagating this event.
*/
mouseout: function(evt) {
if (OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
if (OpenLayers.Util.mouseLeft(evt, this.map.viewPortDiv)) {
this.clearTimer();
this.callback('move', [evt]);
}

2
lib/OpenLayers/Handler/Point.js
View File

@@ -545,7 +545,7 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
* evt - {Event} The browser event
*/
mouseout: function(evt) {
if(OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
if(OpenLayers.Util.mouseLeft(evt, this.map.viewPortDiv)) {
this.stoppedDown = this.stopDown;
this.mouseDown = false;
}

2
lib/OpenLayers/Layer/EventPane.js
View File

@@ -108,7 +108,7 @@ OpenLayers.Layer.EventPane = OpenLayers.Class(OpenLayers.Layer, {
}
if (this.isFixed) {
this.map.eventsDiv.appendChild(this.pane);
this.map.viewPortDiv.appendChild(this.pane);
} else {
this.map.layerContainerDiv.appendChild(this.pane);
}

13
lib/OpenLayers/Map.js
View File

@@ -513,17 +513,8 @@ OpenLayers.Map = OpenLayers.Class({
this.viewPortDiv.className = "olMapViewport";
this.div.appendChild(this.viewPortDiv);
// the eventsDiv is where we listen for all map events
var eventsDiv = document.createElement("div");
eventsDiv.id = this.id + "_events";
eventsDiv.style.position = "absolute";
eventsDiv.style.width = "100%";
eventsDiv.style.height = "100%";
eventsDiv.style.zIndex = this.Z_INDEX_BASE.Control - 1;
this.viewPortDiv.appendChild(eventsDiv);
this.eventsDiv = eventsDiv;
this.events = new OpenLayers.Events(
this, this.eventsDiv, null, this.fallThrough,
this, this.viewPortDiv, null, this.fallThrough,
{includeXY: true}
);
@@ -534,7 +525,7 @@ OpenLayers.Map = OpenLayers.Class({
this.layerContainerDiv.style.height = '100px';
this.layerContainerDiv.style.zIndex=this.Z_INDEX_BASE['Popup']-1;
this.eventsDiv.appendChild(this.layerContainerDiv);
this.viewPortDiv.appendChild(this.layerContainerDiv);
this.updateSize();
if(this.eventListeners instanceof Object) {

1
lib/OpenLayers/Util.js
View File

@@ -416,6 +416,7 @@ OpenLayers.Util.createAlphaImageDiv = function(id, px, sz, imgURL,
var div = OpenLayers.Util.createDiv();
var img = OpenLayers.Util.createImage(null, null, null, null, null, null,
null, delayDisplay);
img.className = "olAlphaImg";
div.appendChild(img);
OpenLayers.Util.modifyAlphaImageDiv(div, id, px, sz, imgURL, position,

10
lib/deprecated.js
View File

@@ -1202,7 +1202,7 @@ OpenLayers.Control.MouseDefaults = OpenLayers.Class(OpenLayers.Control, {
this.zoomBox.style.opacity = "0.50";
this.zoomBox.style.fontSize = "1px";
this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
this.map.eventsDiv.appendChild(this.zoomBox);
this.map.viewPortDiv.appendChild(this.zoomBox);
}
document.onselectstart = OpenLayers.Function.False;
OpenLayers.Event.stop(evt);
@@ -1275,7 +1275,7 @@ OpenLayers.Control.MouseDefaults = OpenLayers.Class(OpenLayers.Control, {
*/
defaultMouseOut: function (evt) {
if (this.mouseDragStart != null &&
OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
OpenLayers.Util.mouseLeft(evt, this.map.viewPortDiv)) {
if (this.zoomBox) {
this.removeZoomBox();
}
@@ -1339,7 +1339,7 @@ OpenLayers.Control.MouseDefaults = OpenLayers.Class(OpenLayers.Control, {
* Remove the zoombox from the screen and nullify our reference to it.
*/
removeZoomBox: function() {
this.map.eventsDiv.removeChild(this.zoomBox);
this.map.viewPortDiv.removeChild(this.zoomBox);
this.zoomBox = null;
},
@@ -1602,7 +1602,7 @@ OpenLayers.Control.MouseToolbar = OpenLayers.Class(
this.zoomBox.style.opacity = "0.50";
this.zoomBox.style.fontSize = "1px";
this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
this.map.eventsDiv.appendChild(this.zoomBox);
this.map.viewPortDiv.appendChild(this.zoomBox);
this.performedDrag = true;
break;
case "measure":
@@ -1769,7 +1769,7 @@ OpenLayers.Control.MouseToolbar = OpenLayers.Class(
*/
defaultMouseOut: function (evt) {
if (this.mouseDragStart != null
&& OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
&& OpenLayers.Util.mouseLeft(evt, this.map.viewPortDiv)) {
if (this.zoomBox) {
this.removeZoomBox();
if (this.startViaKeyboard) {

12
tests/Control/PanZoom.html
View File

@@ -168,22 +168,26 @@
//up
var delta = [0, -50];
var dir = "up";
control.buttonDown.call(buttons[0], evt);
evt.button = buttons[0];
control.onButtonClick.call(control, evt);
//left
var delta = [-125, 0];
var dir = "left";
control.buttonDown.call(buttons[1], evt);
evt.button = buttons[1];
control.onButtonClick.call(control, evt);
//right
var delta = [125, 0];
var dir = "right";
control.buttonDown.call(buttons[2], evt);
evt.button = buttons[2];
control.onButtonClick.call(control, evt);
//down
var delta = [0, 50];
var dir = "down";
control.buttonDown.call(buttons[3], evt);
evt.button = buttons[3];
control.onButtonClick.call(control, evt);
map.destroy();
}

6
tests/Control/Panel.html
View File

@@ -82,7 +82,7 @@
"activated one tool control, the other one is inactive and the toggle & button controls also.");
panel.activateControl(toggleControl);
t.eq(toggleControl.panel_div.className,"mbControlTestToggleItemActive",
t.eq(toggleControl.panel_div.className,"mbControlTestToggleItemActive olButton",
"className of icon div for toggle control is active.");
t.ok(toolControl.active && !anotherToolControl.active && toggleControl.active,
"activated the toggle control, which has no influence on the tool & togggle controls.");
@@ -96,9 +96,9 @@
"activated the button control, which has no influence on the tool & togggle controls.");
panel.activateControl(anotherToolControl);
t.eq(anotherToolControl.panel_div.className,"mbControlTestToolItemActive",
t.eq(anotherToolControl.panel_div.className,"mbControlTestToolItemActive olButton",
"className of icon div for anotherToolControl is active.");
t.eq(toolControl.panel_div.className,"olControlZoomBoxItemInactive",
t.eq(toolControl.panel_div.className,"olControlZoomBoxItemInactive olButton",
"className of icon div for toolControl is inactive.");
t.ok(!toolControl.active && anotherToolControl.active && toggleControl.active,
"activated the other tool control, the first one is inactive and the toggle control still active.");

5
tests/Events.html
View File

@@ -82,7 +82,7 @@
function test_Events_register_unregister(t) {
t.plan(19);
t.plan(20);
var mapDiv = OpenLayers.Util.getElement('map');
var obj = {result: 0};
@@ -166,6 +166,9 @@
t.fail("unregistering for an event with no registered listeners causes trouble: " + err);
}
events.register("buttonclick", obj, func);
t.ok(events.extensions.buttonclick, "buttonclick extension registered");
}
function test_Events_remove(t) {

133
tests/Events/buttonclick.html Normal file
View File

@@ -0,0 +1,133 @@
<html>
<head>
<script src="../OLLoader.js"></script>
<script type="text/javascript">
var log, buttonClick, events, element, button;
function init() {
element = document.getElementById("map");
button = document.getElementById("button");
}
function trigger(evt) {
OpenLayers.Util.applyDefaults(evt, {
button: 1,
target: button
});
buttonClick._buttonClick(evt);
events.handleBrowserEvent(evt);
}
function logEvent(evt) {
log.push(evt);
}
function test_ButtonClick(t) {
t.plan(2);
events = new OpenLayers.Events({}, document.getElementById("map"));
buttonClick = new OpenLayers.Events.buttonclick({target: events});
t.ok(buttonClick.target === events, "target set from options argument");
buttonClick = new OpenLayers.Events.buttonclick(events);
t.ok(buttonClick.target === events, "target set from constructor arg");
buttonClick.destroy();
events.destroy();
}
function test_ButtonClick_buttonClick(t) {
t.plan(23);
events = new OpenLayers.Events({}, element);
events.on({
"buttonclick": logEvent,
"mousedown": logEvent,
"mouseup": logEvent,
"click": logEvent,
"dblclick": logEvent,
"touchstart": logEvent,
"touchend": logEvent
});
buttonClick = events.extensions["buttonclick"];
// a complete click
log = [];
trigger({type: "mousedown"});
trigger({type: "mouseup"});
t.eq(log.length, 1, "one event fired for mousedown-mouseup");
t.eq(log[0].type, "buttonclick", "buttonclick event fired");
// a complete tap
log = [];
trigger({type: "touchstart"});
trigger({type: "touchend"});
t.eq(log.length, 1, "one event fired for touchstart-touchend");
t.eq(log[0].type, "buttonclick", "buttonclick event fired");
// mouse sequence started on button
log = [];
trigger({type: "mousedown"});
trigger({type: "mouseup", target: element});
t.eq(log.length, 1, "one event fired for mousedown-(leave)-mouseup");
t.eq(log[0].type, "mouseup", "mouseup event goes through when sequence not finished on button");
// touch sequence started on button
log = [];
trigger({type: "touchstart"});
trigger({type: "touchmove"});
trigger({type: "touchend"});
t.eq(log.length, 1, "one event fired for touchstart-(leave)-touchend");
t.eq(log[0].type, "touchend", "touchend event goes through when sequence not finished on button");
// mouse sequence finished on button
log = [];
trigger({type: "mousedown", target: element});
trigger({type: "mouseup"});
t.eq(log.length, 2, "two event fired for mousedown-(enter)-mouseup");
t.eq(log[0].type, "mousedown", "mousedown unrelated to button goes through");
t.eq(log[1].type, "mouseup", "mouseup goes through when sequence started outside button");
// touch sequence finished on button
log = [];
trigger({type: "touchstart", target: element});
trigger({type: "touchend"});
t.eq(log.length, 2, "two event fired for touchstart-(enter)-touchend");
t.eq(log[0].type, "touchstart", "touchstart unrelated to button goes through");
t.eq(log[1].type, "touchend", "touchend goes through when sequence started outside button");
// dblclick
log = [];
trigger({type: "mousedown"});
trigger({type: "mouseup"});
trigger({type: "click"});
trigger({type: "mousedown"});
trigger({type: "mouseup"});
trigger({type: "click"});
trigger({type: "dblclick"});
t.eq(log.length, 2, "two events fired for doubleclick");
t.eq(log[0].type, "buttonclick", "buttonclick for 1st click");
t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click");
// dblclick - IE
log = [];
trigger({type: "mousedown"});
trigger({type: "mouseup"});
trigger({type: "mouseup"});
trigger({type: "dblclick"});
t.eq(log.length, 2, "two events fired for dblclick in IE");
t.eq(log[0].type, "buttonclick", "buttonclick for 1st click in IE");
t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click IE");
// rightclick
log = []
trigger({type: "mousedown", button: 2});
trigger({type: "mouseup", button: 2});
t.eq(log.length, 2, "two events fired for rightclick");
t.eq(log[0].type, "mousedown", "mousedown from rightclick goes through");
t.eq(log[1].type, "mouseup", "mouseup from rightclick goes through");
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 600px; height: 300px;">
<div id="button" class="olButton">
<img class="olAlphaImg">
</div>
</div>
</body>
</html>

2
tests/Handler/Drag.html
View File

@@ -252,7 +252,7 @@
t.ok(evt.xy.x == testEvents.done.xy.x &&
evt.xy.y == testEvents.done.xy.y,
"mouseout calls Util.mouseLeft with the correct event");
t.eq(element.id, map.eventsDiv.id,
t.eq(element.id, map.viewPortDiv.id,
"mouseout calls Util.mouseLeft with the correct element");
return true;
}

4
tests/Layer/EventPane.html
View File

@@ -94,9 +94,9 @@
if (document.createEvent) { // Mozilla
var evObj = document.createEvent('MouseEvents');
evObj.initEvent('mousemove', true, false);
map.eventsDiv.dispatchEvent(evObj);
map.viewPortDiv.dispatchEvent(evObj);
} else if(document.createEventObject) { // IE
map.eventsDiv.fireEvent('onmousemove');
map.viewPortDiv.fireEvent('onmousemove');
}
t.eq(log.length, 1, "got one event");

1
tests/list-tests.html
View File

@@ -46,6 +46,7 @@
<li>Control/PanPanel.html</li>
<li>Control/SLDSelect.html</li>
<li>Events.html</li>
<li>Events/buttonclick.html</li>
<li>Extras.html</li>
<li>Feature.html</li>
<li>Feature/Vector.html</li>