compact mapbox wordmark on narrow maps (#6472)

* compact mapbox wordmark on narrow maps

* be defensive about getting classList

* use .children rather than .firstChild to make flow happy

* make lint happy

* fix mistake in merge and only include additional properties in compact css

* remove binding on control remove

src/css/mapbox-gl.css

@@ -196,6 +196,12 @@ a.mapboxgl-ctrl-logo {
     background-image: svg-load('svg/mapboxgl-ctrl-logo.svg');
 }
 
+a.mapboxgl-ctrl-logo.mapboxgl-compact {
+    width: 21px;
+    height: 21px;
+    background-image: svg-load('svg/mapboxgl-ctrl-logo-compact.svg');
+}
+
 .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
     padding: 0 5px;
     background-color: rgba(255, 255, 255, 0.5);

src/ui/control/logo_control.js

@@ -21,6 +21,7 @@ class LogoControl {
 
     constructor() {
         bindAll(['_updateLogo'], this);
+        bindAll(['_updateCompact'], this);
     }
 
     onAdd(map: Map) {
@@ -35,12 +36,17 @@ class LogoControl {
 
         this._map.on('sourcedata', this._updateLogo);
         this._updateLogo();
+
+        this._map.on('resize', this._updateCompact);
+        this._updateCompact();
+
         return this._container;
     }
 
     onRemove() {
         DOM.remove(this._container);
         this._map.off('sourcedata', this._updateLogo);
+        this._map.off('resize', this._updateCompact);
     }
 
     getDefaultPosition() {
@@ -67,6 +73,18 @@ class LogoControl {
         return false;
     }
 
+    _updateCompact() {
+        const containerChildren = this._container.children;
+        if (containerChildren.length) {
+            const anchor = containerChildren[0];
+            if (this._map.getCanvasContainer().offsetWidth < 250) {
+                anchor.classList.add('mapboxgl-compact');
+            } else {
+                anchor.classList.remove('mapboxgl-compact');
+            }
+        }
+    }
+
 }
 
 

test/unit/ui/control/logo.test.js

@@ -85,3 +85,18 @@ test('LogoControl is not added more than once', (t)=>{
         });
     });
 });
+
+test('LogoControl appears in compact mode if container is less then 250 pixel wide', (t) => {
+    const map = createMap();
+    const container = map.getContainer();
+
+    Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 255, configurable: true});
+    map.resize();
+    t.equal(container.querySelectorAll('.mapboxgl-ctrl-logo:not(.mapboxgl-compact)').length, 1);
+
+    Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 245, configurable: true});
+    map.resize();
+    t.equal(container.querySelectorAll('.mapboxgl-ctrl-logo.mapboxgl-compact').length, 1);
+
+    t.end();
+});