Fix layout of attribution control (#7608)

mapbox · Nov 21, 2018 · 0b04c72 · 0b04c72
1 parent db9ed0a
commit 0b04c72
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/src/css/mapbox-gl.css b/src/css/mapbox-gl.css
@@ -234,12 +234,12 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
         border-radius: 12px 3px 3px 12px;
     }
 
-    .mapboxgl-ctrl-attrib.mapboxgl-compact > * {
+    .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
         display: none;
     }
 
-    .mapboxgl-ctrl-attrib.mapboxgl-compact:hover > * {
-        display: inline;
+    .mapboxgl-ctrl-attrib.mapboxgl-compact:hover .mapboxgl-ctrl-attrib-inner {
+        display: block;
     }
 
     .mapboxgl-ctrl-attrib.mapboxgl-compact::after {

diff --git a/src/ui/control/attribution_control.js b/src/ui/control/attribution_control.js
@@ -28,6 +28,7 @@ class AttributionControl {
     options: Options;
     _map: Map;
     _container: HTMLElement;
+    _innerContainer: HTMLElement;
     _editLink: ?HTMLAnchorElement;
     styleId: string;
     styleOwner: string;
@@ -51,6 +52,7 @@ class AttributionControl {
 
         this._map = map;
         this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-attrib');
+        this._innerContainer = DOM.create('div', 'mapboxgl-ctrl-attrib-inner', this._container);
 
         if (compact) {
             this._container.classList.add('mapboxgl-compact');
@@ -120,11 +122,11 @@ class AttributionControl {
                 attributions = attributions.concat(
                     this.options.customAttribution.map(attribution => {
                         if (typeof attribution !== 'string') return '';
-                        return `<p>${attribution}</p>`;
+                        return attribution;
                     })
                 );
             } else if (typeof this.options.customAttribution === 'string') {
-                attributions.push(`<p>${this.options.customAttribution}</p>`);
+                attributions.push(this.options.customAttribution);
             }
         }
 
@@ -155,7 +157,7 @@ class AttributionControl {
             return true;
         });
         if (attributions.length) {
-            this._container.innerHTML = attributions.join('<p> | </p>');
+            this._innerContainer.innerHTML = attributions.join(' | ');
             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<p> | </p>Another Source<p> | </p>GeoJSON Source');
+                t.equal(attribution._innerContainer.innerHTML, 'Hello World | Another Source | GeoJSON Source');
                 t.end();
             }
         }
@@ -138,15 +138,15 @@ test('AttributionControl is hidden if empty', (t) => {
     const container = map.getContainer();
 
     const checkEmptyFirst = () => {
-        t.equal(attribution._container.innerHTML, '');
+        t.equal(attribution._innerContainer.innerHTML, '');
         t.equal(container.querySelectorAll('.mapboxgl-attrib-empty').length, 1, 'includes empty class when no attribution strings are provided');
 
         map.addSource('2', { type: 'geojson', data: { type: 'FeatureCollection', features: [] }, attribution: 'Hello World'});
         map.addLayer({ id: '2', type: 'fill', source: '2' });
     };
 
     const checkNotEmptyLater = () => {
-        t.equal(attribution._container.innerHTML, 'Hello World');
+        t.equal(attribution._innerContainer.innerHTML, 'Hello World');
         t.equal(container.querySelectorAll('.mapboxgl-attrib-empty').length, 0, 'removes empty class when source with attribution is added');
         t.end();
     };
@@ -171,7 +171,7 @@ test('AttributionControl shows custom attribution if customAttribution option is
     });
     map.addControl(attributionControl);
 
-    t.equal(attributionControl._container.innerHTML, '<p>Custom string</p>');
+    t.equal(attributionControl._innerContainer.innerHTML, 'Custom string');
     t.end();
 });
 
@@ -183,7 +183,7 @@ test('AttributionControl in compact mode shows custom attribution if customAttri
     });
     map.addControl(attributionControl);
 
-    t.equal(attributionControl._container.innerHTML, '<p>Custom string</p>');
+    t.equal(attributionControl._innerContainer.innerHTML, 'Custom string');
     t.end();
 });
 
@@ -196,8 +196,8 @@ test('AttributionControl shows all custom attributions if customAttribution arra
     map.addControl(attributionControl);
 
     t.equal(
-        attributionControl._container.innerHTML,
-        '<p>Custom string</p><p> | </p><p>Another custom string</p><p> | </p><p>Some very long custom string</p>'
+        attributionControl._innerContainer.innerHTML,
+        'Custom string | Another custom string | Some very long custom string'
     );
     t.end();
 });
@@ -219,7 +219,7 @@ test('AttributionControl hides attributions for sources that are not currently v
     map.on('data', (e) => {
         if (e.dataType === 'source' && e.sourceDataType === 'metadata') {
             if (++times === 3) {
-                t.equal(attribution._container.innerHTML, 'Used');
+                t.equal(attribution._innerContainer.innerHTML, 'Used');
                 t.end();
             }
         }