Skip to content

Commit

Permalink
Merge pull request #164 from ahocevar/button-controls
Browse files Browse the repository at this point in the history 
Don't let button controls interfer with handlers. Closes http://trac.osgeo.org/openlayers/ticket/3363. r=@bartvde
  • Loading branch information
@ahocevar
ahocevar committed Jan 20, 2012
2 parents 089ff63 + d9cc0c0 commit 07dc1b5
Show file tree
Hide file tree
Showing 22 changed files with 485 additions and 227 deletions.
1 change: 1 addition & 0 deletions lib/OpenLayers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
110 changes: 33 additions & 77 deletions lib/OpenLayers/Control/LayerSwitcher.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
* @requires OpenLayers/Control.js
* @requires OpenLayers/Lang.js
* @requires OpenLayers/Console.js
* @requires OpenLayers/Events/buttonclick.js
*/

/**
Expand Down Expand Up @@ -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
});

Expand All @@ -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
});
},
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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");
Expand All @@ -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");

Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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);

Expand All @@ -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"
});
61 changes: 28 additions & 33 deletions lib/OpenLayers/Control/OverviewMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
/**
* @requires OpenLayers/Control.js
* @requires OpenLayers/BaseTypes.js
* @requires OpenLayers/Events.js
* @requires OpenLayers/Events/buttonclick.js
*/

/**
Expand Down Expand Up @@ -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) {
Expand All @@ -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
});

Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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();
Expand Down Expand Up @@ -363,6 +344,20 @@ 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();
} else if (evt.button === this.maximizeDiv) {
this.maximizeControl();
};
},

/**
* Method: maximizeControl
Expand Down Expand Up @@ -488,7 +483,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).
Expand Down
Loading

0 comments on commit 07dc1b5

Please sign in to comment.