convert all handlers to ES6 class syntax; remove util.bindHandlers

Note that `util.bindHandlers` no longer works with ES6 classes
(prototype methods are not enumerable), so I removed it in favor of
more explicit `util.bindAll`.

js/ui/handler/box_zoom.js

@@ -5,71 +5,70 @@ const LngLatBounds = require('../../geo/lng_lat_bounds');
 const util = require('../../util/util');
 const window = require('../../util/window');
 
-module.exports = BoxZoomHandler;
-
 /**
  * The `BoxZoomHandler` allows the user to zoom the map to fit within a bounding box.
  * The bounding box is defined by clicking and holding `shift` while dragging the cursor.
  *
- * @class BoxZoomHandler
  * @param {Map} map The Mapbox GL JS map to add the handler to.
  */
-function BoxZoomHandler(map) {
-    this._map = map;
-    this._el = map.getCanvasContainer();
-    this._container = map.getContainer();
-
-    util.bindHandlers(this);
-}
-
-BoxZoomHandler.prototype = {
-
-    _enabled: false,
-    _active: false,
+class BoxZoomHandler {
+
+    constructor(map) {
+        this._map = map;
+        this._el = map.getCanvasContainer();
+        this._container = map.getContainer();
+
+        util.bindAll([
+            '_onMouseDown',
+            '_onMouseMove',
+            '_onMouseUp',
+            '_onKeyDown'
+        ], this);
+    }
 
     /**
      * Returns a Boolean indicating whether the "box zoom" interaction is enabled.
      *
      * @returns {boolean} `true` if the "box zoom" interaction is enabled.
      */
-    isEnabled: function () {
-        return this._enabled;
-    },
+    isEnabled() {
+        return !!this._enabled;
+    }
 
     /**
      * Returns a Boolean indicating whether the "box zoom" interaction is active, i.e. currently being used.
      *
      * @returns {boolean} `true` if the "box zoom" interaction is active.
      */
-    isActive: function () {
-        return this._active;
-    },
+    isActive() {
+        return !!this._active;
+    }
 
     /**
      * Enables the "box zoom" interaction.
      *
      * @example
      *   map.boxZoom.enable();
      */
-    enable: function () {
+    enable() {
         if (this.isEnabled()) return;
         this._el.addEventListener('mousedown', this._onMouseDown, false);
         this._enabled = true;
-    },
+    }
 
     /**
      * Disables the "box zoom" interaction.
      *
      * @example
      *   map.boxZoom.disable();
      */
-    disable: function () {
+    disable() {
         if (!this.isEnabled()) return;
         this._el.removeEventListener('mousedown', this._onMouseDown);
         this._enabled = false;
-    },
+    }
 
-    _onMouseDown: function (e) {
+    _onMouseDown(e) {
         if (!(e.shiftKey && e.button === 0)) return;
 
         window.document.addEventListener('mousemove', this._onMouseMove, false);
@@ -79,9 +78,9 @@ BoxZoomHandler.prototype = {
         DOM.disableDrag();
         this._startPos = DOM.mousePos(this._el, e);
         this._active = true;
-    },
+    }
 
-    _onMouseMove: function (e) {
+    _onMouseMove(e) {
         const p0 = this._startPos,
             p1 = DOM.mousePos(this._el, e);
 
@@ -100,9 +99,9 @@ BoxZoomHandler.prototype = {
 
         this._box.style.width = `${maxX - minX}px`;
         this._box.style.height = `${maxY - minY}px`;
-    },
+    }
 
-    _onMouseUp: function (e) {
+    _onMouseUp(e) {
         if (e.button !== 0) return;
 
         const p0 = this._startPos,
@@ -120,16 +119,16 @@ BoxZoomHandler.prototype = {
                 .fitBounds(bounds, {linear: true})
                 .fire('boxzoomend', { originalEvent: e, boxZoomBounds: bounds });
         }
-    },
+    }
 
-    _onKeyDown: function (e) {
+    _onKeyDown(e) {
         if (e.keyCode === 27) {
             this._finish();
             this._fireEvent('boxzoomcancel', e);
         }
-    },
+    }
 
-    _finish: function () {
+    _finish() {
         this._active = false;
 
         window.document.removeEventListener('mousemove', this._onMouseMove, false);
@@ -144,12 +143,14 @@ BoxZoomHandler.prototype = {
         }
 
         DOM.enableDrag();
-    },
+    }
 
-    _fireEvent: function (type, e) {
+    _fireEvent(type, e) {
         return this._map.fire(type, { originalEvent: e });
     }
-};
+}
+
+module.exports = BoxZoomHandler;
 
 /**
  * @typedef {Object} MapBoxZoomEvent

js/ui/handler/dblclick_zoom.js

@@ -1,61 +1,57 @@
 'use strict';
 
-module.exports = DoubleClickZoomHandler;
-
 /**
  * The `DoubleClickZoomHandler` allows the user to zoom the map at a point by
  * double clicking.
  *
- * @class DoubleClickZoomHandler
  * @param {Map} map The Mapbox GL JS map to add the handler to.
  */
-function DoubleClickZoomHandler(map) {
-    this._map = map;
-    this._onDblClick = this._onDblClick.bind(this);
-}
-
-DoubleClickZoomHandler.prototype = {
-
-    _enabled: false,
+class DoubleClickZoomHandler {
+    constructor(map) {
+        this._map = map;
+        this._onDblClick = this._onDblClick.bind(this);
+    }
 
     /**
      * Returns a Boolean indicating whether the "double click to zoom" interaction is enabled.
      *
      * @returns {boolean} `true` if the "double click to zoom" interaction is enabled.
      */
-    isEnabled: function () {
-        return this._enabled;
-    },
+    isEnabled() {
+        return !!this._enabled;
+    }
 
     /**
      * Enables the "double click to zoom" interaction.
      *
      * @example
      * map.doubleClickZoom.enable();
      */
-    enable: function () {
+    enable() {
         if (this.isEnabled()) return;
         this._map.on('dblclick', this._onDblClick);
         this._enabled = true;
-    },
+    }
 
     /**
      * Disables the "double click to zoom" interaction.
      *
      * @example
      * map.doubleClickZoom.disable();
      */
-    disable: function () {
+    disable() {
         if (!this.isEnabled()) return;
         this._map.off('dblclick', this._onDblClick);
         this._enabled = false;
-    },
+    }
 
-    _onDblClick: function (e) {
+    _onDblClick(e) {
         this._map.zoomTo(
             this._map.getZoom() + (e.originalEvent.shiftKey ? -1 : 1),
             {around: e.lngLat},
             e
         );
     }
-};
+}
+
+module.exports = DoubleClickZoomHandler;