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;
}
}
},
/**