diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js
index d4b1ba7a6c..75f59b4121 100644
--- a/src/ol/control/zoomslidercontrol.js
+++ b/src/ol/control/zoomslidercontrol.js
@@ -4,14 +4,12 @@ goog.provide('ol.control.ZoomSlider');
goog.require('goog.asserts');
goog.require('goog.dom');
+goog.require('goog.math.Rect');
+goog.require('goog.style');
goog.require('ol.events');
goog.require('ol.events.Event');
goog.require('ol.events.EventType');
-goog.require('goog.fx.DragEvent');
-goog.require('goog.fx.Dragger');
-goog.require('goog.fx.Dragger.EventType');
-goog.require('goog.math.Rect');
-goog.require('goog.style');
+goog.require('ol.pointer.PointerEventHandler');
goog.require('ol.Size');
goog.require('ol.ViewHint');
goog.require('ol.animation');
@@ -55,6 +53,30 @@ ol.control.ZoomSlider = function(opt_options) {
*/
this.direction_ = ol.control.ZoomSlider.direction.VERTICAL;
+ /**
+ * @type {boolean}
+ */
+ this.dragging_;
+ /**
+ * @type {Array.
}
+ */
+ this.dragListenerKeys_;
+
+ /**
+ * @type {goog.math.Rect}
+ */
+ this.limits_;
+
+ /**
+ * @type {number|undefined}
+ */
+ this.previousX_;
+
+ /**
+ * @type {number|undefined}
+ */
+ this.previousY_;
+
/**
* The calculated thumb size (border box plus margins). Set when initSlider_
* is called.
@@ -85,18 +107,14 @@ ol.control.ZoomSlider = function(opt_options) {
[className, ol.css.CLASS_UNSELECTABLE, ol.css.CLASS_CONTROL],
thumbElement);
- /**
- * @type {goog.fx.Dragger}
- * @private
- */
- this.dragger_ = new goog.fx.Dragger(thumbElement);
- this.registerDisposable(this.dragger_);
+ var dragger = new ol.pointer.PointerEventHandler(containerElement);
+ this.registerDisposable(dragger);
- ol.events.listen(this.dragger_, goog.fx.Dragger.EventType.START,
+ ol.events.listen(dragger, ol.pointer.EventType.POINTERDOWN,
this.handleDraggerStart_, false, this);
- ol.events.listen(this.dragger_, goog.fx.Dragger.EventType.DRAG,
+ ol.events.listen(dragger, ol.pointer.EventType.POINTERMOVE,
this.handleDraggerDrag_, false, this);
- ol.events.listen(this.dragger_, goog.fx.Dragger.EventType.END,
+ ol.events.listen(dragger, ol.pointer.EventType.POINTERUP,
this.handleDraggerEnd_, false, this);
ol.events.listen(containerElement, ol.events.EventType.CLICK,
@@ -167,7 +185,7 @@ ol.control.ZoomSlider.prototype.initSlider_ = function() {
this.direction_ = ol.control.ZoomSlider.direction.VERTICAL;
limits = new goog.math.Rect(0, 0, 0, height);
}
- this.dragger_.setLimits(limits);
+ this.limits_ = limits;
this.sliderInitialized_ = true;
};
@@ -220,45 +238,81 @@ ol.control.ZoomSlider.prototype.handleContainerClick_ = function(browserEvent) {
/**
* Handle dragger start events.
- * @param {goog.fx.DragEvent} event The drag event.
+ * @param {ol.pointer.PointerEvent} event The drag event.
* @private
*/
ol.control.ZoomSlider.prototype.handleDraggerStart_ = function(event) {
- this.getMap().getView().setHint(ol.ViewHint.INTERACTING, 1);
+ if (!this.dragging_ &&
+ event.browserEvent.target === this.element.firstElementChild) {
+ this.getMap().getView().setHint(ol.ViewHint.INTERACTING, 1);
+ this.previousX_ = event.clientX;
+ this.previousY_ = event.clientY;
+ this.dragging_ = true;
+
+ if (!this.dragListenerKeys_) {
+ this.dragListenerKeys_ = [
+ ol.events.listen(document, [
+ ol.events.EventType.MOUSEMOVE,
+ ol.events.EventType.TOUCHMOVE,
+ ol.pointer.EventType.POINTERMOVE
+ ], this.handleDraggerDrag_, false, this),
+ ol.events.listen(document, [
+ ol.events.EventType.MOUSEUP,
+ ol.events.EventType.TOUCHEND,
+ ol.pointer.EventType.POINTERUP
+ ], this.handleDraggerEnd_, false, this)
+ ];
+ }
+ }
};
/**
* Handle dragger drag events.
*
- * @param {goog.fx.DragEvent} event The drag event.
+ * @param {ol.pointer.PointerEvent|Event} event The drag event.
* @private
*/
ol.control.ZoomSlider.prototype.handleDraggerDrag_ = function(event) {
- var relativePosition = this.getRelativePosition_(event.left, event.top);
- this.currentResolution_ = this.getResolutionForPosition_(relativePosition);
- this.getMap().getView().setResolution(this.currentResolution_);
+ if (this.dragging_) {
+ var element = this.element.firstElementChild;
+ var deltaX = event.clientX - this.previousX_ + parseInt(element.style.left, 10);
+ var deltaY = event.clientY - this.previousY_ + parseInt(element.style.top, 10);
+ var relativePosition = this.getRelativePosition_(deltaX, deltaY);
+ this.currentResolution_ = this.getResolutionForPosition_(relativePosition);
+ this.getMap().getView().setResolution(this.currentResolution_);
+ this.setThumbPosition_(this.currentResolution_);
+ this.previousX_ = event.clientX;
+ this.previousY_ = event.clientY;
+ }
};
/**
* Handle dragger end events.
- * @param {goog.fx.DragEvent} event The drag event.
+ * @param {ol.pointer.PointerEvent|Event} event The drag event.
* @private
*/
ol.control.ZoomSlider.prototype.handleDraggerEnd_ = function(event) {
- var map = this.getMap();
- var view = map.getView();
- view.setHint(ol.ViewHint.INTERACTING, -1);
- goog.asserts.assert(this.currentResolution_,
- 'this.currentResolution_ should be defined');
- map.beforeRender(ol.animation.zoom({
- resolution: this.currentResolution_,
- duration: this.duration_,
- easing: ol.easing.easeOut
- }));
- var resolution = view.constrainResolution(this.currentResolution_);
- view.setResolution(resolution);
+ if (this.dragging_) {
+ var map = this.getMap();
+ var view = map.getView();
+ view.setHint(ol.ViewHint.INTERACTING, -1);
+ goog.asserts.assert(this.currentResolution_,
+ 'this.currentResolution_ should be defined');
+ map.beforeRender(ol.animation.zoom({
+ resolution: this.currentResolution_,
+ duration: this.duration_,
+ easing: ol.easing.easeOut
+ }));
+ var resolution = view.constrainResolution(this.currentResolution_);
+ view.setResolution(resolution);
+ this.dragging_ = false;
+ this.previousX_ = undefined;
+ this.previousY_ = undefined;
+ this.dragListenerKeys_.forEach(ol.events.unlistenByKey);
+ this.dragListenerKeys_ = null;
+ }
};
@@ -270,15 +324,14 @@ ol.control.ZoomSlider.prototype.handleDraggerEnd_ = function(event) {
*/
ol.control.ZoomSlider.prototype.setThumbPosition_ = function(res) {
var position = this.getPositionForResolution_(res);
- var dragger = this.dragger_;
var thumb = goog.dom.getFirstElementChild(this.element);
if (this.direction_ == ol.control.ZoomSlider.direction.HORIZONTAL) {
- var left = dragger.limits.left + dragger.limits.width * position;
+ var left = this.limits_.left + this.limits_.width * position;
goog.style.setPosition(thumb, left);
} else {
- var top = dragger.limits.top + dragger.limits.height * position;
- goog.style.setPosition(thumb, dragger.limits.left, top);
+ var top = this.limits_.top + this.limits_.height * position;
+ goog.style.setPosition(thumb, this.limits_.left, top);
}
};
@@ -294,7 +347,7 @@ ol.control.ZoomSlider.prototype.setThumbPosition_ = function(res) {
* @private
*/
ol.control.ZoomSlider.prototype.getRelativePosition_ = function(x, y) {
- var draggerLimits = this.dragger_.limits;
+ var draggerLimits = this.limits_;
var amount;
if (this.direction_ === ol.control.ZoomSlider.direction.HORIZONTAL) {
amount = (x - draggerLimits.left) / draggerLimits.width;
diff --git a/src/ol/events.js b/src/ol/events.js
index e42556ac69..8d53c2dad4 100644
--- a/src/ol/events.js
+++ b/src/ol/events.js
@@ -14,6 +14,7 @@ ol.events.EventType = {
* @api
*/
CHANGE: 'change',
+
CLICK: 'click',
DBLCLICK: 'dblclick',
DRAGENTER: 'dragenter',
@@ -26,10 +27,13 @@ ol.events.EventType = {
MOUSEDOWN: 'mousedown',
MOUSEMOVE: 'mousemove',
MOUSEOUT: 'mouseout',
+ MOUSEUP: 'mouseup',
MOUSEWHEEL: 'mousewheel',
MSPOINTERDOWN: 'mspointerdown',
RESIZE: 'resize',
TOUCHSTART: 'touchstart',
+ TOUCHMOVE: 'touchmove',
+ TOUCHEND: 'touchend',
WHEEL: 'wheel'
};
diff --git a/src/ol/mapbrowserevent.js b/src/ol/mapbrowserevent.js
index 74bdb499cc..eb126c9489 100644
--- a/src/ol/mapbrowserevent.js
+++ b/src/ol/mapbrowserevent.js
@@ -48,7 +48,7 @@ ol.MapBrowserEvent = function(type, map, browserEvent, opt_dragging,
* @type {ol.Pixel}
* @api stable
*/
- this.pixel = map.getEventPixel(this.originalEvent);
+ this.pixel = map.getEventPixel(browserEvent);
/**
* The coordinate of the original browser event.
@@ -106,7 +106,7 @@ ol.MapBrowserEvent.prototype.stopPropagation = function() {
ol.MapBrowserPointerEvent = function(type, map, pointerEvent, opt_dragging,
opt_frameState) {
- goog.base(this, type, map, pointerEvent.originalEvent, opt_dragging,
+ goog.base(this, type, map, pointerEvent.browserEvent, opt_dragging,
opt_frameState);
/**
diff --git a/src/ol/pointer/pointerevent.js b/src/ol/pointer/pointerevent.js
index a7fe8d76bf..438c79933b 100644
--- a/src/ol/pointer/pointerevent.js
+++ b/src/ol/pointer/pointerevent.js
@@ -55,7 +55,7 @@ ol.pointer.PointerEvent = function(type, browserEvent, opt_eventDict) {
* @const
* @type {Event}
*/
- this.originalEvent = browserEvent;
+ this.browserEvent = browserEvent;
var eventDict = opt_eventDict ? opt_eventDict : {};
diff --git a/test/spec/ol/control/zoomslidercontrol.test.js b/test/spec/ol/control/zoomslidercontrol.test.js
index d3cb78ada9..ef460b727f 100644
--- a/test/spec/ol/control/zoomslidercontrol.test.js
+++ b/test/spec/ol/control/zoomslidercontrol.test.js
@@ -50,10 +50,10 @@ describe('ol.control.ZoomSlider', function() {
});
- describe('dragger setup', function() {
- it('creates a goog.fx.Dragger', function() {
- expect(zoomslider.dragger_ instanceof goog.fx.Dragger).to.be(true);
- expect(zoomslider.dragger_.limits instanceof goog.math.Rect).to.be(true);
+ describe('#initSlider_', function() {
+ it('sets limits', function() {
+ zoomslider.initSlider_();
+ expect(zoomslider.limits_ instanceof goog.math.Rect).to.be(true);
});
});
@@ -90,7 +90,6 @@ describe('ol.control.ZoomSlider', function() {
goog.require('goog.dispose');
goog.require('goog.dom');
goog.require('goog.dom.classlist');
-goog.require('goog.fx.Dragger');
goog.require('goog.math.Rect');
goog.require('ol.Map');
goog.require('ol.control.ZoomSlider');