Make compass and zoom controls optional (mapbox#5348)

* Refactor line separator between control buttons Instead of having every control button have a bottom border, make stacked buttons have a top-border. This gets rid of the :last-child selector too. * Make compass optional The compass button of the navigation control is now optional. Creating a new navigation control with `{showCompass: false}` will leave out the compass button. Defaults to showing the compass button. * Make zoom-in/out buttons optional They still default to showing, but make them optional. * Add documentation * Update documentation * Conditionally add the dragRotateHandler - Remove check from `_rotateCompassArrow` - Add checks to `onAdd` and `onRemove`
WPMedia · Jan 10, 2018 · da74713 · da74713
1 parent a2c22d6
commit da74713
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 20 deletions.
diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css
@@ -67,19 +67,19 @@
     padding: 0;
     outline: none;
     border: none;
-    border-bottom: 1px solid #ddd;
     box-sizing: border-box;
     background-color: rgba(0,0,0,0);
     cursor: pointer;
 }
+
+.mapboxgl-ctrl-group > button + button {
+    border-top: 1px solid #ddd;
+}
 /* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
 .mapboxgl-ctrl > button::-moz-focus-inner {
     border: 0;
     padding: 0;
 }
-.mapboxgl-ctrl > button:last-child {
-    border-bottom: 0;
-}
 .mapboxgl-ctrl > button:hover {
     background-color: rgba(0,0,0,0.05);
 }

diff --git a/src/ui/control/navigation_control.js b/src/ui/control/navigation_control.js
@@ -6,10 +6,18 @@ const DragRotateHandler = require('../handler/drag_rotate');
 
 import type Map from '../map';
 
+const defaultOptions = {
+    showCompass: true,
+    showZoom: true
+};
+
 /**
  * A `NavigationControl` control contains zoom buttons and a compass.
  *
  * @implements {IControl}
+ * @param {Object} [options]
+ * @param {Boolean} [options.showCompass=true] If `true` the compass button is included.
+ * @param {Boolean} [options.showZoom=true] If `true` the zoom-in and zoom-out buttons are included.
  * @example
  * var nav = new mapboxgl.NavigationControl();
  * map.addControl(nav, 'top-left');
@@ -18,25 +26,31 @@ import type Map from '../map';
  */
 class NavigationControl {
     _map: Map;
+    options: any;
     _container: HTMLElement;
     _zoomInButton: HTMLElement;
     _zoomOutButton: HTMLElement;
     _compass: HTMLElement;
     _compassArrow: HTMLElement;
     _handler: DragRotateHandler;
 
-    constructor() {
-        util.bindAll([
-            '_rotateCompassArrow'
-        ], this);
+    constructor(options: any) {
+        this.options = util.extend({}, defaultOptions, options);
 
         this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-group');
         this._container.addEventListener('contextmenu', (e) => e.preventDefault());
 
-        this._zoomInButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-in', 'Zoom In', () => this._map.zoomIn());
-        this._zoomOutButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-out', 'Zoom Out', () => this._map.zoomOut());
-        this._compass = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-compass', 'Reset North', () => this._map.resetNorth());
-        this._compassArrow = DOM.create('span', 'mapboxgl-ctrl-compass-arrow', this._compass);
+        if (this.options.showZoom) {
+            this._zoomInButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-in', 'Zoom In', () => this._map.zoomIn());
+            this._zoomOutButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-out', 'Zoom Out', () => this._map.zoomOut());
+        }
+        if (this.options.showCompass) {
+            util.bindAll([
+                '_rotateCompassArrow'
+            ], this);
+            this._compass = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-compass', 'Reset North', () => this._map.resetNorth());
+            this._compassArrow = DOM.create('span', 'mapboxgl-ctrl-compass-arrow', this._compass);
+        }
     }
 
     _rotateCompassArrow() {
@@ -46,20 +60,24 @@ class NavigationControl {
 
     onAdd(map: Map) {
         this._map = map;
-        this._map.on('rotate', this._rotateCompassArrow);
-        this._rotateCompassArrow();
-        this._handler = new DragRotateHandler(map, {button: 'left', element: this._compass});
-        this._handler.enable();
+        if (this.options.showCompass) {
+            this._map.on('rotate', this._rotateCompassArrow);
+            this._rotateCompassArrow();
+            this._handler = new DragRotateHandler(map, {button: 'left', element: this._compass});
+            this._handler.enable();
+        }
         return this._container;
     }
 
     onRemove() {
         DOM.remove(this._container);
-        this._map.off('rotate', this._rotateCompassArrow);
-        delete this._map;
+        if (this.options.showCompass) {
+            this._map.off('rotate', this._rotateCompassArrow);
+            this._handler.disable();
+            delete this._handler;
+        }
 
-        this._handler.disable();
-        delete this._handler;
+        delete this._map;
     }
 
     _createButton(className: string, ariaLabel: string, fn: () => mixed) {