2019-11-03 14:18:16 +01:00
|
|
|
/**
|
|
|
|
* @typedef {import('../../../types/index').Choices.passedElement} passedElement
|
|
|
|
* @typedef {import('../../../types/index').Choices.ClassNames} ClassNames
|
|
|
|
*/
|
|
|
|
|
2017-08-16 13:40:09 +02:00
|
|
|
export default class Dropdown {
|
2019-11-03 14:18:16 +01:00
|
|
|
/**
|
|
|
|
* @param {{
|
|
|
|
* element: HTMLElement,
|
|
|
|
* type: passedElement['type'],
|
|
|
|
* classNames: ClassNames,
|
|
|
|
* }} args
|
|
|
|
*/
|
2018-05-21 18:01:03 +02:00
|
|
|
constructor({ element, type, classNames }) {
|
2019-11-03 14:18:16 +01:00
|
|
|
this.element = element;
|
|
|
|
this.classNames = classNames;
|
|
|
|
this.type = type;
|
2017-08-16 17:59:10 +02:00
|
|
|
this.isActive = false;
|
|
|
|
}
|
|
|
|
|
2017-08-29 13:56:54 +02:00
|
|
|
/**
|
2019-10-30 18:28:15 +01:00
|
|
|
* Bottom position of dropdown in viewport coordinates
|
2019-11-03 14:18:16 +01:00
|
|
|
* @returns {number} Vertical position
|
2017-08-29 13:56:54 +02:00
|
|
|
*/
|
2019-10-30 18:28:15 +01:00
|
|
|
get distanceFromTopWindow() {
|
|
|
|
return this.element.getBoundingClientRect().bottom;
|
2017-08-16 13:40:09 +02:00
|
|
|
}
|
|
|
|
|
2017-08-29 13:56:54 +02:00
|
|
|
/**
|
|
|
|
* Find element that matches passed selector
|
2019-11-03 14:18:16 +01:00
|
|
|
* @param {string} selector
|
|
|
|
* @returns {HTMLElement | null}
|
2017-08-29 13:56:54 +02:00
|
|
|
*/
|
|
|
|
getChild(selector) {
|
|
|
|
return this.element.querySelector(selector);
|
2017-08-16 13:40:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Show dropdown to user by adding active state class
|
2019-11-03 14:18:16 +01:00
|
|
|
* @returns {this}
|
2017-08-16 13:40:09 +02:00
|
|
|
*/
|
|
|
|
show() {
|
2017-08-16 14:01:17 +02:00
|
|
|
this.element.classList.add(this.classNames.activeState);
|
|
|
|
this.element.setAttribute('aria-expanded', 'true');
|
2017-08-16 13:40:09 +02:00
|
|
|
this.isActive = true;
|
2019-10-29 19:26:11 +01:00
|
|
|
|
2018-05-21 18:01:03 +02:00
|
|
|
return this;
|
2017-08-16 13:40:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Hide dropdown from user
|
2019-11-03 14:18:16 +01:00
|
|
|
* @returns {this}
|
2017-08-16 13:40:09 +02:00
|
|
|
*/
|
|
|
|
hide() {
|
2017-08-16 14:01:17 +02:00
|
|
|
this.element.classList.remove(this.classNames.activeState);
|
2017-08-16 13:40:09 +02:00
|
|
|
this.element.setAttribute('aria-expanded', 'false');
|
|
|
|
this.isActive = false;
|
2019-10-29 19:26:11 +01:00
|
|
|
|
2018-05-21 18:01:03 +02:00
|
|
|
return this;
|
2017-08-16 13:40:09 +02:00
|
|
|
}
|
|
|
|
}
|