2017-08-16 13:40:09 +02:00
|
|
|
export default class Dropdown {
|
2017-08-16 14:01:17 +02:00
|
|
|
constructor(instance, element, classNames) {
|
2017-10-11 10:19:13 +02:00
|
|
|
this.parentInstance = instance;
|
2017-08-16 13:40:09 +02:00
|
|
|
this.element = element;
|
2017-08-16 14:01:17 +02:00
|
|
|
this.classNames = classNames;
|
2017-08-16 17:59:10 +02:00
|
|
|
this.dimensions = null;
|
|
|
|
this.position = null;
|
|
|
|
this.isActive = false;
|
|
|
|
}
|
|
|
|
|
2017-08-29 13:56:54 +02:00
|
|
|
/**
|
|
|
|
* Determine how far the top of our element is from
|
|
|
|
* the top of the window
|
|
|
|
* @return {Number} Vertical position
|
|
|
|
*/
|
2018-04-24 13:54:45 +02:00
|
|
|
distanceFromTopWindow() {
|
2017-08-16 13:40:09 +02:00
|
|
|
this.dimensions = this.element.getBoundingClientRect();
|
2017-09-06 09:48:42 +02:00
|
|
|
this.position = Math.ceil(this.dimensions.top + window.pageYOffset + this.element.offsetHeight);
|
2017-08-16 17:59:10 +02:00
|
|
|
return this.position;
|
2017-08-16 13:40:09 +02:00
|
|
|
}
|
|
|
|
|
2017-08-29 13:56:54 +02:00
|
|
|
/**
|
|
|
|
* Find element that matches passed selector
|
|
|
|
* @return {HTMLElement}
|
|
|
|
*/
|
|
|
|
getChild(selector) {
|
|
|
|
return this.element.querySelector(selector);
|
2017-08-16 13:40:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Show dropdown to user by adding active state class
|
|
|
|
* @return {Object} Class instance
|
|
|
|
* @public
|
|
|
|
*/
|
|
|
|
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;
|
2017-10-11 10:19:13 +02:00
|
|
|
return this.parentInstance;
|
2017-08-16 13:40:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Hide dropdown from user
|
|
|
|
* @return {Object} Class instance
|
|
|
|
* @public
|
|
|
|
*/
|
|
|
|
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;
|
2017-10-11 10:19:13 +02:00
|
|
|
return this.parentInstance;
|
2017-08-16 13:40:09 +02:00
|
|
|
}
|
|
|
|
}
|