Revert changes from 7b687be

Adapted the changes to new class structures introduced since the original
deletion before committing, to ensure that everything compiles correctly.

src/ol/control/ZoomSlider.js

@@ -5,7 +5,7 @@ import ViewHint from '../ViewHint.js';
 import Control from '../control/Control.js';
 import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
 import {easeOut} from '../easing.js';
-import {listen} from '../events.js';
+import {listen, unlistenByKey} from '../events.js';
 import {stopPropagation} from '../events/Event.js';
 import EventType from '../events/EventType.js';
 import {clamp} from '../math.js';
@@ -57,6 +57,12 @@ class ZoomSlider extends Control {
       render: options.render || render
     });
 
+    /**
+      * @type {!Array.<ol.EventsKey>}
+      * @private
+      */
+    this.dragListenerKeys_ = [];
+
     /**
      * Will hold the current resolution of the view.
      *
@@ -231,6 +237,19 @@ class ZoomSlider extends Control {
       this.previousX_ = event.clientX;
       this.previousY_ = event.clientY;
       this.dragging_ = true;
+
+      if (this.dragListenerKeys_.length === 0) {
+        const drag = this.handleDraggerDrag_;
+        const end = this.handleDraggerEnd_;
+        this.dragListenerKeys_.push(
+          listen(document, EventType.MOUSEMOVE, drag, this),
+          listen(document, EventType.TOUCHMOVE, drag, this),
+          listen(document, PointerEventType.POINTERMOVE, drag, this),
+          listen(document, EventType.MOUSEUP, end, this),
+          listen(document, EventType.TOUCHEND, end, this),
+          listen(document, PointerEventType.POINTERUP, end, this)
+        );
+      }
     }
   }
 
@@ -273,6 +292,8 @@ class ZoomSlider extends Control {
       this.dragging_ = false;
       this.previousX_ = undefined;
       this.previousY_ = undefined;
+      this.dragListenerKeys_.forEach(unlistenByKey);
+      this.dragListenerKeys_.length = 0;
     }
   }
 

test/spec/ol/control/zoomslider.test.js

@@ -119,6 +119,7 @@ describe('ol.control.ZoomSlider', function() {
       dragger.dispatchEvent(event);
       expect(control.currentResolution_).to.be(16);
       expect(control.dragging_).to.be(true);
+      expect(control.dragListenerKeys_.length).to.be(6);
       event.type = 'pointermove';
       event.clientX = 6 * control.widthLimit_ / 8;
       event.clientY = 0;
@@ -131,6 +132,7 @@ describe('ol.control.ZoomSlider', function() {
       event.type = 'pointerup';
       dragger.dispatchEvent(event);
       expect(control.currentResolution_).to.be(1);
+      expect(control.dragListenerKeys_.length).to.be(0);
       expect(control.dragging_).to.be(false);
     });
     it('[vertical] handles a drag sequence', function() {
@@ -151,6 +153,7 @@ describe('ol.control.ZoomSlider', function() {
       dragger.dispatchEvent(event);
       expect(control.currentResolution_).to.be(0.0625);
       expect(control.dragging_).to.be(true);
+      expect(control.dragListenerKeys_.length).to.be(6);
       event.type = 'pointermove';
       event.clientX = 0;
       event.clientY = 2 * control.heightLimit_ / 8;
@@ -163,6 +166,7 @@ describe('ol.control.ZoomSlider', function() {
       event.type = 'pointerup';
       dragger.dispatchEvent(event);
       expect(control.currentResolution_).to.be(1);
+      expect(control.dragListenerKeys_.length).to.be(0);
       expect(control.dragging_).to.be(false);
     });
   });