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

Allowing users to better customize cursors for controls. Thanks to bartvde for the original patch and inspiration to get it done. Thanks ahocevar for the IE fix. r=ahocevar (closes #1484)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@9258 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2009-04-09 21:59:53 +00:00
parent cf81c29d31
commit 1fd32e0ff8
8 changed files with 60 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lib/OpenLayers/Control.js
View File

@@ -304,6 +304,12 @@ OpenLayers.Control = OpenLayers.Class({
this.handler.activate();
}
this.active = true;
if(this.map) {
OpenLayers.Element.addClass(
this.map.viewPortDiv,
this.displayClass.replace(/ /g, "") + "Active"
);
}
this.events.triggerEvent("activate");
return true;
},
@@ -323,6 +329,12 @@ OpenLayers.Control = OpenLayers.Class({
this.handler.deactivate();
}
this.active = false;
if(this.map) {
OpenLayers.Element.removeClass(
this.map.viewPortDiv,
this.displayClass.replace(/ /g, "") + "Active"
);
}
this.events.triggerEvent("deactivate");
return true;
}

17
lib/OpenLayers/Control/DragFeature.js
View File

@@ -162,6 +162,9 @@ OpenLayers.Control.DragFeature = OpenLayers.Class(OpenLayers.Control, {
this.feature = null;
this.dragging = false;
this.lastPixel = null;
OpenLayers.Element.removeClass(
this.map.viewPortDiv, this.displayClass + "Over"
);
return OpenLayers.Control.prototype.deactivate.apply(this, arguments);
},
@@ -178,8 +181,7 @@ OpenLayers.Control.DragFeature = OpenLayers.Class(OpenLayers.Control, {
this.feature = feature;
this.handlers.drag.activate();
this.over = true;
// TBD replace with CSS classes
this.map.div.style.cursor = "move";
OpenLayers.Element.addClass(this.map.viewPortDiv, this.displayClass + "Over");
} else {
if(this.feature.id == feature.id) {
this.over = true;
@@ -228,12 +230,6 @@ OpenLayers.Control.DragFeature = OpenLayers.Class(OpenLayers.Control, {
upFeature: function(pixel) {
if(!this.over) {
this.handlers.drag.deactivate();
// TBD replace with CSS classes
this.map.div.style.cursor = "default";
} else {
// the drag handler itself resetted the cursor, so
// set it back to "move" here
this.map.div.style.cursor = "move";
}
},
@@ -260,8 +256,9 @@ OpenLayers.Control.DragFeature = OpenLayers.Class(OpenLayers.Control, {
if(!this.handlers.drag.dragging) {
this.over = false;
this.handlers.drag.deactivate();
// TBD replace with CSS classes
this.map.div.style.cursor = "default";
OpenLayers.Element.removeClass(
this.map.viewPortDiv, this.displayClass + "Over"
);
this.feature = null;
} else {
if(this.feature.id == feature.id) {

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

@@ -275,7 +275,7 @@ OpenLayers.Control.GetFeature = OpenLayers.Class(OpenLayers.Control, {
*/
selectSingle: function(evt) {
// Set the cursor to "wait" to tell the user we're working on their click.
OpenLayers.Element.addClass(this.map.div, "olCursorWait");
OpenLayers.Element.addClass(this.map.viewPortDiv, "olCursorWait");
var bounds = this.pixelToBounds(evt.xy);
@@ -373,7 +373,7 @@ OpenLayers.Control.GetFeature = OpenLayers.Class(OpenLayers.Control, {
}
}
// Reset the cursor.
OpenLayers.Element.removeClass(this.map.div, "olCursorWait");
OpenLayers.Element.removeClass(this.map.viewPortDiv, "olCursorWait");
},
scope: this
});

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

@@ -212,7 +212,7 @@ OpenLayers.Control.WMSGetFeatureInfo = OpenLayers.Class(OpenLayers.Control, {
getInfoForClick: function(evt) {
// Set the cursor to "wait" to tell the user we're working on their
// click.
OpenLayers.Element.addClass(this.map.div, "olCursorWait");
OpenLayers.Element.addClass(this.map.viewPortDiv, "olCursorWait");
this.request(evt.xy, {});
},
@@ -352,7 +352,7 @@ OpenLayers.Control.WMSGetFeatureInfo = OpenLayers.Class(OpenLayers.Control, {
});
// Reset the cursor.
OpenLayers.Element.removeClass(this.map.div, "olCursorWait");
OpenLayers.Element.removeClass(this.map.viewPortDiv, "olCursorWait");
},
/**

12
lib/OpenLayers/Handler/Box.js
View File

@@ -83,8 +83,9 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
this.map.viewPortDiv.appendChild(this.zoomBox);
// TBD: use CSS classes instead
this.map.div.style.cursor = "crosshair";
OpenLayers.Element.addClass(
this.map.viewPortDiv, "olDrawBox"
);
},
/**
@@ -133,9 +134,6 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
}
this.removeBox();
// TBD: use CSS classes instead
this.map.div.style.cursor = "";
this.callback("done", [result]);
},
@@ -147,6 +145,10 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
this.map.viewPortDiv.removeChild(this.zoomBox);
this.zoomBox = null;
this.boxCharacteristics = null;
OpenLayers.Element.removeClass(
this.map.viewPortDiv, "olDrawBox"
);
},
/**

18
lib/OpenLayers/Handler/Drag.js
View File

@@ -177,8 +177,9 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
this.started = true;
this.start = evt.xy;
this.last = evt.xy;
// TBD replace with CSS classes
this.map.div.style.cursor = "move";
OpenLayers.Element.addClass(
this.map.viewPortDiv, "olDragDown"
);
this.down(evt);
this.callback("down", [evt.xy]);
OpenLayers.Event.stop(evt);
@@ -247,8 +248,9 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
var dragged = (this.start != this.last);
this.started = false;
this.dragging = false;
// TBD replace with CSS classes
this.map.div.style.cursor = "";
OpenLayers.Element.removeClass(
this.map.viewPortDiv, "olDragDown"
);
this.up(evt);
this.callback("up", [evt.xy]);
if(dragged) {
@@ -274,8 +276,9 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
var dragged = (this.start != this.last);
this.started = false;
this.dragging = false;
// TBD replace with CSS classes
this.map.div.style.cursor = "";
OpenLayers.Element.removeClass(
this.map.viewPortDiv, "olDragDown"
);
this.out(evt);
this.callback("out", []);
if(dragged) {
@@ -336,6 +339,9 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
this.start = null;
this.last = null;
deactivated = true;
OpenLayers.Element.removeClass(
this.map.viewPortDiv, "olDragDown"
);
}
return deactivated;
},

12
tests/Control/DragFeature.html
View File

@@ -171,7 +171,7 @@
}
function test_Control_DragFeature_up(t) {
t.plan(7);
t.plan(6);
var map = new OpenLayers.Map("map");
var layer = new OpenLayers.Layer.Vector();
map.addLayer(layer);
@@ -189,8 +189,8 @@
map.events.triggerEvent("mousemove", {type: "mousemove"});
t.eq(control.over, true,
"mouseover on a feature sets the over property to true");
t.eq(control.map.div.style.cursor, "move",
"mouseover on a feature sets the cursor to move");
t.ok(OpenLayers.Element.hasClass(control.map.viewPortDiv, "olControlDragFeatureOver"),
"mouseover on a feature adds class name to map container");
t.eq(control.handlers.drag.active, true,
"mouseover on a feature activates drag handler");
@@ -198,8 +198,6 @@
// over the dragged feature
control.handlers.drag.started = true;
map.events.triggerEvent("mouseup", {type: "mouseup"});
t.eq(control.map.div.style.cursor, "move",
"mouseup while still over dragged feature does not reset cursor to default");
t.eq(control.handlers.drag.active, true,
"mouseup while still over dragged feature does not deactivate drag handler");
@@ -208,12 +206,12 @@
control.handlers.drag.started = true;
control.over = false;
map.events.triggerEvent("mouseup", {type: "mouseup"});
t.eq(control.map.div.style.cursor, "default",
"mouseup resets cursor to default");
t.eq(control.handlers.drag.active, false,
"mouseup deactivates drag handler");
control.deactivate();
t.ok(!OpenLayers.Element.hasClass(control.map.viewPortDiv, "olControlDragFeatureOver"),
"deactivate removes class name from map container");
}
function test_Control_DragFeature_done(t) {

13
theme/default/style.css
View File

@@ -2,6 +2,7 @@ div.olMap {
z-index: 0;
padding: 0px!important;
margin: 0px!important;
cursor: default;
}
div.olMapViewport {
@@ -328,3 +329,15 @@ div.olControlMousePosition {
.olCursorWait {
cursor: wait;
}
.olDragDown {
cursor: move;
}
.olDrawBox {
cursor: crosshair;
}
.olControlDragFeatureOver {
cursor: move;
}
.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
cursor: -moz-grabbing;
}