From ebd0d4bb9a87982d7179bb6bf740d8a369de9b26 Mon Sep 17 00:00:00 2001 From: astridx Date: Tue, 30 Nov 2021 13:27:26 +0100 Subject: [PATCH 01/22] fix attribution control --- src/ui/control/attribution_control.test.ts | 31 +++++++++++++++++++--- src/ui/control/attribution_control.ts | 7 ++++- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts index bcb7e3a537c..a08d7eb1cd6 100644 --- a/src/ui/control/attribution_control.test.ts +++ b/src/ui/control/attribution_control.test.ts @@ -10,8 +10,8 @@ function createMap() { version: 8, sources: {}, layers: [], - owner: 'mapbox', - id: 'streets-v10', + owner: 'mapblibre', + id: 'demotiles', }, hash: true }, undefined); @@ -346,7 +346,8 @@ NodeList [ `); }); - test('details is set correct for default view. In particular, it SHOULD contain the attribute open="".', () => { + test('details is set correct for default view. In particular, it should NOT contain the attribute open="".', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 600, configurable: true}); const attributionControl = new AttributionControl({ }); map.addControl(attributionControl); @@ -355,6 +356,30 @@ NodeList [ NodeList [
+ +
+
, +] +`); + }); + + test('details is set correct for default view. In particular, it SHOULD contain the attribute open="".', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 700, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
640) { + this._container.setAttribute('open', ''); + } } this._updateAttributions(); @@ -96,8 +98,10 @@ 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'); + this._container.setAttribute('open', ''); } else { this._container.classList.add('maplibregl-compact-show', 'mapboxgl-compact-show'); + this._container.removeAttribute('open'); } } @@ -170,6 +174,7 @@ class AttributionControl implements IControl { if (this._map.getCanvasContainer().offsetWidth <= 640) { this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); } else { + this._container.setAttribute('open', ''); this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show'); } } From e4589f746ac0e5b3768a1e356c46f8372c507080 Mon Sep 17 00:00:00 2001 From: astridx Date: Tue, 30 Nov 2021 13:40:50 +0100 Subject: [PATCH 02/22] we do not need this --- src/ui/control/attribution_control.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index dccf644cb00..1f59761bd75 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -98,10 +98,8 @@ 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'); - this._container.setAttribute('open', ''); } else { this._container.classList.add('maplibregl-compact-show', 'mapboxgl-compact-show'); - this._container.removeAttribute('open'); } } From bd1ee4bfcca6e51bbf58c0842f6d79ab2fb10454 Mon Sep 17 00:00:00 2001 From: astridx Date: Wed, 1 Dec 2021 22:16:04 +0100 Subject: [PATCH 03/22] it is in 'compact = undefined' --- src/ui/control/attribution_control.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index 1f59761bd75..e00b2c65d99 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -59,10 +59,6 @@ class AttributionControl implements IControl { if (compact) { this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); - } else { - if (this._map.getCanvasContainer().offsetWidth > 640) { - this._container.setAttribute('open', ''); - } } this._updateAttributions(); From 92e230e6f797d3f5f2d5ebe1565ff31014c8efa2 Mon Sep 17 00:00:00 2001 From: astridx Date: Thu, 2 Dec 2021 23:25:48 +0100 Subject: [PATCH 04/22] work on attribute open on resize and compact = false --- src/ui/control/attribution_control.test.ts | 290 +++++++++++++++++---- src/ui/control/attribution_control.ts | 11 +- 2 files changed, 252 insertions(+), 49 deletions(-) diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts index a08d7eb1cd6..aa15e74faf6 100644 --- a/src/ui/control/attribution_control.test.ts +++ b/src/ui/control/attribution_control.test.ts @@ -17,20 +17,20 @@ function createMap() { }, undefined); } -describe('AttributionControl', () => { - let map; +let map; - beforeEach(() => { - setWebGlContext(); - setPerformance(); - setMatchMedia(); - map = createMap(); - }); +beforeEach(() => { + setWebGlContext(); + setPerformance(); + setMatchMedia(); + map = createMap(); +}); - afterEach(() => { - map.remove(); - }); +afterEach(() => { + map.remove(); +}); +describe('AttributionControl', () => { test('appears in bottom-right by default', () => { map.addControl(new AttributionControl()); @@ -264,13 +264,17 @@ describe('AttributionControl', () => { }); }); - test('details is set correct for compact view after map load. In particular, it should NOT contain the attribute open="".', () => { - const attributionControl = new AttributionControl({ - compact: true - }); - map.addControl(attributionControl); +}); + +describe('AttributionControl Snapshot Tests', () => { + describe('Details is set correct for compact view', () => { + test('It should NOT contain the attribute open="" on first load.', () => { + const attributionControl = new AttributionControl({ + compact: true + }); + map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); - }); - - test('details is set correct for compact view after click on summary. In particular, it SHOULD contain the attribute open="".', () => { - const attributionControl = new AttributionControl({ - compact: true }); - map.addControl(attributionControl); - const container = map.getContainer(); - const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); - simulate.click(toggle); + test('It SHOULD contain the attribute open="" after click on summary.', () => { + const attributionControl = new AttributionControl({ + compact: true + }); + map.addControl(attributionControl); + const container = map.getContainer(); + const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); + + simulate.click(toggle); - expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); - }); - - test('details is set correct for compact view after two clicks on summary. In particular, it should NOT contain the attribute open="".', () => { - const attributionControl = new AttributionControl({ - compact: true }); - map.addControl(attributionControl); - const container = map.getContainer(); - const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); - simulate.click(toggle); - simulate.click(toggle); + test('It should NOT contain the attribute open="" after two clicks on summary.', () => { + const attributionControl = new AttributionControl({ + compact: true + }); + map.addControl(attributionControl); + const container = map.getContainer(); + const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); + + simulate.click(toggle); + simulate.click(toggle); - expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); + }); }); - test('details is set correct for default view. In particular, it should NOT contain the attribute open="".', () => { - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 600, configurable: true}); - const attributionControl = new AttributionControl({ + describe('Details is set correct for default view (compact === undefined)', () => { + test('It should NOT contain the attribute open="" if offsetWidth <= 640.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); }); - map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + test('It SHOULD contain the attribute open="" if offsetWidth > 640.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); + + test('The attribute open="" SHOULD change on resize.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); + }); }); - test('details is set correct for default view. In particular, it SHOULD contain the attribute open="".', () => { - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 700, configurable: true}); - const attributionControl = new AttributionControl({ + describe('Details is set correct for default view (compact === false)', () => { + test('It SHOULD contain the attribute open="" if offsetWidth <= 640.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + compact: false + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); }); - map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + test('It SHOULD contain the attribute open="" if offsetWidth > 640.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + const attributionControl = new AttributionControl({ + compact: false + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); + + test('The attribute open="" should NOT change on resize.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + compact: false + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); }); }); diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index e00b2c65d99..9914c48624e 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -53,7 +53,11 @@ class AttributionControl implements IControl { this._map = map; 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); + + if (compact !== false) { + 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); @@ -61,6 +65,10 @@ class AttributionControl implements IControl { this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); } + if (!compact) { + this._container.setAttribute('open', ''); + } + this._updateAttributions(); this._map.on('styledata', this._updateData); @@ -167,6 +175,7 @@ class AttributionControl implements IControl { _updateCompact() { if (this._map.getCanvasContainer().offsetWidth <= 640) { this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); + this._container.removeAttribute('open'); } else { this._container.setAttribute('open', ''); this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show'); From a1272d9f569057fed6ce3b163fc0602f824e7653 Mon Sep 17 00:00:00 2001 From: astridx Date: Fri, 3 Dec 2021 22:48:08 +0100 Subject: [PATCH 05/22] only remove the attribute open from container in compact===undefined mode, if it changed from big to small size --- src/ui/control/attribution_control.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index 9914c48624e..097602727df 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -174,8 +174,10 @@ class AttributionControl implements IControl { _updateCompact() { if (this._map.getCanvasContainer().offsetWidth <= 640) { + if (!this._container.classList.contains('maplibregl-compact')) { + this._container.removeAttribute('open'); + } this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); - this._container.removeAttribute('open'); } else { this._container.setAttribute('open', ''); this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show'); From b9b03707fd07b0eaba276703eb1a3626f05bbb64 Mon Sep 17 00:00:00 2001 From: astridx Date: Fri, 3 Dec 2021 23:20:51 +0100 Subject: [PATCH 06/22] add tests for last comit --- src/ui/control/attribution_control.test.ts | 202 ++++++++++++++++++++- 1 file changed, 201 insertions(+), 1 deletion(-) diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts index aa15e74faf6..7302687916b 100644 --- a/src/ui/control/attribution_control.test.ts +++ b/src/ui/control/attribution_control.test.ts @@ -401,7 +401,7 @@ NodeList [ `); }); - test('The attribute open="" SHOULD change on resize.', () => { + test('The attribute open="" SHOULD change on resize from size > 640 to <= 640 and and vice versa.', () => { Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); const attributionControl = new AttributionControl({ }); @@ -463,6 +463,206 @@ NodeList [ />
, ] +`); + }); + + test('The attribute open="" should NOT change on resize from > 640 to another > 640.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 650, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); + + test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is closed.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); + + test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is open.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + const toggle = map.getContainer().querySelector('.maplibregl-ctrl-attrib-button'); + simulate.click(toggle); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] `); }); }); From 0b81a4189f2f2426318dbc39e58da76ee0086cc4 Mon Sep 17 00:00:00 2001 From: Andrew Calcutt Date: Mon, 6 Dec 2021 11:34:44 -0500 Subject: [PATCH 07/22] Update CHANGELOG.md --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d7a841b2906..f2a01f733e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +14,6 @@ - Migrated the production code to typescript - ** Breaking Change ** removed `version` from the public API -- ** Breaking Change ** stopped supporting IE (internet explorer) - ** Breaking Change ** removed all code related to `accessToken` and mapbox specific urls, including telemetry etc. Please do not use mapbox servers with this library. - ** Breaking Change ** removed `baseApiUrl` as it was used only for mapbox related urls - ** Breaking Change ** typescript typings have changed: From 2192c1d5046a1d69445f3cb570de60c78c64d22c Mon Sep 17 00:00:00 2001 From: acalcutt Date: Mon, 6 Dec 2021 11:37:17 -0500 Subject: [PATCH 08/22] Revert "Update CHANGELOG.md" This reverts commit 0b81a4189f2f2426318dbc39e58da76ee0086cc4. --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f2a01f733e3..d7a841b2906 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ - Migrated the production code to typescript - ** Breaking Change ** removed `version` from the public API +- ** Breaking Change ** stopped supporting IE (internet explorer) - ** Breaking Change ** removed all code related to `accessToken` and mapbox specific urls, including telemetry etc. Please do not use mapbox servers with this library. - ** Breaking Change ** removed `baseApiUrl` as it was used only for mapbox related urls - ** Breaking Change ** typescript typings have changed: From 2031d8e68185407fca72640a73ec8334734161fe Mon Sep 17 00:00:00 2001 From: acalcutt Date: Mon, 6 Dec 2021 11:55:32 -0500 Subject: [PATCH 09/22] attribution fixes (from astridx) https://github.com/maplibre/maplibre-gl-js/pull/668/commits/a1272d9f569057fed6ce3b163fc0602f824e7653 https://github.com/maplibre/maplibre-gl-js/pull/668/commits/b9b03707fd07b0eaba276703eb1a3626f05bbb64 --- src/ui/control/attribution_control.test.ts | 507 +++++++++++++++++++-- src/ui/control/attribution_control.ts | 16 +- 2 files changed, 476 insertions(+), 47 deletions(-) diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts index bcb7e3a537c..31da4478b95 100644 --- a/src/ui/control/attribution_control.test.ts +++ b/src/ui/control/attribution_control.test.ts @@ -10,27 +10,27 @@ function createMap() { version: 8, sources: {}, layers: [], - owner: 'mapbox', - id: 'streets-v10', + owner: 'mapblibre', + id: 'demotiles', }, hash: true }, undefined); } -describe('AttributionControl', () => { - let map; +let map; - beforeEach(() => { - setWebGlContext(); - setPerformance(); - setMatchMedia(); - map = createMap(); - }); +beforeEach(() => { + setWebGlContext(); + setPerformance(); + setMatchMedia(); + map = createMap(); +}); - afterEach(() => { - map.remove(); - }); +afterEach(() => { + map.remove(); +}); +describe('AttributionControl', () => { test('appears in bottom-right by default', () => { map.addControl(new AttributionControl()); @@ -264,13 +264,75 @@ describe('AttributionControl', () => { }); }); - test('details is set correct for compact view after map load. In particular, it should NOT contain the attribute open="".', () => { - const attributionControl = new AttributionControl({ - compact: true +}); + +describe('AttributionControl Snapshot Tests', () => { + describe('Details is set correct for compact view', () => { + test('It should NOT contain the attribute open="" on first load.', () => { + const attributionControl = new AttributionControl({ + compact: true + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); }); - map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + test('It SHOULD contain the attribute open="" after click on summary.', () => { + const attributionControl = new AttributionControl({ + compact: true + }); + map.addControl(attributionControl); + const container = map.getContainer(); + const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); + + simulate.click(toggle); + + expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); + + test('It should NOT contain the attribute open="" after two clicks on summary.', () => { + const attributionControl = new AttributionControl({ + compact: true + }); + map.addControl(attributionControl); + const container = map.getContainer(); + const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); + + simulate.click(toggle); + simulate.click(toggle); + + expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); + }); }); - test('details is set correct for compact view after click on summary. In particular, it SHOULD contain the attribute open="".', () => { - const attributionControl = new AttributionControl({ - compact: true + describe('Details is set correct for default view (compact === undefined)', () => { + test('It should NOT contain the attribute open="" if offsetWidth <= 640.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); }); - map.addControl(attributionControl); - const container = map.getContainer(); - const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); - simulate.click(toggle); + test('It SHOULD contain the attribute open="" if offsetWidth > 640.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); - expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); - }); + }); - test('details is set correct for compact view after two clicks on summary. In particular, it should NOT contain the attribute open="".', () => { - const attributionControl = new AttributionControl({ - compact: true + test('The attribute open="" SHOULD change on resize from size > 640 to <= 640 and and vice versa.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); }); - map.addControl(attributionControl); - const container = map.getContainer(); - const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); - simulate.click(toggle); - simulate.click(toggle); + test('The attribute open="" should NOT change on resize from > 640 to another > 640.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); - expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); - }); - test('details is set correct for default view. In particular, it SHOULD contain the attribute open="".', () => { - const attributionControl = new AttributionControl({ + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 650, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); }); - map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is closed.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); + + test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is open.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + }); + map.addControl(attributionControl); + const toggle = map.getContainer().querySelector('.maplibregl-ctrl-attrib-button'); + simulate.click(toggle); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
, ] `); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); }); -}); + + describe('Details is set correct for default view (compact === false)', () => { + test('It SHOULD contain the attribute open="" if offsetWidth <= 640.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + compact: false + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); + + test('It SHOULD contain the attribute open="" if offsetWidth > 640.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + const attributionControl = new AttributionControl({ + compact: false + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); + + test('The attribute open="" should NOT change on resize.', () => { + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + const attributionControl = new AttributionControl({ + compact: false + }); + map.addControl(attributionControl); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + + Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); + map.resize(); + + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` +NodeList [ +
+ +
+
, +] +`); + }); + }); +}); \ No newline at end of file diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index 27aa152d213..6a1c2ed25b9 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -53,13 +53,19 @@ class AttributionControl implements IControl { this._map = map; 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); + + if (compact !== false) { + 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); if (compact) { this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); - } else { + } + + if (!compact) { this._container.setAttribute('open', ''); } @@ -168,12 +174,16 @@ class AttributionControl implements IControl { _updateCompact() { if (this._map.getCanvasContainer().offsetWidth <= 640) { + if (!this._container.classList.contains('maplibregl-compact')) { + this._container.removeAttribute('open'); + } this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); } else { + this._container.setAttribute('open', ''); this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show'); } } } -export default AttributionControl; +export default AttributionControl; \ No newline at end of file From 032b16e5707ec0e95086a4f6d87f5df12961333e Mon Sep 17 00:00:00 2001 From: Andrew Calcutt Date: Mon, 6 Dec 2021 22:47:31 -0500 Subject: [PATCH 10/22] Update .gitignore --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 715d1ee3fd1..734e2216b86 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,6 @@ /dist/ /dist_type/ *.es.js -*.js.map node_modules *.sublime-* coverage From 711436a93abebcdc2539d1494a370ee3ca827af5 Mon Sep 17 00:00:00 2001 From: acalcutt Date: Tue, 7 Dec 2021 07:49:42 -0500 Subject: [PATCH 11/22] fix missing new line lint complained about --- src/ui/control/attribution_control.test.ts | 2 +- src/ui/control/attribution_control.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts index 31da4478b95..7302687916b 100644 --- a/src/ui/control/attribution_control.test.ts +++ b/src/ui/control/attribution_control.test.ts @@ -788,4 +788,4 @@ NodeList [ `); }); }); -}); \ No newline at end of file +}); diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index 6a1c2ed25b9..097602727df 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -186,4 +186,4 @@ class AttributionControl implements IControl { } -export default AttributionControl; \ No newline at end of file +export default AttributionControl; From 53d97eb54cc52f1b0d07456604c0f1de44798d3d Mon Sep 17 00:00:00 2001 From: acalcutt Date: Sat, 11 Dec 2021 13:47:27 -0500 Subject: [PATCH 12/22] Revert "attribution fixes (from astridx)" This reverts commit 2031d8e68185407fca72640a73ec8334734161fe. --- src/ui/control/attribution_control.test.ts | 505 ++------------------- src/ui/control/attribution_control.ts | 14 +- 2 files changed, 45 insertions(+), 474 deletions(-) diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts index 7302687916b..bcb7e3a537c 100644 --- a/src/ui/control/attribution_control.test.ts +++ b/src/ui/control/attribution_control.test.ts @@ -10,27 +10,27 @@ function createMap() { version: 8, sources: {}, layers: [], - owner: 'mapblibre', - id: 'demotiles', + owner: 'mapbox', + id: 'streets-v10', }, hash: true }, undefined); } -let map; +describe('AttributionControl', () => { + let map; -beforeEach(() => { - setWebGlContext(); - setPerformance(); - setMatchMedia(); - map = createMap(); -}); + beforeEach(() => { + setWebGlContext(); + setPerformance(); + setMatchMedia(); + map = createMap(); + }); -afterEach(() => { - map.remove(); -}); + afterEach(() => { + map.remove(); + }); -describe('AttributionControl', () => { test('appears in bottom-right by default', () => { map.addControl(new AttributionControl()); @@ -264,75 +264,13 @@ describe('AttributionControl', () => { }); }); -}); - -describe('AttributionControl Snapshot Tests', () => { - describe('Details is set correct for compact view', () => { - test('It should NOT contain the attribute open="" on first load.', () => { - const attributionControl = new AttributionControl({ - compact: true - }); - map.addControl(attributionControl); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - }); - - test('It SHOULD contain the attribute open="" after click on summary.', () => { - const attributionControl = new AttributionControl({ - compact: true - }); - map.addControl(attributionControl); - const container = map.getContainer(); - const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); - - simulate.click(toggle); - - expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + test('details is set correct for compact view after map load. In particular, it should NOT contain the attribute open="".', () => { + const attributionControl = new AttributionControl({ + compact: true }); + map.addControl(attributionControl); - test('It should NOT contain the attribute open="" after two clicks on summary.', () => { - const attributionControl = new AttributionControl({ - compact: true - }); - map.addControl(attributionControl); - const container = map.getContainer(); - const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); - - simulate.click(toggle); - simulate.click(toggle); - - expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); - }); }); - describe('Details is set correct for default view (compact === undefined)', () => { - test('It should NOT contain the attribute open="" if offsetWidth <= 640.', () => { - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); - const attributionControl = new AttributionControl({ - }); - map.addControl(attributionControl); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - }); - - test('It SHOULD contain the attribute open="" if offsetWidth > 640.', () => { - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); - const attributionControl = new AttributionControl({ - }); - map.addControl(attributionControl); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - }); - - test('The attribute open="" SHOULD change on resize from size > 640 to <= 640 and and vice versa.', () => { - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); - const attributionControl = new AttributionControl({ - }); - map.addControl(attributionControl); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); - map.resize(); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); - map.resize(); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + test('details is set correct for compact view after click on summary. In particular, it SHOULD contain the attribute open="".', () => { + const attributionControl = new AttributionControl({ + compact: true }); + map.addControl(attributionControl); + const container = map.getContainer(); + const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); - test('The attribute open="" should NOT change on resize from > 640 to another > 640.', () => { - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); - const attributionControl = new AttributionControl({ - }); - map.addControl(attributionControl); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 650, configurable: true}); - map.resize(); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); - map.resize(); + simulate.click(toggle); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); - }); - - test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is closed.', () => { - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); - const attributionControl = new AttributionControl({ - }); - map.addControl(attributionControl); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true}); - map.resize(); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); - map.resize(); + }); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + test('details is set correct for compact view after two clicks on summary. In particular, it should NOT contain the attribute open="".', () => { + const attributionControl = new AttributionControl({ + compact: true }); + map.addControl(attributionControl); + const container = map.getContainer(); + const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); - test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is open.', () => { - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); - const attributionControl = new AttributionControl({ - }); - map.addControl(attributionControl); - const toggle = map.getContainer().querySelector('.maplibregl-ctrl-attrib-button'); - simulate.click(toggle); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true}); - map.resize(); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); - map.resize(); + simulate.click(toggle); + simulate.click(toggle); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); - }); }); - describe('Details is set correct for default view (compact === false)', () => { - test('It SHOULD contain the attribute open="" if offsetWidth <= 640.', () => { - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); - const attributionControl = new AttributionControl({ - compact: false - }); - map.addControl(attributionControl); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - }); - - test('It SHOULD contain the attribute open="" if offsetWidth > 640.', () => { - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); - const attributionControl = new AttributionControl({ - compact: false - }); - map.addControl(attributionControl); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + test('details is set correct for default view. In particular, it SHOULD contain the attribute open="".', () => { + const attributionControl = new AttributionControl({ }); + map.addControl(attributionControl); - test('The attribute open="" should NOT change on resize.', () => { - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); - const attributionControl = new AttributionControl({ - compact: false - }); - map.addControl(attributionControl); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); - map.resize(); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); - - Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); - map.resize(); - - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
, ] `); - }); }); }); diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index 097602727df..27aa152d213 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -53,19 +53,13 @@ class AttributionControl implements IControl { this._map = map; 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); - - if (compact !== false) { - this._compactButton.addEventListener('click', this._toggleAttribution); - } - + 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); if (compact) { this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); - } - - if (!compact) { + } else { this._container.setAttribute('open', ''); } @@ -174,12 +168,8 @@ class AttributionControl implements IControl { _updateCompact() { if (this._map.getCanvasContainer().offsetWidth <= 640) { - if (!this._container.classList.contains('maplibregl-compact')) { - this._container.removeAttribute('open'); - } this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); } else { - this._container.setAttribute('open', ''); this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show'); } } From 7faee20fdf87e207e096b29286d1fdb5ec1573da Mon Sep 17 00:00:00 2001 From: acalcutt Date: Sat, 11 Dec 2021 13:20:15 -0500 Subject: [PATCH 13/22] Try to simplify attribution control fix --- src/ui/control/attribution_control.ts | 25 ++++--------------------- 1 file changed, 4 insertions(+), 21 deletions(-) diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index 097602727df..a5fff6d1535 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -48,36 +48,19 @@ class AttributionControl implements IControl { } onAdd(map: Map) { - const compact = this.options && this.options.compact; - this._map = map; 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); - - if (compact !== false) { - this._compactButton.addEventListener('click', this._toggleAttribution); - } - + 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); - - if (compact) { - this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); - } - - if (!compact) { - this._container.setAttribute('open', ''); - } - + + this._updateCompact(); this._updateAttributions(); this._map.on('styledata', this._updateData); this._map.on('sourcedata', this._updateData); - - if (compact === undefined) { - this._map.on('resize', this._updateCompact); - this._updateCompact(); - } + this._map.on('resize', this._updateCompact); return this._container; } From 6480b22cdc6e3f044d5ddf226bf4735e391b767d Mon Sep 17 00:00:00 2001 From: acalcutt Date: Sat, 11 Dec 2021 14:00:54 -0500 Subject: [PATCH 14/22] Revert "Update .gitignore" This reverts commit 032b16e5707ec0e95086a4f6d87f5df12961333e. --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 734e2216b86..715d1ee3fd1 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ /dist/ /dist_type/ *.es.js +*.js.map node_modules *.sublime-* coverage From 772381b4943a9a5f16d34f98498563f4d0dc3bb0 Mon Sep 17 00:00:00 2001 From: acalcutt Date: Sat, 11 Dec 2021 14:11:05 -0500 Subject: [PATCH 15/22] fix "error Trailing spaces not allowed" --- src/ui/control/attribution_control.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index a5fff6d1535..2dc972ebb9e 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -54,7 +54,7 @@ class AttributionControl implements IControl { 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(); From e42e275a9c04f8e4d2a27949216a68531aa1b8cc Mon Sep 17 00:00:00 2001 From: acalcutt Date: Sat, 11 Dec 2021 17:06:51 -0500 Subject: [PATCH 16/22] fix ignoring the compact option --- src/ui/control/attribution_control.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index 2dc972ebb9e..c388c5abe5d 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -156,7 +156,8 @@ class AttributionControl implements IControl { } _updateCompact() { - if (this._map.getCanvasContainer().offsetWidth <= 640) { + const compact = this.options && this.options.compact; + if (this._map.getCanvasContainer().offsetWidth <= 640 || compact) { if (!this._container.classList.contains('maplibregl-compact')) { this._container.removeAttribute('open'); } From b374fec3fd66765dc6aaaa539dc1050863cb311e Mon Sep 17 00:00:00 2001 From: acalcutt Date: Sat, 11 Dec 2021 21:07:49 -0500 Subject: [PATCH 17/22] fix not being open below 640 when compact = false --- src/ui/control/attribution_control.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index c388c5abe5d..351025659a1 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -158,10 +158,14 @@ class AttributionControl implements IControl { _updateCompact() { const compact = this.options && this.options.compact; if (this._map.getCanvasContainer().offsetWidth <= 640 || compact) { - if (!this._container.classList.contains('maplibregl-compact')) { + if (compact !== false) { this._container.removeAttribute('open'); + if (!this._container.classList.contains('maplibregl-compact')) { + this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); + } + } else { + this._container.setAttribute('open', ''); } - this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); } else { this._container.setAttribute('open', ''); this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show'); From 3494fc9ca152d817e4176a38608ad32785682335 Mon Sep 17 00:00:00 2001 From: acalcutt Date: Sat, 11 Dec 2021 22:06:03 -0500 Subject: [PATCH 18/22] add check if class exists before removing it --- src/ui/control/attribution_control.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index 351025659a1..e1a7addc816 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -168,7 +168,9 @@ class AttributionControl implements IControl { } } else { this._container.setAttribute('open', ''); - this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show'); + if (this._container.classList.contains('maplibregl-compact')) { + this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show'); + } } } From 60e7b6b88363a0cb6afe4c15a80f9bdb1b6be8ff Mon Sep 17 00:00:00 2001 From: acalcutt Date: Sat, 11 Dec 2021 23:03:23 -0500 Subject: [PATCH 19/22] fix open being removed on resize --- src/ui/control/attribution_control.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index e1a7addc816..81bd1d6a900 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -159,8 +159,8 @@ class AttributionControl implements IControl { const compact = this.options && this.options.compact; if (this._map.getCanvasContainer().offsetWidth <= 640 || compact) { if (compact !== false) { - this._container.removeAttribute('open'); if (!this._container.classList.contains('maplibregl-compact')) { + this._container.removeAttribute('open'); this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); } } else { From c1ec082d0f155026b1ce61874f668bb91e064e5b Mon Sep 17 00:00:00 2001 From: acalcutt Date: Sat, 11 Dec 2021 23:42:08 -0500 Subject: [PATCH 20/22] un-reverse logic it was giving me a headache --- src/ui/control/attribution_control.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index 81bd1d6a900..66466530dc4 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -158,13 +158,13 @@ class AttributionControl implements IControl { _updateCompact() { const compact = this.options && this.options.compact; if (this._map.getCanvasContainer().offsetWidth <= 640 || compact) { - if (compact !== false) { + if (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 { - this._container.setAttribute('open', ''); } } else { this._container.setAttribute('open', ''); From e0d86a3a842dc88287f1595cdbf578650ae1c4c1 Mon Sep 17 00:00:00 2001 From: acalcutt Date: Sun, 12 Dec 2021 13:13:23 -0500 Subject: [PATCH 21/22] fix class order to make tests pass --- src/ui/control/attribution_control.test.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts index 7302687916b..4d9bba00983 100644 --- a/src/ui/control/attribution_control.test.ts +++ b/src/ui/control/attribution_control.test.ts @@ -361,7 +361,7 @@ NodeList [ expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` NodeList [
Date: Tue, 14 Dec 2021 11:47:24 +0100 Subject: [PATCH 22/22] change snapshot test to only check the attribute open --- src/ui/control/attribution_control.test.ts | 393 ++------------------- 1 file changed, 25 insertions(+), 368 deletions(-) diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts index 7302687916b..42e2f87d936 100644 --- a/src/ui/control/attribution_control.test.ts +++ b/src/ui/control/attribution_control.test.ts @@ -266,7 +266,7 @@ describe('AttributionControl', () => { }); -describe('AttributionControl Snapshot Tests', () => { +describe('AttributionControl test regarding the HTML elements details and summary', () => { describe('Details is set correct for compact view', () => { test('It should NOT contain the attribute open="" on first load.', () => { const attributionControl = new AttributionControl({ @@ -274,22 +274,7 @@ describe('AttributionControl Snapshot Tests', () => { }); map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull(); }); test('It SHOULD contain the attribute open="" after click on summary.', () => { @@ -302,23 +287,7 @@ NodeList [ simulate.click(toggle); - expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe(''); }); test('It should NOT contain the attribute open="" after two clicks on summary.', () => { @@ -330,24 +299,10 @@ NodeList [ const toggle = container.querySelector('.maplibregl-ctrl-attrib-button'); simulate.click(toggle); - simulate.click(toggle); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe(''); - expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + simulate.click(toggle); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull(); }); }); @@ -358,22 +313,7 @@ NodeList [ }); map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull(); }); test('It SHOULD contain the attribute open="" if offsetWidth > 640.', () => { @@ -382,23 +322,7 @@ NodeList [ }); map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + 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.', () => { @@ -407,63 +331,17 @@ NodeList [ }); map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull(); Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true}); map.resize(); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + 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')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull(); }); test('The attribute open="" should NOT change on resize from > 640 to another > 640.', () => { @@ -472,65 +350,17 @@ NodeList [ }); map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe(''); Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 650, configurable: true}); map.resize(); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + 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')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + 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 if it is closed.', () => { @@ -539,62 +369,17 @@ NodeList [ }); map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull(); Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true}); map.resize(); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull(); Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true}); map.resize(); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull(); }); test('The attribute open="" should NOT change on resize from <= 640 to another <= 640 if it is open.', () => { @@ -605,65 +390,17 @@ NodeList [ const toggle = map.getContainer().querySelector('.maplibregl-ctrl-attrib-button'); simulate.click(toggle); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe(''); Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true}); map.resize(); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + 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')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe(''); }); }); @@ -675,23 +412,7 @@ NodeList [ }); map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe(''); }); test('It SHOULD contain the attribute open="" if offsetWidth > 640.', () => { @@ -701,23 +422,7 @@ NodeList [ }); map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe(''); }); test('The attribute open="" should NOT change on resize.', () => { @@ -727,65 +432,17 @@ NodeList [ }); map.addControl(attributionControl); - expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + 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')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + 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')).toMatchInlineSnapshot(` -NodeList [ -
- -
-
, -] -`); + expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe(''); }); }); });