I'm working on improving my knowledge of OOP in JS. I just created this custom dropdown selector. It's working nicely, but I'm not super happy about the Filter
constructor. I would like to make all that code more readable. It's basically just defining some attributes and setting some event listeners.
function Filter(element) {
this.element = element;
this.dropdown = this.element.querySelector('.dropdown');
var link = this.element.querySelector('.link');
var options = this.dropdown.querySelectorAll('a');
var selectOption = function(event) {
event.preventDefault();
link.textContent = event.target.textContent;
this.toggle();
}
for (var i = 0; i < options.length; i++) {
options[i].addEventListener('click', selectOption.bind(this));
}
link.addEventListener('click', this.toggle.bind(this));
};
Filter.prototype.isExpanded = function() {
return !this.dropdown.classList.contains('hidden');
}
Filter.prototype.collapse = function() {
if (this.isExpanded()) {
this.dropdown.classList.add('hidden');
}
}
Filter.prototype.toggle = function() {
if (!this.isExpanded()) {
var filterExpandedEvent = new CustomEvent('filterExpanded', {detail: this});
document.dispatchEvent(filterExpandedEvent);
}
this.dropdown.classList.toggle('hidden');
}
How you would you simplify that constructor? Any ideas?