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

Merge pull request #167 from ahocevar/button-controls-improved

Browse Source 
Fixing PanZoomBar and Panel issues after #164. r=@elemoine
This commit is contained in:
ahocevar
2012-01-24 05:17:00 -08:00
parent 2bd9721fd8 5a1378cdab
commit dc03537132
11 changed files with 106 additions and 88 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"));

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

@@ -47,12 +47,6 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
*/
zoombarDiv: null,
/**
* Property: divEvents
* {<OpenLayers.Events>}
*/
divEvents: null,
/**
* APIProperty: zoomWorldIcon
* {Boolean}
@@ -212,9 +206,7 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
"touchend": this.zoomBarUp,
"mousedown": this.zoomBarDown,
"mousemove": this.zoomBarDrag,
"mouseup": this.zoomBarUp,
"dblclick": this.doubleClick,
"click": this.doubleClick
"mouseup": this.zoomBarUp
});
var sz = {
@@ -239,18 +231,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);
@@ -268,23 +251,14 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
*/
_removeZoomBar: function() {
this.sliderEvents.un({
"touchstart": this.zoomBarDown,
"touchmove": this.zoomBarDrag,
"touchend": this.zoomBarUp,
"mousedown": this.zoomBarDown,
"mousemove": this.zoomBarDrag,
"mouseup": this.zoomBarUp,
"dblclick": this.doubleClick,
"click": this.doubleClick
"mouseup": this.zoomBarUp
});
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;
@@ -294,6 +268,25 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
this.map.events.unregister("zoomend", this, this.moveZoomBar);
},
/**
* Method: onButtonClick
*
* Parameters:
* evt - {Event}
*/
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);
}
},
/**
* Method: passEventToSlider
* This function is used to pass events that happen on the div, or the map,
@@ -306,25 +299,6 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
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;
}
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);
},
/*
* Method: zoomBarDown
* event listener for clicks on the slider
@@ -425,4 +399,4 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
},
CLASS_NAME: "OpenLayers.Control.PanZoomBar"
});
});

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]);

29
lib/OpenLayers/Events.js
View File

@@ -486,10 +486,12 @@ OpenLayers.Events = OpenLayers.Class({
* this.target.extensions["fooend"] = true;
* },
* destroy: function() {
* this.target.unregister("click", this, this.doStuff);
* var target = this.target;
* target.unregister("click", this, this.doStuff);
* delete this.target;
* // only required if extension provides more than one event type
* delete this.target.extensions["foostart"];
* delete this.target.extensions["fooend"];
* delete target.extensions["foostart"];
* delete target.extensions["fooend"];
* },
* doStuff: function(evt) {
* var propagate = true;
@@ -551,16 +553,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 +602,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++) {

27
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
@@ -83,6 +94,7 @@ OpenLayers.Events.buttonclick = OpenLayers.Class({
for (var i=this.events.length-1; i>=0; --i) {
this.target.unregister(this.events[i], this, this.buttonClick);
}
delete this.target;
},
/**
@@ -100,25 +112,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;