Use class instead of style for Translate cursor

css/ol.css

@@ -49,6 +49,17 @@
   -ms-user-select: auto;
   user-select: auto;
 }
+.ol-grabbing {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+.ol-grab {
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+}
 .ol-control {
   position: absolute;
   background-color: rgba(255,255,255,0.4);
@@ -247,4 +258,4 @@
 
 .ol-overviewmap .ol-overviewmap-box:hover {
   cursor: move;
-}
+}

src/ol/interaction/translate.js

@@ -32,13 +32,6 @@ ol.interaction.Translate = function(opt_options) {
 
   var options = opt_options ? opt_options : {};
 
-  /**
-   * @type {string|undefined}
-   * @private
-   */
-  this.previousCursor_ = undefined;
-
-
   /**
    * The last position we translated to.
    * @type {ol.Coordinate}
@@ -175,23 +168,15 @@ ol.interaction.Translate.handleDragEvent_ = function(event) {
  * @private
  */
 ol.interaction.Translate.handleMoveEvent_ = function(event) {
-  var elem = event.map.getTargetElement();
+  var elem = event.map.getViewport();
 
   // Change the cursor to grab/grabbing if hovering any of the features managed
   // by the interaction
   if (this.featuresAtPixel_(event.pixel, event.map)) {
-    this.previousCursor_ = this.previousCursor_ !== undefined ?
+    elem.classList.remove(this.lastCoordinate_ ? 'ol-grab' : 'ol-grabbing');
-        this.previousCursor_ : elem.style.cursor;
+    elem.classList.add(this.lastCoordinate_ ? 'ol-grabbing' : 'ol-grab');
-    // WebKit browsers don't support the grab icons without a prefix
+  } else {
-    elem.style.cursor = this.lastCoordinate_ ?
+    elem.classList.remove('ol-grab', 'ol-grabbing');
-        '-webkit-grabbing' : '-webkit-grab';
-
-    // Thankfully, attempting to set the standard ones will silently fail,
-    // keeping the prefixed icons
-    elem.style.cursor = this.lastCoordinate_ ?  'grabbing' : 'grab';
-  } else if (this.previousCursor_ !== undefined) {
-    elem.style.cursor = this.previousCursor_;
-    this.previousCursor_ = undefined;
   }
 };
 
@@ -266,14 +251,13 @@ ol.interaction.Translate.prototype.handleActiveChanged_ = function() {
 ol.interaction.Translate.prototype.updateState_ = function(oldMap) {
   var map = this.getMap();
   var active = this.getActive();
-  if ((!map || !active) && this.previousCursor_ !== undefined) {
+  if ((!map || !active)) {
     if (!map) {
       map = oldMap;
     }
 
-    var elem = map.getTargetElement();
+    var elem = map.getViewport();
-    elem.style.cursor = this.previousCursor_;
+    elem.classList.remove('ol-grab', 'ol-grabbing');
-    this.previousCursor_ = undefined;
   }
 };
 

test/spec/ol/interaction/translate.test.js

@@ -210,83 +210,66 @@ describe('ol.interaction.Translate', function() {
     beforeEach(function() {
       translate = new ol.interaction.Translate();
       map.addInteraction(translate);
-      element = map.getTargetElement();
+      element = map.getViewport();
     });
 
     it('changes css cursor', function() {
-      expect(element.style.cursor).to.eql('');
+      expect(element.classList.contains('ol-grabbing')).to.be(false);
+      expect(element.classList.contains('ol-grab')).to.be(false);
 
       simulateEvent('pointermove', 10, 20);
-      expect(element.style.cursor).to.match(/grab$/);
+      expect(element.classList.contains('ol-grabbing')).to.be(false);
+      expect(element.classList.contains('ol-grab')).to.be(true);
 
       simulateEvent('pointerdown', 10, 20);
-      expect(element.style.cursor).to.match(/grabbing$/);
+      expect(element.classList.contains('ol-grabbing')).to.be(true);
+      expect(element.classList.contains('ol-grab')).to.be(false);
 
       simulateEvent('pointerup', 10, 20);
-      expect(element.style.cursor).to.match(/grab$/);
+      expect(element.classList.contains('ol-grabbing')).to.be(false);
+      expect(element.classList.contains('ol-grab')).to.be(true);
 
       simulateEvent('pointermove', 0, 0);
-      expect(element.style.cursor).to.eql('');
+      expect(element.classList.contains('ol-grabbing')).to.be(false);
-    });
+      expect(element.classList.contains('ol-grab')).to.be(false);
-
-    it('respects existing cursor value', function() {
-      element.style.cursor = 'pointer';
-
-      simulateEvent('pointermove', 10, 20);
-      expect(element.style.cursor).to.match(/grab$/);
-
-      simulateEvent('pointerdown', 10, 20);
-      expect(element.style.cursor).to.match(/grabbing$/);
-
-      simulateEvent('pointerup', 10, 20);
-      expect(element.style.cursor).to.match(/grab$/);
-
-      simulateEvent('pointermove', 0, 0);
-      expect(element.style.cursor).to.eql('pointer');
     });
 
     it('resets css cursor when interaction is deactivated while pointer is on feature', function() {
       simulateEvent('pointermove', 10, 20);
-      expect(element.style.cursor).to.match(/grab$/);
+      expect(element.classList.contains('ol-grabbing')).to.be(false);
+      expect(element.classList.contains('ol-grab')).to.be(true);
 
       translate.setActive(false);
 
       simulateEvent('pointermove', 0, 0);
-      expect(element.style.cursor).to.eql('');
+      expect(element.classList.contains('ol-grabbing')).to.be(false);
-    });
+      expect(element.classList.contains('ol-grab')).to.be(false);
-
-    it('resets css cursor to existing cursor when interaction is deactivated while pointer is on feature', function() {
-      element.style.cursor = 'pointer';
-
-      simulateEvent('pointermove', 10, 20);
-      expect(element.style.cursor).to.match(/grab$/);
-
-      translate.setActive(false);
-
-      simulateEvent('pointermove', 0, 0);
-      expect(element.style.cursor).to.eql('pointer');
     });
 
     it('resets css cursor interaction is removed while pointer is on feature', function() {
       simulateEvent('pointermove', 10, 20);
-      expect(element.style.cursor).to.match(/grab$/);
+      expect(element.classList.contains('ol-grabbing')).to.be(false);
+      expect(element.classList.contains('ol-grab')).to.be(true);
 
       map.removeInteraction(translate);
 
       simulateEvent('pointermove', 0, 0);
-      expect(element.style.cursor).to.eql('');
+      expect(element.classList.contains('ol-grabbing')).to.be(false);
+      expect(element.classList.contains('ol-grab')).to.be(false);
     });
 
     it('resets css cursor to existing cursor interaction is removed while pointer is on feature', function() {
       element.style.cursor = 'pointer';
 
       simulateEvent('pointermove', 10, 20);
-      expect(element.style.cursor).to.match(/grab$/);
+      expect(element.classList.contains('ol-grabbing')).to.be(false);
+      expect(element.classList.contains('ol-grab')).to.be(true);
 
       map.removeInteraction(translate);
 
       simulateEvent('pointermove', 0, 0);
-      expect(element.style.cursor).to.eql('pointer');
+      expect(element.classList.contains('ol-grabbing')).to.be(false);
+      expect(element.classList.contains('ol-grab')).to.be(false);
     });
 
   });