Skip to content

Commit

Permalink
Add className option to Popup constructor
Browse files Browse the repository at this point in the history
  • Loading branch information
Poluektov Dmitriy authored and jfirebaugh committed Apr 30, 2018
1 parent 25f9afa commit 0c431a6
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 3 deletions.
14 changes: 11 additions & 3 deletions src/ui/popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import type {LngLatLike} from '../geo/lng_lat';

const defaultOptions = {
closeButton: true,
closeOnClick: true
closeOnClick: true,
className: ''
};

export type Offset = number | PointLike | {[Anchor]: PointLike};
Expand All @@ -23,7 +24,8 @@ export type PopupOptions = {
closeButton: boolean,
closeOnClick: boolean,
anchor: Anchor,
offset: Offset
offset: Offset,
className: string
};

/**
Expand All @@ -46,6 +48,7 @@ export type PopupOptions = {
* - a {@link PointLike} specifying a constant offset
* - an object of {@link Point}s specifing an offset for each anchor position
* Negative offsets indicate left and up.
* @param {string} [options.className] Space-separated CSS class names to add to popup container
* @example
* var markerHeight = 50, markerRadius = 10, linearOffset = 25;
* var popupOffsets = {
Expand All @@ -58,7 +61,7 @@ export type PopupOptions = {
* 'left': [markerRadius, (markerHeight - markerRadius) * -1],
* 'right': [-markerRadius, (markerHeight - markerRadius) * -1]
* };
* var popup = new mapboxgl.Popup({offset:popupOffsets})
* var popup = new mapboxgl.Popup({offset: popupOffsets, className: 'my-class'})
* .setLngLat(e.lngLat)
* .setHTML("<h1>Hello World!</h1>")
* .addTo(map);
Expand Down Expand Up @@ -268,6 +271,11 @@ export default class Popup extends Evented {
this._container = DOM.create('div', 'mapboxgl-popup', this._map.getContainer());
this._tip = DOM.create('div', 'mapboxgl-popup-tip', this._container);
this._container.appendChild(this._content);

if (this.options.className) {
this.options.className.split(' ').forEach(name =>
this._container.classList.add(name));
}
}

if (this._map.transform.renderWorldCopies) {
Expand Down
13 changes: 13 additions & 0 deletions test/unit/ui/popup.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -446,3 +446,16 @@ test('Popup#remove is idempotent (#2395)', (t) => {
t.equal(map.getContainer().querySelectorAll('.mapboxgl-popup').length, 0);
t.end();
});

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

const popupContainer = map.getContainer().querySelector('.mapboxgl-popup');
t.ok(popupContainer.classList.contains('some'));
t.ok(popupContainer.classList.contains('classes'));
t.end();
});

0 comments on commit 0c431a6

Please sign in to comment.