/** * @typedef {import('../../../types/index').Choices.passedElement} passedElement * @typedef {import('../../../types/index').Choices.ClassNames} ClassNames */ export default class Dropdown { /** * @param {{ * element: HTMLElement, * type: passedElement['type'], * classNames: ClassNames, * }} args */ constructor({ element, type, classNames }) { this.element = element; this.classNames = classNames; this.type = type; this.isActive = false; } /** * Bottom position of dropdown in viewport coordinates * @returns {number} Vertical position */ get distanceFromTopWindow() { return this.element.getBoundingClientRect().bottom; } /** * Find element that matches passed selector * @param {string} selector * @returns {HTMLElement | null} */ getChild(selector) { return this.element.querySelector(selector); } /** * Show dropdown to user by adding active state class * @returns {this} */ show() { this.element.classList.add(this.classNames.activeState); this.element.setAttribute('aria-expanded', 'true'); this.isActive = true; return this; } /** * Hide dropdown from user * @returns {this} */ hide() { this.element.classList.remove(this.classNames.activeState); this.element.setAttribute('aria-expanded', 'false'); this.isActive = false; return this; } }