Skip to content

Commit

Permalink
Fix attibution controll (#668)
Browse files Browse the repository at this point in the history 
* fix attribution control

* we do not need this

* it is in 'compact = undefined'

* work on attribute open on resize and compact = false

* only remove the attribute open from container in compact===undefined mode, if it changed from big to small size

* add tests for last comit

* Update CHANGELOG.md

* Revert "Update CHANGELOG.md"

This reverts commit 0b81a41.

* attribution fixes (from astridx)

a1272d9

b9b0370

* Update .gitignore

* fix missing new line lint complained about

* Revert "attribution fixes (from astridx)"

This reverts commit 2031d8e.

* Try to simplify attribution control fix

* Revert "Update .gitignore"

This reverts commit 032b16e.

* fix "error  Trailing spaces not allowed"

* fix ignoring the compact option

* fix not being open below 640 when compact = false

* add check if class exists before removing it

* fix open being removed on resize

* un-reverse logic

it was giving me a headache

* fix class order to make tests pass

* change snapshot test to only check the attribute open

Co-authored-by: Andrew Calcutt <[email protected]>
Co-authored-by: acalcutt <[email protected]>
  • Loading branch information
@astridx @acalcutt
3 people authored Dec 21, 2021
1 parent d8f74e8 commit 4930680
Show file tree
Hide file tree
Showing 2 changed files with 194 additions and 118 deletions.
280 changes: 178 additions & 102 deletions src/ui/control/attribution_control.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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());

Expand Down Expand Up @@ -264,109 +264,185 @@ 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 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({
compact: true
});
map.addControl(attributionControl);

expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
});
map.addControl(attributionControl);

expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
NodeList [
<details
class="maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib maplibregl-compact mapboxgl-compact maplibregl-attrib-empty mapboxgl-attrib-empty"
>
<summary
aria-label="Toggle attribution"
class="maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button"
title="Toggle attribution"
/>
<div
class="maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner"
/>
</details>,
]
`);
});
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');

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
simulate.click(toggle);

expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
});
map.addControl(attributionControl);
const container = map.getContainer();
const toggle = container.querySelector('.maplibregl-ctrl-attrib-button');

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);
expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');

expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
NodeList [
<details
class="maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib maplibregl-compact mapboxgl-compact maplibregl-attrib-empty mapboxgl-attrib-empty maplibregl-compact-show mapboxgl-compact-show"
open=""
>
<summary
aria-label="Toggle attribution"
class="maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button"
title="Toggle attribution"
/>
<div
class="maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner"
/>
</details>,
]
`);
simulate.click(toggle);
expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
});
});

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
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')[0].getAttribute('open')).toBeNull();
});
map.addControl(attributionControl);
const container = map.getContainer();
const toggle = container.querySelector('.maplibregl-ctrl-attrib-button');

simulate.click(toggle);
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(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.', () => {
Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
const attributionControl = new AttributionControl({
});
map.addControl(attributionControl);

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')[0].getAttribute('open')).toBe('');

expect(container.querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
NodeList [
<details
class="maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib maplibregl-compact mapboxgl-compact maplibregl-attrib-empty mapboxgl-attrib-empty"
>
<summary
aria-label="Toggle attribution"
class="maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button"
title="Toggle attribution"
/>
<div
class="maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner"
/>
</details>,
]
`);
Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
map.resize();

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.', () => {
Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
const attributionControl = new AttributionControl({
});
map.addControl(attributionControl);

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')[0].getAttribute('open')).toBe('');

Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
map.resize();

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.', () => {
Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
const attributionControl = new AttributionControl({
});
map.addControl(attributionControl);

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')[0].getAttribute('open')).toBeNull();

Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
map.resize();

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.', () => {
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')[0].getAttribute('open')).toBe('');

Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 630, configurable: true});
map.resize();

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')).toBe('');
});
});

test('details is set correct for default view. In particular, it SHOULD contain the attribute open="".', () => {
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')[0].getAttribute('open')).toBe('');
});
map.addControl(attributionControl);

expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')).toMatchInlineSnapshot(`
NodeList [
<details
class="maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib maplibregl-attrib-empty mapboxgl-attrib-empty maplibregl-compact mapboxgl-compact"
open=""
>
<summary
aria-label="Toggle attribution"
class="maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button"
title="Toggle attribution"
/>
<div
class="maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner"
/>
</details>,
]
`);
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')[0].getAttribute('open')).toBe('');
});

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')[0].getAttribute('open')).toBe('');

Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
map.resize();

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')).toBe('');
});
});
});
32 changes: 16 additions & 16 deletions src/ui/control/attribution_control.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,30 +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);
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 {
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;
}
Expand Down Expand Up @@ -167,10 +156,21 @@ class AttributionControl implements IControl {
}

_updateCompact() {
if (this._map.getCanvasContainer().offsetWidth <= 640) {
this._container.classList.add('maplibregl-compact', 'mapboxgl-compact');
const compact = this.options && this.options.compact;
if (this._map.getCanvasContainer().offsetWidth <= 640 || compact) {
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.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show');
this._container.setAttribute('open', '');
if (this._container.classList.contains('maplibregl-compact')) {
this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show');
}
}
}

Expand Down

0 comments on commit 4930680

Please sign in to comment.