Attribution default open for osm (maplibre#795)

* Update CHANGELOG.md

* Revert "Update CHANGELOG.md"

This reverts commit 0b81a41.

* attribution fixes (from astridx)

maplibre@a1272d9

maplibre@b9b0370

* Update .gitignore

* fix missing new line lint complained about

* Revert "attribution fixes (from astridx)"

This reverts commit 2031d8e.

* Default compact to be open by default

Default compact button to be open by default, to make OpenStreetMap attibutions to show by default like mentioned in ( maplibre#205 )

This uses an idea from ( maplibre#205 (comment) ) to show compact open by default, but close it when dragged.

* remove test string I forgot to remove

* fix compact button showing when there are no attributions

* update whitespace trim to es6 syntax

* fixes after testing various states of compact

* revert back so it is open when starting in fullscreen

* revert .gitignore

* fix lint errors

* fix tests

Most of these fails because I made the compact button not show if attributes are empty.

The other test fail because when switching between >640 and <=640 the open attribute is now added

* lint

* Update package-lock.json

* Update package-lock.json

* Update CHANGELOG.md

* delete problematic files

* put back deleted files

* test/integration/assets/sprites/icon-text-fit-1x@2x.json

* restore files

Co-authored-by: acalcutt <acalcutt@worcester.edu>

CHANGELOG.md

@@ -2,12 +2,14 @@
 
 ### Features and improvements
 
+- Default compact attribution to be open by default to comply with OpenSteetMap Attribution Guidelines (#795)
 - Export `Source` classes (`GeoJSONSource` etc.) declarations. ([#801](https://github.com/maplibre/maplibre-gl-js/issues/801))
 - Make `AJAXError` public so error HTTP responses can be handled differently from other errors.
 - *...Add new stuff here...*
 
 ### 🐞 Bug fixes
 
+- Fix compact attribution button showing when attribution is blank (#795)
 - Fix error mismatched image size for CJK characters (#718)
 - Fire `dataabort` and `sourcedataabort` events when a tile request is aborted (#794)
 - *...Add new stuff here...*

src/ui/control/attribution_control.test.ts

@@ -51,7 +51,8 @@ describe('AttributionControl', () => {
         Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 700, configurable: true});
 
         let attributionControl = new AttributionControl({
-            compact: true
+            compact: true,
+            customAttribution: 'MapLibre'
         });
         map.addControl(attributionControl);
 
@@ -73,7 +74,32 @@ describe('AttributionControl', () => {
         ).toHaveLength(1);
     });
 
-    test('appears in compact mode if container is less then 640 pixel wide', () => {
+    test('appears in compact mode if container is less then 640 pixel wide and attributions are not empty', () => {
+        Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 700, configurable: true});
+        const attributionControl = new AttributionControl({
+            customAttribution: 'MapLibre'
+        });
+        map.addControl(attributionControl);
+
+        const container = map.getContainer();
+
+        expect(
+            container.querySelectorAll('.maplibregl-ctrl-attrib:not(.maplibregl-compact)')
+        ).toHaveLength(1);
+
+        Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 600, configurable: true});
+        map.resize();
+
+        expect(
+            container.querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact')
+        ).toHaveLength(1);
+
+        expect(
+            container.querySelectorAll('.maplibregl-attrib-empty')
+        ).toHaveLength(0);
+    });
+
+    test('does not appear in compact mode if container is less then 640 pixel wide and attributions are empty', () => {
         Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 700, configurable: true});
         map.addControl(new AttributionControl());
 
@@ -88,26 +114,31 @@ describe('AttributionControl', () => {
 
         expect(
             container.querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact')
+        ).toHaveLength(0);
+
+        expect(
+            container.querySelectorAll('.maplibregl-attrib-empty')
         ).toHaveLength(1);
     });
 
     test('compact mode control toggles attribution', () => {
         map.addControl(new AttributionControl({
-            compact: true
+            compact: true,
+            customAttribution: 'MapLibre'
         }));
 
         const container = map.getContainer();
         const toggle = container.querySelector('.maplibregl-ctrl-attrib-button');
 
-        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(0);
+        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(1);
 
         simulate.click(toggle);
 
-        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(1);
+        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(0);
 
         simulate.click(toggle);
 
-        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(0);
+        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(1);
     });
 
     test('dedupes attributions that are substrings of others', done => {
@@ -325,23 +356,27 @@ describe('AttributionControl test regarding the HTML elements details and summar
             expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
         });
 
-        test('The attribute open="" SHOULD change on resize from size > 640 to <= 640 and and vice versa.', () => {
+        test('The attribute open="" SHOULD exist after resize from size > 640 to <= 640 and and vice versa.', () => {
             Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
             const attributionControl = new AttributionControl({
+                customAttribution: 'MapLibre'
             });
             map.addControl(attributionControl);
 
-            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact')).toHaveLength(1);
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
 
             Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
             map.resize();
 
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib:not(.maplibregl-compact)')).toHaveLength(1);
             expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
 
             Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
             map.resize();
 
-            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact')).toHaveLength(1);
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
         });
 
         test('The attribute open="" should NOT change on resize from > 640 to another > 640.', () => {

src/ui/control/attribution_control.ts

@@ -25,6 +25,7 @@ type AttributionOptions = {
 class AttributionControl implements IControl {
     options: AttributionOptions;
     _map: Map;
+    _compact: boolean;
     _container: HTMLElement;
     _innerContainer: HTMLElement;
     _compactButton: HTMLElement;
@@ -39,7 +40,8 @@ class AttributionControl implements IControl {
         bindAll([
             '_toggleAttribution',
             '_updateData',
-            '_updateCompact'
+            '_updateCompact',
+            '_updateCompactMinimize'
         ], this);
     }
 
@@ -49,18 +51,20 @@ class AttributionControl implements IControl {
 
     onAdd(map: Map) {
         this._map = map;
+        this._compact = this.options && this.options.compact;
         this._container = DOM.create('details', 'maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib');
         this._compactButton = DOM.create('summary', 'maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button', this._container);
         this._compactButton.addEventListener('click', this._toggleAttribution);
         this._setElementTitle(this._compactButton, 'ToggleAttribution');
         this._innerContainer = DOM.create('div', 'maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner', this._container);
 
-        this._updateCompact();
         this._updateAttributions();
+        this._updateCompact();
 
         this._map.on('styledata', this._updateData);
         this._map.on('sourcedata', this._updateData);
         this._map.on('resize', this._updateCompact);
+        this._map.on('drag', this._updateCompactMinimize);
 
         return this._container;
     }
@@ -71,8 +75,10 @@ class AttributionControl implements IControl {
         this._map.off('styledata', this._updateData);
         this._map.off('sourcedata', this._updateData);
         this._map.off('resize', this._updateCompact);
+        this._map.off('drag', this._updateCompactMinimize);
 
         this._map = undefined;
+        this._compact = undefined;
         this._attribHTML = undefined;
     }
 
@@ -83,10 +89,14 @@ class AttributionControl implements IControl {
     }
 
     _toggleAttribution() {
-        if (this._container.classList.contains('maplibregl-compact-show') || this._container.classList.contains('mapboxgl-compact-show')) {
-            this._container.classList.remove('maplibregl-compact-show', 'mapboxgl-compact-show');
-        } else {
-            this._container.classList.add('maplibregl-compact-show', 'mapboxgl-compact-show');
+        if (this._container.classList.contains('maplibregl-compact')) {
+            if (this._container.classList.contains('maplibregl-compact-show')) {
+                this._container.setAttribute('open', '');
+                this._container.classList.remove('maplibregl-compact-show', 'mapboxgl-compact-show');
+            } else {
+                this._container.classList.add('maplibregl-compact-show', 'mapboxgl-compact-show');
+                this._container.removeAttribute('open');
+            }
         }
     }
 
@@ -129,6 +139,9 @@ class AttributionControl implements IControl {
             }
         }
 
+        // remove any entries that are whitespace
+        attributions = attributions.filter(e => String(e).trim());
+
         // remove any entries that are substrings of another entry.
         // first sort by length so that substrings come first
         attributions.sort((a, b) => a.length - b.length);
@@ -151,20 +164,18 @@ class AttributionControl implements IControl {
         } else {
             this._container.classList.add('maplibregl-attrib-empty', 'mapboxgl-attrib-empty');
         }
+        this._updateCompact();
         // remove old DOM node from _editLink
         this._editLink = null;
     }
 
     _updateCompact() {
-        const compact = this.options && this.options.compact;
-        if (this._map.getCanvasContainer().offsetWidth <= 640 || compact) {
-            if (compact === false) {
+        if (this._map.getCanvasContainer().offsetWidth <= 640 || this._compact) {
+            if (this._compact === false) {
                 this._container.setAttribute('open', '');
-            } else {
-                if (!this._container.classList.contains('maplibregl-compact')) {
-                    this._container.removeAttribute('open');
-                    this._container.classList.add('maplibregl-compact', 'mapboxgl-compact');
-                }
+            } else if (!this._container.classList.contains('maplibregl-compact') && !this._container.classList.contains('maplibregl-attrib-empty')) {
+                this._container.setAttribute('open', '');
+                this._container.classList.add('maplibregl-compact', 'mapboxgl-compact', 'maplibregl-compact-show', 'mapboxgl-compact-show');
             }
         } else {
             this._container.setAttribute('open', '');
@@ -174,6 +185,14 @@ class AttributionControl implements IControl {
         }
     }
 
+    _updateCompactMinimize() {
+        if (this._container.classList.contains('maplibregl-compact')) {
+            if (this._container.classList.contains('maplibregl-compact-show')) {
+                this._container.classList.remove('maplibregl-compact-show', 'mapboxgl-compact-show');
+            }
+        }
+    }
+
 }
 
 export default AttributionControl;