diff --git a/css/app.css b/css/app.css
index 0194acd69..eff5c8db8 100644
--- a/css/app.css
+++ b/css/app.css
@@ -59,6 +59,7 @@ a, button, input, textarea {
}
a, button {
+ cursor: pointer; /* Opera compatibility */
cursor: url(../img/cursor-pointer.png) 6 1, pointer;
}
@@ -1073,6 +1074,7 @@ input[type=number] {
}
.checkselect label:hover {
+ cursor: pointer; /* Opera compatibility */
cursor: url(../img/cursor-pointer.png) 6 1, pointer;
background: #f1f1f1;
}
@@ -1543,6 +1545,7 @@ img.wiki-image {
height: 100%;
display: block;
float: left;
+ cursor: pointer; /* Opera compatibility */
cursor: url(../img/cursor-pointer.png) 6 1, pointer;
}
@@ -2226,6 +2229,7 @@ img.wiki-image {
.radial-menu-item {
fill: white;
+ cursor: pointer; /* Opera compatibility */
cursor: url(../img/cursor-pointer.png) 6 1, pointer;
}
diff --git a/css/map.css b/css/map.css
index 935c4389b..ab8325c65 100644
--- a/css/map.css
+++ b/css/map.css
@@ -860,6 +860,8 @@ text.point {
/* Cursors */
#map:hover {
+ cursor: auto; /* Opera */
+ cursor: url(../img/cursor-grab.png) 9 9, auto; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-grab.png) 1x,
url(../img/cursor-grab2x.png) 2x
@@ -867,6 +869,8 @@ text.point {
}
#map:active {
+ cursor: pointer; /* Opera */
+ cursor: url(../img/cursor-grabbing.png) 9 9, auto; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-grabbing.png) 1x,
url(../img/cursor-grabbing2x.png) 2x
@@ -875,6 +879,8 @@ text.point {
.mode-browse .point,
.mode-select .point {
+ cursor: pointer; /* Opera */
+ cursor: url(../img/cursor-select-point.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-point.png) 1x,
url(../img/cursor-select-point2x.png) 2x
@@ -883,6 +889,8 @@ text.point {
.mode-select .vertex,
.mode-browse .vertex {
+ cursor: pointer; /* Opera */
+ cursor: url(../img/cursor-select-vertex.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-vertex.png) 1x,
url(../img/cursor-select-vertex2x.png) 2x
@@ -891,6 +899,8 @@ text.point {
.mode-browse .line,
.mode-select .line {
+ cursor: pointer; /* Opera */
+ cursor: url(../img/cursor-select-line.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-line.png) 1x,
url(../img/cursor-select-line2x.png) 2x
@@ -899,6 +909,8 @@ text.point {
.mode-select .area,
.mode-browse .area {
+ cursor: pointer; /* Opera */
+ cursor: url(../img/cursor-select-area.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-area.png) 1x,
url(../img/cursor-select-area2x.png) 2x
@@ -907,6 +919,8 @@ text.point {
.mode-select .midpoint,
.mode-browse .midpoint {
+ cursor: pointer; /* Opera */
+ cursor: url(../img/cursor-select-split.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-split.png) 1x,
url(../img/cursor-select-split2x.png) 2x
@@ -917,6 +931,8 @@ text.point {
.mode-select .behavior-multiselect .vertex,
.mode-select .behavior-multiselect .line,
.mode-select .behavior-multiselect .area {
+ cursor: pointer; /* Opera */
+ cursor: url(../img/cursor-select-add.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-add.png) 1x,
url(../img/cursor-select-add2x.png) 2x
@@ -924,6 +940,8 @@ text.point {
}
.mode-select .behavior-multiselect .selected {
+ cursor: pointer; /* Opera */
+ cursor: url(../img/cursor-select-remove.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-remove.png) 1x,
url(../img/cursor-select-remove2x.png) 2x
@@ -936,6 +954,8 @@ text.point {
#map .area:active,
#map .midpoint:active,
#map .mode-select .selected {
+ cursor: pointer; /* Opera */
+ cursor: url(../img/cursor-select-acting.png), pointer; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-select-acting.png) 1x,
url(../img/cursor-select-acting2x.png) 2x
@@ -947,7 +967,8 @@ text.point {
.mode-add-line #map:hover,
.mode-add-area #map:hover,
.mode-drag-node #map:hover {
- cursor: crosshair;
+ cursor: crosshair; /* Opera */
+ cursor: url(../img/cursor-draw.png) 9 9, crosshair; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-draw.png) 1x,
url(../img/cursor-draw2x.png) 2x
@@ -958,12 +979,22 @@ text.point {
.mode-draw-area .behavior-hover .way,
.mode-add-line .behavior-hover .way,
.mode-add-area .behavior-hover .way,
-.mode-drag-node .behavior-hover .way,
+.mode-drag-node .behavior-hover .way {
+ cursor: crosshair; /* Opera */
+ cursor: url(../img/cursor-draw-connect-line.png) 9 9, crosshair; /* FF */
+ cursor: -webkit-image-set(
+ url(../img/cursor-draw-connect-line.png) 1x,
+ url(../img/cursor-draw-connect-line2x.png) 2x
+ ) 9 9, crosshair;
+}
+
.mode-draw-line .behavior-hover .vertex,
.mode-draw-area .behavior-hover .vertex,
.mode-add-line .behavior-hover .vertex,
.mode-add-area .behavior-hover .vertex,
-.mode-drag-node .behavior-hover .vertex, {
+.mode-drag-node .behavior-hover .vertex {
+ cursor: crosshair; /* Opera */
+ cursor: url(../img/cursor-draw-connect-vertex.png) 9 9, crosshair; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-draw-connect-vertex.png) 1x,
url(../img/cursor-draw-connect-vertex2x.png) 2x
@@ -974,6 +1005,8 @@ text.point {
.lasso #map:hover,
.lasso .way,
.lasso .vertex {
+ cursor: crosshair; /* Opera */
+ cursor: url(../img/cursor-draw.png) 9 9, crosshair; /* FF */
cursor: -webkit-image-set(
url(../img/cursor-draw.png) 1x,
url(../img/cursor-draw2x.png) 2x
diff --git a/test/index.html b/test/index.html
index f2d4d6bfc..aae9c6458 100644
--- a/test/index.html
+++ b/test/index.html
@@ -4,6 +4,7 @@
Mocha Tests
+
diff --git a/test/index_packaged.html b/test/index_packaged.html
index 420043c91..4d9b131e3 100644
--- a/test/index_packaged.html
+++ b/test/index_packaged.html
@@ -4,6 +4,7 @@
Mocha Tests
+
diff --git a/test/spec/renderer/map.js b/test/spec/renderer/map.js
index de8abdf61..84966003d 100644
--- a/test/spec/renderer/map.js
+++ b/test/spec/renderer/map.js
@@ -120,4 +120,117 @@ describe('iD.Map', function() {
expect(map.surface.node().tagName).to.equal("svg");
});
});
+
+ describe('cursors', function() {
+ var mode, behavior, point, vertex, line, area, midpoint;
+
+ beforeEach(function() {
+ mode = d3.select('body').append('div');
+ behavior = mode.append('div');
+
+ point = behavior.append('div').attr('class', 'node point');
+ vertex = behavior.append('div').attr('class', 'node vertex');
+ line = behavior.append('div').attr('class', 'way line');
+ area = behavior.append('div').attr('class', 'way area');
+ midpoint = behavior.append('div').attr('class', 'midpoint');
+ });
+
+ afterEach(function() {
+ mode.remove();
+ });
+
+ function cursor(selection) {
+ return window.getComputedStyle(selection.node()).cursor;
+ }
+
+ specify('points use select-point cursor in browse and select modes', function() {
+ mode.attr('class', 'mode-browse');
+ expect(cursor(point)).to.match(/cursor-select-point/);
+ mode.attr('class', 'mode-select');
+ expect(cursor(point)).to.match(/cursor-select-point/);
+ });
+
+ specify('vertices use select-vertex cursor in browse and select modes', function() {
+ mode.attr('class', 'mode-browse');
+ expect(cursor(vertex)).to.match(/cursor-select-vertex/);
+ mode.attr('class', 'mode-select');
+ expect(cursor(vertex)).to.match(/cursor-select-vertex/);
+ });
+
+ specify('lines use select-line cursor in browse and select modes', function() {
+ mode.attr('class', 'mode-browse');
+ expect(cursor(line)).to.match(/cursor-select-line/);
+ mode.attr('class', 'mode-select');
+ expect(cursor(line)).to.match(/cursor-select-line/);
+ });
+
+ specify('areas use select-area cursor in browse and select modes', function() {
+ mode.attr('class', 'mode-browse');
+ expect(cursor(area)).to.match(/cursor-select-area/);
+ mode.attr('class', 'mode-select');
+ expect(cursor(area)).to.match(/cursor-select-area/);
+ });
+
+ specify('midpoints use select-split cursor in browse and select modes', function() {
+ mode.attr('class', 'mode-browse');
+ expect(cursor(midpoint)).to.match(/cursor-select-split/);
+ mode.attr('class', 'mode-select');
+ expect(cursor(midpoint)).to.match(/cursor-select-split/);
+ });
+
+ specify('features use select-add cursor for adding to a selection', function() {
+ mode.attr('class', 'mode-select');
+ behavior.attr('class', 'behavior-multiselect');
+ expect(cursor(point)).to.match(/cursor-select-add/);
+ expect(cursor(vertex)).to.match(/cursor-select-add/);
+ expect(cursor(line)).to.match(/cursor-select-add/);
+ expect(cursor(area)).to.match(/cursor-select-add/);
+ });
+
+ specify('features use select-remove cursor for removing from a selection', function() {
+ mode.attr('class', 'mode-select');
+ behavior.attr('class', 'behavior-multiselect');
+ point.classed('selected', true);
+ vertex.classed('selected', true);
+ line.classed('selected', true);
+ area.classed('selected', true);
+ expect(cursor(point)).to.match(/cursor-select-remove/);
+ expect(cursor(vertex)).to.match(/cursor-select-remove/);
+ expect(cursor(line)).to.match(/cursor-select-remove/);
+ expect(cursor(area)).to.match(/cursor-select-remove/);
+ });
+
+ specify('hovered ways use draw-connect-line cursor in draw modes', function() {
+ behavior.attr('class', 'behavior-hover');
+ mode.attr('class', 'mode-draw-line');
+ expect(cursor(line)).to.match(/cursor-draw-connect-line/);
+ expect(cursor(area)).to.match(/cursor-draw-connect-line/);
+ mode.attr('class', 'mode-draw-area');
+ expect(cursor(line)).to.match(/cursor-draw-connect-line/);
+ expect(cursor(area)).to.match(/cursor-draw-connect-line/);
+ mode.attr('class', 'mode-add-line');
+ expect(cursor(line)).to.match(/cursor-draw-connect-line/);
+ expect(cursor(area)).to.match(/cursor-draw-connect-line/);
+ mode.attr('class', 'mode-add-area');
+ expect(cursor(line)).to.match(/cursor-draw-connect-line/);
+ expect(cursor(area)).to.match(/cursor-draw-connect-line/);
+ mode.attr('class', 'mode-drag-node');
+ expect(cursor(line)).to.match(/cursor-draw-connect-line/);
+ expect(cursor(area)).to.match(/cursor-draw-connect-line/);
+ });
+
+ specify('hovered vertices use draw-connect-vertex cursor in draw modes', function() {
+ behavior.attr('class', 'behavior-hover');
+ mode.attr('class', 'mode-draw-line');
+ expect(cursor(vertex)).to.match(/cursor-draw-connect-vertex/);
+ mode.attr('class', 'mode-draw-area');
+ expect(cursor(vertex)).to.match(/cursor-draw-connect-vertex/);
+ mode.attr('class', 'mode-add-line');
+ expect(cursor(vertex)).to.match(/cursor-draw-connect-vertex/);
+ mode.attr('class', 'mode-add-area');
+ expect(cursor(vertex)).to.match(/cursor-draw-connect-vertex/);
+ mode.attr('class', 'mode-drag-node');
+ expect(cursor(vertex)).to.match(/cursor-draw-connect-vertex/);
+ });
+ });
});