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.handler.activate();
} }
this.active = true; this.active = true;
if(this.map) {
OpenLayers.Element.addClass(
this.map.viewPortDiv,
this.displayClass.replace(/ /g, "") + "Active"
);
}
this.events.triggerEvent("activate"); this.events.triggerEvent("activate");
return true; return true;
}, },
@@ -323,6 +329,12 @@ OpenLayers.Control = OpenLayers.Class({
this.handler.deactivate(); this.handler.deactivate();
} }
this.active = false; this.active = false;
if(this.map) {
OpenLayers.Element.removeClass(
this.map.viewPortDiv,
this.displayClass.replace(/ /g, "") + "Active"
);
}
this.events.triggerEvent("deactivate"); this.events.triggerEvent("deactivate");
return true; 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.feature = null;
this.dragging = false; this.dragging = false;
this.lastPixel = null; this.lastPixel = null;
OpenLayers.Element.removeClass(
this.map.viewPortDiv, this.displayClass + "Over"
);
return OpenLayers.Control.prototype.deactivate.apply(this, arguments); return OpenLayers.Control.prototype.deactivate.apply(this, arguments);
}, },
@@ -178,8 +181,7 @@ OpenLayers.Control.DragFeature = OpenLayers.Class(OpenLayers.Control, {
this.feature = feature; this.feature = feature;
this.handlers.drag.activate(); this.handlers.drag.activate();
this.over = true; this.over = true;
// TBD replace with CSS classes OpenLayers.Element.addClass(this.map.viewPortDiv, this.displayClass + "Over");
this.map.div.style.cursor = "move";
} else { } else {
if(this.feature.id == feature.id) { if(this.feature.id == feature.id) {
this.over = true; this.over = true;
@@ -228,12 +230,6 @@ OpenLayers.Control.DragFeature = OpenLayers.Class(OpenLayers.Control, {
upFeature: function(pixel) { upFeature: function(pixel) {
if(!this.over) { if(!this.over) {
this.handlers.drag.deactivate(); 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) { if(!this.handlers.drag.dragging) {
this.over = false; this.over = false;
this.handlers.drag.deactivate(); this.handlers.drag.deactivate();
// TBD replace with CSS classes OpenLayers.Element.removeClass(
this.map.div.style.cursor = "default"; this.map.viewPortDiv, this.displayClass + "Over"
);
this.feature = null; this.feature = null;
} else { } else {
if(this.feature.id == feature.id) { 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) { selectSingle: function(evt) {
// Set the cursor to "wait" to tell the user we're working on their click. // 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); var bounds = this.pixelToBounds(evt.xy);
@@ -373,7 +373,7 @@ OpenLayers.Control.GetFeature = OpenLayers.Class(OpenLayers.Control, {
} }
} }
// Reset the cursor. // Reset the cursor.
OpenLayers.Element.removeClass(this.map.div, "olCursorWait"); OpenLayers.Element.removeClass(this.map.viewPortDiv, "olCursorWait");
}, },
scope: this scope: this
}); });

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

@@ -212,7 +212,7 @@ OpenLayers.Control.WMSGetFeatureInfo = OpenLayers.Class(OpenLayers.Control, {
getInfoForClick: function(evt) { getInfoForClick: function(evt) {
// Set the cursor to "wait" to tell the user we're working on their // Set the cursor to "wait" to tell the user we're working on their
// click. // click.
OpenLayers.Element.addClass(this.map.div, "olCursorWait"); OpenLayers.Element.addClass(this.map.viewPortDiv, "olCursorWait");
this.request(evt.xy, {}); this.request(evt.xy, {});
}, },
@@ -352,7 +352,7 @@ OpenLayers.Control.WMSGetFeatureInfo = OpenLayers.Class(OpenLayers.Control, {
}); });
// Reset the cursor. // 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.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
this.map.viewPortDiv.appendChild(this.zoomBox); this.map.viewPortDiv.appendChild(this.zoomBox);
// TBD: use CSS classes instead OpenLayers.Element.addClass(
this.map.div.style.cursor = "crosshair"; this.map.viewPortDiv, "olDrawBox"
);
}, },
/** /**
@@ -133,9 +134,6 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
} }
this.removeBox(); this.removeBox();
// TBD: use CSS classes instead
this.map.div.style.cursor = "";
this.callback("done", [result]); this.callback("done", [result]);
}, },
@@ -147,6 +145,10 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
this.map.viewPortDiv.removeChild(this.zoomBox); this.map.viewPortDiv.removeChild(this.zoomBox);
this.zoomBox = null; this.zoomBox = null;
this.boxCharacteristics = 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.started = true;
this.start = evt.xy; this.start = evt.xy;
this.last = evt.xy; this.last = evt.xy;
// TBD replace with CSS classes OpenLayers.Element.addClass(
this.map.div.style.cursor = "move"; this.map.viewPortDiv, "olDragDown"
);
this.down(evt); this.down(evt);
this.callback("down", [evt.xy]); this.callback("down", [evt.xy]);
OpenLayers.Event.stop(evt); OpenLayers.Event.stop(evt);
@@ -247,8 +248,9 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
var dragged = (this.start != this.last); var dragged = (this.start != this.last);
this.started = false; this.started = false;
this.dragging = false; this.dragging = false;
// TBD replace with CSS classes OpenLayers.Element.removeClass(
this.map.div.style.cursor = ""; this.map.viewPortDiv, "olDragDown"
);
this.up(evt); this.up(evt);
this.callback("up", [evt.xy]); this.callback("up", [evt.xy]);
if(dragged) { if(dragged) {
@@ -274,8 +276,9 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
var dragged = (this.start != this.last); var dragged = (this.start != this.last);
this.started = false; this.started = false;
this.dragging = false; this.dragging = false;
// TBD replace with CSS classes OpenLayers.Element.removeClass(
this.map.div.style.cursor = ""; this.map.viewPortDiv, "olDragDown"
);
this.out(evt); this.out(evt);
this.callback("out", []); this.callback("out", []);
if(dragged) { if(dragged) {
@@ -336,6 +339,9 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
this.start = null; this.start = null;
this.last = null; this.last = null;
deactivated = true; deactivated = true;
OpenLayers.Element.removeClass(
this.map.viewPortDiv, "olDragDown"
);
} }
return deactivated; return deactivated;
}, },

12
tests/Control/DragFeature.html
View File

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

13
theme/default/style.css
View File

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