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

Fixing PanZoomBar and Panel issues after #164.

Browse Source 
For PanZoomBar, this fixes the slider behavior. Now the buttonclick listener argument also includes a buttonXY property, and PanZoomPanel does not need an Events instance for the zoombarDiv any more.
For Panel, this fixes events for panels outside the map. Just setting the element on the Events instance was no longer enough after e70569b2bb. Events::attachToElement is now used, and it needed to be modified to also work if the Events instance had no element previously.
Finally, I renamed the button property of the buttonclick listener argument to buttonElement, to not confuse it with the browser event button property, and added some more tests and documentation.
This commit is contained in:
ahocevar
2012-01-21 19:11:08 +01:00
parent 469005dead
commit e7107b96cb
11 changed files with 87 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -197,9 +197,9 @@ OpenLayers.Control.LayerSwitcher =
* evt - {Event}
*/
onButtonClick: function(evt) {
if (evt.button === this.minimizeDiv) {
if (evt.buttonElement === this.minimizeDiv) {
this.minimizeControl();
} else if (evt.button === this.maximizeDiv) {
} else if (evt.buttonElement === this.maximizeDiv) {
this.maximizeControl();
};
},

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

@@ -352,9 +352,9 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
* evt - {Event}
*/
onButtonClick: function(evt) {
if (evt.button === this.minimizeDiv) {
if (evt.buttonElement === this.minimizeDiv) {
this.minimizeControl();
} else if (evt.button === this.maximizeDiv) {
} else if (evt.buttonElement === this.maximizeDiv) {
this.maximizeControl();
};
},

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

@@ -176,7 +176,7 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
* evt - {Event}
*/
onButtonClick: function(evt) {
var btn = evt.button;
var btn = evt.buttonElement;
switch (btn.action) {
case "panup":
this.map.pan(0, -this.getSlideFactor("h"));

57
lib/OpenLayers/Control/PanZoomBar.js
View File

@@ -239,18 +239,9 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
imgLocation);
}
div.style.cursor = "pointer";
div.className = "olButton";
this.zoombarDiv = div;
this.divEvents = new OpenLayers.Events(this, div, null, true,
{includeXY: true});
this.divEvents.on({
"touchmove": this.passEventToSlider,
"mousedown": this.divClick,
"mousemove": this.passEventToSlider,
"dblclick": this.doubleClick,
"click": this.doubleClick
});
this.div.appendChild(div);
this.startTop = parseInt(div.style.top);
@@ -277,15 +268,6 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
});
this.sliderEvents.destroy();
this.divEvents.un({
"touchmove": this.passEventToSlider,
"mousedown": this.divClick,
"mousemove": this.passEventToSlider,
"dblclick": this.doubleClick,
"click": this.doubleClick
});
this.divEvents.destroy();
this.div.removeChild(this.zoombarDiv);
this.zoombarDiv = null;
this.div.removeChild(this.slider);
@@ -295,34 +277,19 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
},
/**
* Method: passEventToSlider
* This function is used to pass events that happen on the div, or the map,
* through to the slider, which then does its moving thing.
*
* Parameters:
* evt - {<OpenLayers.Event>}
* Method: onButtonClick
*/
passEventToSlider:function(evt) {
this.sliderEvents.handleBrowserEvent(evt);
},
/**
* Method: divClick
* Picks up on clicks directly on the zoombar div
* and sets the zoom level appropriately.
*/
divClick: function (evt) {
if (!OpenLayers.Event.isLeftClick(evt)) {
return;
onButtonClick: function(evt) {
OpenLayers.Control.PanZoom.prototype.onButtonClick.apply(this, arguments);
if (evt.buttonElement === this.zoombarDiv) {
var levels = evt.buttonXY.y / this.zoomStopHeight;
if(this.forceFixedZoomLevel || !this.map.fractionalZoom) {
levels = Math.floor(levels);
}
var zoom = (this.map.getNumZoomLevels() - 1) - levels;
zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels() - 1);
this.map.zoomTo(zoom);
}
var levels = evt.xy.y / this.zoomStopHeight;
if(this.forceFixedZoomLevel || !this.map.fractionalZoom) {
levels = Math.floor(levels);
}
var zoom = (this.map.getNumZoomLevels() - 1) - levels;
zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels() - 1);
this.map.zoomTo(zoom);
OpenLayers.Event.stop(evt);
},
/*

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

@@ -170,7 +170,7 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
draw: function() {
OpenLayers.Control.prototype.draw.apply(this, arguments);
if (this.outsideViewport) {
this.events.element = this.div;
this.events.attachToElement(this.div);
this.events.register("buttonclick", this, this.onButtonClick);
} else {
this.map.events.register("buttonclick", this, this.onButtonClick);
@@ -322,7 +322,7 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
*/
onButtonClick: function (evt) {
var controls = this.controls,
button = evt.button || OpenLayers.Event.element(evt);
button = evt.buttonElement;
for (var i=controls.length-1; i>=0; --i) {
if (controls[i].panel_div === button) {
this.activateControl(controls[i]);

21
lib/OpenLayers/Events.js
View File

@@ -551,16 +551,6 @@ OpenLayers.Events = OpenLayers.Class({
// if a dom element is specified, add a listeners list
// for browser events on the element and register them
if (element != null) {
// keep a bound copy of handleBrowserEvent() so that we can
// pass the same function to both Event.observe() and .stopObserving()
this.eventHandler = OpenLayers.Function.bindAsEventListener(
this.handleBrowserEvent, this
);
// to be used with observe and stopObserving
this.clearMouseListener = OpenLayers.Function.bind(
this.clearMouseCache, this
);
this.attachToElement(element);
}
},
@@ -610,6 +600,17 @@ OpenLayers.Events = OpenLayers.Class({
attachToElement: function (element) {
if (this.element) {
OpenLayers.Event.stopObservingElement(this.element);
} else {
// keep a bound copy of handleBrowserEvent() so that we can
// pass the same function to both Event.observe() and .stopObserving()
this.eventHandler = OpenLayers.Function.bindAsEventListener(
this.handleBrowserEvent, this
);
// to be used with observe and stopObserving
this.clearMouseListener = OpenLayers.Function.bind(
this.clearMouseCache, this
);
}
this.element = element;
for (var i = 0, len = this.BROWSER_EVENTS.length; i < len; i++) {

26
lib/OpenLayers/Events/buttonclick.js
View File

@@ -15,6 +15,12 @@
*
* This event type makes sure that button clicks do not interfere with other
* events that are registered on the same <element>.
*
* Event types provided by this extension:
* - *buttonclick* Triggered when a button is clicked. Listeners receive an
* object with a *buttonElement* property referencing the dom element of
* the clicked button, and an *buttonXY* property with the click position
* relative to the button.
*/
OpenLayers.Events.buttonclick = OpenLayers.Class({
@@ -57,6 +63,11 @@ OpenLayers.Events.buttonclick = OpenLayers.Class({
*/
completeRegEx: /^mouseup|touchend$/,
/**
* Property: startEvt
* {Event} The event that started the click sequence
*/
/**
* Constructor: OpenLayers.Events.buttonclick
* Construct a buttonclick event type. Applications are not supposed to
@@ -100,25 +111,30 @@ OpenLayers.Events.buttonclick = OpenLayers.Class({
element = element.parentNode;
}
if (OpenLayers.Element.hasClass(element, "olButton")) {
if (this._buttonStarted) {
if (this.startEvt) {
if (this.completeRegEx.test(evt.type)) {
var pos = OpenLayers.Util.pagePosition(element);
this.target.triggerEvent("buttonclick", {
button: element
buttonElement: element,
buttonXY: {
x: this.startEvt.clientX - pos[0],
y: this.startEvt.clientY - pos[1]
}
});
}
if (this.cancelRegEx.test(evt.type)) {
delete this._buttonStarted;
delete this.startEvt;
}
OpenLayers.Event.stop(evt);
propagate = false;
}
if (this.startRegEx.test(evt.type)) {
this._buttonStarted = true;
this.startEvt = evt;
OpenLayers.Event.stop(evt);
propagate = false;
}
} else {
delete this._buttonStarted;
delete this.startEvt;
}
}
return propagate;