convert controls to ES6 class syntax; ditch util.setOptions

mapbox · Oct 19, 2016 · 40577f2 · 40577f2
1 parent 5ec1f1d
commit 40577f2
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 137 deletions.
diff --git a/js/ui/control/attribution_control.js b/js/ui/control/attribution_control.js
@@ -2,31 +2,25 @@
 
 const Control = require('./control');
 const DOM = require('../../util/dom');
-const util = require('../../util/util');
-
-module.exports = AttributionControl;
 
 /**
  * An `AttributionControl` control presents the map's [attribution information](https://www.mapbox.com/help/attribution/).
  * Extends [`Control`](#Control).
  *
- * @class AttributionControl
  * @param {Object} [options]
  * @param {string} [options.position='bottom-right'] A string indicating the control's position on the map. Options are `'top-right'`, `'top-left'`, `'bottom-right'`, and `'bottom-left'`.
  * @example
  * var map = new mapboxgl.Map({attributionControl: false})
  *     .addControl(new mapboxgl.AttributionControl({position: 'top-left'}));
  */
-function AttributionControl(options) {
-    util.setOptions(this, options);
-}
+class AttributionControl extends Control {
 
-AttributionControl.prototype = util.inherit(Control, {
-    options: {
-        position: 'bottom-right'
-    },
+    constructor(options) {
+        super();
+        this._position = options && options.position || 'bottom-right';
+    }
 
-    onAdd: function(map) {
+    onAdd(map) {
         const className = 'mapboxgl-ctrl-attrib',
             container = this._container = DOM.create('div', className, map.getContainer());
 
@@ -43,9 +37,9 @@ AttributionControl.prototype = util.inherit(Control, {
         map.on('moveend', this._updateEditLink.bind(this));
 
         return container;
-    },
+    }
 
-    _updateAttributions: function() {
+    _updateAttributions() {
         if (!this._map.style) return;
 
         let attributions = [];
@@ -70,14 +64,16 @@ AttributionControl.prototype = util.inherit(Control, {
         this._container.innerHTML = attributions.join(' | ');
         // remove old DOM node from _editLink
         this._editLink = null;
-    },
+    }
 
-    _updateEditLink: function() {
+    _updateEditLink() {
         if (!this._editLink) this._editLink = this._container.querySelector('.mapbox-improve-map');
         if (this._editLink) {
             const center = this._map.getCenter();
             this._editLink.href = `https://www.mapbox.com/map-feedback/#/${
                     center.lng}/${center.lat}/${Math.round(this._map.getZoom() + 1)}`;
         }
     }
-});
+}
+
+module.exports = AttributionControl;
diff --git a/js/ui/control/control.js b/js/ui/control/control.js
@@ -1,51 +1,46 @@
 'use strict';
 
-const util = require('../../util/util');
 const Evented = require('../../util/evented');
-module.exports = Control;
 
 /**
  * The base class for map-related interface elements.
  *
- * The `Control` class mixes in [`Evented`](#Evented) methods.
- *
- * @class Control
+ * The `Control` class inherits event methods from [`Evented`](#Evented).
  */
-function Control() {}
-
-Control.prototype = util.inherit(Evented, {
+class Control extends Evented {
     /**
      * Adds the control to a map.
      *
      * @param {Map} map The Mapbox GL JS map to add the control to.
      * @returns {Control} `this`
      */
-    addTo: function(map) {
+    addTo(map) {
         this._map = map;
         const container = this._container = this.onAdd(map);
-        if (this.options && this.options.position) {
-            const pos = this.options.position;
-            const corner = map._controlCorners[pos];
+        if (this._position) {
+            const corner = map._controlCorners[this._position];
             container.className += ' mapboxgl-ctrl';
-            if (pos.indexOf('bottom') !== -1) {
+            if (this._position.indexOf('bottom') !== -1) {
                 corner.insertBefore(container, corner.firstChild);
             } else {
                 corner.appendChild(container);
             }
         }
 
         return this;
-    },
+    }
 
     /**
      * Removes the control from the map it has been added to.
      *
      * @returns {Control} `this`
      */
-    remove: function() {
+    remove() {
         this._container.parentNode.removeChild(this._container);
         if (this.onRemove) this.onRemove(this._map);
         this._map = null;
         return this;
     }
-});
+}
+
+module.exports = Control;
diff --git a/js/ui/control/geolocate_control.js b/js/ui/control/geolocate_control.js
@@ -3,60 +3,49 @@
 const Control = require('./control');
 const browser = require('../../util/browser');
 const DOM = require('../../util/dom');
-const util = require('../../util/util');
 const window = require('../../util/window');
 
-module.exports = GeolocateControl;
-
 const geoOptions = { enableHighAccuracy: false, timeout: 6000 /* 6sec */ };
 
-
 /**
  * A `GeolocateControl` control provides a button that uses the browser's geolocation
  * API to locate the user on the map. Extends [`Control`](#Control).
  *
- * @class GeolocateControl
  * @param {Object} [options]
  * @param {string} [options.position='top-right'] A string indicating the control's position on the map. Options are `'top-right'`, `'top-left'`, `'bottom-right'`, and `'bottom-left'`.
  * @example
  * map.addControl(new mapboxgl.GeolocateControl({position: 'top-left'})); // position is optional
  */
-function GeolocateControl(options) {
-    util.setOptions(this, options);
-}
+class GeolocateControl extends Control {
 
-GeolocateControl.prototype = util.inherit(Control, {
-    options: {
-        position: 'top-right'
-    },
+    constructor(options) {
+        super();
+        this._position = options && options.position || 'top-right';
+    }
 
-    onAdd: function(map) {
+    onAdd(map) {
         const className = 'mapboxgl-ctrl';
 
         const container = this._container = DOM.create('div', `${className}-group`, map.getContainer());
         if (!browser.supportsGeolocation) return container;
 
-        this._container.addEventListener('contextmenu', this._onContextMenu.bind(this));
+        this._container.addEventListener('contextmenu', (e) => e.preventDefault());
 
         this._geolocateButton = DOM.create('button', (`${className}-icon ${className}-geolocate`), this._container);
         this._geolocateButton.type = 'button';
         this._geolocateButton.addEventListener('click', this._onClickGeolocate.bind(this));
         return container;
-    },
-
-    _onContextMenu: function(e) {
-        e.preventDefault();
-    },
+    }
 
-    _onClickGeolocate: function() {
+    _onClickGeolocate() {
         window.navigator.geolocation.getCurrentPosition(this._success.bind(this), this._error.bind(this), geoOptions);
 
         // This timeout ensures that we still call finish() even if
         // the user declines to share their location in Firefox
         this._timeoutId = setTimeout(this._finish.bind(this), 10000 /* 10sec */);
-    },
+    }
 
-    _success: function(position) {
+    _success(position) {
         this._map.jumpTo({
             center: [position.coords.longitude, position.coords.latitude],
             zoom: 17,
@@ -66,19 +55,20 @@ GeolocateControl.prototype = util.inherit(Control, {
 
         this.fire('geolocate', position);
         this._finish();
-    },
+    }
 
-    _error: function(error) {
+    _error(error) {
         this.fire('error', error);
         this._finish();
-    },
+    }
 
-    _finish: function() {
+    _finish() {
         if (this._timeoutId) { clearTimeout(this._timeoutId); }
         this._timeoutId = undefined;
     }
+}
 
-});
+module.exports = GeolocateControl;
 
 /**
  * geolocate event.

diff --git a/js/ui/control/navigation_control.js b/js/ui/control/navigation_control.js
@@ -2,16 +2,12 @@
 
 const Control = require('./control');
 const DOM = require('../../util/dom');
-const util = require('../../util/util');
 const window = require('../../util/window');
 
-module.exports = NavigationControl;
-
 /**
  * A `NavigationControl` control contains zoom buttons and a compass.
  * Extends [`Control`](#Control).
  *
- * @class NavigationControl
  * @param {Object} [options]
  * @param {string} [options.position='top-right'] A string indicating the control's position on the map. Options are `'top-right'`, `'top-left'`, `'bottom-right'`, and `'bottom-left'`.
  * @example
@@ -20,16 +16,14 @@ module.exports = NavigationControl;
  * @see [Display map navigation controls](https://www.mapbox.com/mapbox-gl-js/example/navigation/)
  * @see [Add a third party vector tile source](https://www.mapbox.com/mapbox-gl-js/example/third-party/)
  */
-function NavigationControl(options) {
-    util.setOptions(this, options);
-}
+class NavigationControl extends Control {
 
-NavigationControl.prototype = util.inherit(Control, {
-    options: {
-        position: 'top-right'
-    },
+    constructor(options) {
+        super();
+        this._position = options && options.position || 'top-right';
+    }
 
-    onAdd: function(map) {
+    onAdd(map) {
         const className = 'mapboxgl-ctrl';
 
         const container = this._container = DOM.create('div', `${className}-group`, map.getContainer());
@@ -51,13 +45,13 @@ NavigationControl.prototype = util.inherit(Control, {
         this._el = map.getCanvasContainer();
 
         return container;
-    },
+    }
 
-    _onContextMenu: function(e) {
+    _onContextMenu(e) {
         e.preventDefault();
-    },
+    }
 
-    _onCompassDown: function(e) {
+    _onCompassDown(e) {
         if (e.button !== 0) return;
 
         DOM.disableDrag();
@@ -66,16 +60,16 @@ NavigationControl.prototype = util.inherit(Control, {
 
         this._el.dispatchEvent(copyMouseEvent(e));
         e.stopPropagation();
-    },
+    }
 
-    _onCompassMove: function(e) {
+    _onCompassMove(e) {
         if (e.button !== 0) return;
 
         this._el.dispatchEvent(copyMouseEvent(e));
         e.stopPropagation();
-    },
+    }
 
-    _onCompassUp: function(e) {
+    _onCompassUp(e) {
         if (e.button !== 0) return;
 
         window.document.removeEventListener('mousemove', this._onCompassMove);
@@ -84,21 +78,22 @@ NavigationControl.prototype = util.inherit(Control, {
 
         this._el.dispatchEvent(copyMouseEvent(e));
         e.stopPropagation();
-    },
+    }
 
-    _createButton: function(className, fn) {
+    _createButton(className, fn) {
         const a = DOM.create('button', className, this._container);
         a.type = 'button';
         a.addEventListener('click', () => { fn(); });
         return a;
-    },
+    }
 
-    _rotateCompassArrow: function() {
+    _rotateCompassArrow() {
         const rotate = `rotate(${this._map.transform.angle * (180 / Math.PI)}deg)`;
         this._compassArrow.style.transform = rotate;
     }
-});
+}
 
+module.exports = NavigationControl;
 
 function copyMouseEvent(e) {
     return new window.MouseEvent(e.type, {

diff --git a/js/ui/control/scale_control.js b/js/ui/control/scale_control.js
@@ -1,10 +1,8 @@
 'use strict';
-const util = require('../../util/util');
+
 const Control = require('./control');
 const DOM = require('../../util/dom');
 
-module.exports = ScaleControl;
-
 /**
  * A `ScaleControl` control displays the ratio of a distance on the map to the corresponding distance on the ground.
  * Extends [`Control`](#Control).
@@ -21,16 +19,14 @@ module.exports = ScaleControl;
  *     unit: 'imperial'
  * }));
  */
-function ScaleControl(options) {
-    util.setOptions(this, options);
-}
+class ScaleControl extends Control {
 
-ScaleControl.prototype = util.inherit(Control, {
-    options: {
-        position: 'bottom-left'
-    },
+    constructor(options) {
+        super();
+        this._position = options && options.position || 'bottom-left';
+    }
 
-    onAdd: function(map) {
+    onAdd(map) {
         const className = 'mapboxgl-ctrl-scale',
             container = this._container = DOM.create('div', className, map.getContainer()),
             options = this.options;
@@ -42,7 +38,9 @@ ScaleControl.prototype = util.inherit(Control, {
 
         return container;
     }
-});
+}
+
+module.exports = ScaleControl;
 
 function updateScale(map, scale, options) {
     // A horizontal scale is imagined to be present at center of the map