Skip to content

Commit

Permalink
Add Popup.getElement method (#8123)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mourner
Brave Cow authored and mourner committed Apr 6, 2019
1 parent ceb2e03 commit 9e6c6d9
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 50 deletions.
8 changes: 8 additions & 0 deletions src/ui/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,14 @@ export default class Popup extends Evented {
return this;
}

/**
* Returns the `Popup`'s HTML element.
* @returns {HTMLElement} element
*/
getElement() {
return this._container;
}

/**
* Sets the popup's content to a string of text.
*
Expand Down
112 changes: 62 additions & 50 deletions test/unit/ui/popup.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,22 @@ function createMap(t, options) {
return globalCreateMap(t, { container });
}

test('Popup#getElement returns a .mapboxgl-popup element', (t) => {
const map = createMap(t);
const popup = new Popup()
.setText('Test')
.setLngLat([0, 0])
.addTo(map);

t.ok(popup.isOpen());
t.ok(popup.getElement().classList.contains('mapboxgl-popup'));
t.end();
});

test('Popup#addTo adds a .mapboxgl-popup element', (t) => {
const map = createMap(t);
const popup = new Popup()
.setText("Test")
.setText('Test')
.setLngLat([0, 0])
.addTo(map);

Expand All @@ -32,7 +44,7 @@ test('Popup#addTo adds a .mapboxgl-popup element', (t) => {
test('Popup closes on map click events by default', (t) => {
const map = createMap(t);
const popup = new Popup()
.setText("Test")
.setText('Test')
.setLngLat([0, 0])
.addTo(map);

Expand All @@ -45,7 +57,7 @@ test('Popup closes on map click events by default', (t) => {
test('Popup does not close on map click events when the closeOnClick option is false', (t) => {
const map = createMap(t);
const popup = new Popup({closeOnClick: false})
.setText("Test")
.setText('Test')
.setLngLat([0, 0])
.addTo(map);

Expand All @@ -58,11 +70,11 @@ test('Popup does not close on map click events when the closeOnClick option is f
test('Popup closes on close button click events', (t) => {
const map = createMap(t);
const popup = new Popup()
.setText("Test")
.setText('Test')
.setLngLat([0, 0])
.addTo(map);

simulateClick(map.getContainer().querySelector('.mapboxgl-popup-close-button'));
simulateClick(popup.getElement().querySelector('.mapboxgl-popup-close-button'));

t.ok(!popup.isOpen());
t.end();
Expand All @@ -71,12 +83,12 @@ test('Popup closes on close button click events', (t) => {
test('Popup has no close button if closeButton option is false', (t) => {
const map = createMap(t);

new Popup({closeButton: false})
.setText("Test")
const popup = new Popup({closeButton: false})
.setText('Test')
.setLngLat([0, 0])
.addTo(map);

t.equal(map.getContainer().querySelectorAll('.mapboxgl-popup-close-button').length, 0);
t.equal(popup.getElement().querySelectorAll('.mapboxgl-popup-close-button').length, 0);
t.end();
});

Expand All @@ -85,7 +97,7 @@ test('Popup fires close event when removed', (t) => {
const onClose = t.spy();

new Popup()
.setText("Test")
.setText('Test')
.setLngLat([0, 0])
.on('close', onClose)
.addTo(map)
Expand All @@ -101,7 +113,7 @@ test('Popup fires open event when added', (t) => {
const onOpen = t.spy();

new Popup()
.setText("Test")
.setText('Test')
.setLngLat([0, 0])
.on('open', onOpen)
.addTo(map);
Expand All @@ -113,24 +125,24 @@ test('Popup fires open event when added', (t) => {
test('Popup content can be set via setText', (t) => {
const map = createMap(t);

new Popup({closeButton: false})
const popup = new Popup({closeButton: false})
.setLngLat([0, 0])
.addTo(map)
.setText("Test");
.setText('Test');

t.equal(map.getContainer().querySelector('.mapboxgl-popup').textContent, "Test");
t.equal(popup.getElement().textContent, 'Test');
t.end();
});

test('Popup content can be set via setHTML', (t) => {
const map = createMap(t);

new Popup({closeButton: false})
const popup = new Popup({closeButton: false})
.setLngLat([0, 0])
.addTo(map)
.setHTML("<span>Test</span>");

t.equal(map.getContainer().querySelector('.mapboxgl-popup-content').innerHTML, "<span>Test</span>");
t.equal(popup.getElement().querySelector('.mapboxgl-popup-content').innerHTML, "<span>Test</span>");
t.end();
});

Expand All @@ -142,19 +154,19 @@ test('Popup width maximum defaults to 240px', (t) => {
.addTo(map)
.setHTML("<span>Test</span>");

t.equal(popup.getMaxWidth(), "240px");
t.equal(popup.getMaxWidth(), '240px');
t.end();
});

test('Popup width maximum can be set via using maxWidth option', (t) => {
const map = createMap(t);

const popup = new Popup({closeButton: false, maxWidth: "5px"})
const popup = new Popup({closeButton: false, maxWidth: '5px'})
.setLngLat([0, 0])
.addTo(map)
.setHTML("<span>Test</span>");

t.equal(popup.getMaxWidth(), "5px");
t.equal(popup.getMaxWidth(), '5px');
t.end();
});

Expand All @@ -164,35 +176,35 @@ test('Popup width maximum can be set via maxWidth', (t) => {
const popup = new Popup({closeButton: false})
.setLngLat([0, 0])
.setHTML("<span>Test</span>")
.setMaxWidth("5px")
.setMaxWidth('5px')
.addTo(map);

t.equal(popup.getMaxWidth(), "5px");
t.equal(popup.getMaxWidth(), '5px');
t.end();
});

test('Popup content can be set via setDOMContent', (t) => {
const map = createMap(t);
const content = window.document.createElement('span');

new Popup({closeButton: false})
const popup = new Popup({closeButton: false})
.setLngLat([0, 0])
.addTo(map)
.setDOMContent(content);

t.equal(map.getContainer().querySelector('.mapboxgl-popup-content').firstChild, content);
t.equal(popup.getElement().querySelector('.mapboxgl-popup-content').firstChild, content);
t.end();
});

test('Popup#setText protects against XSS', (t) => {
const map = createMap(t);

new Popup({closeButton: false})
const popup = new Popup({closeButton: false})
.setLngLat([0, 0])
.addTo(map)
.setText("<script>alert('XSS')</script>");

t.equal(map.getContainer().querySelector('.mapboxgl-popup').textContent, "<script>alert('XSS')</script>");
t.equal(popup.getElement().textContent, "<script>alert('XSS')</script>");
t.end();
});

Expand All @@ -203,14 +215,14 @@ test('Popup content setters overwrite previous content', (t) => {
.setLngLat([0, 0])
.addTo(map);

popup.setText("Test 1");
t.equal(map.getContainer().querySelector('.mapboxgl-popup').textContent, "Test 1");
popup.setText('Test 1');
t.equal(popup.getElement().textContent, 'Test 1');

popup.setHTML("Test 2");
t.equal(map.getContainer().querySelector('.mapboxgl-popup').textContent, "Test 2");
popup.setHTML('Test 2');
t.equal(popup.getElement().textContent, 'Test 2');

popup.setDOMContent(window.document.createTextNode("Test 3"));
t.equal(map.getContainer().querySelector('.mapboxgl-popup').textContent, "Test 3");
popup.setDOMContent(window.document.createTextNode('Test 3'));
t.equal(popup.getElement().textContent, 'Test 3');

t.end();
});
Expand Down Expand Up @@ -332,7 +344,7 @@ test('Popup anchors as specified by the anchor option', (t) => {
.setText('Test')
.addTo(map);

t.ok(popup._container.classList.contains('mapboxgl-popup-anchor-top-left'));
t.ok(popup.getElement().classList.contains('mapboxgl-popup-anchor-top-left'));
t.end();
});

Expand All @@ -358,13 +370,13 @@ test('Popup anchors as specified by the anchor option', (t) => {
.setText('Test')
.addTo(map);

Object.defineProperty(popup._container, 'offsetWidth', {value: 100});
Object.defineProperty(popup._container, 'offsetHeight', {value: 100});
Object.defineProperty(popup.getElement(), 'offsetWidth', {value: 100});
Object.defineProperty(popup.getElement(), 'offsetHeight', {value: 100});

t.stub(map, 'project').returns(point);
popup.setLngLat([0, 0]);

t.ok(popup._container.classList.contains(`mapboxgl-popup-anchor-${anchor}`));
t.ok(popup.getElement().classList.contains(`mapboxgl-popup-anchor-${anchor}`));
t.end();
});

Expand All @@ -377,7 +389,7 @@ test('Popup anchors as specified by the anchor option', (t) => {
.setText('Test')
.addTo(map);

t.equal(popup._container.style.transform, transform);
t.equal(popup.getElement().style.transform, transform);
t.end();
});
});
Expand All @@ -394,13 +406,13 @@ test('Popup automatically anchors to top if its bottom offset would push it off-
.setText('Test')
.addTo(map);

Object.defineProperty(popup._container, 'offsetWidth', {value: containerWidth / 2});
Object.defineProperty(popup._container, 'offsetHeight', {value: containerHeight / 2});
Object.defineProperty(popup.getElement(), 'offsetWidth', {value: containerWidth / 2});
Object.defineProperty(popup.getElement(), 'offsetHeight', {value: containerHeight / 2});

t.stub(map, 'project').returns(point);
popup.setLngLat([0, 0]);

t.ok(popup._container.classList.contains('mapboxgl-popup-anchor-top'));
t.ok(popup.getElement().classList.contains('mapboxgl-popup-anchor-top'));
t.end();
});

Expand All @@ -413,7 +425,7 @@ test('Popup is offset via a PointLike offset option', (t) => {
.setText('Test')
.addTo(map);

t.equal(popup._container.style.transform, 'translate(0,0) translate(5px,10px)');
t.equal(popup.getElement().style.transform, 'translate(0,0) translate(5px,10px)');
t.end();
});

Expand All @@ -426,7 +438,7 @@ test('Popup is offset via an object offset option', (t) => {
.setText('Test')
.addTo(map);

t.equal(popup._container.style.transform, 'translate(0,0) translate(5px,10px)');
t.equal(popup.getElement().style.transform, 'translate(0,0) translate(5px,10px)');
t.end();
});

Expand All @@ -439,15 +451,15 @@ test('Popup is offset via an incomplete object offset option', (t) => {
.setText('Test')
.addTo(map);

t.equal(popup._container.style.transform, 'translate(-100%,0) translate(0px,0px)');
t.equal(popup.getElement().style.transform, 'translate(-100%,0) translate(0px,0px)');
t.end();
});

test('Popup can be removed and added again (#1477)', (t) => {
const map = createMap(t);

new Popup()
.setText("Test")
.setText('Test')
.setLngLat([0, 0])
.addTo(map)
.remove()
Expand All @@ -460,21 +472,21 @@ test('Popup can be removed and added again (#1477)', (t) => {
test('Popup#addTo is idempotent (#1811)', (t) => {
const map = createMap(t);

new Popup({closeButton: false})
.setText("Test")
const popup = new Popup({closeButton: false})
.setText('Test')
.setLngLat([0, 0])
.addTo(map)
.addTo(map);

t.equal(map.getContainer().querySelector('.mapboxgl-popup-content').textContent, "Test");
t.equal(popup.getElement().querySelector('.mapboxgl-popup-content').textContent, 'Test');
t.end();
});

test('Popup#remove is idempotent (#2395)', (t) => {
const map = createMap(t);

new Popup({closeButton: false})
.setText("Test")
.setText('Test')
.setLngLat([0, 0])
.addTo(map)
.remove()
Expand All @@ -486,12 +498,12 @@ test('Popup#remove is idempotent (#2395)', (t) => {

test('Popup adds classes from className option', (t) => {
const map = createMap(t);
new Popup({className: 'some classes'})
.setText("Test")
const popup = new Popup({className: 'some classes'})
.setText('Test')
.setLngLat([0, 0])
.addTo(map);

const popupContainer = map.getContainer().querySelector('.mapboxgl-popup');
const popupContainer = popup.getElement();
t.ok(popupContainer.classList.contains('some'));
t.ok(popupContainer.classList.contains('classes'));
t.end();
Expand All @@ -500,7 +512,7 @@ test('Popup adds classes from className option', (t) => {
test('Popup closes on Map#remove', (t) => {
const map = createMap(t);
const popup = new Popup()
.setText("Test")
.setText('Test')
.setLngLat([0, 0])
.addTo(map);

Expand Down

0 comments on commit 9e6c6d9

Please sign in to comment.