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.

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

add Popup methods to manipulate container class names #8759

Merged
merged 9 commits into from
Oct 30, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,4 @@ _site
yarn-error.log
yarn-debug.log
npm-debug.log
.idea
Ashot-KR marked this conversation as resolved.
Show resolved Hide resolved
42 changes: 42 additions & 0 deletions src/ui/popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,47 @@ export default class Popup extends Evented {
return this;
}

/**
* Adds a CSS class to the popup container element.
*
* @param {string} className Non-empty string with CSS class name to add to popup container
*
* @example
* let popup = new mapboxgl.Popup()
* popup.addClassName('some-class')
*/
addClassName(className: string) {
this._container.classList.add(className);
}

/**
* Removes a CSS class from the popup container element.
*
* @param {string} className Non-empty string with CSS class name to remove from popup container
*
* @example
* let popup = new mapboxgl.Popup()
* popup.removeClassName('some-class')
*/
removeClassName(className: string) {
this._container.classList.remove(className);
}

/**
* Add or remove the given CSS class on the popup container, depending on whether the container currently has that class.
*
* @param {string} className Non-empty string with CSS class name to add/remove
*
* @returns {boolean} if the class was removed return false, if class was added, then return true
*
* @example
* let popup = new mapboxgl.Popup()
* popup.toggleClassName('toggleClass')
*/
toggleClassName(className: string) {
return this._container.classList.toggle(className);
}

_createContent() {
if (this._content) {
DOM.remove(this._content);
Expand Down Expand Up @@ -367,6 +408,7 @@ export default class Popup extends Evented {
this.options.className.split(' ').forEach(name =>
this._container.classList.add(name));
}

if (this._trackPointer) {
this._container.classList.add('mapboxgl-popup-track-pointer');
}
Expand Down
23 changes: 22 additions & 1 deletion test/unit/ui/popup.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -495,7 +495,7 @@ test('Popup#remove is idempotent (#2395)', (t) => {
t.end();
});

test('Popup adds classes from className option', (t) => {
test('Popup adds classes from className option, methods for class manipulations works properly', (t) => {
Ashot-KR marked this conversation as resolved.
Show resolved Hide resolved
const map = createMap(t);
const popup = new Popup({className: 'some classes'})
.setText('Test')
Expand All @@ -505,6 +505,27 @@ test('Popup adds classes from className option', (t) => {
const popupContainer = popup.getElement();
t.ok(popupContainer.classList.contains('some'));
t.ok(popupContainer.classList.contains('classes'));

popup.addClassName('addedClass');
t.ok(popupContainer.classList.contains('addedClass'));

popup.removeClassName('addedClass');
t.ok(!popupContainer.classList.contains('addedClass'));

popup.toggleClassName('toggle');
t.ok(popupContainer.classList.contains('toggle'));

popup.toggleClassName('toggle');
t.ok(!popupContainer.classList.contains('toggle'));

t.throws(() => popup.addClassName('should throw exception'), window.DOMException);
t.throws(() => popup.removeClassName('should throw exception'), window.DOMException);
t.throws(() => popup.toggleClassName('should throw exception'), window.DOMException);

t.throws(() => popup.addClassName(''), window.DOMException);
t.throws(() => popup.removeClassName(''), window.DOMException);
t.throws(() => popup.toggleClassName(''), window.DOMException);

t.end();
});

Expand Down