Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix attibution controll #668

Merged
merged 32 commits into from
Dec 21, 2021
Merged

Fix attibution controll #668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
ebd0d4b
fix attribution control
astridx Nov 30, 2021
e4589f7
we do not need this
astridx Nov 30, 2021
bd5219a
Merge branch 'main' of https://github.com/maplibre/maplibre-gl-js int…
astridx Dec 1, 2021
bd1ee4b
it is in 'compact = undefined'
astridx Dec 1, 2021
c1eb04c
Merge branch 'main' of https://github.com/maplibre/maplibre-gl-js int…
astridx Dec 2, 2021
92e230e
work on attribute open on resize and compact = false
astridx Dec 2, 2021
a1272d9
only remove the attribute open from container in compact===undefined …
astridx Dec 3, 2021
b9b0370
add tests for last comit
astridx Dec 3, 2021
44e7fb0
Merge branch 'main' of https://github.com/maplibre/maplibre-gl-js int…
astridx Dec 4, 2021
0b81a41
Update CHANGELOG.md
acalcutt Dec 6, 2021
2192c1d
Revert "Update CHANGELOG.md"
acalcutt Dec 6, 2021
2031d8e
attribution fixes (from astridx)
acalcutt Dec 6, 2021
032b16e
Update .gitignore
acalcutt Dec 7, 2021
711436a
fix missing new line lint complained about
acalcutt Dec 7, 2021
41be4b5
Merge branch 'maplibre:main' into main
acalcutt Dec 8, 2021
629e818
Merge branch 'maplibre:main' into main
acalcutt Dec 9, 2021
c68a94c
Merge branch 'maplibre:main' into main
acalcutt Dec 11, 2021
53d97eb
Revert "attribution fixes (from astridx)"
acalcutt Dec 11, 2021
197c934
Merge remote-tracking branch 'astridx/attr_fix_2' into fix_attributes
acalcutt Dec 11, 2021
7faee20
Try to simplify attribution control fix
acalcutt Dec 11, 2021
6480b22
Revert "Update .gitignore"
acalcutt Dec 11, 2021
772381b
fix "error Trailing spaces not allowed"
acalcutt Dec 11, 2021
e42e275
fix ignoring the compact option
acalcutt Dec 11, 2021
b374fec
fix not being open below 640 when compact = false
acalcutt Dec 12, 2021
3494fc9
add check if class exists before removing it
acalcutt Dec 12, 2021
60e7b6b
fix open being removed on resize
acalcutt Dec 12, 2021
c1ec082
un-reverse logic
acalcutt Dec 12, 2021
e0d86a3
fix class order to make tests pass
acalcutt Dec 12, 2021
6d7c19b
Merge branch 'main' of https://github.com/maplibre/maplibre-gl-js int…
astridx Dec 13, 2021
a2c09d8
Merge branch 'main' of https://github.com/maplibre/maplibre-gl-js int…
astridx Dec 13, 2021
cf16f69
change snapshot test to only check the attribute open
astridx Dec 14, 2021
5176214
conflict
astridx Dec 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
280 changes: 178 additions & 102 deletions src/ui/control/attribution_control.test.ts
View file
Open in desktop
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
Open in desktop
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