diff --git a/css/ol.css b/css/ol.css index 36b63fbd8e..94cdaaaa66 100644 --- a/css/ol.css +++ b/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; -} \ No newline at end of file +} diff --git a/src/ol/interaction/translate.js b/src/ol/interaction/translate.js index da7bfa9d1e..af31884150 100644 --- a/src/ol/interaction/translate.js +++ b/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 ? - this.previousCursor_ : elem.style.cursor; - // WebKit browsers don't support the grab icons without a prefix - elem.style.cursor = this.lastCoordinate_ ? - '-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; + elem.classList.remove(this.lastCoordinate_ ? 'ol-grab' : 'ol-grabbing'); + elem.classList.add(this.lastCoordinate_ ? 'ol-grabbing' : 'ol-grab'); + } else { + elem.classList.remove('ol-grab', 'ol-grabbing'); } }; @@ -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(); - elem.style.cursor = this.previousCursor_; - this.previousCursor_ = undefined; + var elem = map.getViewport(); + elem.classList.remove('ol-grab', 'ol-grabbing'); } }; diff --git a/test/spec/ol/interaction/translate.test.js b/test/spec/ol/interaction/translate.test.js index 82d5a1cd2b..9f8a0c7d9c 100644 --- a/test/spec/ol/interaction/translate.test.js +++ b/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(''); - }); - - 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'); + expect(element.classList.contains('ol-grabbing')).to.be(false); + expect(element.classList.contains('ol-grab')).to.be(false); }); 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(''); - }); - - 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'); + expect(element.classList.contains('ol-grabbing')).to.be(false); + expect(element.classList.contains('ol-grab')).to.be(false); }); 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); }); });