Fix custom attribution strings in compact mode (#7444)

* fix custom attributions in compact mode * fix custom attribution in compact mode
mapbox · Oct 19, 2018 · 4a07a87 · 4a07a87
1 parent 58a61d6
commit 4a07a87
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/src/css/mapbox-gl.css b/src/css/mapbox-gl.css
@@ -228,11 +228,11 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
         visibility: visible;
     }
 
-    .mapboxgl-ctrl-attrib.mapboxgl-compact > a {
+    .mapboxgl-ctrl-attrib.mapboxgl-compact > * {
         display: none;
     }
 
-    .mapboxgl-ctrl-attrib.mapboxgl-compact:hover > a {
+    .mapboxgl-ctrl-attrib.mapboxgl-compact:hover > * {
         display: inline;
     }
 

diff --git a/src/ui/control/attribution_control.js b/src/ui/control/attribution_control.js
@@ -117,9 +117,14 @@ class AttributionControl {
         let attributions: Array<string> = [];
         if (this.options.customAttribution) {
             if (Array.isArray(this.options.customAttribution)) {
-                attributions = attributions.concat(this.options.customAttribution);
+                attributions = attributions.concat(
+                    this.options.customAttribution.map(attribution => {
+                        if (typeof attribution !== 'string') return '';
+                        return `<p>${attribution}</p>`;
+                    })
+                );
             } else if (typeof this.options.customAttribution === 'string') {
-                attributions.push(this.options.customAttribution);
+                attributions.push(`<p>${this.options.customAttribution}</p>`);
             }
         }
 
@@ -150,7 +155,7 @@ class AttributionControl {
             return true;
         });
         if (attributions.length) {
-            this._container.innerHTML = attributions.join(' | ');
+            this._container.innerHTML = attributions.join('<p> | </p>');
             this._container.classList.remove('mapboxgl-attrib-empty');
         } else {
             this._container.classList.add('mapboxgl-attrib-empty');

diff --git a/test/unit/ui/control/attribution.test.js b/test/unit/ui/control/attribution.test.js
@@ -101,7 +101,7 @@ test('AttributionControl dedupes attributions that are substrings of others', (t
     map.on('data', (e) => {
         if (e.dataType === 'source' && e.sourceDataType === 'metadata') {
             if (++times === 7) {
-                t.equal(attribution._container.innerHTML, 'Hello World | Another Source | GeoJSON Source');
+                t.equal(attribution._container.innerHTML, 'Hello World<p> | </p>Another Source<p> | </p>GeoJSON Source');
                 t.end();
             }
         }
@@ -171,10 +171,23 @@ test('AttributionControl shows custom attribution if customAttribution option is
     });
     map.addControl(attributionControl);
 
-    t.equal(attributionControl._container.innerHTML, 'Custom string');
+    t.equal(attributionControl._container.innerHTML, '<p>Custom string</p>');
     t.end();
 });
 
+test('AttributionControl in compact mode shows custom attribution if customAttribution option is provided', (t) => {
+    const map = createMap(t);
+    const attributionControl = new AttributionControl({
+        customAttribution: 'Custom string',
+        compact: true
+    });
+    map.addControl(attributionControl);
+
+    t.equal(attributionControl._container.innerHTML, '<p>Custom string</p>');
+    t.end();
+});
+
+
 test('AttributionControl shows all custom attributions if customAttribution array of strings is provided', (t) => {
     const map = createMap(t);
     const attributionControl = new AttributionControl({
@@ -184,7 +197,7 @@ test('AttributionControl shows all custom attributions if customAttribution arra
 
     t.equal(
         attributionControl._container.innerHTML,
-        'Custom string | Another custom string | Some very long custom string'
+        '<p>Custom string</p><p> | </p><p>Another custom string</p><p> | </p><p>Some very long custom string</p>'
     );
     t.end();
 });