From d32ab606b0f439c264b9a7ace461f23b93916365 Mon Sep 17 00:00:00 2001
From: andycalder <28855024+andycalder@users.noreply.github.com>
Date: Wed, 13 Mar 2019 00:29:56 +1000
Subject: [PATCH 1/2] Gray out zoom buttons at maxZoom/minZoom

---
 src/css/mapbox-gl.css                  | 12 ++++++++++--
 src/css/svg/mapboxgl-ctrl-zoom-in.svg  |  2 +-
 src/css/svg/mapboxgl-ctrl-zoom-out.svg |  2 +-
 src/ui/control/navigation_control.js   | 16 ++++++++++++++++
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/css/mapbox-gl.css b/src/css/mapbox-gl.css
index 55400964a83..fa61b8fe13f 100644
--- a/src/css/mapbox-gl.css
+++ b/src/css/mapbox-gl.css
@@ -112,11 +112,19 @@
 }
 
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
-    background-image: svg-load('svg/mapboxgl-ctrl-zoom-out.svg');
+    background-image: svg-load('svg/mapboxgl-ctrl-zoom-out.svg', fill=#333);
 }
 
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
-    background-image: svg-load('svg/mapboxgl-ctrl-zoom-in.svg');
+    background-image: svg-load('svg/mapboxgl-ctrl-zoom-in.svg', fill=#333);
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out.mapboxgl-ctrl-zoom-out-disabled {
+    background-image: svg-load('svg/mapboxgl-ctrl-zoom-out.svg', fill=#ccc);
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in.mapboxgl-ctrl-zoom-in-disabled {
+    background-image: svg-load('svg/mapboxgl-ctrl-zoom-in.svg', fill=#ccc);
 }
 
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate {
diff --git a/src/css/svg/mapboxgl-ctrl-zoom-in.svg b/src/css/svg/mapboxgl-ctrl-zoom-in.svg
index b26e3d16205..bc8ecf94e9a 100644
--- a/src/css/svg/mapboxgl-ctrl-zoom-in.svg
+++ b/src/css/svg/mapboxgl-ctrl-zoom-in.svg
@@ -1,3 +1,3 @@
 <svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-  <path style='fill:#333333;' d='M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z' />
+  <path d='M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z' />
 </svg>
diff --git a/src/css/svg/mapboxgl-ctrl-zoom-out.svg b/src/css/svg/mapboxgl-ctrl-zoom-out.svg
index ab6e9ff222b..f2bc0078361 100644
--- a/src/css/svg/mapboxgl-ctrl-zoom-out.svg
+++ b/src/css/svg/mapboxgl-ctrl-zoom-out.svg
@@ -1,3 +1,3 @@
 <svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-  <path style='fill:#333333;' d='m 7,9 c -0.554,0 -1,0.446 -1,1 0,0.554 0.446,1 1,1 l 6,0 c 0.554,0 1,-0.446 1,-1 0,-0.554 -0.446,-1 -1,-1 z' />
+  <path d='m 7,9 c -0.554,0 -1,0.446 -1,1 0,0.554 0.446,1 1,1 l 6,0 c 0.554,0 1,-0.446 1,-1 0,-0.554 -0.446,-1 -1,-1 z' />
 </svg>
diff --git a/src/ui/control/navigation_control.js b/src/ui/control/navigation_control.js
index 395fefd2e45..2d0ed13d73e 100644
--- a/src/ui/control/navigation_control.js
+++ b/src/ui/control/navigation_control.js
@@ -46,6 +46,9 @@ class NavigationControl {
         this._container.addEventListener('contextmenu', (e) => e.preventDefault());
 
         if (this.options.showZoom) {
+            bindAll([
+                '_updateZoomButtons'
+            ], this);
             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());
         }
@@ -58,6 +61,12 @@ class NavigationControl {
         }
     }
 
+    _updateZoomButtons() {
+        const zoom = this._map.getZoom();
+        this._zoomInButton.classList.toggle('mapboxgl-ctrl-zoom-in-disabled', zoom === this._map.getMaxZoom());
+        this._zoomOutButton.classList.toggle('mapboxgl-ctrl-zoom-out-disabled', zoom === this._map.getMinZoom());
+    }
+
     _rotateCompassArrow() {
         const rotate = `rotate(${this._map.transform.angle * (180 / Math.PI)}deg)`;
         this._compassArrow.style.transform = rotate;
@@ -65,6 +74,10 @@ class NavigationControl {
 
     onAdd(map: Map) {
         this._map = map;
+        if (this.options.showZoom) {
+            this._map.on('zoom', this._updateZoomButtons);
+            this._updateZoomButtons();
+        }
         if (this.options.showCompass) {
             this._map.on('rotate', this._rotateCompassArrow);
             this._rotateCompassArrow();
@@ -77,6 +90,9 @@ class NavigationControl {
 
     onRemove() {
         DOM.remove(this._container);
+        if (this.options.showZoom) {
+            this._map.off('zoom', this._updateZoomButtons);
+        }
         if (this.options.showCompass) {
             this._map.off('rotate', this._rotateCompassArrow);
             DOM.removeEventListener(this._compass, 'mousedown', this._handler.onMouseDown);

From ae70746b6106153f234ea85e0042ac026cc28ebb Mon Sep 17 00:00:00 2001
From: andycalder <28855024+andycalder@users.noreply.github.com>
Date: Thu, 14 Mar 2019 02:15:23 +1000
Subject: [PATCH 2/2] Use opacity to gray out

---
 src/css/mapbox-gl.css                  | 17 +++++++----------
 src/css/svg/mapboxgl-ctrl-zoom-in.svg  |  2 +-
 src/css/svg/mapboxgl-ctrl-zoom-out.svg |  2 +-
 src/ui/control/navigation_control.js   |  4 ++--
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/css/mapbox-gl.css b/src/css/mapbox-gl.css
index fa61b8fe13f..5359ae93ae4 100644
--- a/src/css/mapbox-gl.css
+++ b/src/css/mapbox-gl.css
@@ -111,20 +111,17 @@
     padding: 5px;
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
-    background-image: svg-load('svg/mapboxgl-ctrl-zoom-out.svg', fill=#333);
-}
-
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
-    background-image: svg-load('svg/mapboxgl-ctrl-zoom-in.svg', fill=#333);
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-icon-disabled {
+    opacity: 0.25;
+    border-color: #373737;
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out.mapboxgl-ctrl-zoom-out-disabled {
-    background-image: svg-load('svg/mapboxgl-ctrl-zoom-out.svg', fill=#ccc);
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
+    background-image: svg-load('svg/mapboxgl-ctrl-zoom-out.svg');
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in.mapboxgl-ctrl-zoom-in-disabled {
-    background-image: svg-load('svg/mapboxgl-ctrl-zoom-in.svg', fill=#ccc);
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
+    background-image: svg-load('svg/mapboxgl-ctrl-zoom-in.svg');
 }
 
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate {
diff --git a/src/css/svg/mapboxgl-ctrl-zoom-in.svg b/src/css/svg/mapboxgl-ctrl-zoom-in.svg
index bc8ecf94e9a..b26e3d16205 100644
--- a/src/css/svg/mapboxgl-ctrl-zoom-in.svg
+++ b/src/css/svg/mapboxgl-ctrl-zoom-in.svg
@@ -1,3 +1,3 @@
 <svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-  <path d='M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z' />
+  <path style='fill:#333333;' d='M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z' />
 </svg>
diff --git a/src/css/svg/mapboxgl-ctrl-zoom-out.svg b/src/css/svg/mapboxgl-ctrl-zoom-out.svg
index f2bc0078361..ab6e9ff222b 100644
--- a/src/css/svg/mapboxgl-ctrl-zoom-out.svg
+++ b/src/css/svg/mapboxgl-ctrl-zoom-out.svg
@@ -1,3 +1,3 @@
 <svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-  <path d='m 7,9 c -0.554,0 -1,0.446 -1,1 0,0.554 0.446,1 1,1 l 6,0 c 0.554,0 1,-0.446 1,-1 0,-0.554 -0.446,-1 -1,-1 z' />
+  <path style='fill:#333333;' d='m 7,9 c -0.554,0 -1,0.446 -1,1 0,0.554 0.446,1 1,1 l 6,0 c 0.554,0 1,-0.446 1,-1 0,-0.554 -0.446,-1 -1,-1 z' />
 </svg>
diff --git a/src/ui/control/navigation_control.js b/src/ui/control/navigation_control.js
index 2d0ed13d73e..a2fe2afc781 100644
--- a/src/ui/control/navigation_control.js
+++ b/src/ui/control/navigation_control.js
@@ -63,8 +63,8 @@ class NavigationControl {
 
     _updateZoomButtons() {
         const zoom = this._map.getZoom();
-        this._zoomInButton.classList.toggle('mapboxgl-ctrl-zoom-in-disabled', zoom === this._map.getMaxZoom());
-        this._zoomOutButton.classList.toggle('mapboxgl-ctrl-zoom-out-disabled', zoom === this._map.getMinZoom());
+        this._zoomInButton.classList.toggle('mapboxgl-ctrl-icon-disabled', zoom === this._map.getMaxZoom());
+        this._zoomOutButton.classList.toggle('mapboxgl-ctrl-icon-disabled', zoom === this._map.getMinZoom());
     }
 
     _rotateCompassArrow() {