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

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"
});

62
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.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.minimizeDiv.className = this.displayClass + 'MinimizeButton olButton';
this.div.appendChild(this.minimizeDiv);
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();
@@ -363,6 +344,21 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
newTop));
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
@@ -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).

85
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,30 +141,9 @@ 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;
btn.className = "olButton";
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;
//we want to remember/reference the outer div
this.buttons.push(btn);
return 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
* Method: onButtonClick
*
* Parameters:
* evt - {Event}
*
* Returns:
* {Boolean}
* evt - {Event}
*/
doubleClick: function (evt) {
OpenLayers.Event.stop(evt);
return false;
},
/**
* Method: buttonDown
*
* 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"

47
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;
},
@@ -184,7 +193,7 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
}
}
},
/**
* APIMethod: activateControl
* This method is called when the user click on the icon representing a
@@ -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
@@ -310,20 +313,22 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
d.className = d.className.replace(re,
this.displayClass + "ItemInactive");
},
/**
* 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();
@@ -450,6 +455,26 @@ OpenLayers.Events = OpenLayers.Class({
* the location of the element in the page changes
*/
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
@@ -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,