diff --git a/src/ui/control/attribution_control.test.ts b/src/ui/control/attribution_control.test.ts
index bcb7e3a537..31da4478b9 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 27aa152d21..6a1c2ed25b 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