Remove goog.fx.Dragger

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('ol.pointer.PointerEventHandler');
-goog.require('goog.fx.Dragger');
-goog.require('goog.fx.Dragger.EventType');
-goog.require('goog.math.Rect');
-goog.require('goog.style');
 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.<ol.events.Key>}
+   */
+  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);
 
-  /**
+  var dragger = new ol.pointer.PointerEventHandler(containerElement);
-   * @type {goog.fx.Dragger}
+  this.registerDisposable(dragger);
-   * @private
-   */
-  this.dragger_ = new goog.fx.Dragger(thumbElement);
-  this.registerDisposable(this.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);
+  if (this.dragging_) {
-  this.currentResolution_ = this.getResolutionForPosition_(relativePosition);
+    var element = this.element.firstElementChild;
-  this.getMap().getView().setResolution(this.currentResolution_);
+    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();
+  if (this.dragging_) {
-  var view = map.getView();
+    var map = this.getMap();
-  view.setHint(ol.ViewHint.INTERACTING, -1);
+    var view = map.getView();
-  goog.asserts.assert(this.currentResolution_,
+    view.setHint(ol.ViewHint.INTERACTING, -1);
-      'this.currentResolution_ should be defined');
+    goog.asserts.assert(this.currentResolution_,
-  map.beforeRender(ol.animation.zoom({
+        'this.currentResolution_ should be defined');
-    resolution: this.currentResolution_,
+    map.beforeRender(ol.animation.zoom({
-    duration: this.duration_,
+      resolution: this.currentResolution_,
-    easing: ol.easing.easeOut
+      duration: this.duration_,
-  }));
+      easing: ol.easing.easeOut
-  var resolution = view.constrainResolution(this.currentResolution_);
+    }));
-  view.setResolution(resolution);
+    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;
+    var top = this.limits_.top + this.limits_.height * position;
-    goog.style.setPosition(thumb, dragger.limits.left, top);
+    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;

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'
 };
 

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);
 
   /**

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 : {};
 

test/spec/ol/control/zoomslidercontrol.test.js

@@ -50,10 +50,10 @@ describe('ol.control.ZoomSlider', function() {
 
   });
 
-  describe('dragger setup', function() {
+  describe('#initSlider_', function() {
-    it('creates a goog.fx.Dragger', function() {
+    it('sets limits', function() {
-      expect(zoomslider.dragger_ instanceof goog.fx.Dragger).to.be(true);
+      zoomslider.initSlider_();
-      expect(zoomslider.dragger_.limits instanceof goog.math.Rect).to.be(true);
+      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');