From da7471353bbd1ec4226c5db2a307b48b7537a41b Mon Sep 17 00:00:00 2001
From: Matijs Brinkhuis <matijs@gmail.com>
Date: Wed, 10 Jan 2018 21:31:46 +0100
Subject: [PATCH] Make compass and zoom controls optional (#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`
---
 dist/mapbox-gl.css                   |  8 ++---
 src/ui/control/navigation_control.js | 50 +++++++++++++++++++---------
 2 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css
index e4000ff8cdf..549fb7a00e5 100644
--- 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
index 35d2ed7dc5e..a09c55574af 100644
--- 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,6 +26,7 @@ import type Map from '../map';
  */
 class NavigationControl {
     _map: Map;
+    options: any;
     _container: HTMLElement;
     _zoomInButton: HTMLElement;
     _zoomOutButton: HTMLElement;
@@ -25,18 +34,23 @@ class NavigationControl {
     _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) {