app/assets/javascripts/knowledge_base_public/dropdown.js
(function() {
document.addEventListener('DOMContentLoaded', function(event) {
document
.querySelectorAll('[data-toggle="dropdown"]')
.forEach(function(elem) {
elem.addEventListener('click', toggleDropdown)
})
document
.querySelectorAll('.dropdown-menu')
.forEach(function(elem) {
elem.addEventListener('click', function(event) { event.stopPropagation() })
})
})
function toggleDropdown(event){
event.stopPropagation()
event.preventDefault()
var elem = event.target.closest('div').querySelector('.dropdown-menu')
var open = elem.classList.toggle('is-open')
if(elem.setAttribute) // not supported by IE11
elem.setAttribute('aria-expanded', open ? 'true' : 'false')
if(open) {
window.addEventListener('click', globalCloseDropdown)
} else {
window.removeEventListener('click', globalCloseDropdown)
}
}
function globalCloseDropdown(event){
event.stopPropagation()
event.preventDefault()
event
.target
.querySelectorAll('.dropdown-menu.is-open')
.forEach(function(elem) {
elem.classList.remove('is-open')
elem.setAttribute('aria-expanded', 'false')
})
window.removeEventListener('click', globalCloseDropdown)
}
}())