Skip to content

Commit

Permalink
Merge pull request openlayers#167 from ahocevar/button-controls-improved
Browse files Browse the repository at this point in the history 
Fixing PanZoomBar and Panel issues after openlayers#164. r=@elemoine
  • Loading branch information
@ahocevar
ahocevar committed Jan 24, 2012
2 parents 2bd9721 + 5a1378c commit dc03537
Show file tree
Hide file tree
Showing 11 changed files with 106 additions and 88 deletions.
4 changes: 2 additions & 2 deletions lib/OpenLayers/Control/LayerSwitcher.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
};
},
Expand Down
4 changes: 2 additions & 2 deletions lib/OpenLayers/Control/OverviewMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
};
},
Expand Down
2 changes: 1 addition & 1 deletion lib/OpenLayers/Control/PanZoom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"));
Expand Down
76 changes: 25 additions & 51 deletions lib/OpenLayers/Control/PanZoomBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,6 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
*/
zoombarDiv: null,

/**
* Property: divEvents
* {<OpenLayers.Events>}
*/
divEvents: null,

/**
* APIProperty: zoomWorldIcon
* {Boolean}
Expand Down Expand Up @@ -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 = {
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -425,4 +399,4 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
},

CLASS_NAME: "OpenLayers.Control.PanZoomBar"
});
});
4 changes: 2 additions & 2 deletions lib/OpenLayers/Control/Panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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]);
Expand Down
29 changes: 16 additions & 13 deletions lib/OpenLayers/Events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
},
Expand Down Expand Up @@ -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++) {
Expand Down
27 changes: 22 additions & 5 deletions lib/OpenLayers/Events/buttonclick.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({

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

/**
Expand All @@ -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;
Expand Down
9 changes: 4 additions & 5 deletions tests/Control/PanZoom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,6 @@
};

var delta, dir;
var evt = {which: 1}; // a fake left click
var buttons = control.buttons;
map.pan = function(dx, dy){
t.eq([dx,dy],delta,"Panning " + dir + " sets right delta with slideRatio");
Expand All @@ -168,25 +167,25 @@
//up
var delta = [0, -50];
var dir = "up";
evt.button = buttons[0];
var evt = {buttonElement: buttons[0]};
control.onButtonClick.call(control, evt);

//left
var delta = [-125, 0];
var dir = "left";
evt.button = buttons[1];
evt.buttonElement = buttons[1];
control.onButtonClick.call(control, evt);

//right
var delta = [125, 0];
var dir = "right";
evt.button = buttons[2];
evt.buttonElement = buttons[2];
control.onButtonClick.call(control, evt);

//down
var delta = [0, 50];
var dir = "down";
evt.button = buttons[3];
evt.buttonElement = buttons[3];
control.onButtonClick.call(control, evt);

map.destroy();
Expand Down
14 changes: 7 additions & 7 deletions tests/Control/PanZoomBar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
t.eq(control.zoombarDiv, null, "zoombar div nullified.")
}

function test_Control_PanZoomBar_divClick (t) {
function test_Control_PanZoomBar_onButtonClick (t) {
t.plan(2);
map = new OpenLayers.Map('map', {controls:[]});
var layer = new OpenLayers.Layer.WMS("Test Layer",
Expand All @@ -59,16 +59,16 @@
map.addLayer(layer);
control = new OpenLayers.Control.PanZoomBar();
map.addControl(control);
control.divClick({'xy': {'x': 0, 'y': 50}, which: 1});
control.onButtonClick({'buttonXY': {'x': 0, 'y': 50}, buttonElement: control.zoombarDiv});
t.eq(map.zoom, 11, "zoom is correct on standard map");

map.fractionalZoom = true;
control.divClick({'xy': {'x': 0, 'y': 49}, which: 1});
control.onButtonClick({'buttonXY': {'x': 0, 'y': 49}, buttonElement: control.zoombarDiv});
t.eq(map.zoom.toFixed(3), '10.545', "zoom is correct on fractional zoom map");

}

function test_Control_PanZoomBar_forceFixedZoomLevel_divClick(t){
function test_Control_PanZoomBar_forceFixedZoomLevel_onButtonClick(t){
t.plan(1);
map = new OpenLayers.Map('map', {
controls: [],
Expand All @@ -84,12 +84,12 @@
});
map.addControl(control);

control.divClick({
'xy': {
control.onButtonClick({
'buttonXY': {
'x': 0,
'y': 49
},
which: 1
buttonElement: control.zoombarDiv
});
t.eq(map.zoom, 11, "forceFixedZoomLevel makes sure that after a div click only fixed zoom levels are used even if the map has fractionalZoom");
}
Expand Down
Loading

0 comments on commit dc03537

Please sign in to comment.